@shoplflow/base 0.17.0 → 0.18.0

package/dist/index.d.cts

@@ -1030,6 +1030,43 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
+}
+interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
+}
+
+declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+
+declare const StyledMenu: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & MenuOptionProps, React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+
+interface ListProps extends ListOptionProps {
+}
+interface ListOptionProps extends ChildrenProps, DisableProps, SelectedProps, LeftNodeProps, RightNodeProps {
+}
+interface ListContent2ColumnsProps extends ChildrenProps {
+}
+interface ListText2RowsProps {
+    title: ReactNode;
+    subTitle?: ReactNode;
+}
+
+declare const List: {
+    ({ children, leftSource, rightSource, ...rest }: ListProps): react_jsx_runtime.JSX.Element;
+    Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare const StyledList: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & ListOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const StyledText2Rows: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
 declare const IconSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
@@ -1132,4 +1169,23 @@ interface MinusBoxOptionProps {
 
 declare const MinusButton: React__default.ForwardRefExoticComponent<MinusBoxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+declare const CheckboxStyleVariants: {
+    readonly PRIMARY: "PRIMARY";
+    readonly LINE: "LINE";
+};
+declare type CheckboxStyleVariantType = $Values<typeof CheckboxStyleVariants>;
+interface CheckboxProps extends CheckboxOptionProps {
+}
+interface CheckboxOptionProps extends StyleVariantProps<CheckboxStyleVariantType>, SelectedProps, DefaultSelectedProps, DisableProps, HTMLAttributes<HTMLButtonElement> {
+}
+
+declare const Checkbox: ({ defaultSelected, isSelected, disabled, onClick, onMouseEnter, onMouseLeave, styleVar, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+interface RadioProps extends RadioOptionProps {
+}
+interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableProps, HTMLAttributes<HTMLButtonElement> {
+}
+
+declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
+
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -1030,6 +1030,43 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+interface MenuProps extends MenuOptionProps, HTMLAttributes<HTMLLIElement> {
+}
+interface MenuOptionProps extends ChildrenProps, DisableProps, RightElementProps, LeftElementProps, SelectedProps, DefaultSelectedProps {
+}
+
+declare const Menu: ({ leftSource, rightSource, children, isSelected, defaultSelected, onClick, disabled, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+
+declare const StyledMenu: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & MenuOptionProps, React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+
+interface ListProps extends ListOptionProps {
+}
+interface ListOptionProps extends ChildrenProps, DisableProps, SelectedProps, LeftNodeProps, RightNodeProps {
+}
+interface ListContent2ColumnsProps extends ChildrenProps {
+}
+interface ListText2RowsProps {
+    title: ReactNode;
+    subTitle?: ReactNode;
+}
+
+declare const List: {
+    ({ children, leftSource, rightSource, ...rest }: ListProps): react_jsx_runtime.JSX.Element;
+    Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare const StyledList: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & ListOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const StyledText2Rows: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
 declare const IconSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
@@ -1132,4 +1169,23 @@ interface MinusBoxOptionProps {
 
 declare const MinusButton: React__default.ForwardRefExoticComponent<MinusBoxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+declare const CheckboxStyleVariants: {
+    readonly PRIMARY: "PRIMARY";
+    readonly LINE: "LINE";
+};
+declare type CheckboxStyleVariantType = $Values<typeof CheckboxStyleVariants>;
+interface CheckboxProps extends CheckboxOptionProps {
+}
+interface CheckboxOptionProps extends StyleVariantProps<CheckboxStyleVariantType>, SelectedProps, DefaultSelectedProps, DisableProps, HTMLAttributes<HTMLButtonElement> {
+}
+
+declare const Checkbox: ({ defaultSelected, isSelected, disabled, onClick, onMouseEnter, onMouseLeave, styleVar, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+interface RadioProps extends RadioOptionProps {
+}
+interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableProps, HTMLAttributes<HTMLButtonElement> {
+}
+
+declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
+
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -833,10 +833,10 @@ var useOnToggle = (selected, defaultSelected) => {
     }
   }, [isControlled, selected]);
   useEffect(() => {
-    if (defaultSelected) {
+    if (defaultSelected !== void 0) {
       setIsToggle(defaultSelected);
     }
-  }, [defaultSelected, isControlled]);
+  }, [defaultSelected]);
   return [isToggle, handleToggle];
 };
 var Switch = (_a) => {
@@ -1809,6 +1809,101 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 var Dropdown_default = Dropdown;
+var StyledMenu = styled5.li`
+  display: flex;
+  flex-direction: row;
+  padding: 6px;
+  width: 100%;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  background: ${colorTokens.neutral0};
+  &:hover {
+    background: ${colorTokens.neutral100};
+  }
+  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
+  ${({ isSelected, leftSource }) => isSelected && !leftSource && css`
+      background: ${colorTokens.neutral200};
+      &:hover {
+        background: ${colorTokens.neutral200};
+      }
+    `}
+`;
+var Menu = (_a) => {
+  var _b = _a, {
+    leftSource,
+    rightSource,
+    children,
+    isSelected,
+    defaultSelected = false,
+    onClick,
+    disabled = false
+  } = _b, rest = __objRest(_b, [
+    "leftSource",
+    "rightSource",
+    "children",
+    "isSelected",
+    "defaultSelected",
+    "onClick",
+    "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({ isSelected: selected, leftSource, onClick: handleOnClick }, rest), { "data-shoplflow": "Menu", children: [
+    leftSource && LeftSourceClone,
+    /* @__PURE__ */ jsx(Stack_default.Horizontal, { width: "100%", align: "center", className: "body1_400", children }),
+    rightSource && rightSource
+  ] }));
+};
+var Menu_default = Menu;
+var StyledList = styled5.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  padding: 6px 8px;
+  gap: 4px;
+  border-radius: 8px;
+  background: ${colorTokens.neutral0};
+  cursor: pointer;
+  ${({ disabled }) => disabled && getDisabledStyle(disabled)}
+  &:hover {
+    background: ${colorTokens.neutral100};
+  }
+`;
+var StyledText2Rows = styled5.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+`;
+var List = (_a) => {
+  var _b = _a, { children, leftSource, rightSource } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource"]);
+  const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
+  if (!children && rightSource) {
+    throw new Error("RightSource\uB294 children\uC774 \uD544\uC218\uB85C \uD3EC\uD568\uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4.");
+  }
+  return /* @__PURE__ */ jsxs(StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List" }, rest), { children: [
+    LeftSourceClone && LeftSourceClone,
+    /* @__PURE__ */ jsx(Stack_default.Horizontal, { height: "36px", width: "100%", spacing: "spacing08", align: "center", children }),
+    rightSource && rightSource
+  ] }));
+};
+var Text2Rows = ({ title, subTitle }) => {
+  return /* @__PURE__ */ jsxs(StyledText2Rows, { children: [
+    /* @__PURE__ */ jsx(Text_default, { typography: "body1_500", color: "neutral700", children: title }),
+    subTitle && /* @__PURE__ */ jsx(Text_default, { typography: "body2_400", color: "neutral400", children: subTitle })
+  ] });
+};
+List.Text2Rows = Text2Rows;
+var List_default = List;
 var StyledInput = styled5.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
@@ -2272,7 +2367,229 @@ var MinusButton = forwardRef((_a, ref) => {
   ] }) })) });
 });
 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`
+            background: ${colorTokens.primary400};
+          `}
+        `;
+      }
+      return css`
+        background: ${colorTokens.neutral200};
+        border: 1.5px solid ${colorTokens.neutral200};
+        border-radius: 4px;
+        ${isHovered && css`
+          background: ${colorTokens.neutral300};
+        `}
+
+        & > svg > path {
+          fill: ${colorTokens.neutral0};
+        }
+      `;
+    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`
+        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 "";
+  }
+};
+var StyledCheckbox = styled5.button`
+  display: flex;
+  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 Container3 = styled5.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+`;
+var Checkbox = (_a) => {
+  var _b = _a, {
+    defaultSelected,
+    isSelected,
+    disabled,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    styleVar = "PRIMARY"
+  } = _b, rest = __objRest(_b, [
+    "defaultSelected",
+    "isSelected",
+    "disabled",
+    "onClick",
+    "onMouseEnter",
+    "onMouseLeave",
+    "styleVar"
+  ]);
+  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(
+    Container3,
+    __spreadProps(__spreadValues({
+      onClick: handleClick,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter,
+      disabled
+    }, rest), {
+      "data-shoplflow": "Checkbox",
+      children: /* @__PURE__ */ jsx(StyledCheckbox, { styleVar, 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"
+        }
+      ) }) })
+    })
+  );
+};
+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 = styled5.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 Container4 = styled5.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+`;
+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" }) }) })
+    })
+  );
+};
+var Radio_default = Radio;
 
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledPopper, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Button_default as Button, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map