@shoplflow/base 0.32.19 → 0.32.21

package/dist/index.cjs

@@ -11,8 +11,8 @@ var Scrollbars = require('react-custom-scrollbars-2');
 var react = require('@floating-ui/react');
 var reactDom = require('@floating-ui/react-dom');
 var ShoplAssets = require('@shoplflow/shopl-assets');
-var HadaAssets = require('@shoplflow/hada-assets');
 var core = require('@floating-ui/core');
+var HadaAssets = require('@shoplflow/hada-assets');
 var DatePicker2 = require('react-datepicker');
 require('react-datepicker/dist/react-datepicker.css');
 var SimpleBarReact = require('simplebar-react');
@@ -102,40 +102,50 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js
+// ../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
 var require_classnames = __commonJS({
-  "../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"(exports, module) {
+  "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports, module) {
     (function() {
       var hasOwn = {}.hasOwnProperty;
       function classNames2() {
-        var classes = [];
+        var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
-          if (!arg)
-            continue;
-          var argType = typeof arg;
-          if (argType === "string" || argType === "number") {
-            classes.push(arg);
-          } else if (Array.isArray(arg)) {
-            if (arg.length) {
-              var inner = classNames2.apply(null, arg);
-              if (inner) {
-                classes.push(inner);
-              }
-            }
-          } else if (argType === "object") {
-            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-              classes.push(arg.toString());
-              continue;
-            }
-            for (var key in arg) {
-              if (hasOwn.call(arg, key) && arg[key]) {
-                classes.push(key);
-              }
-            }
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames2.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
           }
         }
-        return classes.join(" ");
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
         classNames2.default = classNames2;
@@ -1811,12 +1821,19 @@ exports.IconButtonStyleVariants = {
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
+var getPopoverContentStyle = () => {
+  return react$1.css`
+    min-width: 112px;
+    padding: 4px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background-color: ${exports.colorTokens.neutral0};
+  `;
+};
+
+// src/components/Buttons/DropdownButton/DropdownButton.styled.ts
 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};
+  ${getPopoverContentStyle()}
 `;
 var StyledArrowIcon = styled6__default.default(framerMotion.motion.div)`
   display: flex;
@@ -2425,11 +2442,10 @@ var DropdownButton = (_a) => {
     _styleVar = "SOLID";
     color = "coolgray50";
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, "data-shoplflow": "DropdownButton", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, middlewares: [core.shift({ crossAxis: true, padding: 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,
@@ -2479,6 +2495,209 @@ exports.DropdownButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY"
 };
+var getStyleByStyleVar3 = (styleVar, color, disabled) => {
+  switch (styleVar) {
+    case "PRIMARY":
+      return react$1.css`
+        border: 1px solid ${exports.colorTokens.primary400};
+        background-color: ${exports.colorTokens.primary300};
+        :hover {
+          background-color: ${!disabled && exports.colorTokens.primary400};
+        }
+      `;
+    case "SECONDARY":
+      return react$1.css`
+        border: 1px solid ${exports.colorTokens.neutral350};
+        background-color: ${exports.colorTokens.neutral0};
+        :hover {
+          background-color: ${!disabled && exports.colorTokens.neutral100};
+        }
+      `;
+    default:
+      return react$1.css`
+        border: 1px solid ${exports.colorTokens.primary400};
+        background-color: ${exports.colorTokens.primary300};
+      `;
+  }
+};
+var getStyleBySizeVar3 = (sizeVar) => {
+  switch (sizeVar) {
+    case "M":
+      return react$1.css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+    case "S":
+      return react$1.css`
+        min-width: 54px;
+        min-height: 32px;
+      `;
+    default:
+      return react$1.css`
+        min-width: 72px;
+        min-height: 40px;
+      `;
+  }
+};
+var StyledPopoverContentWrapper2 = styled6__default.default.div`
+  ${getPopoverContentStyle()}
+`;
+var StyledArrowIcon2 = styled6__default.default(framerMotion.motion.div)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+`;
+var SplitButtonDivider = styled6__default.default.div`
+  height: ${({ sizeVar }) => sizeVar === "M" ? "38px" : "30px"};
+  width: 1px;
+  background-color: ${({ styleVar }) => styleVar === "PRIMARY" ? exports.colorTokens.shopl400 : exports.colorTokens.neutral350};
+`;
+var StyledSplitButton = styled6__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: fit-content;
+  width: fit-content;
+  gap: 8px;
+  padding: 0 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  ${({ styleVar, color, disabled }) => getStyleByStyleVar3(styleVar, color, disabled)};
+  ${({ sizeVar }) => getStyleBySizeVar3(sizeVar)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+exports.SplitButtonContext = React3.createContext(null);
+exports.useSplitButtonContext = () => {
+  const context = React3.useContext(exports.SplitButtonContext);
+  if (!context) {
+    throw new Error("SplitButtonContext must be used within a SplitButton component");
+  }
+  return context;
+};
+var SplitButtonMenu = (_a) => {
+  var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
+  const { setIsOpen } = exports.useSplitButtonContext();
+  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 SplitButton = (_a) => {
+  var _b = _a, {
+    children,
+    color,
+    onClick,
+    disabled,
+    placement = "bottom-start",
+    floatingZIndex,
+    leftSource,
+    rightSource,
+    styleVar = "PRIMARY",
+    sizeVar = "M",
+    lineClamp = 1,
+    text
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "color",
+    "onClick",
+    "disabled",
+    "placement",
+    "floatingZIndex",
+    "leftSource",
+    "rightSource",
+    "styleVar",
+    "sizeVar",
+    "lineClamp",
+    "text"
+  ]);
+  const selector = React3.useRef(`shoplflow-${crypto.randomUUID()}-split-button`).current;
+  const [isOpen, setIsOpen] = utils.useOutsideClick({
+    selector: `.${selector}`,
+    useOutsideScroll: true
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.SplitButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, middlewares: [core.shift({ crossAxis: true, padding: 4 })], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, className: selector, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledSplitButton,
+      __spreadProps(__spreadValues({
+        "data-shoplflow": "SplitButton",
+        color,
+        styleVar,
+        sizeVar,
+        disabled
+      }, rest), {
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+          if (disabled) {
+            return;
+          }
+          onClick == null ? void 0 : onClick(event);
+          setIsOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { spacing: "spacing04", align: "center", children: [
+            leftSource,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Text,
+              {
+                lineClamp,
+                whiteSpace: "nowrap",
+                wordBreak: "keep-all",
+                color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
+                typography: sizeVar === "M" ? "body1_400" : "body2_400",
+                children: text
+              }
+            ),
+            rightSource
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SplitButtonDivider, { sizeVar, styleVar }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledArrowIcon2,
+            {
+              animate: {
+                rotate: isOpen ? 180 : 0
+              },
+              transition: {
+                duration: 0.2
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Icon,
+                {
+                  iconSource: ShoplAssets.DownArrowSolidXsmallIcon,
+                  color: styleVar === "PRIMARY" ? "neutral0" : "neutral600",
+                  sizeVar: "XS"
+                }
+              )
+            }
+          )
+        ]
+      })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { zIndex: floatingZIndex, children: /* @__PURE__ */ jsxRuntime.jsx(StyledPopoverContentWrapper2, { children }) })
+  ] }) });
+};
+SplitButton.Menu = SplitButtonMenu;
+exports.SplitButton = SplitButton;
+
+// src/components/Buttons/SplitButton/SplitButton.types.ts
+exports.SplitButtonSizeVariants = {
+  S: "S",
+  M: "M"
+};
+exports.SplitButtonStyleVariants = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY"
+};
 var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral100};
   & > span {
@@ -3839,22 +4058,32 @@ var Tooltip = (_a) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, __spreadProps(__spreadValues({ offset: offset4, placement, middlewares: [core.flip(), core.shift({ padding: 5 })] }, popperProps), { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      exports.Popper.Trigger,
-      {
-        ref: triggerRef,
-        isOpen: isOpen || open,
-        onMouseOver: showHandler,
-        onMouseLeave: hideHandler,
-        onFocus: showHandler,
-        onBlur: hideHandler,
-        style: { display: "flex", alignItems: "center", justifyContent: "center" },
-        children: trigger
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { ref: portalRef, children: popper })
-  ] }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.Popper,
+    __spreadProps(__spreadValues({
+      offset: offset4,
+      placement,
+      middlewares: [core.flip(), core.shift({ padding: 5 })],
+      "data-shoplflow": "Tooltip"
+    }, popperProps), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Popper.Trigger,
+          {
+            ref: triggerRef,
+            isOpen: isOpen || open,
+            onMouseOver: showHandler,
+            onMouseLeave: hideHandler,
+            onFocus: showHandler,
+            onBlur: hideHandler,
+            style: { display: "flex", alignItems: "center", justifyContent: "center" },
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { ref: portalRef, children: popper })
+      ]
+    })
+  );
 };
 Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;
@@ -4996,7 +5225,6 @@ var YearSelect = ({ optionList, className, parentClassName, activeValue, maxHeig
         maxHeight,
         height
       },
-      placeholder: void 0,
       className,
       children: optionList == null ? void 0 : optionList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
         OptionListItem,
@@ -6196,5 +6424,3 @@ Object.defineProperty(exports, 'size', {
   enumerable: true,
   get: function () { return react.size; }
 });
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -354,7 +354,7 @@ declare const MotionStack: MotionStackType$1;
 
 declare const StyledStack: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
+    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
 } & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 declare type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
@@ -428,7 +428,7 @@ declare const MotionStackContainer: MotionStackType;
 
 declare const StyledStackContainer: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
+    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
 } & StackContainerOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 interface TextOptionProps {
@@ -683,6 +683,36 @@ declare type DropdownButtonContextType = {
 declare const DropdownButtonContext: React$1.Context<DropdownButtonContextType | null>;
 declare const useDropdownButtonContext: () => DropdownButtonContextType;
 
+declare const SplitButtonSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type SplitButtonSizeVariantType = $Values<typeof SplitButtonSizeVariants>;
+declare const SplitButtonStyleVariants: {
+    readonly PRIMARY: "PRIMARY";
+    readonly SECONDARY: "SECONDARY";
+};
+declare type SplitButtonStyleVariantType = $Values<typeof SplitButtonStyleVariants>;
+interface SplitButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'color' | 'disabled'>, SplitButtonOptionProps {
+    placement?: Placement;
+    floatingZIndex?: CSSProperties['zIndex'];
+    lineClamp?: number;
+    text: string;
+}
+declare type SplitButtonOptionProps = SizeVariantProps<SplitButtonSizeVariantType> & StyleVariantProps<SplitButtonStyleVariantType> & LeftAndRightNodeProps & DisableProps & ColorTokenProps;
+
+declare const SplitButton: {
+    ({ children, color, onClick, disabled, placement, floatingZIndex, leftSource, rightSource, styleVar, sizeVar, lineClamp, text, ...rest }: SplitButtonProps): react_jsx_runtime.JSX.Element;
+    Menu: ({ onClick, children, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare type SplitButtonContextType = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+};
+declare const SplitButtonContext: React$1.Context<SplitButtonContextType | null>;
+declare const useSplitButtonContext: () => SplitButtonContextType;
+
 declare const CalloutTypes: {
     readonly INFORMATION: "INFORMATION";
     readonly ALERT: "ALERT";
@@ -1030,7 +1060,7 @@ declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__
 
 declare const StyledIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
+    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
 } & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
 
 declare const InputSizeVariants: {
@@ -1492,4 +1522,4 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
 
 declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
 
-export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, 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, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, 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, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, 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, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, 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 };

package/dist/index.d.ts

@@ -354,7 +354,7 @@ declare const MotionStack: MotionStackType$1;
 
 declare const StyledStack: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
+    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
 } & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 declare type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
@@ -428,7 +428,7 @@ declare const MotionStackContainer: MotionStackType;
 
 declare const StyledStackContainer: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
+    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
 } & StackContainerOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 interface TextOptionProps {
@@ -683,6 +683,36 @@ declare type DropdownButtonContextType = {
 declare const DropdownButtonContext: React$1.Context<DropdownButtonContextType | null>;
 declare const useDropdownButtonContext: () => DropdownButtonContextType;
 
+declare const SplitButtonSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type SplitButtonSizeVariantType = $Values<typeof SplitButtonSizeVariants>;
+declare const SplitButtonStyleVariants: {
+    readonly PRIMARY: "PRIMARY";
+    readonly SECONDARY: "SECONDARY";
+};
+declare type SplitButtonStyleVariantType = $Values<typeof SplitButtonStyleVariants>;
+interface SplitButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'color' | 'disabled'>, SplitButtonOptionProps {
+    placement?: Placement;
+    floatingZIndex?: CSSProperties['zIndex'];
+    lineClamp?: number;
+    text: string;
+}
+declare type SplitButtonOptionProps = SizeVariantProps<SplitButtonSizeVariantType> & StyleVariantProps<SplitButtonStyleVariantType> & LeftAndRightNodeProps & DisableProps & ColorTokenProps;
+
+declare const SplitButton: {
+    ({ children, color, onClick, disabled, placement, floatingZIndex, leftSource, rightSource, styleVar, sizeVar, lineClamp, text, ...rest }: SplitButtonProps): react_jsx_runtime.JSX.Element;
+    Menu: ({ onClick, children, ...rest }: MenuProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare type SplitButtonContextType = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+};
+declare const SplitButtonContext: React$1.Context<SplitButtonContextType | null>;
+declare const useSplitButtonContext: () => SplitButtonContextType;
+
 declare const CalloutTypes: {
     readonly INFORMATION: "INFORMATION";
     readonly ALERT: "ALERT";
@@ -1030,7 +1060,7 @@ declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__
 
 declare const StyledIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
+    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
 } & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
 
 declare const InputSizeVariants: {
@@ -1492,4 +1522,4 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
 
 declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
 
-export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, 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, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, 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, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, 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, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, 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, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, 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 };