@antscorp/antsomi-ui 1.3.2-beta.22 → 1.3.2-beta.24

package/es/components/molecules/GradientSetting/index.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+interface GradientColor {
+    gradientColor: string;
+    gradientColorLocation: number;
+}
+declare const POSITION: {
+    readonly LEFT_TOP: {
+        readonly value: "left top";
+        readonly label: string;
+    };
+    readonly LEFT_CENTER: {
+        readonly value: "left center";
+        readonly label: string;
+    };
+    readonly LEFT_BOTTOM: {
+        readonly value: "left bottom";
+        readonly label: string;
+    };
+    readonly RIGHT_TOP: {
+        readonly value: "right top";
+        readonly label: string;
+    };
+    readonly RIGHT_CENTER: {
+        readonly value: "right center";
+        readonly label: string;
+    };
+    readonly RIGHT_BOTTOM: {
+        readonly value: "right bottom";
+        readonly label: string;
+    };
+    readonly CENTER_TOP: {
+        readonly value: "center top";
+        readonly label: string;
+    };
+    readonly CENTER_CENTER: {
+        readonly value: "center center";
+        readonly label: string;
+    };
+    readonly CENTER_BOTTOM: {
+        readonly value: "center bottom";
+        readonly label: string;
+    };
+};
+type PositionValue = (typeof POSITION)[keyof typeof POSITION]['value'];
+interface GradientConfig {
+    gradients: GradientColor[];
+    gradientType: 'linear-gradient' | 'radial-gradient';
+    radialPosition: PositionValue;
+    linearAngle: number;
+}
+interface GradientSettingProps {
+    onChange?: (gradientConfig: GradientConfig) => void;
+}
+export declare const GradientSetting: React.FC<GradientSettingProps>;
+export {};

package/es/components/molecules/GradientSetting/index.js

@@ -0,0 +1,122 @@
+// Libraries
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+// Locales
+import { getTranslateMessage, translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Components
+import { ColorSetting, Select, SettingWrapper, SliderWithInputNumber, } from '@antscorp/antsomi-ui/es/components/molecules';
+// Utils
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import Icon from '@antscorp/icons';
+import { mapNumberToOrdinalText } from '@antscorp/antsomi-ui/es/utils';
+import { cloneDeep } from 'lodash';
+const GRADIENT_TYPE = {
+    LINEAR: {
+        value: 'linear-gradient',
+        label: getTranslateMessage(translations.linear),
+    },
+    RADIAL: {
+        value: 'radial-gradient',
+        label: getTranslateMessage(translations.radial),
+    },
+};
+const POSITION = {
+    LEFT_TOP: {
+        value: 'left top',
+        label: getTranslateMessage(translations.leftTop),
+    },
+    LEFT_CENTER: {
+        value: 'left center',
+        label: getTranslateMessage(translations.leftCenter),
+    },
+    LEFT_BOTTOM: {
+        value: 'left bottom',
+        label: getTranslateMessage(translations.leftBottom),
+    },
+    RIGHT_TOP: {
+        value: 'right top',
+        label: getTranslateMessage(translations.rightTop),
+    },
+    RIGHT_CENTER: {
+        value: 'right center',
+        label: getTranslateMessage(translations.rightCenter),
+    },
+    RIGHT_BOTTOM: {
+        value: 'right bottom',
+        label: getTranslateMessage(translations.rightBottom),
+    },
+    CENTER_TOP: {
+        value: 'center top',
+        label: getTranslateMessage(translations.centerTop),
+    },
+    CENTER_CENTER: {
+        value: 'center center',
+        label: getTranslateMessage(translations.centerCenter),
+    },
+    CENTER_BOTTOM: {
+        value: 'center bottom',
+        label: getTranslateMessage(translations.centerBottom),
+    },
+};
+const GRADIENT_MIN = 2;
+const GRADIENT_MAX = 5;
+const DEFAULT_GRADIENTS = [
+    { gradientColor: '#D11A66', gradientColorLocation: 0 },
+    { gradientColor: '#FFBD64', gradientColorLocation: 50 },
+];
+export const GradientSetting = ({ onChange }) => {
+    const { t } = useTranslation();
+    const [gradients, setGradients] = useState(DEFAULT_GRADIENTS);
+    const [gradientType, setGradientType] = useState('linear-gradient');
+    const [radialPosition, setRadialPosition] = useState('center center');
+    const [linearAngle, setLinearAngle] = useState(90);
+    useEffect(() => {
+        onChange && onChange({ gradients, gradientType, radialPosition, linearAngle });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(gradients), gradientType, radialPosition, linearAngle]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.gradientStyle) },
+            React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
+        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "ants-mb-[15px]", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.position) },
+            React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
+        Array.isArray(gradients) && gradients.length
+            ? gradients.map((gradient, index) => {
+                const { gradientColor, gradientColorLocation } = gradient;
+                return (React.createElement("div", { className: "ants-flex ants-gap-x-2 ants-mb-[15px]", key: index },
+                    React.createElement("div", { className: "ants-grid md:ants-grid-cols-5 ants-grid-cols-1 ants-gap-y-5" },
+                        React.createElement("div", { className: "ants-col-span-2" },
+                            React.createElement(ColorSetting, { labelClassName: "!ants-text-cus-base", label: t(translations.gradientColor, {
+                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                }), color: gradientColor, positionInput: "right", onChange: color => {
+                                    setGradients(prev => {
+                                        const clonePrev = cloneDeep(prev);
+                                        clonePrev[index].gradientColor = color;
+                                        return clonePrev;
+                                    });
+                                } })),
+                        React.createElement("div", { className: "ants-col-span-3" },
+                            React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
+                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
+                                    setGradients(prev => {
+                                        const clonePrev = cloneDeep(prev);
+                                        clonePrev[index].gradientColorLocation = color;
+                                        return clonePrev;
+                                    });
+                                } }))),
+                    (gradients === null || gradients === void 0 ? void 0 : gradients.length) > GRADIENT_MIN && (React.createElement(Icon, { type: "icon-ants-outline-delete", className: "ants-text-primary ants-cursor-pointer", style: { alignSelf: 'flex-end', marginBottom: '10px', fontSize: '16px' }, onClick: () => {
+                            const clonePrev = cloneDeep(gradients);
+                            clonePrev.splice(index, 1);
+                            setGradients(clonePrev);
+                        } }))));
+            })
+            : null,
+        (gradients === null || gradients === void 0 ? void 0 : gradients.length) < GRADIENT_MAX && (React.createElement(Button, { type: "text", onClick: () => {
+                // eslint-disable-next-line arrow-body-style
+                setGradients(prev => {
+                    return [...prev, { gradientColor: '#000000', gradientColorLocation: 0 }];
+                });
+            } },
+            "+ ",
+            t(translations.addColor)))));
+};

package/es/components/molecules/InputNumber/index.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React, { useEffect, useMemo, useState } from 'react';
+import { InputNumber as AntdInputNumber } from 'antd';
 // Components
 import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
-import { InputNumberWrapper } from './styled';
 // Utils
 import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
@@ -67,7 +67,7 @@ export const InputNumber = props => {
     }
     return (React.createElement("div", null,
         label && renderRequiredLabel(label),
-        React.createElement(InputNumberWrapper, Object.assign({}, restOf, { className: "--show-handler", required: required, onChange: onChangeInputNumber, onBlur: e => {
+        React.createElement(AntdInputNumber, Object.assign({}, restOf, { className: "--show-handler", required: required, onChange: onChangeInputNumber, onBlur: e => {
                 if (!focused) {
                     setFocused(true);
                 }

package/es/components/molecules/InputNumberWithUnit/index.js

@@ -27,12 +27,10 @@ const DEFAULT_UNIT = {
 };
 export const InputNumberWithUnit = props => {
     // Props
-    const { unit, unitData, onChangeUnit } = props, restOf = __rest(props, ["unit", "unitData", "onChangeUnit"]);
-    return (React.createElement(InputNumberWithUnitWrapper, null,
+    const { unit, unitData, onChangeUnit, className } = props, restOf = __rest(props, ["unit", "unitData", "onChangeUnit", "className"]);
+    return (React.createElement(InputNumberWithUnitWrapper, { className: className },
         React.createElement(InputNumber, Object.assign({}, restOf)),
-        React.createElement("div", { className: "unit-selector" },
-            ' ',
-            Object.values(unitData || DEFAULT_UNIT).map(({ value, label }) => (React.createElement(Text, { key: value, className: `${unit === value ? 'selected' : ''}`, onClick: () => onChangeUnit(value) }, label))))));
+        Object.values(unitData || DEFAULT_UNIT).map(({ value, label }) => (React.createElement(Text, { key: value, className: `unit-label ${unit === value ? 'selected' : ''}`, onClick: () => onChangeUnit(value) }, label)))));
 };
 InputNumberWithUnit.defaultProps = {
     unit: 'px',

package/es/components/molecules/InputNumberWithUnit/styled.js

@@ -6,19 +6,11 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const InputNumberWithUnitWrapper = styled.div `
   display: flex;
   align-items: center;
-  margin-left: 10px;
-  margin-right: 10px;
 
-  .unit-selector {
-    display: flex;
-    align-items: center;
-  }
-
-  .unit-selector > div {
+  .unit-label {
     cursor: pointer;
-    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon};
     margin-left: 10px;
-    margin-right: 10px;
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon};
 
     &.selected {
       color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};

package/es/components/molecules/index.d.ts

@@ -22,6 +22,7 @@ export { TreeSelect } from './TreeSelect';
 export { Result } from './Result';
 export { Card } from './Card';
 export { InputNumberWithUnit } from './InputNumberWithUnit';
+export { GradientSetting } from './GradientSetting';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';

package/es/components/molecules/index.js

@@ -22,3 +22,4 @@ export { TreeSelect } from './TreeSelect';
 export { Result } from './Result';
 export { Card } from './Card';
 export { InputNumberWithUnit } from './InputNumberWithUnit';
+export { GradientSetting } from './GradientSetting';

package/es/constants/theme.js

@@ -108,6 +108,7 @@ THEME.components = {
         borderRadiusLG: 0,
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
+        controlHeight: 30,
         borderRadiusXS: 0,
         colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
         controlItemBgActive: '#E0EBF7',

package/es/locales/en/translation.json

@@ -29,5 +29,38 @@
         "months": "Months",
         "quarters": "Quarters",
         "years": "Years"
+    },
+    "linear": "Linear",
+    "radial": "Radial",
+    "gradientStyle": "Gradient Style",
+    "angle": "Angle",
+    "gradientColor": "{{name}} Color",
+    "gradientLocation": "{{name}} Color Location",
+    "firstColor": "First Color",
+    "secondColor": "Second Color",
+    "firstColorLocation": "First Color Location",
+    "secondColorLocation": "Second Color Location",
+    "leftTop": "Left Top",
+    "leftCenter": "Left Center",
+    "leftBottom": "Left Bottom",
+    "rightTop": "Right Top",
+    "rightCenter": "Right Center",
+    "rightBottom": "Right Bottom",
+    "centerTop": "Center Top",
+    "centerCenter": "Center Center",
+    "centerBottom": "Center Bottom",
+    "position": "Position",
+    "addColor": "Add color",
+    "ordinalText": {
+        "first": "First",
+        "second": "Second",
+        "third": "Third",
+        "fourth": "Fourth",
+        "fifth": "Fifth",
+        "sixth": "Sixth",
+        "seventh": "Seventh",
+        "eighth": "Eighth",
+        "ninth": "Ninth",
+        "tenth": "Tenth"
     }
 }

package/es/locales/i18n.d.ts

@@ -32,6 +32,39 @@ export declare const translationsJson: {
                 quarters: string;
                 years: string;
             };
+            linear: string;
+            radial: string;
+            gradientStyle: string;
+            angle: string;
+            gradientColor: string;
+            gradientLocation: string;
+            firstColor: string;
+            secondColor: string;
+            firstColorLocation: string;
+            secondColorLocation: string;
+            leftTop: string;
+            leftCenter: string;
+            leftBottom: string;
+            rightTop: string;
+            rightCenter: string;
+            rightBottom: string;
+            centerTop: string;
+            centerCenter: string;
+            centerBottom: string;
+            position: string;
+            addColor: string;
+            ordinalText: {
+                first: string;
+                second: string;
+                third: string;
+                fourth: string;
+                fifth: string;
+                sixth: string;
+                seventh: string;
+                eighth: string;
+                ninth: string;
+                tenth: string;
+            };
         };
     };
     vi: {
@@ -67,6 +100,39 @@ export declare const translationsJson: {
                 quarters: string;
                 years: string;
             };
+            addColor: string;
+            linear: string;
+            radial: string;
+            gradientStyle: string;
+            angle: string;
+            gradientColor: string;
+            gradientLocation: string;
+            firstColor: string;
+            secondColor: string;
+            firstColorLocation: string;
+            secondColorLocation: string;
+            leftTop: string;
+            leftCenter: string;
+            leftBottom: string;
+            rightTop: string;
+            rightCenter: string;
+            rightBottom: string;
+            centerTop: string;
+            centerCenter: string;
+            centerBottom: string;
+            position: string;
+            ordinalText: {
+                first: string;
+                second: string;
+                third: string;
+                fourth: string;
+                fifth: string;
+                sixth: string;
+                seventh: string;
+                eighth: string;
+                ninth: string;
+                tenth: string;
+            };
         };
     };
 };

package/es/locales/translations.d.ts

@@ -32,6 +32,39 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
         quarters: string;
         years: string;
     };
+    linear: string;
+    radial: string;
+    gradientStyle: string;
+    angle: string;
+    gradientColor: string;
+    gradientLocation: string;
+    firstColor: string;
+    secondColor: string;
+    firstColorLocation: string;
+    secondColorLocation: string;
+    leftTop: string;
+    leftCenter: string;
+    leftBottom: string;
+    rightTop: string;
+    rightCenter: string;
+    rightBottom: string;
+    centerTop: string;
+    centerCenter: string;
+    centerBottom: string;
+    position: string;
+    addColor: string;
+    ordinalText: {
+        first: string;
+        second: string;
+        third: string;
+        fourth: string;
+        fifth: string;
+        sixth: string;
+        seventh: string;
+        eighth: string;
+        ninth: string;
+        tenth: string;
+    };
 }>, current?: string) => void;
 export declare const t: (id: string, ...rest: any[]) => [string, ...any[]];
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;

package/es/locales/vi/translation.json

@@ -29,5 +29,38 @@
         "months": "Tháng",
         "quarters": "Quý",
         "years": "Năm"
+    },
+    "addColor": "Thêm màu",
+    "linear": "Linear",
+    "radial": "Radial",
+    "gradientStyle": "Kiểu chuyển màu",
+    "angle": "Góc",
+    "gradientColor": "Màu {{name}}",
+    "gradientLocation": "Vị trí màu {{name}}",
+    "firstColor": "Màu đầu tiên",
+    "secondColor": "Màu thứ hai",
+    "firstColorLocation": "Vị trí màu đầu tiên",
+    "secondColorLocation": "Vị trí màu thứ hai",
+    "leftTop": "Trái Trên",
+    "leftCenter": "Trái Giữa",
+    "leftBottom": "Trái Dưới",
+    "rightTop": "Phải Trên",
+    "rightCenter": "Phải Giữa",
+    "rightBottom": "Phải Dưới",
+    "centerTop": "Giữa Trên",
+    "centerCenter": "Giữa Giữa",
+    "centerBottom": "Giữa Dưới",
+    "position": "Vị trí",
+    "ordinalText": {
+        "first": "đầu tiên",
+        "second": "thứ hai",
+        "third": "thứ ba",
+        "fourth": "thứ tư",
+        "fifth": "thứ năm",
+        "sixth": "thứ sáu",
+        "seventh": "thứ bảy",
+        "eighth": "thứ tám",
+        "ninth": "thứ chín",
+        "tenth": "thứ mười"
     }
 }

package/es/test.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import '@antscorp/icons/main.css';
-import { ColorSetting, ConfigProvider, EdgeSetting, IconSelection, PositionSetting, RadioGroup, SettingWrapper, SliderWithInputNumber, Space, UploadImage, } from './components';
+import { ColorSetting, ConfigProvider, EdgeSetting, IconSelection, InputNumberWithUnit, PositionSetting, RadioGroup, SettingWrapper, SliderWithInputNumber, Space, UploadImage, } from './components';
 // Constants
 import { THEME } from './constants';
 export const BACKGROUND_COLOR_STYLE = {
@@ -98,6 +98,12 @@ export const App = () => {
             React.createElement(Space, { size: 20, direction: "vertical" },
                 React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
                     React.createElement(ColorSetting, { label: "Background Color", labelStyling: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon }, color: colorSettingState.color, customColors: colorSettingState.customColors, callback: callbackColorSetting, onChange: handleChangeColorSetting })),
+                React.createElement(SettingWrapper, { vertical: true, label: "Input number with unit" },
+                    React.createElement(InputNumberWithUnit, { unit: "px", min: 0, max: 2000, value: 700, onChange: value => {
+                            console.log('onChange:: ', value);
+                        }, onChangeUnit: unit => {
+                            console.log('onChangeUnit:: ', unit);
+                        } })),
                 React.createElement(SettingWrapper, { label: "Radio Group" },
                     React.createElement(RadioGroup, { options: Object.values(BACKGROUND_COLOR_STYLE), value: radioValue, onChange: e => handleChangeRadio(e) })),
                 React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),

package/es/utils/common.d.ts

@@ -45,3 +45,9 @@ export declare function getEntriesV2(res: any, def: any): {
     messageAPI?: undefined;
 };
 export declare const getNumberFromString: (str: string) => number;
+/**
+ * Maps a number to its corresponding ordinal text representation.
+ * @param {number} num - The number to be mapped.
+ * @return {string} The ordinal text representation of the number.
+ */
+export declare function mapNumberToOrdinalText(num: number): string;

package/es/utils/common.js

@@ -320,3 +320,36 @@ export const getNumberFromString = (str) => {
         return 0;
     }
 };
+/**
+ * Maps a number to its corresponding ordinal text representation.
+ * @param {number} num - The number to be mapped.
+ * @return {string} The ordinal text representation of the number.
+ */
+export function mapNumberToOrdinalText(num) {
+    switch (num) {
+        case 0:
+            return 'zeroth';
+        case 1:
+            return 'first';
+        case 2:
+            return 'second';
+        case 3:
+            return 'third';
+        case 4:
+            return 'fourth';
+        case 5:
+            return 'fifth';
+        case 6:
+            return 'sixth';
+        case 7:
+            return 'seventh';
+        case 8:
+            return 'eighth';
+        case 9:
+            return 'ninth';
+        case 10:
+            return 'tenth';
+        default:
+            return '';
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.2-beta.22",
+  "version": "1.3.2-beta.24",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -179,4 +179,4 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }
-}
+}

package/es/components/molecules/InputNumber/styled.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const InputNumberWrapper: import("styled-components").StyledComponent<(<T extends import("@rc-component/mini-decimal").ValueType = import("@rc-component/mini-decimal").ValueType>(props: import("antd").InputNumberProps<T> & {
-    children?: import("react").ReactNode;
-} & {
-    ref?: import("react").Ref<HTMLInputElement> | undefined;
-}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
-    displayName?: string | undefined;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd").InputNumberProps<any>) => JSX.Element;
-}, any, {}, never>;

package/es/components/molecules/InputNumber/styled.js

@@ -1,95 +0,0 @@
-var _a, _b, _c, _d, _e, _f, _g, _h;
-// Libraries
-import styled, { css } from 'styled-components';
-// Components
-import { InputNumber as AntdInputNumber } from 'antd';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const InputNumberWrapper = styled(AntdInputNumber) `
-  height: 30px;
-  border-style: none;
-  border-radius: none;
-  font-family: 'Roboto';
-  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
-  --tw-shadow: 0 1px 0 0 #e0e0e0;
-  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
-  &::placeholder {
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent5};
-  }
-
-  &:hover {
-    background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
-  }
-
-  ${props => css `
-      height: ${props.height}${typeof props.height === 'number' ? 'px' : ''};
-      width: ${props.width}${typeof props.width === 'number' ? 'px' : ''};
-    `}
-
-  .antsomi-input-number-group {
-    min-width: 100px;
-  }
-
-  &:active,
-  &:focus {
-    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw1_1};
-    --tw-shadow: 0 1px 0 0 #194e8d;
-    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-  }
-
-  &:disabled {
-    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent5};
-    --tw-shadow: 0 1px 0 0 #e0e0e0;
-    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-  }
-
-  .antsomi-input-number-handler-wrap {
-    height: 100%;
-    opacity: 1;
-
-    &:hover {
-      .antsomi-input-number-handler {
-        height: 50%;
-      }
-    }
-  }
-
-  .antsomi-input-number-handler {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-
-    &:hover {
-      color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorText};
-    }
-  }
-
-  .antsomi-input-number-input {
-    padding: 0px 4px !important;
-  }
-
-  .antsomi-input-number-group-addon {
-    position: relative;
-    top: 1px;
-    padding: 0;
-    border: none;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-    padding-left: 10px;
-    font-size: 13px;
-    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.colorTextBase};
-    border-bottom-width: 1px;
-  }
-`;