@janbox/storefront-ui 1.0.27 → 2.0.1

package/dist/lib/tabs/tab-list/types.d.ts

@@ -1,8 +1,5 @@
+import { PropsWithSx } from '../../../types';
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign } from '../../../types';
-type TabListHTMLProps = Omit<JSX.IntrinsicElements['div'], 'is'>;
-export interface TabListExtendedProps extends ResponsiveDesign<PropsWithCSS> {
-}
-export type TabListProps = TabListHTMLProps & TabListExtendedProps;
-export {};
+export type TabListExtendedProps = PropsWithSx;
+export type TabListProps = JSX.IntrinsicElements['div'] & TabListExtendedProps;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/tabs/tab-list/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,KAAK,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;AAEjE,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,YAAY,CAAC;CAAG;AAE/E,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,oBAAoB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC"}

package/dist/lib/tabs/tab-panel/tab-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-panel/tab-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAOxC,eAAO,MAAM,QAAQ,iCAAkC,aAAa,qDAkBnE,CAAC"}
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-panel/tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAOxC,eAAO,MAAM,QAAQ,iCAAkC,aAAa,qDASnE,CAAC"}

package/dist/lib/tabs/tab-panel/tab-panel.js

@@ -1,20 +1,11 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { mergeComponentProps } from "../../../utils/index.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
 const TabPanel = ({ children, ref, ..._props }) => {
   const { tabPanelProps: defaultTabPanelProps = {} } = useTabsContext();
-  const { xs, sm, md, lg, ...props } = mergeComponentProps(defaultTabPanelProps, _props);
-  const css = [
-    xs == null ? void 0 : xs.css,
-    {
-      [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [mediaQuery("md")]: md == null ? void 0 : md.css,
-      [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
-  ];
-  return /* @__PURE__ */ jsx("div", { ...props, ref, css, children });
+  const { sx, ...props } = mergeComponentProps(defaultTabPanelProps, _props);
+  return /* @__PURE__ */ jsx("div", { ...props, ref, css: createSxInterpolation(sx), children });
 };
 export {
   TabPanel

package/dist/lib/tabs/tab-panel/types.d.ts

@@ -1,7 +1,4 @@
 import { JSX } from 'react';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
-interface TabPanelExtendedProps extends ResponsiveDesign<PropsWithCSS> {
-}
-export type TabPanelProps = ShallowMerge<JSX.IntrinsicElements['div'], TabPanelExtendedProps>;
-export {};
+import { PropsWithSx, ShallowMerge } from '../../../types';
+export type TabPanelProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/tabs/tab-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,YAAY,CAAC;CAAG;AAEzE,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC"}

package/dist/lib/tabs/tabs/helpers.js

@@ -14,8 +14,8 @@ const defaultProps = {
     }
   },
   tabIndicatorProps: {
-    xs: {
-      css: {
+    sx: {
+      xs: {
         height: 2,
         backgroundColor: getColorVar("primary.600")
       }

package/dist/lib/tabs/tabs/tabs.d.ts

@@ -1,3 +1,3 @@
 import { TabsProps } from './types';
-export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Tabs: ({ ref, children, ..._props }: TabsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tabs.d.ts.map

package/dist/lib/tabs/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tabs/tabs.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,IAAI,mHA2Df,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tabs/tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKpC,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDA0C3D,CAAC"}

package/dist/lib/tabs/tabs/tabs.js

@@ -1,18 +1,13 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useRef, useMemo } from "react";
+import { useRef, useMemo } from "react";
 import { getTabsProps, TabsContext } from "./helpers.js";
 import { useControllableState } from "../../../hooks/use-controllable-state.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
-const Tabs = forwardRef((_props, ref) => {
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const Tabs = ({ ref, children, ..._props }) => {
   const {
     defaultActiveIndex,
-    xs,
-    sm,
-    md,
-    lg,
+    sx,
     activeIndex,
-    children,
     onTabChange,
     tabProps,
     tabIndicatorProps,
@@ -40,22 +35,7 @@ const Tabs = forwardRef((_props, ref) => {
       preventActiveTabChange
     };
   }, [activeTabIndex, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange, setActiveTabIndex]);
-  const css = [
-    {
-      display: "flex",
-      flexDirection: "column"
-    },
-    createStyle(xs),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { css, ...rest, ref, children }) });
-});
-const createStyle = ({ css } = {}) => {
-  return [css];
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { css: createSxInterpolation(sx), ...rest, ref, children }) });
 };
 export {
   Tabs

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

@@ -2,9 +2,8 @@ import { JSX } from 'react';
 import { TabProps } from '../tab';
 import { TabIndicatorProps } from '../tab-indicator';
 import { TabPanelProps } from '../tab-panel';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
-export type TabsResponsiveProps = PropsWithCSS;
-export interface TabsExtendedProps extends ResponsiveDesign<TabsResponsiveProps> {
+import { PropsWithSx, ShallowMerge } from '../../../types';
+export type TabsExtendedProps = PropsWithSx<{
     activeIndex?: number;
     defaultActiveIndex?: number;
     onTabChange?: (tabIndex: number) => void;
@@ -12,6 +11,6 @@ export interface TabsExtendedProps extends ResponsiveDesign<TabsResponsiveProps>
     tabIndicatorProps?: TabIndicatorProps;
     tabPanelProps?: Partial<TabPanelProps>;
     preventActiveTabChange?: boolean;
-}
-export type TabsProps = ShallowMerge<JSX.IntrinsicElements["div"], TabsExtendedProps>;
+}>;
+export type TabsProps = ShallowMerge<JSX.IntrinsicElements['div'], TabsExtendedProps>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/tabs/tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC;AAC/C,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB,CAAC,mBAAmB,CAAC;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,iBAAiB,CAClB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/text/helpers.js

@@ -129,7 +129,7 @@ const getTextCssByVariant = (variant) => {
 const getTextProps = (extended) => {
   return mergeComponentProps(
     {
-      element: "p"
+      as: "p"
     },
     extended
   );

package/dist/lib/text/text.d.ts

@@ -1,3 +1,3 @@
 import { TextProps } from './types';
-export declare const Text: ({ children, ref, ..._props }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Text: ({ sx, children, ref, ..._props }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=text.d.ts.map

package/dist/lib/text/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/lib/text/text.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,IAAI,iCAAkC,SAAS,qDAuB3D,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/lib/text/text.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAMzD,eAAO,MAAM,IAAI,qCAAsC,SAAS,qDAwB/D,CAAC"}

package/dist/lib/text/text.js

@@ -4,36 +4,37 @@ import { getTextProps } from "./helpers.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 import { Primitive } from "../primitive/primitive.js";
-const Text = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, element = "p", dangerouslySetInnerHTML, ...rest } = getTextProps(_props);
+const Text = ({ sx, children, ref, ..._props }) => {
+  const { sizeVariant, sm, md, lg, as = "p", dangerouslySetInnerHTML, ...rest } = getTextProps(_props);
   const css = [
-    createStyle(xs),
+    createStyle({ sizeVariant }),
     {
       [mediaQuery("sm")]: createStyle(sm),
       [mediaQuery("md")]: createStyle(md),
       [mediaQuery("lg")]: createStyle(lg)
-    }
+    },
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsx(
     Primitive,
     {
-      as: element,
       css,
       dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
       ...rest,
+      as,
       ref,
       children: isNil(dangerouslySetInnerHTML) ? children : null
     }
   );
 };
-const createStyle = ({ css, sizeVariant } = {}) => {
+const createStyle = ({ sizeVariant } = {}) => {
   return [
     sizeVariant && {
       fontSize: getTypographyVar(sizeVariant).fontSize,
       lineHeight: getTypographyVar(sizeVariant).lineHeight
-    },
-    css
+    }
   ];
 };
 export {

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

@@ -1,14 +1,13 @@
-import { HTMLAttributes, HTMLElementType, Ref } from 'react';
+import { HTMLElementType, HTMLProps } from 'react';
 import { TypographySizeVariant } from '../../theme';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
+import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../types';
 export type TextVariant = 'extra-small' | 'small' | 'base' | 'large' | 'heading-6' | 'heading-5' | 'heading-4' | 'heading-3' | 'heading-2' | 'heading-1';
-export interface TextResponsiveProps extends PropsWithCSS {
+export interface TextResponsiveProps {
     sizeVariant?: TypographySizeVariant;
 }
-type TextExtendedProps = ResponsiveDesign<TextResponsiveProps> & {
-    element?: HTMLElementType;
-    ref?: Ref<HTMLElement>;
-};
-export type TextProps = ShallowMerge<HTMLAttributes<HTMLElement>, TextExtendedProps>;
+type TextExtendedProps = PropsWithSx<ToResponsiveProps<TextResponsiveProps> & {
+    as?: HTMLElementType;
+}>;
+export type TextProps = ShallowMerge<HTMLProps<HTMLElement>, TextExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/text/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,WAAW,GACnB,aAAa,GACb,OAAO,GACP,MAAM,GACN,OAAO,GACP,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,WAAW,GACnB,aAAa,GACb,OAAO,GACP,MAAM,GACN,OAAO,GACP,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,KAAK,iBAAiB,GAAG,WAAW,CAClC,iBAAiB,CAAC,mBAAmB,CAAC,GAAG;IACvC,EAAE,CAAC,EAAE,eAAe,CAAC;CACtB,CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/textarea/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAUxC,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQxC,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC"}

package/dist/lib/textarea/helpers.js

@@ -1,8 +1,6 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+  size: "md"
 };
 const getTextareaProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

package/dist/lib/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDA2GzD,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAQjE,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAkHzD,CAAC"}

package/dist/lib/textarea/textarea.js

@@ -5,14 +5,14 @@ import { isString } from "lodash-es";
 import { getTextareaProps } from "./helpers.js";
 import classes from "./textarea.module.scss.js";
 import { getSizeVariantState } from "../../utils/index.js";
+import { createSxInterpolation, cn } from "../../utils/stylesheet.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
-import { cn } from "../../utils/stylesheet.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const Textarea = ({ ref, ..._props }) => {
   const {
-    xs,
+    size,
     sm,
     md,
     lg,
@@ -24,6 +24,7 @@ const Textarea = ({ ref, ..._props }) => {
     debounce = 0,
     mode = "onChange",
     value,
+    sx,
     ...rest
   } = getTextareaProps(_props);
   const textareaRef = useRef(null);
@@ -78,34 +79,44 @@ const Textarea = ({ ref, ..._props }) => {
       paddingTop: 8,
       paddingBottom: 8
     },
-    createStyle(xs),
+    createStyle({ size }),
     {
       [mediaQuery("sm")]: createStyle(sm),
       [mediaQuery("md")]: createStyle(md),
       [mediaQuery("lg")]: createStyle(lg)
-    }
+    },
+    createSxInterpolation(sx)
   ];
-  return /* @__PURE__ */ jsxs("div", { ...containerProps, className: cn(classes.textarea__container, containerProps == null ? void 0 : containerProps.className), children: [
-    /* @__PURE__ */ jsx("div", { css, className: classes.textarea__main, children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        "aria-invalid": error,
-        className: cn(
-          classes.textarea__control,
-          className
-        ),
-        ...rest,
-        value: typingValue ?? value,
-        ref: mergedRefs,
-        onChange,
-        onBlur,
-        onFocus
-      }
-    ) }),
-    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-  ] });
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...restContainerProps,
+      css: createSxInterpolation(containerSx),
+      className: cn(classes.textarea__container, restContainerProps.className),
+      children: [
+        /* @__PURE__ */ jsx("div", { css, className: classes.textarea__main, children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            "aria-invalid": error,
+            className: cn(
+              classes.textarea__control,
+              className
+            ),
+            ...rest,
+            value: typingValue ?? value,
+            ref: mergedRefs,
+            onChange,
+            onBlur,
+            onFocus
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
 };
-const createStyle = ({ css, size } = {}) => {
+const createStyle = ({ size } = {}) => {
   const { inputPaddingX, textVariant } = getSizeVariantState(size);
   return [
     {
@@ -113,8 +124,7 @@ const createStyle = ({ css, size } = {}) => {
       paddingRight: inputPaddingX,
       fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
       lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
-    },
-    css
+    }
   ];
 };
 export {

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

@@ -1,11 +1,10 @@
-import { HTMLAttributes, JSX } from 'react';
-import { PropsWithCSS, SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
-export interface TextareaResponsiveProps extends PropsWithCSS {
+import { JSX } from 'react';
+import { SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
+export interface TextareaResponsiveProps {
     size?: SizeVariant;
 }
-export type TextareaWrapperProps = HTMLAttributes<HTMLDivElement>;
-interface TextareaExtendedProps extends ResponsiveDesign<TextareaResponsiveProps> {
-    containerProps?: JSX.IntrinsicElements['div'];
+type TextareaExtendedProps = PropsWithSx<ToResponsiveProps<TextareaResponsiveProps> & {
+    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
     mainProps?: JSX.IntrinsicElements['div'];
     helperText?: string;
     error?: boolean;
@@ -13,7 +12,7 @@ interface TextareaExtendedProps extends ResponsiveDesign<TextareaResponsiveProps
     defaultValue?: string;
     mode?: 'onChange' | 'onBlur';
     debounce?: number;
-}
+}>;
 export type TextareaProps = ShallowMerge<JSX.IntrinsicElements['textarea'], TextareaExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/textarea/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,qBAAqB,GAAG,WAAW,CACtC,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IAC3C,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

package/dist/lib/time-picker/time-picker.d.ts

@@ -1,3 +1,3 @@
 import { TimePickerProps } from './types';
-export declare const TimePicker: ({ placeholder, onChange, defaultValue, value, clearable, onClear, containerProps, placement, open, onOpenChange, disabled, ...rest }: TimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TimePicker: ({ placeholder, onChange, defaultValue, value, clearable, onClear, containerProps, placement, open, onOpenChange, disabled, sx, size, ...rest }: TimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=time-picker.d.ts.map

package/dist/lib/time-picker/time-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,UAAU,yIAapB,eAAe,qDA2RjB,CAAC"}
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,UAAU,mJAepB,eAAe,qDA2QjB,CAAC"}

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

@@ -8,9 +8,9 @@ import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
 import { VirtualizedList } from "../../components/virtualized-list.js";
 import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
 import ClockIcon from "../../assets/svg/clock-time.svg.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
+import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 import { Floating } from "../floating/floating/floating.js";
 import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
 import { FloatingContent } from "../floating/floating-content/floating-content.js";
@@ -28,11 +28,13 @@ const TimePicker = ({
   open,
   onOpenChange,
   disabled,
+  sx,
+  size,
   ...rest
 }) => {
   const floatingRef = useRef(null);
   const windowScreen = useWindowScreen();
-  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name) ?? size;
   const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
   const [isOpen, setIsOpen] = useControllableState({
     defaultValue: open ?? false,
@@ -200,25 +202,14 @@ const TimePicker = ({
     e.stopPropagation();
     onClear == null ? void 0 : onClear();
   };
-  const getCss = (sizeVariant) => {
-    if (isNil(sizeVariant)) return {};
-    return getSizeVariantState(sizeVariant);
-  };
-  const createStyle = (screen) => {
-    const { css } = rest[screen] ?? {};
-    return {
-      ...css
-    };
-  };
   const getIcon = () => {
-    var _a, _b;
     if (selectedDate && clearable) {
       return /* @__PURE__ */ jsx(
         Icon,
         {
-          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          size: getSizeVariantState(size).iconSize,
           source: CloseIcon,
-          css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          sx: { color: disabled ? getColorVar("neutral.400") : getColorVar("neutral.500") },
           onClick: handleClear
         }
       );
@@ -227,65 +218,59 @@ const TimePicker = ({
       Icon,
       {
         source: ClockIcon,
-        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
-        css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+        size: getSizeVariantState(size).iconSize,
+        sx: { color: disabled ? getColorVar("neutral.400") : getColorVar("neutral.500") }
       }
     );
   };
-  return /* @__PURE__ */ jsx("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%" }, children: /* @__PURE__ */ jsxs(
-    Floating,
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      clickProps: {
-        enabled: true
-      },
-      dismissProps: {
-        enabled: true
-      },
-      sizeOptions,
-      placement,
-      open: isOpen,
-      onOpenChange: prehandleOpenChange,
-      ref: floatingRef,
-      children: [
-        /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            css: [
-              createStyle("sm"),
-              {
-                [mediaQuery("xs")]: createStyle("xs"),
-                [mediaQuery("sm")]: createStyle("sm"),
-                [mediaQuery("md")]: createStyle("md"),
-                [mediaQuery("lg")]: createStyle("lg")
-              }
-            ],
-            children: [
+      ...restContainerProps,
+      css: [{ display: "flex", flexDirection: "column", width: "100%" }, createSxInterpolation(containerSx)],
+      children: /* @__PURE__ */ jsxs(
+        Floating,
+        {
+          clickProps: {
+            enabled: true
+          },
+          dismissProps: {
+            enabled: true
+          },
+          sizeOptions,
+          placement,
+          open: isOpen,
+          onOpenChange: prehandleOpenChange,
+          ref: floatingRef,
+          children: [
+            /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs("div", { css: createSxInterpolation(sx), children: [
               !selectedDate && !!placeholder && /* @__PURE__ */ jsx("span", { css: { color: "var(--ic-ink-4s)" }, children: placeholder }),
               !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
               getIcon()
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            css: {
-              paddingTop: "0.5rem",
-              paddingBottom: "0.5rem",
-              borderWidth: 1,
-              borderStyle: "solid",
-              borderRadius: "0.5rem",
-              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: "var(--color-surface-default)"
-            },
-            children: portalContentRenderer()
-          }
-        ) })
-      ]
+            ] }) }),
+            /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  paddingTop: "0.5rem",
+                  paddingBottom: "0.5rem",
+                  borderWidth: 1,
+                  borderStyle: "solid",
+                  borderRadius: "0.5rem",
+                  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: "var(--color-surface-default)"
+                },
+                children: portalContentRenderer()
+              }
+            ) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   TimePicker

package/dist/lib/time-picker/types.d.ts

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
-import { PropsWithCSS, ResponsiveDesign, SizeVariant } from '../../types';
-export interface TimeResponsiveProps extends PropsWithCSS {
-    size?: Exclude<SizeVariant, 'lg'>;
+import { PropsWithSx, SizeVariant, ToResponsiveProps } from '../../types';
+export interface TimeResponsiveProps {
+    size?: Exclude<SizeVariant, 'xs'>;
 }
 type TimePickerBaseProps = {
     defaultValue?: Date;
@@ -11,12 +11,12 @@ type TimePickerBaseProps = {
     placeholder?: string;
     clearable?: boolean;
     onClear?: () => void;
-    containerProps?: JSX.IntrinsicElements['div'];
+    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
     placement?: Placement;
     onOpenChange?: UseFloatingOptions['onOpenChange'];
     open?: boolean;
     disabled?: boolean;
 };
-export type TimePickerProps = TimePickerBaseProps & ResponsiveDesign<TimeResponsiveProps>;
+export type TimePickerProps = PropsWithSx<TimePickerBaseProps & ToResponsiveProps<TimeResponsiveProps>>;
 export {};
 //# sourceMappingURL=types.d.ts.map