@pedidopago/ui 1.7.21 → 1.7.23

package/dist/components/NewSelect/components/OptionsSelect/styles.js

@@ -16,6 +16,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var OptionsContainer = (0, _styled.default)(_framerMotion.motion.div)(function (_ref) {
   var theme = _ref.theme,
     props = _objectWithoutProperties(_ref, _excluded);
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: 350px;\n    position: fixed;\n    z-index: ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: opacity ease ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: ", ";\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n    li {\n      list-style: none;\n    }\n  "])), theme.zIndex.level24, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed, theme.colors.background.light, theme.colors.neutral.neutral1, theme.borderRadius.default, theme.borderRadius.default, theme.colors.primary.default);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: 350px;\n    position: fixed;\n    z-index: ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: opacity ease ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: ", ";\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n    li {\n      list-style: none;\n    }\n  "])), theme.zIndex.level24, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed, theme.colors.neutral.white, theme.colors.neutral.neutral1, theme.borderRadius.default, theme.borderRadius.default, theme.colors.primary.default);
 });
 exports.OptionsContainer = OptionsContainer;

package/dist/components/NewSelect/multiple/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/multiple/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAgB,yBAAyB,EAAe,MAAM,UAAU,CAAC;AAGhF,wBAAgB,iBAAiB,CAAC,EAChC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,EACb,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,yBAAyB,eAiL3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/multiple/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAgB,yBAAyB,EAAe,MAAM,UAAU,CAAC;AAGhF,wBAAgB,iBAAiB,CAAC,EAChC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,EACb,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,yBAAyB,eAuL3B"}

package/dist/components/NewSelect/multiple/index.js

@@ -63,15 +63,16 @@ function NewMultipleSelect(_ref) {
     options = _useState6[0],
     setOptions = _useState6[1];
   (0, _react.useEffect)(function () {
-    var _options$, _optionsModalRef$curr;
-    if (options !== null && options !== void 0 && (_options$ = options[0]) !== null && _options$ !== void 0 && _options$.value) return;
+    var _optionsModalRef$curr;
     var childs = (_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.childNodes;
     var newOptions = [];
     _react.Children.forEach(children, function (child, index) {
-      if (childs !== null && childs !== void 0 && childs[index].classList.contains('select-item')) {
+      var _childs$index, _childs$index$classLi;
+      if (childs !== null && childs !== void 0 && (_childs$index = childs[index]) !== null && _childs$index !== void 0 && (_childs$index$classLi = _childs$index.classList) !== null && _childs$index$classLi !== void 0 && _childs$index$classLi.contains('select-item')) {
+        var _child$props, _childs$index2;
         newOptions.push({
-          value: child.props.value,
-          label: childs[index].innerText
+          value: child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value,
+          label: childs === null || childs === void 0 ? void 0 : (_childs$index2 = childs[index]) === null || _childs$index2 === void 0 ? void 0 : _childs$index2.innerText
         });
       }
     });
@@ -147,7 +148,12 @@ function NewMultipleSelect(_ref) {
     var newOptions = options.filter(function (option) {
       return value === null || value === void 0 ? void 0 : value.includes(option.value);
     });
-    setSelectedOptions(newOptions);
+    var newSelectedOptions = selectedOptions.filter(function (selectedOption) {
+      return newOptions.every(function (newOption) {
+        return newOption.value !== selectedOption.value;
+      });
+    });
+    setSelectedOptions([].concat(_toConsumableArray(newSelectedOptions), _toConsumableArray(newOptions)));
   }, [value, options]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
@@ -208,19 +214,24 @@ function NewMultipleSelect(_ref) {
             top: positionsSelect.top
           },
           children: _react.Children.map(children, function (child) {
+            var _child$type, _child$type2;
+            var childTypeName = (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || (child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName);
+            var isSelectItemElement = childTypeName === 'SelectItem';
+            if (! /*#__PURE__*/(0, _react.isValidElement)(child) || !isSelectItemElement) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: child
+            });
+            var childElement = child;
             var isSelectedOption = selectedOptions.find(function (option) {
-              var _child$props;
-              return option.value === ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value);
+              var _childElement$props;
+              return option.value === ((_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.value);
             });
-            var childTypeName = child.type.name || child.type.displayName;
-            var isSelectItemElement = /*#__PURE__*/(0, _react.isValidElement)(child) && childTypeName === 'SelectItem';
-            var className = (0, _classnames.default)(isSelectItemElement ? 'select-item' : '', {
+            var className = (0, _classnames.default)('select-item', {
               selected: isSelectedOption
             });
-            return /*#__PURE__*/(0, _react.cloneElement)(child, {
+            return /*#__PURE__*/(0, _react.cloneElement)(childElement, {
               onClick: function onClick(event) {
                 if (event.currentTarget.classList.contains('select-item')) {
-                  changeMultipleOption(child.props.value);
+                  changeMultipleOption(childElement.props.value);
                 }
               },
               className: className

package/dist/components/NewSelect/single/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/single/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAgB,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEjE,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,aAAa,EACb,GAAG,IAAI,EACR,EAAE,uBAAuB,CAAC,CAAC,CAAC,eAgI5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/single/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAgB,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEjE,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,aAAa,EACb,GAAG,IAAI,EACR,EAAE,uBAAuB,CAAC,CAAC,CAAC,eAwI5B"}

package/dist/components/NewSelect/single/index.js

@@ -65,10 +65,12 @@ function NewSingleSelect(_ref) {
     var childs = (_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.childNodes;
     var newOptions = [];
     _react.Children.forEach(children, function (child, index) {
-      if (childs !== null && childs !== void 0 && childs[index].classList.contains('select-item')) {
+      var _childs$index, _childs$index$classLi;
+      if (childs !== null && childs !== void 0 && (_childs$index = childs[index]) !== null && _childs$index !== void 0 && (_childs$index$classLi = _childs$index.classList) !== null && _childs$index$classLi !== void 0 && _childs$index$classLi.contains('select-item')) {
+        var _child$props, _childs$index2;
         newOptions.push({
-          value: child.props.value,
-          label: childs[index].innerText
+          value: child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value,
+          label: childs === null || childs === void 0 ? void 0 : (_childs$index2 = childs[index]) === null || _childs$index2 === void 0 ? void 0 : _childs$index2.innerText
         });
       }
     });
@@ -154,12 +156,19 @@ function NewSingleSelect(_ref) {
             top: positionsSelect.top
           },
           children: _react.Children.map(children, function (child) {
-            return /*#__PURE__*/(0, _react.cloneElement)(child, {
+            var _child$type, _child$type2;
+            var childTypeName = (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || (child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName);
+            var isSelectItemElement = childTypeName === 'SelectItem';
+            if (! /*#__PURE__*/(0, _react.isValidElement)(child) || !isSelectItemElement) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: child
+            });
+            var childElement = child;
+            return /*#__PURE__*/(0, _react.cloneElement)(childElement, {
               onClick: function onClick(event) {
                 if (event.currentTarget.classList.contains('select-item')) {
                   setIsOpenOptions(false);
-                  setSelectedOption(child.props.value);
-                  onChange === null || onChange === void 0 ? void 0 : onChange(child.props.value);
+                  setSelectedOption(childElement.props.value);
+                  onChange === null || onChange === void 0 ? void 0 : onChange(childElement.props.value);
                 }
               }
             });

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/NewSelect/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAiG1B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;UAE7B,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAMrB,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;qHAsBhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;2GAM9B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/NewSelect/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAiG1B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;UAE7B,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAMrB,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;qHAqBhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;2GAM9B,CAAC"}

package/dist/components/NewSelect/styles.js

@@ -33,10 +33,7 @@ var SelectMultipleOption = _styled.default.button(_templateObject4 || (_template
   return theme.colors.neutral.neutral1;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return {
-    dark: theme.colors.neutral.white,
-    light: theme.colors.neutral.neutral6
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral6;
 });
 exports.SelectMultipleOption = SelectMultipleOption;
 var SelectedOptionSpan = _styled.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  cursor: pointer;\n  padding-block: 0.25rem;\n  color: ", ";\n"])), function (_ref6) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,kBAAmC,EACnC,cAAgC,EAChC,UAAU,EACV,WAAW,EACX,IAAc,EACd,KAAiB,EACjB,OAAoB,EACpB,KAAK,GACN,EAAE,gBAAgB,sBAmIlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,kBAAmC,EACnC,cAAgC,EAChC,UAAU,EACV,WAAW,EACX,IAAc,EACd,KAAiB,EACjB,OAAoB,EACpB,KAAK,GACN,EAAE,gBAAgB,sBAkIlB"}

package/dist/components/Pagination/index.js

@@ -7,7 +7,6 @@ exports.Pagination = Pagination;
 var _react = require("react");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _colorToGray = require("../../utils/colorToGray");
-var _useColorMode2 = require("../../shared/theme/hooks/useColorMode");
 var _usePagination = require("./hooks/usePagination");
 var _styles = require("./styles");
 var _theme = require("../../shared/theme");
@@ -53,8 +52,6 @@ function Pagination(_ref) {
     setNextButtonDisabled = _useState6[1];
   var _useTheme = (0, _theme.useTheme)(),
     theme = _useTheme.theme;
-  var _useColorMode = (0, _useColorMode2.useColorMode)(),
-    colorMode = _useColorMode.colorMode;
   (0, _react.useEffect)(function () {
     if (activePage !== count) {
       setNextButtonDisabled(false);
@@ -73,12 +70,8 @@ function Pagination(_ref) {
   var _useMemo = (0, _react.useMemo)(function () {
       var themeColor = theme.colors.primary.default;
       var _convertColor = (0, _colorToGray.convertColor)(color || themeColor),
-        neutral2 = _convertColor.neutral2,
-        neutral5 = _convertColor.neutral5;
-      var grayColorByTheme = {
-        dark: neutral5,
-        light: neutral2
-      }[colorMode] || neutral2;
+        neutral2 = _convertColor.neutral2;
+      var grayColorByTheme = neutral2;
       var _grayColorByTheme = _slicedToArray(grayColorByTheme, 3),
         h = _grayColorByTheme[0],
         s = _grayColorByTheme[1],

package/dist/components/RadioInput/components/ChoiceList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RadioInput/components/ChoiceList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAsD,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,UAAU,4CAA4D,CAAC;AAEpF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+DnC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RadioInput/components/ChoiceList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAsD,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,UAAU,4CAA4D,CAAC;AAEpF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgEnC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/components/RadioInput/components/ChoiceList/index.js

@@ -8,7 +8,7 @@ exports.default = exports.RadioGroup = void 0;
 var _react = require("react");
 var _styles = require("../../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "radiosName", "isDisabled", "alignDirection", "label", "helpText", "onChangeValue"];
+var _excluded = ["children", "radiosName", "isDisabled", "alignDirection", "label", "helpText", "onChangeValue", "alert"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -27,6 +27,7 @@ var ChoiceList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     label = _ref.label,
     helpText = _ref.helpText,
     onChangeValue = _ref.onChangeValue,
+    alert = _ref.alert,
     rest = _objectWithoutProperties(_ref, _excluded);
   var handleRadioClick = function handleRadioClick(value) {
     if (radioRef.current) {
@@ -75,7 +76,7 @@ var ChoiceList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         alignDirection: alignDirection,
         children: children
       }), helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelpText, {
-        textColor: 'neutral.black',
+        alert: alert,
         children: helpText
       })]
     })

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { IStyledRadioInput } from './types';
+import { InputAlertTypes } from '../Input/types';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -27,5 +28,7 @@ export declare const ChoiceLabel: import("@emotion/styled").StyledComponent<{
 export declare const HelpText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & IStyledRadioInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+} & {
+    alert: InputAlertTypes | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO;;;yGAInB,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHAGjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;sIAgEjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAAe,CAAC;AAE1C,eAAO,MAAM,WAAW;;;6HAOvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;sIASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;+HASpB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,OAAO;;;yGAInB,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHAGjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;sIAgEjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAAe,CAAC;AAE1C,eAAO,MAAM,WAAW;;;6HAOvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;sIASvB,CAAC;AAaF,eAAO,MAAM,QAAQ;;;;WAAwB,eAAe,GAAG,SAAS;2GAQvE,CAAC"}

package/dist/components/RadioInput/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.ListWrapper = exports.Label = exports.Input = exports.HelpText = exports.ChoiceWrapper = exports.ChoiceLabel = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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 Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
@@ -30,10 +30,21 @@ var ChoiceLabel = _styled.default.label(_templateObject8 || (_templateObject8 =
   var colors = _ref3.theme.colors;
   return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    display: block;\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 24px;\n    color: ", ";\n    margin-bottom: 16px;\n  "])), colors.neutral.black);
 });
+
+// export const HelpText = styled.span<IStyledRadioInput>`
+//   ${({ theme }) => css`
+//     font-size: ${theme.fontSizes.xxs};
+//     color: ${theme.colors.neutral.neutral4};
+//     font-weight: 500;
+//     display: block;
+//     padding-left: 30px;
+//     margin-top: 18px;
+//   `}
+// `;
 exports.ChoiceLabel = ChoiceLabel;
-var HelpText = _styled.default.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
-  var theme = _ref4.theme,
-    textColor = _ref4.textColor;
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    color: ", ";\n    font-weight: 500;\n    display: block;\n    padding-left: 30px;\n    margin-top: 18px;\n  "])), theme.fontSizes.xxs, textColor);
+var HelpText = _styled.default.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-size: ", ";\n\n  color: ", ";\n  padding: 0 20px;\n"])), function (props) {
+  return props.theme.fontSizes.xxs;
+}, function (props) {
+  return props.alert && props.alert !== 'success' ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral4;
 });
 exports.HelpText = HelpText;

package/dist/components/RadioInput/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, InputHTMLAttributes } from 'react';
+import { InputAlertTypes } from '../Input/types';
 export interface IRadioInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     isDisabled?: boolean;
     children?: ReactNode;
@@ -12,6 +13,7 @@ export interface ChoiceListProps extends InputHTMLAttributes<HTMLInputElement> {
     alignDirection?: 'column' | 'row';
     color?: string;
     helpText?: string;
+    alert?: InputAlertTypes;
     children: ReactNode;
 }
 export type ChoiceListContext = {
@@ -21,7 +23,6 @@ export type ChoiceListContext = {
     isDisabled?: boolean;
 };
 export interface IStyledRadioInput {
-    textColor?: string;
     alignDirection?: 'column' | 'row';
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/RadioInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACnC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACnC"}

package/dist/components/Select/components/OptionsSelect/styles.js

@@ -16,6 +16,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var OptionsContainer = (0, _styled.default)(_framerMotion.motion.div)(function (_ref) {
   var theme = _ref.theme,
     props = _objectWithoutProperties(_ref, _excluded);
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: ", ";\n    min-width: ", ";\n    max-height: calc(", " - 20px);\n    position: fixed;\n    left: ", ";\n    top: ", ";\n    z-index: ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: opacity ease ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: ", ";\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n    li {\n      list-style: none;\n    }\n  "])), props.maxWidth, props.minWidth || 'initial', props.maxHeight, props.left, props.top, theme.zIndex.level24, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed, theme.colors.background.light, theme.colors.neutral.neutral1, theme.borderRadius.default, theme.borderRadius.default, theme.colors.primary.default);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: ", ";\n    min-width: ", ";\n    max-height: calc(", " - 20px);\n    position: fixed;\n    left: ", ";\n    top: ", ";\n    z-index: ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: opacity ease ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: ", ";\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n    li {\n      list-style: none;\n    }\n  "])), props.maxWidth, props.minWidth || 'initial', props.maxHeight, props.left, props.top, theme.zIndex.level24, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed, theme.colors.neutral.white, theme.colors.neutral.neutral1, theme.borderRadius.default, theme.borderRadius.default, theme.colors.primary.default);
 });
 exports.OptionsContainer = OptionsContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIA0K1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;UAI5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;wHAQtB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIA4K1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;UAI5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;wHAQtB,CAAC"}

package/dist/components/Select/styles.js

@@ -11,10 +11,10 @@ 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 SelectContainer = _styled.default.div(function (props) {
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n    user-select: none;\n    width: ", ";\n    height: ", ";\n    ", ";\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      border-radius: ", ";\n      padding: 0\n        ", ";\n      width: 100%;\n      height: 100%;\n      position: relative;\n      cursor: pointer;\n      color: ", ";\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", ";\n\n      ", ";\n\n      & > label {\n        position: absolute;\n        left: 20px;\n        top: 50%;\n        transform: translateY(-50%);\n        font-size: 1rem;\n        font-weight: 500;\n        color: ", ";\n        transition: top ease, left ease, color ease;\n        transition-duration: ", ";\n\n        background: ", ";\n        padding: 0 4px;\n        z-index: 1;\n        white-space: nowrap;\n        max-width: 65%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n\n        ", "\n      }\n\n      & > .select--placeholder {\n        white-space: nowrap;\n        max-width: 75%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n        transform: rotate(0deg);\n        color: ", ";\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 14px;\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n        pointer-events: none;\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 16px;\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          display: ", ";\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n          & > span {\n            color: transparent;\n          }\n        }\n      }\n    }\n\n    & > input {\n      appearance: none;\n      border: 0;\n      width: 0px;\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), props.size ? {
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n    user-select: none;\n    width: ", ";\n    background: ", ";\n\n    height: ", ";\n    ", ";\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      border-radius: ", ";\n      padding: 0\n        ", ";\n      width: 100%;\n      height: 100%;\n      position: relative;\n      cursor: pointer;\n      color: ", ";\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", ";\n\n      ", ";\n\n      & > label {\n        position: absolute;\n        left: 20px;\n        top: 50%;\n        transform: translateY(-50%);\n        font-size: 1rem;\n        font-weight: 500;\n        color: ", ";\n        transition: top ease, left ease, color ease;\n        transition-duration: ", ";\n\n        background: ", ";\n        padding: 0 4px;\n        z-index: 1;\n        white-space: nowrap;\n        max-width: 65%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n\n        ", "\n      }\n\n      & > .select--placeholder {\n        white-space: nowrap;\n        max-width: 75%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n        transform: rotate(0deg);\n        color: ", ";\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 14px;\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n        pointer-events: none;\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 16px;\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          display: ", ";\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n          & > span {\n            color: transparent;\n          }\n        }\n      }\n    }\n\n    & > input {\n      appearance: none;\n      border: 0;\n      width: 0px;\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), props.size ? {
     sm: '78px',
     md: '100%'
-  }[props.size] : props.width, props.variant === 'unstyled' ? 'auto' : props.size ? {
+  }[props.size] : props.width, props.theme.colors.neutral.white, props.variant === 'unstyled' ? 'auto' : props.size ? {
     sm: '36px',
     md: '56px'
   }[props.size] : '56px', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:hover {\n        & > div {\n          color: ", ";\n\n          & > label {\n            color: ", ";\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n\n      &:focus {\n        & > div {\n          color: ", ";\n\n          & > svg {\n            transform: rotate(180deg);\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n            &:last-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n    "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.variant === 'unstyled' ? '0' : props.size && {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,eAAO,MAAM,eAAe;;;+IAmG1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,eAAe;;;+IA0F1B,CAAC"}

package/dist/components/Skeleton/styles.js

@@ -6,26 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.SkeletonElement = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("@emotion/react");
-var _getColorValue = require("../../utils/getColorValue");
-var _colorCheck = require("../../utils/colorCheck");
-var _invertColor = require("../../utils/invertColor");
 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 SkeletonElement = _styled.default.div(function (props) {
-  var skeletonColor = (0, _getColorValue.getColorValue)(props.color || (props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : '#eeeeee'), props.theme);
   var borderRadiusByVariant = {
     circle: '50%',
     text: '4px',
     rectangle: '0'
   };
-  var waveColor = (0, _invertColor.invertColor)(skeletonColor, true);
-  var waveColorOpacity = waveColor === '#FFFFFF' ? 0.1 : 0.04;
   var animationsCss = {
-    wave: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      transform-origin: 0px 55%;\n\n      &::after {\n        content: '';\n        inset: 0px;\n        position: absolute;\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        40% {\n          transform: translateX(100%);\n        }\n        100% {\n          transform: translateX(100%);\n        }\n      }\n    "])), (0, _colorCheck.parseHexColorToRgba)(waveColor, waveColorOpacity)),
+    wave: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      transform-origin: 0px 55%;\n\n      &::after {\n        content: '';\n        inset: 0px;\n        position: absolute;\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        40% {\n          transform: translateX(100%);\n        }\n        100% {\n          transform: translateX(100%);\n        }\n      }\n    "])), props.theme.colors.neutral.neutral1),
     pulse: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: 1.6s linear 0.5s infinite normal none running pulse;\n\n      @keyframes pulse {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.4;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n    "])))
   };
-  var unloadedCss = (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    user-select: none;\n    pointer-events: none;\n    cursor: default;\n    background: padding-box ", ";\n    border-radius: ", ";\n    height: ", ";\n    color: transparent;\n\n    ", ";\n\n    * {\n      visibility: hidden;\n      color: transparent;\n    }\n  "])), skeletonColor, borderRadiusByVariant[props.variant || 'text'], typeof props.height === 'number' ? props.height + 'px' : props.height || '', props.animation !== 'static' ? animationsCss[props.animation || 'wave'] : '');
+  var unloadedCss = (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    user-select: none;\n    pointer-events: none;\n    cursor: default;\n    background: padding-box ", "70;\n    border-radius: ", ";\n    height: ", ";\n    color: transparent;\n\n    ", ";\n\n    * {\n      visibility: hidden;\n      color: transparent;\n    }\n  "])), props.theme.colors.neutral.neutral1, borderRadiusByVariant[props.variant || 'text'], typeof props.height === 'number' ? props.height + 'px' : props.height || '', props.animation !== 'static' ? animationsCss[props.animation || 'wave'] : '');
   var loadedCss = (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: block;\n    background: transparent;\n\n    transition: all 300ms ease;\n  "])));
   return (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: ", ";\n\n    ", "\n  "])), props.fullWidth ? '100%' : typeof props.width === 'number' ? props.width + 'px' : props.width || '', props.isLoaded ? loadedCss : unloadedCss);
 });

package/dist/components/Slider/components/SliderPointer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderPointer.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SliderPointer.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,aAAa,8BAA+B,mBAAmB,gBAsB3E,CAAC"}
+{"version":3,"file":"SliderPointer.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SliderPointer.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,aAAa,8BAA+B,mBAAmB,gBAsB3E,CAAC"}

package/dist/components/Slider/components/SliderPointer.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderPointer = void 0;
+var _customColorMode = require("../../../utils/customColorMode");
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,7 +31,7 @@ var SliderPointer = function SliderPointer(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "code",
         size: "20px",
-        color: "neutral.black"
+        color: (0, _customColorMode.customColorMode)('neutral.black', 'neutral.white')
       })
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,eAAO,MAAM,aAAa;;;;;;;;yGAiDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;0IAK9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;yGAS/B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;gBACV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;yGAgB9C,CAAC;AAEF,eAAO,MAAM,WAAW;;;kHAIvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;gBAEV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;;yGAqF9C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;gBAGnB,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;yGA0BhD,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAO7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;2GAgEvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,eAAO,MAAM,aAAa;;;;;;;;yGAiDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;0IAK9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;yGAS/B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;gBACV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;yGAgB9C,CAAC;AAEF,eAAO,MAAM,WAAW;;;kHAIvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;gBAEV,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;;;;yGAoF9C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;gBAGnB,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;yGA0BhD,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAO7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;2GAgEvB,CAAC"}

package/dist/components/Slider/styles.js

@@ -42,11 +42,11 @@ exports.SliderInput = SliderInput;
 var SliderThumb = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  ", "\n\n  ", "\n\n  background: ", ";\n  pointer-events: ", ";\n\n  cursor: pointer;\n"])), function (props) {
   return props.direction === 'vertical' ? "\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 50%);\n  " : "\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  ";
 }, function (props) {
-  return props.thumbType !== 'pointer' ? "\n      width: ".concat(props.size === 'sm' ? '20px' : '25px', ";\n      height: ").concat(props.size === 'sm' ? '20px' : '25px', ";\n      border-radius: 999999px;\n\n      transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 100%;\n        height: 100%;\n        border-radius: 999999px;\n        box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),\n          0px 1px 5px 0px rgb(0 0 0 / 12%);\n      }\n\n      &:hover {\n        box-shadow: 0 0 0 10px\n          ").concat((0, _colorCheck.parseHexColorToRgba)((0, _colorCheck.stripThemeColors)(props.thumbColor || '', props.theme.colors) || props.theme.colors.primary.default, 0.15), ";\n      }\n\n      &:active,\n      &:focus {\n        box-shadow: 0 0 0 15px\n          ").concat((0, _colorCheck.parseHexColorToRgba)((0, _colorCheck.stripThemeColors)(props.thumbColor || '', props.theme.colors) || props.theme.colors.primary.default, 0.15), ";\n      }\n\n      &:hover,\n      &:focus,\n      &:active {\n        & span {\n          transform: ").concat(props.direction === 'vertical' ? 'translate(100%, -50%)' : 'translate(-50%, -100%)', " scale(1);\n        }\n      }\n    ") : "\n      width: ".concat(props.direction === 'vertical' ? '100%' : '5px', ";\n      height: ").concat(props.direction === 'vertical' ? '5px' : '100%', ";\n    ");
+  return props.thumbType !== 'pointer' ? "\n      width: ".concat(props.size === 'sm' ? '20px' : '25px', ";\n      height: ").concat(props.size === 'sm' ? '20px' : '25px', ";\n      border-radius: 999999px;\n\n\n      transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 100%;\n        height: 100%;\n        border-radius: 999999px;\n        box-shadow: ").concat(props.theme.shadow.level2, ";\n        border: 2px solid ").concat(props.theme.colors.neutral.neutral2, ";\n      }\n\n      &:hover {\n        box-shadow: 0 0 0 10px\n          ").concat((0, _colorCheck.parseHexColorToRgba)((0, _colorCheck.stripThemeColors)(props.thumbColor || '', props.theme.colors) || props.theme.colors.primary.default, 0.15), ";\n      }\n\n      &:active,\n      &:focus {\n        box-shadow: 0 0 0 15px\n          ").concat((0, _colorCheck.parseHexColorToRgba)((0, _colorCheck.stripThemeColors)(props.thumbColor || '', props.theme.colors) || props.theme.colors.primary.default, 0.15), ";\n      }\n\n      &:hover,\n      &:focus,\n      &:active {\n        & span {\n          transform: ").concat(props.direction === 'vertical' ? 'translate(100%, -50%)' : 'translate(-50%, -100%)', " scale(1);\n        }\n      }\n    ") : "\n      width: ".concat(props.direction === 'vertical' ? '100%' : '5px', ";\n      height: ").concat(props.direction === 'vertical' ? '5px' : '100%', ";\n    ");
 }, function (props) {
   if (props.disabled) return props.theme.colors.neutral.neutral6;
   if (props.thumbType !== 'pointer') return props.theme.colors.neutral.white;
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.neutral.white;
+  return props.theme.colors.neutral.white;
 }, function (props) {
   return props.disabled ? 'none' : 'auto';
 });