@janbox/storefront-ui 2.0.32 → 3.0.1

package/README.md

@@ -59,11 +59,7 @@ pnpm add react-router
 import { ThemeProvider } from '@janbox/storefront-ui/theme';
 
 function App() {
-  return (
-    <ThemeProvider>
-      {/* Your app */}
-    </ThemeProvider>
-  );
+  return <ThemeProvider>{/* Your app */}</ThemeProvider>;
 }
 ```
 
@@ -75,28 +71,15 @@ import { Button, Input, Box, Text } from '@janbox/storefront-ui';
 function LoginForm() {
   return (
     <Box sx={{ md: { maxWidth: 400 } }}>
-      <Text size="2xl" sx={{ marginBottom: 16 }}>Đăng nhập</Text>
-      
-      <Input
-        type="email"
-        placeholder="Email"
-        size="md"
-        sx={{ marginBottom: 12 }}
-      />
-      
-      <Input
-        type="password"
-        placeholder="Mật khẩu"
-        size="md"
-        sx={{ marginBottom: 16 }}
-      />
-      
-      <Button
-        variant="contained"
-        color="primary"
-        size="lg"
-        fullWidth
-      >
+      <Text size="2xl" sx={{ marginBottom: 16 }}>
+        Đăng nhập
+      </Text>
+
+      <Input type="email" placeholder="Email" size="md" sx={{ marginBottom: 12 }} />
+
+      <Input type="password" placeholder="Mật khẩu" size="md" sx={{ marginBottom: 16 }} />
+
+      <Button variant="contained" color="primary" size="lg" fullWidth>
         Đăng nhập
       </Button>
     </Box>
@@ -122,18 +105,10 @@ import { Flexbox, Box, Button } from '@janbox/storefront-ui';
 
 function ResponsiveLayout() {
   return (
-    <Flexbox
-      direction="column"
-      md={{ direction: 'row' }}
-      gap={16}
-    >
-      <Box sx={{ sm: { flex: 1 } }}>
-        Nội dung chính
-      </Box>
-      
-      <Box sx={{ sm: { width: 300 } }}>
-        Sidebar
-      </Box>
+    <Flexbox direction="column" md={{ direction: 'row' }} gap={16}>
+      <Box sx={{ sm: { flex: 1 } }}>Nội dung chính</Box>
+
+      <Box sx={{ sm: { width: 300 } }}>Sidebar</Box>
     </Flexbox>
   );
 }
@@ -163,7 +138,7 @@ src/lib/<component>/
 export const Button = ({ ref, ..._props }: ButtonProps) => {
   // 1. Merge với default props qua helper
   const { size, variant, color, children, ...rest } = getButtonProps(_props);
-  
+
   // 2. Build CSS từ helpers
   const css = [
     getButtonCssBySize(size),
@@ -171,9 +146,13 @@ export const Button = ({ ref, ..._props }: ButtonProps) => {
     getButtonCssByColor(color),
     createSxInterpolation(sx),
   ];
-  
+
   // 3. Render với Primitive hoặc native element
-  return <button css={css} ref={ref} {...rest}>{children}</button>;
+  return (
+    <button css={css} ref={ref} {...rest}>
+      {children}
+    </button>
+  );
 };
 ```
 
@@ -195,12 +174,12 @@ import { Box } from '@janbox/storefront-ui';
 
 **Breakpoints:**
 
-| Screen | Min-width |
-|--------|-----------|
-| `xs` | 0px (default, không cần khai báo) |
-| `sm` | 768px (tablet) |
-| `md` | 1280px (desktop) |
-| `lg` | 1680px (large desktop) |
+| Screen | Min-width                         |
+| ------ | --------------------------------- |
+| `xs`   | 0px (default, không cần khai báo) |
+| `sm`   | 768px (tablet)                    |
+| `md`   | 1280px (desktop)                  |
+| `lg`   | 1680px (large desktop)            |
 
 ### 3. Polymorphic Components
 
@@ -246,20 +225,20 @@ const responsiveStyle = {
 
 ```tsx
 import {
-  cn,                           // Class names combiner
-  mergeComponentProps,          // Deep merge props
-  getColorShadesByVariant,      // Color utilities
-  getSizeVariantState,          // Size utilities
-  formatNumber,                 // Number formatter
-  formatPrice,                  // Price formatter
-  formatDateTime,               // DateTime formatter
+  cn, // Class names combiner
+  mergeComponentProps, // Deep merge props
+  getColorShadesByVariant, // Color utilities
+  getSizeVariantState, // Size utilities
+  formatNumber, // Number formatter
+  formatPrice, // Price formatter
+  formatDateTime, // DateTime formatter
 } from '@janbox/storefront-ui/utils';
 
 // Example: merge props
 const props = mergeComponentProps(defaultProps, userProps);
 
 // Example: get color shades
-const { main, dark, light, contrastText } = getColorShadesByVariant('primary');
+const { main, dark, light, contrast } = getColorShadesByVariant('primary');
 
 // Example: format price
 const formatted = formatPrice(1000000, 'VND', 'vi-VN'); // "1.000.000 ₫"
@@ -271,34 +250,7 @@ const formatted = formatPrice(1000000, 'VND', 'vi-VN'); // "1.000.000 ₫"
 
 ### Component Categories
 
-Thư viện cung cấp 60+ components được tổ chức theo các nhóm:
-
-#### Layout
-`Box`, `Flexbox`, `Grid`, `Container`
-
-#### Typography
-`Text`, `Link`, `HighlightWords`
-
-#### Form Controls
-`Input`, `InputNumber`, `InputRange`, `InputMask`, `Textarea`, `Select`, `MultipleSelect`, `Checkbox`, `RadioButton`, `Switch`, `DatePicker`, `TimePicker`, `PhoneInput`, `OtpInput`, `Cascader`
-
-#### Buttons
-`Button`, `IconButton`, `NavLink`
-
-#### Feedback
-`Loading`, `Progress`, `LinearProgress`, `Dialog`, `Drawer`, `Tooltip`, `Popover`, `Notifications`
-
-#### Data Display
-`Badge`, `Chip`, `Avatar`, `Table`, `Pagination`, `Stepper`, `Tabs`, `Accordion`, `Collapse`, `Breadcrumbs`, `StarRating`, `PriceLabel`, `CountUp`, `CountdownTimer`, `Flag`
-
-#### Media
-`Image`, `Video`, `Icon`, `Lightbox`, `Swiper`
-
-#### Navigation
-`Menu`, `FilterPanel`
-
-#### Utilities
-`Primitive`, `RippleEffect`, `SuspenseQuery`, `Marquee`, `Floating`
+Thư viện cung cấp 60+ components được tổ chức theo các nhóm. Xem danh sách README theo từng component tại [Component Documentation](#component-documentation).
 
 ### Export Paths
 
@@ -320,7 +272,6 @@ import { cn, formatPrice } from '@janbox/storefront-ui/utils';
 
 // Constants
 import { HTMLDatasetAttributes } from '@janbox/storefront-ui/constants';
-
 ```
 
 ### Size Variants
@@ -337,11 +288,11 @@ Hầu hết components hỗ trợ 4 size variants:
 **Size mapping:**
 
 | size | iconSize | inputSize | inputPaddingX | textVariant |
-|------|----------|-----------|---------------|-------------|
-| `xs` | 20px | 24px | 8px | `xs` |
-| `sm` | 20px | 32px | 12px | `sm` |
-| `md` | 24px | 40px | 12px | `sm` |
-| `lg` | 24px | 48px | 16px | `base` |
+| ---- | -------- | --------- | ------------- | ----------- |
+| `xs` | 20px     | 24px      | 8px           | `xs`        |
+| `sm` | 20px     | 32px      | 12px          | `sm`        |
+| `md` | 24px     | 40px      | 12px          | `sm`        |
+| `lg` | 24px     | 48px      | 16px          | `base`      |
 
 ### Color Variants
 
@@ -453,14 +404,14 @@ Storybook sẽ chạy tại **http://localhost:6006**
 
 ### Development Commands
 
-| Command | Description |
-|---------|-------------|
-| `pnpm storybook` | Dev server (port 6006) |
-| `pnpm build` | Build thư viện → `dist/` |
-| `pnpm dev` | Build với watch mode |
-| `pnpm type-check` | TypeScript type checking |
-| `pnpm lint` | ESLint |
-| `pnpm build-storybook` | Build Storybook static |
+| Command                | Description              |
+| ---------------------- | ------------------------ |
+| `pnpm storybook`       | Dev server (port 6006)   |
+| `pnpm build`           | Build thư viện → `dist/` |
+| `pnpm dev`             | Build với watch mode     |
+| `pnpm type-check`      | TypeScript type checking |
+| `pnpm lint`            | ESLint                   |
+| `pnpm build-storybook` | Build Storybook static   |
 
 ### Creating New Components
 
@@ -494,12 +445,87 @@ export const getXxxProps = (p: XxxProps) => mergeComponentProps(defaultProps, p)
 // xxx.tsx
 export const Xxx = ({ ref, ..._props }: XxxProps) => {
   const { size, children, ...rest } = getXxxProps(_props);
-  return <Primitive ref={ref} {...rest}>{children}</Primitive>;
+  return (
+    <Primitive ref={ref} {...rest}>
+      {children}
+    </Primitive>
+  );
 };
 ```
 
 ---
 
+## Component Documentation
+
+Mọi component đều có README riêng với API reference, examples, và usage notes.
+
+- [Accordion](./dist/lib/accordion/README.md)
+- [Avatar](./dist/lib/avatar/README.md)
+- [Badge](./dist/lib/badge/README.md)
+- [Box](./dist/lib/box/README.md)
+- [Breadcrumbs](./dist/lib/breadcrumbs/README.md)
+- [Button](./dist/lib/button/README.md)
+- [Cascader](./dist/lib/cascader/README.md)
+- [Cell](./dist/lib/grid/cell/README.md)
+- [Checkbox](./dist/lib/checkbox/README.md)
+- [Chip](./dist/lib/chip/README.md)
+- [Collapse](./dist/lib/collapse/README.md)
+- [Container](./dist/lib/container/README.md)
+- [CountUp](./dist/lib/count-up/README.md)
+- [CountdownTimer](./dist/lib/countdown-timer/README.md)
+- [DatePicker](./dist/lib/date-picker/README.md)
+- [Dialog](./dist/lib/dialog/README.md)
+- [Drawer](./dist/lib/drawer/README.md)
+- [FilterPanel](./dist/lib/filter-panel/README.md)
+- [Flag](./dist/lib/flag/README.md)
+- [Flexbox](./dist/lib/flexbox/README.md)
+- [Floating](./dist/lib/floating/README.md)
+- [FormHelperText](./dist/lib/form-helper-text/README.md)
+- [FormLabel](./dist/lib/form-label/README.md)
+- [Grid](./dist/lib/grid/grid/README.md)
+- [HighlightWords](./dist/lib/highlight-words/README.md)
+- [Icon](./dist/lib/icon/README.md)
+- [IconButton](./dist/lib/icon-button/README.md)
+- [Image](./dist/lib/image/README.md)
+- [Input](./dist/lib/input/README.md)
+- [InputMask](./dist/lib/input-mask/README.md)
+- [InputNumber](./dist/lib/input-number/README.md)
+- [InputRange](./dist/lib/input-range/README.md)
+- [Lightbox](./dist/lib/lightbox/README.md)
+- [LinearProgress](./dist/lib/linear-progress/README.md)
+- [Link](./dist/lib/link/README.md)
+- [Loading](./dist/lib/loading/README.md)
+- [Marquee](./dist/lib/marquee/README.md)
+- [Menu](./dist/lib/menu/README.md)
+- [MultipleSelect](./dist/lib/multiple-select/README.md)
+- [NavLink](./dist/lib/nav-link/README.md)
+- [Notifications](./dist/lib/notifications/README.md)
+- [OtpInput](./dist/lib/otp-input/README.md)
+- [Pagination](./dist/lib/pagination/README.md)
+- [PhoneInput](./dist/lib/phone-input/README.md)
+- [Popover](./dist/lib/popover/README.md)
+- [PriceLabel](./dist/lib/price-label/README.md)
+- [Primitive](./dist/lib/primitive/README.md)
+- [Progress](./dist/lib/progress/README.md)
+- [RadioButton](./dist/lib/radio-button/README.md)
+- [RippleEffect](./dist/lib/ripple-effect/README.md)
+- [Select](./dist/lib/select/README.md)
+- [StarRating](./dist/lib/star-rating/README.md)
+- [Stepper](./dist/lib/stepper/README.md)
+- [SuspenseQuery](./dist/lib/suspense-query/README.md)
+- [Swiper](./dist/lib/swiper/README.md)
+- [Switch](./dist/lib/switch/README.md)
+- [Table](./dist/lib/table/README.md)
+- [Tabs](./dist/lib/tabs/README.md)
+- [Text](./dist/lib/text/README.md)
+- [Textarea](./dist/lib/textarea/README.md)
+- [TimePicker](./dist/lib/time-picker/README.md)
+- [Tooltip](./dist/lib/tooltip/README.md)
+- [UnorderedList](./dist/lib/unordered-list/README.md)
+- [Video](./dist/lib/video/README.md)
+
+---
+
 ## API Reference
 
 ### Documentation

package/dist/constants/emotion.d.ts

@@ -3,5 +3,3 @@ export declare const scrollbarNoneStyle: StyledCSS;
 export declare const animatePulseStyle: StyledCSS;
 export declare const animateSpinStyle: StyledCSS;
 export declare const truncateStyle: StyledCSS;
-export declare const pointerEventsNone: StyledCSS;
-export declare const containerStyle: StyledCSS;

package/dist/constants/emotion.js

@@ -1,5 +1,4 @@
 import { keyframes } from "@emotion/react";
-import { breakpoint, mediaQuery } from "../theme/screens.js";
 const scrollbarNoneStyle = {
   scrollbarWidth: "none",
   "&::-webkit-scrollbar": { display: "none" }
@@ -21,32 +20,9 @@ const truncateStyle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-const containerStyle = {
-  width: "100%",
-  marginLeft: "auto",
-  marginRight: "auto",
-  paddingLeft: `${breakpoint.xs.padding}px`,
-  paddingRight: `${breakpoint.xs.padding}px`,
-  [mediaQuery("sm")]: {
-    maxWidth: `${breakpoint.sm.minWidth}px`,
-    paddingLeft: `${breakpoint.sm.padding}px`,
-    paddingRight: `${breakpoint.sm.padding}px`
-  },
-  [mediaQuery("md")]: {
-    maxWidth: `${breakpoint.md.minWidth}px`,
-    paddingLeft: `${breakpoint.md.padding}px`,
-    paddingRight: `${breakpoint.md.padding}px`
-  },
-  [mediaQuery("lg")]: {
-    maxWidth: `${breakpoint.lg.minWidth}px`,
-    paddingLeft: `${breakpoint.lg.padding}px`,
-    paddingRight: `${breakpoint.lg.padding}px`
-  }
-};
 export {
   animatePulseStyle,
   animateSpinStyle,
-  containerStyle,
   scrollbarNoneStyle,
   truncateStyle
 };

package/dist/lib/accordion/accordion-summary/accordion-summary.d.ts

@@ -1,2 +1,2 @@
 import { AccordionSummaryProps } from './types';
-export declare const AccordionSummary: ({ children, ref, ..._props }: AccordionSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AccordionSummary: ({ children, ref, ..._props }: AccordionSummaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/accordion/accordion-summary/accordion-summary.js

@@ -1,9 +1,9 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { getAccordionSummaryProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
 import { Booleanish } from "../../../constants/index.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
 import { Icon } from "../../icon/icon.js";
 const AccordionSummary = ({ children, ref, ..._props }) => {
   const { accordionSummaryProps: accordionSummaryPropsByGroup = {} } = useAccordionGroupContext();
@@ -22,18 +22,26 @@ const AccordionSummary = ({ children, ref, ..._props }) => {
     toggle();
     (_b = rest.onClick) == null ? void 0 : _b.call(rest, e);
   };
-  const css = [
+  return /* @__PURE__ */ jsxs(
+    Primitive,
     {
-      display: "flex",
-      cursor: "pointer"
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsxs("div", { css, "aria-hidden": true, ...rest, onClick, ref, children: [
-    !!expandIcon && expandIcon.position === "left" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon }),
-    /* @__PURE__ */ jsx("div", { css: { flex: "1 1 0%" }, children }),
-    !!expandIcon && expandIcon.position === "right" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon })
-  ] });
+      as: "div",
+      sx: {
+        display: "flex",
+        cursor: "pointer",
+        ...sx
+      },
+      "aria-hidden": true,
+      ...rest,
+      onClick,
+      ref,
+      children: [
+        !!expandIcon && expandIcon.position === "left" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon }),
+        /* @__PURE__ */ jsx(Primitive, { sx: { flex: "1 1 0%" }, children }),
+        !!expandIcon && expandIcon.position === "right" && /* @__PURE__ */ jsx(ExpandIcon, { ...expandIcon })
+      ]
+    }
+  );
 };
 const ExpandIcon = ({ source, position, size, sm, md, lg, sx }) => {
   const { open } = useAccordionContext();

package/dist/lib/accordion/accordion-summary/types.d.ts

@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { IconResponsiveProps } from '../../icon';
 import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 export declare enum AccordionSummaryVariant {
     EndArrow = "end-arrow",
     EndPlusMinus = "end-plus-minus"
@@ -20,8 +21,8 @@ export type AccordionSummaryExpandIconProps = ToResponsiveProps<IconResponsivePr
     source: Record<AccordionState, string>;
     position: 'left' | 'right';
 } & PropsWithSx;
-type AccordionSummaryExtendedProps = PropsWithSx<{
+type AccordionSummaryExtendedProps = {
     expandIcon?: AccordionSummaryExpandIconProps;
-}>;
-export type AccordionSummaryProps = ShallowMerge<JSX.IntrinsicElements['div'], AccordionSummaryExtendedProps>;
+};
+export type AccordionSummaryProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], AccordionSummaryExtendedProps>>;
 export {};

package/dist/lib/avatar/avatar.js

@@ -62,7 +62,7 @@ const Avatar = ({ ref, ..._props }) => {
               alignItems: "center",
               justifyContent: "center",
               backgroundColor: getColorVar(`${color}.600`),
-              color: getColorVar("white"),
+              color: getColorVar("common.white"),
               fontWeight: 600,
               lineHeight: 1,
               borderRadius: "inherit",
@@ -85,7 +85,7 @@ const Avatar = ({ ref, ..._props }) => {
               borderRadius: "50%",
               backgroundColor: getAvatarStatusColor(status),
               borderWidth: 2,
-              borderColor: getColorVar("white"),
+              borderColor: getColorVar("common.white"),
               ...createStatusStyle({ size }),
               sm: createStatusStyle(sm),
               md: createStatusStyle(md),

package/dist/lib/box/README.md

@@ -1,6 +1,6 @@
 # Box
 
-A general-purpose layout primitive that renders a `div` by default. It supports responsive `sx` styling and an optional `container` mode that applies responsive max-width, horizontal centering, and breakpoint-aware padding.
+A general-purpose layout primitive that renders a `div` by default. It supports responsive `sx` styling via the Emotion-powered `sx` prop.
 
 ## Import
 
@@ -12,7 +12,6 @@ import { Box } from '@janbox/storefront-ui';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `container` | `boolean` | false | When true, applies responsive container styles: full width, auto horizontal margins, and breakpoint-aware max-width and padding (xs → sm → md → lg). |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive Emotion CSS overrides. Accepts a base StyledCSS object plus optional `sm`, `md`, and `lg` breakpoint keys for responsive styles. |
 | `as` | `HTMLElementType` | "div" | Override the rendered HTML element (polymorphic). Defaults to `div`. |
 | `children` | `React.ReactNode` | - | Content rendered inside the Box. |
@@ -30,15 +29,6 @@ import { Box } from '@janbox/storefront-ui';
 </Box>
 ```
 
-### Container Box
-
-```tsx
-<Box container>
-  <h1>Page title</h1>
-  <p>Centered, max-width constrained content with responsive padding.</p>
-</Box>
-```
-
 ### Responsive sx styling
 
 ```tsx

package/dist/lib/box/box.js

@@ -1,15 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { getBoxProps } from "./helpers.js";
-import { containerStyle } from "../../constants/emotion.js";
 import { Primitive } from "../primitive/primitive.js";
 const Box = ({ children, ref, ..._props }) => {
-  const { sx = {}, container, ...rest } = getBoxProps(_props);
+  const { sx = {}, ...rest } = getBoxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
-        ...container ? containerStyle : {},
         ...sx,
         sm: { ...sx.sm },
         md: { ...sx.md },

package/dist/lib/box/types.d.ts

@@ -1,7 +1,3 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../primitive';
-type BoxExtendedProps = {
-    container?: boolean;
-};
-export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']> & BoxExtendedProps;
-export {};
+export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']>;

package/dist/lib/button/button.js

@@ -39,7 +39,7 @@ const Button = ({ children, ref, ..._props }) => {
     dark,
     light,
     main,
-    contrastText,
+    contrast,
     placeholder: placeholderColor,
     ariaDisabledSurface,
     ariaDisabledText
@@ -61,7 +61,7 @@ const Button = ({ children, ref, ..._props }) => {
     },
     variant === "contained" && {
       backgroundColor: isLoading ? placeholderColor : main,
-      color: contrastText,
+      color: contrast,
       ":hover": {
         backgroundColor: dark
       },

package/dist/lib/cascader/cascader.js

@@ -10,7 +10,7 @@ import { truncateStyle } from "../../constants/emotion.js";
 import { getSizeVariantState } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { SvgLoader } from "../../components/svg-loader.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
 import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
@@ -73,19 +73,16 @@ const Cascader = ({ ref, ..._props }) => {
     if (isNil(textVariant)) return {};
     return getTypographyVar(textVariant);
   };
-  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      ...restContainerProps,
-      css: [
-        {
-          display: "flex",
-          flexDirection: "column",
-          ...fullWidth ? { width: "100%" } : {}
-        },
-        createSxInterpolation(containerSx)
-      ],
+      ...containerProps,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        ...fullWidth ? { width: "100%" } : {},
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
       children: [
         /* @__PURE__ */ jsxs(
           Floating,

package/dist/lib/cascader/types.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../types';
 import { InputProps } from '../input';
 import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask';
+import { PrimitiveProps } from '../primitive';
 export type CascaderResponsiveProps = InputMaskResponsiveProps;
 export type CascaderOptionValue = string | number;
 export interface CascaderOption {
@@ -47,7 +48,7 @@ interface CascaderExtendedProps extends ToResponsiveProps<CascaderResponsiveProp
     /** Helper text below the input */
     helperText?: string;
     /** Props for the container div */
-    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
+    containerProps?: PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
     /** Props for the search input */
     inputProps?: InputProps;
     /** Whether component takes full width */

package/dist/lib/chip/chip.d.ts

@@ -1,2 +1,2 @@
 import { ChipProps } from './types';
-export declare const Chip: ({ children, ..._props }: ChipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chip: ({ children, ..._props }: ChipProps) => import("react/jsx-runtime").JSX.Element;