@shoplflow/base 0.32.18 → 0.32.20

package/dist/index.js

@@ -5,15 +5,15 @@ import { motion, AnimatePresence, LayoutGroup, LazyMotion, domAnimation } from '
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
-import { useMergeRefs, noop, OutSideClick, useSelect, useOutsideClick, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
+import { useMergeRefs, noop, useOutsideClick, OutSideClick, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
 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, DownArrowIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
+import { shift, flip, offset as offset$1 } from '@floating-ui/core';
 import * as HadaAssets from '@shoplflow/hada-assets';
-import { flip, shift, offset as offset$1 } from '@floating-ui/core';
 import DatePicker2 from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import SimpleBarReact from 'simplebar-react';
@@ -1784,65 +1784,26 @@ var IconButtonStyleVariants = {
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
-var informationStyle = css`
-  background: ${colorTokens.neutral100};
-  & > span {
-    color: ${colorTokens.neutral600};
-  }
-  & > svg > path {
-    fill: ${colorTokens.neutral600};
-  }
-`;
-var alertStyle = css`
-  background: ${colorTokens.red100};
-  & > span {
-    align-self: center;
-    color: ${colorTokens.red300};
-  }
-  & > svg > path {
-    fill: ${colorTokens.red300};
-  }
-`;
-var StyledCallout = styled6.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: start;
-  padding: 6px 8px;
-  gap: 4px;
-  border-radius: ${borderRadiusTokens.borderRadius08};
-  ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
-  ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
+var getPopoverContentStyle = () => {
+  return css`
+    min-width: 112px;
+    padding: 4px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background-color: ${colorTokens.neutral0};
+  `;
+};
+
+// src/components/Buttons/DropdownButton/DropdownButton.styled.ts
+var StyledPopoverContentWrapper = styled6.div`
+  ${getPopoverContentStyle()}
 `;
-var StyledCalloutIcon = styled6.svg`
+var StyledArrowIcon = styled6(motion.div)`
   display: flex;
-  height: 20px;
-  min-height: 20px;
-  width: 20px;
-  min-width: 20px;
-`;
-styled6.div`
-  padding: 2px 0;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
 `;
-var Callout = (_a) => {
-  var _b = _a, { children, styleVar = "INFORMATION" } = _b, rest = __objRest(_b, ["children", "styleVar"]);
-  return /* @__PURE__ */ jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", children }));
-};
-var CalloutText = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(Text_default, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
-};
-var CalloutIcon = ({ iconSource }) => {
-  return /* @__PURE__ */ jsx(StyledCalloutIcon, { as: iconSource });
-};
-Callout.Text = CalloutText;
-Callout.Icon = CalloutIcon;
-var Callout_default = Callout;
-
-// src/components/Callout/Callout.types.ts
-var CalloutTypes = {
-  INFORMATION: "INFORMATION",
-  ALERT: "ALERT"
-};
 var StyledPopper = styled6.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
@@ -1947,180 +1908,410 @@ var PopperPortal = forwardRef(
 Popper.Trigger = PopperTrigger;
 Popper.Portal = PopperPortal;
 var Popper_default = Popper;
-var getDropdownHeightBySizeVar = (size2) => {
-  switch (size2) {
-    case "M":
-      return "40px";
-    case "S":
-      return "32px";
-    default:
-      return "40px";
-  }
-};
-var getDropdownFontSizeBySizeVar = (size2) => {
-  switch (size2) {
-    case "M":
-      return "body1_400";
-    case "S":
-      return "body2_400";
-    default:
-      return "body1_400";
-  }
-};
-var getDropdownStyleBySizeVar = (size2) => {
-  switch (size2) {
-    case "M":
-      return css`
-        padding: 4px 4px 4px 12px;
-      `;
-    case "S":
-      return css`
-        padding: 4px 4px 4px 8px;
-        gap: 4px;
-      `;
-    default:
-      return css`
-        padding: 4px 4px 4px 12px;
-      `;
+var Container2 = styled6.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+`;
+var IconButton2 = styled6.button`
+  display: flex;
+  width: 16px;
+  height: 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${borderRadiusTokens.borderRadius04};
+  border: none;
+  background: ${({ color }) => colorTokens[color]};
+  cursor: pointer;
+  transition:
+    transform 0.1s ease-out,
+    background 0.1s ease;
+
+  &:hover {
+    background: ${({ color }) => colorTokens[getNextColor(color, 1)]};
   }
-};
-var getDropdownIconSizeBySizeVar = (size2) => {
-  switch (size2) {
-    case "S":
+`;
+var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
+var MinusButton = forwardRef((_a, ref) => {
+  var _b = _a, { onClick, color = "neutral300" } = _b, rest = __objRest(_b, ["onClick", "color"]);
+  return /* @__PURE__ */ jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsx(IconButton2, __spreadProps(__spreadValues({ color, onClick, ref }, rest), { children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
+        fill: "white"
+      }
+    )
+  ] }) })) });
+});
+MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
+var MinusButton_default = MinusButton;
+var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+  switch (styleVariant) {
+    case "PRIMARY":
+      if (isSelected) {
+        return css`
+          background: ${colorTokens.primary300};
+          border: 1.5px solid ${colorTokens.primary300};
+          & > svg > path {
+            fill: ${colorTokens.neutral0};
+          }
+          ${isHovered && css`
+            border: 1.5px solid ${colorTokens.primary400};
+            background: ${colorTokens.primary400};
+          `}
+        `;
+      }
       return css`
-        height: 24px;
-        width: 24px;
-        min-width: 24px;
-        min-height: 24px;
+        background: ${colorTokens.neutral200};
+        border: 1.5px solid ${colorTokens.neutral200};
+        border-radius: 4px;
+        ${isHovered && css`
+          border: 1.5px solid ${colorTokens.neutral300};
+          background: ${colorTokens.neutral300};
+        `}
+
+        & > svg > path {
+          fill: ${colorTokens.neutral0};
+        }
       `;
-    case "M":
+    case "LINE":
+      if (isSelected) {
+        return css`
+          border: 1.5px solid ${colorTokens.primary300};
+          background: transparent;
+          border-radius: 4px;
+          & > svg > path {
+            fill: ${colorTokens.primary300};
+          }
+          ${isHovered && css`
+            border: 1.5px solid ${colorTokens.primary400};
+            & > svg > path {
+              fill: ${colorTokens.primary400};
+            }
+          `}
+        `;
+      }
       return css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
+        background: transparent;
+        border: 1.5px solid ${colorTokens.neutral200};
+        border-radius: 4px;
+        & > svg > path {
+          fill: ${colorTokens.neutral200};
+        }
+        ${isHovered && css`
+          border: 1.5px solid ${colorTokens.neutral300};
+          & > svg > path {
+            fill: ${colorTokens.neutral300};
+          }
+        `}
       `;
     default:
-      return css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
+      return "";
   }
 };
-var StyledDropdown = styled6.div`
-  width: ${({ width }) => width};
+var StyledCheckHiddenInput = styled6.input`
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
 `;
-var StyledDropdownContent = styled6.div`
+var StyledCheckbox = styled6.label`
   display: flex;
-  flex-direction: column;
-  background: ${colorTokens.neutral0};
-  width: ${({ width }) => width != null ? width : "240px"};
-  padding: 4px;
-  border-radius: 6px;
-  box-shadow: ${boxShadowTokens.dropShadow};
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  background: ${colorTokens.neutral200};
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var StyledDropdownButton = styled6.button`
+var Container3 = styled6.button`
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  gap: 8px;
-  cursor: pointer;
-  background-color: ${colorTokens.neutral0};
-  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
-  ${({ disabled }) => disabled && css`
-      background-color: ${colorTokens.neutral100};
-      cursor: not-allowed;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+  background-color: transparent;
+`;
+var CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
+var Checkbox = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { defaultSelected, isSelected, disabled, onMouseEnter, onClick, onMouseLeave, styleVar = "PRIMARY", id } = _b, rest = __objRest(_b, ["defaultSelected", "isSelected", "disabled", "onMouseEnter", "onClick", "onMouseLeave", "styleVar", "id"]);
+    const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
+    const [isHovered, toggleHovered] = useState(false);
+    const handleMouseLeave = (e) => {
+      toggleHovered(false);
+      onMouseLeave && onMouseLeave(e);
+    };
+    const handleMouseEnter = (e) => {
+      toggleHovered(true);
+      onMouseEnter && onMouseEnter(e);
+    };
+    const handleClick = (e) => {
+      if (disabled) {
+        return;
+      }
+      onClick && onClick(e);
+      toggleSelected();
+    };
+    return /* @__PURE__ */ jsxs(
+      Container3,
+      {
+        onClick: handleClick,
+        onMouseLeave: handleMouseLeave,
+        onMouseEnter: handleMouseEnter,
+        disabled,
+        type: "button",
+        "data-shoplflow": "Checkbox",
+        children: [
+          /* @__PURE__ */ jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
+          /* @__PURE__ */ jsx(
+            StyledCheckbox,
+            {
+              styleVar,
+              htmlFor: id,
+              isHovered,
+              isSelected: selected,
+              disabled,
+              children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M9.78822 0.297596C10.1761 -0.0955083 10.8093 -0.0997053 11.2024 0.288222C11.5653 0.646308 11.5968 1.21334 11.2943 1.60765L11.2118 1.7024L5.31714 7.7024C4.95248 8.07193 4.37282 8.09687 3.97909 7.77976L3.88476 7.69335L0.779404 4.42669C0.396475 4.02871 0.408672 3.39567 0.806647 3.01274C1.17401 2.65926 1.74167 2.64247 2.12801 2.95499L2.2206 3.03998L4.614 5.567L9.78822 0.297596Z",
+                  fill: "white"
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox[CHECKBOX_SYMBOL_KEY] = true;
+var Checkbox_default = Checkbox;
+
+// src/components/ControlButtons/Checkbox/Checkbox.types.ts
+var CheckboxStyleVariants = {
+  PRIMARY: "PRIMARY",
+  LINE: "LINE"
+};
+var getSelectedStyle = (isHovered) => {
+  return css`
+    & > svg > circle {
+      stroke: ${colorTokens.primary300};
+    }
+    ${isHovered && css`
+      & > svg > circle {
+        stroke: ${colorTokens.primary400};
+      }
     `}
+  `;
+};
+var StyledRadio = styled6.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  ${({ isHovered }) => css`
+    & > svg > circle {
+      stroke: ${colorTokens.neutral200};
+    }
+    ${isHovered && css`
+      & > svg > circle {
+        stroke: ${colorTokens.neutral300};
+      }
+    `}
+  `}
+  cursor: pointer;
+  ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
+  ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var DropdownButtonIcon = styled6(motion.div)`
+var Container4 = styled6.button`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
+  background: transparent;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
 `;
-var DropdownContext = createContext(null);
-var useDropdown = () => {
-  const context = useContext(DropdownContext);
-  if (context === null) {
-    throw new Error("useDropdown must be used within a DropdownProvider");
+var RADIO_SYMBOL_KEY = Symbol("SHOPLFLOW_RADIO");
+var Radio = (_a) => {
+  var _b = _a, { isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["isSelected", "defaultSelected", "disabled", "onClick", "onMouseEnter", "onMouseLeave"]);
+  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
+  const [isHovered, toggleHovered] = useState(false);
+  const handleMouseLeave = (e) => {
+    toggleHovered(false);
+    onMouseLeave && onMouseLeave(e);
+  };
+  const handleMouseEnter = (e) => {
+    toggleHovered(true);
+    onMouseEnter && onMouseEnter(e);
+  };
+  const handleClick = (e) => {
+    if (disabled) {
+      return;
+    }
+    onClick && onClick(e);
+    toggleSelected();
+  };
+  return /* @__PURE__ */ jsx(
+    Container4,
+    __spreadProps(__spreadValues({
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }, rest), {
+      "data-shoplflow": "Radio",
+      children: /* @__PURE__ */ jsx(StyledRadio, { isSelected: selected, isHovered, disabled, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "5.5", fill: "white", stroke: "#3299FE", strokeWidth: "5" }) }) })
+    })
+  );
+};
+Radio[RADIO_SYMBOL_KEY] = true;
+var Radio_default = Radio;
+
+// src/components/Menu/Menu.styled.ts
+var getStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return css`
+        min-height: 28px;
+      `;
+    case "S":
+      return css`
+        min-height: 36px;
+      `;
+    case "M":
+      return css`
+        height: 48px;
+      `;
+    default:
+      return css`
+        height: 48px;
+      `;
   }
-  return context;
 };
-var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
-  if (!disabled) {
-    if (isError) {
-      return colorTokens.red300;
-    }
-    if (isFocused) {
-      return colorTokens.primary300;
-    }
-    if (isHovered) {
-      return colorTokens.neutral700;
-    }
+var getFontStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "XS":
+      return "body2_400";
+    case "S":
+      return "body1_400";
+    case "M":
+      return "body1_400";
+    default:
+      return "body1_400";
   }
-  return colorTokens.neutral300;
 };
-var getStyleByType = ({
-  type,
-  height,
-  minHeight,
-  maxHeight,
-  width,
-  minWidth,
-  maxWidth,
-  borderRadius,
-  customNumberInputHeight
-}) => {
-  if (type === "number") {
-    return css`
-      width: ${width || "64px"};
-      height: ${customNumberInputHeight || "32px"};
-      border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
-    `;
+var StyledMenu = styled6.li`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  padding: 6px;
+  gap: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+  ${({ sizeVar }) => getStylesBySizeVar(sizeVar)};
+  &:hover {
+    background: ${colorTokens.neutral400_5};
+  }
+  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
+  ${({ isSelected, leftSource }) => isSelected === true && (!leftSource || leftSource && !leftSource.type[RADIO_SYMBOL_KEY] && !leftSource.type[CHECKBOX_SYMBOL_KEY] && !leftSource.type[MUNUS_BUTTON_SYMBOL_KEY]) && css`
+      background: ${colorTokens.neutral200};
+      &:hover {
+        background: ${colorTokens.neutral200};
+      }
+    `}
+`;
+var Menu = (_a) => {
+  var _b = _a, {
+    leftSource,
+    rightSource,
+    children,
+    isSelected,
+    defaultSelected = false,
+    onClick,
+    sizeVar = "XS",
+    disabled = false
+  } = _b, rest = __objRest(_b, [
+    "leftSource",
+    "rightSource",
+    "children",
+    "isSelected",
+    "defaultSelected",
+    "onClick",
+    "sizeVar",
+    "disabled"
+  ]);
+  const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
+  const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
+    isSelected
+  })) : leftSource;
+  const handleOnClick = (e) => {
+    !disabled && handleToggle();
+    !disabled && onClick && onClick(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    StyledMenu,
+    __spreadProps(__spreadValues({
+      sizeVar,
+      isSelected: selected,
+      leftSource,
+      onClick: handleOnClick
+    }, rest), {
+      "data-shoplflow": "Menu",
+      children: [
+        leftSource && LeftSourceClone,
+        /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", height: "100%", align: "center", className: getFontStylesBySizeVar(sizeVar), children }),
+        rightSource && rightSource
+      ]
+    })
+  );
+};
+var Menu_default = Menu;
+
+// src/components/Menu/Menu.types.ts
+var MenuSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M"
+};
+var DropdownButtonContext = createContext(null);
+var useDropdownButtonContext = () => {
+  const context = useContext(DropdownButtonContext);
+  if (!context) {
+    throw new Error("DropdownButtonContext must be used within a DropdownButton component");
   }
-  return css`
-    width: ${width || "100%"};
-    min-width: ${minWidth || "initial"};
-    max-width: ${maxWidth || "initial"};
-    height: ${height || "initial"};
-    min-height: ${minHeight || "initial"};
-    max-height: ${maxHeight || "initial"};
-    border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
-  `;
+  return context;
 };
-var InputWrapper = styled6.label`
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-radius: 6px;
-  flex-direction: ${({ direction }) => direction || "row"};
-  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType({
-  customNumberInputHeight,
-  type,
-  height,
-  minHeight,
-  maxHeight,
-  width,
-  maxWidth,
-  minWidth,
-  borderRadius
-})};
-  justify-content: space-between;
-  gap: ${({ gap }) => gap || "8px"};
-  border: 1px solid ${(props) => getBorderColorByStatus(props)};
-  background-color: ${colorTokens.neutral0};
-  overflow: hidden;
-  ${({ disabled }) => disabled && css`
-      background-color: ${colorTokens.neutral100};
-      cursor: not-allowed;
-    `};
-`;
 
 // src/components/Icon/Icon.types.ts
 var IconSizeVariants = {
@@ -2162,532 +2353,677 @@ var Icon = forwardRef((_a, ref) => {
   return /* @__PURE__ */ jsx(StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
 });
 var Icon_default = Icon;
-var DropdownButton = 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"]);
-    const { isOpen, setIsOpen } = useDropdown();
-    const [isHovered, setIsHovered] = useState(false);
-    const handleOnClick = (e) => {
-      if (!disabled) {
-        onClick && onClick(e);
-        setIsOpen(!isOpen);
-      }
-    };
-    const handleOnMouseEnter = () => {
-      setIsHovered(true);
-    };
-    const handleOnMouseLeave = () => {
-      setIsHovered(false);
-    };
-    const getTextColor = ({ value: value2, disabled: disabled2 }) => {
-      if (disabled2) {
-        return "neutral350";
-      }
-      if (!value2) {
-        return "neutral400";
+var DropdownButtonMenu = (_a) => {
+  var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
+  const { setIsOpen } = useDropdownButtonContext();
+  return /* @__PURE__ */ jsx(
+    Menu_default,
+    __spreadProps(__spreadValues({
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onClick == null ? void 0 : onClick(event);
+        setIsOpen(false);
       }
-      return "neutral700";
-    };
-    return /* @__PURE__ */ jsx(
-      InputWrapper,
-      {
-        onMouseEnter: handleOnMouseEnter,
-        onMouseLeave: handleOnMouseLeave,
-        isFocused: isOpen,
-        isHovered,
+    }, rest), {
+      children
+    })
+  );
+};
+var DropdownButton = (_a) => {
+  var _b = _a, {
+    text,
+    sizeVar,
+    className,
+    disabled,
+    children,
+    placement = "bottom-end",
+    styleVar = "PRIMARY",
+    floatingZIndex
+  } = _b, rest = __objRest(_b, [
+    "text",
+    "sizeVar",
+    "className",
+    "disabled",
+    "children",
+    "placement",
+    "styleVar",
+    "floatingZIndex"
+  ]);
+  const selector = useRef(`shoplflow-${crypto.randomUUID()}-dropdown-button`).current;
+  const [isOpen, setIsOpen] = useOutsideClick({
+    selector: `.${selector}`,
+    useOutsideScroll: true
+  });
+  let _className = `${selector}`;
+  if (className) {
+    _className += ` ${className}`;
+  }
+  let _styleVar = styleVar;
+  let color = void 0;
+  if (styleVar === "PRIMARY") {
+    _styleVar = "SOLID";
+    color = "coolgray50";
+  }
+  return /* @__PURE__ */ jsx(DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, "data-shoplflow": "DropdownButton", children: /* @__PURE__ */ jsxs(Popper_default, { placement, offset: 4, middlewares: [shift({ crossAxis: true, padding: 4 })], children: [
+    /* @__PURE__ */ jsx(Popper_default.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsx(
+      Button_default,
+      __spreadProps(__spreadValues({
+        className: _className,
+        sizeVar,
+        styleVar: _styleVar,
         disabled,
-        width,
-        isError,
-        height: getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          leftSource && leftSource,
-          value || /* @__PURE__ */ jsx(
-            Text_default,
-            {
-              typography: getDropdownFontSizeBySizeVar(sizeVar),
-              color: getTextColor({ value, disabled }),
-              textOverflow: "ellipsis",
-              lineClamp: 1,
-              children: placeholder
-            }
-          ),
+        color,
+        rightSource: /* @__PURE__ */ jsx(
+          StyledArrowIcon,
+          {
+            animate: {
+              rotate: isOpen ? 180 : 0
+            },
+            transition: {
+              duration: 0.2
+            },
+            children: /* @__PURE__ */ jsx(
+              Icon_default,
+              {
+                iconSource: DownArrowSolidXsmallIcon,
+                color: styleVar === "PRIMARY" ? "coolgray300" : "neutral400",
+                sizeVar: "XS"
+              }
+            )
+          }
+        ),
+        onClick: () => {
+          if (disabled) {
+            return;
+          }
+          setIsOpen((prev) => !prev);
+        }
+      }, rest), {
+        children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_400", color: "neutral700", children: text })
+      })
+    ) }),
+    /* @__PURE__ */ jsx(Popper_default.Portal, { zIndex: floatingZIndex, children: /* @__PURE__ */ jsx(StyledPopoverContentWrapper, { className: _className, children }) })
+  ] }) });
+};
+DropdownButton.Menu = DropdownButtonMenu;
+var DropdownButton_default = DropdownButton;
+
+// src/components/Buttons/DropdownButton/DropdownButton.types.ts
+var DropdownButtonSizeVariants = {
+  S: "S",
+  M: "M"
+};
+var DropdownButtonStyleVariants = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY"
+};
+var getStyleByStyleVar3 = (styleVar, color, disabled) => {
+  switch (styleVar) {
+    case "PRIMARY":
+      return css`
+        border: 1px solid ${colorTokens.primary400};
+        background-color: ${colorTokens.primary300};
+        :hover {
+          background-color: ${!disabled && colorTokens.primary400};
+        }
+      `;
+    case "SECONDARY":
+      return css`
+        border: 1px solid ${colorTokens.neutral350};
+        background-color: ${colorTokens.neutral0};
+        :hover {
+          background-color: ${!disabled && colorTokens.neutral100};
+        }
+      `;
+    default:
+      return css`
+        border: 1px solid ${colorTokens.primary400};
+        background-color: ${colorTokens.primary300};
+      `;
+  }
+};
+var getStyleBySizeVar3 = (sizeVar) => {
+  switch (sizeVar) {
+    case "M":
+      return css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+    case "S":
+      return css`
+        min-width: 54px;
+        min-height: 32px;
+      `;
+    default:
+      return css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+  }
+};
+var StyledPopoverContentWrapper2 = styled6.div`
+  ${getPopoverContentStyle()}
+`;
+var StyledArrowIcon2 = styled6(motion.div)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+`;
+var SplitButtonDivider = styled6.div`
+  height: ${({ sizeVar }) => sizeVar === "M" ? "38px" : "30px"};
+  width: 1px;
+  background-color: ${({ styleVar }) => styleVar === "PRIMARY" ? colorTokens.shopl400 : colorTokens.neutral350};
+`;
+var StyledSplitButton = styled6.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: fit-content;
+  width: fit-content;
+  gap: 8px;
+  padding: 0 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  ${({ styleVar, color, disabled }) => getStyleByStyleVar3(styleVar, color, disabled)};
+  ${({ sizeVar }) => getStyleBySizeVar3(sizeVar)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+var SplitButtonContext = createContext(null);
+var useSplitButtonContext = () => {
+  const context = useContext(SplitButtonContext);
+  if (!context) {
+    throw new Error("SplitButtonContext must be used within a SplitButton component");
+  }
+  return context;
+};
+var SplitButtonMenu = (_a) => {
+  var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
+  const { setIsOpen } = useSplitButtonContext();
+  return /* @__PURE__ */ jsx(
+    Menu_default,
+    __spreadProps(__spreadValues({
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onClick == null ? void 0 : onClick(event);
+        setIsOpen(false);
+      }
+    }, rest), {
+      children
+    })
+  );
+};
+var SplitButton = (_a) => {
+  var _b = _a, {
+    children,
+    color,
+    onClick,
+    disabled,
+    placement = "bottom-start",
+    floatingZIndex,
+    leftSource,
+    rightSource,
+    styleVar = "PRIMARY",
+    sizeVar = "M",
+    lineClamp = 1,
+    text
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "color",
+    "onClick",
+    "disabled",
+    "placement",
+    "floatingZIndex",
+    "leftSource",
+    "rightSource",
+    "styleVar",
+    "sizeVar",
+    "lineClamp",
+    "text"
+  ]);
+  const selector = useRef(`shoplflow-${crypto.randomUUID()}-split-button`).current;
+  const [isOpen, setIsOpen] = useOutsideClick({
+    selector: `.${selector}`,
+    useOutsideScroll: true
+  });
+  return /* @__PURE__ */ jsx(SplitButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxs(Popper_default, { placement, offset: 4, middlewares: [shift({ crossAxis: true, padding: 4 })], children: [
+    /* @__PURE__ */ jsx(Popper_default.Trigger, { isOpen, className: selector, children: /* @__PURE__ */ jsxs(
+      StyledSplitButton,
+      __spreadProps(__spreadValues({
+        "data-shoplflow": "SplitButton",
+        color,
+        styleVar,
+        sizeVar,
+        disabled
+      }, rest), {
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+          if (disabled) {
+            return;
+          }
+          onClick == null ? void 0 : onClick(event);
+          setIsOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Stack_default.Horizontal, { spacing: "spacing04", align: "center", children: [
+            leftSource,
+            /* @__PURE__ */ jsx(
+              Text_default,
+              {
+                lineClamp,
+                whiteSpace: "nowrap",
+                wordBreak: "keep-all",
+                color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
+                typography: sizeVar === "M" ? "body1_400" : "body2_400",
+                children: text
+              }
+            ),
+            rightSource
+          ] }),
+          /* @__PURE__ */ jsx(SplitButtonDivider, { sizeVar, styleVar }),
           /* @__PURE__ */ jsx(
-            DropdownButtonIcon,
+            StyledArrowIcon2,
             {
-              sizeVar,
               animate: {
                 rotate: isOpen ? 180 : 0
               },
               transition: {
                 duration: 0.2
               },
-              children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
+              children: /* @__PURE__ */ jsx(
+                Icon_default,
+                {
+                  iconSource: DownArrowSolidXsmallIcon,
+                  color: styleVar === "PRIMARY" ? "neutral0" : "neutral600",
+                  sizeVar: "XS"
+                }
+              )
             }
           )
-        ] }))
-      }
-    );
-  }
-);
-var DropdownContent = (_a) => {
-  var _b = _a, { children, width: initialWidth, type, onClick } = _b, rest = __objRest(_b, ["children", "width", "type", "onClick"]);
-  const { width, setIsOpen, option } = useDropdown();
-  const isFillType = type === "FILL";
-  const contentWidth = isFillType ? `${width}px` : initialWidth;
-  const returnCallbackByOption = () => {
-    if (option === "OUTSIDE_CLICK") {
-      return () => setIsOpen(false);
-    }
-    if (option === "CLICK") {
-      return () => setIsOpen(false);
-    }
-    return noop;
-  };
-  const handleClick = (e) => {
-    onClick && onClick(e);
-    if (option === "CLICK") {
-      setIsOpen(false);
-    }
-  };
-  return /* @__PURE__ */ jsx(OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsx(StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
+        ]
+      })
+    ) }),
+    /* @__PURE__ */ jsx(Popper_default.Portal, { zIndex: floatingZIndex, children: /* @__PURE__ */ jsx(StyledPopoverContentWrapper2, { children }) })
+  ] }) });
 };
-var Dropdown = ({
-  isOpen: initialIsOpen = false,
-  trigger,
-  popper,
-  option = "CLICK",
-  width = "100%"
-}) => {
-  const [triggerRef, setTriggerRef] = useState(null);
-  const [size2, setSize] = useState({ width: 0, height: 0 });
-  const [isOpen, setIsOpen] = useState(false);
-  useEffect(() => {
-    if (triggerRef) {
-      setSize({
-        width: triggerRef.offsetWidth,
-        height: triggerRef.offsetHeight
-      });
-    }
-  }, [triggerRef]);
-  useEffect(() => {
-    if (initialIsOpen === void 0) {
-      return;
-    }
-    setIsOpen(initialIsOpen);
-  }, [initialIsOpen]);
-  return /* @__PURE__ */ jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxs(
-    Popper_default,
-    {
-      offset: 4,
-      autoPlacement: {
-        allowedPlacements: ["bottom-start", "top-start"]
-      },
-      children: [
-        /* @__PURE__ */ jsx(Popper_default.Trigger, { ref: setTriggerRef, isOpen, width, children: trigger }),
-        /* @__PURE__ */ jsx(Popper_default.Portal, { children: popper })
-      ]
-    }
-  ) }) });
+SplitButton.Menu = SplitButtonMenu;
+var SplitButton_default = SplitButton;
+
+// src/components/Buttons/SplitButton/SplitButton.types.ts
+var SplitButtonSizeVariants = {
+  S: "S",
+  M: "M"
 };
-Dropdown.Button = DropdownButton;
-Dropdown.Content = DropdownContent;
-var Dropdown_default = Dropdown;
-var Container2 = styled6.div`
+var SplitButtonStyleVariants = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY"
+};
+var informationStyle = css`
+  background: ${colorTokens.neutral100};
+  & > span {
+    color: ${colorTokens.neutral600};
+  }
+  & > svg > path {
+    fill: ${colorTokens.neutral600};
+  }
+`;
+var alertStyle = css`
+  background: ${colorTokens.red100};
+  & > span {
+    align-self: center;
+    color: ${colorTokens.red300};
+  }
+  & > svg > path {
+    fill: ${colorTokens.red300};
+  }
+`;
+var StyledCallout = styled6.div`
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 4px;
+  justify-content: flex-start;
+  align-items: start;
+  padding: 6px 8px;
+  gap: 4px;
+  border-radius: ${borderRadiusTokens.borderRadius08};
+  ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
+  ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
 `;
-var IconButton2 = styled6.button`
+var StyledCalloutIcon = styled6.svg`
   display: flex;
-  width: 16px;
-  height: 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: ${borderRadiusTokens.borderRadius04};
-  border: none;
-  background: ${({ color }) => colorTokens[color]};
-  cursor: pointer;
-  transition:
-    transform 0.1s ease-out,
-    background 0.1s ease;
+  height: 20px;
+  min-height: 20px;
+  width: 20px;
+  min-width: 20px;
+`;
+styled6.div`
+  padding: 2px 0;
+`;
+var Callout = (_a) => {
+  var _b = _a, { children, styleVar = "INFORMATION" } = _b, rest = __objRest(_b, ["children", "styleVar"]);
+  return /* @__PURE__ */ jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", children }));
+};
+var CalloutText = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(Text_default, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
+};
+var CalloutIcon = ({ iconSource }) => {
+  return /* @__PURE__ */ jsx(StyledCalloutIcon, { as: iconSource });
+};
+Callout.Text = CalloutText;
+Callout.Icon = CalloutIcon;
+var Callout_default = Callout;
 
-  &:hover {
-    background: ${({ color }) => colorTokens[getNextColor(color, 1)]};
+// src/components/Callout/Callout.types.ts
+var CalloutTypes = {
+  INFORMATION: "INFORMATION",
+  ALERT: "ALERT"
+};
+var getDropdownHeightBySizeVar = (size2) => {
+  switch (size2) {
+    case "M":
+      return "40px";
+    case "S":
+      return "32px";
+    default:
+      return "40px";
   }
-`;
-var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
-var MinusButton = forwardRef((_a, ref) => {
-  var _b = _a, { onClick, color = "neutral300" } = _b, rest = __objRest(_b, ["onClick", "color"]);
-  return /* @__PURE__ */ jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsx(IconButton2, __spreadProps(__spreadValues({ color, onClick, ref }, rest), { children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
-        fill: "none"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
-        fill: "white"
-      }
-    )
-  ] }) })) });
-});
-MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
-var MinusButton_default = MinusButton;
-var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
-  switch (styleVariant) {
-    case "PRIMARY":
-      if (isSelected) {
-        return css`
-          background: ${colorTokens.primary300};
-          border: 1.5px solid ${colorTokens.primary300};
-          & > svg > path {
-            fill: ${colorTokens.neutral0};
-          }
-          ${isHovered && css`
-            border: 1.5px solid ${colorTokens.primary400};
-            background: ${colorTokens.primary400};
-          `}
-        `;
-      }
+};
+var getDropdownFontSizeBySizeVar = (size2) => {
+  switch (size2) {
+    case "M":
+      return "body1_400";
+    case "S":
+      return "body2_400";
+    default:
+      return "body1_400";
+  }
+};
+var getDropdownStyleBySizeVar = (size2) => {
+  switch (size2) {
+    case "M":
       return css`
-        background: ${colorTokens.neutral200};
-        border: 1.5px solid ${colorTokens.neutral200};
-        border-radius: 4px;
-        ${isHovered && css`
-          border: 1.5px solid ${colorTokens.neutral300};
-          background: ${colorTokens.neutral300};
-        `}
-
-        & > svg > path {
-          fill: ${colorTokens.neutral0};
-        }
+        padding: 4px 4px 4px 12px;
+      `;
+    case "S":
+      return css`
+        padding: 4px 4px 4px 8px;
+        gap: 4px;
+      `;
+    default:
+      return css`
+        padding: 4px 4px 4px 12px;
+      `;
+  }
+};
+var getDropdownIconSizeBySizeVar = (size2) => {
+  switch (size2) {
+    case "S":
+      return css`
+        height: 24px;
+        width: 24px;
+        min-width: 24px;
+        min-height: 24px;
       `;
-    case "LINE":
-      if (isSelected) {
-        return css`
-          border: 1.5px solid ${colorTokens.primary300};
-          background: transparent;
-          border-radius: 4px;
-          & > svg > path {
-            fill: ${colorTokens.primary300};
-          }
-          ${isHovered && css`
-            border: 1.5px solid ${colorTokens.primary400};
-            & > svg > path {
-              fill: ${colorTokens.primary400};
-            }
-          `}
-        `;
-      }
+    case "M":
       return css`
-        background: transparent;
-        border: 1.5px solid ${colorTokens.neutral200};
-        border-radius: 4px;
-        & > svg > path {
-          fill: ${colorTokens.neutral200};
-        }
-        ${isHovered && css`
-          border: 1.5px solid ${colorTokens.neutral300};
-          & > svg > path {
-            fill: ${colorTokens.neutral300};
-          }
-        `}
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        min-height: 32px;
       `;
     default:
-      return "";
+      return css`
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        min-height: 32px;
+      `;
   }
 };
-var StyledCheckHiddenInput = styled6.input`
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  visibility: hidden;
+var StyledDropdown = styled6.div`
+  width: ${({ width }) => width};
 `;
-var StyledCheckbox = styled6.label`
+var StyledDropdownContent = styled6.div`
+  display: flex;
+  flex-direction: column;
+  background: ${colorTokens.neutral0};
+  width: ${({ width }) => width != null ? width : "240px"};
+  padding: 4px;
+  border-radius: 6px;
+  box-shadow: ${boxShadowTokens.dropShadow};
+`;
+var StyledDropdownButton = styled6.button`
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  width: 16px;
-  height: 16px;
-  background: ${colorTokens.neutral200};
-  border-radius: 4px;
-  box-sizing: border-box;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  gap: 8px;
   cursor: pointer;
-  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
-  ${({ disabled }) => getDisabledStyle(disabled)}
+  background-color: ${colorTokens.neutral0};
+  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
+  ${({ disabled }) => disabled && css`
+      background-color: ${colorTokens.neutral100};
+      cursor: not-allowed;
+    `}
 `;
-var Container3 = styled6.button`
+var DropdownButtonIcon = styled6(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4px;
-  width: fit-content;
-  height: fit-content;
-  background-color: transparent;
+
+  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
 `;
-var CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
-var Checkbox = forwardRef(
+var DropdownContext = createContext(null);
+var useDropdown = () => {
+  const context = useContext(DropdownContext);
+  if (context === null) {
+    throw new Error("useDropdown must be used within a DropdownProvider");
+  }
+  return context;
+};
+var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
+  if (!disabled) {
+    if (isError) {
+      return colorTokens.red300;
+    }
+    if (isFocused) {
+      return colorTokens.primary300;
+    }
+    if (isHovered) {
+      return colorTokens.neutral700;
+    }
+  }
+  return colorTokens.neutral300;
+};
+var getStyleByType = ({
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  minWidth,
+  maxWidth,
+  borderRadius,
+  customNumberInputHeight
+}) => {
+  if (type === "number") {
+    return css`
+      width: ${width || "64px"};
+      height: ${customNumberInputHeight || "32px"};
+      border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
+    `;
+  }
+  return css`
+    width: ${width || "100%"};
+    min-width: ${minWidth || "initial"};
+    max-width: ${maxWidth || "initial"};
+    height: ${height || "initial"};
+    min-height: ${minHeight || "initial"};
+    max-height: ${maxHeight || "initial"};
+    border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
+  `;
+};
+var InputWrapper = styled6.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  flex-direction: ${({ direction }) => direction || "row"};
+  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType({
+  customNumberInputHeight,
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  maxWidth,
+  minWidth,
+  borderRadius
+})};
+  justify-content: space-between;
+  gap: ${({ gap }) => gap || "8px"};
+  border: 1px solid ${(props) => getBorderColorByStatus(props)};
+  background-color: ${colorTokens.neutral0};
+  overflow: hidden;
+  ${({ disabled }) => disabled && css`
+      background-color: ${colorTokens.neutral100};
+      cursor: not-allowed;
+    `};
+`;
+var DropdownTriggerButton = forwardRef(
   (_a, ref) => {
-    var _b = _a, { defaultSelected, isSelected, disabled, onMouseEnter, onClick, onMouseLeave, styleVar = "PRIMARY", id } = _b, rest = __objRest(_b, ["defaultSelected", "isSelected", "disabled", "onMouseEnter", "onClick", "onMouseLeave", "styleVar", "id"]);
-    const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-    const [isHovered, toggleHovered] = useState(false);
-    const handleMouseLeave = (e) => {
-      toggleHovered(false);
-      onMouseLeave && onMouseLeave(e);
+    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"]);
+    const { isOpen, setIsOpen } = useDropdown();
+    const [isHovered, setIsHovered] = useState(false);
+    const handleOnClick = (e) => {
+      if (!disabled) {
+        onClick && onClick(e);
+        setIsOpen(!isOpen);
+      }
     };
-    const handleMouseEnter = (e) => {
-      toggleHovered(true);
-      onMouseEnter && onMouseEnter(e);
+    const handleOnMouseEnter = () => {
+      setIsHovered(true);
     };
-    const handleClick = (e) => {
-      if (disabled) {
-        return;
+    const handleOnMouseLeave = () => {
+      setIsHovered(false);
+    };
+    const getTextColor = ({ value: value2, disabled: disabled2 }) => {
+      if (disabled2) {
+        return "neutral350";
       }
-      onClick && onClick(e);
-      toggleSelected();
+      if (!value2) {
+        return "neutral400";
+      }
+      return "neutral700";
     };
-    return /* @__PURE__ */ jsxs(
-      Container3,
+    return /* @__PURE__ */ jsx(
+      InputWrapper,
       {
-        onClick: handleClick,
-        onMouseLeave: handleMouseLeave,
-        onMouseEnter: handleMouseEnter,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        isFocused: isOpen,
+        isHovered,
         disabled,
-        type: "button",
-        "data-shoplflow": "Checkbox",
-        children: [
-          /* @__PURE__ */ jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
+        width,
+        isError,
+        height: getDropdownHeightBySizeVar(sizeVar),
+        children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
+          leftSource && leftSource,
+          value || /* @__PURE__ */ jsx(
+            Text_default,
+            {
+              typography: getDropdownFontSizeBySizeVar(sizeVar),
+              color: getTextColor({ value, disabled }),
+              textOverflow: "ellipsis",
+              lineClamp: 1,
+              children: placeholder
+            }
+          ),
           /* @__PURE__ */ jsx(
-            StyledCheckbox,
+            DropdownButtonIcon,
             {
-              styleVar,
-              htmlFor: id,
-              isHovered,
-              isSelected: selected,
-              disabled,
-              children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  clipRule: "evenodd",
-                  d: "M9.78822 0.297596C10.1761 -0.0955083 10.8093 -0.0997053 11.2024 0.288222C11.5653 0.646308 11.5968 1.21334 11.2943 1.60765L11.2118 1.7024L5.31714 7.7024C4.95248 8.07193 4.37282 8.09687 3.97909 7.77976L3.88476 7.69335L0.779404 4.42669C0.396475 4.02871 0.408672 3.39567 0.806647 3.01274C1.17401 2.65926 1.74167 2.64247 2.12801 2.95499L2.2206 3.03998L4.614 5.567L9.78822 0.297596Z",
-                  fill: "white"
-                }
-              ) })
+              sizeVar,
+              animate: {
+                rotate: isOpen ? 180 : 0
+              },
+              transition: {
+                duration: 0.2
+              },
+              children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
             }
           )
-        ]
+        ] }))
       }
     );
   }
 );
-Checkbox[CHECKBOX_SYMBOL_KEY] = true;
-var Checkbox_default = Checkbox;
-
-// src/components/ControlButtons/Checkbox/Checkbox.types.ts
-var CheckboxStyleVariants = {
-  PRIMARY: "PRIMARY",
-  LINE: "LINE"
-};
-var getSelectedStyle = (isHovered) => {
-  return css`
-    & > svg > circle {
-      stroke: ${colorTokens.primary300};
+var DropdownContent = (_a) => {
+  var _b = _a, { children, width: initialWidth, type, onClick } = _b, rest = __objRest(_b, ["children", "width", "type", "onClick"]);
+  const { width, setIsOpen, option } = useDropdown();
+  const isFillType = type === "FILL";
+  const contentWidth = isFillType ? `${width}px` : initialWidth;
+  const returnCallbackByOption = () => {
+    if (option === "OUTSIDE_CLICK") {
+      return () => setIsOpen(false);
     }
-    ${isHovered && css`
-      & > svg > circle {
-        stroke: ${colorTokens.primary400};
-      }
-    `}
-  `;
-};
-var StyledRadio = styled6.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  width: 16px;
-  height: 16px;
-  ${({ isHovered }) => css`
-    & > svg > circle {
-      stroke: ${colorTokens.neutral200};
+    if (option === "CLICK") {
+      return () => setIsOpen(false);
     }
-    ${isHovered && css`
-      & > svg > circle {
-        stroke: ${colorTokens.neutral300};
-      }
-    `}
-  `}
-  cursor: pointer;
-  ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
-  ${({ disabled }) => getDisabledStyle(disabled)}
-`;
-var Container4 = styled6.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  padding: 4px;
-  width: fit-content;
-  height: fit-content;
-`;
-var RADIO_SYMBOL_KEY = Symbol("SHOPLFLOW_RADIO");
-var Radio = (_a) => {
-  var _b = _a, { isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["isSelected", "defaultSelected", "disabled", "onClick", "onMouseEnter", "onMouseLeave"]);
-  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-  const [isHovered, toggleHovered] = useState(false);
-  const handleMouseLeave = (e) => {
-    toggleHovered(false);
-    onMouseLeave && onMouseLeave(e);
-  };
-  const handleMouseEnter = (e) => {
-    toggleHovered(true);
-    onMouseEnter && onMouseEnter(e);
+    return noop;
   };
   const handleClick = (e) => {
-    if (disabled) {
-      return;
-    }
     onClick && onClick(e);
-    toggleSelected();
+    if (option === "CLICK") {
+      setIsOpen(false);
+    }
   };
-  return /* @__PURE__ */ jsx(
-    Container4,
-    __spreadProps(__spreadValues({
-      onClick: handleClick,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
-    }, rest), {
-      "data-shoplflow": "Radio",
-      children: /* @__PURE__ */ jsx(StyledRadio, { isSelected: selected, isHovered, disabled, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "5.5", fill: "white", stroke: "#3299FE", strokeWidth: "5" }) }) })
-    })
-  );
-};
-Radio[RADIO_SYMBOL_KEY] = true;
-var Radio_default = Radio;
-
-// src/components/Menu/Menu.styled.ts
-var getStylesBySizeVar = (sizeVar) => {
-  switch (sizeVar) {
-    case "XS":
-      return css`
-        min-height: 28px;
-      `;
-    case "S":
-      return css`
-        min-height: 36px;
-      `;
-    case "M":
-      return css`
-        height: 48px;
-      `;
-    default:
-      return css`
-        height: 48px;
-      `;
-  }
-};
-var getFontStylesBySizeVar = (sizeVar) => {
-  switch (sizeVar) {
-    case "XS":
-      return "body2_400";
-    case "S":
-      return "body1_400";
-    case "M":
-      return "body1_400";
-    default:
-      return "body1_400";
-  }
+  return /* @__PURE__ */ jsx(OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsx(StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
 };
-var StyledMenu = styled6.li`
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  padding: 6px;
-  gap: 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  background: transparent;
-  ${({ sizeVar }) => getStylesBySizeVar(sizeVar)};
-  &:hover {
-    background: ${colorTokens.neutral400_5};
-  }
-  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
-  ${({ isSelected, leftSource }) => isSelected === true && (!leftSource || leftSource && !leftSource.type[RADIO_SYMBOL_KEY] && !leftSource.type[CHECKBOX_SYMBOL_KEY] && !leftSource.type[MUNUS_BUTTON_SYMBOL_KEY]) && css`
-      background: ${colorTokens.neutral200};
-      &:hover {
-        background: ${colorTokens.neutral200};
-      }
-    `}
-`;
-var Menu = (_a) => {
-  var _b = _a, {
-    leftSource,
-    rightSource,
-    children,
-    isSelected,
-    defaultSelected = false,
-    onClick,
-    sizeVar = "XS",
-    disabled = false
-  } = _b, rest = __objRest(_b, [
-    "leftSource",
-    "rightSource",
-    "children",
-    "isSelected",
-    "defaultSelected",
-    "onClick",
-    "sizeVar",
-    "disabled"
-  ]);
-  const [selected, handleToggle] = useOnToggle(isSelected, defaultSelected);
-  const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadProps(__spreadValues({}, rest), {
-    isSelected
-  })) : leftSource;
-  const handleOnClick = (e) => {
-    !disabled && handleToggle();
-    !disabled && onClick && onClick(e);
-  };
-  return /* @__PURE__ */ jsxs(
-    StyledMenu,
-    __spreadProps(__spreadValues({
-      sizeVar,
-      isSelected: selected,
-      leftSource,
-      onClick: handleOnClick
-    }, rest), {
-      "data-shoplflow": "Menu",
+var Dropdown = ({
+  isOpen: initialIsOpen = false,
+  trigger,
+  popper,
+  option = "CLICK",
+  width = "100%"
+}) => {
+  const [triggerRef, setTriggerRef] = useState(null);
+  const [size2, setSize] = useState({ width: 0, height: 0 });
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (triggerRef) {
+      setSize({
+        width: triggerRef.offsetWidth,
+        height: triggerRef.offsetHeight
+      });
+    }
+  }, [triggerRef]);
+  useEffect(() => {
+    if (initialIsOpen === void 0) {
+      return;
+    }
+    setIsOpen(initialIsOpen);
+  }, [initialIsOpen]);
+  return /* @__PURE__ */ jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxs(
+    Popper_default,
+    {
+      offset: 4,
+      autoPlacement: {
+        allowedPlacements: ["bottom-start", "top-start"]
+      },
       children: [
-        leftSource && LeftSourceClone,
-        /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", height: "100%", align: "center", className: getFontStylesBySizeVar(sizeVar), children }),
-        rightSource && rightSource
+        /* @__PURE__ */ jsx(Popper_default.Trigger, { ref: setTriggerRef, isOpen, width, children: trigger }),
+        /* @__PURE__ */ jsx(Popper_default.Portal, { children: popper })
       ]
-    })
-  );
-};
-var Menu_default = Menu;
-
-// src/components/Menu/Menu.types.ts
-var MenuSizeVariants = {
-  XS: "XS",
-  S: "S",
-  M: "M"
+    }
+  ) }) });
 };
+Dropdown.Button = DropdownTriggerButton;
+Dropdown.Content = DropdownContent;
+var Dropdown_default = Dropdown;
 var StyledList = styled6.li`
   display: flex;
   flex-direction: row;
@@ -3685,22 +4021,32 @@ var Tooltip = (_a) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxs(Popper_default, __spreadProps(__spreadValues({ offset: offset4, placement, middlewares: [flip(), shift({ padding: 5 })] }, popperProps), { children: [
-    /* @__PURE__ */ jsx(
-      Popper_default.Trigger,
-      {
-        ref: triggerRef,
-        isOpen: isOpen || open,
-        onMouseOver: showHandler,
-        onMouseLeave: hideHandler,
-        onFocus: showHandler,
-        onBlur: hideHandler,
-        style: { display: "flex", alignItems: "center", justifyContent: "center" },
-        children: trigger
-      }
-    ),
-    /* @__PURE__ */ jsx(Popper_default.Portal, { ref: portalRef, children: popper })
-  ] }));
+  return /* @__PURE__ */ jsxs(
+    Popper_default,
+    __spreadProps(__spreadValues({
+      offset: offset4,
+      placement,
+      middlewares: [flip(), shift({ padding: 5 })],
+      "data-shoplflow": "Tooltip"
+    }, popperProps), {
+      children: [
+        /* @__PURE__ */ jsx(
+          Popper_default.Trigger,
+          {
+            ref: triggerRef,
+            isOpen: isOpen || open,
+            onMouseOver: showHandler,
+            onMouseLeave: hideHandler,
+            onFocus: showHandler,
+            onBlur: hideHandler,
+            style: { display: "flex", alignItems: "center", justifyContent: "center" },
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ jsx(Popper_default.Portal, { ref: portalRef, children: popper })
+      ]
+    })
+  );
 };
 Tooltip.Content = TooltipContent;
 var Tooltip_default = Tooltip;
@@ -6014,6 +6360,6 @@ classnames/index.js:
   *)
 */
 
-export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue, useTabs };
+export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map