@antscorp/antsomi-ui 1.3.3-beta.86 → 1.3.3-beta.87

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const Collapse: import("react").ForwardRefExoticComponent<import("antd").CollapseProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Panel: import("react").ForwardRefExoticComponent<import("antd").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;
-};
+import React from 'react';
+export declare const Collapse: React.ForwardRefExoticComponent<import("antd").CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.ForwardRefExoticComponent<import("antd").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
+};

package/es/components/molecules/Collapse/Collapse.js

@@ -1,2 +1,11 @@
-import { Collapse as AntdCollapse } from 'antd';
-export const Collapse = AntdCollapse;
+// Libraries
+import React from 'react';
+import { Collapse as AntdCollapse } from 'antd';
+// Icons
+import { Icon } from '../../atoms';
+export const Collapse = AntdCollapse;
+Collapse.defaultProps = {
+    expandIcon({ isActive }) {
+        return (React.createElement(Icon, { type: "icon-ants-expand-more", size: 24, style: { transform: `rotate(${isActive ? -180 : 0}deg)`, color: '#666' } }));
+    },
+};

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

@@ -1 +1 @@
-export * from './Collapse';
+export * from './Collapse';

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

@@ -1 +1 @@
-export * from './Collapse';
+export * from './Collapse';

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

@@ -1 +1 @@
-export declare const ChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const ChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/es/components/molecules/ColorPicker/ChromePicker/index.js

@@ -1,3 +1,3 @@
-// Styled
-import { StyledChromePicker } from './styled';
-export const ChromePicker = StyledChromePicker;
+// Styled
+import { StyledChromePicker } from './styled';
+export const ChromePicker = StyledChromePicker;

package/es/components/molecules/ColorPicker/ChromePicker/styled.d.ts

@@ -1 +1 @@
-export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/es/components/molecules/ColorPicker/ChromePicker/styled.js

@@ -1,15 +1,15 @@
-// Libraries
-import styled from 'styled-components';
-// Components
-import { ChromePicker } from 'react-color';
-export const StyledChromePicker = styled(ChromePicker) `
-  padding: 0px !important;
-  --tw-shadow: 0 0 #0000 !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
-
-  div + div {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-  }
-`;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { ChromePicker } from 'react-color';
+export const StyledChromePicker = styled(ChromePicker) `
+  padding: 0px !important;
+  --tw-shadow: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow) !important;
+
+  div + div {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+`;

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

@@ -1,2 +1,2 @@
-declare const _default: any;
-export default _default;
+declare const _default: any;
+export default _default;

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -1,117 +1,117 @@
-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;
-};
-/* eslint-disable react/destructuring-assignment */
-// Libraries
-import React, { useState } from 'react';
-import { CustomPicker as CustomPickerHOC } from 'react-color';
-import { Saturation, Hue, Alpha, EditableInput } from 'react-color/lib/components/common';
-// Atoms
-import { Button, Divider, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
-// Styled
-import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, InputNumberWrapper, } from './styled';
-// Utils
-import { handleError } from '@antscorp/antsomi-ui/es/utils';
-const PATH = '@antscorp/antsomi-ui/es/components/molecules/ColorPicker/CustomPicker/index.tsx';
-const rgbaStyling = {
-    display: 'flex',
-    position: 'relative',
-    flexDirection: 'column',
-    alignItems: 'center',
-};
-const rgbaInputStyling = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    marginLeft: 5,
-    marginRight: 5,
-    gap: '8px',
-};
-const wrapperStyling = {
-    display: 'flex',
-    alignItems: 'center',
-    // margin: '15px 8px 0',
-    marginTop: '15px',
-    width: '100%',
-};
-const styleContainAlpha = {
-    display: 'flex',
-    flexDirection: 'column',
-    marginLeft: 10,
-    // marginRight: 10,
-    width: '100%',
-};
-const CustomPicker = props => {
-    var _a, _b, _c, _d;
-    // Props
-    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
-    // State
-    const [isShowRgbaInput, setShowRgbaInput] = useState(true);
-    const onChangeRgbaColor = (key, value) => {
-        try {
-            const draftRgb = Object.assign(Object.assign({}, props.rgb), { [key]: value });
-            onChange(`rgba(${draftRgb.r}, ${draftRgb.g}, ${draftRgb.b}, ${draftRgb.a})`);
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'onChangeRgbaColor',
-                args: {},
-            });
-        }
-    };
-    return (React.createElement(CustomPickerWrapper, { className: className, style: style },
-        React.createElement("div", { style: {
-                position: 'relative',
-                overflow: 'hidden',
-                width: '100%',
-                height: 143,
-            } },
-            React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
-        React.createElement("div", { style: wrapperStyling },
-            React.createElement(PreviewColorPoint, { "$color": props.color }),
-            React.createElement("div", { style: styleContainAlpha },
-                React.createElement("div", { style: { position: 'relative', width: '100%', height: 12 } },
-                    React.createElement(Hue, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))),
-                React.createElement("div", { style: {
-                        position: 'relative',
-                        width: '100%',
-                        height: 12,
-                        marginTop: 10,
-                    } },
-                    React.createElement(Alpha, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))))),
-        React.createElement("div", { style: Object.assign(Object.assign({}, wrapperStyling), { paddingBottom: 15 }) },
-            React.createElement(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }),
-            isShowRgbaInput ? (React.createElement("div", { style: rgbaInputStyling },
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "R")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "G")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
-                React.createElement(EditableInput, { value: props.color, onChange: onChange }),
-                React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
-            React.createElement(Button, { onClick: () => {
-                    setShowRgbaInput(true);
-                    onChange('rgba(0, 0, 0, 0)');
-                } }, "Clear")),
-        presetColors ? (React.createElement("div", null,
-            React.createElement(Divider, null),
-            presetColors)) : null));
-};
-export default CustomPickerHOC(CustomPicker);
+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;
+};
+/* eslint-disable react/destructuring-assignment */
+// Libraries
+import React, { useState } from 'react';
+import { CustomPicker as CustomPickerHOC } from 'react-color';
+import { Saturation, Hue, Alpha, EditableInput } from 'react-color/lib/components/common';
+// Atoms
+import { Button, Divider, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, InputNumberWrapper, } from './styled';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/ColorPicker/CustomPicker/index.tsx';
+const rgbaStyling = {
+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
+    alignItems: 'center',
+};
+const rgbaInputStyling = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    marginLeft: 5,
+    marginRight: 5,
+    gap: '8px',
+};
+const wrapperStyling = {
+    display: 'flex',
+    alignItems: 'center',
+    // margin: '15px 8px 0',
+    marginTop: '15px',
+    width: '100%',
+};
+const styleContainAlpha = {
+    display: 'flex',
+    flexDirection: 'column',
+    marginLeft: 10,
+    // marginRight: 10,
+    width: '100%',
+};
+const CustomPicker = props => {
+    var _a, _b, _c, _d;
+    // Props
+    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
+    // State
+    const [isShowRgbaInput, setShowRgbaInput] = useState(true);
+    const onChangeRgbaColor = (key, value) => {
+        try {
+            const draftRgb = Object.assign(Object.assign({}, props.rgb), { [key]: value });
+            onChange(`rgba(${draftRgb.r}, ${draftRgb.g}, ${draftRgb.b}, ${draftRgb.a})`);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeRgbaColor',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(CustomPickerWrapper, { className: className, style: style },
+        React.createElement("div", { style: {
+                position: 'relative',
+                overflow: 'hidden',
+                width: '100%',
+                height: 143,
+            } },
+            React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
+        React.createElement("div", { style: wrapperStyling },
+            React.createElement(PreviewColorPoint, { "$color": props.color }),
+            React.createElement("div", { style: styleContainAlpha },
+                React.createElement("div", { style: { position: 'relative', width: '100%', height: 12 } },
+                    React.createElement(Hue, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))),
+                React.createElement("div", { style: {
+                        position: 'relative',
+                        width: '100%',
+                        height: 12,
+                        marginTop: 10,
+                    } },
+                    React.createElement(Alpha, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))))),
+        React.createElement("div", { style: Object.assign(Object.assign({}, wrapperStyling), { paddingBottom: 15 }) },
+            React.createElement(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }),
+            isShowRgbaInput ? (React.createElement("div", { style: rgbaInputStyling },
+                React.createElement("div", { style: rgbaStyling },
+                    React.createElement(InputNumberWrapper, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }),
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "R")),
+                React.createElement("div", { style: rgbaStyling },
+                    React.createElement(InputNumberWrapper, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }),
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "G")),
+                React.createElement("div", { style: rgbaStyling },
+                    React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
+                React.createElement("div", { style: rgbaStyling },
+                    React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
+                React.createElement(EditableInput, { value: props.color, onChange: onChange }),
+                React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
+            React.createElement(Button, { onClick: () => {
+                    setShowRgbaInput(true);
+                    onChange('rgba(0, 0, 0, 0)');
+                } }, "Clear")),
+        presetColors ? (React.createElement("div", null,
+            React.createElement(Divider, null),
+            presetColors)) : null));
+};
+export default CustomPickerHOC(CustomPicker);

package/es/components/molecules/ColorPicker/CustomPicker/styled.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-export declare const CustomPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SaturationPointer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HuePointer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {
-    $color?: string | undefined;
-}, never>;
-export declare const EditableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputNumberWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../InputNumber").InputNumberProps>, any, {}, never>;
+/// <reference types="react" />
+export declare const CustomPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SaturationPointer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HuePointer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {
+    $color?: string | undefined;
+}, never>;
+export declare const EditableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputNumberWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../InputNumber").InputNumberProps>, any, {}, never>;

package/es/components/molecules/ColorPicker/CustomPicker/styled.js

@@ -1,104 +1,104 @@
-var _a, _b, _c, _d, _e, _f;
-// Libraries
-import styled from 'styled-components';
-// Components
-import { InputNumber } from '../../InputNumber';
-// Svg
-import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const CustomPickerWrapper = styled.div `
-  position: relative;
-  width: 260px;
-`;
-export const SaturationPointer = styled.div `
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.2);
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-  box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px;
-  box-sizing: border-box;
-  transform: translate(-10px, -10px);
-`;
-export const HuePointer = styled.div `
-  width: 14px;
-  height: 14px;
-  border-radius: 6px;
-  background-color: rgb(248, 248, 248);
-  transform: translate(-6px, -1px);
-  box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px;
-`;
-export const PreviewColorPoint = styled.div `
-  width: 36px;
-  height: 36px;
-  background: ${({ $color }) => `linear-gradient(${$color ? `${$color}, ${$color}` : '#fff, #fff'}), url(${TransparentSvg}) repeat`};
-  border-radius: 9999px;
-  flex-shrink: 0;
-`;
-export const EditableInputWrapper = styled.div `
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  input {
-    height: 30px;
-    width: 100%;
-    border-style: none;
-    border-radius: 0px;
-    padding-left: 5px;
-    padding-right: 5px;
-    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);
-
-    &::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};
-    }
-
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    outline-style: none !important;
-
-    &:active,
-    &:focus {
-      background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0};
-      --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 === null || THEME === void 0 ? void 0 : 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);
-    }
-  }
-`;
-export const InputNumberWrapper = styled(InputNumber) `
-  & > div {
-    width: unset !important;
-    padding: 0;
-  }
-
-  input {
-    padding: 0 6px !important;
-    text-align: center !important;
-  }
-`;
+var _a, _b, _c, _d, _e, _f;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { InputNumber } from '../../InputNumber';
+// Svg
+import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const CustomPickerWrapper = styled.div `
+  position: relative;
+  width: 260px;
+`;
+export const SaturationPointer = styled.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
+`;
+export const HuePointer = styled.div `
+  width: 14px;
+  height: 14px;
+  border-radius: 6px;
+  background-color: rgb(248, 248, 248);
+  transform: translate(-6px, -1px);
+  box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px;
+`;
+export const PreviewColorPoint = styled.div `
+  width: 36px;
+  height: 36px;
+  background: ${({ $color }) => `linear-gradient(${$color ? `${$color}, ${$color}` : '#fff, #fff'}), url(${TransparentSvg}) repeat`};
+  border-radius: 9999px;
+  flex-shrink: 0;
+`;
+export const EditableInputWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  input {
+    height: 30px;
+    width: 100%;
+    border-style: none;
+    border-radius: 0px;
+    padding-left: 5px;
+    padding-right: 5px;
+    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);
+
+    &::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};
+    }
+
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    outline-style: none !important;
+
+    &:active,
+    &:focus {
+      background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0};
+      --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 === null || THEME === void 0 ? void 0 : 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);
+    }
+  }
+`;
+export const InputNumberWrapper = styled(InputNumber) `
+  & > div {
+    width: unset !important;
+    padding: 0;
+  }
+
+  input {
+    padding: 0 6px !important;
+    text-align: center !important;
+  }
+`;

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ColorResult } from 'react-color';
-interface SketchPickerProps {
-    presetColors?: any[];
-    color: string;
-    onChange?: (color: ColorResult) => void;
-    onChangeComplete?: (color: ColorResult) => void;
-}
-export declare const SketchPicker: React.FC<SketchPickerProps>;
-export {};
+import React from 'react';
+import { ColorResult } from 'react-color';
+interface SketchPickerProps {
+    presetColors?: any[];
+    color: string;
+    onChange?: (color: ColorResult) => void;
+    onChangeComplete?: (color: ColorResult) => void;
+}
+export declare const SketchPicker: React.FC<SketchPickerProps>;
+export {};

package/es/components/molecules/ColorPicker/SketchPicker/index.js

@@ -1,5 +1,5 @@
-// Libraries
-import React from 'react';
-// Styled
-import { SketchPickerWrapper } from './styled';
-export const SketchPicker = props => (React.createElement(SketchPickerWrapper, Object.assign({}, props)));
+// Libraries
+import React from 'react';
+// Styled
+import { SketchPickerWrapper } from './styled';
+export const SketchPicker = props => (React.createElement(SketchPickerWrapper, Object.assign({}, props)));

package/es/components/molecules/ColorPicker/SketchPicker/styled.d.ts

@@ -1 +1 @@
-export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/es/components/molecules/ColorPicker/SketchPicker/styled.js

@@ -1,10 +1,10 @@
-// Libraries
-import styled from 'styled-components';
-// Components
-import { SketchPicker } from 'react-color';
-export const SketchPickerWrapper = styled(SketchPicker) `
-  --tw-shadow: 0 0 #0000 !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
-  padding: 0px !important;
-`;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { SketchPicker } from 'react-color';
+export const SketchPickerWrapper = styled(SketchPicker) `
+  --tw-shadow: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow) !important;
+  padding: 0px !important;
+`;

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

@@ -1,13 +1,13 @@
-import React, { ReactNode } from 'react';
-export interface ColorPickerProps {
-    className?: string;
-    color?: string;
-    presetColors?: any[] | ReactNode;
-    defaultColor?: string;
-    icon?: React.ReactNode | string;
-    onChange?: (color: string) => void;
-    showInput?: boolean;
-    positionInput?: 'right' | 'left';
-    style?: React.CSSProperties;
-}
-export declare const ColorPicker: React.FC<ColorPickerProps>;
+import React, { ReactNode } from 'react';
+export interface ColorPickerProps {
+    className?: string;
+    color?: string;
+    presetColors?: any[] | ReactNode;
+    defaultColor?: string;
+    icon?: React.ReactNode | string;
+    onChange?: (color: string) => void;
+    showInput?: boolean;
+    positionInput?: 'right' | 'left';
+    style?: React.CSSProperties;
+}
+export declare const ColorPicker: React.FC<ColorPickerProps>;