@janbox/storefront-ui 1.0.27 → 2.0.0

package/dist/lib/table/table-head/table-head.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-head.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,SAAS,2CAA4C,cAAc,qDA8B/E,CAAC"}
+{"version":3,"file":"table-head.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAKzC,eAAO,MAAM,SAAS,+BAAgC,cAAc,qDAyBnE,CAAC"}

package/dist/lib/table/table-head/table-head.js

@@ -1,7 +1,8 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { mediaQuery } from "../../../theme/screens.js";
+import "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
-const TableHead = ({ xs, sm, md, lg, children, ...props }) => {
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const TableHead = ({ sx, children, ...props }) => {
   return /* @__PURE__ */ jsx(
     "thead",
     {
@@ -20,12 +21,7 @@ const TableHead = ({ xs, sm, md, lg, children, ...props }) => {
             borderTopColor: getColorVar("neutral.200")
           }
         },
-        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
-        }
+        createSxInterpolation(sx)
       ],
       ...props,
       children

package/dist/lib/table/table-head/types.d.ts

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

package/dist/lib/table/table-head/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-head/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC"}

package/dist/lib/table/table-row/table-row.d.ts

@@ -1,3 +1,3 @@
 import { TableRowProps } from './types';
-export declare const TableRow: ({ children, ...props }: TableRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ sx, children, ...props }: TableRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-row.d.ts.map

package/dist/lib/table/table-row/table-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,QAAQ,2BAA4B,aAAa,qDAE7D,CAAC"}
+{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,QAAQ,+BAAgC,aAAa,qDAMjE,CAAC"}

package/dist/lib/table/table-row/table-row.js

@@ -1,6 +1,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-const TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx("tr", { ...props, children });
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
+const TableRow = ({ sx, children, ...props }) => {
+  return /* @__PURE__ */ jsx("tr", { css: createSxInterpolation(sx), ...props, children });
 };
 export {
   TableRow

package/dist/lib/table/table-row/types.d.ts

@@ -1,3 +1,4 @@
 import { JSX } from 'react';
-export type TableRowProps = JSX.IntrinsicElements['tr'];
+import { PropsWithSx } from '../../../types';
+export type TableRowProps = PropsWithSx<JSX.IntrinsicElements['tr']>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/table/table-row/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/table/table-row/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKnC,eAAO,MAAM,GAAG,iCAAkC,QAAQ,qDAwBzD,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAOnC,eAAO,MAAM,GAAG,iCAAkC,QAAQ,qDAwBzD,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { mergeComponentProps } from "../../../utils/index.js";
 import { useTabIndexContext } from "./helpers.js";
+import { mergeComponentProps } from "../../../utils/index.js";
 import { useTabsContext } from "../tabs/helpers.js";
 import { Button } from "../../button/button.js";
 const Tab = ({ children, ref, ..._props }) => {

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

@@ -1,10 +1,10 @@
-import { ButtonProps, ButtonSizeVariant } from '../../button';
-import { ResponsiveDesign, ShallowMerge } from '../../../types';
+import { ButtonSizeVariant, ButtonProps } from '../../button';
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
 export type TabState = 'active';
 export interface TabResponsiveProps {
     size?: ButtonSizeVariant;
 }
-export interface TabExtendedProps extends ResponsiveDesign<TabResponsiveProps> {
+export interface TabExtendedProps extends ToResponsiveProps<TabResponsiveProps> {
     states?: Partial<Record<TabState, {
         color?: ButtonProps['color'];
         variant?: ButtonProps['variant'];

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB,CAAC,kBAAkB,CAAC;IAC5E,MAAM,CAAC,EAAE,OAAO,CACd,MAAM,CACJ,QAAQ,EACR;QACE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KAClC,CACF,CACF,CAAC;CACH;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB,CAAC,kBAAkB,CAAC;IAC7E,MAAM,CAAC,EAAE,OAAO,CACd,MAAM,CACJ,QAAQ,EACR;QACE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KAClC,CACF,CACF,CAAC;CACH;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"tab-indicator.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/tab-indicator.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,wDAyFxB,CAAC"}
+{"version":3,"file":"tab-indicator.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/tab-indicator.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,wDAqFxB,CAAC"}

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

@@ -1,8 +1,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { motion } from "motion/react";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { useTabsContext } from "../tabs/helpers.js";
 const TabIndicator = () => {
   const { activeIndex, tabIndicatorProps } = useTabsContext();
@@ -62,11 +61,7 @@ const TabIndicator = () => {
       backgroundColor: "currentcolor",
       borderRadius: 8
     },
-    createStyle(tabIndicatorProps == null ? void 0 : tabIndicatorProps.xs),
-    {
-      [mediaQuery("sm")]: createStyle(tabIndicatorProps == null ? void 0 : tabIndicatorProps.sm),
-      [mediaQuery("md")]: createStyle(tabIndicatorProps == null ? void 0 : tabIndicatorProps.md)
-    }
+    createSxInterpolation(tabIndicatorProps == null ? void 0 : tabIndicatorProps.sx)
   ];
   return /* @__PURE__ */ jsx(
     motion.div,
@@ -84,9 +79,6 @@ const TabIndicator = () => {
     }
   );
 };
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
 export {
   TabIndicator
 };

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

@@ -1,4 +1,3 @@
-import { PropsWithCSS, ResponsiveDesign } from '../../../types';
-export type TabIndicatorResponsiveProps = PropsWithCSS;
-export type TabIndicatorProps = ResponsiveDesign<TabIndicatorResponsiveProps>;
+import { PropsWithSx } from '../../../types';
+export type TabIndicatorProps = PropsWithSx;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,2BAA2B,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-indicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/tab-list.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDAkCjE,CAAC"}
+{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/tabs/tab-list/tab-list.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,OAAO,iCAAkC,YAAY,qDA6BjE,CAAC"}

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

@@ -1,13 +1,12 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { getTabListProps } from "./helpers.js";
 import { TabIndexContext } from "../tab/helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
 import { flattenChildren } from "../../../utils/index.js";
 import { scrollbarNoneStyle } from "../../../constants/emotion.js";
+import { createSxInterpolation } from "../../../utils/stylesheet.js";
 import { TabIndicator } from "../tab-indicator/tab-indicator.js";
 const TabList = ({ ref, children, ..._props }) => {
-  const { xs, sm, md, lg, ...props } = getTabListProps(_props);
+  const { sx, ...props } = getTabListProps(_props);
   const css = [
     {
       display: "flex",
@@ -21,12 +20,7 @@ const TabList = ({ ref, children, ..._props }) => {
         flexShrink: 0
       }
     },
-    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
-    }
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsxs("div", { css: [css, scrollbarNoneStyle], ...props, ref, children: [
     flattenChildren(children).map((child, index) => /* @__PURE__ */ jsx(TabIndexContext.Provider, { value: index, children: child }, index)),

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 {