@antscorp/antsomi-ui 1.3.3 → 1.3.5

package/es/assets/css/main.scss

@@ -0,0 +1,4 @@
+:root {
+  --primary-color: #005fb8;
+  --text-base-color: #222222;
+}

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

@@ -1,11 +1,4 @@
 /// <reference types="react" />
-export declare const Button: import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const Button: import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 };

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

@@ -0,0 +1,2 @@
+export { Flex } from 'antd';
+export type { FlexProps } from 'antd';

package/es/components/atoms/Flex/Flex.js

@@ -0,0 +1 @@
+export { Flex } from 'antd';

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

@@ -0,0 +1 @@
+export * from './Flex';

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

@@ -0,0 +1 @@
+export * from './Flex';

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

@@ -1,5 +1,6 @@
+/// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps } from 'antd';
+import { InputProps as AntdInputProps, Input as AntdInput } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -11,10 +12,17 @@ export interface InputProps extends AntdInputProps {
     errorMsg?: string;
     disableUndo?: boolean;
 }
-export declare const Input: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
     Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
     Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
-}, any, InputProps, never>;
+}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+    Group: React.FC<import("antd/es/input").GroupProps>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+}, {}> & {
+    DefaultInput: typeof AntdInput;
+};
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;

package/es/components/atoms/Input/Input.js

@@ -13,6 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 /* eslint-disable react/destructuring-assignment */
 // Libraries
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+// Types
+import { Input as AntdInput } from 'antd';
 // Components
 import { RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
@@ -89,4 +91,5 @@ OriginInput.defaultProps = {
 };
 export const Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;
+Input.DefaultInput = AntdInput;
 export const { TextArea } = StyledInput;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const Popover: import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
-    _InternalPanelDoNotUseOrYouWillBeFired: typeof import("antd/es/popover/PurePanel").default;
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 };

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

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const Progress: import("react").FC<import("antd").ProgressProps>;
+export declare const Progress: import("react").ForwardRefExoticComponent<import("antd").ProgressProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const Radio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").RadioProps & import("react").RefAttributes<HTMLElement>> & {
+export declare const Radio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").RadioProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
     Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
-    Button: import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<any>>;
+    Button: import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>>;
 }, any, {}, never>;
-export declare const RadioButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<any>>, any, {}, never>;
+export declare const RadioButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>>, any, {}, never>;
 export declare const RadioGroupSub: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>, any, {}, never>;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
-export interface SliderProps extends SliderSingleProps {
+export interface SliderProps extends Omit<SliderSingleProps, 'tooltipVisible'> {
+    tooltipVisible?: boolean | 'default';
 }
 export declare const Slider: React.FC<SliderProps | SliderRangeProps>;

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

@@ -1,30 +1,23 @@
-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';
+import { omit } from 'lodash';
 export const Slider = memo(props => {
-    const { range, value, min = 0, max = 0 } = props, restOf = __rest(props, ["range", "value", "min", "max"]);
+    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 },
-            React.createElement(AntdSlider, Object.assign({ min: min, max: max, value: value }, restOf, { marks: { 0: ' ' } }))));
+        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, null,
-        React.createElement(AntdSlider, Object.assign({}, props))));
+    return (React.createElement(SliderWrapper, { className: className },
+        React.createElement(AntdSlider, Object.assign({}, restProps))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
+export interface SliderProps extends SliderSingleProps {
+}
+export declare const SliderV2: React.FC<SliderProps | SliderRangeProps>;

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

@@ -0,0 +1,23 @@
+// Libraries
+import React, { useState } from 'react';
+// Antd Components
+import { Slider as AntdSlider } from 'antd';
+// React.FC<SliderProps>
+export const SliderV2 = props => {
+    const [value, setValue] = useState(0);
+    // console.log('sliderRef:: ', sliderRef);
+    // const min = props.min || 0;
+    // const max = props.max || 100;
+    const { min, max, onChange, styles, range } = props;
+    if (min && max && min < 0 && max > 0 && !range) {
+        const sliderWidth = max - min;
+        const leftTrackPosition = `${(Math.abs(value > 0 ? min : min - value) / sliderWidth) * 100}%`;
+        const sliderTrackWidth = `${(Math.abs(value) / sliderWidth) * 100}%`;
+        return (React.createElement(AntdSlider, Object.assign({ value: value, onChange: value => {
+                setValue(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: { 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.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/Spin/Spin.d.ts

@@ -1,9 +1,10 @@
+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): JSX.Element;
+    (props: TSpinProps): React.JSX.Element;
     defaultProps: {};
 };

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

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

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

@@ -1,4 +1 @@
-/// <reference types="react" />
-export declare const Statistic: import("react").FC<import("antd").StatisticProps> & {
-    Countdown: import("react").NamedExoticComponent<import("antd").CountdownProps>;
-};
+export declare const Statistic: import("antd/es/statistic").CompoundedStatistic;

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

@@ -29,4 +29,7 @@ export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
 export { ScrollBox } from './ScrollBox';
+export { Rate } from './Rate';
+export { SliderV2 } from './SliderV2';
+export * from './Flex';
 export type { SliderProps } from './Slider';

package/es/components/atoms/index.js

@@ -29,3 +29,6 @@ export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
 export { ScrollBox } from './ScrollBox';
+export { Rate } from './Rate';
+export { SliderV2 } from './SliderV2';
+export * from './Flex';

package/es/components/common/ConfigProvider/ConfigProvider.d.ts

@@ -1,5 +1,6 @@
 import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-provider';
 import React, { ReactNode } from 'react';
+import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import { TLocale } from '@antscorp/antsomi-ui/es/types';
 interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
     children?: ReactNode;

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -17,6 +17,7 @@ import React, { useEffect } from 'react';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Style
 import { GlobalStyle } from './GlobalStyle';
+import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // Initialize languages
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -10,7 +10,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
@@ -486,5 +486,42 @@ export const GlobalStyle = () => {
       .ant-message {
         z-index: 999999 !important;
       }
+
+      /* Collapse */
+      .antsomi-collapse-header {
+        font-size: 14px;
+      }
+
+      .antsomi-collapse {
+        &.antsomi-collapse-borderless {
+          border-bottom: 1px solid ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.gray5};
+        }
+
+        > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
+          transition: all 200ms;
+        }
+      }
+
+      /* Switch */
+      .antsomi-switch {
+        border: 2px solid ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary} !important;
+
+        &.antsomi-switch-checked {
+          > .antsomi-switch-handle {
+            &::before {
+              background-color: ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.bw0} !important;
+            }
+          }
+        }
+      }
+
+      /* Tabs */
+      .antsomi-tabs {
+        .antsomi-tabs-tab {
+          &.antsomi-tabs-tab-active {
+            font-weight: bold;
+          }
+        }
+      }
     ` }));
 };

package/es/components/icons/ArrowGrowIcon.d.ts

@@ -1 +1,2 @@
-export declare const ArrowGrowIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const ArrowGrowIcon: (props: any) => React.JSX.Element;

package/es/components/icons/AudioRecordIcon.d.ts

@@ -1 +1,2 @@
-export declare const AudioRecordIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const AudioRecordIcon: (props: any) => React.JSX.Element;

package/es/components/icons/BugIcon.d.ts

@@ -1 +1,2 @@
-export declare const BugIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const BugIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CameraIcon.d.ts

@@ -1 +1,2 @@
-export declare const CameraIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CameraIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CaptureIcon.d.ts

@@ -1 +1,2 @@
-export declare const CaptureIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CaptureIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CheckSlimIcon.d.ts

@@ -1 +1,2 @@
-export declare const CheckSlimIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CheckSlimIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CloseIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const CloseIcon: ({ ...props }: {
     [x: string]: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/es/components/icons/CommentIcon.d.ts

@@ -1 +1,2 @@
-export declare const CommentIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CommentIcon: (props: any) => React.JSX.Element;

package/es/components/icons/EventIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const EventIcon: ({ ...props }: {
     [x: string]: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/es/components/icons/FreeDrawIcon.d.ts

@@ -1 +1,2 @@
-export declare const FreeDrawIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const FreeDrawIcon: (props: any) => React.JSX.Element;

package/es/components/icons/GPTIcon.d.ts

@@ -1 +1,2 @@
-export declare const GPTIcon: () => JSX.Element;
+import React from 'react';
+export declare const GPTIcon: () => React.JSX.Element;

package/es/components/icons/GPTIconV2.d.ts

@@ -1 +1,2 @@
-export declare const GPTIconV2: () => JSX.Element;
+import React from 'react';
+export declare const GPTIconV2: () => React.JSX.Element;

package/es/components/icons/GPTIconV3.d.ts

@@ -1 +1,2 @@
-export declare const GPTIconV3: (props: any) => JSX.Element;
+import React from 'react';
+export declare const GPTIconV3: (props: any) => React.JSX.Element;

package/es/components/icons/HighlightIcon.d.ts

@@ -1 +1,2 @@
-export declare const HighlightIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const HighlightIcon: (props: any) => React.JSX.Element;

package/es/components/icons/IdeaIcon.d.ts

@@ -1 +1,2 @@
-export declare const IdeaIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const IdeaIcon: (props: any) => React.JSX.Element;

package/es/components/icons/InvisibleIcon.d.ts

@@ -1 +1,2 @@
-export declare const InvisibleIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const InvisibleIcon: (props: any) => React.JSX.Element;

package/es/components/icons/MuteIcon.d.ts

@@ -1 +1,2 @@
-export declare const MuteIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const MuteIcon: (props: any) => React.JSX.Element;

package/es/components/icons/OpenUrlIcon.d.ts

@@ -1 +1,2 @@
-export declare const OpenUrlIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const OpenUrlIcon: (props: any) => React.JSX.Element;

package/es/components/icons/PauseIcon.d.ts

@@ -1 +1,2 @@
-export declare const PauseIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const PauseIcon: (props: any) => React.JSX.Element;

package/es/components/icons/PlaneIcon.d.ts

@@ -1 +1,2 @@
-export declare const PlaneIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const PlaneIcon: (props: any) => React.JSX.Element;

package/es/components/icons/RequestIcon.d.ts

@@ -1 +1,2 @@
-export declare const RequestIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const RequestIcon: (props: any) => React.JSX.Element;

package/es/components/icons/StopRecordIcon.d.ts

@@ -1 +1,2 @@
-export declare const StopRecordIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const StopRecordIcon: (props: any) => React.JSX.Element;

package/es/components/icons/UserIcon.d.ts

@@ -1 +1,2 @@
-export declare const UserIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const UserIcon: (props: any) => React.JSX.Element;

package/es/components/icons/VerticalDotsIcon.d.ts

@@ -1 +1,2 @@
-export declare const VerticalDotsIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const VerticalDotsIcon: (props: any) => React.JSX.Element;

package/es/components/icons/WarningIcon.d.ts

@@ -1 +1,2 @@
-export declare const WarningIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const WarningIcon: (props: any) => React.JSX.Element;

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

@@ -1,6 +1,7 @@
+import React from 'react';
 import { IImageEditorProps } from './types';
 declare const CaptureScreen: {
-    (props: IImageEditorProps): JSX.Element;
+    (props: IImageEditorProps): React.JSX.Element;
     defaultProps: {
         isOpen: boolean;
         src: string;

package/es/components/molecules/CaptureScreen/components/CommentBox/CommentBox.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { CommentBoxProps } from './types';
 declare const CommentBox: {
-    (props: CommentBoxProps): JSX.Element;
+    (props: CommentBoxProps): React.JSX.Element;
     defaultProps: {
         info: {
             id: string;

package/es/components/molecules/CaptureScreen/components/Cursor/Cursor.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CursorProps } from './types';
-declare const Cursor: (props: CursorProps) => JSX.Element | null;
+declare const Cursor: (props: CursorProps) => React.JSX.Element | null;
 export { Cursor };

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 @@
+// 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/ColorPicker/CustomPicker/index.js

@@ -16,10 +16,8 @@ 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';
-// Molecules
-import { InputNumber } from '../../InputNumber';
 // Styled
-import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, } from './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';
@@ -41,14 +39,15 @@ const rgbaInputStyling = {
 const wrapperStyling = {
     display: 'flex',
     alignItems: 'center',
-    margin: '15px 8px 0',
+    // margin: '15px 8px 0',
+    marginTop: '15px',
     width: '100%',
 };
 const styleContainAlpha = {
     display: 'flex',
     flexDirection: 'column',
     marginLeft: 10,
-    marginRight: 10,
+    // marginRight: 10,
     width: '100%',
 };
 const CustomPicker = props => {
@@ -79,15 +78,7 @@ const CustomPicker = props => {
             } },
             React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
         React.createElement("div", { style: wrapperStyling },
-            React.createElement(PreviewColorPoint, null,
-                React.createElement("div", { style: {
-                        backgroundColor: props.color,
-                        position: 'absolute',
-                        top: '0px',
-                        right: '0px',
-                        bottom: '0px',
-                        left: '0px',
-                    } })),
+            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 }))),
@@ -102,16 +93,16 @@ const CustomPicker = props => {
             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(InputNumber, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('r', value) }),
+                    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(InputNumber, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('g', value) }),
+                    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(InputNumber, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('b', value) }),
+                    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(InputNumber, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('a', value) }),
+                    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"))),

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

@@ -1,5 +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, {}, 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>;