@shoplflow/base 0.32.18 → 0.32.19

package/dist/index.cjs

@@ -1811,65 +1811,19 @@ exports.IconButtonStyleVariants = {
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
-var informationStyle = react$1.css`
-  background: ${exports.colorTokens.neutral100};
-  & > span {
-    color: ${exports.colorTokens.neutral600};
-  }
-  & > svg > path {
-    fill: ${exports.colorTokens.neutral600};
-  }
-`;
-var alertStyle = react$1.css`
-  background: ${exports.colorTokens.red100};
-  & > span {
-    align-self: center;
-    color: ${exports.colorTokens.red300};
-  }
-  & > svg > path {
-    fill: ${exports.colorTokens.red300};
-  }
-`;
-var StyledCallout = styled6__default.default.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: start;
-  padding: 6px 8px;
-  gap: 4px;
-  border-radius: ${exports.borderRadiusTokens.borderRadius08};
-  ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
-  ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
+var StyledPopoverContentWrapper = styled6__default.default.div`
+  min-width: 112px;
+  padding: 4px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  background-color: ${exports.colorTokens.neutral0};
 `;
-var StyledCalloutIcon = styled6__default.default.svg`
+var StyledArrowIcon = styled6__default.default(framerMotion.motion.div)`
   display: flex;
-  height: 20px;
-  min-height: 20px;
-  width: 20px;
-  min-width: 20px;
-`;
-styled6__default.default.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__ */ jsxRuntime.jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", children }));
-};
-var CalloutText = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
-};
-var CalloutIcon = ({ iconSource }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, { as: iconSource });
-};
-Callout.Text = CalloutText;
-Callout.Icon = CalloutIcon;
-exports.Callout = Callout;
-
-// src/components/Callout/Callout.types.ts
-exports.CalloutTypes = {
-  INFORMATION: "INFORMATION",
-  ALERT: "ALERT"
-};
 var StyledPopper = styled6__default.default.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
@@ -1974,474 +1928,229 @@ exports.PopperPortal = React3.forwardRef(
 Popper.Trigger = exports.PopperTrigger;
 Popper.Portal = exports.PopperPortal;
 exports.Popper = 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 react$1.css`
-        padding: 4px 4px 4px 12px;
-      `;
-    case "S":
-      return react$1.css`
-        padding: 4px 4px 4px 8px;
-        gap: 4px;
-      `;
-    default:
-      return react$1.css`
-        padding: 4px 4px 4px 12px;
-      `;
+var Container2 = styled6__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+`;
+var IconButton2 = styled6__default.default.button`
+  display: flex;
+  width: 16px;
+  height: 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${exports.borderRadiusTokens.borderRadius04};
+  border: none;
+  background: ${({ color }) => exports.colorTokens[color]};
+  cursor: pointer;
+  transition:
+    transform 0.1s ease-out,
+    background 0.1s ease;
+
+  &:hover {
+    background: ${({ color }) => exports.colorTokens[getNextColor(color, 1)]};
   }
-};
-var getDropdownIconSizeBySizeVar = (size2) => {
-  switch (size2) {
-    case "S":
+`;
+var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
+var MinusButton = React3.forwardRef((_a, ref) => {
+  var _b = _a, { onClick, color = "neutral300" } = _b, rest = __objRest(_b, ["onClick", "color"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({ color, onClick, ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
+exports.MinusButton = MinusButton;
+var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+  switch (styleVariant) {
+    case "PRIMARY":
+      if (isSelected) {
+        return react$1.css`
+          background: ${exports.colorTokens.primary300};
+          border: 1.5px solid ${exports.colorTokens.primary300};
+          & > svg > path {
+            fill: ${exports.colorTokens.neutral0};
+          }
+          ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
+            background: ${exports.colorTokens.primary400};
+          `}
+        `;
+      }
       return react$1.css`
-        height: 24px;
-        width: 24px;
-        min-width: 24px;
-        min-height: 24px;
+        background: ${exports.colorTokens.neutral200};
+        border: 1.5px solid ${exports.colorTokens.neutral200};
+        border-radius: 4px;
+        ${isHovered && react$1.css`
+          border: 1.5px solid ${exports.colorTokens.neutral300};
+          background: ${exports.colorTokens.neutral300};
+        `}
+
+        & > svg > path {
+          fill: ${exports.colorTokens.neutral0};
+        }
       `;
-    case "M":
+    case "LINE":
+      if (isSelected) {
+        return react$1.css`
+          border: 1.5px solid ${exports.colorTokens.primary300};
+          background: transparent;
+          border-radius: 4px;
+          & > svg > path {
+            fill: ${exports.colorTokens.primary300};
+          }
+          ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
+            & > svg > path {
+              fill: ${exports.colorTokens.primary400};
+            }
+          `}
+        `;
+      }
       return react$1.css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
+        background: transparent;
+        border: 1.5px solid ${exports.colorTokens.neutral200};
+        border-radius: 4px;
+        & > svg > path {
+          fill: ${exports.colorTokens.neutral200};
+        }
+        ${isHovered && react$1.css`
+          border: 1.5px solid ${exports.colorTokens.neutral300};
+          & > svg > path {
+            fill: ${exports.colorTokens.neutral300};
+          }
+        `}
       `;
     default:
-      return react$1.css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
+      return "";
   }
 };
-var StyledDropdown = styled6__default.default.div`
-  width: ${({ width }) => width};
+var StyledCheckHiddenInput = styled6__default.default.input`
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
 `;
-var StyledDropdownContent = styled6__default.default.div`
+var StyledCheckbox = styled6__default.default.label`
   display: flex;
-  flex-direction: column;
-  background: ${exports.colorTokens.neutral0};
-  width: ${({ width }) => width != null ? width : "240px"};
-  padding: 4px;
-  border-radius: 6px;
-  box-shadow: ${exports.boxShadowTokens.dropShadow};
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  background: ${exports.colorTokens.neutral200};
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var StyledDropdownButton = styled6__default.default.button`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  gap: 8px;
-  cursor: pointer;
-  background-color: ${exports.colorTokens.neutral0};
-  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
-  ${({ disabled }) => disabled && react$1.css`
-      background-color: ${exports.colorTokens.neutral100};
-      cursor: not-allowed;
-    `}
-`;
-var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
+var Container3 = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
-`;
-var DropdownContext = React3.createContext(null);
-var useDropdown = () => {
-  const context = React3.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 exports.colorTokens.red300;
-    }
-    if (isFocused) {
-      return exports.colorTokens.primary300;
-    }
-    if (isHovered) {
-      return exports.colorTokens.neutral700;
-    }
-  }
-  return exports.colorTokens.neutral300;
-};
-var getStyleByType = ({
-  type,
-  height,
-  minHeight,
-  maxHeight,
-  width,
-  minWidth,
-  maxWidth,
-  borderRadius,
-  customNumberInputHeight
-}) => {
-  if (type === "number") {
-    return react$1.css`
-      width: ${width || "64px"};
-      height: ${customNumberInputHeight || "32px"};
-      border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
-    `;
-  }
-  return react$1.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 ? exports.borderRadiusTokens[borderRadius] : "6px"};
-  `;
-};
-var InputWrapper = styled6__default.default.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: ${exports.colorTokens.neutral0};
-  overflow: hidden;
-  ${({ disabled }) => disabled && react$1.css`
-      background-color: ${exports.colorTokens.neutral100};
-      cursor: not-allowed;
-    `};
-`;
-
-// src/components/Icon/Icon.types.ts
-exports.IconSizeVariants = {
-  XS: "XS",
-  S: "S",
-  M: "M",
-  L: "L",
-  XL: "XL"
-};
-
-// src/components/Icon/Icon.styled.ts
-var getIconSize = (size2) => {
-  switch (size2) {
-    case exports.IconSizeVariants.XS:
-      return "12px";
-    case exports.IconSizeVariants.S:
-      return "20px";
-    case exports.IconSizeVariants.M:
-      return "24px";
-    case exports.IconSizeVariants.L:
-      return "30px";
-    case exports.IconSizeVariants.XL:
-      return "36px";
-    default:
-      return "fit-content";
-  }
-};
-exports.StyledIcon = styled6__default.default.svg`
-  width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  & > path {
-    fill: ${({ color }) => color && exports.colorTokens[color]};
-  }
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+  background-color: transparent;
 `;
-var Icon = React3.forwardRef((_a, ref) => {
-  var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
-});
-exports.Icon = Icon;
-var DropdownButton = React3.forwardRef(
+exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
+var Checkbox = 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"]);
-    const { isOpen, setIsOpen } = useDropdown();
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const handleOnClick = (e) => {
-      if (!disabled) {
-        onClick && onClick(e);
-        setIsOpen(!isOpen);
-      }
-    };
-    const handleOnMouseEnter = () => {
-      setIsHovered(true);
+    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] = React3.useState(false);
+    const handleMouseLeave = (e) => {
+      toggleHovered(false);
+      onMouseLeave && onMouseLeave(e);
     };
-    const handleOnMouseLeave = () => {
-      setIsHovered(false);
+    const handleMouseEnter = (e) => {
+      toggleHovered(true);
+      onMouseEnter && onMouseEnter(e);
     };
-    const getTextColor = ({ value: value2, disabled: disabled2 }) => {
-      if (disabled2) {
-        return "neutral350";
-      }
-      if (!value2) {
-        return "neutral400";
+    const handleClick = (e) => {
+      if (disabled) {
+        return;
       }
-      return "neutral700";
+      onClick && onClick(e);
+      toggleSelected();
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      InputWrapper,
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Container3,
       {
-        onMouseEnter: handleOnMouseEnter,
-        onMouseLeave: handleOnMouseLeave,
-        isFocused: isOpen,
-        isHovered,
+        onClick: handleClick,
+        onMouseLeave: handleMouseLeave,
+        onMouseEnter: handleMouseEnter,
         disabled,
-        width,
-        isError,
-        height: getDropdownHeightBySizeVar(sizeVar),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          leftSource && leftSource,
-          value || /* @__PURE__ */ jsxRuntime.jsx(
-            exports.Text,
-            {
-              typography: getDropdownFontSizeBySizeVar(sizeVar),
-              color: getTextColor({ value, disabled }),
-              textOverflow: "ellipsis",
-              lineClamp: 1,
-              children: placeholder
-            }
-          ),
+        type: "button",
+        "data-shoplflow": "Checkbox",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
           /* @__PURE__ */ jsxRuntime.jsx(
-            DropdownButtonIcon,
+            StyledCheckbox,
             {
-              sizeVar,
-              animate: {
-                rotate: isOpen ? 180 : 0
-              },
-              transition: {
-                duration: 0.2
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
+              styleVar,
+              htmlFor: id,
+              isHovered,
+              isSelected: selected,
+              disabled,
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.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"
+                }
+              ) })
             }
           )
-        ] }))
+        ]
       }
     );
   }
 );
-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);
+Checkbox[exports.CHECKBOX_SYMBOL_KEY] = true;
+exports.Checkbox = Checkbox;
+
+// src/components/ControlButtons/Checkbox/Checkbox.types.ts
+exports.CheckboxStyleVariants = {
+  PRIMARY: "PRIMARY",
+  LINE: "LINE"
+};
+var getSelectedStyle = (isHovered) => {
+  return react$1.css`
+    & > svg > circle {
+      stroke: ${exports.colorTokens.primary300};
     }
-    return utils.noop;
-  };
-  const handleClick = (e) => {
-    onClick && onClick(e);
-    if (option === "CLICK") {
-      setIsOpen(false);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
-};
-var Dropdown = ({
-  isOpen: initialIsOpen = false,
-  trigger,
-  popper,
-  option = "CLICK",
-  width = "100%"
-}) => {
-  const [triggerRef, setTriggerRef] = React3.useState(null);
-  const [size2, setSize] = React3.useState({ width: 0, height: 0 });
-  const [isOpen, setIsOpen] = React3.useState(false);
-  React3.useEffect(() => {
-    if (triggerRef) {
-      setSize({
-        width: triggerRef.offsetWidth,
-        height: triggerRef.offsetHeight
-      });
-    }
-  }, [triggerRef]);
-  React3.useEffect(() => {
-    if (initialIsOpen === void 0) {
-      return;
-    }
-    setIsOpen(initialIsOpen);
-  }, [initialIsOpen]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
-    exports.Popper,
-    {
-      offset: 4,
-      autoPlacement: {
-        allowedPlacements: ["bottom-start", "top-start"]
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { ref: setTriggerRef, isOpen, width, children: trigger }),
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: popper })
-      ]
-    }
-  ) }) });
-};
-Dropdown.Button = DropdownButton;
-Dropdown.Content = DropdownContent;
-exports.Dropdown = Dropdown;
-var Container2 = styled6__default.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 4px;
-`;
-var IconButton2 = styled6__default.default.button`
-  display: flex;
-  width: 16px;
-  height: 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: ${exports.borderRadiusTokens.borderRadius04};
-  border: none;
-  background: ${({ color }) => exports.colorTokens[color]};
-  cursor: pointer;
-  transition:
-    transform 0.1s ease-out,
-    background 0.1s ease;
-
-  &:hover {
-    background: ${({ color }) => exports.colorTokens[getNextColor(color, 1)]};
-  }
-`;
-var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
-var MinusButton = React3.forwardRef((_a, ref) => {
-  var _b = _a, { onClick, color = "neutral300" } = _b, rest = __objRest(_b, ["onClick", "color"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({ color, onClick, ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
-exports.MinusButton = MinusButton;
-var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
-  switch (styleVariant) {
-    case "PRIMARY":
-      if (isSelected) {
-        return react$1.css`
-          background: ${exports.colorTokens.primary300};
-          border: 1.5px solid ${exports.colorTokens.primary300};
-          & > svg > path {
-            fill: ${exports.colorTokens.neutral0};
-          }
-          ${isHovered && react$1.css`
-            border: 1.5px solid ${exports.colorTokens.primary400};
-            background: ${exports.colorTokens.primary400};
-          `}
-        `;
-      }
-      return react$1.css`
-        background: ${exports.colorTokens.neutral200};
-        border: 1.5px solid ${exports.colorTokens.neutral200};
-        border-radius: 4px;
-        ${isHovered && react$1.css`
-          border: 1.5px solid ${exports.colorTokens.neutral300};
-          background: ${exports.colorTokens.neutral300};
-        `}
-
-        & > svg > path {
-          fill: ${exports.colorTokens.neutral0};
-        }
-      `;
-    case "LINE":
-      if (isSelected) {
-        return react$1.css`
-          border: 1.5px solid ${exports.colorTokens.primary300};
-          background: transparent;
-          border-radius: 4px;
-          & > svg > path {
-            fill: ${exports.colorTokens.primary300};
-          }
-          ${isHovered && react$1.css`
-            border: 1.5px solid ${exports.colorTokens.primary400};
-            & > svg > path {
-              fill: ${exports.colorTokens.primary400};
-            }
-          `}
-        `;
+    ${isHovered && react$1.css`
+      & > svg > circle {
+        stroke: ${exports.colorTokens.primary400};
       }
-      return react$1.css`
-        background: transparent;
-        border: 1.5px solid ${exports.colorTokens.neutral200};
-        border-radius: 4px;
-        & > svg > path {
-          fill: ${exports.colorTokens.neutral200};
-        }
-        ${isHovered && react$1.css`
-          border: 1.5px solid ${exports.colorTokens.neutral300};
-          & > svg > path {
-            fill: ${exports.colorTokens.neutral300};
-          }
-        `}
-      `;
-    default:
-      return "";
-  }
+    `}
+  `;
 };
-var StyledCheckHiddenInput = styled6__default.default.input`
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  visibility: hidden;
-`;
-var StyledCheckbox = styled6__default.default.label`
+var StyledRadio = styled6__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2449,125 +2158,25 @@ var StyledCheckbox = styled6__default.default.label`
   min-height: 16px;
   width: 16px;
   height: 16px;
-  background: ${exports.colorTokens.neutral200};
-  border-radius: 4px;
-  box-sizing: border-box;
+  ${({ isHovered }) => react$1.css`
+    & > svg > circle {
+      stroke: ${exports.colorTokens.neutral200};
+    }
+    ${isHovered && react$1.css`
+      & > svg > circle {
+        stroke: ${exports.colorTokens.neutral300};
+      }
+    `}
+  `}
   cursor: pointer;
-  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
+  ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container3 = styled6__default.default.button`
+var Container4 = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4px;
-  width: fit-content;
-  height: fit-content;
-  background-color: transparent;
-`;
-exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
-var Checkbox = React3.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] = React3.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__ */ jsxRuntime.jsxs(
-      Container3,
-      {
-        onClick: handleClick,
-        onMouseLeave: handleMouseLeave,
-        onMouseEnter: handleMouseEnter,
-        disabled,
-        type: "button",
-        "data-shoplflow": "Checkbox",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StyledCheckbox,
-            {
-              styleVar,
-              htmlFor: id,
-              isHovered,
-              isSelected: selected,
-              disabled,
-              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.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[exports.CHECKBOX_SYMBOL_KEY] = true;
-exports.Checkbox = Checkbox;
-
-// src/components/ControlButtons/Checkbox/Checkbox.types.ts
-exports.CheckboxStyleVariants = {
-  PRIMARY: "PRIMARY",
-  LINE: "LINE"
-};
-var getSelectedStyle = (isHovered) => {
-  return react$1.css`
-    & > svg > circle {
-      stroke: ${exports.colorTokens.primary300};
-    }
-    ${isHovered && react$1.css`
-      & > svg > circle {
-        stroke: ${exports.colorTokens.primary400};
-      }
-    `}
-  `;
-};
-var StyledRadio = styled6__default.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  width: 16px;
-  height: 16px;
-  ${({ isHovered }) => react$1.css`
-    & > svg > circle {
-      stroke: ${exports.colorTokens.neutral200};
-    }
-    ${isHovered && react$1.css`
-      & > svg > circle {
-        stroke: ${exports.colorTokens.neutral300};
-      }
-    `}
-  `}
-  cursor: pointer;
-  ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
-  ${({ disabled }) => getDisabledStyle(disabled)}
-`;
-var Container4 = styled6__default.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
+  background: transparent;
   padding: 4px;
   width: fit-content;
   height: fit-content;
@@ -2715,6 +2324,524 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
+exports.DropdownButtonContext = React3.createContext(null);
+exports.useDropdownButtonContext = () => {
+  const context = React3.useContext(exports.DropdownButtonContext);
+  if (!context) {
+    throw new Error("DropdownButtonContext must be used within a DropdownButton component");
+  }
+  return context;
+};
+
+// src/components/Icon/Icon.types.ts
+exports.IconSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
+};
+
+// src/components/Icon/Icon.styled.ts
+var getIconSize = (size2) => {
+  switch (size2) {
+    case exports.IconSizeVariants.XS:
+      return "12px";
+    case exports.IconSizeVariants.S:
+      return "20px";
+    case exports.IconSizeVariants.M:
+      return "24px";
+    case exports.IconSizeVariants.L:
+      return "30px";
+    case exports.IconSizeVariants.XL:
+      return "36px";
+    default:
+      return "fit-content";
+  }
+};
+exports.StyledIcon = styled6__default.default.svg`
+  width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  min-height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  & > path {
+    fill: ${({ color }) => color && exports.colorTokens[color]};
+  }
+`;
+var Icon = React3.forwardRef((_a, ref) => {
+  var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
+});
+exports.Icon = Icon;
+var DropdownButtonMenu = (_a) => {
+  var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
+  const { setIsOpen } = exports.useDropdownButtonContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Menu,
+    __spreadProps(__spreadValues({
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onClick == null ? void 0 : onClick(event);
+        setIsOpen(false);
+      }
+    }, 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 = React3.useRef(`shoplflow-${crypto.randomUUID()}-dropdown-button`).current;
+  const [isOpen, setIsOpen] = utils.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__ */ jsxRuntime.jsx(exports.DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Button,
+      __spreadProps(__spreadValues({
+        "data-shoplflow": "DropdownButton",
+        className: _className,
+        sizeVar,
+        styleVar: _styleVar,
+        disabled,
+        color,
+        rightSource: /* @__PURE__ */ jsxRuntime.jsx(
+          StyledArrowIcon,
+          {
+            animate: {
+              rotate: isOpen ? 180 : 0
+            },
+            transition: {
+              duration: 0.2
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Icon,
+              {
+                iconSource: ShoplAssets.DownArrowSolidXsmallIcon,
+                color: styleVar === "PRIMARY" ? "coolgray300" : "neutral400",
+                sizeVar: "XS"
+              }
+            )
+          }
+        ),
+        onClick: () => {
+          if (disabled) {
+            return;
+          }
+          setIsOpen((prev) => !prev);
+        }
+      }, rest), {
+        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_400", color: "neutral700", children: text })
+      })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { zIndex: floatingZIndex, children: /* @__PURE__ */ jsxRuntime.jsx(StyledPopoverContentWrapper, { className: _className, children }) })
+  ] }) });
+};
+DropdownButton.Menu = DropdownButtonMenu;
+exports.DropdownButton = DropdownButton;
+
+// src/components/Buttons/DropdownButton/DropdownButton.types.ts
+exports.DropdownButtonSizeVariants = {
+  S: "S",
+  M: "M"
+};
+exports.DropdownButtonStyleVariants = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY"
+};
+var informationStyle = react$1.css`
+  background: ${exports.colorTokens.neutral100};
+  & > span {
+    color: ${exports.colorTokens.neutral600};
+  }
+  & > svg > path {
+    fill: ${exports.colorTokens.neutral600};
+  }
+`;
+var alertStyle = react$1.css`
+  background: ${exports.colorTokens.red100};
+  & > span {
+    align-self: center;
+    color: ${exports.colorTokens.red300};
+  }
+  & > svg > path {
+    fill: ${exports.colorTokens.red300};
+  }
+`;
+var StyledCallout = styled6__default.default.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: start;
+  padding: 6px 8px;
+  gap: 4px;
+  border-radius: ${exports.borderRadiusTokens.borderRadius08};
+  ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
+  ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
+`;
+var StyledCalloutIcon = styled6__default.default.svg`
+  display: flex;
+  height: 20px;
+  min-height: 20px;
+  width: 20px;
+  min-width: 20px;
+`;
+styled6__default.default.div`
+  padding: 2px 0;
+`;
+var Callout = (_a) => {
+  var _b = _a, { children, styleVar = "INFORMATION" } = _b, rest = __objRest(_b, ["children", "styleVar"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", children }));
+};
+var CalloutText = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
+};
+var CalloutIcon = ({ iconSource }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, { as: iconSource });
+};
+Callout.Text = CalloutText;
+Callout.Icon = CalloutIcon;
+exports.Callout = Callout;
+
+// src/components/Callout/Callout.types.ts
+exports.CalloutTypes = {
+  INFORMATION: "INFORMATION",
+  ALERT: "ALERT"
+};
+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 react$1.css`
+        padding: 4px 4px 4px 12px;
+      `;
+    case "S":
+      return react$1.css`
+        padding: 4px 4px 4px 8px;
+        gap: 4px;
+      `;
+    default:
+      return react$1.css`
+        padding: 4px 4px 4px 12px;
+      `;
+  }
+};
+var getDropdownIconSizeBySizeVar = (size2) => {
+  switch (size2) {
+    case "S":
+      return react$1.css`
+        height: 24px;
+        width: 24px;
+        min-width: 24px;
+        min-height: 24px;
+      `;
+    case "M":
+      return react$1.css`
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        min-height: 32px;
+      `;
+    default:
+      return react$1.css`
+        height: 32px;
+        width: 32px;
+        min-width: 32px;
+        min-height: 32px;
+      `;
+  }
+};
+var StyledDropdown = styled6__default.default.div`
+  width: ${({ width }) => width};
+`;
+var StyledDropdownContent = styled6__default.default.div`
+  display: flex;
+  flex-direction: column;
+  background: ${exports.colorTokens.neutral0};
+  width: ${({ width }) => width != null ? width : "240px"};
+  padding: 4px;
+  border-radius: 6px;
+  box-shadow: ${exports.boxShadowTokens.dropShadow};
+`;
+var StyledDropdownButton = styled6__default.default.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  gap: 8px;
+  cursor: pointer;
+  background-color: ${exports.colorTokens.neutral0};
+  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
+      cursor: not-allowed;
+    `}
+`;
+var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
+`;
+var DropdownContext = React3.createContext(null);
+var useDropdown = () => {
+  const context = React3.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 exports.colorTokens.red300;
+    }
+    if (isFocused) {
+      return exports.colorTokens.primary300;
+    }
+    if (isHovered) {
+      return exports.colorTokens.neutral700;
+    }
+  }
+  return exports.colorTokens.neutral300;
+};
+var getStyleByType = ({
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  minWidth,
+  maxWidth,
+  borderRadius,
+  customNumberInputHeight
+}) => {
+  if (type === "number") {
+    return react$1.css`
+      width: ${width || "64px"};
+      height: ${customNumberInputHeight || "32px"};
+      border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
+    `;
+  }
+  return react$1.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 ? exports.borderRadiusTokens[borderRadius] : "6px"};
+  `;
+};
+var InputWrapper = styled6__default.default.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: ${exports.colorTokens.neutral0};
+  overflow: hidden;
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
+      cursor: not-allowed;
+    `};
+`;
+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"]);
+    const { isOpen, setIsOpen } = useDropdown();
+    const [isHovered, setIsHovered] = React3.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";
+      }
+      return "neutral700";
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InputWrapper,
+      {
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        isFocused: isOpen,
+        isHovered,
+        disabled,
+        width,
+        isError,
+        height: getDropdownHeightBySizeVar(sizeVar),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
+          leftSource && leftSource,
+          value || /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Text,
+            {
+              typography: getDropdownFontSizeBySizeVar(sizeVar),
+              color: getTextColor({ value, disabled }),
+              textOverflow: "ellipsis",
+              lineClamp: 1,
+              children: placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownButtonIcon,
+            {
+              sizeVar,
+              animate: {
+                rotate: isOpen ? 180 : 0
+              },
+              transition: {
+                duration: 0.2
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowSolidXsmallIcon, color: "neutral400", 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 utils.noop;
+  };
+  const handleClick = (e) => {
+    onClick && onClick(e);
+    if (option === "CLICK") {
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
+};
+var Dropdown = ({
+  isOpen: initialIsOpen = false,
+  trigger,
+  popper,
+  option = "CLICK",
+  width = "100%"
+}) => {
+  const [triggerRef, setTriggerRef] = React3.useState(null);
+  const [size2, setSize] = React3.useState({ width: 0, height: 0 });
+  const [isOpen, setIsOpen] = React3.useState(false);
+  React3.useEffect(() => {
+    if (triggerRef) {
+      setSize({
+        width: triggerRef.offsetWidth,
+        height: triggerRef.offsetHeight
+      });
+    }
+  }, [triggerRef]);
+  React3.useEffect(() => {
+    if (initialIsOpen === void 0) {
+      return;
+    }
+    setIsOpen(initialIsOpen);
+  }, [initialIsOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.Popper,
+    {
+      offset: 4,
+      autoPlacement: {
+        allowedPlacements: ["bottom-start", "top-start"]
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { ref: setTriggerRef, isOpen, width, children: trigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: popper })
+      ]
+    }
+  ) }) });
+};
+Dropdown.Button = DropdownTriggerButton;
+Dropdown.Content = DropdownContent;
+exports.Dropdown = Dropdown;
 var StyledList = styled6__default.default.li`
   display: flex;
   flex-direction: row;