@greensight/gds/autokits/cjs/ShadowsAutokit.js

Greensight Design System

var React = require('react');
var index = require('./index-LHcFegvE.js');
var typography = require('./typography-BBxN4_mk.js');
var useTheme = require('./useTheme-DeOpgGLJ.js');
var copyToClipboard = require('./copyToClipboard-DwvgGl08.js');
require('react-dom');
require('./style-inject.es-XZHJH68X.js');

var Shadow = function Shadow(_ref) {
  var name = _ref.name,
    value = _ref.value;
  var colors = typography.baseTheme.colors;
  var buttonRef = React.useRef(null);
  return useTheme.jsx(copyToClipboard.Tooltip, {
    content: "Variable name is copied to the clipboard"
  }, useTheme.jsx("button", {
    ref: buttonRef,
    type: "button",
    onClick: function onClick() {
      return copyToClipboard.copyToClipboard("shadows.".concat(name), buttonRef);
    },
    css: /*#__PURE__*/useTheme.css({
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      width: '100%',
      height: typography.scale(28),
      padding: typography.scale(1),
      backgroundColor: colors.white,
      borderRadius: '24px 24px 24px 0px',
      boxShadow: value,
      transition: 'box-shadow ease 300ms',
      ':focus-visible': {
        outline: 'none',
        boxShadow: "0 0 0 2px ".concat(colors.grey0)
      }
    }, process.env.NODE_ENV === "production" ? "" : ";label:Shadow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNoYWRvdy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJnQiIsImZpbGUiOiJTaGFkb3cudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4uLy4uLy4uL2hlbHBlcnMvY29tbW9uL1Rvb2x0aXAnO1xuaW1wb3J0IHsgY29weVRvQ2xpcGJvYXJkIH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9jb21tb24vY29weVRvQ2xpcGJvYXJkJztcbmltcG9ydCB7IHR5cG9ncmFwaHkgfSBmcm9tICcuLi8uLi8uLi9oZWxwZXJzL2Vtb3Rpb24vdHlwb2dyYXBoeSc7XG5pbXBvcnQgeyBzY2FsZSB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2NvbW1vbi9zY2FsZSc7XG5pbXBvcnQgeyBiYXNlVGhlbWUgfSBmcm9tICcuLi8uLi8uLi91dGlscy9lbW90aW9uL2Jhc2VUaGVtZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2hhZG93UHJvcHMge1xuICAgIC8qKiBTaGFkb3cgdmFyaWFibGUgbmFtZS4gKi9cbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgLyoqIFNoYWRvdyB2YWx1ZS4gKi9cbiAgICB2YWx1ZTogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgU2hhZG93ID0gKHsgbmFtZSwgdmFsdWUgfTogU2hhZG93UHJvcHMpID0+IHtcbiAgICBjb25zdCB7IGNvbG9ycyB9ID0gYmFzZVRoZW1lO1xuICAgIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8VG9vbHRpcCBjb250ZW50PVwiVmFyaWFibGUgbmFtZSBpcyBjb3BpZWQgdG8gdGhlIGNsaXBib2FyZFwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIHJlZj17YnV0dG9uUmVmfVxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IGNvcHlUb0NsaXBib2FyZChgc2hhZG93cy4ke25hbWV9YCwgYnV0dG9uUmVmKX1cbiAgICAgICAgICAgICAgICBjc3M9e3tcbiAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgICAgICAgICAgICAgICBmbGV4RGlyZWN0aW9uOiAnY29sdW1uJyxcbiAgICAgICAgICAgICAgICAgICAganVzdGlmeUNvbnRlbnQ6ICdmbGV4LWVuZCcsXG4gICAgICAgICAgICAgICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogc2NhbGUoMjgpLFxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nOiBzY2FsZSgxKSxcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBjb2xvcnMud2hpdGUsXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogJzI0cHggMjRweCAyNHB4IDBweCcsXG4gICAgICAgICAgICAgICAgICAgIGJveFNoYWRvdzogdmFsdWUsXG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246ICdib3gtc2hhZG93IGVhc2UgMzAwbXMnLFxuICAgICAgICAgICAgICAgICAgICAnOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICAgICAgICAgICAgICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAycHggJHtjb2xvcnMuZ3JleTB9YCxcbiAgICAgICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBjb2xvcnMud2hpdGUsXG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogY29sb3JzLmdyZXkwLFxuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogc2NhbGUoMSksXG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICc0cHggNHB4IDRweCAwcHgnLFxuICAgICAgICAgICAgICAgICAgICAgICAgLi4udHlwb2dyYXBoeSgnc21hbGxCb2xkJyksXG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7bmFtZX1cbiAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9Ub29sdGlwPlxuICAgICk7XG59O1xuIl19 */")
  }, useTheme.jsx("span", {
    css: /*#__PURE__*/useTheme.css(useTheme._objectSpread2({
      backgroundColor: colors.white,
      color: colors.grey0,
      padding: typography.scale(1),
      borderRadius: '4px 4px 4px 0px'
    }, typography.typography('smallBold')), process.env.NODE_ENV === "production" ? "" : ";label:Shadow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNoYWRvdy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkNvQiIsImZpbGUiOiJTaGFkb3cudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4uLy4uLy4uL2hlbHBlcnMvY29tbW9uL1Rvb2x0aXAnO1xuaW1wb3J0IHsgY29weVRvQ2xpcGJvYXJkIH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9jb21tb24vY29weVRvQ2xpcGJvYXJkJztcbmltcG9ydCB7IHR5cG9ncmFwaHkgfSBmcm9tICcuLi8uLi8uLi9oZWxwZXJzL2Vtb3Rpb24vdHlwb2dyYXBoeSc7XG5pbXBvcnQgeyBzY2FsZSB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2NvbW1vbi9zY2FsZSc7XG5pbXBvcnQgeyBiYXNlVGhlbWUgfSBmcm9tICcuLi8uLi8uLi91dGlscy9lbW90aW9uL2Jhc2VUaGVtZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2hhZG93UHJvcHMge1xuICAgIC8qKiBTaGFkb3cgdmFyaWFibGUgbmFtZS4gKi9cbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgLyoqIFNoYWRvdyB2YWx1ZS4gKi9cbiAgICB2YWx1ZTogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgU2hhZG93ID0gKHsgbmFtZSwgdmFsdWUgfTogU2hhZG93UHJvcHMpID0+IHtcbiAgICBjb25zdCB7IGNvbG9ycyB9ID0gYmFzZVRoZW1lO1xuICAgIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8VG9vbHRpcCBjb250ZW50PVwiVmFyaWFibGUgbmFtZSBpcyBjb3BpZWQgdG8gdGhlIGNsaXBib2FyZFwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIHJlZj17YnV0dG9uUmVmfVxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IGNvcHlUb0NsaXBib2FyZChgc2hhZG93cy4ke25hbWV9YCwgYnV0dG9uUmVmKX1cbiAgICAgICAgICAgICAgICBjc3M9e3tcbiAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgICAgICAgICAgICAgICBmbGV4RGlyZWN0aW9uOiAnY29sdW1uJyxcbiAgICAgICAgICAgICAgICAgICAganVzdGlmeUNvbnRlbnQ6ICdmbGV4LWVuZCcsXG4gICAgICAgICAgICAgICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogc2NhbGUoMjgpLFxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nOiBzY2FsZSgxKSxcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBjb2xvcnMud2hpdGUsXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogJzI0cHggMjRweCAyNHB4IDBweCcsXG4gICAgICAgICAgICAgICAgICAgIGJveFNoYWRvdzogdmFsdWUsXG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246ICdib3gtc2hhZG93IGVhc2UgMzAwbXMnLFxuICAgICAgICAgICAgICAgICAgICAnOmZvY3VzLXZpc2libGUnOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICAgICAgICAgICAgICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAycHggJHtjb2xvcnMuZ3JleTB9YCxcbiAgICAgICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBjb2xvcnMud2hpdGUsXG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogY29sb3JzLmdyZXkwLFxuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogc2NhbGUoMSksXG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICc0cHggNHB4IDRweCAwcHgnLFxuICAgICAgICAgICAgICAgICAgICAgICAgLi4udHlwb2dyYXBoeSgnc21hbGxCb2xkJyksXG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7bmFtZX1cbiAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9Ub29sdGlwPlxuICAgICk7XG59O1xuIl19 */")
  }, name)));
};

var ShadowsAutokit = function ShadowsAutokit() {
  var _useAutokitsTheme = useTheme.useAutokitsTheme(),
    shadows = _useAutokitsTheme.shadows;
  if (!shadows) return useTheme.jsx("div", {
    css: typography.typography('body')
  }, useTheme.jsx("span", {
    role: "img",
    "aria-label": "Error"
  }, "\u26D4\uFE0F"), ' ', "Shadows are not defined. Use tokens or add ", useTheme.jsx("strong", null, "shadows"), " property in theme settings manually");
  return useTheme.jsx(index.Layout, {
    auto: typography.scale(20),
    gap: typography.scale(8)
  }, Object.keys(shadows).map(function (name) {
    return useTheme.jsx(index.Layout.Item, {
      key: name
    }, useTheme.jsx(Shadow, {
      name: name,
      value: shadows[name]
    }));
  }));
};

exports.ShadowsAutokit = ShadowsAutokit;