assui 2.0.143 → 2.0.146

package/es/button-drawer/index.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { DrawerProps } from 'antd/lib/drawer';
+export declare type DrawerAction = {
+    close: () => void;
+    open: () => void;
+};
 export interface ButtonDrawerProps extends DrawerProps {
     onClose?: () => void;
     onOpen?: () => void;
     trigger: React.ReactElement;
-    children: React.ReactElement;
+    children: ((v: DrawerAction) => React.ReactElement) | React.ReactElement;
 }
-export declare type DrawerAction = {
-    close: () => void;
-    open: () => void;
-};
 declare const ForwardRefButtonDrawer: React.ForwardRefExoticComponent<ButtonDrawerProps & React.RefAttributes<unknown>>;
 export default ForwardRefButtonDrawer;

package/es/button-drawer/index.js

@@ -56,6 +56,7 @@ var __read = this && this.__read || function (o, n) {
 
 import React, { useState, useRef, useImperativeHandle } from 'react';
 import Drawer from 'antd/lib/drawer';
+import isFunction from 'lodash/isFunction';
 import classNames from 'classnames';
 
 var ButtonDrawer = function ButtonDrawer(props, ref) {
@@ -107,7 +108,7 @@ var ButtonDrawer = function ButtonDrawer(props, ref) {
     title: title,
     onClose: closeDrawer,
     visible: drawerVisible
-  }, restProps), /*#__PURE__*/React.cloneElement(children, {
+  }, restProps), isFunction(children) ? children(actionRef.current) : /*#__PURE__*/React.cloneElement(children, {
     drawerAction: actionRef.current
   })));
 };

package/es/index.d.ts

@@ -54,8 +54,6 @@ export type { LabelTreeSelectProps } from './label-tree-select';
 export { default as LabelTreeSelect } from './label-tree-select';
 export type { LabelCustomizeRangePickerProps } from './label-customize-range-picker';
 export { default as LabelCustomizeRangePicker } from './label-customize-range-picker';
-export type { LabelDescItemProps } from './label-desc-item';
-export { default as LabelDescItem } from './label-desc-item';
 export type { RichTextEditorProps } from './rich-text-editor';
 export { default as RichTextEditor } from './rich-text-editor';
 export { default as beautifulDnd } from './beautiful-dnd';

package/es/index.js

@@ -27,6 +27,5 @@ export { default as LabelNumberInput } from './label-number-input';
 export { default as LabelConditionInput } from './label-condition-input';
 export { default as LabelTreeSelect } from './label-tree-select';
 export { default as LabelCustomizeRangePicker } from './label-customize-range-picker';
-export { default as LabelDescItem } from './label-desc-item';
 export { default as RichTextEditor } from './rich-text-editor';
 export { default as beautifulDnd } from './beautiful-dnd';

package/es/label-customize-range-picker/defaultRadioList.d.ts

@@ -0,0 +1,8 @@
+import type { Moment } from 'moment';
+export declare type RadioListType = {
+    key: string | number;
+    text: string;
+    value: [Moment, Moment];
+};
+declare const defaultRadioList: RadioListType[];
+export default defaultRadioList;

package/es/label-customize-range-picker/defaultRadioList.js

@@ -0,0 +1,74 @@
+import moment from 'moment';
+var now = moment();
+var TODAY = 1;
+var YESTERDAY = 2;
+var WEEK = 3;
+var LAST_WEEK = 4;
+var MONTH = 5;
+var LAST_MONTH = 6;
+var QUARTER = 7;
+var LAST_QUARTER = 8;
+var BEFORE_7_DAY = 9;
+var BEFORE_14_DAY = 10;
+var BEFORE_30_DAY = 11;
+var BEFORE_90_DAY = 12;
+var BEFORE_180_DAY = 13;
+var BEFORE_365_DAY = 14;
+var defaultRadioList = [{
+  key: TODAY,
+  text: '今日',
+  value: [now, now]
+}, {
+  key: YESTERDAY,
+  text: '昨日',
+  value: [now.clone().subtract(1, 'day'), now.clone().subtract(1, 'day').endOf('day')]
+}, {
+  key: WEEK,
+  text: '本周',
+  value: [now.clone().startOf('week'), now.clone().endOf('week')]
+}, {
+  key: LAST_WEEK,
+  text: '上周',
+  value: [now.clone().subtract(1, 'week').startOf('week'), now.clone().subtract(1, 'week').endOf('week')]
+}, {
+  key: MONTH,
+  text: '本月',
+  value: [now.clone().startOf('month'), now.clone().endOf('month')]
+}, {
+  key: LAST_MONTH,
+  text: '上月',
+  value: [now.clone().subtract(1, 'month').startOf('month'), now.clone().subtract(1, 'month').endOf('month')]
+}, {
+  key: QUARTER,
+  text: '本季度',
+  value: [now.clone().startOf('quarter'), now.clone().endOf('quarter')]
+}, {
+  key: LAST_QUARTER,
+  text: '上季度',
+  value: [now.clone().subtract(1, 'quarter').startOf('quarter'), now.clone().subtract(1, 'quarter').endOf('quarter')]
+}, {
+  key: BEFORE_7_DAY,
+  text: '最近7天',
+  value: [now.clone().subtract(6, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_14_DAY,
+  text: '最近14天',
+  value: [now.clone().subtract(13, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_30_DAY,
+  text: '最近30天',
+  value: [now.clone().subtract(29, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_90_DAY,
+  text: '最近90天',
+  value: [now.clone().subtract(89, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_180_DAY,
+  text: '最近180天',
+  value: [now.clone().subtract(179, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_365_DAY,
+  text: '最近365天',
+  value: [now.clone().subtract(364, 'day').startOf('day'), now.endOf('day')]
+}];
+export default defaultRadioList;

package/es/label-customize-range-picker/index.d.ts

@@ -1,15 +1,12 @@
-import { dateTypeEnum } from './getDateScope';
+import type { Moment } from 'moment';
 import type { LabelRangePickerProps } from '../label-range-picker';
 export declare type RadioListType = {
-    key: dateTypeEnum;
+    key: string | number;
     text: string;
+    value: [Moment, Moment];
 };
 export interface LabelCustomizeRangePickerProps extends LabelRangePickerProps {
-    customizeTimeList?: dateTypeEnum[];
     radioList?: RadioListType[];
 }
-declare const LabelCustomizeRangePicker: {
-    (props: LabelCustomizeRangePickerProps): JSX.Element;
-    dateTypeEnum: typeof dateTypeEnum;
-};
+declare const LabelCustomizeRangePicker: (props: LabelCustomizeRangePickerProps) => JSX.Element;
 export default LabelCustomizeRangePicker;

package/es/label-customize-range-picker/index.js

@@ -58,14 +58,12 @@ import React, { useState, useEffect } from 'react';
 import Radio from 'antd/lib/radio';
 import Checkbox from 'antd/lib/checkbox';
 import useControllableValue from 'ahooks/lib/useControllableValue';
-import getRadioList from './getRadioList';
+import defaultRadioList from './defaultRadioList';
 import LabelRangePicker from '../label-range-picker';
-import { useDateScope, dateTypeEnum } from './getDateScope';
 
 var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
-  var customizeTimeList = props.customizeTimeList,
-      radioList = props.radioList,
-      options = __rest(props, ["customizeTimeList", "radioList"]);
+  var radioList = props.radioList,
+      options = __rest(props, ["radioList"]);
 
   var _a = __read(useControllableValue(props), 2),
       date = _a[0],
@@ -79,12 +77,9 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
       radioKey = _c[0],
       setRadioKey = _c[1];
 
-  var _d = useDateScope(),
-      dateScopeMap = _d.dateScopeMap,
-      dateScopeList = _d.dateScopeList;
-
+  var dataSource = radioList !== null && radioList !== void 0 ? radioList : defaultRadioList;
   useEffect(function () {
-    var foundItem = dateScopeList.find(function (item) {
+    var foundItem = dataSource.find(function (item) {
       if (!date) return false;
 
       var _a = __read(item.value, 2),
@@ -117,13 +112,13 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
   var onRadioChange = function onRadioChange(event) {
     var value = event.target.value;
     setRadioKey(value);
-    setDate(dateScopeMap[value]);
+    var selectRadioInfo = dataSource.find(function (item) {
+      return item.key === value;
+    });
+    setDate(selectRadioInfo === null || selectRadioInfo === void 0 ? void 0 : selectRadioInfo.value);
   };
 
-  var list = radioList !== null && radioList !== void 0 ? radioList : getRadioList().filter(function (item) {
-    return customizeTimeList === null || customizeTimeList === void 0 ? void 0 : customizeTimeList.includes(item.key);
-  });
-  var finallyRadioList = list.length ? list : getRadioList();
+  var list = radioList !== null && radioList !== void 0 ? radioList : defaultRadioList;
 
   var panelRender = function panelRender(panel) {
     return /*#__PURE__*/React.createElement("div", {
@@ -141,7 +136,7 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
     }, /*#__PURE__*/React.createElement(Radio.Group, {
       onChange: onRadioChange,
       value: radioKey
-    }, finallyRadioList.map(function (_a) {
+    }, list.map(function (_a) {
       var key = _a.key,
           text = _a.text;
       return /*#__PURE__*/React.createElement(Radio, {
@@ -159,5 +154,4 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
   }, options));
 };
 
-LabelCustomizeRangePicker.dateTypeEnum = dateTypeEnum;
 export default LabelCustomizeRangePicker;

package/es/label-number-input/style/index.css

@@ -1,4 +1,9 @@
-.label-number-input {
+.label-number-input-warper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.label-number-input-warper .label-number-input {
   z-index: 1;
   width: 100%;
   height: 100%;
@@ -9,26 +14,21 @@
   border: 0;
   outline: 0;
 }
-.label-number-input:focus + label,
-.label-number-input:not([data-value='0']) + label {
+.label-number-input-warper .label-number-input:focus + label,
+.label-number-input-warper .label-number-input:not([data-value='0']) + label {
   transform: translateY(-8px) scale(0.8);
 }
-.label-number-input-field {
+.label-number-input-warper .label-number-input-field {
   height: 45px;
   overflow: hidden;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   transition: border 0.3s;
 }
-.label-number-input-focused {
+.label-number-input-warper .label-number-input-focused {
   border-color: #000;
 }
-.label-number-input-warper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.label-number-input-text {
+.label-number-input-warper .label-number-input-text {
   position: absolute;
   top: 12px;
   left: 15px;

package/es/label-number-input/style/index.less

@@ -9,51 +9,51 @@
 
 @font-weight-500: 500;
 
-.label-number-input {
-  z-index: 1;
+.label-number-input-warper {
+  position: relative;
   width: 100%;
   height: 100%;
-  padding: 19px 15px 2px 15px;
-  color: @color_263241;
-  font-size: @font-size-base;
-  line-height: 16px;
-  border: 0;
-  outline: 0;
-
-  &:focus + label,
-  &:not([data-value='0']) + label {
-    transform: translateY(@labelTextLabeltranslateY) scale(@labelTextLabelScale);
-  }
-
-  &-field {
-    height: 45px;
-    overflow: hidden;
-    border: 1px solid @color_e5e5e5;
-    border-radius: 8px;
-    transition: border 0.3s;
-  }
 
-  &-focused {
-    border-color: @labelFocusBorderColor;
-  }
-
-  &-warper {
-    position: relative;
+  .label-number-input {
+    z-index: 1;
     width: 100%;
     height: 100%;
-  }
-
-  &-text {
-    position: absolute;
-    top: 12px;
-    left: 15px;
-    z-index: 2;
-    height: 20px;
-    color: @color_9aa5b5;
+    padding: 19px 15px 2px 15px;
+    color: @color_263241;
     font-size: @font-size-base;
-    line-height: 20px;
-    transform-origin: top left;
-    cursor: text;
-    transition: all 0.2s ease-out;
+    line-height: 16px;
+    border: 0;
+    outline: 0;
+
+    &:focus + label,
+    &:not([data-value='0']) + label {
+      transform: translateY(@labelTextLabeltranslateY) scale(@labelTextLabelScale);
+    }
+
+    &-field {
+      height: 45px;
+      overflow: hidden;
+      border: 1px solid @color_e5e5e5;
+      border-radius: 8px;
+      transition: border 0.3s;
+    }
+
+    &-focused {
+      border-color: @labelFocusBorderColor;
+    }
+
+    &-text {
+      position: absolute;
+      top: 12px;
+      left: 15px;
+      z-index: 2;
+      height: 20px;
+      color: @color_9aa5b5;
+      font-size: @font-size-base;
+      line-height: 20px;
+      transform-origin: top left;
+      cursor: text;
+      transition: all 0.2s ease-out;
+    }
   }
 }

package/lib/button-drawer/index.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { DrawerProps } from 'antd/lib/drawer';
+export declare type DrawerAction = {
+    close: () => void;
+    open: () => void;
+};
 export interface ButtonDrawerProps extends DrawerProps {
     onClose?: () => void;
     onOpen?: () => void;
     trigger: React.ReactElement;
-    children: React.ReactElement;
+    children: ((v: DrawerAction) => React.ReactElement) | React.ReactElement;
 }
-export declare type DrawerAction = {
-    close: () => void;
-    open: () => void;
-};
 declare const ForwardRefButtonDrawer: React.ForwardRefExoticComponent<ButtonDrawerProps & React.RefAttributes<unknown>>;
 export default ForwardRefButtonDrawer;

package/lib/button-drawer/index.js

@@ -104,6 +104,8 @@ var react_1 = __importStar(require("react"));
 
 var drawer_1 = __importDefault(require("antd/lib/drawer"));
 
+var isFunction_1 = __importDefault(require("lodash/isFunction"));
+
 var classnames_1 = __importDefault(require("classnames"));
 
 var ButtonDrawer = function ButtonDrawer(props, ref) {
@@ -155,7 +157,7 @@ var ButtonDrawer = function ButtonDrawer(props, ref) {
     title: title,
     onClose: closeDrawer,
     visible: drawerVisible
-  }, restProps), react_1["default"].cloneElement(children, {
+  }, restProps), isFunction_1["default"](children) ? children(actionRef.current) : react_1["default"].cloneElement(children, {
     drawerAction: actionRef.current
   })));
 };

package/lib/index.d.ts

@@ -54,8 +54,6 @@ export type { LabelTreeSelectProps } from './label-tree-select';
 export { default as LabelTreeSelect } from './label-tree-select';
 export type { LabelCustomizeRangePickerProps } from './label-customize-range-picker';
 export { default as LabelCustomizeRangePicker } from './label-customize-range-picker';
-export type { LabelDescItemProps } from './label-desc-item';
-export { default as LabelDescItem } from './label-desc-item';
 export type { RichTextEditorProps } from './rich-text-editor';
 export { default as RichTextEditor } from './rich-text-editor';
 export { default as beautifulDnd } from './beautiful-dnd';

package/lib/index.js

@@ -265,15 +265,6 @@ Object.defineProperty(exports, "LabelCustomizeRangePicker", {
   }
 });
 
-var label_desc_item_1 = require("./label-desc-item");
-
-Object.defineProperty(exports, "LabelDescItem", {
-  enumerable: true,
-  get: function get() {
-    return label_desc_item_1["default"];
-  }
-});
-
 var rich_text_editor_1 = require("./rich-text-editor");
 
 Object.defineProperty(exports, "RichTextEditor", {

package/lib/label-customize-range-picker/defaultRadioList.d.ts

@@ -0,0 +1,8 @@
+import type { Moment } from 'moment';
+export declare type RadioListType = {
+    key: string | number;
+    text: string;
+    value: [Moment, Moment];
+};
+declare const defaultRadioList: RadioListType[];
+export default defaultRadioList;

package/lib/label-customize-range-picker/defaultRadioList.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var moment_1 = __importDefault(require("moment"));
+
+var now = moment_1["default"]();
+var TODAY = 1;
+var YESTERDAY = 2;
+var WEEK = 3;
+var LAST_WEEK = 4;
+var MONTH = 5;
+var LAST_MONTH = 6;
+var QUARTER = 7;
+var LAST_QUARTER = 8;
+var BEFORE_7_DAY = 9;
+var BEFORE_14_DAY = 10;
+var BEFORE_30_DAY = 11;
+var BEFORE_90_DAY = 12;
+var BEFORE_180_DAY = 13;
+var BEFORE_365_DAY = 14;
+var defaultRadioList = [{
+  key: TODAY,
+  text: '今日',
+  value: [now, now]
+}, {
+  key: YESTERDAY,
+  text: '昨日',
+  value: [now.clone().subtract(1, 'day'), now.clone().subtract(1, 'day').endOf('day')]
+}, {
+  key: WEEK,
+  text: '本周',
+  value: [now.clone().startOf('week'), now.clone().endOf('week')]
+}, {
+  key: LAST_WEEK,
+  text: '上周',
+  value: [now.clone().subtract(1, 'week').startOf('week'), now.clone().subtract(1, 'week').endOf('week')]
+}, {
+  key: MONTH,
+  text: '本月',
+  value: [now.clone().startOf('month'), now.clone().endOf('month')]
+}, {
+  key: LAST_MONTH,
+  text: '上月',
+  value: [now.clone().subtract(1, 'month').startOf('month'), now.clone().subtract(1, 'month').endOf('month')]
+}, {
+  key: QUARTER,
+  text: '本季度',
+  value: [now.clone().startOf('quarter'), now.clone().endOf('quarter')]
+}, {
+  key: LAST_QUARTER,
+  text: '上季度',
+  value: [now.clone().subtract(1, 'quarter').startOf('quarter'), now.clone().subtract(1, 'quarter').endOf('quarter')]
+}, {
+  key: BEFORE_7_DAY,
+  text: '最近7天',
+  value: [now.clone().subtract(6, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_14_DAY,
+  text: '最近14天',
+  value: [now.clone().subtract(13, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_30_DAY,
+  text: '最近30天',
+  value: [now.clone().subtract(29, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_90_DAY,
+  text: '最近90天',
+  value: [now.clone().subtract(89, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_180_DAY,
+  text: '最近180天',
+  value: [now.clone().subtract(179, 'day').startOf('day'), now.endOf('day')]
+}, {
+  key: BEFORE_365_DAY,
+  text: '最近365天',
+  value: [now.clone().subtract(364, 'day').startOf('day'), now.endOf('day')]
+}];
+exports["default"] = defaultRadioList;

package/lib/label-customize-range-picker/index.d.ts

@@ -1,15 +1,12 @@
-import { dateTypeEnum } from './getDateScope';
+import type { Moment } from 'moment';
 import type { LabelRangePickerProps } from '../label-range-picker';
 export declare type RadioListType = {
-    key: dateTypeEnum;
+    key: string | number;
     text: string;
+    value: [Moment, Moment];
 };
 export interface LabelCustomizeRangePickerProps extends LabelRangePickerProps {
-    customizeTimeList?: dateTypeEnum[];
     radioList?: RadioListType[];
 }
-declare const LabelCustomizeRangePicker: {
-    (props: LabelCustomizeRangePickerProps): JSX.Element;
-    dateTypeEnum: typeof dateTypeEnum;
-};
+declare const LabelCustomizeRangePicker: (props: LabelCustomizeRangePickerProps) => JSX.Element;
 export default LabelCustomizeRangePicker;

package/lib/label-customize-range-picker/index.js

@@ -108,16 +108,13 @@ var checkbox_1 = __importDefault(require("antd/lib/checkbox"));
 
 var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
 
-var getRadioList_1 = __importDefault(require("./getRadioList"));
+var defaultRadioList_1 = __importDefault(require("./defaultRadioList"));
 
 var label_range_picker_1 = __importDefault(require("../label-range-picker"));
 
-var getDateScope_1 = require("./getDateScope");
-
 var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
-  var customizeTimeList = props.customizeTimeList,
-      radioList = props.radioList,
-      options = __rest(props, ["customizeTimeList", "radioList"]);
+  var radioList = props.radioList,
+      options = __rest(props, ["radioList"]);
 
   var _a = __read(useControllableValue_1["default"](props), 2),
       date = _a[0],
@@ -131,12 +128,9 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
       radioKey = _c[0],
       setRadioKey = _c[1];
 
-  var _d = getDateScope_1.useDateScope(),
-      dateScopeMap = _d.dateScopeMap,
-      dateScopeList = _d.dateScopeList;
-
+  var dataSource = radioList !== null && radioList !== void 0 ? radioList : defaultRadioList_1["default"];
   react_1.useEffect(function () {
-    var foundItem = dateScopeList.find(function (item) {
+    var foundItem = dataSource.find(function (item) {
       if (!date) return false;
 
       var _a = __read(item.value, 2),
@@ -169,13 +163,13 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
   var onRadioChange = function onRadioChange(event) {
     var value = event.target.value;
     setRadioKey(value);
-    setDate(dateScopeMap[value]);
+    var selectRadioInfo = dataSource.find(function (item) {
+      return item.key === value;
+    });
+    setDate(selectRadioInfo === null || selectRadioInfo === void 0 ? void 0 : selectRadioInfo.value);
   };
 
-  var list = radioList !== null && radioList !== void 0 ? radioList : getRadioList_1["default"]().filter(function (item) {
-    return customizeTimeList === null || customizeTimeList === void 0 ? void 0 : customizeTimeList.includes(item.key);
-  });
-  var finallyRadioList = list.length ? list : getRadioList_1["default"]();
+  var list = radioList !== null && radioList !== void 0 ? radioList : defaultRadioList_1["default"];
 
   var panelRender = function panelRender(panel) {
     return react_1["default"].createElement("div", {
@@ -193,7 +187,7 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
     }, react_1["default"].createElement(radio_1["default"].Group, {
       onChange: onRadioChange,
       value: radioKey
-    }, finallyRadioList.map(function (_a) {
+    }, list.map(function (_a) {
       var key = _a.key,
           text = _a.text;
       return react_1["default"].createElement(radio_1["default"], {
@@ -211,5 +205,4 @@ var LabelCustomizeRangePicker = function LabelCustomizeRangePicker(props) {
   }, options));
 };
 
-LabelCustomizeRangePicker.dateTypeEnum = getDateScope_1.dateTypeEnum;
 exports["default"] = LabelCustomizeRangePicker;

package/lib/label-number-input/style/index.css

@@ -1,4 +1,9 @@
-.label-number-input {
+.label-number-input-warper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.label-number-input-warper .label-number-input {
   z-index: 1;
   width: 100%;
   height: 100%;
@@ -9,26 +14,21 @@
   border: 0;
   outline: 0;
 }
-.label-number-input:focus + label,
-.label-number-input:not([data-value='0']) + label {
+.label-number-input-warper .label-number-input:focus + label,
+.label-number-input-warper .label-number-input:not([data-value='0']) + label {
   transform: translateY(-8px) scale(0.8);
 }
-.label-number-input-field {
+.label-number-input-warper .label-number-input-field {
   height: 45px;
   overflow: hidden;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   transition: border 0.3s;
 }
-.label-number-input-focused {
+.label-number-input-warper .label-number-input-focused {
   border-color: #000;
 }
-.label-number-input-warper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.label-number-input-text {
+.label-number-input-warper .label-number-input-text {
   position: absolute;
   top: 12px;
   left: 15px;