@pedidopago/ui 1.7.21 → 1.7.22

package/dist/components/Alert/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;;wHAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa;;;wHAyBxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;;wHAqC9B,CAAC;AAEF,eAAO,MAAM,aAAa;;;wHAyBxB,CAAC"}

package/dist/components/Alert/styles.js

@@ -17,7 +17,7 @@ var StyledAlertWrapper = _styled.default.div(function (_ref) {
     maxWidth = _ref.maxWidth;
   var highlightBackground = type !== 'default' ? theme.colors[type].default : theme.colors.neutral.neutral3;
   var secondaryColor = type !== 'default' ? theme.colors[type].blurred : theme.colors.neutral.neutral1;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: start;\n      padding: 1rem;\n      gap: 1rem;\n      border-radius: 0.5rem;\n      width: 100%;\n      max-width: ", ";\n      background-color: ", ";\n\n      &[data-variant='outlined'] {\n        background-color: transparent;\n        border: 2px solid ", ";\n        color: ", ";\n      }\n\n      &[data-variant='highlighted'] {\n        align-items: center;\n        background: ", "08;\n        border-left: 4px solid ", ";\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n      }\n    "])), maxWidth ? "".concat(maxWidth, "px") : '', secondaryColor, secondaryColor, theme.colors.neutral.neutral4, highlightBackground, highlightBackground, theme.colors.neutral.black, highlightBackground);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: start;\n      padding: 1rem;\n      gap: 1rem;\n      border-radius: 0.5rem;\n      width: 100%;\n      max-width: ", ";\n      background-color: ", ";\n      color: ", ";\n\n      &[data-variant='outlined'] {\n        background-color: transparent;\n        border: 2px solid ", ";\n        color: ", ";\n      }\n\n      &[data-variant='highlighted'] {\n        align-items: center;\n        background: ", "08;\n        border-left: 4px solid ", ";\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n      }\n    "])), maxWidth ? "".concat(maxWidth, "px") : '', secondaryColor, theme.colors.neutral.black, secondaryColor, theme.colors.neutral.neutral4, highlightBackground, highlightBackground, theme.colors.neutral.black, highlightBackground);
 });
 exports.StyledAlertWrapper = StyledAlertWrapper;
 var StyledIconBox = _styled.default.div(function (_ref2) {

package/dist/components/Avatar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,eAAO,MAAM,aAAa;;;+HAMzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;sIAWtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;+HAsCzB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;+HAsB7B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;yGA8C1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,eAAO,MAAM,aAAa;;;+HAMzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;sIAWtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;+HAsCzB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;+HAgB7B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;yGA8C1B,CAAC"}

package/dist/components/Avatar/styles.js

@@ -27,7 +27,7 @@ var AvatarInitials = _styled.default.div(function (props) {
   var colorIsHex = (0, _colorCheck.isHexColor)(props.boxColor || '');
   var colorIsRgb = (0, _colorCheck.isRgbHslColor)(props.boxColor || '');
   var colorIsThemeColor = (0, _colorCheck.stripThemeColors)(props.boxColor || '', props.theme.colors);
-  var color = colorIsHex || colorIsRgb ? props.boxColor : colorIsThemeColor || props.theme.colors.primary.disabled;
+  var color = colorIsHex || colorIsRgb ? props.boxColor : colorIsThemeColor || props.theme.colors.neutral.neutral1;
   return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 99999999px;\n    white-space: nowrap;\n    overflow: hidden;\n    font-size: ", ";\n    text-overflow: ellipsis;\n    background-color: ", ";\n    color: ", ";\n    width: ", ";\n    height: ", ";\n    flex-shrink: 0;\n  "])), fontSize, color, props.theme.colors.neutral.black, size, size);
 });
 exports.AvatarInitials = AvatarInitials;
@@ -36,9 +36,9 @@ var AvatarInformation = _styled.default.div(_templateObject4 || (_templateObject
 }, function (props) {
   return props.theme.size === 'small' ? 0 : props.theme.size === 'large' ? '0.25rem' : '0.5rem';
 }, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+  return props.theme.colors.neutral.black;
 }, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral3 : props.theme.colors.neutral.neutral5;
+  return props.theme.colors.neutral.neutral5;
 });
 exports.AvatarInformation = AvatarInformation;
 var AvatarSkeleton = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n\n  border-radius: 999999px;\n  background-color: ", ";\n  overflow: hidden;\n\n  &::after {\n    content: '';\n    inset: 0px;\n    width: 100%;\n    height: 100%;\n    display: block;\n    animation: 1.6s linear 0.5s infinite normal none running move;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ", ",\n      transparent\n    );\n  }\n\n  @keyframes move {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n"])), function (props) {

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAiB,EACjB,OAAY,EACZ,IAAW,EACX,SAAS,EACT,SAAc,EACd,IAAe,EACf,SAAc,EACd,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,eA0DvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAO7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAiB,EACjB,OAAY,EACZ,IAAW,EACX,SAAS,EACT,SAAc,EACd,IAAe,EACf,SAAc,EACd,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,eA0DvD"}

package/dist/components/Button/index.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Button;
+var _Icon = _interopRequireDefault(require("../Icon"));
 var _index = require("../../shared/theme/index");
 var _getColorValue = require("../../utils/getColorValue");
-var _Icon = _interopRequireDefault(require("../Icon"));
 var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "leftIcon", "rightIcon", "variant", "bgColor", "size", "fullWidth", "textColor", "type", "iconColor"];

package/dist/components/Button/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,eAAe;;;mIA4I3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,eAAO,MAAM,eAAe;;;mIA8I3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC"}

package/dist/components/Button/styles.js

@@ -35,10 +35,8 @@ var ButtonContainer = _styled.default.button(_templateObject || (_templateObject
   }
 }, function (_ref4) {
   var theme = _ref4.theme,
-    textColor = _ref4.textColor,
-    bgColor = _ref4.bgColor;
-  var baseColor = (0, _invertColor.invertColor)(textColor || bgColor || theme.colors.primary.default, true);
-  return textColor !== null && textColor !== void 0 ? textColor : baseColor;
+    textColor = _ref4.textColor;
+  return textColor || theme.lightColors.neutral.white;
 }, function (_ref5) {
   var theme = _ref5.theme,
     bgColor = _ref5.bgColor;
@@ -58,7 +56,7 @@ var ButtonContainer = _styled.default.button(_templateObject || (_templateObject
     bgColor = _ref7.bgColor;
   switch (variant) {
     case 'solid':
-      return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          &:is(&:hover, &:focus):not(:disabled) {\n            box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.08);\n          }\n        "])));
+      return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          color: ", ";\n          svg,\n          path {\n            color: ", ";\n            fill: ", ";\n          }\n          &:is(&:hover, &:focus):not(:disabled) {\n            box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.08);\n          }\n        "])), (0, _invertColor.invertColor)(bgColor !== null && bgColor !== void 0 ? bgColor : theme.colors.primary.default, true), (0, _invertColor.invertColor)(bgColor !== null && bgColor !== void 0 ? bgColor : theme.colors.primary.default, true), (0, _invertColor.invertColor)(bgColor !== null && bgColor !== void 0 ? bgColor : theme.colors.primary.default, true));
     case 'outline':
       return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background-color: transparent;\n          color: ", ";\n          border: 3px ", " solid;\n          box-shadow: none;\n          &:is(&:hover, &:focus):not(:disabled) {\n            filter: var(--button-brightness);\n          }\n        "])), textColor || bgColor || theme.colors.primary.default, bgColor || textColor || theme.colors.primary.default);
     case 'ghost':

package/dist/components/CheckboxInput/styles.d.ts

@@ -1,32 +1,31 @@
 /// <reference types="react" />
-import { Theme } from '@emotion/react';
 import { IStyledCheckboxInput } from './types';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CheckboxWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Checkbox: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & IStyledCheckboxInput, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 export declare const Label: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & IStyledCheckboxInput, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
 export declare const ChildrensWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CheckBoxWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MultipleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/CheckboxInput/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxInput/styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAyC/C,eAAO,MAAM,OAAO;;;yGAInB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAY3B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yIAWpB,CAAC;AAEF,eAAO,MAAM,KAAK;;;yIAsBjB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAa3B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAI3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxInput/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,OAAO;;;yGAInB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAY3B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yIAoCpB,CAAC;AAEF,eAAO,MAAM,KAAK;;;yIAOjB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAa3B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAI3B,CAAC"}

package/dist/components/CheckboxInput/styles.js

@@ -6,51 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.MultipleWrapper = exports.Label = exports.ChildrensWrapper = exports.CheckboxWrapper = exports.Checkbox = exports.CheckBoxWrapper = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _colorToGray = require("../../utils/colorToGray");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function handleColorProp(theme, color) {
-  var _convertColor = (0, _colorToGray.convertColor)(color || theme.colors.primary.focus),
-    neutral1 = _convertColor.neutral1,
-    neutral3 = _convertColor.neutral3,
-    neutral4 = _convertColor.neutral4;
-  var disabled = "hsl(".concat(neutral1[0], ", 14%, 93%)");
-  var highlight = color || theme.colors.primary.focus;
-  var gray = "hsl(".concat(neutral1[0], ", 13%, 82%)");
-  var grayShadow = "hsl(".concat(neutral1[0], ", ").concat(neutral1[1], "%, ").concat(neutral1[2], "%)");
-  var hoverGray = "hsl(".concat(neutral3[0], ", ").concat(neutral3[1], "%, ").concat(neutral3[2], "%)");
-  var focusGray = "hsl(".concat(neutral4[0], ", ").concat(neutral4[1], "%, ").concat(neutral4[2], "%)");
-  var lightnessHue = "hsl(".concat(neutral1[0], ", 68%, 83%)");
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 2px solid ", ";\n    :hover {\n      border-color: ", ";\n    }\n\n    :focus {\n      border-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    }\n\n    :not(:disabled):checked {\n      :hover {\n        background-color: ", ";\n      }\n      :focus {\n        border-color: transparent;\n        box-shadow: 0 0 0 2px ", ";\n      }\n      border-color: transparent;\n      background: ", ";\n    }\n    :disabled {\n      border-color: ", ";\n      background-color: ", ";\n    }\n  "])), gray, hoverGray, focusGray, grayShadow, highlight, lightnessHue, highlight, disabled, disabled);
-}
-var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
 exports.Wrapper = Wrapper;
-var CheckboxWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  position: relative;\n  svg {\n    position: absolute;\n    pointer-events: none;\n    top: 2;\n    left: 2;\n  }\n"])));
+var CheckboxWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  position: relative;\n  svg {\n    position: absolute;\n    pointer-events: none;\n    top: 2;\n    left: 2;\n  }\n"])));
 exports.CheckboxWrapper = CheckboxWrapper;
-var Checkbox = _styled.default.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+var Checkbox = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
-    color = _ref.color,
-    disabled = _ref.disabled;
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: 0;\n    box-sizing: border-box;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border-radius: 6px;\n    cursor: ", ";\n    ", "\n  "])), disabled && 'not-allowed', handleColorProp(theme, color));
+    disabled = _ref.disabled,
+    color = _ref.color;
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin: 0;\n    box-sizing: border-box;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border-radius: 6px;\n    cursor: ", ";\n    border: 2px solid ", ";\n    transform: all ease 0.2s;\n\n    :hover,\n    :focus {\n      border-color: ", ";\n    }\n\n    :checked {\n      :hover,\n      :focus {\n        filter: brightness(0.8);\n      }\n\n      border-color: transparent;\n      background: ", ";\n    }\n\n    :disabled {\n      border-color: ", ";\n      background-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    }\n  "])), disabled && 'not-allowed', theme.colors.neutral.neutral3, theme.colors.neutral.neutral5, color || theme.colors.primary.default, theme.colors.tertiary.default, theme.colors.tertiary.disabled, theme.colors.tertiary.disabled);
 });
 exports.Checkbox = Checkbox;
-var Label = _styled.default.label(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+var Label = _styled.default.label(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme,
-    isDisabled = _ref2.isDisabled,
-    color = _ref2.color;
-  var _convertColor2 = (0, _colorToGray.convertColor)(color || theme.colors.primary.focus),
-    neutral1 = _convertColor2.neutral1,
-    black = _convertColor2.black;
-  var textColor = theme.colorMode === 'light' ? "hsl(".concat(black[0], ", ").concat(black[1], "%, ").concat(black[2], "% )") : theme.colors.neutral.white;
-  var disabled = "hsl(".concat(neutral1[0], ", 14%, 93%)");
-  var styles = isDisabled ? (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          color: ", ";\n          cursor: not-allowed;\n          font-weight: 500;\n        "])), disabled) : (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), textColor);
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      font-weight: 500;\n      ", ";\n    "])), styles);
+    isDisabled = _ref2.isDisabled;
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-weight: 500;\n      color: ", ";\n    "])), isDisabled ? theme.colors.neutral.neutral2 : theme.colors.neutral.neutral6);
 });
 exports.Label = Label;
-var ChildrensWrapper = _styled.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: 8px;\n  margin-left: 24px;\n  flex-direction: column;\n  gap: 8px;\n"])));
+var ChildrensWrapper = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: 8px;\n  margin-left: 24px;\n  flex-direction: column;\n  gap: 8px;\n"])));
 exports.ChildrensWrapper = ChildrensWrapper;
-var CheckBoxWrapper = _styled.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  svg {\n    box-sizing: border-box;\n    padding: 2px;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n"])));
+var CheckBoxWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  svg {\n    box-sizing: border-box;\n    padding: 2px;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n"])));
 exports.CheckBoxWrapper = CheckBoxWrapper;
-var MultipleWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var MultipleWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
 exports.MultipleWrapper = MultipleWrapper;

package/dist/components/CollapseCard/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/CollapseCard/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,SAAS;;;yGAGrB,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;oLAYrC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAG7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/CollapseCard/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,SAAS;;;yGAGrB,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;oLAarC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAG7B,CAAC"}

package/dist/components/CollapseCard/styles.js

@@ -11,12 +11,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.Container = Container;
-var CollapsedContentContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  gap: 20px;\n  cursor: ", ";\n  align-items: ", ";\n\n  > div {\n    flex: 1;\n  }\n"])), function (_ref) {
+var CollapsedContentContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  gap: 20px;\n  cursor: ", ";\n  align-items: ", ";\n  color: ", ";\n\n  > div {\n    flex: 1;\n  }\n"])), function (_ref) {
   var headerAsExpandButton = _ref.headerAsExpandButton;
   return headerAsExpandButton ? 'pointer' : 'default';
 }, function (_ref2) {
   var expandButtonPosition = _ref2.expandButtonPosition;
   return expandButtonPosition;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.neutral.black;
 });
 exports.CollapsedContentContainer = CollapsedContentContainer;
 var ChildrenContainer = (0, _styled.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  width: 100%;\n"])));

package/dist/components/ColorPicker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,oBAAoB;;;8HAehC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;yGAOlC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;yGAKvC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;8HAc/B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAM1B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAenC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAOhC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;yGAKrC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;qHAuC7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,oBAAoB;;;8HAShC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;yGAOlC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;yGAKvC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;8HAc/B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAM1B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAenC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAOhC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;yGAKrC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;qHA4B7B,CAAC"}

package/dist/components/ColorPicker/styles.js

@@ -9,9 +9,9 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var ColorPickerContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --border_radius: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  background-color: ", ";\n  border-radius: 24px;\n  border-radius: var(--border_radius);\n  box-shadow: ", ";\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : props.theme.colors.neutral.white;
+  return props.theme.colors.neutral.white;
 }, function (props) {
-  return props.theme.colorMode === 'dark' ? "0px 16px 32px ".concat(props.theme.colors.neutral.black) : props.theme.shadow.level3;
+  return props.theme.shadow.level3;
 });
 exports.ColorPickerContainer = ColorPickerContainer;
 var ColorSaturationWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 180px;\n  position: relative;\n  border-radius: var(--border_radius) var(--border_radius) 0 0;\n  background-image: linear-gradient(0deg, #000, transparent),\n    linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));\n"])));
@@ -37,10 +37,10 @@ exports.ColorPickerButtonsWrapper = ColorPickerButtonsWrapper;
 var ColorPickerButton = _styled.default.button(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  padding: 14px;\n  border: none;\n  font-size: 1rem;\n  font-family: inherit;\n  cursor: pointer;\n  font-weight: 600;\n  flex: 1;\n\n  user-select: none;\n\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n    filter: brightness(95%);\n  }\n\n  &:active {\n    filter: brightness(85%);\n  }\n"])), function (props) {
   return props.bgTransparent ? 'transparent' : props.theme.colors.primary.default;
 }, function (props) {
-  return props.bgTransparent ? props.theme.colors.neutral.neutral3 : props.theme.colors.neutral.white;
+  return props.bgTransparent ? props.theme.colors.neutral.neutral3 : '#FFFFFF';
 }, function (props) {
-  return props.bgTransparent ? props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral5 : props.theme.colors.neutral.neutral1 : '';
+  return props.bgTransparent ? props.theme.colors.neutral.neutral1 : '';
 }, function (props) {
-  return props.bgTransparent ? props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral1 : props.theme.colors.neutral.neutral5 : '';
+  return props.bgTransparent ? props.theme.colors.neutral.neutral5 : '';
 });
 exports.ColorPickerButton = ColorPickerButton;

package/dist/components/ComposeIcon/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComposeIcon/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;qIAuDjC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComposeIcon/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;qIAyDjC,CAAC"}

package/dist/components/ComposeIcon/styles.js

@@ -14,13 +14,13 @@ exports.ComposeIconContainer = ComposeIconContainer;
 var StatusBubbleContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n\n  padding: 4px;\n\n  background: ", ";\n\n  border-radius: 50%;\n  border: ", ";\n  box-shadow: ", ";\n\n  ", "\n"])), function (_ref) {
   var bubbleColor = _ref.bubbleColor,
     theme = _ref.theme;
-  return bubbleColor ? (0, _colorCheck.stripThemeColors)(bubbleColor, theme.colors) || bubbleColor : 'white';
+  return bubbleColor ? (0, _colorCheck.stripThemeColors)(bubbleColor, theme.colors) || bubbleColor : theme.colors.neutral.white;
 }, function (_ref2) {
   var size = _ref2.size,
     bubbleBorder = _ref2.bubbleBorder,
     bubbleColor = _ref2.bubbleColor,
     theme = _ref2.theme;
-  return "".concat(0.03 * size, "px solid ").concat(!bubbleBorder && bubbleColor ? (0, _colorCheck.stripThemeColors)(bubbleColor, theme.colors) || bubbleColor : bubbleColor);
+  return "".concat(0.03 * size, "px solid ").concat(!bubbleBorder && bubbleColor ? (0, _colorCheck.stripThemeColors)(bubbleColor, theme.colors) || bubbleColor : theme.colors.neutral.white);
 }, function (_ref3) {
   var bubbleShadow = _ref3.bubbleShadow;
   return bubbleShadow ? 'rgba(0, 0, 0, 0.2) 0px 3px 8px' : 'none';

package/dist/components/DatePicker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAsBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;+HA8J/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;yGAsC9B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAsBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;+HA2J/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;yGAkC9B,CAAC"}

package/dist/components/DatePicker/styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.DateYearPickerContainer = exports.DateYearPickerCell = exports.DateYearPickerBody = exports.DatePickerTableRow = exports.DatePickerTableCellSpan = exports.DatePickerTableCell = exports.DatePickerHeaderTitle = exports.DatePickerHeaderButton = exports.DatePickerHeader = exports.DatePickerContentContainer = exports.DatePickerContainer = exports.DatePickerBodyTable = exports.DatePickerBody = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colorCheck = require("../../utils/colorCheck");
-var _colorToGray = require("../../utils/colorToGray");
 var _getColorValue = require("../../utils/getColorValue");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,15 +51,15 @@ exports.DatePickerTableRow = DatePickerTableRow;
 var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: relative;\n  height: 0;\n  padding: 12px;\n  text-align: center;\n  font-family: inherit;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 50%;\n  cursor: pointer;\n  background-color: ", ";\n\n  color: ", ";\n\n  user-select: none;\n\n  transition: background 150ms ease;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &.is-current[aria-selected='false']:before {\n    border-radius: 0 50% 50% 0 !important;\n  }\n\n  &.is-current[aria-selected='true']:before {\n    display: none;\n  }\n"])), function (props) {
   return !props.isPrevNextMonth && !props.disabled && props.showSelectedDate && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
 }, function (props) {
-  return props.isPrevNextMonth ? props.theme.colors.neutral.neutral2 : props.isSelected || props.isEndDateOfRange ? !props.showSelectedDate ? props.theme.colors.neutral.black : props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
+  return props.isPrevNextMonth ? props.theme.colors.neutral.neutral2 : props.isSelected || props.isEndDateOfRange ? !props.showSelectedDate ? props.theme.colors.neutral.black : props.theme.lightColors.neutral.white : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
 }, function (props) {
   return props.disabled && "\n    pointer-events: none;\n    cursor: default;\n    color: ".concat(props.theme.colors.neutral.neutral1, ";\n  ");
 }, function (props) {
   return props.isToday && !props.isSelected && !props.isEndDateOfRange && "\n    &:after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: solid 1px ".concat(props.theme.colors.neutral.neutral2, ";\n      transform: translate(-50%, -50%);\n    }\n  ");
 }, function (props) {
-  return !props.isTheSameDate && (props.isInTheRange || props.isEndDateOfRange || props.isStartDateOfRange) && "\n    \n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 96%;\n      border-radius: ".concat(props.isStartDateOfRange ? '50% 0 0 50% !important' : props.isEndDateOfRange ? '0 50% 50% 0 !important' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n      \n      background-color: ").concat(!props.isPrevNextMonth && !props.disabled ? (0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1) : 'transparent', "; \n      transform: translate(-50%, -50%);\n    }\n  ");
+  return !props.isTheSameDate && (props.isInTheRange || props.isEndDateOfRange || props.isStartDateOfRange) && "\n    \n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 96%;\n      border-radius: ".concat(props.isStartDateOfRange ? '50% 0 0 50% !important' : props.isEndDateOfRange ? '0 50% 50% 0 !important' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n      \n      background-color: ").concat(!props.isPrevNextMonth && !props.disabled ? (0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1) : 'transparent', "; \n\n      transform: translate(-50%, -50%);\n    }\n  ");
 }, function (props) {
-  return !props.isSelected && !props.isEndDateOfRange && (0, _colorCheck.parseHslColorToString)((0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
+  return !props.isSelected && !props.isEndDateOfRange && props.theme.colors.neutral.neutral1;
 }, function (props) {
   return (props['aria-selected'] !== 'true' || props.isStartDateOfRange || props.isFirstDayOfMonth || props.isSelected || props.isLastDayOfMonth) && "\n      &.is-hover {\n          &:before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            border-radius: ".concat(props.isStartDateOfRange ? '50% 0 0 50% !important' : props.isEndDateOfRange ? '50%' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n            height: 96%;\n            background-color: ").concat(!props.isPrevNextMonth && !props.disabled && (0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1), "; \n            transform: translate(-50%, -50%);\n          }\n        }\n      }");
 });
@@ -84,6 +83,6 @@ var DateYearPickerCell = _styled.default.div(_templateObject13 || (_templateObje
 }, function (props) {
   return props.isSelected && "\n    background-color: ".concat((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), ";\n    color: white;\n  ");
 }, function (props) {
-  return !props.isSelected && (0, _colorCheck.parseHslColorToString)((0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
+  return !props.isSelected && props.theme.colors.neutral.neutral1;
 });
 exports.DateYearPickerCell = DateYearPickerCell;

package/dist/components/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAUvC,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,eA0Fd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAOvC,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,eA+Ed"}

package/dist/components/Dialog/index.js

@@ -10,12 +10,11 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _styles = require("./styles");
 var _useDevices = require("../../shared/hooks/useDevices");
-var _getColorValue = require("../../utils/getColorValue");
-var _react = require("@emotion/react");
-var _invertColor = require("../../utils/invertColor");
 var _colorCheck = require("../../utils/colorCheck");
+var _theme = require("../../shared/theme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable no-console */
 // Components
 
 // Styles
@@ -35,10 +34,11 @@ function Dialog(_ref) {
     backgroundColor = _ref.backgroundColor,
     contentColor = _ref.contentColor,
     onClose = _ref.onClose;
-  var theme = (0, _react.useTheme)();
+  var _useTheme = (0, _theme.useTheme)(),
+    theme = _useTheme.theme;
   var isMobile = (0, _useDevices.useDevices)('mobile');
-  var backgroundColorValue = (0, _getColorValue.getColorValue)(backgroundColor || (theme.colorMode === 'dark' ? 'neutral.neutral6' : 'body.light'), theme);
-  var contentColorValue = (0, _getColorValue.getColorValue)(contentColor || '', theme, ' ');
+  var backgroundColorValue = backgroundColor ? (0, _colorCheck.stripThemeColors)(backgroundColor, theme.colors) || backgroundColor : theme.colors.neutral.white;
+  var contentColorValue = contentColor ? (0, _colorCheck.stripThemeColors)(contentColor, theme.colors) || contentColor : theme.colors.neutral.black;
   var isHidden = !open;
   var tabIndex = isHidden ? -1 : 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
@@ -61,7 +61,7 @@ function Dialog(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           name: "x",
           size: 24,
-          color: contentColorValue || theme.colorMode === 'dark' ? 'neutral.neutral3' : 'neutral.neutral1'
+          color: theme.colors.neutral.neutral4
         })
       }), !!illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: illustration,
@@ -94,7 +94,6 @@ function Dialog(_ref) {
             tabIndex: tabIndex,
             "aria-hidden": isHidden,
             onClick: cancelButton.handler,
-            secondaryButtonColor: (0, _colorCheck.parseHexColorToRgba)((0, _invertColor.invertColor)(backgroundColorValue, true), 0.5),
             children: cancelButton.label
           })]
         })]

package/dist/components/Dialog/styles.d.ts

@@ -20,7 +20,5 @@ export declare const PrimaryButton: import("@emotion/styled").StyledComponent<{
 export declare const SecondaryButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    secondaryButtonColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Dialog/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,SAAS;;;;cACV,OAAO;kBACH,OAAO;qBACJ,MAAM;kBACT,MAAM;yGAkEpB,CAAC;AAEH,eAAO,MAAM,WAAW;;;qHAavB,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAuBzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;qHAuB3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,SAAS;;;;cACV,OAAO;kBACH,OAAO;qBACJ,MAAM;kBACT,MAAM;yGAkEpB,CAAC;AAEH,eAAO,MAAM,WAAW;;;qHAavB,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAwBzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;qHAmB3B,CAAC"}

package/dist/components/Dialog/styles.js

@@ -15,18 +15,16 @@ var Container = _styled.default.div(function (props) {
 exports.Container = Container;
 var CloseButton = _styled.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  outline: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])));
 exports.CloseButton = CloseButton;
-var PrimaryButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 14px 24px;\n  border-radius: 8px;\n  background: ", ";\n  color: ", ";\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 16px;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])), function (props) {
-  return props.theme.colors.primary.default;
-}, function (props) {
-  return props.theme.colors.body.light;
+var PrimaryButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 14px 24px;\n  border-radius: 8px;\n  background: ", ";\n  color: ", ";\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 16px;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n  transition: all ease 0.2s;\n\n  &:hover {\n    filter: brightness(0.7);\n  }\n\n  &:focus {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])), function (props) {
+  return props.theme.colors.primary.focus;
 }, function (props) {
-  return props.theme.colors.primary.hover;
+  return props.theme.lightColors.neutral.neutral1;
 }, function (props) {
   return props.theme.colors.primary.focus;
 });
 exports.PrimaryButton = PrimaryButton;
 var SecondaryButton = _styled.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 14px 24px;\n  border-radius: 8px;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 16px;\n  border: 0;\n  outline: 0;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])), function (props) {
-  return props.secondaryButtonColor || props.theme.colors.neutral.neutral3;
+  return props.theme.colors.neutral.neutral3;
 }, function (props) {
   return props.theme.colors.neutral.neutral5;
 });

package/dist/components/Dropzone/styles.js

@@ -29,7 +29,7 @@ var DropzoneContainer = _styled.default.div(_templateObject || (_templateObject
   if (isDisabled) {
     return theme.colors.neutral.neutral1;
   }
-  return '#f5faf8';
+  return 'transparent';
 }, function (props) {
   return props.isDraggingOver && !props.isDisabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:after {\n        opacity: 0.1;\n        visibility: visible;\n      }\n    "])));
 });

package/dist/components/EmojiPicker/EmotePickerData/index.js

@@ -104,7 +104,7 @@ function EmotePickerData(_ref) {
           variant: "ghost",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: category.icon,
-            color: isSelected ? 'primary.focus' : 'neutral.neutral3'
+            color: isSelected ? 'primary.default' : 'neutral.neutral3'
           })
         }, category.icon);
       })]

package/dist/components/EmojiPicker/EmotePickerData/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker/EmotePickerData/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,wBAAwB;;;yGAQpC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8C9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAmD5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAY1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker/EmotePickerData/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,wBAAwB;;;yGASpC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8C9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAmD5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAY1B,CAAC"}

package/dist/components/EmojiPicker/EmotePickerData/styles.js

@@ -8,41 +8,47 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var EmotePickerDataContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-height: 280px;\n  max-width: 510px;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n"])), function (_ref) {
+var EmotePickerDataContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-height: 280px;\n  max-width: 510px;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  box-shadow: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.neutral.neutral1;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.shadow.level2;
 });
 exports.EmotePickerDataContainer = EmotePickerDataContainer;
-var EmoteContentHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n\n  padding: 1em;\n\n  position: relative;\n  overflow-x: auto;\n\n  background: ", ";\n\n  & div {\n    display: flex;\n    align-items: center;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  &::-webkit-scrollbar {\n    height: 0.25rem;\n  }\n\n  & button {\n    height: 1.5em;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .background_selected_category {\n    width: 36px;\n    height: 3px;\n    left: 11px;\n    bottom: 6px;\n    transition: all ease 0.2s;\n    border-radius: 0.5rem;\n    background: ", ";\n    position: absolute;\n  }\n\n  @media screen and (max-width: ", ") {\n    border-radius: 0;\n  }\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors.neutral.white;
-}, function (_ref3) {
+var EmoteContentHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n\n  padding: 1em;\n\n  position: relative;\n  overflow-x: auto;\n\n  background: ", ";\n\n  & div {\n    display: flex;\n    align-items: center;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  &::-webkit-scrollbar {\n    height: 0.25rem;\n  }\n\n  & button {\n    height: 1.5em;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .background_selected_category {\n    width: 36px;\n    height: 3px;\n    left: 11px;\n    bottom: 6px;\n    transition: all ease 0.2s;\n    border-radius: 0.5rem;\n    background: ", ";\n    position: absolute;\n  }\n\n  @media screen and (max-width: ", ") {\n    border-radius: 0;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.tertiary.default;
+  return theme.colors.neutral.white;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.primary.default;
+  return theme.colors.tertiary.default;
 }, function (_ref5) {
   var theme = _ref5.theme;
+  return theme.colors.primary.default;
+}, function (_ref6) {
+  var theme = _ref6.theme;
   return theme.breakpoints.lg;
 });
 exports.EmoteContentHeader = EmoteContentHeader;
-var EmoteContentBody = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0em 1em;\n  background: #f8faf9;\n  flex-wrap: wrap;\n  gap: 0.25em;\n\n  max-height: 12.75em;\n  overflow-y: auto;\n\n  .virtual_column {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 42px;\n    height: 42px;\n  }\n\n  #intersection_emoji {\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: 90%;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0.25em;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  .container_emojis {\n    ::-webkit-scrollbar {\n      width: 4px;\n      height: 4px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      background: ", ";\n    }\n  }\n"])), function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.tertiary.default;
-}, function (_ref7) {
+var EmoteContentBody = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0em 1em;\n  background: ", "30;\n  flex-wrap: wrap;\n  gap: 0.25em;\n\n  max-height: 12.75em;\n  overflow-y: auto;\n\n  .virtual_column {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 42px;\n    height: 42px;\n  }\n\n  #intersection_emoji {\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: 90%;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0.25em;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  .container_emojis {\n    ::-webkit-scrollbar {\n      width: 4px;\n      height: 4px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      background: ", ";\n    }\n  }\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.colors.tertiary.hover;
+  return theme.colors.neutral.neutral1;
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.tertiary.default;
 }, function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.tertiary.hover;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.colors.tertiary.default;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colors.tertiary.hover;
 });
 exports.EmoteContentBody = EmoteContentBody;
-var EmoteContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 8px;\n  padding: 0.25rem;\n\n  :hover {\n    cursor: pointer;\n    background: ", ";\n  }\n"])), function (_ref10) {
-  var theme = _ref10.theme;
+var EmoteContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 8px;\n  padding: 0.25rem;\n\n  :hover {\n    cursor: pointer;\n    background: ", ";\n  }\n"])), function (_ref12) {
+  var theme = _ref12.theme;
   return theme.colors.neutral.neutral1;
 });
 exports.EmoteContainer = EmoteContainer;

package/dist/components/EmojiPicker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAKvC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAgBtC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAgBtC,CAAC"}

package/dist/components/EmojiPicker/styles.js

@@ -9,16 +9,13 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var EmotePickerDesktopContainer = (0, _styled.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 0.5rem;\n  position: fixed;\n  z-index: ", ";\n  box-shadow: ", ";\n"])), function (_ref) {
+var EmotePickerDesktopContainer = (0, _styled.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 0.5rem;\n  position: fixed;\n  z-index: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.zIndex.level8;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.shadow.level2;
 });
 exports.EmotePickerDesktopContainer = EmotePickerDesktopContainer;
-var EmotePickerMobileContainer = (0, _styled.default)(_framerMotion.motion.div)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n\n  height: 100%;\n  width: 100%;\n  background: rgba(0, 0, 0, 0.1);\n  display: flex;\n  padding: 1rem 1rem 0 1rem;\n\n  justify-content: center;\n  align-items: end;\n\n  .emote_picker_container {\n    border-radius: 0.5rem 0.5rem 0 0 !important;\n  }\n"])), function (_ref3) {
-  var theme = _ref3.theme;
+var EmotePickerMobileContainer = (0, _styled.default)(_framerMotion.motion.div)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n\n  height: 100%;\n  width: 100%;\n  background: rgba(0, 0, 0, 0.1);\n  display: flex;\n  padding: 1rem 1rem 0 1rem;\n\n  justify-content: center;\n  align-items: end;\n\n  .emote_picker_container {\n    border-radius: 0.5rem 0.5rem 0 0 !important;\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
   return theme.zIndex.level24;
 });
 exports.EmotePickerMobileContainer = EmotePickerMobileContainer;