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

Greensight Design System

import { useRef } from 'react';
import { L as Layout } from './index-BUJaA6RV.js';
import { t as typography, s as scale, b as baseTheme } from './typography-BmZOWRkU.js';
import { u as useAutokitsTheme, j as jsx, c as css, _ as _objectSpread2 } from './useTheme-DPU-Td50.js';
import { c as copyToClipboard, T as Tooltip } from './copyToClipboard-C7ZbYqhg.js';
import 'react-dom';
import './style-inject.es-tgCJW-Cu.js';

var Shadow = function Shadow(_ref) {
  var name = _ref.name,
    value = _ref.value;
  var colors = baseTheme.colors;
  var buttonRef = useRef(null);
  return jsx(Tooltip, {
    content: "Variable name is copied to the clipboard"
  }, jsx("button", {
    ref: buttonRef,
    type: "button",
    onClick: function onClick() {
      return copyToClipboard("shadows.".concat(name), buttonRef);
    },
    css: /*#__PURE__*/css({
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      width: '100%',
      height: scale(28),
      padding: 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 */")
  }, jsx("span", {
    css: /*#__PURE__*/css(_objectSpread2({
      backgroundColor: colors.white,
      color: colors.grey0,
      padding: scale(1),
      borderRadius: '4px 4px 4px 0px'
    }, 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 = useAutokitsTheme(),
    shadows = _useAutokitsTheme.shadows;
  if (!shadows) return jsx("div", {
    css: typography('body')
  }, jsx("span", {
    role: "img",
    "aria-label": "Error"
  }, "\u26D4\uFE0F"), ' ', "Shadows are not defined. Use tokens or add ", jsx("strong", null, "shadows"), " property in theme settings manually");
  return jsx(Layout, {
    auto: scale(20),
    gap: scale(8)
  }, Object.keys(shadows).map(function (name) {
    return jsx(Layout.Item, {
      key: name
    }, jsx(Shadow, {
      name: name,
      value: shadows[name]
    }));
  }));
};

export { ShadowsAutokit };