@shoplflow/base 0.32.41 → 0.32.43

package/dist/index.cjs

@@ -856,6 +856,9 @@ var FooterContainer = styled6__default.default.div`
   border-top: 1px solid ${exports.colorTokens.neutral300};
   background: ${exports.colorTokens.neutral0};
 `;
+var BottomContainer = styled6__default.default.footer`
+  width: 100%;
+`;
 
 // src/components/Modal/Modal.types.ts
 exports.ModalSize = {
@@ -882,6 +885,27 @@ var useViewportSizeObserver = () => {
   }, []);
   return size2;
 };
+var ModalOptionContext = React3.createContext({
+  heightToDeduct: 0,
+  setHeightToDeduct: utils.noop,
+  clearHeightToDeduct: utils.noop
+});
+var ModalOptionContextProvider = ({ children }) => {
+  const [heightToDeduct, setHeightToDeduct] = React3.useState(0);
+  const controlHeightToDeduct = React3.useCallback((heightToAdd) => {
+    setHeightToDeduct((prev) => prev + heightToAdd);
+  }, []);
+  const clearHeightToDeduct = React3.useCallback(() => {
+    setHeightToDeduct(0);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ModalOptionContext.Provider,
+    {
+      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      children
+    }
+  );
+};
 var ModalContainer = (_a) => {
   var _b = _a, { children, height, outsideClick = utils.noop } = _b, rest = __objRest(_b, ["children", "height", "outsideClick"]);
   const ref = utils.useParentElementClick(outsideClick);
@@ -916,7 +940,7 @@ var ModalContainer = (_a) => {
       height: heightWidthMargin
     });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: addPropInChildren }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsxRuntime.jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = ({ children }) => {
@@ -954,6 +978,13 @@ var ScrollArea = React3.forwardRef((_a, ref) => {
   ) });
 });
 exports.ScrollArea = ScrollArea;
+var useModalOption = () => {
+  const context = React3.useContext(ModalOptionContext);
+  if (!context) {
+    throw new Error(`useModalOption cannot be called outside the ModalOptionProvider`);
+  }
+  return context;
+};
 var ModalBody = ({
   children,
   isIncludeHeader = false,
@@ -962,6 +993,7 @@ var ModalBody = ({
   height: modalContainerHeight
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
+  const { heightToDeduct } = useModalOption();
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -983,11 +1015,11 @@ var ModalBody = ({
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
-          return windowHeight - topBottomMargin - headerFooterHeight;
+          return windowHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
         }
-        return modalContainerHeight - topBottomMargin - headerFooterHeight;
+        return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
       }
-      return modalContainerHeight - topBottomMargin - headerFooterHeight;
+      return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
     } else {
       return "100%";
     }
@@ -1014,32 +1046,23 @@ var ModalBody = ({
     }
     return 0;
   };
-  const setContentHeightMax = () => {
-    let autoHeightMax = setAutoHeightMax();
-    autoHeightMax = autoHeightMax - 24;
-    if (isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 24;
-    }
-    if (!isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 16;
-    }
-    return autoHeightMax;
-  };
+  const autoHeightMin = setAutoHeightMin();
+  const _autoHeightMin = typeof autoHeightMin === "string" ? autoHeightMin : autoHeightMin - heightToDeduct;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BodyContainer,
     {
       isIncludeHeader,
       sizeVar,
-      minHeight: setAutoHeightMin(),
-      maxHeight: setAutoHeightMax(),
+      minHeight: _autoHeightMin,
+      maxHeight: setAutoHeightMax() - heightToDeduct,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.ScrollArea,
         {
           id: `scrollbar`,
           universal: true,
           autoHeight: !modalContainerHeight,
-          autoHeightMin: setAutoHeightMin(),
-          autoHeightMax: setContentHeightMax(),
+          autoHeightMin: _autoHeightMin,
+          autoHeightMax: "100%",
           style: {},
           children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
         }
@@ -1053,6 +1076,33 @@ var ModalHeader = ({ children }) => {
 };
 ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
+var ModalTop = ({ children }) => {
+  const [topRef, setTopRef] = React3.useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  React3.useEffect(() => {
+    if (!topRef) {
+      return;
+    }
+    const { height } = topRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setTopRef, children });
+};
+var ModalTop_default = ModalTop;
+var ModalBottom = ({ children }) => {
+  const [bottomRef, setBottomRef] = React3.useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  React3.useEffect(() => {
+    if (!bottomRef) {
+      return;
+    }
+    const { height } = bottomRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BottomContainer, { ref: setBottomRef, children });
+};
 exports.ModalHandlerContext = React3.createContext({
   addModal: utils.noop,
   removeModal: utils.noop
@@ -1147,7 +1197,9 @@ var ModalProvider_default = ModalProvider;
 exports.Modal = {
   Container: ModalContainer_default,
   Header: ModalHeader_default,
+  Top: ModalTop_default,
   Body: ModalBody_default,
+  Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
 var SwitchContainer = styled6__default.default.div`
@@ -2763,9 +2815,30 @@ exports.CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
+var StyledDropdown = styled6__default.default.div`
+  width: ${({ width }) => width};
+`;
+var StyledDropdownContent = styled6__default.default.div`
+  display: flex;
+  flex-direction: column;
+  background: ${exports.colorTokens.neutral0};
+  width: ${({ width }) => width != null ? width : "240px"};
+  padding: 4px;
+  border-radius: 6px;
+  box-shadow: ${exports.boxShadowTokens.dropShadow};
+`;
+var DropdownContext = React3.createContext(null);
+var useDropdown = () => {
+  const context = React3.useContext(DropdownContext);
+  if (context === null) {
+    throw new Error("useDropdown must be used within a DropdownProvider");
+  }
+  return context;
+};
 var getDropdownHeightBySizeVar = (size2) => {
   switch (size2) {
     case "M":
+    case "L":
       return "40px";
     case "S":
       return "32px";
@@ -2775,6 +2848,8 @@ var getDropdownHeightBySizeVar = (size2) => {
 };
 var getDropdownFontSizeBySizeVar = (size2) => {
   switch (size2) {
+    case "L":
+      return "body2_700";
     case "M":
       return "body1_400";
     case "S":
@@ -2785,12 +2860,20 @@ var getDropdownFontSizeBySizeVar = (size2) => {
 };
 var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
+    case "L":
+      return react$1.css`
+        background-color: transparent;
+        padding: 8px 4px 8px 12px;
+      `;
     case "M":
       return react$1.css`
+        background-color: ${exports.colorTokens.neutral0};
+        gap: 4px;
         padding: 4px 4px 4px 12px;
       `;
     case "S":
       return react$1.css`
+        background-color: ${exports.colorTokens.neutral0};
         padding: 4px 4px 4px 8px;
         gap: 4px;
       `;
@@ -2800,22 +2883,24 @@ var getDropdownStyleBySizeVar = (size2) => {
       `;
   }
 };
+var getDisabledStyle2 = (disabled) => {
+  if (disabled) {
+    return react$1.css`
+      opacity: 50%;
+      cursor: not-allowed;
+    `;
+  }
+};
 var getDropdownIconSizeBySizeVar = (size2) => {
   switch (size2) {
     case "S":
+    case "L":
       return react$1.css`
         height: 24px;
         width: 24px;
         min-width: 24px;
         min-height: 24px;
       `;
-    case "M":
-      return react$1.css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
     default:
       return react$1.css`
         height: 32px;
@@ -2825,49 +2910,6 @@ var getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-var StyledDropdown = styled6__default.default.div`
-  width: ${({ width }) => width};
-`;
-var StyledDropdownContent = styled6__default.default.div`
-  display: flex;
-  flex-direction: column;
-  background: ${exports.colorTokens.neutral0};
-  width: ${({ width }) => width != null ? width : "240px"};
-  padding: 4px;
-  border-radius: 6px;
-  box-shadow: ${exports.boxShadowTokens.dropShadow};
-`;
-var StyledDropdownButton = styled6__default.default.button`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  gap: 8px;
-  cursor: pointer;
-  background-color: ${exports.colorTokens.neutral0};
-  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
-  ${({ disabled }) => disabled && react$1.css`
-      background-color: ${exports.colorTokens.neutral100};
-      cursor: not-allowed;
-    `}
-`;
-var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
-`;
-var DropdownContext = React3.createContext(null);
-var useDropdown = () => {
-  const context = React3.useContext(DropdownContext);
-  if (context === null) {
-    throw new Error("useDropdown must be used within a DropdownProvider");
-  }
-  return context;
-};
 var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   if (!disabled) {
     if (isError) {
@@ -2882,60 +2924,72 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return exports.colorTokens.neutral300;
 };
+var getButtoWrapperStyleBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "L":
+      return react$1.css`
+        background-color: transparent;
+        border-width: 2px;
+        border-radius: 12px;
+      `;
+    default:
+      return react$1.css`
+        background-color: ${exports.colorTokens.neutral0};
+        border-width: 1px;
+        border-radius: 6px;
+      `;
+  }
+};
 var getStyleByType = ({
-  type,
   height,
-  minHeight,
-  maxHeight,
-  width,
-  minWidth,
-  maxWidth,
-  borderRadius,
-  customNumberInputHeight
+  width
 }) => {
-  if (type === "number") {
-    return react$1.css`
-      width: ${width || "64px"};
-      height: ${customNumberInputHeight || "32px"};
-      border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
-    `;
-  }
   return react$1.css`
     width: ${width || "100%"};
-    min-width: ${minWidth || "initial"};
-    max-width: ${maxWidth || "initial"};
     height: ${height || "initial"};
-    min-height: ${minHeight || "initial"};
-    max-height: ${maxHeight || "initial"};
-    border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
   `;
 };
-var InputWrapper = styled6__default.default.label`
+var StyledDropdownButtonWrapper = styled6__default.default.label`
   position: relative;
   display: flex;
   align-items: center;
-  border-radius: 6px;
-  flex-direction: ${({ direction }) => direction || "row"};
-  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType({
-  customNumberInputHeight,
-  type,
+  flex-direction: row;
+  min-height: initial;
+  max-height: initial;
+  min-width: initial;
+  max-width: initial;
+  ${({ height, width }) => getStyleByType({
   height,
-  minHeight,
-  maxHeight,
-  width,
-  maxWidth,
-  minWidth,
-  borderRadius
+  width
 })};
   justify-content: space-between;
-  gap: ${({ gap }) => gap || "8px"};
-  border: 1px solid ${(props) => getBorderColorByStatus(props)};
-  background-color: ${exports.colorTokens.neutral0};
+  border-color: ${(props) => getBorderColorByStatus(props)};
+  border-style: solid;
+  ${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
+
   overflow: hidden;
-  ${({ disabled }) => disabled && react$1.css`
-      background-color: ${exports.colorTokens.neutral100};
-      cursor: not-allowed;
-    `};
+  ${({ disabled }) => getDisabledStyle2(disabled)};
+`;
+var StyledDropdownButton = styled6__default.default.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+
+  cursor: pointer;
+  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
+  ${({ disabled }) => getDisabledStyle2(disabled)};
+`;
+var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
+  ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var DropdownTriggerButton = React3.forwardRef(
   (_a, ref) => {
@@ -2963,8 +3017,9 @@ var DropdownTriggerButton = React3.forwardRef(
       }
       return "neutral700";
     };
+    const LeftSourceClone = leftSource ? React3.cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      InputWrapper,
+      StyledDropdownButtonWrapper,
       {
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
@@ -2973,19 +3028,22 @@ var DropdownTriggerButton = React3.forwardRef(
         disabled,
         width,
         isError,
+        sizeVar,
         height: getDropdownHeightBySizeVar(sizeVar),
         children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          leftSource && leftSource,
-          value || /* @__PURE__ */ jsxRuntime.jsx(
-            exports.Text,
-            {
-              typography: getDropdownFontSizeBySizeVar(sizeVar),
-              color: getTextColor({ value, disabled }),
-              textOverflow: "ellipsis",
-              lineClamp: 1,
-              children: placeholder
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
+            LeftSourceClone && LeftSourceClone,
+            value || /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Text,
+              {
+                typography: getDropdownFontSizeBySizeVar(sizeVar),
+                color: getTextColor({ value, disabled }),
+                textOverflow: "ellipsis",
+                lineClamp: 1,
+                children: placeholder
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             DropdownButtonIcon,
             {
@@ -2996,7 +3054,14 @@ var DropdownTriggerButton = React3.forwardRef(
               transition: {
                 duration: 0.2
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Icon,
+                {
+                  iconSource: ShoplAssets.DownArrowSolidXsmallIcon,
+                  color: sizeVar === "L" ? "neutral700" : "neutral400",
+                  sizeVar: "XS"
+                }
+              )
             }
           )
         ] }))
@@ -3043,7 +3108,7 @@ var Dropdown = ({
         height: triggerRef.offsetHeight
       });
     }
-  }, [triggerRef]);
+  }, [triggerRef, width]);
   React3.useEffect(() => {
     if (initialIsOpen === void 0) {
       return;
@@ -3067,6 +3132,13 @@ var Dropdown = ({
 Dropdown.Button = DropdownTriggerButton;
 Dropdown.Content = DropdownContent;
 exports.Dropdown = Dropdown;
+
+// src/components/Dropdown/Dropdown.types.ts
+exports.DropdownOptionVariants = {
+  CLICK: "CLICK",
+  OUTSIDE_CLICK: "OUTSIDE_CLICK",
+  NONE: "NONE"
+};
 var StyledList = styled6__default.default.li`
   display: flex;
   flex-direction: row;
@@ -3454,6 +3526,75 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets__namespace[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
+var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled }) => {
+  if (!disabled) {
+    if (isError) {
+      return exports.colorTokens.red300;
+    }
+    if (isFocused) {
+      return exports.colorTokens.primary300;
+    }
+    if (isHovered) {
+      return exports.colorTokens.neutral700;
+    }
+  }
+  return exports.colorTokens.neutral300;
+};
+var getStyleByType2 = ({
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  minWidth,
+  maxWidth,
+  borderRadius,
+  customNumberInputHeight
+}) => {
+  if (type === "number") {
+    return react$1.css`
+      width: ${width || "64px"};
+      height: ${customNumberInputHeight || "32px"};
+      border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
+    `;
+  }
+  return react$1.css`
+    width: ${width || "100%"};
+    min-width: ${minWidth || "initial"};
+    max-width: ${maxWidth || "initial"};
+    height: ${height || "initial"};
+    min-height: ${minHeight || "initial"};
+    max-height: ${maxHeight || "initial"};
+    border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
+  `;
+};
+var InputWrapper = styled6__default.default.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  flex-direction: ${({ direction }) => direction || "row"};
+  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType2({
+  customNumberInputHeight,
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  maxWidth,
+  minWidth,
+  borderRadius
+})};
+  justify-content: space-between;
+  gap: ${({ gap }) => gap || "8px"};
+  border: 1px solid ${(props) => getBorderColorByStatus2(props)};
+  background-color: ${exports.colorTokens.neutral0};
+  overflow: hidden;
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
+      cursor: not-allowed;
+    `};
+`;
 
 // src/components/Inputs/Input/utils/getNumberLimiteRange.ts
 var getNumberLimitRange = (value, min, max) => {

package/dist/index.d.cts

@@ -504,6 +504,10 @@ declare const MODAL_FOOTER_KEY: unique symbol;
 interface ModalFooterType extends React.FC<ModalBodyProps> {
     [MODAL_FOOTER_KEY]?: boolean;
 }
+interface ModalTopProps extends ChildrenProps {
+}
+interface ModalBottomProps extends ChildrenProps {
+}
 
 declare type ModalStateType = {
     component: ReactNode;
@@ -537,7 +541,9 @@ declare const useHandleModal: () => {
 declare const Modal: {
     Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => react_jsx_runtime.JSX.Element;
     Header: ModalHeaderType;
+    Top: ({ children }: ModalTopProps) => react_jsx_runtime.JSX.Element;
     Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
+    Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };
 
@@ -943,6 +949,7 @@ interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenP
 declare const dropdownSizeVariants: {
     readonly S: "S";
     readonly M: "M";
+    readonly L: "L";
 };
 declare type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
 interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
@@ -1524,4 +1531,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, 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, 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, PolymorphicComponentProps, PolymorphicRef, 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 };
+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, 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, 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, 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

@@ -504,6 +504,10 @@ declare const MODAL_FOOTER_KEY: unique symbol;
 interface ModalFooterType extends React.FC<ModalBodyProps> {
     [MODAL_FOOTER_KEY]?: boolean;
 }
+interface ModalTopProps extends ChildrenProps {
+}
+interface ModalBottomProps extends ChildrenProps {
+}
 
 declare type ModalStateType = {
     component: ReactNode;
@@ -537,7 +541,9 @@ declare const useHandleModal: () => {
 declare const Modal: {
     Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => react_jsx_runtime.JSX.Element;
     Header: ModalHeaderType;
+    Top: ({ children }: ModalTopProps) => react_jsx_runtime.JSX.Element;
     Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
+    Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };
 
@@ -943,6 +949,7 @@ interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenP
 declare const dropdownSizeVariants: {
     readonly S: "S";
     readonly M: "M";
+    readonly L: "L";
 };
 declare type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
 interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
@@ -1524,4 +1531,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, 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, 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, PolymorphicComponentProps, PolymorphicRef, 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 };
+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, 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, 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, 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.js

@@ -1,11 +1,11 @@
 import * as React3 from 'react';
-import React3__default, { forwardRef, useRef, useState, useCallback, useEffect, createContext, useId, useContext, useMemo, createElement } from 'react';
+import React3__default, { forwardRef, createContext, useRef, useState, useCallback, useEffect, cloneElement, useId, useContext, useMemo, createElement } from 'react';
 import styled6 from '@emotion/styled';
 import { motion, AnimatePresence, LayoutGroup, LazyMotion, domAnimation } from 'framer-motion';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
-import { useMergeRefs, noop, useOutsideClick, OutSideClick, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
+import { noop, useMergeRefs, useOutsideClick, OutSideClick, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
@@ -829,6 +829,9 @@ var FooterContainer = styled6.div`
   border-top: 1px solid ${colorTokens.neutral300};
   background: ${colorTokens.neutral0};
 `;
+var BottomContainer = styled6.footer`
+  width: 100%;
+`;
 
 // src/components/Modal/Modal.types.ts
 var ModalSize = {
@@ -855,6 +858,27 @@ var useViewportSizeObserver = () => {
   }, []);
   return size2;
 };
+var ModalOptionContext = createContext({
+  heightToDeduct: 0,
+  setHeightToDeduct: noop,
+  clearHeightToDeduct: noop
+});
+var ModalOptionContextProvider = ({ children }) => {
+  const [heightToDeduct, setHeightToDeduct] = useState(0);
+  const controlHeightToDeduct = useCallback((heightToAdd) => {
+    setHeightToDeduct((prev) => prev + heightToAdd);
+  }, []);
+  const clearHeightToDeduct = useCallback(() => {
+    setHeightToDeduct(0);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ModalOptionContext.Provider,
+    {
+      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      children
+    }
+  );
+};
 var ModalContainer = (_a) => {
   var _b = _a, { children, height, outsideClick = noop } = _b, rest = __objRest(_b, ["children", "height", "outsideClick"]);
   const ref = useParentElementClick(outsideClick);
@@ -889,7 +913,7 @@ var ModalContainer = (_a) => {
       height: heightWidthMargin
     });
   });
-  return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: addPropInChildren }));
+  return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = ({ children }) => {
@@ -927,6 +951,13 @@ var ScrollArea = forwardRef((_a, ref) => {
   ) });
 });
 var ScrollArea_default = ScrollArea;
+var useModalOption = () => {
+  const context = useContext(ModalOptionContext);
+  if (!context) {
+    throw new Error(`useModalOption cannot be called outside the ModalOptionProvider`);
+  }
+  return context;
+};
 var ModalBody = ({
   children,
   isIncludeHeader = false,
@@ -935,6 +966,7 @@ var ModalBody = ({
   height: modalContainerHeight
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
+  const { heightToDeduct } = useModalOption();
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -956,11 +988,11 @@ var ModalBody = ({
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
-          return windowHeight - topBottomMargin - headerFooterHeight;
+          return windowHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
         }
-        return modalContainerHeight - topBottomMargin - headerFooterHeight;
+        return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
       }
-      return modalContainerHeight - topBottomMargin - headerFooterHeight;
+      return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
     } else {
       return "100%";
     }
@@ -987,32 +1019,23 @@ var ModalBody = ({
     }
     return 0;
   };
-  const setContentHeightMax = () => {
-    let autoHeightMax = setAutoHeightMax();
-    autoHeightMax = autoHeightMax - 24;
-    if (isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 24;
-    }
-    if (!isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 16;
-    }
-    return autoHeightMax;
-  };
+  const autoHeightMin = setAutoHeightMin();
+  const _autoHeightMin = typeof autoHeightMin === "string" ? autoHeightMin : autoHeightMin - heightToDeduct;
   return /* @__PURE__ */ jsx(
     BodyContainer,
     {
       isIncludeHeader,
       sizeVar,
-      minHeight: setAutoHeightMin(),
-      maxHeight: setAutoHeightMax(),
+      minHeight: _autoHeightMin,
+      maxHeight: setAutoHeightMax() - heightToDeduct,
       children: /* @__PURE__ */ jsx(
         ScrollArea_default,
         {
           id: `scrollbar`,
           universal: true,
           autoHeight: !modalContainerHeight,
-          autoHeightMin: setAutoHeightMin(),
-          autoHeightMax: setContentHeightMax(),
+          autoHeightMin: _autoHeightMin,
+          autoHeightMax: "100%",
           style: {},
           children: /* @__PURE__ */ jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
         }
@@ -1026,6 +1049,33 @@ var ModalHeader = ({ children }) => {
 };
 ModalHeader[MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
+var ModalTop = ({ children }) => {
+  const [topRef, setTopRef] = useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  useEffect(() => {
+    if (!topRef) {
+      return;
+    }
+    const { height } = topRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsx("div", { ref: setTopRef, children });
+};
+var ModalTop_default = ModalTop;
+var ModalBottom = ({ children }) => {
+  const [bottomRef, setBottomRef] = useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  useEffect(() => {
+    if (!bottomRef) {
+      return;
+    }
+    const { height } = bottomRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsx(BottomContainer, { ref: setBottomRef, children });
+};
 var ModalHandlerContext = createContext({
   addModal: noop,
   removeModal: noop
@@ -1120,7 +1170,9 @@ var ModalProvider_default = ModalProvider;
 var Modal = {
   Container: ModalContainer_default,
   Header: ModalHeader_default,
+  Top: ModalTop_default,
   Body: ModalBody_default,
+  Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
 var SwitchContainer = styled6.div`
@@ -2736,9 +2788,30 @@ var CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
+var StyledDropdown = styled6.div`
+  width: ${({ width }) => width};
+`;
+var StyledDropdownContent = styled6.div`
+  display: flex;
+  flex-direction: column;
+  background: ${colorTokens.neutral0};
+  width: ${({ width }) => width != null ? width : "240px"};
+  padding: 4px;
+  border-radius: 6px;
+  box-shadow: ${boxShadowTokens.dropShadow};
+`;
+var DropdownContext = createContext(null);
+var useDropdown = () => {
+  const context = useContext(DropdownContext);
+  if (context === null) {
+    throw new Error("useDropdown must be used within a DropdownProvider");
+  }
+  return context;
+};
 var getDropdownHeightBySizeVar = (size2) => {
   switch (size2) {
     case "M":
+    case "L":
       return "40px";
     case "S":
       return "32px";
@@ -2748,6 +2821,8 @@ var getDropdownHeightBySizeVar = (size2) => {
 };
 var getDropdownFontSizeBySizeVar = (size2) => {
   switch (size2) {
+    case "L":
+      return "body2_700";
     case "M":
       return "body1_400";
     case "S":
@@ -2758,12 +2833,20 @@ var getDropdownFontSizeBySizeVar = (size2) => {
 };
 var getDropdownStyleBySizeVar = (size2) => {
   switch (size2) {
+    case "L":
+      return css`
+        background-color: transparent;
+        padding: 8px 4px 8px 12px;
+      `;
     case "M":
       return css`
+        background-color: ${colorTokens.neutral0};
+        gap: 4px;
         padding: 4px 4px 4px 12px;
       `;
     case "S":
       return css`
+        background-color: ${colorTokens.neutral0};
         padding: 4px 4px 4px 8px;
         gap: 4px;
       `;
@@ -2773,22 +2856,24 @@ var getDropdownStyleBySizeVar = (size2) => {
       `;
   }
 };
+var getDisabledStyle2 = (disabled) => {
+  if (disabled) {
+    return css`
+      opacity: 50%;
+      cursor: not-allowed;
+    `;
+  }
+};
 var getDropdownIconSizeBySizeVar = (size2) => {
   switch (size2) {
     case "S":
+    case "L":
       return css`
         height: 24px;
         width: 24px;
         min-width: 24px;
         min-height: 24px;
       `;
-    case "M":
-      return css`
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
-      `;
     default:
       return css`
         height: 32px;
@@ -2798,49 +2883,6 @@ var getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-var StyledDropdown = styled6.div`
-  width: ${({ width }) => width};
-`;
-var StyledDropdownContent = styled6.div`
-  display: flex;
-  flex-direction: column;
-  background: ${colorTokens.neutral0};
-  width: ${({ width }) => width != null ? width : "240px"};
-  padding: 4px;
-  border-radius: 6px;
-  box-shadow: ${boxShadowTokens.dropShadow};
-`;
-var StyledDropdownButton = styled6.button`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  gap: 8px;
-  cursor: pointer;
-  background-color: ${colorTokens.neutral0};
-  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
-  ${({ disabled }) => disabled && css`
-      background-color: ${colorTokens.neutral100};
-      cursor: not-allowed;
-    `}
-`;
-var DropdownButtonIcon = styled6(motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
-`;
-var DropdownContext = createContext(null);
-var useDropdown = () => {
-  const context = useContext(DropdownContext);
-  if (context === null) {
-    throw new Error("useDropdown must be used within a DropdownProvider");
-  }
-  return context;
-};
 var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   if (!disabled) {
     if (isError) {
@@ -2855,60 +2897,72 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return colorTokens.neutral300;
 };
+var getButtoWrapperStyleBySizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "L":
+      return css`
+        background-color: transparent;
+        border-width: 2px;
+        border-radius: 12px;
+      `;
+    default:
+      return css`
+        background-color: ${colorTokens.neutral0};
+        border-width: 1px;
+        border-radius: 6px;
+      `;
+  }
+};
 var getStyleByType = ({
-  type,
   height,
-  minHeight,
-  maxHeight,
-  width,
-  minWidth,
-  maxWidth,
-  borderRadius,
-  customNumberInputHeight
+  width
 }) => {
-  if (type === "number") {
-    return css`
-      width: ${width || "64px"};
-      height: ${customNumberInputHeight || "32px"};
-      border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
-    `;
-  }
   return css`
     width: ${width || "100%"};
-    min-width: ${minWidth || "initial"};
-    max-width: ${maxWidth || "initial"};
     height: ${height || "initial"};
-    min-height: ${minHeight || "initial"};
-    max-height: ${maxHeight || "initial"};
-    border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
   `;
 };
-var InputWrapper = styled6.label`
+var StyledDropdownButtonWrapper = styled6.label`
   position: relative;
   display: flex;
   align-items: center;
-  border-radius: 6px;
-  flex-direction: ${({ direction }) => direction || "row"};
-  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType({
-  customNumberInputHeight,
-  type,
+  flex-direction: row;
+  min-height: initial;
+  max-height: initial;
+  min-width: initial;
+  max-width: initial;
+  ${({ height, width }) => getStyleByType({
   height,
-  minHeight,
-  maxHeight,
-  width,
-  maxWidth,
-  minWidth,
-  borderRadius
+  width
 })};
   justify-content: space-between;
-  gap: ${({ gap }) => gap || "8px"};
-  border: 1px solid ${(props) => getBorderColorByStatus(props)};
-  background-color: ${colorTokens.neutral0};
+  border-color: ${(props) => getBorderColorByStatus(props)};
+  border-style: solid;
+  ${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
+
   overflow: hidden;
-  ${({ disabled }) => disabled && css`
-      background-color: ${colorTokens.neutral100};
-      cursor: not-allowed;
-    `};
+  ${({ disabled }) => getDisabledStyle2(disabled)};
+`;
+var StyledDropdownButton = styled6.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+
+  cursor: pointer;
+  ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
+  ${({ disabled }) => getDisabledStyle2(disabled)};
+`;
+var DropdownButtonIcon = styled6(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
+  ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var DropdownTriggerButton = forwardRef(
   (_a, ref) => {
@@ -2936,8 +2990,9 @@ var DropdownTriggerButton = forwardRef(
       }
       return "neutral700";
     };
+    const LeftSourceClone = leftSource ? cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
     return /* @__PURE__ */ jsx(
-      InputWrapper,
+      StyledDropdownButtonWrapper,
       {
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
@@ -2946,19 +3001,22 @@ var DropdownTriggerButton = forwardRef(
         disabled,
         width,
         isError,
+        sizeVar,
         height: getDropdownHeightBySizeVar(sizeVar),
         children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
-          leftSource && leftSource,
-          value || /* @__PURE__ */ jsx(
-            Text_default,
-            {
-              typography: getDropdownFontSizeBySizeVar(sizeVar),
-              color: getTextColor({ value, disabled }),
-              textOverflow: "ellipsis",
-              lineClamp: 1,
-              children: placeholder
-            }
-          ),
+          /* @__PURE__ */ jsxs(Stack_default.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
+            LeftSourceClone && LeftSourceClone,
+            value || /* @__PURE__ */ jsx(
+              Text_default,
+              {
+                typography: getDropdownFontSizeBySizeVar(sizeVar),
+                color: getTextColor({ value, disabled }),
+                textOverflow: "ellipsis",
+                lineClamp: 1,
+                children: placeholder
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
             DropdownButtonIcon,
             {
@@ -2969,7 +3027,14 @@ var DropdownTriggerButton = forwardRef(
               transition: {
                 duration: 0.2
               },
-              children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
+              children: /* @__PURE__ */ jsx(
+                Icon_default,
+                {
+                  iconSource: DownArrowSolidXsmallIcon,
+                  color: sizeVar === "L" ? "neutral700" : "neutral400",
+                  sizeVar: "XS"
+                }
+              )
             }
           )
         ] }))
@@ -3016,7 +3081,7 @@ var Dropdown = ({
         height: triggerRef.offsetHeight
       });
     }
-  }, [triggerRef]);
+  }, [triggerRef, width]);
   useEffect(() => {
     if (initialIsOpen === void 0) {
       return;
@@ -3040,6 +3105,13 @@ var Dropdown = ({
 Dropdown.Button = DropdownTriggerButton;
 Dropdown.Content = DropdownContent;
 var Dropdown_default = Dropdown;
+
+// src/components/Dropdown/Dropdown.types.ts
+var DropdownOptionVariants = {
+  CLICK: "CLICK",
+  OUTSIDE_CLICK: "OUTSIDE_CLICK",
+  NONE: "NONE"
+};
 var StyledList = styled6.li`
   display: flex;
   flex-direction: row;
@@ -3427,6 +3499,75 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
+var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled }) => {
+  if (!disabled) {
+    if (isError) {
+      return colorTokens.red300;
+    }
+    if (isFocused) {
+      return colorTokens.primary300;
+    }
+    if (isHovered) {
+      return colorTokens.neutral700;
+    }
+  }
+  return colorTokens.neutral300;
+};
+var getStyleByType2 = ({
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  minWidth,
+  maxWidth,
+  borderRadius,
+  customNumberInputHeight
+}) => {
+  if (type === "number") {
+    return css`
+      width: ${width || "64px"};
+      height: ${customNumberInputHeight || "32px"};
+      border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
+    `;
+  }
+  return css`
+    width: ${width || "100%"};
+    min-width: ${minWidth || "initial"};
+    max-width: ${maxWidth || "initial"};
+    height: ${height || "initial"};
+    min-height: ${minHeight || "initial"};
+    max-height: ${maxHeight || "initial"};
+    border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
+  `;
+};
+var InputWrapper = styled6.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  flex-direction: ${({ direction }) => direction || "row"};
+  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType2({
+  customNumberInputHeight,
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  maxWidth,
+  minWidth,
+  borderRadius
+})};
+  justify-content: space-between;
+  gap: ${({ gap }) => gap || "8px"};
+  border: 1px solid ${(props) => getBorderColorByStatus2(props)};
+  background-color: ${colorTokens.neutral0};
+  overflow: hidden;
+  ${({ disabled }) => disabled && css`
+      background-color: ${colorTokens.neutral100};
+      cursor: not-allowed;
+    `};
+`;
 
 // src/components/Inputs/Input/utils/getNumberLimiteRange.ts
 var getNumberLimitRange = (value, min, max) => {
@@ -6387,4 +6528,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, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+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, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.32.41",
+  "version": "0.32.43",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",