@pedidopago/ui 1.7.21 → 1.7.23

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

@@ -123,6 +123,174 @@ export declare const StyledSpinner: import("@emotion/styled").StyledComponent<{
                 gradient: string;
             };
         };
+        lightColors: {
+            body: {
+                light: string;
+                dark: string;
+            };
+            primary: {
+                alert: string;
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+                transparent: string;
+            };
+            secondary: {
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+            };
+            tertiary: {
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+            };
+            neutral: {
+                white: string;
+                neutral1: string;
+                neutral2: string;
+                neutral3: string;
+                neutral4: string;
+                neutral5: string;
+                neutral6: string;
+                black: string;
+            };
+            background: {
+                linear1: string;
+                linear2: string;
+                linear3: string;
+                light: string;
+            };
+            informative: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            success: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            success_secondary: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            warning: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            warning_secondary: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            error: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            critical: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+        };
+        darkColors: {
+            body: {
+                light: string;
+                dark: string;
+            };
+            primary: {
+                alert: string;
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+                transparent: string;
+            };
+            secondary: {
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+            };
+            tertiary: {
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+            };
+            neutral: {
+                white: string;
+                neutral1: string;
+                neutral2: string;
+                neutral3: string;
+                neutral4: string;
+                neutral5: string;
+                neutral6: string;
+                black: string;
+            };
+            background: {
+                linear1: string;
+                linear2: string;
+                linear3: string;
+                light: string;
+            };
+            informative: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            success: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            success_secondary: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            warning: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            warning_secondary: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            error: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            critical: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+        };
         space: {
             px: string;
             0.5: string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAwCzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAqCzB,CAAC"}

package/dist/components/Spinner/styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledSpinner = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _getColorValue = require("../../utils/getColorValue");
+var _colorCheck = require("../../utils/colorCheck");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var StyledSpinner = _styled.default.div(function (_ref) {
   var size = _ref.size,
@@ -14,10 +15,9 @@ var StyledSpinner = _styled.default.div(function (_ref) {
     emptyColor = _ref.emptyColor,
     thickness = _ref.thickness,
     speed = _ref.speed;
-  var spinnerColor = (0, _getColorValue.getColorValue)(color || 'primary.default', theme);
   var spinnerEmptyColor = (0, _getColorValue.getColorValue)(emptyColor || 'transparent', theme, 'transparent');
   var modifiedSize = size === 'sm' ? '16px' : size === 'md' ? '24px' : size === 'lg' ? '32px' : size === 'xl' ? '48px' : '24px';
-  var borderColor = spinnerEmptyColor === 'currentColor' ? 'transparent' : theme.colorMode === 'light' ? theme.colors.neutral.neutral1 : theme.colors.neutral.neutral6;
-  return "\n    display: inline-block;\n    width: ".concat(modifiedSize, ";\n    height: ").concat(modifiedSize, ";\n    border: ").concat(thickness || '4px', " solid ").concat(spinnerColor, ";\n    border-radius: 9999999px;\n    border-left-color: ").concat(borderColor, ";\n    border-bottom-color: ").concat(borderColor, ";\n    animation: spin ").concat(speed || '0.45s', " linear infinite;\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  ");
+  var borderColor = spinnerEmptyColor === 'currentColor' ? 'transparent' : theme.colors.neutral.neutral1;
+  return "\n    display: inline-block;\n    width: ".concat(modifiedSize, ";\n    height: ").concat(modifiedSize, ";\n    border: ").concat(thickness || '4px', " solid ").concat(color ? (0, _colorCheck.stripThemeColors)(color || '', theme.colors) || color : theme.colors.primary.default, ";\n    border-radius: 9999999px;\n    border-left-color: ").concat(borderColor, ";\n    border-bottom-color: ").concat(borderColor, ";\n    animation: spin ").concat(speed || '0.45s', " linear infinite;\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  ");
 });
 exports.StyledSpinner = StyledSpinner;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,cAAc;;;;;;;yGAiB1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO;;;yGA+D5D,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAK1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;yGAkBnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;yGAQjC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAKtC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;iHA2CzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,cAAc;;;;;;;yGAiB1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO;;;yGA+D5D,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAK1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;yGAkBnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;yGAQjC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAKtC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;iHAiCzB,CAAC"}

package/dist/components/Steps/styles.js

@@ -36,7 +36,7 @@ var StepsCircle = _styled.default.div(_templateObject2 || (_templateObject2 = _t
     activeColor = _ref7.activeColor,
     isFinished = _ref7.isFinished,
     isCurrent = _ref7.isCurrent;
-  return theme.colors[activeColor] && "\n    background-color: ".concat(isFinished ? theme.colors[activeColor].default : isCurrent ? activeColor === 'error' ? theme.colors.error.blurred : theme.colors[activeColor].disabled : 'transparent', ";\n    color: ").concat(isFinished ? theme.colors.body.light : isCurrent ? theme.colors.neutral.black : theme.colors.neutral.neutral3, ";\n\n    ").concat(!isCurrent && !isFinished && "\n      border: solid 2px ".concat(theme.colors.neutral.neutral1, ";\n      "), "\n  ");
+  return theme.colors[activeColor] && "\n    background-color: ".concat(isFinished ? theme.colors[activeColor].default : isCurrent ? activeColor === 'error' ? theme.colors.error.blurred : theme.colors[activeColor].disabled : 'transparent', ";\n    color: ").concat(isFinished ? theme.colors.neutral.white : isCurrent ? theme.colors.neutral.black : theme.colors.neutral.neutral3, ";\n\n    ").concat(!isCurrent && !isFinished && "\n      border: solid 2px ".concat(theme.colors.neutral.neutral1, ";\n      "), "\n  ");
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.body.light;
@@ -86,15 +86,9 @@ var StepsItemText = _styled.default.h3(_templateObject9 || (_templateObject9 = _
   var isDisabled = _ref18.isDisabled,
     theme = _ref18.theme;
   if (isDisabled) {
-    return "\n        color: ".concat({
-      light: theme.colors.tertiary.hover,
-      dark: theme.colors.neutral.neutral4
-    }[theme.colorMode], ";\n      ");
+    return "\n        color: ".concat(theme.colors.tertiary.hover, ";\n      ");
   }
-  return "\n      color: ".concat({
-    light: theme.colors.neutral.black,
-    dark: theme.colors.neutral.white
-  }[theme.colorMode], ";\n    ");
+  return "\n      color: ".concat(theme.colors.neutral.black, ";\n    ");
 }, function (_ref19) {
   var isReducedSteps = _ref19.isReducedSteps;
   return isReducedSteps ? "width: 100%;" : "";

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,aAAa;;;uHAOzB,CAAC;AAEF,eAAO,MAAM,MAAM;;;uHAqBlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;uHAgBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yHAGpB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,eAAO,MAAM,aAAa;;;uHAOzB,CAAC;AAEF,eAAO,MAAM,MAAM;;;uHAqBlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;uHAgBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yHAGpB,CAAC"}

package/dist/components/Switch/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SwitchWrapper = exports.SwitchToken = exports.Switch = exports.HelpText = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("@emotion/react");
-var _colorFunctions = require("../../utils/colorFunctions");
+var _customColorMode = require("../../utils/customColorMode");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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) } })); }
@@ -49,9 +49,7 @@ function ActiveEffects(_ref8) {
     type = _ref8.type;
   if (!theme) return '';
   var idleColor = type ? theme.colors[type].default : theme.colors.primary.default;
-  var hoverColor = type ? (0, _colorFunctions.hoverFunction)(theme.colors[type].default) : theme.colors.primary.hover;
-  var focusColor = type ? (0, _colorFunctions.focusFunction)(theme.colors[type].default) : theme.colors.primary.focus;
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    background-color: ", ";\n    div.switch-token {\n      transform: translateX(16px);\n      background-color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n\n    :hover {\n      background-color: ", ";\n      border-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    :focus {\n      background-color: ", ";\n      border-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), idleColor, idleColor, theme.colors.body.light, idleColor, hoverColor, hoverColor, hoverColor, focusColor, focusColor, type ? theme.colors[type].blurred : theme.colors.primary.disabled, focusColor);
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    background-color: ", ";\n    div.switch-token {\n      transform: translateX(16px);\n      background-color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n\n    :hover {\n      filter: brightness(0.9);\n    }\n\n    :focus {\n      border-color: ", ";\n      filter: brightness(0.9);\n      box-shadow: 0 0 0 2px ", ";\n    }\n  "])), idleColor, idleColor, (0, _customColorMode.customColorMode)(theme.lightColors.neutral.white, theme.lightColors.neutral.white), idleColor, theme.colors.neutral.white, type ? theme.colors[type].blurred : theme.colors.primary.disabled);
 }
 function disabledStyle(_ref9) {
   var theme = _ref9.theme;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAuBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,SAAiB,EACjB,YAAgB,EAChB,cAAuB,EACvB,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAyMjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAoBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,SAAiB,EACjB,YAAgB,EAChB,cAAuB,EACvB,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAoMjD"}

package/dist/components/Table/index.js

@@ -13,12 +13,10 @@ var _MenuItem = require("./components/MenuItem");
 var _FocusLock = _interopRequireDefault(require("../../shared/components/FocusLock"));
 var _TableSkeleton = require("./components/TableSkeleton");
 var _styles = require("./styles");
-var _useColorMode2 = require("../../shared/theme/hooks/useColorMode");
 var _GenerateKey = require("../../utils/GenerateKey");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["selectable", "primaryActions", "secondaryActions", "header", "rows", "isLoading", "skeletonRows", "skeletonHeight"]; // Components
 // Styles
-// Hooks
 // Types
 // Utils
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,8 +69,6 @@ function Table(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     openSelectDropDownMenu = _useState8[0],
     setOpenSelectDropDownMenu = _useState8[1];
-  var _useColorMode = (0, _useColorMode2.useColorMode)(),
-    colorMode = _useColorMode.colorMode;
   var rowsWithKey = (0, _react.useMemo)(function () {
     return rows.map(function (row) {
       return _objectSpread({
@@ -236,7 +232,7 @@ function Table(_ref) {
                   },
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
                     name: "more-vertical",
-                    color: colorMode === 'dark' ? 'neutral.white' : 'neutral.black'
+                    color: 'neutral.black'
                   })
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
                   onClickOutside: function onClickOutside() {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIA0GtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAmExB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAiB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HA6B3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAgFtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAmDxB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAiB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HAmB3B,CAAC"}

package/dist/components/Table/styles.js

@@ -11,56 +11,14 @@ 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 StyledTable = _styled.default.table(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: ", ";\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n          text-align: left;\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n        &:nth-of-type(even) {\n          background: ", ";\n        }\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), {
-    dark: "hsla(156, 13%, 92%, 0.05)",
-    light: "hsla(156, 13%, 92%, 0.5)"
-  }[theme.colorMode], {
-    dark: theme.colors.neutral.neutral5,
-    light: theme.colors.neutral.neutral2
-  }[theme.colorMode], {
-    dark: theme.colors.neutral.neutral5,
-    light: theme.colors.neutral.neutral2
-  }[theme.colorMode], {
-    dark: theme.colors.neutral.neutral5,
-    light: theme.colors.neutral.neutral2
-  }[theme.colorMode], {
-    dark: theme.colors.neutral.neutral5,
-    light: theme.colors.neutral.neutral2
-  }[theme.colorMode], {
-    dark: "hsla(150, 16%, 97%, 0.02)",
-    light: "hsla(150, 16%, 97%, 0.75)"
-  }[theme.colorMode], {
-    dark: 'hsla(161, 12%, 31%, 0.5)',
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode], {
-    dark: theme.colors.neutral.neutral6,
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode], theme.colors.primary.focus, {
-    dark: theme.colors.neutral.neutral6,
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode], theme.colors.neutral.neutral5);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: ", "90;\n          border-top: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n          text-align: left;\n\n          &:first-of-type {\n            border-left: 1px solid ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n        &:nth-of-type(even) {\n          background: ", "40;\n        }\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), theme.colors.neutral.neutral1, theme.colors.neutral.neutral2, theme.colors.neutral.neutral2, theme.colors.neutral.neutral2, theme.colors.neutral.neutral2, theme.colors.neutral.neutral1, theme.colors.neutral.neutral1, theme.colors.neutral.neutral1, theme.colors.primary.focus, theme.colors.neutral.neutral1, theme.colors.neutral.neutral5);
 });
 exports.StyledTable = StyledTable;
 var SelectedHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 exports.SelectedHeader = SelectedHeader;
 var ActionsButton = _styled.default.button(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), {
-    dark: theme.colors.neutral.neutral4,
-    light: theme.colors.neutral.neutral2
-  }[theme.colorMode], theme.colors.neutral.neutral5, {
-    dark: theme.colors.neutral.black,
-    light: theme.colors.neutral.white
-  }[theme.colorMode], theme.transition.speed, theme.colors.neutral.black, {
-    dark: theme.colors.neutral.neutral4,
-    light: theme.colors.neutral.neutral3
-  }[theme.colorMode], {
-    dark: theme.colors.neutral.neutral5,
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode], {
-    dark: theme.colors.neutral.neutral4,
-    light: theme.colors.neutral.neutral2
-  }[theme.colorMode]);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid ", ";\n    padding: 0px 24px;\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), theme.colors.neutral.neutral2, theme.colors.neutral.neutral5, theme.colors.neutral.white, theme.transition.speed, theme.colors.neutral.black, theme.colors.neutral.neutral3, theme.colors.neutral.neutral1, theme.colors.neutral.neutral2);
 });
 exports.ActionsButton = ActionsButton;
 var MenuItemWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
@@ -86,17 +44,11 @@ var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject
 exports.MenuItemContainer = MenuItemContainer;
 var MenuItemContent = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  border-radius: 8px;\n  padding: 10px 35px;\n  cursor: pointer;\n  user-select: none;\n  font-size: 1rem;\n  white-space: nowrap;\n\n  color: ", ";\n\n  transition: background linear ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return {
-    dark: theme.colors.neutral.white,
-    light: theme.colors.neutral.black
-  }[theme.colorMode];
+  return theme.colors.neutral.black;
 }, function (props) {
   return props.theme.transition.speed;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return {
-    dark: theme.colors.neutral.neutral4,
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral1;
 });
 exports.MenuItemContent = MenuItemContent;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5F,eAAO,MAAM,aAAa;;;;;yGAiBzB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;qHAoErB,CAAC;AAEF,eAAO,MAAM,aAAa;;;2GAGzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;6HAgC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;YACpB,OAAO;yGAGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;iNAqBvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5F,eAAO,MAAM,aAAa;;;;;yGAazB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;qHA+DrB,CAAC;AAEF,eAAO,MAAM,aAAa;;;2GAGzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;6HAgC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;YACpB,OAAO;yGAGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;iNAqBvB,CAAC"}

package/dist/components/Tabs/styles.js

@@ -7,17 +7,15 @@ exports.TabsContainer = exports.TabPanelWrapper = exports.TabPanelContainer = ex
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _getColorValue = require("../../utils/getColorValue");
 var _colorToGray = require("../../utils/colorToGray");
+var _customColorMode = require("../../utils/customColorMode");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 TabsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n\n  > div[role='tablist'] {\n    width: ", ";\n    border-bottom: 2px solid\n      ", ";\n  }\n"])), function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
-}, function (props) {
-  return {
-    light: props.theme.colors.neutral.neutral1,
-    dark: props.theme.colors.neutral.neutral6
-  }[props.theme.colorMode];
+}, function () {
+  return (0, _customColorMode.customColorMode)('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.4)');
 });
 exports.TabsContainer = TabsContainer;
 var TabButton = _styled.default.button(function (_ref2) {
@@ -30,7 +28,7 @@ var TabButton = _styled.default.button(function (_ref2) {
   var colorProps = (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme));
   var grayColor = colorProps.neutral2;
   var whiteColor = colorProps.neutral1;
-  return "\n  display: flex;\n  ".concat(squeeze && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 2rem;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: ").concat(theme.fontSizes.xxs, ";\n\n  color: ").concat(active ? theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, ").concat(whiteColor[2], "%)") : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 75%)"), ";\n  background: transparent;\n\n  border: none;\n  border-radius: 0;\n  outline: 0;\n  margin: 0;\n\n  cursor: ").concat(disabled ? 'default' : 'pointer', ";\n  vertical-align: middle;\n\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n\n  transition: all 250ms ease 0ms;\n\n  & > span {\n    ").concat(active && "\n        color: ".concat((0, _getColorValue.getColorValue)(textColor || 'primary.default', theme), ";\n      "), "\n  }\n\n  &:hover {\n    color: ").concat(disabled ? theme.colors.neutral.neutral1 : theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, 88%)"), ";\n    background: ").concat(disabled ? 'transparent' : 'rgba(0, 0, 0, 0.04)', ";\n  }\n\n  &:active {\n    background: rgba(0, 0, 0, .1);\n  }\n");
+  return "\n  display: flex;\n  ".concat(squeeze && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 2rem;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: ").concat(theme.fontSizes.xxs, ";\n\n  color: ").concat(active ? (0, _customColorMode.customColorMode)("hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)"), "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, ").concat(whiteColor[2], "%)")) : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 75%)"), ";\n  background: transparent;\n\n  border: none;\n  border-radius: 0;\n  outline: 0;\n  margin: 0;\n\n  cursor: ").concat(disabled ? 'default' : 'pointer', ";\n  vertical-align: middle;\n\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n\n  transition: all 250ms ease 0ms;\n\n  & > span {\n    ").concat(active && "\n        color: ".concat((0, _getColorValue.getColorValue)(textColor || 'primary.default', theme), ";\n      "), "\n  }\n\n  &:hover {\n    color: ").concat(disabled ? 'none' : theme.colors.neutral.black, ";\n    background: ").concat(disabled ? 'transparent' : 'rgba(0, 0, 0, 0.04)', ";\n  }\n\n  &:active {\n    background: rgba(0, 0, 0, .1);\n  }\n");
 });
 exports.TabButton = TabButton;
 var TabButtonIcon = _styled.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  line-height: 0;\n  transition: all 250ms ease 0ms;\n"])));