@capillarytech/blaze-ui 0.1.6-alpha.3 → 0.1.6-alpha.32

package/components/CapUnifiedSelect/CapUnifiedSelect.js

@@ -0,0 +1,359 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _icons = require("@ant-design/icons");
+var _withStyles = _interopRequireDefault(require("../../utils/withStyles"));
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CapUnifiedSelect = _ref => {
+  let {
+    type,
+    options = [],
+    treeData,
+    value,
+    onChange,
+    placeholder = 'Select an option',
+    className,
+    style,
+    status,
+    statusMessage,
+    allowClear = false,
+    label,
+    tooltip,
+    disabled = false,
+    treeCheckable = false,
+    customPopupRender = false,
+    onConfirm,
+    onCancel
+  } = _ref;
+  const StyledSelect = (0, _styledComponents.default)(_antd.Select).withConfig({
+    displayName: "StyledSelect",
+    componentId: "sc-wsphu8-0"
+  })(["", ""], _styles.selectStyles);
+  const StyledTreeSelect = (0, _styledComponents.default)(_antd.TreeSelect).withConfig({
+    displayName: "StyledTreeSelect",
+    componentId: "sc-wsphu8-1"
+  })(["", ""], _styles.selectStyles);
+  const [searchText, setSearchText] = (0, _react.useState)('');
+  const [tempValue, setTempValue] = (0, _react.useState)(value);
+  const [allSelected, setAllSelected] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setTempValue(value);
+  }, [value]);
+  const selectVirtualizationProps = {
+    listHeight: 256
+  };
+  const treeSelectVirtualizationProps = {
+    listHeight: 256,
+    listItemHeight: 32
+  };
+  const NoResult = () => (0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 200,
+      color: '#8c8c8c',
+      fontSize: 14
+    },
+    children: [(0, _jsxRuntime.jsx)(_icons.WarningFilled, {
+      style: {
+        fontSize: 36,
+        marginBottom: 8,
+        color: '#bfbfbf'
+      }
+    }), (0, _jsxRuntime.jsx)("div", {
+      style: {
+        fontWeight: 500
+      },
+      children: "No results found"
+    })]
+  });
+  const getFilteredTreeData = (data, search) => {
+    if (!search) return data;
+    const filterNode = node => {
+      var _node$title, _node$label;
+      const titleText = ((_node$title = node.title) == null ? void 0 : _node$title.toLowerCase()) || '';
+      const labelText = ((_node$label = node.label) == null ? void 0 : _node$label.toLowerCase()) || '';
+      return titleText.includes(search.toLowerCase()) || labelText.includes(search.toLowerCase());
+    };
+    const loop = data => data.map(item => {
+      const children = item.children ? loop(item.children) : [];
+      if (filterNode(item) || children.length) {
+        return {
+          ...item,
+          children
+        };
+      }
+      return null;
+    }).filter(Boolean);
+    return loop(data);
+  };
+  const flattenedLeafValues = nodes => (nodes == null ? void 0 : nodes.flatMap(node => node.children ? flattenedLeafValues(node.children) : [node.value])) || [];
+  const filteredTree = getFilteredTreeData(treeData || options, searchText);
+  const filteredOptions = !searchText ? options : options.filter(opt => {
+    var _opt$label;
+    return (_opt$label = opt.label) == null ? void 0 : _opt$label.toLowerCase().includes(searchText.toLowerCase());
+  });
+  const leafValues = flattenedLeafValues(filteredTree);
+  const handleSelectAll = function (isTree) {
+    if (isTree === void 0) {
+      isTree = false;
+    }
+    const availableValues = isTree ? leafValues : filteredOptions.map(opt => opt.value);
+    if (allSelected) {
+      setTempValue([]);
+    } else {
+      setTempValue(availableValues);
+    }
+    setAllSelected(!allSelected);
+  };
+  (0, _react.useEffect)(() => {
+    const isMultipleMode = type === 'multiSelect' || type === 'multiTreeSelect';
+    if (isMultipleMode && Array.isArray(tempValue)) {
+      const availableValues = type.includes('tree') ? leafValues : filteredOptions.map(opt => opt.value);
+      setAllSelected(tempValue.length > 0 && tempValue.length === availableValues.length);
+    }
+  }, [tempValue, filteredOptions, leafValues, type]);
+  const handleConfirm = () => {
+    if (onConfirm) {
+      onConfirm(tempValue);
+    } else {
+      onChange(tempValue);
+    }
+    setSearchText('');
+  };
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    setTempValue(value);
+    setSearchText('');
+  };
+  const handleTempChange = newValue => {
+    setTempValue(newValue);
+  };
+  const suffix = (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 1 ? (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsxs)("span", {
+      children: ["+", value.length - 1, " more", (0, _jsxRuntime.jsx)(_icons.DownOutlined, {})]
+    })
+  }) : (0, _jsxRuntime.jsx)(_icons.DownOutlined, {});
+  const prefix = () => {
+    if ((type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0) {
+      const selectedLabels = options.filter(opt => value.includes(opt.value)).map(opt => opt.label);
+      return selectedLabels[0];
+    } else {
+      return null;
+    }
+  };
+  const renderHeader = () => {
+    if (!label && !tooltip) return null;
+    return (0, _jsxRuntime.jsxs)(_styles.HeaderWrapper, {
+      className: disabled ? 'disabled' : '',
+      children: [label && (0, _jsxRuntime.jsx)("label", {
+        type: "label16",
+        className: disabled ? 'disabled' : '',
+        children: label
+      }), tooltip && (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: tooltip,
+        children: (0, _jsxRuntime.jsx)(_icons.InfoCircleOutlined, {
+          className: disabled ? 'disabled' : '',
+          style: {
+            color: '#B3BAC5'
+          }
+        })
+      })]
+    });
+  };
+  const renderDropdown = () => {
+    const isMultipleSelect = type === 'multiSelect' || type === 'multiTreeSelect';
+    const isTreeMode = type === 'treeSelect' || type === 'multiTreeSelect';
+    const currentItems = isTreeMode ? filteredTree : filteredOptions;
+    const selectedCount = Array.isArray(tempValue) ? tempValue.length : tempValue ? 1 : 0;
+    const renderCustomDropdown = menu => {
+      if (!customPopupRender) return menu;
+      return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _jsxRuntime.jsx)("div", {
+          style: {
+            borderBottom: '1px solid #f0f0f0'
+          },
+          children: (0, _jsxRuntime.jsx)(_antd.Input, {
+            prefix: (0, _jsxRuntime.jsx)(_icons.SearchOutlined, {
+              style: {
+                color: "#B3BAC5"
+              }
+            }),
+            placeholder: "Search",
+            variant: "borderless",
+            value: searchText,
+            onChange: e => setSearchText(e.target.value),
+            onKeyDown: e => e.stopPropagation()
+          })
+        }), isMultipleSelect && currentItems.length > 0 && (0, _jsxRuntime.jsxs)("div", {
+          style: {
+            padding: '8px 12px',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: '1px solid #f0f0f0'
+          },
+          onClick: e => {
+            e.stopPropagation();
+            handleSelectAll(isTreeMode);
+          },
+          children: [(0, _jsxRuntime.jsx)("input", {
+            type: "checkbox",
+            checked: allSelected,
+            readOnly: true,
+            style: {
+              cursor: 'pointer'
+            },
+            onClick: e => e.stopPropagation()
+          }), (0, _jsxRuntime.jsx)("label", {
+            style: {
+              marginLeft: 8,
+              cursor: 'pointer'
+            },
+            children: "Select all"
+          })]
+        }), currentItems.length === 0 ? (0, _jsxRuntime.jsx)(NoResult, {}) : menu, currentItems.length > 0 && isMultipleSelect && (0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: '8px 12px',
+            borderTop: '1px solid #f0f0f0'
+          },
+          children: [(0, _jsxRuntime.jsxs)("div", {
+            children: [(0, _jsxRuntime.jsx)(_antd.Button, {
+              type: "primary",
+              size: "small",
+              style: {
+                marginRight: 8
+              },
+              onClick: e => {
+                e.stopPropagation();
+                handleConfirm();
+              },
+              children: "Confirm"
+            }), (0, _jsxRuntime.jsx)(_antd.Button, {
+              type: "text",
+              size: "small",
+              onClick: e => {
+                e.stopPropagation();
+                handleCancel();
+              },
+              children: "Cancel"
+            })]
+          }), selectedCount > 0 && (0, _jsxRuntime.jsxs)("span", {
+            style: {
+              color: '#8c8c8c',
+              fontSize: '14px'
+            },
+            children: [selectedCount, " selected"]
+          })]
+        })]
+      });
+    };
+    if (type === 'treeSelect' || type === 'multiTreeSelect') {
+      return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _jsxRuntime.jsx)(StyledTreeSelect, {
+          treeData: filteredTree,
+          value: customPopupRender ? tempValue : value,
+          onChange: customPopupRender ? handleTempChange : onChange,
+          placeholder: placeholder,
+          maxTagCount: 0,
+          maxTagPlaceholder: () => null,
+          prefix: type === "multiTreeSelect" && value.length > 0 && prefix(),
+          suffixIcon: suffix,
+          className: (0, _classnames.default)(`cap-unified-tree-select ${className || ''}`),
+          style: style,
+          status: status,
+          allowClear: allowClear,
+          showSearch: false,
+          multiple: type === 'multiTreeSelect',
+          treeCheckable: treeCheckable,
+          showCheckedStrategy: _antd.TreeSelect.SHOW_PARENT,
+          virtual: true,
+          disabled: disabled,
+          filterTreeNode: false,
+          ...treeSelectVirtualizationProps,
+          popupRender: renderCustomDropdown
+        }), status === 'error' && (0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: '#E83135'
+          },
+          className: "cap-unified-select-status",
+          children: statusMessage
+        })]
+      });
+    }
+    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)(StyledSelect, {
+        options: filteredOptions,
+        value: customPopupRender ? tempValue : value,
+        onChange: customPopupRender ? handleTempChange : onChange,
+        placeholder: placeholder,
+        maxTagCount: 0,
+        maxTagPlaceholder: () => null,
+        prefix: type === "multiSelect" && value.length > 0 && prefix(),
+        suffixIcon: suffix,
+        className: (0, _classnames.default)('cap-unified-select', className),
+        style: style,
+        allowClear: allowClear,
+        showSearch: false,
+        mode: type === 'multiSelect' ? 'multiple' : undefined,
+        virtual: true,
+        disabled: disabled,
+        status: status,
+        ...selectVirtualizationProps,
+        popupRender: renderCustomDropdown
+      }), status === 'error' && (0, _jsxRuntime.jsx)("div", {
+        style: {
+          color: '#E83135'
+        },
+        className: "cap-unified-select-status",
+        children: statusMessage
+      })]
+    });
+  };
+  return (0, _jsxRuntime.jsxs)(_styles.SelectWrapper, {
+    className: (0, _classnames.default)(`cap-unified-select-container ${className || ''}`),
+    children: [renderHeader(), renderDropdown()]
+  });
+};
+CapUnifiedSelect.propTypes = {
+  type: _propTypes.default.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  options: _propTypes.default.array,
+  treeData: _propTypes.default.array,
+  value: _propTypes.default.any,
+  onChange: _propTypes.default.func,
+  placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  allowClear: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  tooltip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  disabled: _propTypes.default.bool,
+  treeCheckable: _propTypes.default.bool,
+  customPopupRender: _propTypes.default.bool,
+  onConfirm: _propTypes.default.func,
+  onCancel: _propTypes.default.func
+};
+CapUnifiedSelect.defaultProps = {
+  type: 'select',
+  allowClear: false,
+  customPopupRender: false,
+  treeCheckable: false,
+  className: ''
+};
+var _default = exports.default = (0, _withStyles.default)(CapUnifiedSelect, _styles.selectStyles);

package/components/CapUnifiedSelect/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _CapUnifiedSelect = _interopRequireDefault(require("./CapUnifiedSelect"));
+exports.default = _CapUnifiedSelect.default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/components/CapUnifiedSelect/messages.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _reactIntl = require("react-intl");
+var _default = exports.default = (0, _reactIntl.defineMessages)({
+  selectPlaceholder: {
+    id: 'cap.unified.select.placeholder',
+    defaultMessage: 'Select an option'
+  },
+  searchPlaceholder: {
+    id: 'cap.unified.select.search.placeholder',
+    defaultMessage: 'Search...'
+  },
+  noData: {
+    id: 'cap.unified.select.no.data',
+    defaultMessage: 'No data'
+  },
+  loading: {
+    id: 'cap.unified.select.loading',
+    defaultMessage: 'Loading...'
+  },
+  selected: {
+    id: 'cap.unified.select.selected',
+    defaultMessage: '{count} items selected'
+  }
+});

package/components/CapUnifiedSelect/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.selectStyles = exports.StyledInfoIcon = exports.SelectWrapper = exports.SelectAllCheckbox = exports.SearchInputWrapper = exports.NoResultWrapper = exports.HeaderWrapper = exports.DropdownFooter = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var styledVars = _interopRequireWildcard(require("../styled/variables"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SelectWrapper = exports.SelectWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SelectWrapper",
+  componentId: "sc-3v7xpu-0"
+})(["display:flex;flex-direction:column;gap:8px;width:100%;&.disabled{cursor:not-allowed;}"]);
+const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeaderWrapper",
+  componentId: "sc-3v7xpu-1"
+})(["display:flex;align-items:center;gap:4px;&.disabled{opacity:0.5;cursor:not-allowed;}"]);
+const DropdownFooter = exports.DropdownFooter = _styledComponents.default.div.withConfig({
+  displayName: "DropdownFooter",
+  componentId: "sc-3v7xpu-2"
+})(["display:flex;justify-content:space-between;align-items:center;padding:8px;border-top:1px solid #f0f0f0;.footer-buttons{display:flex;align-items:center;gap:8px;}.total-count{color:#8c8c8c;font-size:12px;}"]);
+const SearchInputWrapper = exports.SearchInputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputWrapper",
+  componentId: "sc-3v7xpu-3"
+})(["padding:8px;border-bottom:1px solid #f0f0f0;"]);
+const SelectAllCheckbox = exports.SelectAllCheckbox = _styledComponents.default.div.withConfig({
+  displayName: "SelectAllCheckbox",
+  componentId: "sc-3v7xpu-4"
+})(["display:flex;align-items:center;padding:8px 12px;cursor:pointer;font-weight:500;border-bottom:1px solid #f0f0f0;user-select:none;input[type=\"checkbox\"]{cursor:pointer;}"]);
+const NoResultWrapper = exports.NoResultWrapper = _styledComponents.default.div.withConfig({
+  displayName: "NoResultWrapper",
+  componentId: "sc-3v7xpu-5"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#8c8c8c;font-size:14px;"]);
+const StyledInfoIcon = exports.StyledInfoIcon = _styledComponents.default.span.withConfig({
+  displayName: "StyledInfoIcon",
+  componentId: "sc-3v7xpu-6"
+})(["color:", ";font-size:16px;cursor:help;margin-left:4px;display:flex;align-items:center;&:hover{color:", ";}&.disabled{cursor:not-allowed;&:hover{color:", ";}}"], styledVars.CAP_G05, styledVars.CAP_G03, styledVars.CAP_G05);
+const selectStyles = exports.selectStyles = (0, _styledComponents.css)(["&.cap-unified-select{width:100%;font-family:", ";}&.cap-unified-select-container{.ant-select-prefix{margin-left:-5px !important;font-size:14px !important;font-weight:400 !important;color:#091E42 !important;line-height:20px !important;}}"], styledVars.FONT_FAMILY);

package/components/LocaleHoc/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _en = _interopRequireDefault(require("../translations/en"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const prefix = `blaze.components`;
+const LocaleHoc = (WrapperComponent, customProps) => {
+  const Wrapper = props => {
+    const componentName = customProps.key;
+    const translatedDefaults = _en.default[componentName];
+    const {
+      intl
+    } = props;
+    const translatedProps = (0, _react.useMemo)(() => {
+      if (!translatedDefaults) return {};
+      return Object.keys(translatedDefaults).reduce((acc, key) => {
+        const id = `${prefix}.${componentName}.${key}`;
+        const defaultMessage = translatedDefaults[key];
+        try {
+          acc[key] = intl.formatMessage({
+            id,
+            defaultMessage
+          });
+        } catch (err) {
+          acc[key] = defaultMessage;
+        }
+        return acc;
+      }, {});
+    }, [translatedDefaults, intl]);
+    return (0, _jsxRuntime.jsx)(WrapperComponent, {
+      ...translatedProps,
+      ...props
+    });
+  };
+  return (0, _reactIntl.injectIntl)(Wrapper);
+};
+var _default = exports.default = LocaleHoc;

package/components/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {
+  CapInput: true,
+  CapTable: true,
+  CapTestSelect: true,
+  LocaleHoc: true,
+  styled: true,
+  styledVars: true
+};
+exports.styledVars = exports.styled = exports.LocaleHoc = exports.CapTestSelect = exports.CapTable = exports.CapInput = void 0;
+var _CapInput = _interopRequireDefault(require("./CapInput"));
+exports.CapInput = _CapInput.default;
+var _CapTable = _interopRequireDefault(require("./CapTable"));
+exports.CapTable = _CapTable.default;
+var _CapTestSelect = _interopRequireDefault(require("./CapTestSelect"));
+exports.CapTestSelect = _CapTestSelect.default;
+var _LocaleHoc = _interopRequireDefault(require("./LocaleHoc"));
+exports.LocaleHoc = _LocaleHoc.default;
+var _styledVars = _interopRequireWildcard(require("./styled/variables"));
+exports.styledVars = _styledVars;
+var _styled = _interopRequireDefault(require("./styled"));
+exports.styled = _styled.default;
+var _utils = require("../utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  exports[key] = _utils[key];
+});
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/components/styled/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+var styledVars = _interopRequireWildcard(require("./variables"));
+Object.keys(styledVars).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === styledVars[key]) return;
+  exports[key] = styledVars[key];
+});
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var _default = exports.default = styledVars;

package/components/styled/variables.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TRANSITION_ALL = exports.SPACING_32 = exports.SPACING_24 = exports.SPACING_16 = exports.SPACING_12 = exports.SPACING_08 = exports.SPACING_04 = exports.RADIUS_08 = exports.RADIUS_04 = exports.FONT_WEIGHT_REGULAR = exports.FONT_WEIGHT_MEDIUM = exports.FONT_FAMILY = exports.CAP_YELLOW02 = exports.CAP_YELLOW01 = exports.CAP_YELLOW = exports.CAP_WHITE = exports.CAP_SECONDARY = exports.CAP_RED03 = exports.CAP_RED02 = exports.CAP_RED01 = exports.CAP_RED = exports.CAP_PURPLE04 = exports.CAP_PURPLE03 = exports.CAP_PURPLE02 = exports.CAP_PURPLE01 = exports.CAP_PURPLE = exports.CAP_PRIMARY = exports.CAP_PINK = exports.CAP_PALE_GREY = exports.CAP_ORANGE02 = exports.CAP_ORANGE01 = exports.CAP_ORANGE = exports.CAP_ICON = exports.CAP_GREEN02 = exports.CAP_GREEN01 = exports.CAP_G20 = exports.CAP_G19 = exports.CAP_G18 = exports.CAP_G17 = exports.CAP_G16 = exports.CAP_G15 = exports.CAP_G14 = exports.CAP_G13 = exports.CAP_G12 = exports.CAP_G11 = exports.CAP_G10 = exports.CAP_G09 = exports.CAP_G08 = exports.CAP_G07 = exports.CAP_G06 = exports.CAP_G05 = exports.CAP_G04 = exports.CAP_G03 = exports.CAP_G02 = exports.CAP_G01 = exports.CAP_BLUE02 = exports.CAP_BLUE01 = exports.CAP_BLUE = exports.CAP_BLACK = void 0;
+const CAP_PRIMARY = exports.CAP_PRIMARY = {
+  base: "#47af46",
+  hover: "#1f9a1d",
+  disabled: "#a1d8a0"
+};
+const CAP_SECONDARY = exports.CAP_SECONDARY = {
+  base: "#2466ea",
+  light: 'rgba("#2466ea", 0.1)'
+};
+const CAP_ORANGE = exports.CAP_ORANGE = "#f87d23";
+const CAP_ORANGE01 = exports.CAP_ORANGE01 = "#ffe5d2";
+const CAP_ORANGE02 = exports.CAP_ORANGE02 = "#fa7d02";
+const CAP_YELLOW = exports.CAP_YELLOW = "#fec52e";
+const CAP_YELLOW01 = exports.CAP_YELLOW01 = "#e8bc25";
+const CAP_YELLOW02 = exports.CAP_YELLOW02 = "#f9d438";
+const CAP_BLUE = exports.CAP_BLUE = "#23cccc";
+const CAP_PURPLE = exports.CAP_PURPLE = "#8517e5";
+const CAP_PINK = exports.CAP_PINK = "#e51fa3";
+const CAP_RED = exports.CAP_RED = "#ea213a";
+const CAP_ICON = exports.CAP_ICON = "#7a869a";
+const CAP_PALE_GREY = exports.CAP_PALE_GREY = "#e9f0fe";
+const CAP_BLUE01 = exports.CAP_BLUE01 = "#2466eb";
+const CAP_BLUE02 = exports.CAP_BLUE02 = "#1d61ee";
+const CAP_RED01 = exports.CAP_RED01 = "#e51fa3";
+const CAP_RED02 = exports.CAP_RED02 = "#f5222d";
+const CAP_RED03 = exports.CAP_RED03 = "#ed1b34";
+const CAP_PURPLE01 = exports.CAP_PURPLE01 = "#6563ff";
+const CAP_PURPLE02 = exports.CAP_PURPLE02 = "#a451ff";
+const CAP_PURPLE03 = exports.CAP_PURPLE03 = "#f2e7fe";
+const CAP_PURPLE04 = exports.CAP_PURPLE04 = "#d4e1fc";
+const CAP_GREEN01 = exports.CAP_GREEN01 = "#6bb56b";
+const CAP_GREEN02 = exports.CAP_GREEN02 = "#ecf7ec";
+const CAP_G01 = exports.CAP_G01 = "#091e42";
+const CAP_G02 = exports.CAP_G02 = "#253858";
+const CAP_G03 = exports.CAP_G03 = "#42526e";
+const CAP_G04 = exports.CAP_G04 = "#5e6c84";
+const CAP_G05 = exports.CAP_G05 = "#97a0af";
+const CAP_G06 = exports.CAP_G06 = "#b3bac5";
+const CAP_G07 = exports.CAP_G07 = "#dfe2e7";
+const CAP_G08 = exports.CAP_G08 = "#ebecf0";
+const CAP_G09 = exports.CAP_G09 = "#f4f5f7";
+const CAP_G10 = exports.CAP_G10 = "#fafbfc";
+const CAP_G11 = exports.CAP_G11 = "#7a869a";
+const CAP_G12 = exports.CAP_G12 = "#e8e8e8";
+const CAP_G13 = exports.CAP_G13 = "#ecece7";
+const CAP_G14 = exports.CAP_G14 = "#e9f0fd";
+const CAP_G15 = exports.CAP_G15 = "#efefef";
+const CAP_G16 = exports.CAP_G16 = "#2a2a2a";
+const CAP_G17 = exports.CAP_G17 = "#7F8185";
+const CAP_G18 = exports.CAP_G18 = "#dcdee2";
+const CAP_G19 = exports.CAP_G19 = "#8a9ab2";
+const CAP_G20 = exports.CAP_G20 = "#c2c2c2";
+const CAP_WHITE = exports.CAP_WHITE = "#ffffff";
+const CAP_BLACK = exports.CAP_BLACK = "#000000";
+const FONT_FAMILY = exports.FONT_FAMILY = '"Roboto", sans-serif';
+const FONT_WEIGHT_REGULAR = exports.FONT_WEIGHT_REGULAR = 400;
+const FONT_WEIGHT_MEDIUM = exports.FONT_WEIGHT_MEDIUM = 500;
+const SPACING_04 = exports.SPACING_04 = "4px";
+const SPACING_08 = exports.SPACING_08 = "8px";
+const SPACING_12 = exports.SPACING_12 = "12px";
+const SPACING_16 = exports.SPACING_16 = "16px";
+const SPACING_24 = exports.SPACING_24 = "24px";
+const SPACING_32 = exports.SPACING_32 = "32px";
+const RADIUS_04 = exports.RADIUS_04 = "4px";
+const RADIUS_08 = exports.RADIUS_08 = "8px";
+const TRANSITION_ALL = exports.TRANSITION_ALL = "all 0.3s ease";