@pedidopago/ui 1.7.20 → 1.7.22

package/dist/components/Select/select.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=select.test.d.ts.map

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

@@ -1,21 +1,21 @@
-/// <reference types="react" />
-import { InputProps } from '../Input/types';
-import { SelectContainerProps, sizeSelect } from './types';
-export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & SelectContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Option: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    sizeSelect?: sizeSelect | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const HelperText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & InputProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { InputProps } from '../Input/types';
+import { SelectContainerProps, sizeSelect } from './types';
+export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SelectContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Option: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    sizeSelect?: sizeSelect | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const HelperText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & InputProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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/Select/types.d.ts

@@ -1,27 +1,27 @@
-import { ReactNode } from 'react';
-export type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-export interface SelectOption {
-    label: ReactNode;
-    value: string | number | boolean;
-}
-export type sizeSelect = 'sm' | 'md';
-export interface SelectProps {
-    label?: string;
-    variant?: 'unstyled' | 'default';
-    options: SelectOption[];
-    helperText?: string;
-    alert?: SelectAlertType;
-    placeholder?: string;
-    width?: string;
-    sizeSelect?: sizeSelect;
-    optionsMinWidth?: string;
-}
-export interface SelectContainerProps {
-    variant?: 'unstyled' | 'default';
-    alert?: SelectAlertType;
-    filled: boolean;
-    disabled: boolean;
-    width?: string;
-    size?: sizeSelect;
-}
+import { ReactNode } from 'react';
+export type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+export interface SelectOption {
+    label: ReactNode;
+    value: string | number | boolean;
+}
+export type sizeSelect = 'sm' | 'md';
+export interface SelectProps {
+    label?: string;
+    variant?: 'unstyled' | 'default';
+    options: SelectOption[];
+    helperText?: string;
+    alert?: SelectAlertType;
+    placeholder?: string;
+    width?: string;
+    sizeSelect?: sizeSelect;
+    optionsMinWidth?: string;
+}
+export interface SelectContainerProps {
+    variant?: 'unstyled' | 'default';
+    alert?: SelectAlertType;
+    filled: boolean;
+    disabled: boolean;
+    width?: string;
+    size?: sizeSelect;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Skeleton/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ISkeletonProps } from './types';
-declare const Skeleton: ({ children, isLoaded, ...rest }: ISkeletonProps) => JSX.Element;
-export default Skeleton;
+/// <reference types="react" />
+import { ISkeletonProps } from './types';
+declare const Skeleton: ({ children, isLoaded, ...rest }: ISkeletonProps) => JSX.Element;
+export default Skeleton;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Skeleton/skeleton.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=skeleton.test.d.ts.map

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { ISkeletonProps } from './types';
-import { GenericStyledProps } from '../../@types';
-export declare const SkeletonElement: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & ISkeletonProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { ISkeletonProps } from './types';
+import { GenericStyledProps } from '../../@types';
+export declare const SkeletonElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ISkeletonProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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/Skeleton/types.d.ts

@@ -1,41 +1,41 @@
-import { ReactNode } from 'react';
-import { GlobalColorsProps } from '../../shared/theme/theme.types';
-export type ISkeletonProps = {
-    /**
-     * The variant of the skeleton.
-     * @default 'text'
-     */
-    variant?: 'text' | 'rectangle' | 'circle';
-    /**
-     * The animation of the skeleton
-     * @default 'pulse'
-     */
-    animation?: 'wave' | 'pulse' | 'static';
-    /**
-     * The width of the skeleton
-     * @default '100%'
-     */
-    width?: number | string;
-    /**
-     * The height of the skeleton
-     * @default '100%'
-     */
-    height?: number | string;
-    /**
-     * The color of the skeleton
-     * @default '#EEEEEE'
-     */
-    color?: GlobalColorsProps | (string & {});
-    /**
-     * When true, the skeleton children's will be displayed
-     * @default false
-     */
-    isLoaded?: boolean;
-    /**
-     * When true, the skeleton will be displayed with full width
-     * @default false
-     */
-    fullWidth?: boolean;
-    children?: ReactNode;
-};
+import { ReactNode } from 'react';
+import { GlobalColorsProps } from '../../shared/theme/theme.types';
+export type ISkeletonProps = {
+    /**
+     * The variant of the skeleton.
+     * @default 'text'
+     */
+    variant?: 'text' | 'rectangle' | 'circle';
+    /**
+     * The animation of the skeleton
+     * @default 'pulse'
+     */
+    animation?: 'wave' | 'pulse' | 'static';
+    /**
+     * The width of the skeleton
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The height of the skeleton
+     * @default '100%'
+     */
+    height?: number | string;
+    /**
+     * The color of the skeleton
+     * @default '#EEEEEE'
+     */
+    color?: GlobalColorsProps | (string & {});
+    /**
+     * When true, the skeleton children's will be displayed
+     * @default false
+     */
+    isLoaded?: boolean;
+    /**
+     * When true, the skeleton will be displayed with full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    children?: ReactNode;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Slider/SliderExample.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ISliderProps } from './types';
-export declare const SliderExample: ({ ...props }: ISliderProps) => JSX.Element;
+/// <reference types="react" />
+import { ISliderProps } from './types';
+export declare const SliderExample: ({ ...props }: ISliderProps) => JSX.Element;
 //# sourceMappingURL=SliderExample.d.ts.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ISliderPointerProps } from '../types';
-export declare const SliderPointer: ({ direction, thumbColor }: ISliderPointerProps) => JSX.Element;
+/// <reference types="react" />
+import { ISliderPointerProps } from '../types';
+export declare const SliderPointer: ({ direction, thumbColor }: ISliderPointerProps) => JSX.Element;
 //# sourceMappingURL=SliderPointer.d.ts.map

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/components/SliderRail.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ISliderTrackerProps } from '../types';
-export declare const SliderRail: import("react").MemoExoticComponent<({ step, maxValue, onChangeSliderTracker, trackColor, direction, ...rest }: ISliderTrackerProps) => JSX.Element>;
+/// <reference types="react" />
+import { ISliderTrackerProps } from '../types';
+export declare const SliderRail: import("react").MemoExoticComponent<({ step, maxValue, onChangeSliderTracker, trackColor, direction, ...rest }: ISliderTrackerProps) => JSX.Element>;
 //# sourceMappingURL=SliderRail.d.ts.map

package/dist/components/Slider/components/SliderSelector.d.ts

@@ -1,18 +1,18 @@
-import { InputHTMLAttributes } from 'react';
-export declare const SliderSelector: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
-    thumbType?: "circle" | "default" | "pointer" | undefined;
-    minValue: number;
-    maxValue: number;
-    step?: number | undefined;
-    trackColor?: import("../../..").GlobalColorsProps | (string & {}) | undefined;
-    thumbColor?: import("../../..").GlobalColorsProps | (string & {}) | undefined;
-    disabled?: boolean | undefined;
-    fullSize?: boolean | undefined;
-    sizeSlider?: "sm" | "md" | "lg" | undefined;
-    direction?: "horizontal" | "vertical" | undefined;
-    valueLabelDisplay?: (string & {}) | "auto" | "off" | "%v" | undefined;
-} & {
-    valueSliderSelector: number | number[];
-    onChangeSliderSelector: (percentage: number, index?: number | undefined) => void;
-} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>>;
+import { InputHTMLAttributes } from 'react';
+export declare const SliderSelector: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    thumbType?: "circle" | "default" | "pointer" | undefined;
+    minValue: number;
+    maxValue: number;
+    step?: number | undefined;
+    trackColor?: import("../../..").GlobalColorsProps | (string & {}) | undefined;
+    thumbColor?: import("../../..").GlobalColorsProps | (string & {}) | undefined;
+    disabled?: boolean | undefined;
+    fullSize?: boolean | undefined;
+    sizeSlider?: "sm" | "md" | "lg" | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    valueLabelDisplay?: (string & {}) | "auto" | "off" | "%v" | undefined;
+} & {
+    valueSliderSelector: number | number[];
+    onChangeSliderSelector: (percentage: number, index?: number | undefined) => void;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>>;
 //# sourceMappingURL=SliderSelector.d.ts.map

package/dist/components/Slider/hooks/useEventCallback.d.ts

@@ -1,3 +1,3 @@
-import { RefObject } from 'react';
-export declare const useEventCallback: <T>(callback?: ((value: T, trackRef?: RefObject<HTMLDivElement>) => void) | undefined) => (value: T, trackRef?: RefObject<HTMLDivElement>) => void;
+import { RefObject } from 'react';
+export declare const useEventCallback: <T>(callback?: ((value: T, trackRef?: RefObject<HTMLDivElement>) => void) | undefined) => (value: T, trackRef?: RefObject<HTMLDivElement>) => void;
 //# sourceMappingURL=useEventCallback.d.ts.map

package/dist/components/Slider/index.d.ts

@@ -1,20 +1,20 @@
-import { InputHTMLAttributes } from 'react';
-declare const Slider: import("react").ForwardRefExoticComponent<{
-    thumbType?: "circle" | "default" | "pointer" | undefined;
-    minValue: number;
-    maxValue: number;
-    step?: number | undefined;
-    trackColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
-    thumbColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
-    disabled?: boolean | undefined;
-    fullSize?: boolean | undefined;
-    sizeSlider?: "sm" | "md" | "lg" | undefined;
-    direction?: "horizontal" | "vertical" | undefined;
-    valueLabelDisplay?: (string & {}) | "auto" | "off" | "%v" | undefined;
-} & {
-    valueSlider: number | number[];
-    onChangeSlider: (value: number | number[], index?: number | undefined) => void;
-    minMaxFormat?: "number" | "currency-BRL" | "percentage" | undefined;
-} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
-export default Slider;
+import { InputHTMLAttributes } from 'react';
+declare const Slider: import("react").ForwardRefExoticComponent<{
+    thumbType?: "circle" | "default" | "pointer" | undefined;
+    minValue: number;
+    maxValue: number;
+    step?: number | undefined;
+    trackColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
+    thumbColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
+    disabled?: boolean | undefined;
+    fullSize?: boolean | undefined;
+    sizeSlider?: "sm" | "md" | "lg" | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    valueLabelDisplay?: (string & {}) | "auto" | "off" | "%v" | undefined;
+} & {
+    valueSlider: number | number[];
+    onChangeSlider: (value: number | number[], index?: number | undefined) => void;
+    minMaxFormat?: "number" | "currency-BRL" | "percentage" | undefined;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+export default Slider;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Slider/slider.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=slider.test.d.ts.map

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

@@ -1,66 +1,66 @@
-/// <reference types="react" />
-import { GenericStyledProps } from '../../@types';
-import { GlobalColorsProps } from '../../shared/theme/theme.types';
-export declare const SliderContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    fullSize?: boolean | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    direction?: "horizontal" | "vertical" | undefined;
-    disabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SliderExtremesText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-export declare const SliderContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SliderRailContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    trackColor?: GlobalColorsProps | (string & {}) | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SliderTrack: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    thumbColor: GlobalColorsProps | (string & {});
-    direction?: "horizontal" | "vertical" | undefined;
-    disabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SliderInput: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const SliderThumb: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    direction?: "horizontal" | "vertical" | undefined;
-    thumbColor: GlobalColorsProps | (string & {});
-    thumbType?: "circle" | "default" | "pointer" | undefined;
-    disabled?: boolean | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SliderPointerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    direction?: "horizontal" | "vertical" | undefined;
-    thumbColor: GlobalColorsProps | (string & {});
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SliderPointerIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SliderLabel: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    direction?: "horizontal" | "vertical" | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from '../../@types';
+import { GlobalColorsProps } from '../../shared/theme/theme.types';
+export declare const SliderContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    fullSize?: boolean | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SliderExtremesText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const SliderContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SliderRailContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    trackColor?: GlobalColorsProps | (string & {}) | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SliderTrack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    thumbColor: GlobalColorsProps | (string & {});
+    direction?: "horizontal" | "vertical" | undefined;
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SliderInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const SliderThumb: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    direction?: "horizontal" | "vertical" | undefined;
+    thumbColor: GlobalColorsProps | (string & {});
+    thumbType?: "circle" | "default" | "pointer" | undefined;
+    disabled?: boolean | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SliderPointerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    direction?: "horizontal" | "vertical" | undefined;
+    thumbColor: GlobalColorsProps | (string & {});
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SliderPointerIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SliderLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    direction?: "horizontal" | "vertical" | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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';
 });