@shoplflow/base 0.46.9 → 0.46.11

package/dist/index.cjs

@@ -232,6 +232,8 @@ var getSizeBySizeVariant = (size2) => {
       return "24px";
     case "M":
       return "32px";
+    case "ML":
+      return "40px";
     case "L":
       return "48px";
     case "XL":
@@ -240,6 +242,24 @@ var getSizeBySizeVariant = (size2) => {
       return "32px";
   }
 };
+var getIconSizeBySizeVariant = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "8px";
+    case "S":
+      return "12px";
+    case "M":
+      return "16px";
+    case "ML":
+      return "16px";
+    case "L":
+      return "20px";
+    case "XL":
+      return "24px";
+    default:
+      return "16px";
+  }
+};
 var StyledAvatar = styled6__default.default.picture`
   display: flex;
   align-items: center;
@@ -271,6 +291,12 @@ var StyledAvatarBadge = styled6__default.default.div`
   height: fit-content;
   bottom: 0;
   right: 0;
+  > svg {
+    min-width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    min-height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+  }
 `;
 
 // src/assets/mocks/AvatarNone.png
@@ -287,7 +313,7 @@ var Avatar = (_a) => {
         }
       }
     ) })),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { children: badge })
+    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { size: rest.sizeVar, children: badge })
   ] });
 };
 exports.Avatar = Avatar;
@@ -297,12 +323,13 @@ exports.AvatarSizeVariants = {
   XS: "XS",
   S: "S",
   M: "M",
+  ML: "ML",
   L: "L",
   XL: "XL"
 };
 
 // src/components/Avatar/version.ts
-exports.AVATAR_VERSION = "2.0.0";
+exports.AVATAR_VERSION = "2.1.1";
 
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
@@ -1745,12 +1772,14 @@ var getStyleBySizeVar2 = (sizeVar) => {
     case "M":
       return react$1.css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
     case "S":
       return react$1.css`
         gap: 2px;
+        padding: 0 10px;
         min-width: 54px;
         min-height: 32px;
       `;
@@ -1763,6 +1792,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
     default:
       return react$1.css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
@@ -1783,8 +1813,6 @@ var StyledButton = styled6__default.default.button`
   justify-content: center;
   height: fit-content;
   width: fit-content;
-  /* gap: 4px; */
-  padding: 0 12px;
   border-radius: 6px;
   cursor: pointer;
   ${({ styleVar, color, disabled }) => getStyleByStyleVar(styleVar, color, disabled)};
@@ -2985,7 +3013,7 @@ exports.SplitButtonStyleVariants = {
 };
 
 // src/components/Buttons/version.ts
-exports.BUTTONS_VERSION = "2.0.0";
+exports.BUTTONS_VERSION = "2.0.3";
 var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral400_5};
   & > svg > circle {
@@ -3158,33 +3186,31 @@ var getDropdownFontSizeBySizeVar = (size2) => {
     case "M":
       return "body1_400";
     case "S":
-      return "body2_400";
+      return "body1_400";
     default:
       return "body1_400";
   }
 };
 var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
-    case "L":
+    case "S":
       return react$1.css`
-        background-color: transparent;
-        padding: 8px 4px 8px 12px;
+        padding: 0 8px;
       `;
     case "M":
       return react$1.css`
-        background-color: ${exports.colorTokens.neutral0};
-        gap: 4px;
-        padding: 4px 4px 4px 12px;
+        padding: 0 12px;
       `;
-    case "S":
+    case "L":
       return react$1.css`
-        background-color: ${exports.colorTokens.neutral0};
-        padding: 4px 4px 4px 8px;
-        gap: 4px;
+        background-color: transparent;
+        padding-left: 12px;
+        padding-right: 6px;
       `;
     default:
       return react$1.css`
-        padding: 4px 4px 4px 12px;
+        background-color: ${exports.colorTokens.neutral0};
+        padding: 0 8px;
       `;
   }
 };
@@ -3193,28 +3219,12 @@ var getDisabledStyle2 = (disabled) => {
     return react$1.css`
       cursor: not-allowed;
       background: ${exports.colorTokens.neutral100};
+      svg > path {
+        fill: ${exports.colorTokens.neutral400} !important;
+      }
     `;
   }
 };
-var getDropdownIconSizeBySizeVar = (size2) => {
-  switch (size2) {
-    case "S":
-    case "L":
-      return react$1.css`
-        height: 24px;
-        width: 24px;
-        min-width: 24px;
-        min-height: 24px;
-      `;
-    default:
-      return react$1.css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
-  }
-};
 var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
   if (!disabled) {
     if (isError) {
@@ -3259,7 +3269,17 @@ var getStyleByType = ({
     height: ${height || "initial"};
   `;
 };
-var StyledDropdownButtonWrapper = styled6__default.default.label`
+var getClearIconHoverStyle = (hasValue) => {
+  if (!hasValue) {
+    return;
+  }
+  return react$1.css`
+    &:hover .dropdown-clear-icon {
+      display: flex;
+    }
+  `;
+};
+var StyledDropdownButtonWrapper = styled6__default.default.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -3277,33 +3297,63 @@ var StyledDropdownButtonWrapper = styled6__default.default.label`
   width
 })};
   ${(props) => getButtonWrapperStyleBySizeVar(props)};
-
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  ${({ hasValue }) => getClearIconHoverStyle(hasValue)}
 `;
 var StyledDropdownButton = styled6__default.default.button`
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
-
   cursor: pointer;
+
   ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  .dropdown-clear-icon {
+    display: none;
+    position: absolute;
+    right: 0;
+  }
 `;
-var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
+var DropdownButtonIcon = styled6__default.default.div`
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-shrink: 0;
+  min-width: 22px;
+  height: 100%;
 
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var DropdownTriggerButton = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { width = "100%", onClick, sizeVar = "M", isError, placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "isError", "placeholder", "value", "disabled", "leftSource"]);
+    var _b = _a, {
+      width = "100%",
+      onClick,
+      sizeVar = "M",
+      isError,
+      placeholder,
+      value,
+      disabled,
+      leftSource,
+      rightSource,
+      onClear
+    } = _b, rest = __objRest(_b, [
+      "width",
+      "onClick",
+      "sizeVar",
+      "isError",
+      "placeholder",
+      "value",
+      "disabled",
+      "leftSource",
+      "rightSource",
+      "onClear"
+    ]);
     const { isOpen, setIsOpen } = useDropdown();
     const [isHovered, setIsHovered] = React3.useState(false);
     const handleOnClick = (e) => {
@@ -3318,6 +3368,10 @@ var DropdownTriggerButton = React3.forwardRef(
     const handleOnMouseLeave = () => {
       setIsHovered(false);
     };
+    const handleOnClear = (e) => {
+      e.stopPropagation();
+      onClear && onClear();
+    };
     const getTextColor = ({ value: value2, disabled: disabled2 }) => {
       if (disabled2) {
         return "neutral350";
@@ -3328,7 +3382,8 @@ var DropdownTriggerButton = React3.forwardRef(
       return "neutral700";
     };
     const LeftSourceClone = leftSource ? React3.cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const RightSourceClone = rightSource ? React3.cloneElement(rightSource, __spreadProps(__spreadValues({}, rightSource.props), { disabled })) : rightSource;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledDropdownButtonWrapper,
       {
         onMouseEnter: handleOnMouseEnter,
@@ -3340,24 +3395,39 @@ var DropdownTriggerButton = React3.forwardRef(
         isError,
         sizeVar,
         height: getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
-            LeftSourceClone && LeftSourceClone,
-            value || /* @__PURE__ */ jsxRuntime.jsx(
-              exports.Text,
-              {
-                typography: getDropdownFontSizeBySizeVar(sizeVar),
-                color: getTextColor({ value, disabled }),
-                textOverflow: "ellipsis",
-                lineClamp: 1,
-                children: placeholder
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            DropdownButtonIcon,
-            {
+        hasValue: Boolean(value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            StyledDropdownButton,
+            __spreadProps(__spreadValues({
+              ref,
+              onClick: handleOnClick,
+              disabled
+            }, rest), {
               sizeVar,
+              "data-shoplflow": "Dropdown-Content-Area",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { width: "100%", spacing: "spacing04", align: "center", children: [
+                  LeftSourceClone && LeftSourceClone,
+                  value || /* @__PURE__ */ jsxRuntime.jsx(
+                    exports.Text,
+                    {
+                      typography: getDropdownFontSizeBySizeVar(sizeVar),
+                      color: getTextColor({ value, disabled }),
+                      textOverflow: "ellipsis",
+                      lineClamp: 1,
+                      children: placeholder
+                    }
+                  )
+                ] }),
+                onClear && sizeVar !== "L" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DeleteIcon, color: "neutral350", sizeVar: "S" }) })
+              ]
+            })
+          ),
+          RightSourceClone && /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 6px 0 0", children: RightSourceClone }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownButtonIcon, { sizeVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
               animate: {
                 rotate: isOpen ? 180 : 0
               },
@@ -3373,8 +3443,8 @@ var DropdownTriggerButton = React3.forwardRef(
                 }
               )
             }
-          )
-        ] }))
+          ) })
+        ]
       }
     );
   }
@@ -5081,26 +5151,6 @@ exports.Pagination = Pagination;
 
 // src/components/Pagination/version.ts
 exports.PAGINATION_VERSION = "2.0.0";
-var getLabelStyleByStatus = (selected, disabled) => {
-  if (disabled && selected) {
-    return react$1.css`
-      background-color: ${exports.colorTokens.neutral0};
-      cursor: not-allowed;
-    `;
-  }
-  if (disabled) {
-    return react$1.css`
-      cursor: not-allowed;
-      opacity: 0.5;
-    `;
-  }
-  if (selected) {
-    return react$1.css`
-      cursor: default;
-      background-color: ${exports.colorTokens.neutral0};
-    `;
-  }
-};
 var getLabelStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S": {
@@ -5136,14 +5186,26 @@ var StyledToggleInner = styled6__default.default.button`
   padding: 0 12px;
   border-radius: 6px;
   background-color: transparent;
-  ${({ disabled, selected }) => getLabelStyleByStatus(selected, Boolean(disabled))}
   ${({ sizeVar }) => getLabelStyleBySizeVar(sizeVar)}
 
-  &:hover {
-    ${({ disabled }) => !disabled && react$1.css`
-        cursor: pointer;
-        background-color: ${exports.colorTokens.neutral400_5};
-      `}
+  &[data-selected='true'] {
+    cursor: default;
+    background-color: ${exports.colorTokens.neutral0};
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-disabled='true'][data-selected='true'] {
+    opacity: 1;
+    background-color: ${exports.colorTokens.neutral0};
+  }
+
+  &:hover:not([aria-disabled='true']):not([data-selected='true']) {
+    cursor: pointer;
+    background-color: ${exports.colorTokens.neutral400_5};
   }
 `;
 var StyledToggleInnerLabel = styled6__default.default.label`
@@ -5174,21 +5236,24 @@ var ToggleButton = (_a) => {
     targetName,
     onChange,
     selectedValue,
-    sizeVar = "S"
+    sizeVar = "S",
+    disabled = false
   } = _b, rest = __objRest(_b, [
     "fixedWidth",
     "children",
     "targetName",
     "onChange",
     "selectedValue",
-    "sizeVar"
+    "sizeVar",
+    "disabled"
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton" }, rest), { children })) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar, disabled }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton", "aria-disabled": disabled }, rest), { children })) });
 };
 var ToggleInnerRadio = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { label, disabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
-    const { fixedWidth, onChange, targetName, selectedValue, sizeVar } = useToggleButton();
+    var _b = _a, { label, disabled: itemDisabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
+    const { fixedWidth, onChange, targetName, selectedValue, sizeVar, disabled: groupDisabled } = useToggleButton();
+    const disabled = groupDisabled || itemDisabled;
     const labelRef = React3.useRef(null);
     let selected = false;
     if (selectedValue && selectedValue === value) {
@@ -5204,12 +5269,15 @@ var ToggleInnerRadio = React3.forwardRef(
       StyledToggleInner,
       {
         width: fixedWidth,
-        disabled,
-        selected,
         sizeVar,
         type: "button",
+        "aria-disabled": disabled,
+        "data-selected": selected,
         onClick: () => {
           var _a2;
+          if (disabled) {
+            return;
+          }
           (_a2 = labelRef == null ? void 0 : labelRef.current) == null ? void 0 : _a2.click();
         },
         children: [
@@ -5219,6 +5287,7 @@ var ToggleInnerRadio = React3.forwardRef(
               checked: selected,
               width: fixedWidth,
               disabled,
+              "aria-disabled": disabled,
               value,
               id,
               type: "radio",
@@ -5252,7 +5321,7 @@ exports.ToggleButtonSizeVariants = {
 };
 
 // src/components/ToggleButton/version.ts
-exports.TOGGLE_BUTTON_VERSION = "2.0.0";
+exports.TOGGLE_BUTTON_VERSION = "2.0.1";
 var SmallStyledDayDatepickerWrapper = styled6__default.default.div`
   display: flex;
   width: 280px;

package/dist/index.d.cts

@@ -280,6 +280,7 @@ declare const AvatarSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
     readonly M: "M";
+    readonly ML: "ML";
     readonly L: "L";
     readonly XL: "XL";
 };
@@ -297,7 +298,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
 declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const AVATAR_VERSION = "2.0.0";
+declare const AVATAR_VERSION = "2.1.1";
 
 type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
@@ -765,7 +766,7 @@ declare const SplitButtonContext: React$1.Context<SplitButtonContextType | null>
 declare const useSplitButtonContext: () => SplitButtonContextType;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const BUTTONS_VERSION = "2.0.0";
+declare const BUTTONS_VERSION = "2.0.3";
 
 declare const CalloutTypes: {
     readonly INFORMATION: "INFORMATION";
@@ -1022,7 +1023,7 @@ declare const dropdownSizeVariants: {
     readonly L: "L";
 };
 type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
-interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
+interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftAndRightElementProps, SizeVariantProps<DropdownSizeVariantType> {
     /**
      * placeholder를 설정합니다.
      */
@@ -1033,6 +1034,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
      * width를 설정합니다.
      */
     width?: string;
+    onClear?: () => void;
 }
 
 declare const Dropdown: {
@@ -1475,6 +1477,7 @@ interface ToggleButtonProps extends ToggleButtonOptionProps, HTMLAttributes<HTML
     fixedWidth: number;
     selectedValue?: string;
     sizeVar?: ToggleButtonSizeVariantType;
+    disabled?: boolean;
 }
 interface ToggleButtonOptionProps {
 }
@@ -1487,12 +1490,12 @@ interface ToggleButtonInnerRadioOptionProps {
 }
 
 declare const ToggleButton: {
-    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
-    InnerRadio: React__default.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React__default.RefAttributes<HTMLInputElement>>;
+    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, disabled, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+    InnerRadio: React$1.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React$1.RefAttributes<HTMLInputElement>>;
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const TOGGLE_BUTTON_VERSION = "2.0.0";
+declare const TOGGLE_BUTTON_VERSION = "2.0.1";
 
 declare const DayDatepickerSizeVariants: {
     readonly S: "S";

package/dist/index.d.ts

@@ -280,6 +280,7 @@ declare const AvatarSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
     readonly M: "M";
+    readonly ML: "ML";
     readonly L: "L";
     readonly XL: "XL";
 };
@@ -297,7 +298,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
 declare const Avatar: ({ src, badge, fallbackUrl, ...rest }: AvatarProps) => JSX.Element;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const AVATAR_VERSION = "2.0.0";
+declare const AVATAR_VERSION = "2.1.1";
 
 type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
 type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
@@ -765,7 +766,7 @@ declare const SplitButtonContext: React$1.Context<SplitButtonContextType | null>
 declare const useSplitButtonContext: () => SplitButtonContextType;
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const BUTTONS_VERSION = "2.0.0";
+declare const BUTTONS_VERSION = "2.0.3";
 
 declare const CalloutTypes: {
     readonly INFORMATION: "INFORMATION";
@@ -1022,7 +1023,7 @@ declare const dropdownSizeVariants: {
     readonly L: "L";
 };
 type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
-interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
+interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftAndRightElementProps, SizeVariantProps<DropdownSizeVariantType> {
     /**
      * placeholder를 설정합니다.
      */
@@ -1033,6 +1034,7 @@ interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButto
      * width를 설정합니다.
      */
     width?: string;
+    onClear?: () => void;
 }
 
 declare const Dropdown: {
@@ -1475,6 +1477,7 @@ interface ToggleButtonProps extends ToggleButtonOptionProps, HTMLAttributes<HTML
     fixedWidth: number;
     selectedValue?: string;
     sizeVar?: ToggleButtonSizeVariantType;
+    disabled?: boolean;
 }
 interface ToggleButtonOptionProps {
 }
@@ -1487,12 +1490,12 @@ interface ToggleButtonInnerRadioOptionProps {
 }
 
 declare const ToggleButton: {
-    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
-    InnerRadio: React__default.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React__default.RefAttributes<HTMLInputElement>>;
+    ({ fixedWidth, children, targetName, onChange, selectedValue, sizeVar, disabled, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+    InnerRadio: React$1.ForwardRefExoticComponent<ToggleButtonInnerRadioProps & React$1.RefAttributes<HTMLInputElement>>;
 };
 
 /** @internal 컴포넌트 메타데이터: 버전 */
-declare const TOGGLE_BUTTON_VERSION = "2.0.0";
+declare const TOGGLE_BUTTON_VERSION = "2.0.1";
 
 declare const DayDatepickerSizeVariants: {
     readonly S: "S";

package/dist/index.js

@@ -11,7 +11,7 @@ import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
-import { DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, SearchIcon } from '@shoplflow/shopl-assets';
+import { DeleteIcon, DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon, SearchIcon } from '@shoplflow/shopl-assets';
 import { shift, flip, offset as offset$1 } from '@floating-ui/core';
 import * as HadaAssets from '@shoplflow/hada-assets';
 import DatePicker2 from 'react-datepicker';
@@ -205,6 +205,8 @@ var getSizeBySizeVariant = (size2) => {
       return "24px";
     case "M":
       return "32px";
+    case "ML":
+      return "40px";
     case "L":
       return "48px";
     case "XL":
@@ -213,6 +215,24 @@ var getSizeBySizeVariant = (size2) => {
       return "32px";
   }
 };
+var getIconSizeBySizeVariant = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "8px";
+    case "S":
+      return "12px";
+    case "M":
+      return "16px";
+    case "ML":
+      return "16px";
+    case "L":
+      return "20px";
+    case "XL":
+      return "24px";
+    default:
+      return "16px";
+  }
+};
 var StyledAvatar = styled6.picture`
   display: flex;
   align-items: center;
@@ -244,6 +264,12 @@ var StyledAvatarBadge = styled6.div`
   height: fit-content;
   bottom: 0;
   right: 0;
+  > svg {
+    min-width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    min-height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    width: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+    height: ${({ size: size2 }) => getIconSizeBySizeVariant(size2)};
+  }
 `;
 
 // src/assets/mocks/AvatarNone.png
@@ -260,7 +286,7 @@ var Avatar = (_a) => {
         }
       }
     ) })),
-    /* @__PURE__ */ jsx(StyledAvatarBadge, { children: badge })
+    /* @__PURE__ */ jsx(StyledAvatarBadge, { size: rest.sizeVar, children: badge })
   ] });
 };
 var Avatar_default = Avatar;
@@ -270,12 +296,13 @@ var AvatarSizeVariants = {
   XS: "XS",
   S: "S",
   M: "M",
+  ML: "ML",
   L: "L",
   XL: "XL"
 };
 
 // src/components/Avatar/version.ts
-var AVATAR_VERSION = "2.0.0";
+var AVATAR_VERSION = "2.1.1";
 
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
@@ -1718,12 +1745,14 @@ var getStyleBySizeVar2 = (sizeVar) => {
     case "M":
       return css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
     case "S":
       return css`
         gap: 2px;
+        padding: 0 10px;
         min-width: 54px;
         min-height: 32px;
       `;
@@ -1736,6 +1765,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
     default:
       return css`
         gap: 4px;
+        padding: 0 12px;
         min-width: 72px;
         min-height: 40px;
       `;
@@ -1756,8 +1786,6 @@ var StyledButton = styled6.button`
   justify-content: center;
   height: fit-content;
   width: fit-content;
-  /* gap: 4px; */
-  padding: 0 12px;
   border-radius: 6px;
   cursor: pointer;
   ${({ styleVar, color, disabled }) => getStyleByStyleVar(styleVar, color, disabled)};
@@ -2958,7 +2986,7 @@ var SplitButtonStyleVariants = {
 };
 
 // src/components/Buttons/version.ts
-var BUTTONS_VERSION = "2.0.0";
+var BUTTONS_VERSION = "2.0.3";
 var informationStyle = css`
   background: ${colorTokens.neutral400_5};
   & > svg > circle {
@@ -3131,33 +3159,31 @@ var getDropdownFontSizeBySizeVar = (size2) => {
     case "M":
       return "body1_400";
     case "S":
-      return "body2_400";
+      return "body1_400";
     default:
       return "body1_400";
   }
 };
 var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
-    case "L":
+    case "S":
       return css`
-        background-color: transparent;
-        padding: 8px 4px 8px 12px;
+        padding: 0 8px;
       `;
     case "M":
       return css`
-        background-color: ${colorTokens.neutral0};
-        gap: 4px;
-        padding: 4px 4px 4px 12px;
+        padding: 0 12px;
       `;
-    case "S":
+    case "L":
       return css`
-        background-color: ${colorTokens.neutral0};
-        padding: 4px 4px 4px 8px;
-        gap: 4px;
+        background-color: transparent;
+        padding-left: 12px;
+        padding-right: 6px;
       `;
     default:
       return css`
-        padding: 4px 4px 4px 12px;
+        background-color: ${colorTokens.neutral0};
+        padding: 0 8px;
       `;
   }
 };
@@ -3166,28 +3192,12 @@ var getDisabledStyle2 = (disabled) => {
     return css`
       cursor: not-allowed;
       background: ${colorTokens.neutral100};
+      svg > path {
+        fill: ${colorTokens.neutral400} !important;
+      }
     `;
   }
 };
-var getDropdownIconSizeBySizeVar = (size2) => {
-  switch (size2) {
-    case "S":
-    case "L":
-      return css`
-        height: 24px;
-        width: 24px;
-        min-width: 24px;
-        min-height: 24px;
-      `;
-    default:
-      return css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
-  }
-};
 var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
   if (!disabled) {
     if (isError) {
@@ -3232,7 +3242,17 @@ var getStyleByType = ({
     height: ${height || "initial"};
   `;
 };
-var StyledDropdownButtonWrapper = styled6.label`
+var getClearIconHoverStyle = (hasValue) => {
+  if (!hasValue) {
+    return;
+  }
+  return css`
+    &:hover .dropdown-clear-icon {
+      display: flex;
+    }
+  `;
+};
+var StyledDropdownButtonWrapper = styled6.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -3250,33 +3270,63 @@ var StyledDropdownButtonWrapper = styled6.label`
   width
 })};
   ${(props) => getButtonWrapperStyleBySizeVar(props)};
-
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  ${({ hasValue }) => getClearIconHoverStyle(hasValue)}
 `;
 var StyledDropdownButton = styled6.button`
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
-
   cursor: pointer;
+
   ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
+
+  .dropdown-clear-icon {
+    display: none;
+    position: absolute;
+    right: 0;
+  }
 `;
-var DropdownButtonIcon = styled6(motion.div)`
+var DropdownButtonIcon = styled6.div`
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-shrink: 0;
+  min-width: 22px;
+  height: 100%;
 
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var DropdownTriggerButton = forwardRef(
   (_a, ref) => {
-    var _b = _a, { width = "100%", onClick, sizeVar = "M", isError, placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "isError", "placeholder", "value", "disabled", "leftSource"]);
+    var _b = _a, {
+      width = "100%",
+      onClick,
+      sizeVar = "M",
+      isError,
+      placeholder,
+      value,
+      disabled,
+      leftSource,
+      rightSource,
+      onClear
+    } = _b, rest = __objRest(_b, [
+      "width",
+      "onClick",
+      "sizeVar",
+      "isError",
+      "placeholder",
+      "value",
+      "disabled",
+      "leftSource",
+      "rightSource",
+      "onClear"
+    ]);
     const { isOpen, setIsOpen } = useDropdown();
     const [isHovered, setIsHovered] = useState(false);
     const handleOnClick = (e) => {
@@ -3291,6 +3341,10 @@ var DropdownTriggerButton = forwardRef(
     const handleOnMouseLeave = () => {
       setIsHovered(false);
     };
+    const handleOnClear = (e) => {
+      e.stopPropagation();
+      onClear && onClear();
+    };
     const getTextColor = ({ value: value2, disabled: disabled2 }) => {
       if (disabled2) {
         return "neutral350";
@@ -3301,7 +3355,8 @@ var DropdownTriggerButton = forwardRef(
       return "neutral700";
     };
     const LeftSourceClone = leftSource ? cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
-    return /* @__PURE__ */ jsx(
+    const RightSourceClone = rightSource ? cloneElement(rightSource, __spreadProps(__spreadValues({}, rightSource.props), { disabled })) : rightSource;
+    return /* @__PURE__ */ jsxs(
       StyledDropdownButtonWrapper,
       {
         onMouseEnter: handleOnMouseEnter,
@@ -3313,24 +3368,39 @@ var DropdownTriggerButton = forwardRef(
         isError,
         sizeVar,
         height: getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          /* @__PURE__ */ jsxs(Stack_default.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
-            LeftSourceClone && LeftSourceClone,
-            value || /* @__PURE__ */ jsx(
-              Text_default,
-              {
-                typography: getDropdownFontSizeBySizeVar(sizeVar),
-                color: getTextColor({ value, disabled }),
-                textOverflow: "ellipsis",
-                lineClamp: 1,
-                children: placeholder
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            DropdownButtonIcon,
-            {
+        hasValue: Boolean(value),
+        children: [
+          /* @__PURE__ */ jsxs(
+            StyledDropdownButton,
+            __spreadProps(__spreadValues({
+              ref,
+              onClick: handleOnClick,
+              disabled
+            }, rest), {
               sizeVar,
+              "data-shoplflow": "Dropdown-Content-Area",
+              children: [
+                /* @__PURE__ */ jsxs(Stack_default.Horizontal, { width: "100%", spacing: "spacing04", align: "center", children: [
+                  LeftSourceClone && LeftSourceClone,
+                  value || /* @__PURE__ */ jsx(
+                    Text_default,
+                    {
+                      typography: getDropdownFontSizeBySizeVar(sizeVar),
+                      color: getTextColor({ value, disabled }),
+                      textOverflow: "ellipsis",
+                      lineClamp: 1,
+                      children: placeholder
+                    }
+                  )
+                ] }),
+                onClear && sizeVar !== "L" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: handleOnClear, className: "dropdown-clear-icon", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DeleteIcon, color: "neutral350", sizeVar: "S" }) })
+              ]
+            })
+          ),
+          RightSourceClone && /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 6px 0 0", children: RightSourceClone }),
+          /* @__PURE__ */ jsx(DropdownButtonIcon, { sizeVar, "data-shoplflow": "Dropdown-Button-Icon-Area", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
               animate: {
                 rotate: isOpen ? 180 : 0
               },
@@ -3346,8 +3416,8 @@ var DropdownTriggerButton = forwardRef(
                 }
               )
             }
-          )
-        ] }))
+          ) })
+        ]
       }
     );
   }
@@ -5054,26 +5124,6 @@ var Pagination_default = Pagination;
 
 // src/components/Pagination/version.ts
 var PAGINATION_VERSION = "2.0.0";
-var getLabelStyleByStatus = (selected, disabled) => {
-  if (disabled && selected) {
-    return css`
-      background-color: ${colorTokens.neutral0};
-      cursor: not-allowed;
-    `;
-  }
-  if (disabled) {
-    return css`
-      cursor: not-allowed;
-      opacity: 0.5;
-    `;
-  }
-  if (selected) {
-    return css`
-      cursor: default;
-      background-color: ${colorTokens.neutral0};
-    `;
-  }
-};
 var getLabelStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S": {
@@ -5109,14 +5159,26 @@ var StyledToggleInner = styled6.button`
   padding: 0 12px;
   border-radius: 6px;
   background-color: transparent;
-  ${({ disabled, selected }) => getLabelStyleByStatus(selected, Boolean(disabled))}
   ${({ sizeVar }) => getLabelStyleBySizeVar(sizeVar)}
 
-  &:hover {
-    ${({ disabled }) => !disabled && css`
-        cursor: pointer;
-        background-color: ${colorTokens.neutral400_5};
-      `}
+  &[data-selected='true'] {
+    cursor: default;
+    background-color: ${colorTokens.neutral0};
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-disabled='true'][data-selected='true'] {
+    opacity: 1;
+    background-color: ${colorTokens.neutral0};
+  }
+
+  &:hover:not([aria-disabled='true']):not([data-selected='true']) {
+    cursor: pointer;
+    background-color: ${colorTokens.neutral400_5};
   }
 `;
 var StyledToggleInnerLabel = styled6.label`
@@ -5147,21 +5209,24 @@ var ToggleButton = (_a) => {
     targetName,
     onChange,
     selectedValue,
-    sizeVar = "S"
+    sizeVar = "S",
+    disabled = false
   } = _b, rest = __objRest(_b, [
     "fixedWidth",
     "children",
     "targetName",
     "onChange",
     "selectedValue",
-    "sizeVar"
+    "sizeVar",
+    "disabled"
   ]);
-  return /* @__PURE__ */ jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar }, children: /* @__PURE__ */ jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton" }, rest), { children })) });
+  return /* @__PURE__ */ jsx(ToggleButtonContext.Provider, { value: { fixedWidth, targetName, onChange, selectedValue, sizeVar, disabled }, children: /* @__PURE__ */ jsx(StyledToggleButton, __spreadProps(__spreadValues({ "data-shoplflow": "ToggleButton", "aria-disabled": disabled }, rest), { children })) });
 };
 var ToggleInnerRadio = forwardRef(
   (_a, ref) => {
-    var _b = _a, { label, disabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
-    const { fixedWidth, onChange, targetName, selectedValue, sizeVar } = useToggleButton();
+    var _b = _a, { label, disabled: itemDisabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
+    const { fixedWidth, onChange, targetName, selectedValue, sizeVar, disabled: groupDisabled } = useToggleButton();
+    const disabled = groupDisabled || itemDisabled;
     const labelRef = useRef(null);
     let selected = false;
     if (selectedValue && selectedValue === value) {
@@ -5177,12 +5242,15 @@ var ToggleInnerRadio = forwardRef(
       StyledToggleInner,
       {
         width: fixedWidth,
-        disabled,
-        selected,
         sizeVar,
         type: "button",
+        "aria-disabled": disabled,
+        "data-selected": selected,
         onClick: () => {
           var _a2;
+          if (disabled) {
+            return;
+          }
           (_a2 = labelRef == null ? void 0 : labelRef.current) == null ? void 0 : _a2.click();
         },
         children: [
@@ -5192,6 +5260,7 @@ var ToggleInnerRadio = forwardRef(
               checked: selected,
               width: fixedWidth,
               disabled,
+              "aria-disabled": disabled,
               value,
               id,
               type: "radio",
@@ -5225,7 +5294,7 @@ var ToggleButtonSizeVariants = {
 };
 
 // src/components/ToggleButton/version.ts
-var TOGGLE_BUTTON_VERSION = "2.0.0";
+var TOGGLE_BUTTON_VERSION = "2.0.1";
 var SmallStyledDayDatepickerWrapper = styled6.div`
   display: flex;
   width: 280px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.46.9",
+  "version": "0.46.11",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -86,9 +86,9 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
-    "@shoplflow/hada-assets": "^0.1.10",
+    "@shoplflow/shopl-assets": "^0.12.37",
     "@shoplflow/utils": "^0.8.0",
-    "@shoplflow/shopl-assets": "^0.12.37"
+    "@shoplflow/hada-assets": "^0.1.10"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {