@antscorp/antsomi-ui 1.3.3-beta.2 → 1.3.3-beta.21

package/es/components/atoms/Slider/index.js

@@ -1,32 +1,25 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React, { memo, useMemo } from 'react';
-// Antd Components
-import { Slider as AntdSlider } from 'antd';
-// Styled
-import { SliderWrapper } from './styled';
-export const Slider = memo(props => {
-    const { range, value, min = 0, max = 0, className } = props, restOf = __rest(props, ["range", "value", "min", "max", "className"]);
-    const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
-    const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
-    if (isNegative) {
-        return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, Object.assign({ min: min, max: max, value: value }, restOf, { marks: { 0: ' ' } }))));
-    }
-    return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, Object.assign({}, props))));
-});
-Slider.defaultProps = {
-    tooltipVisible: false,
-    min: 0,
-};
+// Libraries
+import React, { memo, useMemo } from 'react';
+// Antd Components
+import { Slider as AntdSlider } from 'antd';
+// Styled
+import { SliderWrapper } from './styled';
+import { omit } from 'lodash';
+export const Slider = memo(props => {
+    const { range, value, min = 0, max = 0, className, tooltipVisible } = props;
+    const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
+    const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
+    const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+    if (isNegative) {
+        return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
+                    0: ' ',
+                } }))));
+    }
+    return (React.createElement(SliderWrapper, { className: className },
+        React.createElement(AntdSlider, Object.assign({}, restProps))));
+});
+Slider.defaultProps = {
+    tooltipVisible: false,
+    min: 0,
+};

package/es/components/atoms/Slider/styled.d.ts

@@ -1,7 +1,7 @@
-interface InputNumberWrapperProps {
-    isNegative?: boolean;
-    sliderValue?: number;
-    width?: number;
-}
-export declare const SliderWrapper: import("styled-components").StyledComponent<"div", any, InputNumberWrapperProps, never>;
-export {};
+interface InputNumberWrapperProps {
+    isNegative?: boolean;
+    sliderValue?: number;
+    width?: number;
+}
+export declare const SliderWrapper: import("styled-components").StyledComponent<"div", any, InputNumberWrapperProps, never>;
+export {};

package/es/components/atoms/Slider/styled.js

@@ -1,44 +1,44 @@
-// Libraries
-import styled, { css } from 'styled-components';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const SliderWrapper = styled.div `
-  width: 100%;
-
-  .antsomi-slider {
-    ${p => {
-    var _a, _b;
-    const width = p.width || 0;
-    return p.isNegative
-        ? css `
-            .antsomi-slider-handle-1 {
-              display: none;
-            }
-
-            .antsomi-slider-track {
-              ${width < 0
-            ? css `
-                    left: auto !important;
-                    right: 50% !important;
-                  `
-            : css `
-                    left: 50% !important;
-                    right: auto !important;
-                  `}
-
-              width: ${Math.abs(width)}% !important;
-            }
-
-            .antsomi-slider-dot {
-              top: -4px;
-              width: 0.25rem;
-              height: 0.875rem;
-              border-radius: 0.125rem;
-              background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent1};
-              border-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent1};
-            }
-          `
-        : '';
-}}
-  }
-`;
+// Libraries
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const SliderWrapper = styled.div `
+  width: 100%;
+
+  .antsomi-slider {
+    ${p => {
+    var _a, _b;
+    const width = p.width || 0;
+    return p.isNegative
+        ? css `
+            .antsomi-slider-handle-1 {
+              display: none;
+            }
+
+            .antsomi-slider-track {
+              ${width < 0
+            ? css `
+                    left: auto !important;
+                    right: 50% !important;
+                  `
+            : css `
+                    left: 50% !important;
+                    right: auto !important;
+                  `}
+
+              width: ${Math.abs(width)}% !important;
+            }
+
+            .antsomi-slider-dot {
+              top: -4px;
+              width: 0.25rem;
+              height: 0.875rem;
+              border-radius: 0.125rem;
+              background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent1};
+              border-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent1};
+            }
+          `
+        : '';
+}}
+  }
+`;

package/es/components/atoms/SliderV2/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
+export interface SliderProps {
+    defaultSliderTrack?: boolean;
+}
+export declare const SliderV2: React.FC<(SliderSingleProps & SliderProps) | (SliderRangeProps & SliderProps)>;

package/es/components/atoms/SliderV2/index.js

@@ -0,0 +1,21 @@
+// Libraries
+import React, { useState } from 'react';
+// Antd Components
+import { Slider as AntdSlider } from 'antd';
+// React.FC<SliderProps>
+export const SliderV2 = props => {
+    const { min, max, onChange, styles, range, value, defaultValue, marks, defaultSliderTrack } = props;
+    const [valueInternal, setValueInternal] = useState(defaultValue || min || 0);
+    if (min && max && min < 0 && max > 0 && !range && !defaultSliderTrack) {
+        const sliderWidth = max - min;
+        const calcValue = value || valueInternal;
+        const leftTrackPosition = `${(Math.abs(calcValue > 0 ? min : min - calcValue) / sliderWidth) * 100}%`;
+        const sliderTrackWidth = `${(Math.abs(calcValue) / sliderWidth) * 100}%`;
+        return (React.createElement(AntdSlider, Object.assign({ value: value || valueInternal, onChange: value => {
+                setValueInternal(value);
+                if (onChange)
+                    onChange(value);
+            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: marks || { 0: ' ' } }, props)));
+    }
+    return React.createElement(AntdSlider, Object.assign({}, props));
+};

package/es/components/atoms/Space/Space.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { SpaceProps } from 'antd';
-export declare const OriginSpace: React.FC<SpaceProps>;
-export declare const Space: React.ForwardRefExoticComponent<SpaceProps & React.RefAttributes<HTMLDivElement>> & {
-    Compact: React.FC<import("antd/es/space/Compact").SpaceCompactProps>;
-};
+import React from 'react';
+import type { SpaceProps } from 'antd';
+export declare const OriginSpace: React.FC<SpaceProps>;
+export declare const Space: React.ForwardRefExoticComponent<SpaceProps & React.RefAttributes<HTMLDivElement>> & {
+    Compact: React.FC<import("antd/es/space/Compact").SpaceCompactProps>;
+};

package/es/components/atoms/Space/Space.js

@@ -1,9 +1,9 @@
-import styled from 'styled-components';
-// Components
-import { Space as AntdSpace } from 'antd';
-export const OriginSpace = styled(AntdSpace) `
-  &.antsomi-space-vertical {
-    width: 100%;
-  }
-`;
-export const Space = OriginSpace;
+import styled from 'styled-components';
+// Components
+import { Space as AntdSpace } from 'antd';
+export const OriginSpace = styled(AntdSpace) `
+  &.antsomi-space-vertical {
+    width: 100%;
+  }
+`;
+export const Space = OriginSpace;

package/es/components/atoms/Space/index.d.ts

@@ -1 +1 @@
-export { Space } from './Space';
+export { Space } from './Space';

package/es/components/atoms/Space/index.js

@@ -1 +1 @@
-export { Space } from './Space';
+export { Space } from './Space';

package/es/components/atoms/Spin/Spin.d.ts

@@ -1,9 +1,10 @@
-import { SpinProps as AntdSpinProps } from 'antd';
-export interface TSpinProps extends AntdSpinProps {
-    indicatorSize?: number;
-    children?: any;
-}
-export declare const Spin: {
-    (props: TSpinProps): JSX.Element;
-    defaultProps: {};
-};
+import React from 'react';
+import { SpinProps as AntdSpinProps } from 'antd';
+export interface TSpinProps extends AntdSpinProps {
+    indicatorSize?: number;
+    children?: any;
+}
+export declare const Spin: {
+    (props: TSpinProps): React.JSX.Element;
+    defaultProps: {};
+};

package/es/components/atoms/Spin/Spin.js

@@ -1,28 +1,28 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
-// Antd Icons
-import { LoadingOutlined } from '@ant-design/icons';
-// Styled
-import { StyledSpin } from './styled';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Spin = (props) => {
-    var _a;
-    const { indicatorSize } = props, restOf = __rest(props, ["indicatorSize"]);
-    return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
-                fontSize: indicatorSize || 30,
-                color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf)), props.children));
-};
-Spin.defaultProps = {};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+// Antd Icons
+import { LoadingOutlined } from '@ant-design/icons';
+// Styled
+import { StyledSpin } from './styled';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const Spin = (props) => {
+    var _a;
+    const { indicatorSize } = props, restOf = __rest(props, ["indicatorSize"]);
+    return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
+                fontSize: indicatorSize || 30,
+                color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
+            }, spin: true })) }, restOf)), props.children));
+};
+Spin.defaultProps = {};

package/es/components/atoms/Spin/index.d.ts

@@ -1 +1 @@
-export { Spin } from './Spin';
+export { Spin } from './Spin';

package/es/components/atoms/Spin/index.js

@@ -1 +1 @@
-export { Spin } from './Spin';
+export { Spin } from './Spin';

package/es/components/atoms/Spin/styled.d.ts

@@ -1 +1 @@
-export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinType, any, {}, never>;
+export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinType, any, {}, never>;

package/es/components/atoms/Spin/styled.js

@@ -1,7 +1,7 @@
-// Libraries
-import styled from 'styled-components';
-// Antd Components
-import { Spin } from 'antd';
-export const StyledSpin = styled(Spin) `
-  max-height: unset !important;
-`;
+// Libraries
+import styled from 'styled-components';
+// Antd Components
+import { Spin } from 'antd';
+export const StyledSpin = styled(Spin) `
+  max-height: unset !important;
+`;

package/es/components/atoms/Statistic/Statistic.d.ts

@@ -1 +1 @@
-export declare const Statistic: import("antd/es/statistic").CompoundedStatistic;
+export declare const Statistic: import("antd/es/statistic").CompoundedStatistic;

package/es/components/atoms/Statistic/Statistic.js

@@ -1,2 +1,2 @@
-import { Statistic as AntdStatistic } from 'antd';
-export const Statistic = AntdStatistic;
+import { Statistic as AntdStatistic } from 'antd';
+export const Statistic = AntdStatistic;

package/es/components/atoms/Statistic/index.d.ts

@@ -1 +1 @@
-export { Statistic } from './Statistic';
+export { Statistic } from './Statistic';

package/es/components/atoms/Statistic/index.js

@@ -1 +1 @@
-export { Statistic } from './Statistic';
+export { Statistic } from './Statistic';

package/es/components/atoms/Steps/Steps.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const Steps: import("react").FC<import("antd").StepsProps> & {
-    Step: typeof import("rc-steps/lib/Step").default;
-};
+/// <reference types="react" />
+export declare const Steps: import("react").FC<import("antd").StepsProps> & {
+    Step: typeof import("rc-steps/lib/Step").default;
+};

package/es/components/atoms/Steps/Steps.js

@@ -1,2 +1,2 @@
-import { Steps as AntdSteps } from 'antd';
-export const Steps = AntdSteps;
+import { Steps as AntdSteps } from 'antd';
+export const Steps = AntdSteps;

package/es/components/atoms/Steps/index.d.ts

@@ -1 +1 @@
-export { Steps } from './Steps';
+export { Steps } from './Steps';

package/es/components/atoms/Steps/index.js

@@ -1 +1 @@
-export { Steps } from './Steps';
+export { Steps } from './Steps';

package/es/components/atoms/Switch/Switch.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const Switch: import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>;
+/// <reference types="react" />
+export declare const Switch: import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>;

package/es/components/atoms/Switch/Switch.js

@@ -1,2 +1,2 @@
-import { Switch as AntdSwitch } from 'antd';
-export const Switch = AntdSwitch;
+import { Switch as AntdSwitch } from 'antd';
+export const Switch = AntdSwitch;

package/es/components/atoms/Switch/index.d.ts

@@ -1 +1 @@
-export { Switch } from './Switch';
+export { Switch } from './Switch';

package/es/components/atoms/Switch/index.js

@@ -1 +1 @@
-export { Switch } from './Switch';
+export { Switch } from './Switch';

package/es/components/atoms/Tag/Tag.d.ts

@@ -1 +1 @@
-export { Tag } from 'antd';
+export { Tag } from 'antd';

package/es/components/atoms/Tag/Tag.js

@@ -1 +1 @@
-export { Tag } from 'antd';
+export { Tag } from 'antd';

package/es/components/atoms/Tag/index.d.ts

@@ -1 +1 @@
-export { Tag } from './Tag';
+export { Tag } from './Tag';

package/es/components/atoms/Tag/index.js

@@ -1 +1 @@
-export { Tag } from './Tag';
+export { Tag } from './Tag';

package/es/components/atoms/Text/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-export interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
-    [key: string]: any;
-    type?: 'default' | 'secondary' | 'disabled' | 'error' | 'warning' | 'success';
-    size?: 'small' | 'medium' | 'large' | number;
-    color?: string;
-    bold?: boolean;
-    children?: React.ReactNode;
-}
-export declare const Text: React.FC<TextProps>;
+import React from 'react';
+export interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
+    [key: string]: any;
+    type?: 'default' | 'secondary' | 'disabled' | 'error' | 'warning' | 'success';
+    size?: 'small' | 'medium' | 'large' | number;
+    color?: string;
+    bold?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Text: React.FC<TextProps>;

package/es/components/atoms/Text/index.js

@@ -1,27 +1,27 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import classNames from 'classnames';
-import React from 'react';
-// Styled
-import { TextWrapper } from './styled';
-export const Text = props => {
-    const { type, size, bold, children, className, style, color } = props, restOf = __rest(props, ["type", "size", "bold", "children", "className", "style", "color"]);
-    return (React.createElement(TextWrapper, Object.assign({ size: size, className: classNames(`--${type}`, className, {
-            'ants-font-bold': bold,
-        }), style: Object.assign(Object.assign({}, style), { color }) }, restOf), children));
-};
-Text.defaultProps = {
-    type: 'default',
-    bold: false,
-    size: 'small',
-};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import classNames from 'classnames';
+import React from 'react';
+// Styled
+import { TextWrapper } from './styled';
+export const Text = props => {
+    const { type, size, bold, children, className, style, color } = props, restOf = __rest(props, ["type", "size", "bold", "children", "className", "style", "color"]);
+    return (React.createElement(TextWrapper, Object.assign({ size: size, className: classNames(`--${type}`, className, {
+            'ants-font-bold': bold,
+        }), style: Object.assign(Object.assign({}, style), { color }) }, restOf), children));
+};
+Text.defaultProps = {
+    type: 'default',
+    bold: false,
+    size: 'small',
+};

package/es/components/atoms/Text/styled.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-interface TextWrapperProps {
-    size?: 'small' | 'medium' | 'large' | number;
-    children?: React.ReactNode;
-}
-export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, TextWrapperProps, never>;
-export {};
+/// <reference types="react" />
+interface TextWrapperProps {
+    size?: 'small' | 'medium' | 'large' | number;
+    children?: React.ReactNode;
+}
+export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, TextWrapperProps, never>;
+export {};

package/es/components/atoms/Text/styled.js

@@ -1,52 +1,52 @@
-var _a, _b, _c, _d, _e, _f;
-// Libraries
-import styled, { css } from 'styled-components';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const TextWrapper = styled.div `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextBase};
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
-  font-family: Roboto;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
-  ${p => {
-    var _a, _b, _c;
-    switch (p.size) {
-        case 'small':
-            return css `
-          font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
-        `;
-        case 'medium':
-            return css `
-          font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSizeMd}px;
-        `;
-        case 'large':
-            return css `
-          font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSizeLg}px;
-        `;
-        default:
-            return css `
-          font-size: ${p.size}px;
-        `;
-    }
-}}
-
-  &.--disabled {
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled};
-    pointer-events: none;
-  }
-
-  &.--secondary {
-    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon};
-  }
-
-  &.--error {
-    color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.red6};
-  }
-
-  &.--warning {
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorWarning};
-  }
-`;
+var _a, _b, _c, _d, _e, _f;
+// Libraries
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const TextWrapper = styled.div `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextBase};
+  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+  font-family: Roboto;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  ${p => {
+    var _a, _b, _c;
+    switch (p.size) {
+        case 'small':
+            return css `
+          font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+        `;
+        case 'medium':
+            return css `
+          font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSizeMd}px;
+        `;
+        case 'large':
+            return css `
+          font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSizeLg}px;
+        `;
+        default:
+            return css `
+          font-size: ${p.size}px;
+        `;
+    }
+}}
+
+  &.--disabled {
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled};
+    pointer-events: none;
+  }
+
+  &.--secondary {
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon};
+  }
+
+  &.--error {
+    color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.red6};
+  }
+
+  &.--warning {
+    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorWarning};
+  }
+`;