@janbox/storefront-ui 4.0.6 → 4.0.8

package/dist/components/scroll-view.d.ts

@@ -1,4 +1,5 @@
+import { PropsWithSx } from '../types';
 import { OverlayScrollbarsComponentProps, OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
-export type ScrollViewProps = OverlayScrollbarsComponentProps;
+export type ScrollViewProps = PropsWithSx<OverlayScrollbarsComponentProps>;
 export type ScrollViewRef = OverlayScrollbarsComponentRef;
-export declare const ScrollView: ({ children, options, ...props }: ScrollViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollView: ({ children, options, sx, ...props }: ScrollViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/scroll-view.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
-const ScrollView = ({ children, options, ...props }) => {
-  return /* @__PURE__ */ jsx(
+import { Stylesheet } from "../lib/stylesheet/stylesheet.js";
+const ScrollView = ({ children, options, sx, ...props }) => {
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     OverlayScrollbarsComponent,
     {
       options: options ?? {
@@ -10,9 +11,10 @@ const ScrollView = ({ children, options, ...props }) => {
         }
       },
       ...props,
+      className: cx(css(sx), props.className),
       children
     }
-  );
+  ) });
 };
 export {
   ScrollView

package/dist/components/virtualized-list.d.ts

@@ -1,14 +1,14 @@
 import { JSX, Ref } from 'react';
 import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual';
 import { ScrollViewRef } from './scroll-view';
-import { ShallowMerge } from '../types';
+import { PropsWithSx, ShallowMerge } from '../types';
 type VirtualizedListOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, HTMLDivElement>>[0], 'getScrollElement'>;
-type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements['div'], {
+type VirtualizedListProps = PropsWithSx<ShallowMerge<JSX.IntrinsicElements['div'], {
     RowComponent: React.ComponentType<{
         row: VirtualItem;
     }>;
     options: VirtualizedListOptions;
     ref?: Ref<ScrollViewRef>;
-}>;
+}>>;
 export type { VirtualItem, VirtualizedListProps, VirtualizedListOptions };
 export declare const VirtualizedList: ({ RowComponent, options, ref, ...props }: VirtualizedListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,8 +3,8 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import { getAccordionContentProps } from "./helpers.js";
 import { useAccordionContext } from "../accordion/helpers.js";
-import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { useAccordionGroupContext } from "../accordion-group/helpers.js";
+import { Stylesheet } from "../../stylesheet/stylesheet.js";
 import { Primitive } from "../../primitive/primitive.js";
 const AccordionContent = ({ children, ref, ..._props }) => {
   const { accordionContentProps: accordionContentPropsByGroup = {} } = useAccordionGroupContext();

package/dist/lib/button/button.js

@@ -163,7 +163,7 @@ const Button = ({ children, ref, ..._props }) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML, css: truncateStyle, children }) }),
+    /* @__PURE__ */ jsx(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx(Primitive, { as: "span", dangerouslySetInnerHTML, sx: truncateStyle, children }) }),
     !!endIcon && /* @__PURE__ */ jsx(
       Icon,
       {
@@ -200,7 +200,7 @@ const Button = ({ children, ref, ..._props }) => {
           justifyContent: "center"
         },
         as: "span",
-        children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
+        children: /* @__PURE__ */ jsx(Icon, { sx: animateSpinStyle, source: LoadingIcon })
       }
     ),
     /* @__PURE__ */ jsx(RippleEffect, {})

package/dist/lib/cascader/cascader-floating-content.d.ts

@@ -15,5 +15,5 @@ type CascaderFloatingContentProps = {
 } & ToResponsiveProps<{
     size?: SizeVariant;
 }>;
-export declare const CascaderFloatingContent: ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, size, sm, md, lg, }: CascaderFloatingContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CascaderFloatingContent: ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, size, sm, md, lg, }: CascaderFloatingContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lib/cascader/cascader-floating-content.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useId, useState, useEffect, useMemo, useCallback } from "react";
 import { isString, isNil, trimStart } from "lodash-es";
 import { findOptionPath, isExpandable, hasChildren } from "./helpers.js";
@@ -14,6 +14,7 @@ import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { useFloatingContext } from "../floating/floating/helpers.js";
 import { ensureArray, matchSearch } from "../../utils/common.js";
+import { Primitive } from "../primitive/primitive.js";
 import { Input } from "../input/input.js";
 import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
 const DEFAULT_DISPLAY_ROW_COUNT = 5;
@@ -189,28 +190,27 @@ const CascaderFloatingContent = ({
   const renderBreadcrumbs = () => {
     if (expandedPath.length === 0) return null;
     return /* @__PURE__ */ jsxs(
-      "div",
+      Primitive,
       {
-        css: {
+        sx: {
           paddingLeft: inputPaddingX,
           paddingRight: inputPaddingX,
           minHeight: rowMinHeight,
           borderTop: `1px solid ${getColorVar("neutral.200")}`,
           display: "flex",
           alignItems: "center",
-          gap: "0.25rem",
+          gap: 4,
           flexWrap: "wrap",
-          paddingTop: "0.25rem",
-          paddingBottom: "0.25rem"
+          paddingBlock: 4
         },
         children: [
           /* @__PURE__ */ jsx(
-            "button",
+            Primitive,
             {
               "data-index": -1,
-              type: "button",
+              role: "button",
               onClick: handleBreadcrumbClick,
-              css: {
+              sx: {
                 color: getColorVar("neutral.500"),
                 transition: "color 150ms",
                 ":hover": { color: getColorVar("primary.600") }
@@ -218,31 +218,24 @@ const CascaderFloatingContent = ({
               children: "All"
             }
           ),
-          expandedOptions.map((opt, idx) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              css: { display: "flex", alignItems: "center", gap: "0.25rem" },
-              children: [
-                /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400") }, children: separator }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "data-index": idx,
-                    type: "button",
-                    onClick: handleBreadcrumbClick,
-                    css: {
-                      color: idx === expandedOptions.length - 1 ? getColorVar("primary.600") : getColorVar("neutral.600"),
-                      fontWeight: idx === expandedOptions.length - 1 ? 500 : void 0,
-                      transition: "color 150ms",
-                      ":hover": { color: getColorVar("primary.600") }
-                    },
-                    children: opt.breadcrumbLabel ?? opt.label
-                  }
-                )
-              ]
-            },
-            `${uniqueId}-breadcrumb-${opt.value}`
-          ))
+          expandedOptions.map((opt, idx) => /* @__PURE__ */ jsxs(Primitive, { sx: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx(Primitive, { as: "span", sx: { color: getColorVar("neutral.400") }, children: separator }),
+            /* @__PURE__ */ jsx(
+              Primitive,
+              {
+                "data-index": idx,
+                role: "button",
+                onClick: handleBreadcrumbClick,
+                sx: {
+                  color: idx === expandedOptions.length - 1 ? getColorVar("primary.600") : getColorVar("neutral.600"),
+                  fontWeight: idx === expandedOptions.length - 1 ? 500 : void 0,
+                  transition: "color 150ms",
+                  ":hover": { color: getColorVar("primary.600") }
+                },
+                children: opt.breadcrumbLabel ?? opt.label
+              }
+            )
+          ] }, `${uniqueId}-breadcrumb-${opt.value}`))
         ]
       }
     );
@@ -292,21 +285,20 @@ const CascaderFloatingContent = ({
       });
     };
     return /* @__PURE__ */ jsx(
-      "div",
+      Primitive,
       {
         "aria-hidden": true,
         role: "button",
         onClick: handleSelect,
-        css: {
+        sx: {
           minHeight: rowMinHeight,
           paddingLeft: inputPaddingX,
           paddingRight: inputPaddingX,
-          paddingTop: "0.25rem",
-          paddingBottom: "0.25rem",
+          paddingBlock: 4,
           display: "flex",
           alignItems: "center",
-          gap: "0.5rem",
-          borderRadius: "0.5rem",
+          gap: 8,
+          borderRadius: 8,
           transition: "background-color 150ms, color 150ms",
           "&:hover": { backgroundColor: getColorVar("neutral.100") },
           ...isSelected && !isExpandable(rowData) ? {
@@ -316,59 +308,46 @@ const CascaderFloatingContent = ({
           ...rowData.disabled ? { opacity: 0.5, cursor: "not-allowed" } : {}
         },
         children: isLoading ? /* @__PURE__ */ jsx(TextSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { css: { flex: 1, ...truncateStyle }, children: rowData.label }),
-          isExpandable(rowData) ? /* @__PURE__ */ jsx(SvgLoader, { source: ArrowRightIcon, width: 20, height: 20, css: { color: getColorVar("neutral.400") } }) : isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 20, height: 20, css: { color: getColorVar("primary.600") } })
+          /* @__PURE__ */ jsx(Primitive, { sx: { flex: 1, ...truncateStyle }, children: rowData.label }),
+          isExpandable(rowData) ? /* @__PURE__ */ jsx(SvgLoader, { source: ArrowRightIcon, width: 20, height: 20, sx: { color: getColorVar("neutral.400") } }) : isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 20, height: 20, sx: { color: getColorVar("primary.600") } })
         ] })
       },
       `${uniqueId}-option-${rowData.value}`
     );
   };
   return /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      css: {
-        paddingTop: "0.5rem",
-        paddingBottom: "0.5rem",
+      sx: {
+        paddingBlock: 8,
         border: `1px solid ${getColorVar("border.default")}`,
-        borderRadius: "0.5rem",
+        borderRadius: 8,
         boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
         fontSize: getTypographyVar("sm").fontSize,
         lineHeight: getTypographyVar("sm").lineHeight,
         backgroundColor: getColorVar("surface.default")
       },
       children: [
-        !searchable && /* @__PURE__ */ jsx(
-          "div",
+        !searchable && /* @__PURE__ */ jsx(Primitive, { sx: { padding: 8 }, children: /* @__PURE__ */ jsx(
+          Input,
           {
-            css: {
-              paddingLeft: "0.5rem",
-              paddingRight: "0.5rem",
-              paddingTop: "0.5rem",
-              paddingBottom: "0.5rem"
-            },
-            children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                size,
-                sm: { size: sm == null ? void 0 : sm.size },
-                md: { size: md == null ? void 0 : md.size },
-                lg: { size: lg == null ? void 0 : lg.size },
-                value: inputValue,
-                placeholder: "Search...",
-                ...inputProps,
-                onChange: onInputChange,
-                ref: searchInputRef
-              }
-            )
+            size,
+            sm: { size: sm == null ? void 0 : sm.size },
+            md: { size: md == null ? void 0 : md.size },
+            lg: { size: lg == null ? void 0 : lg.size },
+            value: inputValue,
+            placeholder: "Search...",
+            ...inputProps,
+            onChange: onInputChange,
+            ref: searchInputRef
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx(
           VirtualizedList,
           {
             ...listProps,
-            css: {
-              paddingLeft: 4,
-              paddingRight: 4,
+            sx: {
+              paddingInline: 4,
               ...isLoading ? { cursor: "wait", pointerEvents: "none" } : {}
             },
             options: {

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

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

package/dist/lib/cascader/cascader.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { isNil } from "lodash-es";
 import { CascaderFloatingContent } from "./cascader-floating-content.js";
@@ -111,7 +111,7 @@ const Cascader = ({ ref, ..._props }) => {
                       source: ArrowDownIcon,
                       width: 20,
                       height: 20,
-                      css: {
+                      sx: {
                         transition: "transform 150ms",
                         ...isOpen ? { transform: "rotate(-180deg)" } : {}
                       }
@@ -120,17 +120,15 @@ const Cascader = ({ ref, ..._props }) => {
                   ...rest,
                   ref,
                   children: /* @__PURE__ */ jsx(
-                    "div",
+                    Primitive,
                     {
-                      css: [
-                        {
-                          flex: 1,
-                          textAlign: "left",
-                          ...truncateStyle
-                        },
-                        getTextCss(rest == null ? void 0 : rest.size)
-                      ],
-                      children: selectedPath.length > 0 ? /* @__PURE__ */ jsx("div", { children: valueRenderer ?? selectedPath.join(" / ") }) : /* @__PURE__ */ jsx("div", { css: { color: getColorVar("neutral.400") }, children: placeholder })
+                      sx: {
+                        flex: 1,
+                        textAlign: "left",
+                        ...truncateStyle,
+                        ...getTextCss(rest == null ? void 0 : rest.size)
+                      },
+                      children: selectedPath.length > 0 ? /* @__PURE__ */ jsx("div", { children: valueRenderer ?? selectedPath.join(" / ") }) : /* @__PURE__ */ jsx(Primitive, { sx: { color: getColorVar("neutral.400") }, children: placeholder })
                     }
                   )
                 }

package/dist/lib/collapse/collapse.d.ts

@@ -1,2 +1,2 @@
 import { CollapseProps } from './types';
-export declare const Collapse: ({ children, open, collapsedSize, orientation, ...props }: CollapseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Collapse: ({ children, open, collapsedSize, orientation, sx, ...props }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/collapse/collapse.js

@@ -1,11 +1,13 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { motion } from "motion/react";
+import { Stylesheet } from "../stylesheet/stylesheet.js";
 const Collapse = ({
   children,
   open = true,
   collapsedSize = 0,
   orientation = "vertical",
+  sx,
   ...props
 }) => {
   const [initial] = useState(() => {
@@ -30,17 +32,23 @@ const Collapse = ({
     }
     return css;
   }, [collapsedSize, open, orientation]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsx(
     motion.div,
     {
-      css: { overflow: "hidden" },
       animate,
       initial,
       ...props,
       transition: { duration: 0.15, ...props.transition },
+      className: cx(
+        css({
+          overflow: "hidden",
+          ...sx
+        }),
+        props.className
+      ),
       children
     }
-  );
+  ) });
 };
 export {
   Collapse

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

@@ -1,7 +1,7 @@
 import { HTMLMotionProps } from 'motion/react';
-import { ShallowMerge } from '../../types';
-export type CollapseProps = ShallowMerge<HTMLMotionProps<'div'>, {
+import { PropsWithSx, ShallowMerge } from '../../types';
+export type CollapseProps = PropsWithSx<ShallowMerge<HTMLMotionProps<'div'>, {
     open?: boolean;
     collapsedSize?: number;
     orientation?: 'horizontal' | 'vertical';
-}>;
+}>>;

package/dist/lib/count-up/README.md

@@ -16,6 +16,10 @@ import { CountUp } from '@janbox/storefront-ui';
 | `from` | `number` | 0 | Số bắt đầu đếm |
 | `duration` | `number` | 2 | Thời gian animation tính bằng giây |
 | `formatNumberOptions` | `FormatNumberOptions` | - | Tùy chọn format số (mở rộng từ `Intl.NumberFormatOptions` với thuộc tính `locale`). Kiểm soát số chữ số thập phân, format tiền tệ và các tùy chọn hiển thị số theo locale |
+| `startOnView` | `boolean` | `true` | Chỉ chạy animation khi component cuộn vào viewport. Đặt `false` để chạy animation ngay khi mount |
+| `prefix` | `React.ReactNode` | - | Nội dung hiển thị trước số |
+| `suffix` | `React.ReactNode` | - | Nội dung hiển thị sau số |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom style responsive (hỗ trợ `sm`, `md`, `lg`) |
 | `ref` | `React.Ref<HTMLSpanElement>` | - | Ref tới phần tử span bên dưới |
 
 *Prop bắt buộc
@@ -40,6 +44,24 @@ import { CountUp } from '@janbox/storefront-ui';
 <CountUp from={0} to={99.99} duration={5} style={{ fontSize: 32, fontWeight: 'bold' }} />
 ```
 
+### Chạy animation ngay khi mount (không đợi viewport)
+
+```tsx
+<CountUp to={1000} startOnView={false} style={{ fontSize: 32 }} />
+```
+
+### Custom style responsive với `sx`
+
+```tsx
+<CountUp to={1000} sx={{ fontSize: 24, fontWeight: 700, md: { fontSize: 40 } }} />
+```
+
+### Prefix và suffix
+
+```tsx
+<CountUp to={1000} prefix="$" suffix="+" style={{ fontSize: 32 }} />
+```
+
 ## Dependencies
 
 - motion/react

package/dist/lib/count-up/count-up.d.ts

@@ -1,2 +1,2 @@
 import { CountUpProps } from './types';
-export declare const CountUp: ({ from, to, duration, formatNumberOptions, ref, ...props }: CountUpProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CountUp: ({ from, to, duration, formatNumberOptions, startOnView, sx, className, prefix, suffix, ref, ...props }: CountUpProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/count-up/count-up.js

@@ -1,11 +1,24 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { useMotionValue, useInView, useTransform, animate, motion } from "motion/react";
 import { formatNumber } from "../../utils/index.js";
 import { useTranslation } from "../../i18n/index.js";
 import { getDecimalDigits } from "../../utils/common.js";
-const CountUp = ({ from = 0, to, duration = 2, formatNumberOptions, ref, ...props }) => {
+import { Stylesheet } from "../stylesheet/stylesheet.js";
+const CountUp = ({
+  from = 0,
+  to,
+  duration = 2,
+  formatNumberOptions,
+  startOnView = true,
+  sx,
+  className,
+  prefix,
+  suffix,
+  ref,
+  ...props
+}) => {
   const rootRef = useRef(null);
   const { locale } = useTranslation();
   const mergedRef = useMergeRefs([ref, rootRef]);
@@ -21,13 +34,17 @@ const CountUp = ({ from = 0, to, duration = 2, formatNumberOptions, ref, ...prop
     })
   );
   useEffect(() => {
-    if (!isInView) return;
+    if (startOnView && !isInView) return;
     const controls = animate(count, to, { duration });
     return () => {
       controls.stop();
     };
-  }, [count, duration, isInView, to]);
-  return /* @__PURE__ */ jsx(motion.span, { ...props, ref: mergedRef, children: rounded });
+  }, [count, duration, isInView, startOnView, to]);
+  return /* @__PURE__ */ jsx(Stylesheet, { children: ({ cx, css }) => /* @__PURE__ */ jsxs(motion.span, { ...props, className: cx(className, css(sx)), ref: mergedRef, children: [
+    prefix,
+    /* @__PURE__ */ jsx(motion.span, { children: rounded }),
+    suffix
+  ] }) });
 };
 export {
   CountUp

package/dist/lib/count-up/types.d.ts

@@ -1,9 +1,15 @@
 import { HTMLMotionProps } from 'motion/react';
 import { FormatNumberOptions } from '../../utils';
-import { ShallowMerge } from '../../types';
-export type CountUpProps = ShallowMerge<HTMLMotionProps<'span'>, {
+import { PropsWithSx, ShallowMerge } from '../../types';
+export type CountUpProps = PropsWithSx<ShallowMerge<HTMLMotionProps<'span'>, {
     from?: number;
     to: number;
     duration?: number;
     formatNumberOptions?: FormatNumberOptions;
-}>;
+    /** Chỉ chạy animation khi element cuộn vào viewport. Mặc định `true`. */
+    startOnView?: boolean;
+    /** Nội dung hiển thị trước số */
+    prefix?: React.ReactNode;
+    /** Nội dung hiển thị sau số */
+    suffix?: React.ReactNode;
+}>>;

package/dist/lib/date-picker/date-picker.js

@@ -9,12 +9,14 @@ import { getSizeVariantState } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import "lodash-es";
 import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
 import { createSxInterpolation } from "../../utils/stylesheet.js";
 import { TimePicker } from "../time-picker/time-picker.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";
+import { Primitive } from "../primitive/primitive.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 import { Icon } from "../icon/icon.js";
@@ -80,9 +82,9 @@ const DatePicker = (_props, ref) => {
     onChange == null ? void 0 : onChange(preset);
   };
   const portalContentRenderer = () => /* @__PURE__ */ jsxs(
-    "div",
+    Primitive,
     {
-      css: {
+      sx: {
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
@@ -98,11 +100,24 @@ const DatePicker = (_props, ref) => {
       children: [
         /* @__PURE__ */ jsx(Calendar, { onChange: handleChange, minDate, maxDate, date: selectedDate ?? void 0 }),
         timePicker && /* @__PURE__ */ jsxs(
-          "div",
+          Primitive,
           {
-            css: { paddingLeft: 12, paddingRight: 12, paddingBottom: 12, display: "flex", alignItems: "center", gap: 8 },
+            sx: {
+              paddingInline: 12,
+              paddingBottom: 12,
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
             children: [
-              /* @__PURE__ */ jsx("span", { css: { fontSize: "0.75rem", lineHeight: "1rem" }, children: "Time:" }),
+              /* @__PURE__ */ jsx(
+                Primitive,
+                {
+                  as: "span",
+                  sx: { fontSize: getTypographyVar("xs").fontSize, lineHeight: getTypographyVar("xs").lineHeight },
+                  children: "Time:"
+                }
+              ),
               /* @__PURE__ */ jsx(
                 TimePicker,
                 {
@@ -134,7 +149,7 @@ const DatePicker = (_props, ref) => {
         Icon,
         {
           source: CloseIcon,
-          sx: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          sx: { color: rest.disabled ? getColorVar("neutral.400") : getColorVar("neutral.500") },
           size: getSizeVariantState(size).iconSize,
           sm: {
             size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
@@ -163,7 +178,7 @@ const DatePicker = (_props, ref) => {
         lg: {
           size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
         },
-        sx: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+        sx: { color: rest.disabled ? getColorVar("neutral.400") : getColorVar("neutral.500") }
       }
     );
   };
@@ -206,11 +221,11 @@ const DatePicker = (_props, ref) => {
                   ...rest,
                   ref,
                   children: /* @__PURE__ */ jsxs(
-                    "div",
+                    Primitive,
                     {
-                      css: { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                      sx: { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
                       children: [
-                        !selectedDate && !!placeholder && /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400") }, children: placeholder }),
+                        !selectedDate && !!placeholder && /* @__PURE__ */ jsx(Primitive, { as: "span", sx: { color: getColorVar("neutral.400") }, children: placeholder }),
                         !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(valueFormat) })
                       ]
                     }

package/dist/lib/dialog/dialog/dialog.d.ts

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