@atom-learning/components 8.0.2 → 9.0.0-beta.0

package/dist/components/stepper/Stepper.js

@@ -1,5 +1,5 @@
 import { cn } from "../../styled.js";
-import { StepperProvider } from "./stepper-context/StepperContext.js";
+import { StepperProvider } from "./Stepper.context.js";
 import { StepperStepBack } from "./StepperStepBack.js";
 import { StepperStepForward } from "./StepperStepForward.js";
 import { StepperSteps } from "./StepperSteps.js";
@@ -26,7 +26,7 @@ var StepperComponent = ({ children, stepCount, allowSkip, onComplete, onStepChan
 		})
 	});
 };
-var Stepper = Object.assign(StepperComponent, {
+var Stepper = /* @__PURE__ */ Object.assign(StepperComponent, {
 	StepBack: StepperStepBack,
 	StepForward: StepperStepForward,
 	Steps: StepperSteps

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } from './types'\n\nconst StepperComponent = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction = 'horizontal',\n  steps,\n  hideLabels = false,\n  showCompletedIcons = false,\n  className\n}: React.PropsWithChildren<IStepperProps>) => {\n  invariant(\n    !(stepCount && steps),\n    '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n  )\n\n  const count = steps?.length || stepCount || 0\n\n  return (\n    <StepperProvider\n      stepCount={count}\n      allowSkip={allowSkip}\n      onComplete={onComplete}\n      onStepChange={stepCount ? onStepChange : undefined}\n      direction={direction}\n      steps={steps || Array(count).fill('')}\n      hideLabels={hideLabels}\n      showCompletedIcons={showCompletedIcons}\n    >\n      <div aria-label=\"progress\" className={cn('w-full', className)}>\n        {children}\n      </div>\n    </StepperProvider>\n  )\n}\n\nexport const Stepper = Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;;AAWA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC4C;AAC5C,WACE,EAAE,aAAa,QACf,8IACD;CAED,MAAM,QAAQ,OAAO,UAAU,aAAa;AAE5C,QACE,oBAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,MAAM,CAAC,KAAK,GAAG;EACzB;EACQ;YAEpB,oBAAC,OAAD;GAAK,cAAW;GAAW,WAAW,GAAG,UAAU,UAAU;GAC1D;GACG,CAAA;EACU,CAAA;;AAItB,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;CACR,CAAC;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { StepperProvider } from './Stepper.context'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport type { StepperProps } from './types'\n\nconst StepperComponent = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction = 'horizontal',\n  steps,\n  hideLabels = false,\n  showCompletedIcons = false,\n  className\n}: React.PropsWithChildren<StepperProps>) => {\n  invariant(\n    !(stepCount && steps),\n    '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n  )\n\n  const count = steps?.length || stepCount || 0\n\n  return (\n    <StepperProvider\n      stepCount={count}\n      allowSkip={allowSkip}\n      onComplete={onComplete}\n      onStepChange={stepCount ? onStepChange : undefined}\n      direction={direction}\n      steps={steps || Array(count).fill('')}\n      hideLabels={hideLabels}\n      showCompletedIcons={showCompletedIcons}\n    >\n      <div aria-label=\"progress\" className={cn('w-full', className)}>\n        {children}\n      </div>\n    </StepperProvider>\n  )\n}\n\nexport const Stepper = /* @__PURE__ */ Object.assign(StepperComponent, {\n  StepBack: StepperStepBack,\n  StepForward: StepperStepForward,\n  Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;;AAUA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC2C;CAC3C,UACE,EAAE,aAAa,QACf,6IACF;CAEA,MAAM,QAAQ,OAAO,UAAU,aAAa;CAE5C,OACE,oBAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,EAAE;EACxB;EACQ;YAEpB,oBAAC,OAAD;GAAK,cAAW;GAAW,WAAW,GAAG,UAAU,SAAS;GACzD;EACE,CAAA;CACU,CAAA;AAErB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,UAAU;CACV,aAAa;CACb,OAAO;AACT,CAAC;AAED,iBAAiB,cAAc"}

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

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

package/dist/components/stepper/StepperStepBack.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/StepperStepBack.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.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 StepperStepBack = ({\n  label,\n  children,\n  ...rest\n}: IStepperNavigateProps & React.ComponentProps<typeof Button>) => {\n  const { activeStep, goToPreviousStep } = useStepper()\n  return (\n    <Button\n      size=\"sm\"\n      appearance=\"outline\"\n      {...rest}\n      disabled={activeStep === 0}\n      onClick={goToPreviousStep}\n    >\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC8D;CACjE,MAAM,EAAE,YAAY,qBAAqB,YAAY;AACrD,QACE,oBAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;YAER,YAAY,QAAQ,WAAW;EACzB,CAAA"}
+{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.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 StepperStepBack = ({\n  label,\n  children,\n  ...rest\n}: StepperNavigateProps & React.ComponentProps<typeof Button>) => {\n  const { activeStep, goToPreviousStep } = useStepper()\n  return (\n    <Button\n      size=\"sm\"\n      appearance=\"outline\"\n      {...rest}\n      disabled={activeStep === 0}\n      onClick={goToPreviousStep}\n    >\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC6D;CAChE,MAAM,EAAE,YAAY,qBAAqB,WAAW;CACpD,OACE,oBAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;YAER,YAAY,QAAQ,UAAU;CACzB,CAAA;AAEZ"}

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

@@ -1,5 +1,3 @@
-export declare const StepperStepBullet: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "status"> & {
-    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
-} & {
-    as?: import("react").ElementType;
+export declare const StepperStepBullet: import("../..").PolymorphicComponent<"div", {
+    status?: "active" | "completed" | "default" | "reviewed" | "success" | "viewed" | undefined;
 }>;

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,6 @@
-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("../..").PolymorphicComponent<"div", {
     canInteract?: boolean | undefined;
     direction?: "horizontal" | "vertical" | undefined;
-    separator?: "success" | "default" | "active" | "viewed" | undefined;
-    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
-} & {
-    as?: import("react").ElementType;
+    separator?: "active" | "default" | "success" | "viewed" | undefined;
+    status?: "active" | "completed" | "default" | "reviewed" | "success" | "viewed" | undefined;
 }>;

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,9 @@
-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;
-} & {
-    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"> & {
+export declare const StepperStepLabel: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
+    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;
+}>, {
     direction?: "horizontal" | "vertical" | undefined;
-    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
-} & {
-    as?: import("react").ElementType;
+    status?: "active" | "completed" | "default" | "reviewed" | "success" | "viewed" | undefined;
 }>;

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,11 @@
 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;
-} & {
-    as?: React.ElementType;
+declare const StyledSwitch: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement>>, {
+    size?: "lg" | "md" | undefined;
 }>;
 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,9 +1,7 @@
 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: import("../..").PolymorphicComponent<"table", {
+    size?: "lg" | "md" | "xl" | undefined;
     corners?: "round" | "square" | undefined;
-} & {
-    as?: React.ElementType;
 }>;
 type TableProps = React.ComponentProps<typeof StyledTable> & {
     numberOfStickyColumns?: number;
@@ -11,39 +9,29 @@ type TableProps = React.ComponentProps<typeof StyledTable> & {
     scrollContainerkey?: string;
     maxRowDepth?: number;
 };
-export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>> & {
+export declare const Table: (({ ref, size, corners, numberOfStickyColumns, scrollContainerCls, scrollContainerkey, ...rest }: TableProps) => React.JSX.Element) & {
     Body: {
-        ({ striped, ...rest }: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
+        ({ striped, ...rest }: {
             striped?: boolean | undefined;
         } & {
-            as?: React.ElementType;
-        }): React.JSX.Element;
+            as?: never;
+        } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "striped">): React.JSX.Element;
         displayName: string;
     };
-    Cell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    FooterCell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & {
-        as?: React.ElementType;
-    }>;
+    Cell: import("../..").PolymorphicComponent<"td", unknown>;
+    Footer: import("../..").PolymorphicComponent<"tfoot", unknown>;
+    FooterCell: import("../..").PolymorphicComponent<"td", unknown>;
     Header: {
-        ({ theme, isSticky, ...rest }: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "theme" | "isSticky"> & {
-            theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
+        ({ theme, isSticky, ...rest }: {
+            theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
             isSticky?: boolean | undefined;
         } & {
-            as?: React.ElementType;
-        }): React.JSX.Element;
+            as?: never;
+        } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "isSticky" | "theme">): React.JSX.Element;
         displayName: string;
     };
-    HeaderCell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    Row: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never> & {
-        as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: import("../..").PolymorphicComponent<"th", unknown>;
+    Row: (props: React.ComponentProps<import("../..").PolymorphicComponent<"tr", unknown>>) => React.JSX.Element;
     StickyColumnsContainer: ({ children, numberOfStickyColumns, className, ...restProps }: React.PropsWithChildren<{
         numberOfStickyColumns?: number;
         className?: string;

package/dist/components/table/Table.js

@@ -7,7 +7,7 @@ import { TableHeader } from "./TableHeader.js";
 import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow } from "./TableRow.js";
 import { TableStickyColumnsContainer } from "./TableStickyColumnsContainer.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table/Table.tsx
 var StyledTable = styled("table", {
@@ -49,7 +49,7 @@ var StyledTable = styled("table", {
 		}
 	}
 });
-var TableComponent = React$1.forwardRef(({ size = "md", corners = "round", numberOfStickyColumns = 0, scrollContainerCls, scrollContainerkey, ...rest }, ref) => {
+var TableComponent = ({ ref, size = "md", corners = "round", numberOfStickyColumns = 0, scrollContainerCls, scrollContainerkey, ...rest }) => {
 	const tableComponent = /* @__PURE__ */ jsx(StyledTable, {
 		ref,
 		size,
@@ -62,8 +62,8 @@ var TableComponent = React$1.forwardRef(({ size = "md", corners = "round", numbe
 		children: tableComponent
 	}, scrollContainerkey);
 	return tableComponent;
-});
-var Table = Object.assign(TableComponent, {
+};
+var Table = /* @__PURE__ */ Object.assign(TableComponent, {
 	Body: TableBody,
 	Cell: TableCell,
 	Footer: TableFooter,
@@ -73,7 +73,6 @@ var Table = Object.assign(TableComponent, {
 	Row: TableRow,
 	StickyColumnsContainer: TableStickyColumnsContainer
 });
-TableComponent.displayName = "Table";
 //#endregion
 export { Table };
 

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 = ({\n  ref,\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  scrollContainerCls,\n  scrollContainerkey,\n  ...rest\n}: TableProps) => {\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\nexport const Table = /* @__PURE__ */ 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"],"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,kBAAkB,EACtB,KACA,OAAO,MACP,UAAU,SACV,wBAAwB,GACxB,oBACA,oBACA,GAAG,WACa;CAChB,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;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,KAAK;CACL,wBAAwB;AAC1B,CAAC"}

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

@@ -1,12 +1,10 @@
 import * as React from 'react';
-declare const StyledTableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
+declare const StyledTableBody: import("../..").PolymorphicComponent<"tbody", {
     striped?: boolean | undefined;
-} & {
-    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.d.ts

@@ -1,3 +1 @@
-export declare const TableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & {
-    as?: import("react").ElementType;
-}>;
+export declare const TableCell: import("../..").PolymorphicComponent<"td", unknown>;

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.d.ts

@@ -1,3 +1 @@
-export declare const TableFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never> & {
-    as?: import("react").ElementType;
-}>;
+export declare const TableFooter: import("../..").PolymorphicComponent<"tfoot", unknown>;

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.d.ts

@@ -1,3 +1 @@
-export declare const TableFooterCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & {
-    as?: import("react").ElementType;
-}>;
+export declare const TableFooterCell: import("../..").PolymorphicComponent<"td", unknown>;

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,18 @@
-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: import("../..").PolymorphicComponent<"thead", {
+    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

@@ -9,7 +9,7 @@ var TABLE_HEADER_THEMES = {
 	LIGHT: "light",
 	WHITE: "white"
 };
-var StyledTableHeader = styled("thead", {
+var StyledTableHeader = /* @__PURE__ */ styled("thead", {
 	base: [],
 	variants: {
 		theme: {
@@ -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 = /* @__PURE__ */ 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,oBAAoC,uBAAO,SAAS;CACxD,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.d.ts

@@ -1,3 +1 @@
-export declare const TableHeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never> & {
-    as?: import("react").ElementType;
-}>;
+export declare const TableHeaderCell: import("../..").PolymorphicComponent<"th", unknown>;

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"}