@shoplflow/base 0.12.6 → 0.13.0

package/dist/index.d.mts

@@ -7,6 +7,9 @@ import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 import { $Values } from '@shoplflow/utils';
+import { Middleware } from '@floating-ui/react-dom';
+import { AutoPlacementOptions, Placement } from '@floating-ui/react';
+import { OffsetOptions } from '@floating-ui/core';
 
 declare type DomainType = 'SHOPL' | 'HADA';
 
@@ -524,6 +527,70 @@ declare const Callout: {
     Icon: ({ iconSource }: IconSourceProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface PopperProps extends PopperOptionProps {
+}
+interface PopperOptionProps {
+    width?: string;
+    height?: string;
+    /**
+     * popper의 offset을 설정합니다.
+     *
+     * Ref: https://floating-ui.com/docs/offset#offset
+     */
+    offset?: OffsetOptions;
+    /**
+     * popper가 열려있는지 여부를 결정합니다.
+     */
+    isOpen?: boolean;
+    /**
+     * 화면 뷰에 따라 자동으로 위치를 조정할 수 있습니다.
+     * floating ui의 autoPlacement 미들웨어를 사용합니다.
+     *
+     * Ref: https://floating-ui.com/docs/autoplacement
+     */
+    autoPlacement?: AutoPlacementOptions;
+    /**
+     * popper의 위치를 지정할 수 있습니다.
+     *
+     * Ref: https://floating-ui.com/docs/arrow#placement
+     */
+    placement?: Placement;
+    /**
+     * popper의 속성을 결정할 수 있습니다.
+     */
+    strategy?: 'absolute' | 'fixed';
+    /**
+     * floating ui의 middleware를 넣을 수 있습니다.
+     *
+     * Ref: https://floating-ui.com/docs/useFloating#middleware
+     */
+    middlewares?: Array<Middleware | null | undefined | false>;
+    /**
+     * floating ui의 animation을 넣을 수 있습니다.
+     * framer-motion의 animation을 사용합니다.
+     */
+    animation?: {
+        initial: Record<string, unknown>;
+        animate: Record<string, unknown>;
+        exit: Record<string, unknown>;
+    };
+    /**
+     * trigger할 요소를 설정합니다.
+     */
+    trigger: ReactNode;
+    /**
+     * pop할 요소를 설정합니다.
+     */
+    popper: ReactNode;
+}
+
+declare const Popper: ({ trigger, popper, isOpen, placement, offset: initialOffset, autoPlacement: initialAutoPlacement, strategy, middlewares, animation: initialAnimation, ...rest }: PopperProps) => react_jsx_runtime.JSX.Element;
+
+declare const StyledPopper: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & Pick<PopperOptionProps, "height" | "width">, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
 declare const IconSizeVariants: {
     readonly X_SMALL: "X_SMALL";
     readonly SMALL: "SMALL";
@@ -577,4 +644,4 @@ interface MinusBoxOptionProps {
 
 declare const MinusButton: React__default.ForwardRefExoticComponent<MinusBoxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -7,6 +7,9 @@ import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 import { $Values } from '@shoplflow/utils';
+import { Middleware } from '@floating-ui/react-dom';
+import { AutoPlacementOptions, Placement } from '@floating-ui/react';
+import { OffsetOptions } from '@floating-ui/core';
 
 declare type DomainType = 'SHOPL' | 'HADA';
 
@@ -524,6 +527,70 @@ declare const Callout: {
     Icon: ({ iconSource }: IconSourceProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface PopperProps extends PopperOptionProps {
+}
+interface PopperOptionProps {
+    width?: string;
+    height?: string;
+    /**
+     * popper의 offset을 설정합니다.
+     *
+     * Ref: https://floating-ui.com/docs/offset#offset
+     */
+    offset?: OffsetOptions;
+    /**
+     * popper가 열려있는지 여부를 결정합니다.
+     */
+    isOpen?: boolean;
+    /**
+     * 화면 뷰에 따라 자동으로 위치를 조정할 수 있습니다.
+     * floating ui의 autoPlacement 미들웨어를 사용합니다.
+     *
+     * Ref: https://floating-ui.com/docs/autoplacement
+     */
+    autoPlacement?: AutoPlacementOptions;
+    /**
+     * popper의 위치를 지정할 수 있습니다.
+     *
+     * Ref: https://floating-ui.com/docs/arrow#placement
+     */
+    placement?: Placement;
+    /**
+     * popper의 속성을 결정할 수 있습니다.
+     */
+    strategy?: 'absolute' | 'fixed';
+    /**
+     * floating ui의 middleware를 넣을 수 있습니다.
+     *
+     * Ref: https://floating-ui.com/docs/useFloating#middleware
+     */
+    middlewares?: Array<Middleware | null | undefined | false>;
+    /**
+     * floating ui의 animation을 넣을 수 있습니다.
+     * framer-motion의 animation을 사용합니다.
+     */
+    animation?: {
+        initial: Record<string, unknown>;
+        animate: Record<string, unknown>;
+        exit: Record<string, unknown>;
+    };
+    /**
+     * trigger할 요소를 설정합니다.
+     */
+    trigger: ReactNode;
+    /**
+     * pop할 요소를 설정합니다.
+     */
+    popper: ReactNode;
+}
+
+declare const Popper: ({ trigger, popper, isOpen, placement, offset: initialOffset, autoPlacement: initialAutoPlacement, strategy, middlewares, animation: initialAnimation, ...rest }: PopperProps) => react_jsx_runtime.JSX.Element;
+
+declare const StyledPopper: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & Pick<PopperOptionProps, "height" | "width">, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
 declare const IconSizeVariants: {
     readonly X_SMALL: "X_SMALL";
     readonly SMALL: "SMALL";
@@ -577,4 +644,4 @@ interface MinusBoxOptionProps {
 
 declare const MinusButton: React__default.ForwardRefExoticComponent<MinusBoxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -537,7 +537,7 @@ function _templateObject34() {
 }
 function _templateObject35() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  ",
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  gap: 4px;\n  padding: 0 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  ",
         ";\n  ",
         ";\n  ",
         ";\n"
@@ -676,12 +676,9 @@ function _templateObject47() {
 }
 function _templateObject48() {
     var data = _tagged_template_literal([
-        "\n  width: ",
-        ";\n  min-width: ",
+        "\n  display: flex;\n  flex-direction: row;\n  width: ",
         ";\n  height: ",
-        ";\n  min-height: ",
-        ";\n\n  & > path {\n    fill: ",
-        ";\n  }\n"
+        ";\n"
     ]);
     _templateObject48 = function _templateObject() {
         return data;
@@ -690,7 +687,11 @@ function _templateObject48() {
 }
 function _templateObject49() {
     var data = _tagged_template_literal([
-        "\n  padding: 4px 0 4px 12px;\n  background-color: transparent;\n  width: 100%;\n  border: none;\n  box-sizing: border-box;\n  &::placeholder {\n    color: ",
+        "\n  width: ",
+        ";\n  min-width: ",
+        ";\n  height: ",
+        ";\n  min-height: ",
+        ";\n\n  & > path {\n    fill: ",
         ";\n  }\n"
     ]);
     _templateObject49 = function _templateObject() {
@@ -700,7 +701,8 @@ function _templateObject49() {
 }
 function _templateObject50() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 8px 0 0;\n"
+        "\n  padding: 4px 0 4px 12px;\n  background-color: transparent;\n  width: 100%;\n  border: none;\n  box-sizing: border-box;\n  &::placeholder {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject50 = function _templateObject() {
         return data;
@@ -709,7 +711,7 @@ function _templateObject50() {
 }
 function _templateObject51() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 2px;\n"
+        "\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 8px 0 0;\n"
     ]);
     _templateObject51 = function _templateObject() {
         return data;
@@ -717,6 +719,15 @@ function _templateObject51() {
     return data;
 }
 function _templateObject52() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 2px;\n"
+    ]);
+    _templateObject52 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject53() {
     var data = _tagged_template_literal([
         "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-direction: ",
         ";\n  justify-content: space-between;\n  min-height: 40px;\n  margin: 1px;\n  gap: 8px;\n  box-shadow: 0 0 0 1px ",
@@ -724,50 +735,50 @@ function _templateObject52() {
         ";\n  overflow: hidden;\n  ",
         ";\n"
     ]);
-    _templateObject52 = function _templateObject() {
+    _templateObject53 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject53() {
+function _templateObject54() {
     var data = _tagged_template_literal([
         "\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  padding: 8px 12px;\n  gap: 8px;\n  background-color: ",
         ";\n"
     ]);
-    _templateObject53 = function _templateObject() {
+    _templateObject54 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject54() {
+function _templateObject55() {
     var data = _tagged_template_literal([
         "\n  padding: 8px 12px 0 12px;\n  background-color: transparent;\n  resize: none;\n  width: 100%;\n  height: ",
         ";\n  flex: 1;\n  word-break: break-all;\n  ",
         ";\n  &::placeholder {\n    color: ",
         ";\n  }\n"
     ]);
-    _templateObject54 = function _templateObject() {
+    _templateObject55 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject55() {
+function _templateObject56() {
     var data = _tagged_template_literal([
         "\n  width: 32px;\n  height: 32px;\n  padding: 7px;\n"
     ]);
-    _templateObject55 = function _templateObject() {
+    _templateObject56 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject56() {
+function _templateObject57() {
     var data = _tagged_template_literal([
         "\n  display: flex;\n  width: 16px;\n  height: 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: ",
         ";\n  border: none;\n  background: ",
         ";\n  cursor: pointer;\n  transition:\n    transform 0.1s ease-out,\n    background 0.1s ease;\n\n  &:hover {\n    background: ",
         ";\n  }\n"
     ]);
-    _templateObject56 = function _templateObject() {
+    _templateObject57 = function _templateObject() {
         return data;
     };
     return data;
@@ -780,6 +791,8 @@ var reactDom = require("react-dom");
 var utils = require("@shoplflow/utils");
 var react = require("@emotion/react");
 var Scrollbars = require("react-custom-scrollbars-2");
+var reactDom$1 = require("@floating-ui/react-dom");
+var react$1 = require("@floating-ui/react");
 var ShoplAssets = require("@shoplflow/shopl-assets");
 var HadaAssets = require("@shoplflow/hada-assets");
 function _interopDefault(e) {
@@ -1914,6 +1927,61 @@ exports.CalloutTypes = {
     INFORMATION: "INFORMATION",
     ALERT: "ALERT"
 };
+exports.StyledPopper = styled5__default.default.div(_templateObject48(), function(param) {
+    var width = param.width;
+    return width !== null && width !== void 0 ? width : "fit-content";
+}, function(param) {
+    var height = param.height;
+    return height !== null && height !== void 0 ? height : "fit-content";
+});
+var Popper = function(_param) {
+    var trigger = _param.trigger, popper = _param.popper, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, placement = _param.placement, tmp = _param.offset, initialOffset = tmp === void 0 ? 0 : tmp, initialAutoPlacement = _param.autoPlacement, _param_strategy = _param.strategy, strategy = _param_strategy === void 0 ? "absolute" : _param_strategy, middlewares = _param.middlewares, initialAnimation = _param.animation, rest = _object_without_properties(_param, [
+        "trigger",
+        "popper",
+        "isOpen",
+        "placement",
+        "offset",
+        "autoPlacement",
+        "strategy",
+        "middlewares",
+        "animation"
+    ]);
+    var _reactDom$1_useFloating = reactDom$1.useFloating({
+        strategy: strategy,
+        placement: placement,
+        whileElementsMounted: react$1.autoUpdate,
+        middleware: [
+            react$1.offset(initialOffset),
+            react$1.autoPlacement(_object_spread({
+                crossAxis: false
+            }, initialAutoPlacement))
+        ].concat(_to_consumable_array(middlewares !== null && middlewares !== void 0 ? middlewares : []))
+    }), refs = _reactDom$1_useFloating.refs, floatingStyles = _reactDom$1_useFloating.floatingStyles;
+    var animation = initialAnimation !== null && initialAnimation !== void 0 ? initialAnimation : fadeInOut;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /* @__PURE__ */ jsxRuntime.jsx(exports.StyledPopper, _object_spread_props(_object_spread({
+                ref: refs.setReference,
+                "data-shoplflow": "Popper"
+            }, rest), {
+                children: trigger
+            })),
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, {
+                    children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
+                        initial: animation.initial,
+                        animate: animation.animate,
+                        exit: animation.exit,
+                        ref: refs.setFloating,
+                        style: floatingStyles,
+                        children: popper
+                    })
+                })
+            })
+        ]
+    });
+};
+exports.Popper = Popper;
 // src/components/Icon/Icon.types.ts
 exports.IconSizeVariants = {
     X_SMALL: "X_SMALL",
@@ -1939,7 +2007,7 @@ var getIconSize = function(size) {
             return "24px";
     }
 };
-exports.StyledIcon = styled5__default.default.svg(_templateObject48(), function(param) {
+exports.StyledIcon = styled5__default.default.svg(_templateObject49(), function(param) {
     var sizeVar = param.sizeVar;
     return sizeVar && getIconSize(sizeVar);
 }, function(param) {
@@ -1967,9 +2035,9 @@ var Icon = React3.forwardRef(function(_param, ref) {
     }));
 });
 exports.Icon = Icon;
-var StyledInput = styled5__default.default.input(_templateObject49(), exports.colorTokens.neutral350);
-var RightElementWrapper = styled5__default.default.div(_templateObject50());
-var Wrapper = styled5__default.default.div(_templateObject51());
+var StyledInput = styled5__default.default.input(_templateObject50(), exports.colorTokens.neutral350);
+var RightElementWrapper = styled5__default.default.div(_templateObject51());
+var Wrapper = styled5__default.default.div(_templateObject52());
 var TextCounter = function(param) {
     var currentLength = param.currentLength, maxLength = param.maxLength;
     return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, {
@@ -2051,7 +2119,7 @@ var getBorderColorByStatus = function(param) {
     }
     return exports.colorTokens.neutral300;
 };
-var InputWrapper = styled5__default.default.label(_templateObject52(), function(param) {
+var InputWrapper = styled5__default.default.label(_templateObject53(), function(param) {
     var direction = param.direction;
     return direction || "row";
 }, function(props) {
@@ -2208,8 +2276,8 @@ React3.forwardRef(function(_param, ref) {
         ]
     });
 });
-var BottomElementWrapper = styled5__default.default.div(_templateObject53(), exports.colorTokens.neutral0);
-var StyledTextarea = styled5__default.default.textarea(_templateObject54(), function(param) {
+var BottomElementWrapper = styled5__default.default.div(_templateObject54(), exports.colorTokens.neutral0);
+var StyledTextarea = styled5__default.default.textarea(_templateObject55(), function(param) {
     var minHeight = param.minHeight;
     return minHeight ? "".concat(minHeight, "px") : "300px";
 }, function(param) {
@@ -2318,8 +2386,8 @@ var TextArea = React3.forwardRef(function(_param, ref) {
     });
 });
 exports.TextArea = TextArea;
-var Container2 = styled5__default.default.div(_templateObject55());
-var IconButton2 = styled5__default.default.button(_templateObject56(), exports.borderRadiusTokens.borderRadius04, function(param) {
+var Container2 = styled5__default.default.div(_templateObject56());
+var IconButton2 = styled5__default.default.button(_templateObject57(), exports.borderRadiusTokens.borderRadius04, function(param) {
     var color = param.color;
     return exports.colorTokens[color];
 }, function(param) {