@crystallize/design-system 1.4.0 → 1.4.2

package/dist/design-system.cjs.development.js

@@ -1,251 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var styled = require('styled-components');
-var styled__default = _interopDefault(styled);
-
-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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__default.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' && styled.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' && styled.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' && styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        padding: 6px 12px;\n        font-size: ", "rem;\n      "])), getRemSize(13));
-}, function (props) {
-  return props.$size === 'large' && styled.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 && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "])));
-}, function (props) {
-  return props.disabled && styled.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;
-
-(function (checkboxColors) {
-  checkboxColors["primary"] = "primary";
-  checkboxColors["secondary"] = "secondary";
-})(exports.checkboxColors || (exports.checkboxColors = {}));
-
-(function (checkboxSizes) {
-  checkboxSizes["small"] = "small";
-  checkboxSizes["medium"] = "medium";
-  checkboxSizes["large"] = "large";
-})(exports.checkboxSizes || (exports.checkboxSizes = {}));
-
-var CheckboxRoot = /*#__PURE__*/styled__default.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --opacity-disabled: 0.5;\n\n  display: inline-flex;\n  position: relative;\n"])));
-var smallSize = /*#__PURE__*/styled.css(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n"])));
-var mediumSize = /*#__PURE__*/styled.css(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n"])));
-var largeSize = /*#__PURE__*/styled.css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 32px;\n  height: 32px;\n"])));
-var secondaryColor = /*#__PURE__*/styled.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__default.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 === exports.checkboxSizes.small && smallSize;
-}, function (props) {
-  return props.size === exports.checkboxSizes.medium && mediumSize;
-}, function (props) {
-  return props.size === exports.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__default.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 && styled.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 ? styled.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 && styled.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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__*/styled.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__default.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));
-});
-
-exports.Button = Button;
-exports.Checkbox = Checkbox;
-exports.Typography = Typography;
-//# sourceMappingURL=design-system.cjs.development.js.map

package/dist/design-system.cjs.development.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system.cjs.development.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/design-system.cjs.production.min.js

@@ -1,2 +0,0 @@
-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,r=n(require("react")),t=require("styled-components"),a=n(t);function o(){return(o=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n}).apply(this,arguments)}function i(n,e){return e||(e=n.slice(0)),n.raw=e,n}var l,c,s,p,d,u,x,b,h,g,f,v,m,y,k,w,z,$,E,F,C,T,j,O,D,S=t.createGlobalStyle(e||(e=i(["\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"]))),A=function(n){return n/16*1},P=t.css(l||(l=i(["\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"]))),W=t.css(c||(c=i(["\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"]))),R=t.css(s||(s=i(["\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"]))),q=t.css(p||(p=i(["\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"]))),B=t.css(d||(d=i(["\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"]))),_=t.css(u||(u=i(["\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"]))),G=a.button(x||(x=i(["\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(n){return"primary"===n.$color&&t.css(b||(b=i(["\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(n){return"secondary"===n.$color&&t.css(h||(h=i(["\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(n){return"small"===n.$size&&t.css(g||(g=i(["\n        padding: 6px 12px;\n        font-size: ","rem;\n      "])),A(13))}),(function(n){return"large"===n.$size&&t.css(f||(f=i(["\n        padding: 8px 14px;\n        font-size: ","rem;\n      "])),A(15))}),(function(n){return"outlined"===n.$variant&&P}),(function(n){return"filled"===n.$variant&&q}),(function(n){return n.$fullWidth&&t.css(v||(v=i(["\n        width: 100%;\n      "])))}),(function(n){return n.disabled&&t.css(m||(m=i(["\n        color: var(--palette-text-disabled);\n        box-shadow: var(--shadow-none);\n      "])))}),(function(n){return"outlined"===n.$variant&&"primary"===n.$color&&W}),(function(n){return"outlined"===n.$variant&&"secondary"===n.$color&&R}),(function(n){return"filled"===n.$variant&&"primary"===n.$color&&B}),(function(n){return"filled"===n.$variant&&"secondary"===n.$color&&_})),M=r.forwardRef((function(n,e){var t=o({},n);return r.createElement(r.Fragment,null,r.createElement(S,null),r.createElement(G,Object.assign({ref:e,$color:t.color||"default",$size:t.size||"medium",$fullWidth:t.fullWidth||!1,disabled:t.disabled||!1,$variant:t.variant||"text"},t),t.children))}));(O=exports.checkboxColors||(exports.checkboxColors={})).primary="primary",O.secondary="secondary",(D=exports.checkboxSizes||(exports.checkboxSizes={})).small="small",D.medium="medium",D.large="large";var H,I,J,K,L,N,Q,U,V=a.div(y||(y=i(["\n  --opacity-disabled: 0.5;\n\n  display: inline-flex;\n  position: relative;\n"]))),X=t.css(k||(k=i(["\n  width: 14px;\n  height: 14px;\n"]))),Y=t.css(w||(w=i(["\n  width: 24px;\n  height: 24px;\n"]))),Z=t.css(z||(z=i(["\n  width: 32px;\n  height: 32px;\n"]))),nn=t.css($||($=i(["\n  --checkbox-color: var(--palette-secondary-main);\n  --checkbox-color-dark: var(--palette-secondary-dark);\n"]))),en=a.span(E||(E=i(["\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(n){return n.checked?"2px solid var(--checkbox-color)":"2px solid var(--palette-action-disabled)"}),X,(function(n){return n.size===exports.checkboxSizes.small&&X}),(function(n){return n.size===exports.checkboxSizes.medium&&Y}),(function(n){return n.size===exports.checkboxSizes.large&&Z}),(function(n){return"secondary"===n.color&&nn}),(function(n){return n.checked?"1":"0"}),(function(n){return n.checked?"none":"scale(.35)"})),rn=a.input(F||(F=i(["\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(n){return n.checked&&t.css(C||(C=i(["\n      + "," {\n        &:after {\n          background-color: var(--checkbox-color);\n        }\n      }\n    "])),en)}),en,(function(n){return n.checked?t.css(T||(T=i(["\n              border: 2px solid var(--checkbox-color-dark);\n              &:after {\n                background-color: var(--checkbox-color-dark);\n              }\n            "]))):!n.checked&&t.css(j||(j=i(["\n              border: 2px solid var(--checkbox-color);\n            "])))})),tn=t.css(H||(H=i(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]))),an=t.css(I||(I=i(["\n  font-size: var(--caption-font-size);\n  line-height: var(--caption-line-height);\n  letter-spacing: var(--caption-letter-spacing);\n"]))),on=t.css(J||(J=i(["\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"]))),ln=t.css(K||(K=i(["\n  font-size: var(--body2-font-size);\n  line-height: var(--body2-line-height);\n  letter-spacing: var(--body2-letter-spacing);\n"]))),cn=t.css(L||(L=i(["\n  font-size: var(--body1-font-size);\n  line-height: var(--body1-line-height);\n  letter-spacing: var(--body1-letter-spacing);\n"]))),sn=t.css(N||(N=i(["\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"]))),pn=t.css(Q||(Q=i(["\n  font-size: var(--subtitle1-font-size);\n  line-height: var(--subtitle1-line-height);\n  letter-spacing: var(--subtitle1-letter-spacing);\n"]))),dn=a.span(U||(U=i(["\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(n){return n.$display?n.$display:"inherit"}),(function(n){return n.$align?n.$align:"inherit"}),(function(n){return n.$underline&&"underline"}),(function(n){return n.$bold?"bold":"var(--font-weight-regular)"}),(function(n){return n.$ellipsis&&"block"===n.$display&&tn}),(function(n){return n.$textParagraph&&"margin-bottom: 16px;"}),(function(n){return n.$gutter&&"margin-bottom: var(--typography-gutter);"}),(function(n){return"primary"===n.$color&&"color: var(--palette-primary-600);"}),(function(n){return"secondary"===n.$color&&"color: var(--palette-secondary-dark);"}),(function(n){return"secondaryText"===n.$color&&"color: var(--palette-text-secondary);"}),(function(n){return"error"===n.$color&&"color: var(--palette-error-main);"}),(function(n){return("primaryText"===n.$color||!n.$color)&&"color: var(--palette-text-primary);"}),(function(n){return"subtitle1"===n.$style&&pn}),(function(n){return"subtitle2"===n.$style&&sn}),(function(n){return"body1"===n.$style&&cn}),(function(n){return"body2"===n.$style&&ln}),(function(n){return"overline"===n.$style&&on}),(function(n){return"caption"===n.$style&&an})),un=r.forwardRef((function(n,e){var t=o({},n);return r.createElement(r.Fragment,null,r.createElement(S,null),r.createElement(dn,{ref:e,$color:t.color||"primaryText",$style:t.style||"subtitle1",$display:t.display||"inherit",$gutter:t.gutter||!1,$align:t.align||"inherit",$ellipsis:t.ellipsis||!1,$textParagraph:t.textParagraph||!1,$underline:t.underline||!1,$bold:t.bold||!1,as:t.style},t.children))}));exports.Button=M,exports.Checkbox=function(n){var e=n.checked,t=void 0!==e&&e,a=n.color,o=void 0===a?"primary":a,i=n.disabled,l=void 0!==i&&i,c=n.id,s=n.name,p=n.onChange,d=n.size,u=void 0===d?"small":d,x=function(n,e){if(null==n)return{};var r,t,a={},o=Object.keys(n);for(t=0;t<o.length;t++)e.indexOf(r=o[t])>=0||(a[r]=n[r]);return a}(n,["checked","color","disabled","id","name","onChange","size"]);return r.createElement(r.Fragment,null,r.createElement(S,null),r.createElement(V,null,r.createElement(rn,Object.assign({"aria-checked":t,checked:t,color:o,"data-checked":t,disabled:l,id:c,name:s,onChange:p,type:"checkbox"},x)),r.createElement(en,{checked:t,color:o,"data-checked":t,disabled:l,size:u})))},exports.Typography=un;
-//# sourceMappingURL=design-system.cjs.production.min.js.map

package/dist/design-system.cjs.production.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system.cjs.production.min.js","sources":["../src/styles/theme.ts","../src/components/Checkbox.tsx","../src/components/Button.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 } 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, 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\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":["checkboxColors","checkboxSizes","GlobalStyle","createGlobalStyle","getRemSize","fontSize","defaultFontSize","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","CheckboxRoot","div","smallSize","mediumSize","largeSize","secondaryColor","Box","span","checked","small","medium","large","p","Input","input","withEllipsis","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","id","name","onChange","type"],"mappings":"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"}