@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.2

package/es/components/molecules/ChatBox/MessageItem.js

@@ -1,66 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeHighlight from 'rehype-highlight';
-import 'highlight.js/styles/vs2015.css';
-// Atoms
-import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
-// Components
-import { GPTIconV3, UserIcon } from '@antscorp/antsomi-ui/es/components/icons';
-// Style
-import { MessageItemWrapper } from './styled';
-const { Text } = Typography;
-const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avatar, idx, isPlaceholder, renderType, }) => {
-    const isBot = role === "assistant" /* Role.Assistant */;
-    const [text, setText] = useState(isBot && doAnimation ? '' : content);
-    const contentRef = useRef();
-    const MAP_ICON = {
-        ["assistant" /* Role.Assistant */]: React.createElement(GPTIconV3, { className: clsx('icon', 'gpt') }),
-        ["user" /* Role.User */]: avatar ? (React.createElement("img", { className: clsx('avatar'), src: avatar, alt: "avatar" })) : (React.createElement(UserIcon, { className: clsx('icon', 'user') })),
-    };
-    useEffect(() => {
-        if (isBot && doAnimation) {
-            let i = 0;
-            setTimeout(() => {
-                const intervalId = setInterval(() => {
-                    const nextSpace = content.slice(i).indexOf(' ');
-                    i += nextSpace >= 0 ? nextSpace + 1 : content.length + 1;
-                    setText(content.slice(0, i));
-                    if (i > content.length) {
-                        clearInterval(intervalId);
-                        renderDone(idx);
-                    }
-                    scrollBody();
-                }, 20);
-                return () => clearInterval(intervalId);
-            }, 150);
-        }
-        else {
-            scrollBody();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isBot]);
-    const renderMarkdown = () => {
-        try {
-            const newContent = isPlaceholder ? (React.createElement("div", { className: "reactMarkDown" },
-                React.createElement("pre", null,
-                    React.createElement("code", null,
-                        React.createElement("span", null))))) : (React.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: "reactMarkDown" }, text));
-            contentRef.current = newContent;
-            return contentRef.current;
-        }
-        catch (error) {
-            return contentRef.current;
-        }
-    };
-    return (React.createElement(MessageItemWrapper, { className: clsx({ greyBg: isBot }) },
-        MAP_ICON[role],
-        renderType === 'markdown' ? (React.createElement("div", { className: isPlaceholder || (isBot && doAnimation && text.length < content.length)
-                ? 'ants-text-streaming'
-                : '' }, renderMarkdown())) : (React.createElement(Text, { className: isPlaceholder || (isBot && doAnimation && text !== content) ? 'ants-text-streaming' : '' }, isPlaceholder ? '' : text))));
-};
-MessageItem.defaultProps = {
-    renderType: 'markdown',
-};
-export default React.memo(MessageItem);

package/es/components/molecules/ChatBox/constants.d.ts

@@ -1,6 +0,0 @@
-import { Role } from './types';
-export declare const CONVERSATION: {
-    role: Role;
-    content: string;
-}[];
-export declare const LIMIT_MESSAGE = 10;

package/es/components/molecules/ChatBox/constants.js

@@ -1,51 +0,0 @@
-export const CONVERSATION = [
-    {
-        role: "assistant" /* Role.Assistant */,
-        content: 'Hi there! How can I help?',
-    },
-    {
-        role: "user" /* Role.User */,
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
-    },
-    {
-        role: "assistant" /* Role.Assistant */,
-        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
-    },
-    {
-        role: "user" /* Role.User */,
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
-    },
-    {
-        role: "assistant" /* Role.Assistant */,
-        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
-    },
-    {
-        role: "user" /* Role.User */,
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
-    },
-    {
-        role: "assistant" /* Role.Assistant */,
-        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
-    },
-    {
-        role: "user" /* Role.User */,
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
-    },
-    {
-        role: "assistant" /* Role.Assistant */,
-        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
-    },
-    {
-        role: "user" /* Role.User */,
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
-    },
-    {
-        role: "assistant" /* Role.Assistant */,
-        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
-    },
-    {
-        role: "user" /* Role.User */,
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
-    },
-];
-export const LIMIT_MESSAGE = 10;

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

@@ -1 +0,0 @@
-export { ChatBox } from './ChatBox';

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

@@ -1 +0,0 @@
-export { ChatBox } from './ChatBox';

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

@@ -1,10 +0,0 @@
-export declare const ChatBoxWrapper: import("styled-components").StyledComponent<"div", any, {
-    withoutBox?: boolean | undefined;
-}, never>;
-export declare const ChatBoxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChatBoxBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChatBoxFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MessageItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WarningWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TypingCursor: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,280 +0,0 @@
-var _a;
-// Libraries
-import styled from 'styled-components';
-// Constantsim
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const ChatBoxWrapper = styled.div `
-  box-sizing: border-box;
-  width: ${props => (props.withoutBox ? '100%' : '450px')};
-  min-height: ${props => (props.withoutBox ? '100%' : '300px')};
-  max-height: ${props => (props.withoutBox ? 'unset' : 'calc(100vh - 57px)')};
-  position: ${props => (props.withoutBox ? 'static' : 'fixed')};
-  right: 5px;
-  bottom: 0px;
-  z-index: 9999;
-
-  display: flex;
-  flex-direction: column;
-
-  font-family: Roboto, san-serif;
-  border: 1px solid #e5e5e5;
-`;
-export const ChatBoxHeader = styled.div `
-  flex: 0 0 50px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 0 10px 0 20px;
-  background: #fff;
-
-  .title {
-    font-size: 16px;
-  }
-
-  .close-btn {
-    border: none;
-    padding: 0;
-  }
-`;
-export const ChatBoxBody = styled.div `
-  flex: 1;
-  background: #fff;
-  // max-height: calc(100vh - 150px);
-  overflow: auto;
-
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  padding: 11px 0;
-
-  ::-webkit-scrollbar {
-    height: 1rem;
-    width: 0.5rem;
-  }
-  ::-webkit-scrollbar-thumb {
-    --tw-border-opacity: 1;
-    background-color: rgba(217, 217, 227, 0.8);
-    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
-    border-radius: 9999px;
-    border-width: 1px;
-  }
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-radius: 9999px;
-  }
-
-  // &::-webkit-scrollbar {
-  //   -webkit-appearance: none;
-  //   background-color: #eee;
-  //   width: 8px;
-  //   height: 8px;
-  // }
-  // &::-webkit-scrollbar-thumb {
-  //   background-color: rgba(0, 0, 0, 0.2);
-  //   -webkit-border-top-right-radius: 4px;
-  //   -webkit-border-bottom-right-radius: 4px;
-  //   -webkit-border-bottom-left-radius: 4px;
-  //   -webkit-border-top-left-radius: 4px;
-  //   border-top-right-radius: 4px;
-  //   border-bottom-right-radius: 4px;
-  //   border-bottom-left-radius: 4px;
-  //   border-top-left-radius: 4px;
-  // }
-`;
-export const ChatBoxFooter = styled.div `
-  background: #fff;
-`;
-export const MessageItemWrapper = styled.div `
-  margin: 0 11px;
-  padding: 10px;
-  border-radius: 3px;
-  background: transparent;
-
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  // text-align: justify;
-
-  &.greyBg {
-    background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
-  }
-
-  .icon {
-    min-width: 30px;
-    min-height: 30px;
-  }
-  .gpt {
-    background-image: url(/assets/images/gpt.png);
-  }
-  .user {
-    min-width: 24px;
-    min-height: 24px;
-  }
-  .avatar {
-    width: 30px;
-    height: 30px;
-    object-fit: contain;
-  }
-  .reactMarkDown {
-    white-space: pre-wrap;
-  }
-  .reactMarkDown * {
-    font-size: 12px;
-    line-height: 1.5;
-  }
-  .reactMarkDown > *:first-child {
-    margin-top: 0 !important;
-  }
-  .reactMarkDown ol {
-    padding-inline-start: 12px !important;
-  }
-  .reactMarkDown p,
-  .reactMarkDown ol,
-  .reactMarkDown ul {
-    margin: 0 !important;
-    margin-block: 0 !important;
-  }
-  .reactMarkDown ol,
-  .reactMarkDown ul {
-    line-height: 0 !important;
-  }
-  .reactMarkDown ol :not(ol):not(ul),
-  .reactMarkDown ul :not(ol):not(ul) {
-    line-height: 1.5 !important;
-  }
-
-  .typing {
-    overflow: hidden; /* Ensures the content is not revealed until the animation */
-    border-right: 0.15em solid orange; /* The typwriter cursor */
-    white-space: nowrap; /* Keeps the content on a single line */
-    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
-    letter-spacing: 0.15em; /* Adjust as needed */
-    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
-  }
-
-  @keyframes cursor-blink {
-    to {
-      visibility: hidden;
-    }
-  }
-
-  .ants-text-streaming > div {
-    white-space: pre-wrap;
-  }
-
-  .ants-text-streaming > div > :not(ol):not(ul):not(pre):last-child,
-  .ants-text-streaming > div > ol:last-child li:last-child,
-  .ants-text-streaming > div > ul:last-child li:last-child {
-    white-space: pre-wrap !important;
-  }
-  // .ants-text-streaming > div > pre:last-child code:last-child span:last-child {
-  //   white-space: nowrap !important;
-  // }
-
-  .ants-text-streaming > div > :not(ol):not(ul):not(pre):last-child:after,
-  .ants-text-streaming > div > ol:last-child > li:last-child > *:last-child:after,
-  .ants-text-streaming > div > pre:last-child > code:last-child > span:last-child:after,
-  .ants-text-streaming > div > ul:last-child > li:last-child:after {
-    -webkit-animation: cursor-blink 1s steps(5, start) infinite;
-    animation: cursor-blink 1s steps(5, start) infinite;
-    content: '▋';
-    margin-left: 0.25rem;
-    vertical-align: baseline;
-    line-height: 1.5;
-  }
-
-  // .mes-content,
-  // .mes-content * {
-  //   max-width: 100%;
-  //   overflow: auto;
-  //   font-size: 14px;
-  // }
-  // .mes-content > p:first-child {
-  //   margin-top: 0 !important;
-  // }
-  .mes-content pre {
-    ::-webkit-scrollbar {
-      height: 0.5rem;
-    }
-    ::-webkit-scrollbar-thumb {
-      --tw-border-opacity: 1;
-      background-color: rgba(217, 217, 227, 0.8);
-      border-color: rgba(255, 255, 255, var(--tw-border-opacity));
-      border-radius: 9999px;
-      border-width: 1px;
-    }
-    ::-webkit-scrollbar-track {
-      background-color: transparent;
-      border-radius: 9999px;
-    }
-  }
-  code {
-    white-space: pre-wrap;
-  }
-`;
-export const WarningWrapper = styled.div `
-  padding: 10px;
-  display: flex;
-  align-item: flex-start;
-  gap: 10px;
-  border: 1px solid #fec9c9;
-  background: #fec9c9;
-  margin: 0 10px;
-
-  .icon {
-    min-width: 18px;
-  }
-`;
-export const InputWrapper = styled.div `
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 15px 0 10px;
-  margin: 10px;
-
-  border: 1px solid #e5e5e5;
-  background: #fff;
-
-  .input {
-    border: none;
-    font-size: 12px;
-
-    &:focus {
-      outline: none !important;
-      box-shadow: none !important;
-    }
-  }
-  .submit-btn {
-    border: none;
-    padding: 0;
-    border-radius: 50%;
-    aspect-ratio: 1;
-    // border: 1px solid;
-    position: relative;
-    left: -3px;
-
-    &:focus {
-      outline: none !important;
-    }
-    &.disabled {
-      opacity: 0.65;
-    }
-  }
-  .icon {
-    flex: 0 0 24px;
-    position: relative;
-    left: 3px;
-  }
-`;
-export const TypingCursor = styled.div `
-  width: 3px;
-  height: 10px;
-  background: #000;
-  animation: cursor-blink 1.5s steps(2) infinite;
-  // animation:
-  //   typing 3.5s steps(40, end),
-  //   blink-caret .75s step-end infinite;
-`;

package/es/components/molecules/ChatBox/types.d.ts

@@ -1,32 +0,0 @@
-export declare const enum Role {
-    Assistant = "assistant",
-    User = "user"
-}
-export interface Message {
-    id: string;
-    role: Role;
-    content: string;
-    answering?: boolean;
-}
-export interface IChatBoxMessageProps extends Message {
-    role: Role;
-    content: string;
-    isTyping?: boolean;
-    isPlaceholder?: boolean;
-    scrollBody: Function;
-    renderDone: Function;
-    doAnimation: boolean;
-    answeringContent: string;
-    avatar?: string;
-    idx?: number;
-    renderType: 'text' | 'markdown';
-}
-export interface IChatBoxProps {
-    onClose?: Function;
-    withoutBox?: boolean;
-    domain: string;
-    userId: string | number;
-    token: string;
-    avatar?: string;
-    style?: Record<string, any>;
-}

package/es/components/molecules/ChatBox/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-/// <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>>;
-};

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

@@ -1,2 +0,0 @@
-import { Collapse as AntdCollapse } from 'antd';
-export const Collapse = AntdCollapse;

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

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

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-// 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.js

@@ -1,126 +0,0 @@
-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';
-// Molecules
-import { InputNumber } from '../../InputNumber';
-// Styled
-import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, } 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',
-    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, null,
-                React.createElement("div", { style: {
-                        backgroundColor: props.color,
-                        position: 'absolute',
-                        top: '0px',
-                        right: '0px',
-                        bottom: '0px',
-                        left: '0px',
-                    } })),
-            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(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(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(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(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(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,5 +0,0 @@
-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 EditableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;