@crystallize/design-system 1.4.0 → 1.4.1

package/dist/design-system.esm.js

@@ -1,245 +0,0 @@
-import React from 'react';
-import styled, { createGlobalStyle, css } from 'styled-components';
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
-}
-
-var _templateObject;
-var GlobalStyle = /*#__PURE__*/createGlobalStyle(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :root {\n    --palette-common-white: #ffffff;\n    --palette-common-black: #000000;\n    \n    --palette-primary-light: #CEEAE7;\n    --palette-primary-main: #8fdecb;\n    --palette-primary-dark: #8FDDCA;\n    --palette-primary-contrastText: #4C4F5A;\n    --palette-primary-400: #EDF7F6;\n    --palette-primary-600: #68baa6;\n    \n    --palette-secondary-light: #FEFCDD;\n    --palette-secondary-main: #FFEFD2;\n    --palette-secondary-dark: #ba9147;\n    --palette-secondary-contrastText: #4C4F5A;\n    --palette-secondary-400: #fff7e8;\n    \n    --palette-error-light: #f47f98;\n    --palette-error-main: #EF4836;\n    --palette-error-dark: #d32f2f;\n    --palette-error-contrastText: #ffffff;\n    \n    --palette-text-primary: #4C4F5A;\n    --palette-text-secondary: rgba(0, 0, 0, 0.54);\n    --palette-text-disabled: rgba(0, 0, 0, 0.38);\n    --palette-text-hint: rgba(0, 0, 0, 0.38);\n    \n    --palette-action-disabled: rgba(0, 0, 0, 0.07);\n    --palette-action-hover: rgba(0, 0, 0, 0.04);\n    --palette-action-disabledBackground: rgba(0, 0, 0, 0.05);\n    \n    --border-radius-small: 10px;\n    --border-radius-default: 40px;\n    \n    --shadow-none: none;\n    --shadow-01: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);\n    --shadow-02: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);\n    --shadow-03: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);\n    --shadow-04: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);\n    --shadow-05: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);\n    --shadow-06: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);\n    --shadow-07: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12);\n    --shadow-08: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);\n    \n    --ease-out:cubic-bezier(0.0, 0, 0.2, 1); \n    --ease-in:cubic-bezier(0.4, 0, 1, 1); \n    \n    --spacing-sm: 10;\n    --spacing-md: 20;\n    --spacing-lg: 30;\n\n    --html-font-size: 16;\n    --default-font-size: 14;\n    --font-weight-light: 300;\n    --font-weight-regular: 400;\n    --font-weight-medium: 500;\n    --font-weight-bold: 700;\n    --typography-gutter:0.35em;\n\n    --default-font-family: 'Roboto', sans-serif;\n\n    --caption-font-size: 0.75rem;\n    --caption-line-height: 1.66;\n    --caption-letter-spacing: 0.03333em;\n\n    --overline-font-size: 0.75rem;\n    --overline-line-height: 2.66;\n    --overline-letter-spacing: 0.08333em;\n    --overline-text-transform: uppercase;\n    \n    --body1-font-size: 1rem;\n    --body1-line-height: 1.5;\n    --body1-letter-spacing: 0.00938em;\n\n    --body2-font-size: 0.875rem;\n    --body2-line-height: 1.43;\n    --body2-letter-spacing: 0.01071em;\n    \n    --subtitle1-font-size: 1rem;\n    --subtitle1-line-height: 1.75;\n    --subtitle1-letter-spacing: 0.00938em;\n\n    --subtitle2-font-size: 0.875rem;\n    --subtitle2-line-height: 1.57;\n    --subtitle2-letter-spacing: 0.00714em;\n  }\n  \n  button {\n    font-family: var(--default-font-family);\n    font-weight: var(--font-weight-medium);\n    font-size: 0.875rem;\n    line-height: 1.75;\n    letter-spacing: 0.02857em;\n    text-transform: uppercase;\n    cursor: pointer;\n  }\n  \n  \n  h1 {\n    font-weight: var(--font-weight-light);\n    font-size: 6rem;\n    line-height: 1.167;\n    letter-spacing: -0.01562em;\n  }\n  \n  h2 {\n    font-weight: var(--font-weight-light);\n    font-size: 3.75rem;\n    line-height: 1.2;\n    letter-spacing: -0.00833em;\n  }\n  \n  h3 {\n    font-weight: var(--font-weight-regular);\n    font-size: 3rem;\n    line-height: 1.167;\n    letter-spacing: 0em;\n  }\n\n  h4 {\n    font-weight: var(--font-weight-regular);\n    font-size: 2.125rem;\n    line-height: 1.235;\n    letter-spacing: 0.00735em;\n  }\n\n  h5 {\n    font-weight: var(--font-weight-regular);\n    font-size: 1.5rem;\n    line-height: 1.334;\n    letter-spacing: 0em;\n  }\n\n  h6 {\n    font-weight: var(--font-weight-medium);\n    font-size: 1.25rem;\n    line-height: 1.6;\n    letter-spacing: 0.0075em;\n  }\n"])));
-var getRemSize = function getRemSize(fontSize) {
-  var defaultFontSize = 14;
-  var htmlFontSize = 16;
-  var coefficient = defaultFontSize / 14;
-  return fontSize / htmlFontSize * coefficient;
-};
-
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var outlined = /*#__PURE__*/css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--palette-text-primary);\n  padding: 5px 15px;\n  border: 0.4px solid var(--palette-text-secondary);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-action-hover);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var outlinedPrimary = /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--palette-primary-600);\n  background-color: transparent;\n  border: 1px solid var(--palette-primary-600);\n  &:hover {\n    border: 1px solid var(--palette-primary-dark);\n    background-color: var(--palette-primary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-05);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var outlinedSecondary = /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--palette-secondary-dark);\n  background-color: transparent;\n  border: 1px solid var(--palette-secondary-dark);\n  &:hover {\n    background-color: var(--palette-secondary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-02);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var filled = /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--palette-common-white);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  box-shadow: var(--shadow-02);\n  &:hover {\n    background-color: var(--palette-action-hover);\n    box-shadow: var(--shadow-04);\n  }\n  &:active {\n    box-shadow: var(--shadow-08);\n  }\n  &:focus-visible {\n    box-shadow: var(--shadow-06);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n    box-shadow: var(--shadow-none);\n  }\n"])));
-var filledPrimary = /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--palette-primary-main);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-primary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var filledSecondary = /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--palette-secondary-main);\n  color: var(--palette-secondary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-secondary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var StyledButton = /*#__PURE__*/styled.button(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-style: none;\n  outline: 0;\n  display: inline-block;\n  padding: 6px 16px;\n  color: var(--palette-text-primary);\n  background-color: transparent;\n\n    /* color=primary and variant=text*/\n    ", "\n\n      /* color=secondary and variant=text*/\n    ", "\n\n      /* size=small*/\n    ", "\n\n      /* size=large*/\n    ", ";\n\n      /*variant=outlined*/\n    ", ";\n\n    /*variant=filled*/\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  ", ";\n\n"])), function (props) {
-  return props.$color === 'primary' && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        color: var(--palette-primary-600);\n        &:hover {\n          background-color: var(--palette-primary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      "])));
-}, function (props) {
-  return props.$color === 'secondary' && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: var(--palette-secondary-dark);\n        &:hover {\n          background-color: var(--palette-secondary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      "])));
-}, function (props) {
-  return props.$size === 'small' && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        padding: 6px 12px;\n        font-size: ", "rem;\n      "])), getRemSize(13));
-}, function (props) {
-  return props.$size === 'large' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        padding: 8px 14px;\n        font-size: ", "rem;\n      "])), getRemSize(15));
-}, function (props) {
-  return props.$variant === 'outlined' && outlined;
-}, function (props) {
-  return props.$variant === 'filled' && filled;
-}, function (props) {
-  return props.$fullWidth && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "])));
-}, function (props) {
-  return props.disabled && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        color: var(--palette-text-disabled);\n        box-shadow: var(--shadow-none);\n      "])));
-}, function (props) {
-  return props.$variant === 'outlined' && props.$color === 'primary' && outlinedPrimary;
-}, function (props) {
-  return props.$variant === 'outlined' && props.$color === 'secondary' && outlinedSecondary;
-}, function (props) {
-  return props.$variant === 'filled' && props.$color === 'primary' && filledPrimary;
-}, function (props) {
-  return props.$variant === 'filled' && props.$color === 'secondary' && filledSecondary;
-});
-var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var props = _extends({}, _ref);
-
-  return React.createElement(React.Fragment, null, React.createElement(GlobalStyle, null), React.createElement(StyledButton, Object.assign({
-    ref: ref,
-    "$color": props.color || 'default',
-    "$size": props.size || 'medium',
-    "$fullWidth": props.fullWidth || false,
-    disabled: props.disabled || false,
-    "$variant": props.variant || 'text'
-  }, props), props.children));
-});
-
-var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1;
-var checkboxColors;
-
-(function (checkboxColors) {
-  checkboxColors["primary"] = "primary";
-  checkboxColors["secondary"] = "secondary";
-})(checkboxColors || (checkboxColors = {}));
-
-var checkboxSizes;
-
-(function (checkboxSizes) {
-  checkboxSizes["small"] = "small";
-  checkboxSizes["medium"] = "medium";
-  checkboxSizes["large"] = "large";
-})(checkboxSizes || (checkboxSizes = {}));
-
-var CheckboxRoot = /*#__PURE__*/styled.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --opacity-disabled: 0.5;\n\n  display: inline-flex;\n  position: relative;\n"])));
-var smallSize = /*#__PURE__*/css(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n"])));
-var mediumSize = /*#__PURE__*/css(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n"])));
-var largeSize = /*#__PURE__*/css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 32px;\n  height: 32px;\n"])));
-var secondaryColor = /*#__PURE__*/css(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --checkbox-color: var(--palette-secondary-main);\n  --checkbox-color-dark: var(--palette-secondary-dark);\n"])));
-var Box = /*#__PURE__*/styled.span(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --checkbox-color: var(--palette-primary-main);\n  --checkbox-color-dark: var(--palette-primary-dark);\n\n  align-items: center;\n  border: ", ";\n  border-radius: 4px;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  &[disabled] {\n    opacity: var(--opacity-disabled);\n  }\n\n  // We create an inner box\n  &::after {\n    --inner-size: 75%;\n    border-radius: 2px;\n    content: '';\n    display: inline-block;\n    height: var(--inner-size);\n    opacity: ", ";\n    transform: ", ";\n    transition: transform 100ms, opacity 100ms;\n    width: var(--inner-size);\n    &[disabled] {\n      opacity: var(--opacity-disabled);\n    }\n  }\n"])), function (props) {
-  return props.checked ? '2px solid var(--checkbox-color)' : '2px solid var(--palette-action-disabled)';
-}, smallSize, function (props) {
-  return props.size === checkboxSizes.small && smallSize;
-}, function (props) {
-  return props.size === checkboxSizes.medium && mediumSize;
-}, function (props) {
-  return props.size === checkboxSizes.large && largeSize;
-}, function (props) {
-  return props.color === 'secondary' && secondaryColor;
-}, function (p) {
-  return p.checked ? '1' : '0';
-}, function (p) {
-  return p.checked ? 'none' : 'scale(.35)';
-});
-var Input = /*#__PURE__*/styled.input(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  appearance: none;\n  cursor: pointer;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 2;\n\n  &[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  ", "\n\n  &:hover {\n    + ", " {\n      ", "\n    }\n  }\n"])), function (p) {
-  return p.checked && css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n      + ", " {\n        &:after {\n          background-color: var(--checkbox-color);\n        }\n      }\n    "])), Box);
-}, Box, function (p) {
-  return p.checked ? css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n              border: 2px solid var(--checkbox-color-dark);\n              &:after {\n                background-color: var(--checkbox-color-dark);\n              }\n            "]))) : !p.checked && css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n              border: 2px solid var(--checkbox-color);\n            "])));
-});
-var Checkbox = function Checkbox(_ref) {
-  var _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      id = _ref.id,
-      name = _ref.name,
-      onChange = _ref.onChange,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size,
-      props = _objectWithoutPropertiesLoose(_ref, ["checked", "color", "disabled", "id", "name", "onChange", "size"]);
-
-  return React.createElement(React.Fragment, null, React.createElement(GlobalStyle, null), React.createElement(CheckboxRoot, null, React.createElement(Input, Object.assign({
-    "aria-checked": checked,
-    checked: checked,
-    color: color,
-    "data-checked": checked,
-    disabled: disabled,
-    id: id,
-    name: name,
-    onChange: onChange,
-    type: "checkbox"
-  }, props)), React.createElement(Box, {
-    checked: checked,
-    color: color,
-    "data-checked": checked,
-    disabled: disabled,
-    size: size
-  })));
-};
-
-var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$2, _templateObject8$2;
-var withEllipsis = /*#__PURE__*/css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var gutterBottom = "margin-bottom: var(--typography-gutter);";
-var paragraph = "margin-bottom: 16px;";
-var primaryColor = "color: var(--palette-primary-600);";
-var secondaryColor$1 = "color: var(--palette-secondary-dark);";
-var primaryTextColor = "color: var(--palette-text-primary);";
-var secondaryTextColor = "color: var(--palette-text-secondary);";
-var errorColor = "color: var(--palette-error-main);";
-var Caption = /*#__PURE__*/css(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--caption-font-size);\n  line-height: var(--caption-line-height);\n  letter-spacing: var(--caption-letter-spacing);\n"])));
-var Overline = /*#__PURE__*/css(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--overline-font-size);\n  line-height: var(--overline-line-height);\n  letter-spacing: var(--overline-letter-spacing);\n  text-transform: var(--overline-text-transform);\n"])));
-var Body2 = /*#__PURE__*/css(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--body2-font-size);\n  line-height: var(--body2-line-height);\n  letter-spacing: var(--body2-letter-spacing);\n"])));
-var Body1 = /*#__PURE__*/css(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--body1-font-size);\n  line-height: var(--body1-line-height);\n  letter-spacing: var(--body1-letter-spacing);\n"])));
-var Subtitle2 = /*#__PURE__*/css(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-weight: var(--font-weight-medium);\n  font-size: var(--subtitle2-font-size);\n  line-height: var(--subtitle2-line-height);\n  letter-spacing: var(--subtitle2-letter-spacing);\n"])));
-var Subtitle1 = /*#__PURE__*/css(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--subtitle1-font-size);\n  line-height: var(--subtitle1-line-height);\n  letter-spacing: var(--subtitle1-letter-spacing);\n"])));
-var StyledTypography = /*#__PURE__*/styled.span(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--default-font-family);\n  margin: 0;\n  display: ", ";\n  text-align: ", ";\n  text-decoration-line: ", ";\n  font-weight: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) {
-  return props.$display ? props.$display : "inherit";
-}, function (props) {
-  return props.$align ? props.$align : "inherit";
-}, function (props) {
-  return props.$underline && "underline";
-}, function (props) {
-  return props.$bold ? "bold" : "var(--font-weight-regular)";
-}, function (props) {
-  return props.$ellipsis && props.$display === 'block' && withEllipsis;
-}, function (props) {
-  return props.$textParagraph && paragraph;
-}, function (props) {
-  return props.$gutter && gutterBottom;
-}, function (props) {
-  return props.$color === 'primary' && primaryColor;
-}, function (props) {
-  return props.$color === 'secondary' && secondaryColor$1;
-}, function (props) {
-  return props.$color === 'secondaryText' && secondaryTextColor;
-}, function (props) {
-  return props.$color === 'error' && errorColor;
-}, function (props) {
-  return (props.$color === 'primaryText' || !props.$color) && primaryTextColor;
-}, function (props) {
-  return props.$style === 'subtitle1' && Subtitle1;
-}, function (props) {
-  return props.$style === 'subtitle2' && Subtitle2;
-}, function (props) {
-  return props.$style === 'body1' && Body1;
-}, function (props) {
-  return props.$style === 'body2' && Body2;
-}, function (props) {
-  return props.$style === 'overline' && Overline;
-}, function (props) {
-  return props.$style === 'caption' && Caption;
-});
-var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var props = _extends({}, _ref);
-
-  return React.createElement(React.Fragment, null, React.createElement(GlobalStyle, null), React.createElement(StyledTypography, {
-    ref: ref,
-    "$color": props.color || 'primaryText',
-    "$style": props.style || 'subtitle1',
-    "$display": props.display || 'inherit',
-    "$gutter": props.gutter || false,
-    "$align": props.align || 'inherit',
-    "$ellipsis": props.ellipsis || false,
-    "$textParagraph": props.textParagraph || false,
-    "$underline": props.underline || false,
-    "$bold": props.bold || false,
-    as: props.style
-  }, props.children));
-});
-
-export { Button, Checkbox, Typography, checkboxColors, checkboxSizes };
-//# sourceMappingURL=design-system.esm.js.map

package/dist/design-system.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system.esm.js","sources":["../src/styles/theme.ts","../src/components/Button.tsx","../src/components/Checkbox.tsx","../src/components/Typography.tsx"],"sourcesContent":["import { createGlobalStyle } from 'styled-components';\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --palette-common-white: #ffffff;\n    --palette-common-black: #000000;\n    \n    --palette-primary-light: #CEEAE7;\n    --palette-primary-main: #8fdecb;\n    --palette-primary-dark: #8FDDCA;\n    --palette-primary-contrastText: #4C4F5A;\n    --palette-primary-400: #EDF7F6;\n    --palette-primary-600: #68baa6;\n    \n    --palette-secondary-light: #FEFCDD;\n    --palette-secondary-main: #FFEFD2;\n    --palette-secondary-dark: #ba9147;\n    --palette-secondary-contrastText: #4C4F5A;\n    --palette-secondary-400: #fff7e8;\n    \n    --palette-error-light: #f47f98;\n    --palette-error-main: #EF4836;\n    --palette-error-dark: #d32f2f;\n    --palette-error-contrastText: #ffffff;\n    \n    --palette-text-primary: #4C4F5A;\n    --palette-text-secondary: rgba(0, 0, 0, 0.54);\n    --palette-text-disabled: rgba(0, 0, 0, 0.38);\n    --palette-text-hint: rgba(0, 0, 0, 0.38);\n    \n    --palette-action-disabled: rgba(0, 0, 0, 0.07);\n    --palette-action-hover: rgba(0, 0, 0, 0.04);\n    --palette-action-disabledBackground: rgba(0, 0, 0, 0.05);\n    \n    --border-radius-small: 10px;\n    --border-radius-default: 40px;\n    \n    --shadow-none: none;\n    --shadow-01: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);\n    --shadow-02: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);\n    --shadow-03: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);\n    --shadow-04: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);\n    --shadow-05: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);\n    --shadow-06: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);\n    --shadow-07: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12);\n    --shadow-08: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);\n    \n    --ease-out:cubic-bezier(0.0, 0, 0.2, 1); \n    --ease-in:cubic-bezier(0.4, 0, 1, 1); \n    \n    --spacing-sm: 10;\n    --spacing-md: 20;\n    --spacing-lg: 30;\n\n    --html-font-size: 16;\n    --default-font-size: 14;\n    --font-weight-light: 300;\n    --font-weight-regular: 400;\n    --font-weight-medium: 500;\n    --font-weight-bold: 700;\n    --typography-gutter:0.35em;\n\n    --default-font-family: 'Roboto', sans-serif;\n\n    --caption-font-size: 0.75rem;\n    --caption-line-height: 1.66;\n    --caption-letter-spacing: 0.03333em;\n\n    --overline-font-size: 0.75rem;\n    --overline-line-height: 2.66;\n    --overline-letter-spacing: 0.08333em;\n    --overline-text-transform: uppercase;\n    \n    --body1-font-size: 1rem;\n    --body1-line-height: 1.5;\n    --body1-letter-spacing: 0.00938em;\n\n    --body2-font-size: 0.875rem;\n    --body2-line-height: 1.43;\n    --body2-letter-spacing: 0.01071em;\n    \n    --subtitle1-font-size: 1rem;\n    --subtitle1-line-height: 1.75;\n    --subtitle1-letter-spacing: 0.00938em;\n\n    --subtitle2-font-size: 0.875rem;\n    --subtitle2-line-height: 1.57;\n    --subtitle2-letter-spacing: 0.00714em;\n  }\n  \n  button {\n    font-family: var(--default-font-family);\n    font-weight: var(--font-weight-medium);\n    font-size: 0.875rem;\n    line-height: 1.75;\n    letter-spacing: 0.02857em;\n    text-transform: uppercase;\n    cursor: pointer;\n  }\n  \n  \n  h1 {\n    font-weight: var(--font-weight-light);\n    font-size: 6rem;\n    line-height: 1.167;\n    letter-spacing: -0.01562em;\n  }\n  \n  h2 {\n    font-weight: var(--font-weight-light);\n    font-size: 3.75rem;\n    line-height: 1.2;\n    letter-spacing: -0.00833em;\n  }\n  \n  h3 {\n    font-weight: var(--font-weight-regular);\n    font-size: 3rem;\n    line-height: 1.167;\n    letter-spacing: 0em;\n  }\n\n  h4 {\n    font-weight: var(--font-weight-regular);\n    font-size: 2.125rem;\n    line-height: 1.235;\n    letter-spacing: 0.00735em;\n  }\n\n  h5 {\n    font-weight: var(--font-weight-regular);\n    font-size: 1.5rem;\n    line-height: 1.334;\n    letter-spacing: 0em;\n  }\n\n  h6 {\n    font-weight: var(--font-weight-medium);\n    font-size: 1.25rem;\n    line-height: 1.6;\n    letter-spacing: 0.0075em;\n  }\n`;\n\nexport const getRemSize = (fontSize: number): number => {\n  const defaultFontSize: number = 14;\n  const htmlFontSize: number = 16;\n  const coefficient: number = defaultFontSize / 14;\n  return (fontSize / htmlFontSize) * coefficient;\n};\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { GlobalStyle, getRemSize } from '../styles/theme';\n\nexport interface ButtonProps {\n  color?: 'primary' | 'secondary' | 'default';\n  variant?: 'filled' | 'outlined' | 'text';\n  size?: 'small' | 'medium' | 'large';\n  onClick?: () => void;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * This is to prevent error TS2339: Property '$color', $variant etc does not exist on type,\n * Styled components suggested using $ prefix with a prop when rendering the component. But we don't want consumers to use $ when using this library\n * https://github.com/styled-components/styled-components/issues/3279#issuecomment-695972483\n **/\ninterface StyledButtonProps {\n  $color?: ButtonProps['color'];\n  $variant?: ButtonProps['variant'];\n  $size?: ButtonProps['size'];\n  $onClick?: () => ButtonProps['onClick'];\n  $fullWidth?: ButtonProps['fullWidth'];\n  disabled?: boolean;\n}\n\nconst outlined = css`\n  color: var(--palette-text-primary);\n  padding: 5px 15px;\n  border: 0.4px solid var(--palette-text-secondary);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-action-hover);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst outlinedPrimary = css`\n  color: var(--palette-primary-600);\n  background-color: transparent;\n  border: 1px solid var(--palette-primary-600);\n  &:hover {\n    border: 1px solid var(--palette-primary-dark);\n    background-color: var(--palette-primary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-05);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst outlinedSecondary = css`\n  color: var(--palette-secondary-dark);\n  background-color: transparent;\n  border: 1px solid var(--palette-secondary-dark);\n  &:hover {\n    background-color: var(--palette-secondary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-02);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst filled = css`\n  background-color: var(--palette-common-white);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  box-shadow: var(--shadow-02);\n  &:hover {\n    background-color: var(--palette-action-hover);\n    box-shadow: var(--shadow-04);\n  }\n  &:active {\n    box-shadow: var(--shadow-08);\n  }\n  &:focus-visible {\n    box-shadow: var(--shadow-06);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n    box-shadow: var(--shadow-none);\n  }\n`;\n\nconst filledPrimary = css`\n  background-color: var(--palette-primary-main);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-primary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst filledSecondary = css`\n  background-color: var(--palette-secondary-main);\n  color: var(--palette-secondary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-secondary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst StyledButton = styled.button<StyledButtonProps>`\n  border-style: none;\n  outline: 0;\n  display: inline-block;\n  padding: 6px 16px;\n  color: var(--palette-text-primary);\n  background-color: transparent;\n\n    /* color=primary and variant=text*/\n    ${props =>\n      props.$color === 'primary' &&\n      css`\n        color: var(--palette-primary-600);\n        &:hover {\n          background-color: var(--palette-primary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      `}\n\n      /* color=secondary and variant=text*/\n    ${props =>\n      props.$color === 'secondary' &&\n      css`\n        color: var(--palette-secondary-dark);\n        &:hover {\n          background-color: var(--palette-secondary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      `}\n\n      /* size=small*/\n    ${props =>\n      props.$size === 'small' &&\n      css`\n        padding: 6px 12px;\n        font-size: ${getRemSize(13)}rem;\n      `}\n\n      /* size=large*/\n    ${props =>\n      props.$size === 'large' &&\n      css`\n        padding: 8px 14px;\n        font-size: ${getRemSize(15)}rem;\n      `};\n\n      /*variant=outlined*/\n    ${props => props.$variant === 'outlined' && outlined};\n\n    /*variant=filled*/\n    ${props => props.$variant === 'filled' && filled};\n    ${props =>\n      props.$fullWidth &&\n      css`\n        width: 100%;\n      `};\n    ${props =>\n      props.disabled &&\n      css`\n        color: var(--palette-text-disabled);\n        box-shadow: var(--shadow-none);\n      `};\n    ${props =>\n      props.$variant === 'outlined' &&\n      props.$color === 'primary' &&\n      outlinedPrimary};\n    ${props =>\n      props.$variant === 'outlined' &&\n      props.$color === 'secondary' &&\n      outlinedSecondary};\n    ${props =>\n      props.$variant === 'filled' &&\n      props.$color === 'primary' &&\n      filledPrimary};\n  ${props =>\n    props.$variant === 'filled' &&\n    props.$color === 'secondary' &&\n    filledSecondary};\n\n`;\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ ...props }, ref) => {\n    return (\n      <>\n        <GlobalStyle />\n        <StyledButton\n          ref={ref}\n          $color={props.color || 'default'}\n          $size={props.size || 'medium'}\n          $fullWidth={props.fullWidth || false}\n          disabled={props.disabled || false}\n          $variant={props.variant || 'text'}\n          {...props}\n        >\n          {props.children}\n        </StyledButton>\n      </>\n    );\n  }\n);\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { GlobalStyle } from '../styles/theme';\n\ntype ColorType = 'primary' | 'secondary';\ntype CheckboxSizeType = 'small' | 'medium' | 'large';\nexport interface CheckboxProps {\n  checked: boolean;\n  color?: ColorType;\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  size?: CheckboxSizeType;\n}\n\nexport interface CustomCheckboxProps {\n  color?: ColorType;\n  checked: boolean;\n  disabled: boolean;\n  size: CheckboxSizeType;\n}\n\nexport enum checkboxColors {\n  primary = 'primary',\n  secondary = 'secondary',\n}\n\nexport enum checkboxSizes {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nconst CheckboxRoot = styled.div`\n  --opacity-disabled: 0.5;\n\n  display: inline-flex;\n  position: relative;\n`;\n\nconst smallSize = css`\n  width: 14px;\n  height: 14px;\n`;\n\nconst mediumSize = css`\n  width: 24px;\n  height: 24px;\n`;\n\nconst largeSize = css`\n  width: 32px;\n  height: 32px;\n`;\n\nconst secondaryColor = css`\n  --checkbox-color: var(--palette-secondary-main);\n  --checkbox-color-dark: var(--palette-secondary-dark);\n`;\n\nconst Box = styled.span<CustomCheckboxProps>`\n  --checkbox-color: var(--palette-primary-main);\n  --checkbox-color-dark: var(--palette-primary-dark);\n\n  align-items: center;\n  border: ${props =>\n    props.checked\n      ? '2px solid var(--checkbox-color)'\n      : '2px solid var(--palette-action-disabled)'};\n  border-radius: 4px;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n\n  ${smallSize}\n  ${props => props.size === checkboxSizes.small && smallSize}\n  ${props => props.size === checkboxSizes.medium && mediumSize}\n  ${props => props.size === checkboxSizes.large && largeSize}\n  ${props => props.color === 'secondary' && secondaryColor}\n  &[disabled] {\n    opacity: var(--opacity-disabled);\n  }\n\n  // We create an inner box\n  &::after {\n    --inner-size: 75%;\n    border-radius: 2px;\n    content: '';\n    display: inline-block;\n    height: var(--inner-size);\n    opacity: ${p => (p.checked ? '1' : '0')};\n    transform: ${p => (p.checked ? 'none' : 'scale(.35)')};\n    transition: transform 100ms, opacity 100ms;\n    width: var(--inner-size);\n    &[disabled] {\n      opacity: var(--opacity-disabled);\n    }\n  }\n`;\n\nconst Input = styled.input<CheckboxProps>`\n  appearance: none;\n  cursor: pointer;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 2;\n\n  &[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  ${p =>\n    p.checked &&\n    css`\n      + ${Box} {\n        &:after {\n          background-color: var(--checkbox-color);\n        }\n      }\n    `}\n\n  &:hover {\n    + ${Box} {\n      ${p =>\n        p.checked\n          ? css`\n              border: 2px solid var(--checkbox-color-dark);\n              &:after {\n                background-color: var(--checkbox-color-dark);\n              }\n            `\n          : !p.checked &&\n            css`\n              border: 2px solid var(--checkbox-color);\n            `}\n    }\n  }\n`;\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  checked = false,\n  color = 'primary',\n  disabled = false,\n  id,\n  name,\n  onChange,\n  size = 'small',\n  ...props\n}) => {\n  return (\n    <>\n      <GlobalStyle />\n      <CheckboxRoot>\n        <Input\n          aria-checked={checked}\n          checked={checked}\n          color={color}\n          data-checked={checked}\n          disabled={disabled}\n          id={id}\n          name={name}\n          onChange={onChange}\n          type=\"checkbox\"\n          {...props}\n        />\n        <Box\n          checked={checked}\n          color={color}\n          data-checked={checked}\n          disabled={disabled}\n          size={size}\n        />\n      </CheckboxRoot>\n    </>\n  );\n};\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { GlobalStyle } from '../styles/theme';\n\nexport interface TypographyProps {\n  color?: 'primary' | 'secondary' | 'primaryText' | 'secondaryText' | 'error';\n  style?:\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption'\n    | 'overline';\n  underline?: boolean;\n  bold?: boolean;\n  display?: 'inline' | 'block' | 'inherit';\n  gutter?: boolean;\n  align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';\n  ellipsis?: boolean;\n  textParagraph?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * This is to prevent error TS2339: Property '$color', $variant etc does not exist on type,\n * Styled components suggested using $ prefix with a prop when rendering the component. But we don't want consumers to use $ when using this library\n * https://github.com/styled-components/styled-components/issues/3279#issuecomment-695972483.\n **/\ninterface StyledTypographyProps {\n  $color?: TypographyProps['color'];\n  $style?: TypographyProps['style'];\n  $underline?: TypographyProps['underline'];\n  $bold?: TypographyProps['bold'];\n  $display?: TypographyProps['display'];\n  $gutter?: TypographyProps['gutter'];\n  $align?: TypographyProps['align'];\n  $ellipsis?: TypographyProps['ellipsis'];\n  $textParagraph?: TypographyProps['textParagraph'];\n}\n\nconst withEllipsis = css`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst gutterBottom = `margin-bottom: var(--typography-gutter);`;\n\nconst paragraph = `margin-bottom: 16px;`;\n\nconst primaryColor = `color: var(--palette-primary-600);`;\n\nconst secondaryColor = `color: var(--palette-secondary-dark);`;\n\nconst primaryTextColor = `color: var(--palette-text-primary);`;\n\nconst secondaryTextColor = `color: var(--palette-text-secondary);`;\n\nconst errorColor = `color: var(--palette-error-main);`;\n\nconst Caption = css`\n  font-size: var(--caption-font-size);\n  line-height: var(--caption-line-height);\n  letter-spacing: var(--caption-letter-spacing);\n`;\n\nconst Overline = css`\n  font-size: var(--overline-font-size);\n  line-height: var(--overline-line-height);\n  letter-spacing: var(--overline-letter-spacing);\n  text-transform: var(--overline-text-transform);\n`;\n\nconst Body2 = css`\n  font-size: var(--body2-font-size);\n  line-height: var(--body2-line-height);\n  letter-spacing: var(--body2-letter-spacing);\n`;\n\nconst Body1 = css`\n  font-size: var(--body1-font-size);\n  line-height: var(--body1-line-height);\n  letter-spacing: var(--body1-letter-spacing);\n`;\n\nconst Subtitle2 = css`\n  font-weight: var(--font-weight-medium);\n  font-size: var(--subtitle2-font-size);\n  line-height: var(--subtitle2-line-height);\n  letter-spacing: var(--subtitle2-letter-spacing);\n`;\n\nconst Subtitle1 = css`\n  font-size: var(--subtitle1-font-size);\n  line-height: var(--subtitle1-line-height);\n  letter-spacing: var(--subtitle1-letter-spacing);\n`;\n\nconst StyledTypography = styled.span<StyledTypographyProps>`\n  font-family: var(--default-font-family);\n  margin: 0;\n  display: ${props => (props.$display ? props.$display : `inherit`)};\n  text-align: ${props => (props.$align ? props.$align : `inherit`)};\n  text-decoration-line: ${props => props.$underline && `underline`};\n  font-weight: ${props =>\n    props.$bold ? `bold` : `var(--font-weight-regular)`};\n  ${props => props.$ellipsis && props.$display === 'block' && withEllipsis}\n  ${props => props.$textParagraph && paragraph}\n  ${props => props.$gutter && gutterBottom}\n  ${props => props.$color === 'primary' && primaryColor}\n  ${props => props.$color === 'secondary' && secondaryColor}\n  ${props => props.$color === 'secondaryText' && secondaryTextColor}\n  ${props => props.$color === 'error' && errorColor}\n  ${props =>\n    (props.$color === 'primaryText' || !props.$color) && primaryTextColor}\n  ${props => props.$style === 'subtitle1' && Subtitle1}\n  ${props => props.$style === 'subtitle2' && Subtitle2}\n  ${props => props.$style === 'body1' && Body1}\n  ${props => props.$style === 'body2' && Body2}\n  ${props => props.$style === 'overline' && Overline}\n  ${props => props.$style === 'caption' && Caption}\n`;\n\nexport const Typography = React.forwardRef<HTMLSpanElement, TypographyProps>(\n  ({ ...props }, ref) => {\n    return (\n      <>\n        <GlobalStyle />\n        <StyledTypography\n          ref={ref}\n          $color={props.color || 'primaryText'}\n          $style={props.style || 'subtitle1'}\n          $display={props.display || 'inherit'}\n          $gutter={props.gutter || false}\n          $align={props.align || 'inherit'}\n          $ellipsis={props.ellipsis || false}\n          $textParagraph={props.textParagraph || false}\n          $underline={props.underline || false}\n          $bold={props.bold || false}\n          as={props.style}\n        >\n          {props.children}\n        </StyledTypography>\n      </>\n    );\n  }\n);\n"],"names":["GlobalStyle","createGlobalStyle","getRemSize","fontSize","defaultFontSize","htmlFontSize","coefficient","outlined","css","outlinedPrimary","outlinedSecondary","filled","filledPrimary","filledSecondary","StyledButton","styled","button","props","$color","$size","$variant","$fullWidth","disabled","Button","React","forwardRef","ref","color","size","fullWidth","variant","children","checkboxColors","checkboxSizes","CheckboxRoot","div","smallSize","mediumSize","largeSize","secondaryColor","Box","span","checked","small","medium","large","p","Input","input","Checkbox","id","name","onChange","type","withEllipsis","gutterBottom","paragraph","primaryColor","primaryTextColor","secondaryTextColor","errorColor","Caption","Overline","Body2","Body1","Subtitle2","Subtitle1","StyledTypography","$display","$align","$underline","$bold","$ellipsis","$textParagraph","$gutter","$style","Typography","style","display","gutter","align","ellipsis","textParagraph","underline","bold","as"],"mappings":"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"}

package/dist/styles/theme.d.ts

@@ -1,2 +0,0 @@
-export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export declare const getRemSize: (fontSize: number) => number;