@shoplflow/base 0.42.2 → 0.42.4

package/dist/index.cjs

@@ -1212,10 +1212,25 @@ exports.Modal = {
   Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
+var getContainerStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "S":
+      return react$1.css`
+        width: 24px;
+        height: 24px;
+        border-radius: ${exports.borderRadiusTokens.borderRadius04};
+      `;
+    case "M":
+      return react$1.css`
+        border-radius: ${exports.borderRadiusTokens.borderRadius06};
+        width: 32px;
+        height: 32px;
+      `;
+  }
+};
 var SwitchContainer = styled6__default.default.div`
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
+  ${({ sizeVar }) => getContainerStylesBySizeVar(sizeVar)}
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1225,12 +1240,42 @@ var SwitchContainer = styled6__default.default.div`
     background: ${({ isDisabled }) => !isDisabled && exports.colorTokens.neutral400_5};
   }
 `;
+var getCircleStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "S":
+      return react$1.css`
+        width: 12px;
+        height: 12px;
+        aspect-ratio: 1/1;
+        border-radius: ${exports.borderRadiusTokens.borderRadius04};
+      `;
+    case "M":
+      return react$1.css`
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      `;
+  }
+};
+var getSwitchStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "S":
+      return react$1.css`
+        border-radius: ${exports.borderRadiusTokens.borderRadius06};
+        width: 24px;
+        height: 16px;
+      `;
+    case "M":
+      return react$1.css`
+        border-radius: 12px;
+        width: 28px;
+        height: 18px;
+      `;
+  }
+};
 var StyledSwitch = styled6__default.default.input`
   appearance: none;
   border: none;
-  border-radius: 12px;
-  width: 28px;
-  height: 18px;
   cursor: pointer;
   position: relative;
   display: flex;
@@ -1239,16 +1284,16 @@ var StyledSwitch = styled6__default.default.input`
   padding: 2px;
   margin: 0;
 
+  ${({ sizeVar }) => getSwitchStylesBySizeVar(sizeVar)}
+
   // slider
   &:before {
     content: '';
     left: 2px;
     display: block;
     position: absolute;
-    width: 14px;
-    height: 14px;
+    ${({ sizeVar }) => getCircleStylesBySizeVar(sizeVar)}
     background: ${exports.colorTokens.neutral0};
-    border-radius: 50%;
     transition: left 0.2s ease-in-out;
   }
 
@@ -1256,7 +1301,7 @@ var StyledSwitch = styled6__default.default.input`
   &:checked {
     background: ${({ activeColor }) => exports.colorTokens[activeColor]};
     &:before {
-      left: 12px;
+      left: ${({ sizeVar }) => sizeVar === "S" ? "10px" : "12px"};
     }
   }
 
@@ -1289,27 +1334,30 @@ var Switch = (_a) => {
     isSelected,
     disabled = false,
     activeColor = "primary300",
-    defaultSelected = false
+    defaultSelected = false,
+    sizeVar = "M"
   } = _b, rest = __objRest(_b, [
     "onChange",
     "isSelected",
     "disabled",
     "activeColor",
-    "defaultSelected"
+    "defaultSelected",
+    "sizeVar"
   ]);
   const [isToggled, handleToggle] = useOnToggle(isSelected, defaultSelected);
   const handleOnChange = (e) => {
     handleToggle();
     onChange && onChange(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(SwitchContainer, { isDisabled: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(SwitchContainer, { isDisabled: disabled, sizeVar, children: /* @__PURE__ */ jsxRuntime.jsx(
     StyledSwitch,
     __spreadProps(__spreadValues({
       type: "checkbox",
       checked: isToggled,
       disabled,
       onChange: handleOnChange,
-      activeColor
+      activeColor,
+      sizeVar
     }, rest), {
       "data-shoplflow": "Switch"
     })
@@ -1317,6 +1365,12 @@ var Switch = (_a) => {
 };
 exports.Switch = Switch;
 
+// src/components/Switch/Switch.types.ts
+exports.SwitchSizeVariants = {
+  S: "S",
+  M: "M"
+};
+
 // src/components/Chips/ChipToggle/ChipToggle.types.ts
 exports.ChipToggleStyleVariants = {
   SOLID: "SOLID"

package/dist/index.d.cts

@@ -559,13 +559,18 @@ interface BackDropProps extends ChildrenProps, BackDropOptionProps {
 interface BackDropOptionProps {
 }
 
-interface SwitchProps extends SwitchOptionProps, DisableProps, SelectedProps, DefaultSelectedProps, HTMLAttributes<HTMLInputElement> {
+declare const SwitchSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type SwitchSizeVariantType = $Values<typeof SwitchSizeVariants>;
+interface SwitchProps extends SwitchOptionProps, DisableProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<SwitchSizeVariantType>, HTMLAttributes<HTMLInputElement> {
 }
 interface SwitchOptionProps {
     activeColor: ColorTokens;
 }
 
-declare const Switch: ({ onChange, isSelected, disabled, activeColor, defaultSelected, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: ({ onChange, isSelected, disabled, activeColor, defaultSelected, sizeVar, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
 
 declare const ChipToggleStyleVariants: {
     readonly SOLID: "SOLID";
@@ -1694,4 +1699,4 @@ interface MemoizedSearchBarComponent extends React.MemoExoticComponent<SearchBar
 
 declare const SearchBar: MemoizedSearchBarComponent;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, 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, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, 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, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, SwitchSizeVariantType, SwitchSizeVariants, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.d.ts

@@ -559,13 +559,18 @@ interface BackDropProps extends ChildrenProps, BackDropOptionProps {
 interface BackDropOptionProps {
 }
 
-interface SwitchProps extends SwitchOptionProps, DisableProps, SelectedProps, DefaultSelectedProps, HTMLAttributes<HTMLInputElement> {
+declare const SwitchSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type SwitchSizeVariantType = $Values<typeof SwitchSizeVariants>;
+interface SwitchProps extends SwitchOptionProps, DisableProps, SelectedProps, DefaultSelectedProps, SizeVariantProps<SwitchSizeVariantType>, HTMLAttributes<HTMLInputElement> {
 }
 interface SwitchOptionProps {
     activeColor: ColorTokens;
 }
 
-declare const Switch: ({ onChange, isSelected, disabled, activeColor, defaultSelected, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: ({ onChange, isSelected, disabled, activeColor, defaultSelected, sizeVar, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
 
 declare const ChipToggleStyleVariants: {
     readonly SOLID: "SOLID";
@@ -1694,4 +1699,4 @@ interface MemoizedSearchBarComponent extends React.MemoExoticComponent<SearchBar
 
 declare const SearchBar: MemoizedSearchBarComponent;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, 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, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, 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, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownItem, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MemoizedSearchBarComponent, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SearchBar, SearchBarBaseProps, SearchBarCategoryProps, SearchBarComponent, SearchBarInputProps, SearchBarProps, SearchType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, SwitchSizeVariantType, SwitchSizeVariants, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.js

@@ -1185,10 +1185,25 @@ var Modal = {
   Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
+var getContainerStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "S":
+      return css`
+        width: 24px;
+        height: 24px;
+        border-radius: ${borderRadiusTokens.borderRadius04};
+      `;
+    case "M":
+      return css`
+        border-radius: ${borderRadiusTokens.borderRadius06};
+        width: 32px;
+        height: 32px;
+      `;
+  }
+};
 var SwitchContainer = styled6.div`
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
+  ${({ sizeVar }) => getContainerStylesBySizeVar(sizeVar)}
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1198,12 +1213,42 @@ var SwitchContainer = styled6.div`
     background: ${({ isDisabled }) => !isDisabled && colorTokens.neutral400_5};
   }
 `;
+var getCircleStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "S":
+      return css`
+        width: 12px;
+        height: 12px;
+        aspect-ratio: 1/1;
+        border-radius: ${borderRadiusTokens.borderRadius04};
+      `;
+    case "M":
+      return css`
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      `;
+  }
+};
+var getSwitchStylesBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "S":
+      return css`
+        border-radius: ${borderRadiusTokens.borderRadius06};
+        width: 24px;
+        height: 16px;
+      `;
+    case "M":
+      return css`
+        border-radius: 12px;
+        width: 28px;
+        height: 18px;
+      `;
+  }
+};
 var StyledSwitch = styled6.input`
   appearance: none;
   border: none;
-  border-radius: 12px;
-  width: 28px;
-  height: 18px;
   cursor: pointer;
   position: relative;
   display: flex;
@@ -1212,16 +1257,16 @@ var StyledSwitch = styled6.input`
   padding: 2px;
   margin: 0;
 
+  ${({ sizeVar }) => getSwitchStylesBySizeVar(sizeVar)}
+
   // slider
   &:before {
     content: '';
     left: 2px;
     display: block;
     position: absolute;
-    width: 14px;
-    height: 14px;
+    ${({ sizeVar }) => getCircleStylesBySizeVar(sizeVar)}
     background: ${colorTokens.neutral0};
-    border-radius: 50%;
     transition: left 0.2s ease-in-out;
   }
 
@@ -1229,7 +1274,7 @@ var StyledSwitch = styled6.input`
   &:checked {
     background: ${({ activeColor }) => colorTokens[activeColor]};
     &:before {
-      left: 12px;
+      left: ${({ sizeVar }) => sizeVar === "S" ? "10px" : "12px"};
     }
   }
 
@@ -1262,27 +1307,30 @@ var Switch = (_a) => {
     isSelected,
     disabled = false,
     activeColor = "primary300",
-    defaultSelected = false
+    defaultSelected = false,
+    sizeVar = "M"
   } = _b, rest = __objRest(_b, [
     "onChange",
     "isSelected",
     "disabled",
     "activeColor",
-    "defaultSelected"
+    "defaultSelected",
+    "sizeVar"
   ]);
   const [isToggled, handleToggle] = useOnToggle(isSelected, defaultSelected);
   const handleOnChange = (e) => {
     handleToggle();
     onChange && onChange(e);
   };
-  return /* @__PURE__ */ jsx(SwitchContainer, { isDisabled: disabled, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SwitchContainer, { isDisabled: disabled, sizeVar, children: /* @__PURE__ */ jsx(
     StyledSwitch,
     __spreadProps(__spreadValues({
       type: "checkbox",
       checked: isToggled,
       disabled,
       onChange: handleOnChange,
-      activeColor
+      activeColor,
+      sizeVar
     }, rest), {
       "data-shoplflow": "Switch"
     })
@@ -1290,6 +1338,12 @@ var Switch = (_a) => {
 };
 var Switch_default = Switch;
 
+// src/components/Switch/Switch.types.ts
+var SwitchSizeVariants = {
+  S: "S",
+  M: "M"
+};
+
 // src/components/Chips/ChipToggle/ChipToggle.types.ts
 var ChipToggleStyleVariants = {
   SOLID: "SOLID"
@@ -7275,4 +7329,4 @@ 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, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, 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, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SearchBar2 as SearchBar, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, 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 };
+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, DropdownOptionVariants, 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, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SearchBar2 as SearchBar, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, SwitchSizeVariants, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.42.2",
+  "version": "0.42.4",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.7",
-    "@shoplflow/shopl-assets": "^0.12.21",
+    "@shoplflow/shopl-assets": "^0.12.22",
     "@shoplflow/utils": "^0.7.0"
   },
   "scripts": {