@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.10

package/dist/components/sortable/Handle.js

@@ -1,2 +1,2 @@
-import{DragHandle as l}from"@atom-learning/icons";import*as r from"react";import{styled as s}from"../../stitches.js";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const e=s(m,{color:"inherit !important",fill:"currentColor","&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},variants:{isDragging:{true:{cursor:"grabbing"},false:{cursor:"grab"}}}}),o=r.forwardRef(({isDragging:a,size:i,...t},n)=>r.createElement(e,{ref:n,isDragging:a,appearance:"simple",hasTooltip:!1,size:i,...t},r.createElement(p,{is:l})));o.displayName="Handle";export{o as Handle,e as StyledHandle};
+import{DragHandle as s}from"@atom-learning/icons";import*as e from"react";import{styled as l}from"../../styled.js";import{ActionIcon as d}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";const r=l(d,{base:["text-inherit!","fill-current","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{isDragging:{true:["cursor-grabbing"],false:["cursor-grab"]}}}),a=e.forwardRef(({isDragging:i,size:o,...t},n)=>e.createElement(r,{ref:n,isDragging:i,appearance:"simple",hasTooltip:!1,size:o,...t},e.createElement(m,{is:s})));a.displayName="Handle";export{a as Handle,r as StyledHandle};
 //# sourceMappingURL=Handle.js.map

package/dist/components/sortable/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  color: 'inherit !important',\n  fill: 'currentColor',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed',\n    ['*']: {\n      pointerEvents: 'none'\n    }\n  },\n  variants: {\n    isDragging: {\n      true: {\n        cursor: 'grabbing'\n      },\n      false: {\n        cursor: 'grab'\n      }\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle: React.ForwardRefExoticComponent<THandleProps> =\n  React.forwardRef(({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  })\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"sNAOO,MAAMA,EAAeC,EAAOC,EAAY,CAC7C,MAAO,qBACP,KAAM,eACN,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACV,EACA,MAAO,CACL,OAAQ,MACV,CACF,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,WAAAC,EAAY,KAAAC,KAASC,CAAK,EAAGC,IAE7CJ,EAAA,cAACJ,GACC,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,GAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,EAAY,CACxB,CAEH,EAEHP,EAAO,YAAc"}
+{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"oNAQa,MAAAA,EAAeC,EAAOC,EAAY,CAC7C,KAAM,CACJ,gBACA,eACA,kCACA,8BACA,qBACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,iBAAiB,EACxB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAQYC,EAASC,EAAM,WAC1B,CAAC,CAAE,WAAAC,EAAY,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAE5BJ,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,CAAAA,EAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAY,CACxB,CAGN,EAEAP,EAAO,YAAc"}

package/dist/components/sortable/SortableHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"names":["SortableHandle","targetId","disabled","label","rest","attributes","listeners","isDragging","setActivatorNodeRef","useSortable","React","DragHandle"],"mappings":"6GAWO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,iBACLC,CACL,IAA4B,CAC1B,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,oBAAAC,CAAoB,EAC7DC,EAAY,CAAE,GAAIR,CAAS,CAAC,EAE9B,OACES,EAAA,cAACC,EAAA,CACC,IAAKH,EACL,WAAYD,EACZ,MAAOJ,EACP,SAAUD,EACT,GAAKA,EAAuB,CAAA,EAAZI,EAChB,GAAKJ,EAAwB,CAAA,EAAbG,EAChB,GAAGD,CAAAA,CACN,CAEJ,EAEAJ,EAAe,YAAc"}
+{"version":3,"file":"SortableHandle.js","sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"names":["SortableHandle","targetId","disabled","label","rest","attributes","listeners","isDragging","setActivatorNodeRef","useSortable","React","DragHandle"],"mappings":"6GAWO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,cACR,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,oBAAAC,CAAoB,EAC7DC,EAAY,CAAE,GAAIR,CAAS,CAAC,EAE9B,OACES,EAAA,cAACC,EAAA,CACC,IAAKH,EACL,WAAYD,EACZ,MAAOJ,EACP,SAAUD,EACT,GAAKA,EAAuB,CAAA,EAAZI,EAChB,GAAKJ,EAAwB,CAAA,EAAbG,EAChB,GAAGD,CAAAA,CACN,CAEJ,EAEAJ,EAAe,YAAc"}

package/dist/components/sortable/SortableItem.d.ts

@@ -1,14 +1,14 @@
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
-import { CSS } from '../../stitches';
 export type TSortableItemProps = {
     id: UniqueIdentifier;
     asChild?: boolean;
     isDragHandle?: boolean;
     disabled?: boolean;
-    css?: CSS;
+    className?: string;
+    style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>;
 };
 export declare const SortableItem: {
-    ({ id, asChild, css, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
+    ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
     displayName: string;
 };

package/dist/components/sortable/SortableItem.js

@@ -1,2 +1,2 @@
-import{useSortable as p}from"@dnd-kit/sortable";import{Slot as b}from"@radix-ui/react-slot";import*as g from"react";import{styled as f}from"../../stitches.js";import{Box as x}from"../box/Box.js";const u=f(b),s=({id:l,asChild:o=!1,css:n,isDragHandle:r=!1,disabled:t,...i})=>{const{transform:a,setNodeRef:d,isDragging:e,listeners:c,attributes:m}=p({id:l});return g.createElement(o?u:x,{ref:d,css:{["--scale"]:1,transform:"translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))",zIndex:e?5:void 0,["--translate-x"]:(a==null?void 0:a.x)||0,["--translate-y"]:(a==null?void 0:a.y)||0,"&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},...r?{cursor:e?"grabbing":"grab"}:{},...n},"data-dragging":e,"data-disabled":t,...r&&!t?c:{},...r&&!t?m:{},...i})};s.displayName="SortableItem";export{s as SortableItem};
+import{useSortable as p}from"@dnd-kit/sortable";import{Slot as g}from"@radix-ui/react-slot";import u from"clsx";import*as y from"react";const s=({id:l,asChild:o=!1,className:i,style:d,isDragHandle:e=!1,disabled:r,...n})=>{const{transform:a,setNodeRef:c,isDragging:t,listeners:m,attributes:b}=p({id:l});return y.createElement(o?g:"div",{ref:c,style:{...d,"--scale":1,"--translate-x":(a==null?void 0:a.x)||0,"--translate-y":(a==null?void 0:a.y)||0},"data-dragging":t,"data-disabled":r,...e&&!r?m:{},...e&&!r?b:{},...n,className:u("translate-x-[calc(var(--translate-x)*1px)]","translate-y-[calc(var(--translate-y)*1px)]","scale-(--scale)",t&&"z-5","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30",e&&(t?"cursor-grabbing":"cursor-grab"),i)})};s.displayName="SortableItem";export{s as SortableItem};
 //# sourceMappingURL=SortableItem.js.map

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { Box } from '../box'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  css?: CSS\n}\n\nconst StyledSlot = styled(Slot)\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  css,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? StyledSlot : Box\n  return (\n    <Component\n      ref={setNodeRef}\n      css={{\n        ['--scale']: 1,\n        transform:\n          'translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))',\n        zIndex: isDragging ? 5 : undefined,\n        ['--translate-x']: transform?.x || 0,\n        ['--translate-y']: transform?.y || 0,\n        '&[disabled]': {\n          opacity: 0.3,\n          cursor: 'not-allowed',\n          ['*']: {\n            pointerEvents: 'none'\n          }\n        },\n        ...(isDragHandle ? { cursor: isDragging ? 'grabbing' : 'grab' } : {}),\n        ...css\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["StyledSlot","styled","Slot","SortableItem","id","asChild","css","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Box"],"mappings":"mMAiBA,MAAMA,EAAaC,EAAOC,CAAI,EAEjBC,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,IAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,KACGC,CACL,IAAmD,CACjD,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAX,CAAG,CAAC,EAGpB,OACEY,EAAA,cAFgBX,EAAUL,EAAaiB,EAEtC,CACC,IAAKN,EACL,IAAK,CACH,CAAC,WAAY,EACb,UACE,8GACF,OAAQC,EAAa,EAAI,OACzB,CAAC,kBAAkBF,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,CAAC,kBAAkBA,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,GAAIH,EAAe,CAAE,OAAQK,EAAa,WAAa,MAAO,EAAI,CAAC,EACnE,GAAGN,CACL,EACA,gBAAeM,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAA,EAC5C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,CAAA,EAC7C,GAAGL,CAAAA,CACN,CAEJ,EAEAN,EAAa,YAAc"}
+{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["SortableItem","id","asChild","className","style","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Slot","clsx"],"mappings":"wIAea,MAAAA,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,EACA,GAAGC,CACL,IAAmD,CACjD,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAZ,CAAG,CAAC,EAGpB,OACEa,EAAA,cAFgBZ,EAAUa,EAAO,MAEhC,CACC,IAAKN,EACL,MAAO,CACL,GAAGL,EACH,UAAW,EACX,iBAAiBI,GAAA,KAAAA,OAAAA,EAAW,IAAK,EACjC,iBAAiBA,GAAA,KAAAA,OAAAA,EAAW,IAAK,CACnC,EACA,gBAAeE,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAC,EAC7C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,GAC7C,GAAGL,EACJ,UAAWS,EACT,6CACA,6CACA,kBACAN,GAAc,MACd,kCACA,8BACA,sBACAL,IAAiBK,EAAa,kBAAoB,eAClDP,CACF,CACF,CAAA,CAEJ,EAEAH,EAAa,YAAc"}

package/dist/components/sortable/SortableRoot.js

@@ -1,2 +1,2 @@
-import{useSensors as x,useSensor as l,PointerSensor as p,KeyboardSensor as v,DndContext as C,closestCenter as y}from"@dnd-kit/core";import{sortableKeyboardCoordinates as E,arrayMove as D,SortableContext as I}from"@dnd-kit/sortable";import*as o from"react";const c=({sortableIds:t,onSortChange:m,children:S})=>{const[u,s]=o.useState(t);o.useEffect(()=>{s(t)},[t]);const b=x(l(p),l(v,{coordinateGetter:E}));return o.createElement(C,{sensors:b,collisionDetection:y,onDragEnd:f=>{const{active:n,over:e}=f;n.id&&(e==null?void 0:e.id)&&n.id!==(e==null?void 0:e.id)&&s(r=>{const d=r.indexOf(n.id),i=r.indexOf(e.id),a=D(r,d,i);return m({order:a,oldIndex:d,newIndex:i}),a})}},o.createElement(I,{items:u},S))};c.displayName="SortableRoot";export{c as SortableRoot};
+import{useSensors as x,useSensor as l,PointerSensor as p,KeyboardSensor as C,DndContext as v,closestCenter as y}from"@dnd-kit/core";import{sortableKeyboardCoordinates as E,arrayMove as D,SortableContext as I}from"@dnd-kit/sortable";import*as o from"react";const c=({sortableIds:t,onSortChange:m,children:S})=>{const[u,s]=o.useState(t);o.useEffect(()=>{s(t)},[t]);const b=x(l(p),l(C,{coordinateGetter:E}));return o.createElement(v,{sensors:b,collisionDetection:y,onDragEnd:f=>{const{active:n,over:e}=f;n.id&&e!=null&&e.id&&n.id!==(e==null?void 0:e.id)&&s(r=>{const d=r.indexOf(n.id),i=r.indexOf(e.id),a=D(r,d,i);return m({order:a,oldIndex:d,newIndex:i}),a})}},o.createElement(I,{items:u},S))};c.displayName="SortableRoot";export{c as SortableRoot};
 //# sourceMappingURL=SortableRoot.js.map

package/dist/components/sortable/SortableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"names":["SortableRoot","sortableIds","onSortChange","children","order","setOrder","React","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","newOrder","arrayMove","SortableContext"],"mappings":"gQAyBa,MAAAA,EAAe,CAAC,CAC3B,YAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAmD,CACjD,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAA4BL,CAAW,EACvEK,EAAM,UAAU,IAAM,CACpBD,EAASJ,CAAW,CACtB,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMM,EAAUC,EACdC,EAAUC,CAAa,EACvBD,EAAUE,EAAgB,CACxB,iBAAkBC,CACpB,CAAC,CACH,EAeA,OACEN,EAAA,cAACO,EAAA,CACC,QAASN,EACT,mBAAoBO,EACpB,UAjBmBC,GAAwB,CAC7C,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAIF,EACrBC,EAAO,KAAMC,GAAA,KAAAA,OAAAA,EAAM,KAAMD,EAAO,MAAOC,GAAA,KAAA,OAAAA,EAAM,KAC/CZ,EAAUD,GAAU,CAClB,MAAMc,EAAWd,EAAM,QAAQY,EAAO,EAAE,EAClCG,EAAWf,EAAM,QAAQa,EAAK,EAAE,EAChCG,EAAWC,EAAUjB,EAAOc,EAAUC,CAAQ,EACpD,OAAAjB,EAAa,CAAE,MAAOkB,EAAU,SAAAF,EAAU,SAAAC,CAAS,CAAC,EAC7CC,CACT,CAAC,CAEL,CAAA,EAQId,EAAA,cAACgB,EAAA,CAAgB,MAAOlB,GAAQD,CAAS,CAC3C,CAEJ,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"SortableRoot.js","sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"names":["SortableRoot","sortableIds","onSortChange","children","order","setOrder","React","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","newOrder","arrayMove","SortableContext"],"mappings":"gQAyBa,MAAAA,EAAe,CAAC,CAC3B,YAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAmD,CACjD,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAA4BL,CAAW,EACvEK,EAAM,UAAU,IAAM,CACpBD,EAASJ,CAAW,CACtB,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMM,EAAUC,EACdC,EAAUC,CAAa,EACvBD,EAAUE,EAAgB,CACxB,iBAAkBC,CACpB,CAAC,CACH,EAeA,OACEN,EAAA,cAACO,EAAA,CACC,QAASN,EACT,mBAAoBO,EACpB,UAjBmBC,GAAwB,CAC7C,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAIF,EACrBC,EAAO,IAAMC,GAAA,MAAAA,EAAM,IAAMD,EAAO,MAAOC,GAAA,KAAA,OAAAA,EAAM,KAC/CZ,EAAUD,GAAU,CAClB,MAAMc,EAAWd,EAAM,QAAQY,EAAO,EAAE,EAClCG,EAAWf,EAAM,QAAQa,EAAK,EAAE,EAChCG,EAAWC,EAAUjB,EAAOc,EAAUC,CAAQ,EACpD,OAAAjB,EAAa,CAAE,MAAOkB,EAAU,SAAAF,EAAU,SAAAC,CAAS,CAAC,EAC7CC,CACT,CAAC,CAEL,CAAA,EAQId,EAAA,cAACgB,EAAA,CAAgB,MAAOlB,GAAQD,CAAS,CAC3C,CAEJ,EAEAH,EAAa,YAAc"}

package/dist/components/sortable/index.d.ts

@@ -1,7 +1,7 @@
 export declare const Sortable: {
     Root: {
-        ({ sortableIds, onSortChange, children }: import("react").PropsWithChildren<{
-            sortableIds: import("react").ReactText[];
+        ({ sortableIds, onSortChange, children }: React.PropsWithChildren<{
+            sortableIds: React.ReactText[];
             onSortChange: (onSortChangeData: {
                 order: import("@dnd-kit/core").UniqueIdentifier[];
                 oldIndex: number;
@@ -11,7 +11,7 @@ export declare const Sortable: {
         displayName: string;
     };
     Item: {
-        ({ id, asChild, css, isDragHandle, disabled, ...rest }: import("react").PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
+        ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
         displayName: string;
     };
     Handle: {

package/dist/components/spacer/Spacer.d.ts

@@ -2,372 +2,8 @@
  * A flexible flex spacer that expands along the major axis of its containing flex layout.
  * It renders a `div` by default, and takes up any available space.
  */
-export declare const Spacer: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@atom-learning/stitches-react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        textBold: string;
-        textRegular: string;
-        textSubtle: string;
-        textMinimal: string;
-        background: string;
-        backgroundAccent: string;
-        grey100: string;
-        grey200: string;
-        grey300: string;
-        grey400: string;
-        grey500: string;
-        grey600: string;
-        grey700: string;
-        grey800: string;
-        grey900: string;
-        grey1000: string;
-        grey1100: string;
-        grey1200: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        blue1000: string;
-        blue1100: string;
-        blue1200: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
-        pink1000: string;
-        pink1100: string;
-        pink1200: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        purple1000: string;
-        purple1100: string;
-        purple1200: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        cyan1000: string;
-        cyan1100: string;
-        cyan1200: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        green1000: string;
-        green1100: string;
-        green1200: string;
-        magenta100: string;
-        magenta200: string;
-        magenta300: string;
-        magenta400: string;
-        magenta500: string;
-        magenta600: string;
-        magenta700: string;
-        magenta800: string;
-        magenta900: string;
-        magenta1000: string;
-        magenta1100: string;
-        magenta1200: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        red1000: string;
-        red1100: string;
-        red1200: string;
-        teal100: string;
-        teal200: string;
-        teal300: string;
-        teal400: string;
-        teal500: string;
-        teal600: string;
-        teal700: string;
-        teal800: string;
-        teal900: string;
-        teal1000: string;
-        teal1100: string;
-        teal1200: string;
-        orange100: string;
-        orange200: string;
-        orange300: string;
-        orange400: string;
-        orange500: string;
-        orange600: string;
-        orange700: string;
-        orange800: string;
-        orange900: string;
-        orange1000: string;
-        orange1100: string;
-        orange1200: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        yellow1000: string;
-        yellow1100: string;
-        yellow1200: string;
-        lime100: string;
-        lime200: string;
-        lime300: string;
-        lime400: string;
-        lime500: string;
-        lime600: string;
-        lime700: string;
-        lime800: string;
-        lime900: string;
-        lime1000: string;
-        lime1100: string;
-        lime1200: string;
-        lapis100: string;
-        lapis200: string;
-        lapis300: string;
-        lapis400: string;
-        lapis500: string;
-        lapis600: string;
-        lapis700: string;
-        lapis800: string;
-        lapis900: string;
-        lapis1000: string;
-        lapis1100: string;
-        lapis1200: string;
-        maroon100: string;
-        maroon200: string;
-        maroon300: string;
-        maroon400: string;
-        maroon500: string;
-        maroon600: string;
-        maroon700: string;
-        maroon800: string;
-        maroon900: string;
-        maroon1000: string;
-        maroon1100: string;
-        maroon1200: string;
-        marsh100: string;
-        marsh200: string;
-        marsh300: string;
-        marsh400: string;
-        marsh500: string;
-        marsh600: string;
-        marsh700: string;
-        marsh800: string;
-        marsh900: string;
-        marsh1000: string;
-        marsh1100: string;
-        marsh1200: string;
-        alpha100: string;
-        alpha150: string;
-        alpha200: string;
-        alpha250: string;
-        alpha600: string;
-        infoLight: string;
-        info: string;
-        infoMid: string;
-        infoDark: string;
-        successLight: string;
-        success: string;
-        successMid: string;
-        successDark: string;
-        dangerLight: string;
-        danger: string;
-        dangerMid: string;
-        dangerDark: string;
-        warningLight: string;
-        warning: string;
-        warningMid: string;
-        warningDark: string;
-        warningText: string;
-        subjectEnglish: string;
-        subjectMaths: string;
-        subjectScience: string;
-        subjectVerbalReasoning: string;
-        subjectNonVerbalReasoning: string;
-        subjectCreativeWriting: string;
-        subjectExamSkills: string;
-        subjectGcseEnglishLiterature: string;
-        subjectGcseMaths: string;
-        subjectGcseChemistry: string;
-        subjectGcsePhysics: string;
-        subjectGcseBiology: string;
-        glBlueLight: string;
-        glBluePrimary: string;
-        glBlueDark: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        primary1000: string;
-        primary1100: string;
-        primary1200: string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "24": string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-    };
-    fonts: {
-        sans: string;
-        mono: string;
-        display: string;
-        body: string;
-    };
-    sizes: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-    };
-    radii: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        round: string;
-    };
-    shadows: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    ratios: {
-        "16-9": string;
-        "3-2": string;
-        "4-3": string;
-        "1-1": string;
-        "3-4": string;
-    };
-}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
-    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
-        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
-    };
-    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
-        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-    };
-    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-    };
-}>>;
+export declare const Spacer: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/spacer/Spacer.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";const e=t("div",{flex:1,justifySelf:"stretch",alignSelf:"stretch"});e.displayName="Spacer";export{e as Spacer};
+import{styled as s}from"../../styled.js";const e=s("div",{base:["flex-1","justify-self-stretch","self-stretch"]});e.displayName="Spacer";export{e as Spacer};
 //# sourceMappingURL=Spacer.js.map

package/dist/components/spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  flex: 1,\n  justifySelf: 'stretch',\n  alignSelf: 'stretch'\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","styled"],"mappings":"2CAMa,MAAAA,EAASC,EAAO,MAAO,CAClC,KAAM,EACN,YAAa,UACb,UAAW,SACb,CAAC,EAEDD,EAAO,YAAc"}
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","styled"],"mappings":"yCAMa,MAAAA,EAASC,EAAO,MAAO,CAClC,KAAM,CAAC,SAAU,uBAAwB,cAAc,CACzD,CAAC,EAEDD,EAAO,YAAc"}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { IStepperProps } from './types';
 export declare const Stepper: {
-    ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons, css }: React.PropsWithChildren<IStepperProps>): React.JSX.Element;
+    ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons, className }: React.PropsWithChildren<IStepperProps>): React.JSX.Element;
     displayName: string;
 } & {
     StepBack: ({ label, children, ...rest }: import("./types").IStepperNavigateProps & React.ComponentProps<typeof import("..").Button>) => React.JSX.Element;
     StepForward: ({ label, children, onClick, ...rest }: import("./types").IStepperNavigateProps & Partial<React.ComponentProps<typeof import("..").Button>>) => React.JSX.Element;
-    Steps: ({ css }: import("./types").IStepperStepsProps) => React.JSX.Element;
+    Steps: ({ className }: import("./types").IStepperStepsProps) => React.JSX.Element;
 };

package/dist/components/stepper/Stepper.js

@@ -1,2 +1,2 @@
-import c from"invariant";import*as p from"react";import{Box as h}from"../box/Box.js";import{StepperProvider as C}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as w}from"./StepperStepForward.js";import{StepperSteps as b}from"./StepperSteps.js";const r=({children:s,stepCount:o,allowSkip:n,onComplete:i,onStepChange:l,direction:a="horizontal",steps:e,hideLabels:m=!1,showCompletedIcons:d=!1,css:S})=>{c(!(o&&e),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const t=(e==null?void 0:e.length)||o||0;return p.createElement(C,{stepCount:t,allowSkip:n,onComplete:i,onStepChange:o?l:void 0,direction:a,steps:e||Array(t).fill(""),hideLabels:m,showCompletedIcons:d},p.createElement(h,{"aria-label":"progress",css:{width:"100%",...S}},s))},g=Object.assign(r,{StepBack:f,StepForward:w,Steps:b});r.displayName="Stepper";export{g as Stepper};
+import c from"clsx";import h from"invariant";import*as p from"react";import{StepperProvider as f}from"./stepper-context/StepperContext.js";import{StepperStepBack as C}from"./StepperStepBack.js";import{StepperStepForward as u}from"./StepperStepForward.js";import{StepperSteps as w}from"./StepperSteps.js";const r=({children:s,stepCount:o,allowSkip:l,onComplete:n,onStepChange:i,direction:a="horizontal",steps:e,hideLabels:m=!1,showCompletedIcons:d=!1,className:S})=>{h(!(o&&e),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const t=(e==null?void 0:e.length)||o||0;return p.createElement(f,{stepCount:t,allowSkip:l,onComplete:n,onStepChange:o?i:void 0,direction:a,steps:e||Array(t).fill(""),hideLabels:m,showCompletedIcons:d},p.createElement("div",{"aria-label":"progress",className:c("w-full",S)},s))},b=Object.assign(r,{StepBack:C,StepForward:u,Steps:w});r.displayName="Stepper";export{b as Stepper};
 //# sourceMappingURL=Stepper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { Box } from '../box/Box'\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  css\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      <Box\n        aria-label=\"progress\"\n        css={{\n          width: '100%',\n          ...css\n        }}\n      >\n        {children}\n      </Box>\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"],"names":["StepperComponent","children","stepCount","allowSkip","onComplete","onStepChange","direction","steps","hideLabels","showCompletedIcons","css","invariant","count","React","StepperProvider","Box","Stepper","StepperStepBack","StepperStepForward","StepperSteps"],"mappings":"gUAUA,MAAMA,EAAmB,CAAC,CACxB,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,aACZ,MAAAC,EACA,WAAAC,EAAa,GACb,mBAAAC,EAAqB,GACrB,IAAAC,CACF,IAA8C,CAC5CC,EACE,EAAET,GAAaK,GACf,6IACF,EAEA,MAAMK,GAAQL,GAAA,KAAA,OAAAA,EAAO,SAAUL,GAAa,EAE5C,OACEW,EAAA,cAACC,EAAA,CACC,UAAWF,EACX,UAAWT,EACX,WAAYC,EACZ,aAAcF,EAAYG,EAAe,OACzC,UAAWC,EACX,MAAOC,GAAS,MAAMK,CAAK,EAAE,KAAK,EAAE,EACpC,WAAYJ,EACZ,mBAAoBC,CAAAA,EAEpBI,EAAA,cAACE,EAAA,CACC,aAAW,WACX,IAAK,CACH,MAAO,OACP,GAAGL,CACL,CAECT,EAAAA,CACH,CACF,CAEJ,EAEae,EAAU,OAAO,OAAOhB,EAAkB,CACrD,SAAUiB,EACV,YAAaC,EACb,MAAOC,CACT,CAAC,EAEDnB,EAAiB,YAAc"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport invariant from 'invariant'\nimport * as React from 'react'\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={clsx('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"],"names":["StepperComponent","children","stepCount","allowSkip","onComplete","onStepChange","direction","steps","hideLabels","showCompletedIcons","className","invariant","count","React","StepperProvider","clsx","Stepper","StepperStepBack","StepperStepForward","StepperSteps"],"mappings":"gTAUA,MAAMA,EAAmB,CAAC,CACxB,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,aACZ,MAAAC,EACA,WAAAC,EAAa,GACb,mBAAAC,EAAqB,GACrB,UAAAC,CACF,IAA8C,CAC5CC,EACE,EAAET,GAAaK,GACf,6IACF,EAEA,MAAMK,GAAQL,GAAA,KAAAA,OAAAA,EAAO,SAAUL,GAAa,EAE5C,OACEW,EAAA,cAACC,EAAA,CACC,UAAWF,EACX,UAAWT,EACX,WAAYC,EACZ,aAAcF,EAAYG,EAAe,OACzC,UAAWC,EACX,MAAOC,GAAS,MAAMK,CAAK,EAAE,KAAK,EAAE,EACpC,WAAYJ,EACZ,mBAAoBC,CAAAA,EAEpBI,EAAA,cAAC,MAAI,CAAA,aAAW,WAAW,UAAWE,EAAK,SAAUL,CAAS,CAAA,EAC3DT,CACH,CACF,CAEJ,EAEae,EAAU,OAAO,OAAOhB,EAAkB,CACrD,SAAUiB,EACV,YAAaC,EACb,MAAOC,CACT,CAAC,EAEDnB,EAAiB,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBack.js","sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../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"],"names":["StepperStepBack","label","children","rest","activeStep","goToPreviousStep","useStepper","React","Button"],"mappings":"sIAMO,MAAMA,EAAkB,CAAC,CAC9B,MAAAC,EACA,SAAAC,KACGC,CACL,IAAmE,CACjE,KAAM,CAAE,WAAAC,EAAY,iBAAAC,CAAiB,EAAIC,IACzC,OACEC,EAAA,cAACC,EAAA,CACC,KAAK,KACL,WAAW,UACV,GAAGL,EACJ,SAAUC,IAAe,EACzB,QAASC,CAAAA,EAERH,IAAYD,GAAA,KAAA,OAAAA,EAAQG,CAAAA,EACvB,CAEJ"}
+{"version":3,"file":"StepperStepBack.js","sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../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"],"names":["StepperStepBack","label","children","rest","activeStep","goToPreviousStep","useStepper","React","Button"],"mappings":"sIAMa,MAAAA,EAAkB,CAAC,CAC9B,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAmE,CACjE,KAAM,CAAE,WAAAC,EAAY,iBAAAC,CAAiB,EAAIC,IACzC,OACEC,EAAA,cAACC,EAAA,CACC,KAAK,KACL,WAAW,UACV,GAAGL,EACJ,SAAUC,IAAe,EACzB,QAASC,CAAAA,EAERH,IAAYD,GAAA,KAAA,OAAAA,EAAQG,CAAAA,EACvB,CAEJ"}