@atom-learning/components 8.0.3 → 8.1.1

package/dist/components/stepper/StepperStepBullet.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'border-0',\n    'bg-grey-200',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-grey-200', 'text-grey-700'],\n      active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n      viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n      completed: ['bg-primary-800', 'text-white'],\n      reviewed: ['bg-primary-900', 'text-white'],\n      success: ['bg-success', 'text-white']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,eAAe,gBAAgB;EACzC,QAAQ;GAAC;GAAY;GAAY;GAAkB;GAAmB;EACtE,QAAQ;GAAC;GAAY;GAAY;GAAmB;GAAiB;EACrE,WAAW,CAAC,kBAAkB,aAAa;EAC3C,UAAU,CAAC,kBAAkB,aAAa;EAC1C,SAAS,CAAC,cAAc,aAAa;EACtC,EACF;CACF,CAAC"}
+{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'border-0',\n    'bg-grey-200',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-grey-200', 'text-grey-700'],\n      active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n      viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n      completed: ['bg-primary-800', 'text-white'],\n      reviewed: ['bg-primary-900', 'text-white'],\n      success: ['bg-success', 'text-white']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,eAAe,eAAe;EACxC,QAAQ;GAAC;GAAY;GAAY;GAAkB;EAAkB;EACrE,QAAQ;GAAC;GAAY;GAAY;GAAmB;EAAgB;EACpE,WAAW,CAAC,kBAAkB,YAAY;EAC1C,UAAU,CAAC,kBAAkB,YAAY;EACzC,SAAS,CAAC,cAAc,YAAY;CACtC,EACF;AACF,CAAC"}

package/dist/components/stepper/StepperStepContainer.d.ts

@@ -1,8 +1,8 @@
-export declare const StepperStepContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "separator" | "status" | "direction" | "canInteract"> & {
+export declare const StepperStepContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "canInteract" | "direction" | "separator" | "status"> & {
     canInteract?: boolean | undefined;
     direction?: "horizontal" | "vertical" | undefined;
-    separator?: "success" | "default" | "active" | "viewed" | undefined;
-    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
+    separator?: "active" | "default" | "success" | "viewed" | undefined;
+    status?: "active" | "completed" | "default" | "reviewed" | "success" | "viewed" | undefined;
 } & {
     as?: import("react").ElementType;
 }>;

package/dist/components/stepper/StepperStepContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-grey-200'],\n      active: ['not-last:after:bg-primary-800'],\n      success: ['not-last:after:bg-success'],\n      viewed: ['not-last:after:bg-grey-600']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:bg-primary-900',\n        'hover:first:text-white!',\n        'hover:last:text-primary-900'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,EAAE,EACT;EACD,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,SAAS,CAAC,6BAA6B;GACvC,QAAQ,CAAC,gCAAgC;GACzC,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,6BAA6B;GACvC;EACD,QAAQ;GACN,WAAW,EAAE;GACb,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,UAAU,EAAE;GACb;EACF;CACD,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACF;CACF,CAAC"}
+{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-grey-200'],\n      active: ['not-last:after:bg-primary-800'],\n      success: ['not-last:after:bg-success'],\n      viewed: ['not-last:after:bg-grey-600']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:bg-primary-900',\n        'hover:first:text-white!',\n        'hover:last:text-primary-900'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,EACT;EACA,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,+BAA+B;GACxC,SAAS,CAAC,2BAA2B;GACrC,QAAQ,CAAC,4BAA4B;EACvC;EACA,QAAQ;GACN,WAAW,CAAC;GACZ,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,UAAU,CAAC;EACb;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CAAC"}

package/dist/components/stepper/StepperStepForward.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Button } from '../button/Button';
-import { IStepperNavigateProps } from './types';
-export declare const StepperStepForward: ({ label, children, onClick, ...rest }: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => React.JSX.Element;
+import type { StepperNavigateProps } from './types';
+export declare const StepperStepForward: ({ label, children, onClick, ...rest }: StepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => React.JSX.Element;

package/dist/components/stepper/StepperStepForward.js

@@ -1,5 +1,5 @@
 import { Button } from "../button/Button.js";
-import { useStepper } from "./stepper-context/StepperContext.js";
+import { useStepper } from "./Stepper.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stepper/StepperStepForward.tsx

package/dist/components/stepper/StepperStepForward.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepForward.js","names":[],"sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n  label,\n  children,\n  onClick,\n  ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n  const { goToNextStep, activeStep } = useStepper()\n\n  const handleClick = () => {\n    if (onClick) {\n      return onClick(() => goToNextStep?.())\n    }\n    goToNextStep?.()\n  }\n\n  return (\n    <Button size=\"sm\" {...rest} onClick={handleClick} className=\"ml-auto\">\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,sBAAsB,EACjC,OACA,UACA,SACA,GAAG,WACuE;CAC1E,MAAM,EAAE,cAAc,eAAe,YAAY;CAEjD,MAAM,oBAAoB;AACxB,MAAI,QACF,QAAO,cAAc,gBAAgB,CAAC;AAExC,kBAAgB;;AAGlB,QACE,oBAAC,QAAD;EAAQ,MAAK;EAAK,GAAI;EAAM,SAAS;EAAa,WAAU;YACzD,YAAY,QAAQ,WAAW;EACzB,CAAA"}
+{"version":3,"file":"StepperStepForward.js","names":[],"sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './Stepper.context'\nimport type { StepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n  label,\n  children,\n  onClick,\n  ...rest\n}: StepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n  const { goToNextStep, activeStep } = useStepper()\n\n  const handleClick = () => {\n    if (onClick) {\n      return onClick(() => goToNextStep?.())\n    }\n    goToNextStep?.()\n  }\n\n  return (\n    <Button size=\"sm\" {...rest} onClick={handleClick} className=\"ml-auto\">\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,sBAAsB,EACjC,OACA,UACA,SACA,GAAG,WACsE;CACzE,MAAM,EAAE,cAAc,eAAe,WAAW;CAEhD,MAAM,oBAAoB;EACxB,IAAI,SACF,OAAO,cAAc,eAAe,CAAC;EAEvC,eAAe;CACjB;CAEA,OACE,oBAAC,QAAD;EAAQ,MAAK;EAAK,GAAI;EAAM,SAAS;EAAa,WAAU;YACzD,YAAY,QAAQ,UAAU;CACzB,CAAA;AAEZ"}

package/dist/components/stepper/StepperStepLabel.d.ts

@@ -1,15 +1,15 @@
-export declare const StepperStepLabel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
+export declare const StepperStepLabel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "family" | "noCapsize" | "size" | "weight"> & {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
 } & {
     as?: import("react").ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "status" | "direction"> & {
+    as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "direction" | "status"> & {
     direction?: "horizontal" | "vertical" | undefined;
-    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
+    status?: "active" | "completed" | "default" | "reviewed" | "success" | "viewed" | undefined;
 } & {
     as?: import("react").ElementType;
 }>;

package/dist/components/stepper/StepperStepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-grey-700'],\n      active: ['text-primary-900'],\n      viewed: ['text-grey-1000'],\n      completed: ['text-primary-800'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,gBAAgB;CACvB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,YAAY;GAC/B,YAAY,CAAC,QAAQ,cAAc;GACpC;EACD,QAAQ;GACN,SAAS,CAAC,eAAe,gBAAgB;GACzC,QAAQ,CAAC,mBAAmB;GAC5B,QAAQ,CAAC,iBAAiB;GAC1B,WAAW,CAAC,mBAAmB;GAC/B,SAAS,CAAC,eAAe;GACzB,UAAU,EAAE;GACb;EACF;CACF,CAAC"}
+{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-grey-700'],\n      active: ['text-primary-900'],\n      viewed: ['text-grey-1000'],\n      completed: ['text-primary-800'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAGA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,eAAe;CACtB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,WAAW;GAC9B,YAAY,CAAC,QAAQ,aAAa;EACpC;EACA,QAAQ;GACN,SAAS,CAAC,eAAe,eAAe;GACxC,QAAQ,CAAC,kBAAkB;GAC3B,QAAQ,CAAC,gBAAgB;GACzB,WAAW,CAAC,kBAAkB;GAC9B,SAAS,CAAC,cAAc;GACxB,UAAU,CAAC;EACb;CACF;AACF,CAAC"}

package/dist/components/stepper/StepperSteps.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { IStepperStepsProps } from './types';
-export declare const StepperSteps: ({ className }: IStepperStepsProps) => React.JSX.Element;
+import { type StepperStepsProps } from './types';
+export declare const StepperSteps: ({ className }: StepperStepsProps) => React.JSX.Element;

package/dist/components/stepper/StepperSteps.js

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
-import { useStepper } from "./stepper-context/StepperContext.js";
+import { useStepper } from "./Stepper.context.js";
 import { StepperStepBullet } from "./StepperStepBullet.js";
 import { StepperStepContainer } from "./StepperStepContainer.js";
 import { StepperStepLabel } from "./StepperStepLabel.js";

package/dist/components/stepper/StepperSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperSteps.js","names":[],"sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { IStepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled('div', {\n  base: ['flex', 'justify-between'],\n  variants: {\n    direction: {\n      vertical: ['flex-col'],\n      horizontal: ['flex-row']\n    }\n  }\n})\n\nexport const StepperSteps = ({ className }: IStepperStepsProps) => {\n  const {\n    steps,\n    goToStep,\n    activeStep,\n    viewedSteps,\n    allowSkip,\n    direction,\n    hideLabels,\n    completedSteps,\n    showCompletedIcons\n  } = useStepper()\n\n  const getBulletStatus = (index: number) => {\n    const activeBullet = steps[index]\n\n    if (activeBullet.status) return activeBullet.status\n    if (completedSteps.length === steps.length) return Status.SUCCESS\n    if (activeStep === index && completedSteps.includes(activeStep))\n      return Status.REVIEWED\n    if (activeStep === index) return Status.ACTIVE\n    if (completedSteps.includes(index)) return Status.COMPLETED\n    if (viewedSteps.includes(index)) return Status.VIEWED\n    return Status.DEFAULT\n  }\n\n  const getSeparatorStatus = (index: number) => {\n    const bulletStatus = steps[index]?.status\n\n    if (completedSteps.length === steps.length) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.SUCCESS) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) {\n      return Status.ACTIVE\n    }\n\n    if (bulletStatus === Status.VIEWED) {\n      return Status.VIEWED\n    }\n\n    return Status.DEFAULT\n  }\n\n  return (\n    <StepperStepsContainer className={className} direction={direction}>\n      {steps.map((step, index) => {\n        const bulletStatus = getBulletStatus(index)\n        const separatorStatus = getSeparatorStatus(index)\n\n        return (\n          <StepperStepContainer\n            tabIndex={0}\n            key={`step_${index}`}\n            direction={direction}\n            separator={separatorStatus}\n            status={bulletStatus}\n            style={{ '--steps': steps.length || 0 }}\n            className={\n              direction === 'horizontal'\n                ? 'w-[calc(100%/var(--steps))]'\n                : 'h-[calc(100%/var(--steps))]'\n            }\n            canInteract={allowSkip}\n          >\n            <StepperStepBullet\n              as={allowSkip ? 'button' : 'div'}\n              onClick={() =>\n                allowSkip && viewedSteps.includes(index)\n                  ? goToStep?.(index)\n                  : undefined\n              }\n              status={bulletStatus}\n              aria-current={index === activeStep ? 'step' : undefined}\n              aria-label={!step.label ? `step ${index + 1}` : ''}\n              aria-labelledby={step.label ? `step-${index}` : undefined}\n              className={\n                allowSkip && viewedSteps.includes(index)\n                  ? 'cursor-pointer'\n                  : 'cursor-auto'\n              }\n            >\n              {step.status === Status.SUCCESS ||\n              (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n                <Icon is={Ok} />\n              ) : (\n                index + 1\n              )}\n            </StepperStepBullet>\n\n            {step.label && !hideLabels && (\n              <StepperStepLabel\n                as=\"span\"\n                id={`step-${index}`}\n                direction={direction}\n                status={bulletStatus}\n              >\n                {step.label}\n              </StepperStepLabel>\n            )}\n          </StepperStepContainer>\n        )\n      })}\n    </StepperStepsContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,kBAAkB;CACjC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,WAAW;EACtB,YAAY,CAAC,WAAW;EACzB,EACF;CACF,CAAC;AAEF,IAAa,gBAAgB,EAAE,gBAAoC;CACjE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,YAAY;CAEhB,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;AAE3B,MAAI,aAAa,OAAQ,QAAO,aAAa;AAC7C,MAAI,eAAe,WAAW,MAAM,OAAQ,QAAO,OAAO;AAC1D,MAAI,eAAe,SAAS,eAAe,SAAS,WAAW,CAC7D,QAAO,OAAO;AAChB,MAAI,eAAe,MAAO,QAAO,OAAO;AACxC,MAAI,eAAe,SAAS,MAAM,CAAE,QAAO,OAAO;AAClD,MAAI,YAAY,SAAS,MAAM,CAAE,QAAO,OAAO;AAC/C,SAAO,OAAO;;CAGhB,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,QAAQ;AAEnC,MAAI,eAAe,WAAW,MAAM,OAClC,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,QAC1B,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,YAAY,CACvE,QAAO,OAAO;AAGhB,MAAI,iBAAiB,OAAO,OAC1B,QAAO,OAAO;AAGhB,SAAO,OAAO;;AAGhB,QACE,oBAAC,uBAAD;EAAkC;EAAsB;YACrD,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,eAAe,gBAAgB,MAAM;AAG3C,UACE,qBAAC,sBAAD;IACE,UAAU;IAEC;IACX,WAPoB,mBAAmB,MAAM;IAQ7C,QAAQ;IACR,OAAO,EAAE,WAAW,MAAM,UAAU,GAAG;IACvC,WACE,cAAc,eACV,gCACA;IAEN,aAAa;cAZf,CAcE,oBAAC,mBAAD;KACE,IAAI,YAAY,WAAW;KAC3B,eACE,aAAa,YAAY,SAAS,MAAM,GACpC,WAAW,MAAM,GACjB,KAAA;KAEN,QAAQ;KACR,gBAAc,UAAU,aAAa,SAAS,KAAA;KAC9C,cAAY,CAAC,KAAK,QAAQ,QAAQ,QAAQ,MAAM;KAChD,mBAAiB,KAAK,QAAQ,QAAQ,UAAU,KAAA;KAChD,WACE,aAAa,YAAY,SAAS,MAAM,GACpC,mBACA;eAGL,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,oBAAC,MAAD,EAAM,IAAI,IAAM,CAAA,GAEhB,QAAQ;KAEQ,CAAA,EAEnB,KAAK,SAAS,CAAC,cACd,oBAAC,kBAAD;KACE,IAAG;KACH,IAAI,QAAQ;KACD;KACX,QAAQ;eAEP,KAAK;KACW,CAAA,CAEA;MA/ChB,QAAQ,QA+CQ;IAEzB;EACoB,CAAA"}
+{"version":3,"file":"StepperSteps.js","names":[],"sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useStepper } from './Stepper.context'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { type StepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled('div', {\n  base: ['flex', 'justify-between'],\n  variants: {\n    direction: {\n      vertical: ['flex-col'],\n      horizontal: ['flex-row']\n    }\n  }\n})\n\nexport const StepperSteps = ({ className }: StepperStepsProps) => {\n  const {\n    steps,\n    goToStep,\n    activeStep,\n    viewedSteps,\n    allowSkip,\n    direction,\n    hideLabels,\n    completedSteps,\n    showCompletedIcons\n  } = useStepper()\n\n  const getBulletStatus = (index: number) => {\n    const activeBullet = steps[index]\n\n    if (activeBullet.status) return activeBullet.status\n    if (completedSteps.length === steps.length) return Status.SUCCESS\n    if (activeStep === index && completedSteps.includes(activeStep))\n      return Status.REVIEWED\n    if (activeStep === index) return Status.ACTIVE\n    if (completedSteps.includes(index)) return Status.COMPLETED\n    if (viewedSteps.includes(index)) return Status.VIEWED\n    return Status.DEFAULT\n  }\n\n  const getSeparatorStatus = (index: number) => {\n    const bulletStatus = steps[index]?.status\n\n    if (completedSteps.length === steps.length) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.SUCCESS) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) {\n      return Status.ACTIVE\n    }\n\n    if (bulletStatus === Status.VIEWED) {\n      return Status.VIEWED\n    }\n\n    return Status.DEFAULT\n  }\n\n  return (\n    <StepperStepsContainer className={className} direction={direction}>\n      {steps.map((step, index) => {\n        const bulletStatus = getBulletStatus(index)\n        const separatorStatus = getSeparatorStatus(index)\n\n        return (\n          <StepperStepContainer\n            tabIndex={0}\n            key={`step_${index}`}\n            direction={direction}\n            separator={separatorStatus}\n            status={bulletStatus}\n            style={{ '--steps': steps.length || 0 }}\n            className={\n              direction === 'horizontal'\n                ? 'w-[calc(100%/var(--steps))]'\n                : 'h-[calc(100%/var(--steps))]'\n            }\n            canInteract={allowSkip}\n          >\n            <StepperStepBullet\n              as={allowSkip ? 'button' : 'div'}\n              onClick={() =>\n                allowSkip && viewedSteps.includes(index)\n                  ? goToStep?.(index)\n                  : undefined\n              }\n              status={bulletStatus}\n              aria-current={index === activeStep ? 'step' : undefined}\n              aria-label={!step.label ? `step ${index + 1}` : ''}\n              aria-labelledby={step.label ? `step-${index}` : undefined}\n              className={\n                allowSkip && viewedSteps.includes(index)\n                  ? 'cursor-pointer'\n                  : 'cursor-auto'\n              }\n            >\n              {step.status === Status.SUCCESS ||\n              (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n                <Icon is={Ok} />\n              ) : (\n                index + 1\n              )}\n            </StepperStepBullet>\n\n            {step.label && !hideLabels && (\n              <StepperStepLabel\n                as=\"span\"\n                id={`step-${index}`}\n                direction={direction}\n                status={bulletStatus}\n              >\n                {step.label}\n              </StepperStepLabel>\n            )}\n          </StepperStepContainer>\n        )\n      })}\n    </StepperStepsContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,wBAAwB,OAAO,OAAO;CAC1C,MAAM,CAAC,QAAQ,iBAAiB;CAChC,UAAU,EACR,WAAW;EACT,UAAU,CAAC,UAAU;EACrB,YAAY,CAAC,UAAU;CACzB,EACF;AACF,CAAC;AAED,IAAa,gBAAgB,EAAE,gBAAmC;CAChE,MAAM,EACJ,OACA,UACA,YACA,aACA,WACA,WACA,YACA,gBACA,uBACE,WAAW;CAEf,MAAM,mBAAmB,UAAkB;EACzC,MAAM,eAAe,MAAM;EAE3B,IAAI,aAAa,QAAQ,OAAO,aAAa;EAC7C,IAAI,eAAe,WAAW,MAAM,QAAQ,OAAO,OAAO;EAC1D,IAAI,eAAe,SAAS,eAAe,SAAS,UAAU,GAC5D,OAAO,OAAO;EAChB,IAAI,eAAe,OAAO,OAAO,OAAO;EACxC,IAAI,eAAe,SAAS,KAAK,GAAG,OAAO,OAAO;EAClD,IAAI,YAAY,SAAS,KAAK,GAAG,OAAO,OAAO;EAC/C,OAAO,OAAO;CAChB;CAEA,MAAM,sBAAsB,UAAkB;EAC5C,MAAM,eAAe,MAAM,MAAM,EAAE;EAEnC,IAAI,eAAe,WAAW,MAAM,QAClC,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,SAC1B,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,aAAa,QAAQ,KAAK,IAAI,GAAG,WAAW,GACtE,OAAO,OAAO;EAGhB,IAAI,iBAAiB,OAAO,QAC1B,OAAO,OAAO;EAGhB,OAAO,OAAO;CAChB;CAEA,OACE,oBAAC,uBAAD;EAAkC;EAAsB;YACrD,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,eAAe,gBAAgB,KAAK;GAG1C,OACE,qBAAC,sBAAD;IACE,UAAU;IAEC;IACX,WAPoB,mBAAmB,KAO5B;IACX,QAAQ;IACR,OAAO,EAAE,WAAW,MAAM,UAAU,EAAE;IACtC,WACE,cAAc,eACV,gCACA;IAEN,aAAa;cAZf,CAcE,oBAAC,mBAAD;KACE,IAAI,YAAY,WAAW;KAC3B,eACE,aAAa,YAAY,SAAS,KAAK,IACnC,WAAW,KAAK,IAChB,KAAA;KAEN,QAAQ;KACR,gBAAc,UAAU,aAAa,SAAS,KAAA;KAC9C,cAAY,CAAC,KAAK,QAAQ,QAAQ,QAAQ,MAAM;KAChD,mBAAiB,KAAK,QAAQ,QAAQ,UAAU,KAAA;KAChD,WACE,aAAa,YAAY,SAAS,KAAK,IACnC,mBACA;eAGL,KAAK,WAAW,OAAO,WACvB,sBAAsB,iBAAiB,OAAO,YAC7C,oBAAC,MAAD,EAAM,IAAI,GAAK,CAAA,IAEf,QAAQ;IAEO,CAAA,GAElB,KAAK,SAAS,CAAC,cACd,oBAAC,kBAAD;KACE,IAAG;KACH,IAAI,QAAQ;KACD;KACX,QAAQ;eAEP,KAAK;IACU,CAAA,CAEA;MA/Cf,QAAQ,OA+CO;EAE1B,CAAC;CACoB,CAAA;AAE3B"}

package/dist/components/stepper/types.d.ts

@@ -34,7 +34,7 @@ export type StepperProviderProps = {
     hideLabels: boolean;
     showCompletedIcons: boolean;
 };
-export interface IStepperProps {
+export interface StepperProps {
     className?: string;
     stepCount?: number;
     allowSkip?: boolean;
@@ -45,10 +45,10 @@ export interface IStepperProps {
     hideLabels?: boolean;
     showCompletedIcons?: boolean;
 }
-export interface IStepperNavigateProps {
+export interface StepperNavigateProps {
     label?: (currentStep?: number) => string;
     onClick?: (next: () => void) => void;
 }
-export interface IStepperStepsProps {
+export interface StepperStepsProps {
     className?: string;
 }

package/dist/components/stepper/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/stepper/types.ts"],"sourcesContent":["export enum Status {\n  ACTIVE = 'active',\n  VIEWED = 'viewed',\n  SUCCESS = 'success',\n  DEFAULT = 'default',\n  COMPLETED = 'completed',\n  REVIEWED = 'reviewed'\n}\nexport interface Step {\n  label?: string\n  status: `${Status}`\n}\n\nexport type Direction = 'vertical' | 'horizontal'\n\nexport type Context = {\n  steps: Step[]\n  goToPreviousStep?: () => void\n  goToNextStep?: () => void\n  goToStep?: (index: number) => void\n  activeStep: number\n  viewedSteps: number[]\n  completedSteps: number[]\n  allowSkip?: boolean\n  direction?: Direction\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport type StepperProviderProps = {\n  stepCount: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps: Step[]\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport interface IStepperProps {\n  className?: string\n  stepCount?: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps?: Step[]\n  hideLabels?: boolean\n  showCompletedIcons?: boolean\n}\n\nexport interface IStepperNavigateProps {\n  label?: (currentStep?: number) => string\n  onClick?: (next: () => void) => void\n}\n\nexport interface IStepperStepsProps {\n  className?: string\n}\n"],"mappings":";AAAA,IAAY,SAAL,yBAAA,QAAA;AACL,QAAA,YAAA;AACA,QAAA,YAAA;AACA,QAAA,aAAA;AACA,QAAA,aAAA;AACA,QAAA,eAAA;AACA,QAAA,cAAA;;KACD"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/stepper/types.ts"],"sourcesContent":["export enum Status {\n  ACTIVE = 'active',\n  VIEWED = 'viewed',\n  SUCCESS = 'success',\n  DEFAULT = 'default',\n  COMPLETED = 'completed',\n  REVIEWED = 'reviewed'\n}\nexport interface Step {\n  label?: string\n  status: `${Status}`\n}\n\nexport type Direction = 'vertical' | 'horizontal'\n\nexport type Context = {\n  steps: Step[]\n  goToPreviousStep?: () => void\n  goToNextStep?: () => void\n  goToStep?: (index: number) => void\n  activeStep: number\n  viewedSteps: number[]\n  completedSteps: number[]\n  allowSkip?: boolean\n  direction?: Direction\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport type StepperProviderProps = {\n  stepCount: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps: Step[]\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport interface StepperProps {\n  className?: string\n  stepCount?: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps?: Step[]\n  hideLabels?: boolean\n  showCompletedIcons?: boolean\n}\n\nexport interface StepperNavigateProps {\n  label?: (currentStep?: number) => string\n  onClick?: (next: () => void) => void\n}\n\nexport interface StepperStepsProps {\n  className?: string\n}\n"],"mappings":";AAAA,IAAY,SAAL,yBAAA,QAAA;CACL,OAAA,YAAA;CACA,OAAA,YAAA;CACA,OAAA,aAAA;CACA,OAAA,aAAA;CACA,OAAA,eAAA;CACA,OAAA,cAAA;;AACF,EAAA,CAAA,CAAA"}

package/dist/components/switch/Switch.d.ts

@@ -1,13 +1,13 @@
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as React from 'react';
 declare const StyledSwitch: React.ForwardRefExoticComponent<Omit<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
-    size?: "md" | "lg" | undefined;
+    size?: "lg" | "md" | undefined;
 } & {
     as?: React.ElementType;
 }>;
 type SwitchProps = React.ComponentProps<typeof StyledSwitch>;
-export declare const Switch: {
-    ({ size, ...rest }: SwitchProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function Switch({ size, ...rest }: SwitchProps): React.JSX.Element;
+export declare namespace Switch {
+    var displayName: string;
+}
 export {};

package/dist/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  base: [\n    'appearance-none',\n    'bg-grey-600',\n    'border-none',\n    'rounded-full',\n    'cursor-pointer',\n    'flex',\n    'overflow-hidden',\n    'relative',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'hover:bg-grey-700',\n    'focus:outline-2',\n    'focus:outline-offset-1',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:hover:bg-primary-900',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      md: ['p-0.5', 'w-10'],\n      lg: ['p-1', 'w-16']\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  base: [\n    'bg-white',\n    'rounded-full',\n    'block',\n    'transition-transform',\n    'duration-50',\n    'will-change-transform'\n  ],\n  variants: {\n    size: {\n      md: ['data-[state=checked]:translate-x-5', 'size-4'],\n      lg: ['data-[state=checked]:translate-x-8', 'size-6']\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"mappings":";;;;;AAKA,IAAM,eAAe,OAAO,YAAY,MAAM;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS,OAAO;EACrB,IAAI,CAAC,OAAO,OAAO;EACpB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,YAAY,OAAO;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,sCAAsC,SAAS;EACpD,IAAI,CAAC,sCAAsC,SAAS;EACrD,EACF;CACF,CAAC;AAIF,IAAa,UAAU,EAAE,OAAO,MAAM,GAAG,WACvC,oBAAC,cAAD;CAAoB;CAAM,GAAI;WAC5B,oBAAC,aAAD,EAAmB,MAAQ,CAAA;CACd,CAAA;AAGjB,OAAO,cAAc"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  base: [\n    'appearance-none',\n    'bg-grey-600',\n    'border-none',\n    'rounded-full',\n    'cursor-pointer',\n    'flex',\n    'overflow-hidden',\n    'relative',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'hover:bg-grey-700',\n    'focus:outline-2',\n    'focus:outline-offset-1',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:hover:bg-primary-900',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      md: ['p-0.5', 'w-10'],\n      lg: ['p-1', 'w-16']\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  base: [\n    'bg-white',\n    'rounded-full',\n    'block',\n    'transition-transform',\n    'duration-50',\n    'will-change-transform'\n  ],\n  variants: {\n    size: {\n      md: ['data-[state=checked]:translate-x-5', 'size-4'],\n      lg: ['data-[state=checked]:translate-x-8', 'size-6']\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"mappings":";;;;;AAKA,IAAM,eAAe,OAAO,YAAY,MAAM;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS,MAAM;EACpB,IAAI,CAAC,OAAO,MAAM;CACpB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,YAAY,OAAO;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,sCAAsC,QAAQ;EACnD,IAAI,CAAC,sCAAsC,QAAQ;CACrD,EACF;AACF,CAAC;AAID,IAAa,UAAU,EAAE,OAAO,MAAM,GAAG,WACvC,oBAAC,cAAD;CAAoB;CAAM,GAAI;WAC5B,oBAAC,aAAD,EAAmB,KAAO,CAAA;AACd,CAAA;AAGhB,OAAO,cAAc"}

package/dist/components/table/Table.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare const StyledTable: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "size" | "corners"> & {
-    size?: "md" | "lg" | "xl" | undefined;
+declare const StyledTable: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "corners" | "size"> & {
+    size?: "lg" | "md" | "xl" | undefined;
     corners?: "round" | "square" | undefined;
 } & {
     as?: React.ElementType;
@@ -30,8 +30,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
         as?: React.ElementType;
     }>;
     Header: {
-        ({ theme, isSticky, ...rest }: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "theme" | "isSticky"> & {
-            theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
+        ({ theme, isSticky, ...rest }: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "isSticky" | "theme"> & {
+            theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
             isSticky?: boolean | undefined;
         } & {
             as?: React.ElementType;

package/dist/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  base: [\n    'border-separate',\n    'border-spacing-0',\n    'font-sans',\n    'text-sm',\n    'w-full',\n    'relative',\n    'z-0'\n  ],\n  variants: {\n    size: {\n      md: ['[&_td,&_th]:h-10', '[&_td,&_th]:px-3', '[&_td,&_th]:py-1'],\n      lg: [\n        '[&_td,&_th]:h-12',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ],\n      xl: [\n        '[&_th]:h-12',\n        '[&_td]:h-16',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ]\n    },\n    corners: {\n      round: ['rounded-md'],\n      square: []\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCls?: string | string[]\n  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      size = 'md',\n      corners = 'round',\n      numberOfStickyColumns = 0,\n      scrollContainerCls,\n      scrollContainerkey,\n      ...rest\n    },\n    ref\n  ) => {\n    const tableComponent = (\n      <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n    )\n\n    if (numberOfStickyColumns) {\n      return (\n        <TableStickyColumnsContainer\n          key={scrollContainerkey}\n          className={cn(scrollContainerCls)}\n          numberOfStickyColumns={numberOfStickyColumns}\n        >\n          {tableComponent}\n        </TableStickyColumnsContainer>\n      )\n    }\n\n    return tableComponent\n  }\n)\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAoB;IAAoB;IAAmB;GAChE,IAAI;IACF;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,SAAS;GACP,OAAO,CAAC,aAAa;GACrB,QAAQ,EAAE;GACX;EACF;CACF,CAAC;AASF,IAAM,iBAAiB,QAAM,YAEzB,EACE,OAAO,MACP,UAAU,SACV,wBAAwB,GACxB,oBACA,oBACA,GAAG,QAEL,QACG;CACH,MAAM,iBACJ,oBAAC,aAAD;EAAkB;EAAW;EAAe;EAAS,GAAI;EAAQ,CAAA;AAGnE,KAAI,sBACF,QACE,oBAAC,6BAAD;EAEE,WAAW,GAAG,mBAAmB;EACV;YAEtB;EAC2B,EALvB,mBAKuB;AAIlC,QAAO;EAEV;AAED,IAAa,QAAQ,OAAO,OAAO,gBAAgB;CACjD,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,KAAK;CACL,wBAAwB;CACzB,CAAC;AAEF,eAAe,cAAc"}
+{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  base: [\n    'border-separate',\n    'border-spacing-0',\n    'font-sans',\n    'text-sm',\n    'w-full',\n    'relative',\n    'z-0'\n  ],\n  variants: {\n    size: {\n      md: ['[&_td,&_th]:h-10', '[&_td,&_th]:px-3', '[&_td,&_th]:py-1'],\n      lg: [\n        '[&_td,&_th]:h-12',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ],\n      xl: [\n        '[&_th]:h-12',\n        '[&_td]:h-16',\n        '[&_td,&_th]:py-0',\n        '[&_td,&_th]:pr-0',\n        '[&_td,&_th]:pl-3',\n        '[&_td,&_th]:last:pr-3'\n      ]\n    },\n    corners: {\n      round: ['rounded-md'],\n      square: []\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCls?: string | string[]\n  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      size = 'md',\n      corners = 'round',\n      numberOfStickyColumns = 0,\n      scrollContainerCls,\n      scrollContainerkey,\n      ...rest\n    },\n    ref\n  ) => {\n    const tableComponent = (\n      <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n    )\n\n    if (numberOfStickyColumns) {\n      return (\n        <TableStickyColumnsContainer\n          key={scrollContainerkey}\n          className={cn(scrollContainerCls)}\n          numberOfStickyColumns={numberOfStickyColumns}\n        >\n          {tableComponent}\n        </TableStickyColumnsContainer>\n      )\n    }\n\n    return tableComponent\n  }\n)\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAoB;IAAoB;GAAkB;GAC/D,IAAI;IACF;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,SAAS;GACP,OAAO,CAAC,YAAY;GACpB,QAAQ,CAAC;EACX;CACF;AACF,CAAC;AASD,IAAM,iBAAiB,QAAM,YAEzB,EACE,OAAO,MACP,UAAU,SACV,wBAAwB,GACxB,oBACA,oBACA,GAAG,QAEL,QACG;CACH,MAAM,iBACJ,oBAAC,aAAD;EAAkB;EAAW;EAAe;EAAS,GAAI;CAAO,CAAA;CAGlE,IAAI,uBACF,OACE,oBAAC,6BAAD;EAEE,WAAW,GAAG,kBAAkB;EACT;YAEtB;CAC0B,GALtB,kBAKsB;CAIjC,OAAO;AACT,CACF;AAEA,IAAa,QAAQ,OAAO,OAAO,gBAAgB;CACjD,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,KAAK;CACL,wBAAwB;AAC1B,CAAC;AAED,eAAe,cAAc"}

package/dist/components/table/TableBody.d.ts

@@ -5,8 +5,8 @@ declare const StyledTableBody: React.ForwardRefExoticComponent<Omit<React.Detail
     as?: React.ElementType;
 }>;
 type TableBodyProps = React.ComponentProps<typeof StyledTableBody>;
-export declare const TableBody: {
-    ({ striped, ...rest }: TableBodyProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function TableBody({ striped, ...rest }: TableBodyProps): React.JSX.Element;
+export declare namespace TableBody {
+    var displayName: string;
+}
 export {};

package/dist/components/table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTableBody = styled('tbody', {\n  base: [],\n  variants: {\n    striped: {\n      true: ['[&_tr]:even:bg-grey-100', '[&_tr]:odd:bg-white'],\n      false: ['[&_tr]:bg-white']\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"mappings":";;;;AAIA,IAAM,kBAAkB,OAAO,SAAS;CACtC,MAAM,EAAE;CACR,UAAU,EACR,SAAS;EACP,MAAM,CAAC,2BAA2B,sBAAsB;EACxD,OAAO,CAAC,kBAAkB;EAC3B,EACF;CACF,CAAC;AAIF,IAAa,aAAa,EAAE,UAAU,MAAM,GAAG,WAC7C,oBAAC,iBAAD;CAA0B;CAAS,GAAI;CAAQ,CAAA;AAGjD,UAAU,cAAc"}
+{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledTableBody = styled('tbody', {\n  base: [],\n  variants: {\n    striped: {\n      true: ['[&_tr]:even:bg-grey-100', '[&_tr]:odd:bg-white'],\n      false: ['[&_tr]:bg-white']\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"mappings":";;;;AAIA,IAAM,kBAAkB,OAAO,SAAS;CACtC,MAAM,CAAC;CACP,UAAU,EACR,SAAS;EACP,MAAM,CAAC,2BAA2B,qBAAqB;EACvD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAID,IAAa,aAAa,EAAE,UAAU,MAAM,GAAG,WAC7C,oBAAC,iBAAD;CAA0B;CAAS,GAAI;AAAO,CAAA;AAGhD,UAAU,cAAc"}

package/dist/components/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","names":[],"sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableCell = styled('td', {\n  base: [\n    'border-t',\n    'border-t-grey-100',\n    'box-border',\n    'text-grey-800',\n    'font-body',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    'first:font-semibold'\n  ]\n})\n\nTableCell.displayName = 'TableCell'\n"],"mappings":";;AAEA,IAAa,YAAY,OAAO,MAAM,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,UAAU,cAAc"}
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableCell = styled('td', {\n  base: [\n    'border-t',\n    'border-t-grey-100',\n    'box-border',\n    'text-grey-800',\n    'font-body',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    'first:font-semibold'\n  ]\n})\n\nTableCell.displayName = 'TableCell'\n"],"mappings":";;AAEA,IAAa,YAAY,OAAO,MAAM,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,UAAU,cAAc"}

package/dist/components/table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","names":[],"sources":["../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooter = styled('tfoot', {\n  base: []\n})\n\nTableFooter.displayName = 'TableFooter'\n"],"mappings":";;AAEA,IAAa,cAAc,OAAO,SAAS,EACzC,MAAM,EAAE,EACT,CAAC;AAEF,YAAY,cAAc"}
+{"version":3,"file":"TableFooter.js","names":[],"sources":["../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableFooter = styled('tfoot', {\n  base: []\n})\n\nTableFooter.displayName = 'TableFooter'\n"],"mappings":";;AAEA,IAAa,cAAc,OAAO,SAAS,EACzC,MAAM,CAAC,EACT,CAAC;AAED,YAAY,cAAc"}

package/dist/components/table/TableFooterCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooterCell.js","names":[],"sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooterCell = styled('td', {\n  base: [\n    'text-grey-800',\n    'font-body',\n    'font-semibold',\n    'text-left',\n    'align-middle'\n  ]\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,gBAAgB,cAAc"}
+{"version":3,"file":"TableFooterCell.js","names":[],"sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableFooterCell = styled('td', {\n  base: [\n    'text-grey-800',\n    'font-body',\n    'font-semibold',\n    'text-left',\n    'align-middle'\n  ]\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/table/TableHeader.d.ts

@@ -1,20 +1,20 @@
-import React from 'react';
+import * as React from 'react';
 export declare const TABLE_HEADER_THEMES: {
-    readonly PRIMARY: "primary";
-    readonly PRIMARY_DARK: "primaryDark";
-    readonly PRIMARY_LIGHT: "primaryLight";
-    readonly LIGHT: "light";
-    readonly WHITE: "white";
+    readonly PRIMARY: 'primary';
+    readonly PRIMARY_DARK: 'primaryDark';
+    readonly PRIMARY_LIGHT: 'primaryLight';
+    readonly LIGHT: 'light';
+    readonly WHITE: 'white';
 };
-declare const StyledTableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "theme" | "isSticky"> & {
-    theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
+declare const StyledTableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "isSticky" | "theme"> & {
+    theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
     isSticky?: boolean | undefined;
 } & {
     as?: React.ElementType;
 }>;
 type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>;
-export declare const TableHeader: {
-    ({ theme, isSticky, ...rest }: TableHeaderProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function TableHeader({ theme, isSticky, ...rest }: TableHeaderProps): React.JSX.Element;
+export declare namespace TableHeader {
+    var displayName: string;
+}
 export {};

package/dist/components/table/TableHeader.js

@@ -35,6 +35,6 @@ var TableHeader = ({ theme = "primaryDark", isSticky = false, ...rest }) => {
 };
 TableHeader.displayName = "TableHeader";
 //#endregion
-export { TableHeader };
+export { TABLE_HEADER_THEMES, TableHeader };
 
 //# sourceMappingURL=TableHeader.js.map

package/dist/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  base: [],\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: ['[&_th]:bg-primary-800'],\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: ['[&_th]:bg-primary-1000'],\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: [\n        '[&_th]:bg-primary-200',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.LIGHT]: [\n        '[&_th]:bg-grey-100',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.WHITE]: ['[&_th]:bg-white', '[&_th]:text-grey-1000']\n    },\n    isSticky: {\n      true: ['sticky', 'top-0', 'z-3']\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"mappings":";;;;AAIA,IAAa,sBAAsB;CACjC,SAAS;CACT,cAAc;CACd,eAAe;CACf,OAAO;CACP,OAAO;CACR;AAED,IAAM,oBAAoB,OAAO,SAAS;CACxC,MAAM,EAAE;CACR,UAAU;EACR,OAAO;IACJ,oBAAoB,UAAU,CAAC,wBAAwB;IACvD,oBAAoB,eAAe,CAAC,yBAAyB;IAC7D,oBAAoB,gBAAgB,CACnC,yBACA,wBACD;IACA,oBAAoB,QAAQ,CAC3B,sBACA,wBACD;IACA,oBAAoB,QAAQ,CAAC,mBAAmB,wBAAwB;GAC1E;EACD,UAAU,EACR,MAAM;GAAC;GAAU;GAAS;GAAM,EACjC;EACF;CACF,CAAC;AAIF,IAAa,eAAe,EAC1B,QAAQ,eACR,WAAW,OACX,GAAG,WACmB;AACtB,QAAO,oBAAC,mBAAD;EAA0B;EAAiB;EAAU,GAAI;EAAQ,CAAA;;AAG1E,YAAY,cAAc"}
+{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  base: [],\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: ['[&_th]:bg-primary-800'],\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: ['[&_th]:bg-primary-1000'],\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: [\n        '[&_th]:bg-primary-200',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.LIGHT]: [\n        '[&_th]:bg-grey-100',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.WHITE]: ['[&_th]:bg-white', '[&_th]:text-grey-1000']\n    },\n    isSticky: {\n      true: ['sticky', 'top-0', 'z-3']\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"mappings":";;;;AAIA,IAAa,sBAAsB;CACjC,SAAS;CACT,cAAc;CACd,eAAe;CACf,OAAO;CACP,OAAO;AACT;AAEA,IAAM,oBAAoB,OAAO,SAAS;CACxC,MAAM,CAAC;CACP,UAAU;EACR,OAAO;IACJ,oBAAoB,UAAU,CAAC,uBAAuB;IACtD,oBAAoB,eAAe,CAAC,wBAAwB;IAC5D,oBAAoB,gBAAgB,CACnC,yBACA,uBACF;IACC,oBAAoB,QAAQ,CAC3B,sBACA,uBACF;IACC,oBAAoB,QAAQ,CAAC,mBAAmB,uBAAuB;EAC1E;EACA,UAAU,EACR,MAAM;GAAC;GAAU;GAAS;EAAK,EACjC;CACF;AACF,CAAC;AAID,IAAa,eAAe,EAC1B,QAAQ,eACR,WAAW,OACX,GAAG,WACmB;CACtB,OAAO,oBAAC,mBAAD;EAA0B;EAAiB;EAAU,GAAI;CAAO,CAAA;AACzE;AAEA,YAAY,cAAc"}

package/dist/components/table/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableHeaderCell = styled('th', {\n  base: [\n    'text-white',\n    'font-body',\n    'font-semibold',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    '[[colspan]]:text-center'\n  ]\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,gBAAgB,cAAc"}
+{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableHeaderCell = styled('th', {\n  base: [\n    'text-white',\n    'font-body',\n    'font-semibold',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    '[[colspan]]:text-center'\n  ]\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRow = styled('tr', {\n  base: ['bg-[unset]']\n})\n\nexport const TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.ComponentProps<typeof StyledRow>\n>((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"mappings":";;;;AAIA,IAAM,YAAY,OAAO,MAAM,EAC7B,MAAM,CAAC,aAAa,EACrB,CAAC;AAEF,IAAa,WAAW,QAAM,YAG3B,OAAO,QAAQ,oBAAC,WAAD;CAAW,GAAI;CAAY;CAAO,CAAA,CAAC;AAErD,SAAS,cAAc"}
+{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledRow = styled('tr', {\n  base: ['bg-[unset]']\n})\n\nexport const TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.ComponentProps<typeof StyledRow>\n>((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"mappings":";;;;AAIA,IAAM,YAAY,OAAO,MAAM,EAC7B,MAAM,CAAC,YAAY,EACrB,CAAC;AAED,IAAa,WAAW,QAAM,YAG3B,OAAO,QAAQ,oBAAC,WAAD;CAAW,GAAI;CAAY;AAAM,CAAA,CAAC;AAEpD,SAAS,cAAc"}

package/dist/components/table/TableStickyColumnsContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, className, ...restProps }: React.PropsWithChildren<{
     numberOfStickyColumns?: number;
     className?: string;

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,11 +1,11 @@
 import { cn } from "../../styled.js";
 import { useStickyColumnsStyle } from "./useStickyColumnsCss.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table/TableStickyColumnsContainer.tsx
 var TableStickyColumnsContainer = ({ children, numberOfStickyColumns = 0, className, ...restProps }) => {
-	const [hasScroll, setHasScroll] = React.useState(false);
-	const wrapperRef = React.useRef(null);
+	const [hasScroll, setHasScroll] = React$1.useState(false);
+	const wrapperRef = React$1.useRef(null);
 	const { columnsStyle } = useStickyColumnsStyle({
 		numberOfStickyColumns,
 		wrapperRef

package/dist/components/table/TableStickyColumnsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStickyColumnsContainer.js","names":[],"sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  className,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  className?: string\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null)\n  const { columnsStyle } = useStickyColumnsStyle({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <div\n      onScroll={handleScroll}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      style={columnsStyle}\n      className={cn(\n        'overflow-auto',\n        'max-w-full',\n        'relative',\n        'overscroll-x-contain',\n        '[&_td,&_th]:bg-inherit',\n        className,\n        numberOfStickyColumns >= 1 && [\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2'\n        ],\n        numberOfStickyColumns >= 2 && [\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2'\n        ],\n        numberOfStickyColumns >= 3 && [\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2'\n        ],\n        numberOfStickyColumns >= 4 && [\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2'\n        ],\n        numberOfStickyColumns === 1 &&\n          hasScroll && [\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 2 &&\n          hasScroll && [\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 3 &&\n          hasScroll && [\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 4 &&\n          hasScroll && [\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ]\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,+BAA+B,EAC1C,UACA,wBAAwB,GACxB,WACA,GAAG,gBAIE;CACL,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAkB,MAAM;CAChE,MAAM,aAAa,MAAM,OAA8B,KAAK;CAC5D,MAAM,EAAE,iBAAiB,sBAAsB;EAC7C;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,UAAyC;EAC7D,MAAM,eAAe,MAAM,cAAc,aAAa;AACtD,MAAI,iBAAiB,UACnB,cAAa,aAAa;;AAI9B,QACE,oBAAC,OAAD;EACE,UAAU;EAEV,MAAK;EACL,KAAK;EACL,OAAO;EACP,WAAW,GACT,iBACA,cACA,YACA,wBACA,0BACA,WACA,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;GACD,EACD,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,EACH,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,EACH,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,EACH,0BAA0B,KACxB,aAAa,CACX,+FACA,mFACD,CACJ;EACD,GAAI;EAEH;EACG,CAAA"}
+{"version":3,"file":"TableStickyColumnsContainer.js","names":[],"sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  className,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  className?: string\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null)\n  const { columnsStyle } = useStickyColumnsStyle({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <div\n      onScroll={handleScroll}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      style={columnsStyle}\n      className={cn(\n        'overflow-auto',\n        'max-w-full',\n        'relative',\n        'overscroll-x-contain',\n        '[&_td,&_th]:bg-inherit',\n        className,\n        numberOfStickyColumns >= 1 && [\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:sticky',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:left-(--sticky-offset-left-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:min-w-(--sticky-column-width-1)',\n          '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:z-2'\n        ],\n        numberOfStickyColumns >= 2 && [\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:sticky',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:left-(--sticky-offset-left-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:min-w-(--sticky-column-width-2)',\n          '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:z-2'\n        ],\n        numberOfStickyColumns >= 3 && [\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:sticky',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:left-(--sticky-offset-left-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:min-w-(--sticky-column-width-3)',\n          '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:z-2'\n        ],\n        numberOfStickyColumns >= 4 && [\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:sticky',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:left-(--sticky-offset-left-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:min-w-(--sticky-column-width-4)',\n          '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:z-2'\n        ],\n        numberOfStickyColumns === 1 &&\n          hasScroll && [\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(1),&_th:nth-of-type(1)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 2 &&\n          hasScroll && [\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(2),&_th:nth-of-type(2)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 3 &&\n          hasScroll && [\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(3),&_th:nth-of-type(3)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ],\n        numberOfStickyColumns === 4 &&\n          hasScroll && [\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td:nth-of-type(4),&_th:nth-of-type(4)]:[clip-path:inset(-1px_-10px_-1px_0px)]'\n          ]\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,IAAa,+BAA+B,EAC1C,UACA,wBAAwB,GACxB,WACA,GAAG,gBAIE;CACL,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,aAAa,QAAM,OAA8B,IAAI;CAC3D,MAAM,EAAE,iBAAiB,sBAAsB;EAC7C;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,UAAyC;EAC7D,MAAM,eAAe,MAAM,cAAc,aAAa;EACtD,IAAI,iBAAiB,WACnB,aAAa,YAAY;CAE7B;CAEA,OACE,oBAAC,OAAD;EACE,UAAU;EAEV,MAAK;EACL,KAAK;EACL,OAAO;EACP,WAAW,GACT,iBACA,cACA,YACA,wBACA,0BACA,WACA,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;EACF,GACA,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;EACF,GACA,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;EACF,GACA,yBAAyB,KAAK;GAC5B;GACA;GACA;GACA;EACF,GACA,0BAA0B,KACxB,aAAa,CACX,+FACA,kFACF,GACF,0BAA0B,KACxB,aAAa,CACX,+FACA,kFACF,GACF,0BAA0B,KACxB,aAAa,CACX,+FACA,kFACF,GACF,0BAA0B,KACxB,aAAa,CACX,+FACA,kFACF,CACJ;EACA,GAAI;EAEH;CACE,CAAA;AAET"}

package/dist/components/table/useStickyColumnsCss.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 type ColumnStyle = Record<`--sticky-column-width-${number}` | `--sticky-offset-left-${number}`, string>;
-interface IUseStickyColumnsCss {
+interface UseStickyColumnsCss {
     columnsStyle?: ColumnStyle;
 }
 export declare const useStickyColumnsStyle: ({ numberOfStickyColumns, wrapperRef }: {
     numberOfStickyColumns: number;
     wrapperRef: React.RefObject<HTMLDivElement | null>;
-}) => IUseStickyColumnsCss;
+}) => UseStickyColumnsCss;
 export {};

package/dist/components/table/useStickyColumnsCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n  `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n  string\n>\n\ninterface IUseStickyColumnsCss {\n  columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLDivElement | null>\n}): IUseStickyColumnsCss => {\n  const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n  const generateColumnsStyle = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const styleObject = {\n        ...acc,\n        [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n        [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return styleObject\n    }, {})\n\n    return newColumnsStyle\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsStyle = generateColumnsStyle()\n\n    setColumnsStyle(newColumnsStyle)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n  return {\n    columnsStyle\n  }\n}\n"],"mappings":";;AAWA,IAAa,yBAAyB,EACpC,uBACA,iBAI0B;CAC1B,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAsB,EAAE,CAAC;CAEvE,MAAM,uBAAuB,QAAM,kBAAkB;EACnD,IAAI,WAAW;EAGf,MAAM,mBAAmB,WAAW,SAAS,iBAAiB,KAAK;AAmBnE,SAlB4B,MAAM,KAAK,oBAAoB,EAAE,CAAC,CAGpB,MAAM,GAAG,sBAAsB,CAEnC,QAAQ,KAAK,QAAQ,UAAU;GACnE,MAAM,gBAAgB,QAAQ;GAC9B,MAAM,cAAc;IAClB,GAAG;KACF,yBAAyB,kBAAkB,GAAG,OAAO,YAAY;KACjE,wBAAwB,kBAAkB,GAAG,SAAS;IACxD;AAED,eAAY,kBAAkB,KAAK,MAAM,CAAC,eAAe;AAEzD,UAAO;KACN,EAAE,CAAC;IAGL,CAAC,uBAAuB,WAAW,CAAC;AAEvC,SAAM,sBAAsB;AAC1B,MAAI,CAAC,sBAAuB;AAG5B,kBAFwB,sBAAsB,CAEd;IAC/B;EAAC;EAAuB;EAAY;EAAqB,CAAC;AAE7D,QAAO,EACL,cACD"}
+{"version":3,"file":"useStickyColumnsCss.js","names":[],"sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n  `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n  string\n>\n\ninterface UseStickyColumnsCss {\n  columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLDivElement | null>\n}): UseStickyColumnsCss => {\n  const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n  const generateColumnsStyle = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n      const elementNumber = index + 1\n      const styleObject = {\n        ...acc,\n        [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n        [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return styleObject\n    }, {})\n\n    return newColumnsStyle\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsStyle = generateColumnsStyle()\n\n    setColumnsStyle(newColumnsStyle)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n  return {\n    columnsStyle\n  }\n}\n"],"mappings":";;AAWA,IAAa,yBAAyB,EACpC,uBACA,iBAIyB;CACzB,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAsB,CAAC,CAAC;CAEtE,MAAM,uBAAuB,QAAM,kBAAkB;EACnD,IAAI,WAAW;EAGf,MAAM,mBAAmB,WAAW,SAAS,iBAAiB,IAAI;EAmBlE,OAlB4B,MAAM,KAAK,oBAAoB,CAAC,CAGtC,CAAA,CAAoB,MAAM,GAAG,qBAE3B,CAAA,CAAc,QAAQ,KAAK,QAAQ,UAAU;GACnE,MAAM,gBAAgB,QAAQ;GAC9B,MAAM,cAAc;IAClB,GAAG;KACF,yBAAyB,kBAAkB,GAAG,OAAO,YAAY;KACjE,wBAAwB,kBAAkB,GAAG,SAAS;GACzD;GAEA,YAAY,kBAAkB,KAAK,KAAK,CAAC,CAAC,eAAe;GAEzD,OAAO;EACT,GAAG,CAAC,CAEG;CACT,GAAG,CAAC,uBAAuB,UAAU,CAAC;CAEtC,QAAM,sBAAsB;EAC1B,IAAI,CAAC,uBAAuB;EAG5B,gBAFwB,qBAER,CAAe;CACjC,GAAG;EAAC;EAAuB;EAAY;CAAoB,CAAC;CAE5D,OAAO,EACL,aACF;AACF"}

package/dist/components/tabs/Tabs.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { TabsContent } from "./TabsContent.js";
 import { TabsTrigger } from "./TabsTrigger.js";
 import { TabsTriggerList } from "./TabsTriggerList.js";
+import "react";
 import { Root } from "@radix-ui/react-tabs";
 //#region src/components/tabs/Tabs.tsx
 var StyledRoot = styled(Root, { base: ["w-full"] });

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\nexport const Tabs = Object.assign(StyledRoot, {\n  TriggerList: TabsTriggerList,\n  Trigger: TabsTrigger,\n  Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"mappings":";;;;;;AASA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,SAAS,EACjB,CAAC;AAEF,IAAa,OAAO,OAAO,OAAO,YAAY;CAC5C,aAAa;CACb,SAAS;CACT,SAAS;CACV,CAAC;AAEF,WAAW,cAAc"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\nexport const Tabs = Object.assign(StyledRoot, {\n  TriggerList: TabsTriggerList,\n  Trigger: TabsTrigger,\n  Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"mappings":";;;;;;;AAQA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,QAAQ,EACjB,CAAC;AAED,IAAa,OAAO,OAAO,OAAO,YAAY;CAC5C,aAAa;CACb,SAAS;CACT,SAAS;AACX,CAAC;AAED,WAAW,cAAc"}

package/dist/components/tabs/TabsContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsContent.js","names":[],"sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\n\nimport { styled } from '~/styled'\n\nconst StyledTabsContent = styled(Content, {\n  base: ['grow', 'font-body']\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"mappings":";;AAQA,IAAa,cAJa,OAAO,SAAS,EACxC,MAAM,CAAC,QAAQ,YAAY,EAC5B,CAAC;AAIF,YAAY,cAAc"}
+{"version":3,"file":"TabsContent.js","names":[],"sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\n\nimport { styled } from '../../styled'\n\nconst StyledTabsContent = styled(Content, {\n  base: ['grow', 'font-body']\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"mappings":";;AAQA,IAAa,cAJa,OAAO,SAAS,EACxC,MAAM,CAAC,QAAQ,WAAW,EAC5B,CAE2B;AAE3B,YAAY,cAAc"}

package/dist/components/tabs/TabsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","names":[],"sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"mappings":";;;;;;AAOA,IAAM,mCAAmC,OAAO,OAAO,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,SAAS,EACxC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAG9B,EAAE,UAAU,GAAG,QAAQ,QACxB,qBAAC,mBAAD;CAAmB,GAAI;CAAW;WAAlC,CACE,oBAAC,MAAD;EAAM,MAAK;EAAK,IAAG;EAChB;EACI,CAAA,EACP,oBAAC,kCAAD,EAAoC,CAAA,CAClB;GACpB;AAEF,YAAY,cAAc"}
+{"version":3,"file":"TabsTrigger.js","names":[],"sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"mappings":";;;;;;AAMA,IAAM,mCAAmC,OAAO,OAAO,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,oBAAoB,OAAO,SAAS,EACxC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,cAAc,QAAM,YAG9B,EAAE,UAAU,GAAG,QAAQ,QACxB,qBAAC,mBAAD;CAAmB,GAAI;CAAW;WAAlC,CACE,oBAAC,MAAD;EAAM,MAAK;EAAK,IAAG;EAChB;CACG,CAAA,GACN,oBAAC,kCAAD,CAAmC,CAAA,CAClB;EACpB;AAED,YAAY,cAAc"}

package/dist/components/tabs/TabsTriggerList.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
+import * as React from 'react';
+import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 declare const StyledTriggerList: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
 }>;
-export declare const TabsTriggerList: {
-    ({ children, colorScheme, ...rest }: React.ComponentProps<typeof StyledTriggerList> & {
-        colorScheme?: TcolorScheme;
-    }): React.JSX.Element;
-    displayName: string;
-};
+export declare function TabsTriggerList({ children, colorScheme, ...rest }: React.ComponentProps<typeof StyledTriggerList> & {
+    colorScheme?: TcolorScheme;
+}): React.JSX.Element;
+export declare namespace TabsTriggerList {
+    var displayName: string;
+}
 export {};