@namroodinc/liquid-editorial 0.1.6 → 0.1.7

package/dist/components/SideNav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","SideNavContext","createContext","useSideNavCollapsed","useContext","SideNav","forwardRef","controlled","rest","uncontrolled","setUncontrolled","useState","defaultCollapsed","isCollapsed","toggle","useCallback","next","onCollapsedChange","value","useMemo","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\ninterface SideNavContextValue {\n  isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n  return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n  /** Controlled collapsed state. Omit to let the rail own it. */\n  isCollapsed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Fired by the header's collapse toggle. */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n  {\n    isCollapsed: controlled,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    label = \"Main\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const isCollapsed = controlled ?? uncontrolled;\n\n  const toggle = useCallback(() => {\n    const next = !isCollapsed;\n    if (controlled === undefined) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  }, [controlled, isCollapsed, onCollapsedChange]);\n\n  const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <SideNavContext.Provider value={value}>\n      <SideNavToggleContext.Provider value={toggle}>\n        <nav\n          ref={ref}\n          aria-label={label}\n          data-collapsed={isCollapsed || undefined}\n          className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n          {...rest}\n        >\n          {children}\n        </nav>\n      </SideNavToggleContext.Provider>\n    </SideNavContext.Provider>\n  );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Shown when the rail is open; hidden when it collapses. */\n  title?: ReactNode;\n  /** A mark that survives the collapse — a logo, a monogram. */\n  mark?: ReactNode;\n  /** Set false when the rail is permanently open. */\n  isCollapsible?: boolean;\n  children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n  function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n    const toggle = useContext(SideNavToggleContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n        {!isCollapsed && (title || children) && (\n          <span className=\"ds-sidenav__title\">{title ?? children}</span>\n        )}\n        {isCollapsible && (\n          <button\n            type=\"button\"\n            className=\"ds-sidenav__toggle\"\n            aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            aria-expanded={!isCollapsed}\n            title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            onClick={toggle}\n          >\n            <Icon name={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"} />\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /** Section label. Hidden — but still announced — when collapsed. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n  function SideNavSection({ label, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n        aria-label={label}\n        role={label ? \"group\" : undefined}\n        {...rest}\n      >\n        {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n        <ul className=\"ds-sidenav__list\">{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  icon: IconName;\n  /** The words. Kept in the accessible name even when the rail is collapsed. */\n  label: string;\n  isActive?: boolean;\n  /** A count or status pill at the end of the row. Hidden when collapsed. */\n  badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n  function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <li className=\"ds-sidenav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          title={isCollapsed ? label : undefined}\n          {...rest}\n        >\n          <Icon name={icon} />\n          {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n          {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n          {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n  function SideNavFooter({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;AAmBA,IAAMC,IAAiBC,EAAmC,EAAE,aAAa,GAAM,CAAC;AAGhF,SAAgBC,IAA+B;CAC7C,OAAOC,EAAWH,CAAc,CAAC,CAAC;AACpC;AAmBA,IAAaI,IAAUC,EAAsC,SAC3D,EACE,aAAaC,GACb,sBAAmB,IACnB,sBACA,WAAQ,QACR,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAcC,KAAmBC,EAASC,CAAgB,GAC3DC,IAAcN,KAAcE,GAE5BK,IAASC,QAAkB;EAC/B,IAAMC,IAAO,CAACH;EAEd,AADIN,MAAe,KAAA,KAAWG,EAAgBM,CAAI,GAClDC,IAAoBD,CAAI;CAC1B,GAAG;EAACT;EAAYM;EAAaI;CAAiB,CAAC,GAEzCC,IAAQC,SAAe,EAAE,eAAY,IAAI,CAACN,CAAW,CAAC;CAE5D,OACE,kBAACZ,EAAe,UAAhB;EAAgC;EAC9B,UAAA,kBAACmB,EAAqB,UAAtB;GAA+B,OAAON;GACpC,UAAA,kBAAC,OAAD;IACO;IACL,cAAYO;IACZ,kBAAgBR,KAAe,KAAA;IAC/B,WAAW,CAAC,cAAcS,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IAC7D,GAAId;IAEH;GACE,CAAA;EACwB,CAAA;CACR,CAAA;AAE7B,CAAC,GAEKY,IAAuBlB,QAAgC,CAAC,CAAC,GAalDqB,IAAgBjB,EAC3B,SAAuB,EAAE,UAAO,SAAM,mBAAgB,IAAM,cAAW,aAAU,GAAGE,KAAQ,GAAK;CAC/F,IAAM,EAAE,mBAAgBJ,EAAWH,CAAc,GAC3Ca,IAASV,EAAWgB,CAAoB;CAE9C,OACE,kBAAC,OAAD;EACO;EACL,WAAW,CAAC,sBAAsBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACrE,GAAId;EAHN,UAAA;GAKGgB,KAAQ,kBAAC,QAAD;IAAM,WAAU;IAAoB,UAAAA;GAAW,CAAA;GACvD,CAACX,MAAgBY,KAASC,MACzB,kBAAC,QAAD;IAAM,WAAU;IAAqB,UAAAD,KAASC;GAAe,CAAA;GAE9DC,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,cAAYd,IAAc,sBAAsB;IAChD,iBAAe,CAACA;IAChB,OAAOA,IAAc,sBAAsB;IAC3C,SAASC;IAET,UAAA,kBAACd,GAAD,EAAM,MAAMa,IAAc,mBAAmB,gBAAkB,CAAA;GACzD,CAAA;EAEP;;AAET,CACF,GASae,IAAiBtB,EAC5B,SAAwB,EAAE,UAAO,cAAW,aAAU,GAAGE,KAAQ,GAAK;CACpE,IAAM,EAAE,mBAAgBJ,EAAWH,CAAc;CAEjD,OACE,kBAAC,OAAD;EACO;EACL,WAAW,CAAC,uBAAuBqB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACtE,cAAYD;EACZ,MAAMA,IAAQ,UAAU,KAAA;EACxB,GAAIb;EALN,UAAA,CAOGa,KAAS,CAACR,KAAe,kBAAC,QAAD;GAAM,WAAU;GAA6B,UAAAQ;EAAY,CAAA,GACnF,kBAAC,MAAD;GAAI,WAAU;GAAoB;EAAa,CAAA,CAC5C;;AAET,CACF,GAeaQ,IAAcvB,EACzB,SAAqB,EAAE,SAAM,UAAO,aAAU,UAAO,cAAW,GAAGE,KAAQ,GAAK;CAC9E,IAAM,EAAE,mBAAgBJ,EAAWH,CAAc;CAEjD,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAAC,KAAD;GACO;GACL,WAAW,CAAC,oBAAoBqB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GACnE,eAAaQ,KAAY,KAAA;GACzB,gBAAcA,IAAW,SAAS,KAAA;GAClC,OAAOjB,IAAcQ,IAAQ,KAAA;GAC7B,GAAIb;GANN,UAAA;IAQE,kBAACR,GAAD,EAAM,MAAM+B,EAAO,CAAA;IAClB,CAAClB,KAAe,kBAAC,QAAD;KAAM,WAAU;KAAqB,UAAAQ;IAAY,CAAA;IACjE,CAACR,KAAemB,KAAS,kBAAC,QAAD;KAAM,WAAU;KAAqB,UAAAA;IAAY,CAAA;IAC1EnB,KAAe,kBAAC,QAAD;KAAM,WAAU;KAAkB,UAAAQ;IAAY,CAAA;GAC7D;;CACD,CAAA;AAER,CACF,GAOaY,IAAgB3B,EAC3B,SAAuB,EAAE,cAAW,aAAU,GAAGE,KAAQ,GAAK;CAC5D,OACE,kBAAC,OAAD;EACO;EACL,WAAW,CAAC,sBAAsBc,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACrE,GAAId;EAEH;CACE,CAAA;AAET,CACF"}
+{"version":3,"file":"index.js","names":["Icon","SideNavContext","createContext","useSideNavCollapsed","useContext","SideNav","forwardRef","controlled","rest","uncontrolled","setUncontrolled","useState","defaultCollapsed","isCollapsed","toggle","useCallback","next","onCollapsedChange","value","useMemo","SideNavToggleContext","label","className","SideNavHeader","mark","title","children","isCollapsible","Button","SideNavSection","SideNavItem","isActive","icon","badge","SideNavFooter"],"sources":["../../../src/components/SideNav/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\ninterface SideNavContextValue {\n  isCollapsed: boolean;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({ isCollapsed: false });\n\n/** Read the rail's collapsed state from anything rendered inside it. */\nexport function useSideNavCollapsed(): boolean {\n  return useContext(SideNavContext).isCollapsed;\n}\n\nexport interface SideNavProps extends HTMLAttributes<HTMLElement> {\n  /** Controlled collapsed state. Omit to let the rail own it. */\n  isCollapsed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Fired by the header's collapse toggle. */\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n  /** Accessible name for the landmark. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * The primary rail: one heavy edge against the page, hairline rules between\n * sections. Collapsed it keeps the icons and drops the words — the width is a\n * token, so every rail in the product collapses to the same measure.\n */\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav(\n  {\n    isCollapsed: controlled,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    label = \"Main\",\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const isCollapsed = controlled ?? uncontrolled;\n\n  const toggle = useCallback(() => {\n    const next = !isCollapsed;\n    if (controlled === undefined) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  }, [controlled, isCollapsed, onCollapsedChange]);\n\n  const value = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <SideNavContext.Provider value={value}>\n      <SideNavToggleContext.Provider value={toggle}>\n        <nav\n          ref={ref}\n          aria-label={label}\n          data-collapsed={isCollapsed || undefined}\n          className={[\"ds-sidenav\", className].filter(Boolean).join(\" \")}\n          {...rest}\n        >\n          {children}\n        </nav>\n      </SideNavToggleContext.Provider>\n    </SideNavContext.Provider>\n  );\n});\n\nconst SideNavToggleContext = createContext<() => void>(() => {});\n\nexport interface SideNavHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Shown when the rail is open; hidden when it collapses. */\n  title?: ReactNode;\n  /** A mark that survives the collapse — a logo, a monogram. */\n  mark?: ReactNode;\n  /** Set false when the rail is permanently open. */\n  isCollapsible?: boolean;\n  children?: ReactNode;\n}\n\n/** Brand block plus the collapse toggle, above the first hairline rule. */\nexport const SideNavHeader = forwardRef<HTMLDivElement, SideNavHeaderProps>(\n  function SideNavHeader({ title, mark, isCollapsible = true, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n    const toggle = useContext(SideNavToggleContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__header\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {mark && <span className=\"ds-sidenav__mark\">{mark}</span>}\n        {!isCollapsed && (title || children) && (\n          <span className=\"ds-sidenav__title\">{title ?? children}</span>\n        )}\n        {isCollapsible && (\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            isIconOnly\n            iconStart={isCollapsed ? \"chevrons-right\" : \"chevrons-left\"}\n            className=\"ds-sidenav__toggle\"\n            aria-label={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            aria-expanded={!isCollapsed}\n            title={isCollapsed ? \"Expand navigation\" : \"Collapse navigation\"}\n            onClick={toggle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nexport interface SideNavSectionProps extends HTMLAttributes<HTMLDivElement> {\n  /** Section label. Hidden — but still announced — when collapsed. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/** A group of items under one label, separated by a hairline rule. */\nexport const SideNavSection = forwardRef<HTMLDivElement, SideNavSectionProps>(\n  function SideNavSection({ label, className, children, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__section\", className].filter(Boolean).join(\" \")}\n        aria-label={label}\n        role={label ? \"group\" : undefined}\n        {...rest}\n      >\n        {label && !isCollapsed && <span className=\"ds-sidenav__section-label\">{label}</span>}\n        <ul className=\"ds-sidenav__list\">{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SideNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  icon: IconName;\n  /** The words. Kept in the accessible name even when the rail is collapsed. */\n  label: string;\n  isActive?: boolean;\n  /** A count or status pill at the end of the row. Hidden when collapsed. */\n  badge?: ReactNode;\n}\n\n/**\n * One destination. The active row carries the solid rail on its leading edge —\n * the same rail as a selected table row, so selection reads the same anywhere.\n */\nexport const SideNavItem = forwardRef<HTMLAnchorElement, SideNavItemProps>(\n  function SideNavItem({ icon, label, isActive, badge, className, ...rest }, ref) {\n    const { isCollapsed } = useContext(SideNavContext);\n\n    return (\n      <li className=\"ds-sidenav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-sidenav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          title={isCollapsed ? label : undefined}\n          {...rest}\n        >\n          <Icon name={icon} />\n          {!isCollapsed && <span className=\"ds-sidenav__label\">{label}</span>}\n          {!isCollapsed && badge && <span className=\"ds-sidenav__badge\">{badge}</span>}\n          {isCollapsed && <span className=\"ds-sidenav__sr\">{label}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SideNavFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/** The bottom band — account, theme, help. Above the page edge, under a rule. */\nexport const SideNavFooter = forwardRef<HTMLDivElement, SideNavFooterProps>(\n  function SideNavFooter({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-sidenav__footer\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/SideNav/style.css

@@ -42,33 +42,8 @@
     text-overflow: ellipsis;
   }
 
-  .ds-sidenav__toggle {
-    margin-inline-start: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--space-8);
-    block-size: var(--space-8);
-    border: 0;
-    border-radius: var(--field-radius);
-    background: none;
-    color: var(--color-text-muted);
-    cursor: pointer;
-  }
-
-  .ds-sidenav[data-collapsed] .ds-sidenav__toggle {
-    margin-inline-start: 0;
-  }
-
-  .ds-sidenav__toggle:hover {
-    background: var(--field-hover);
-    color: var(--color-text);
-  }
-
-  .ds-sidenav__toggle:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
+  .ds-sidenav__toggle { margin-inline-start: auto; }
+  .ds-sidenav[data-collapsed] .ds-sidenav__toggle { margin-inline-start: 0; }
 
   .ds-sidenav__section {
     padding-block: var(--space-3);

package/dist/components/SortableList/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@dnd-kit/core"),i=require("@dnd-kit/modifiers"),a=require("@dnd-kit/sortable"),o=require("@dnd-kit/utilities");function s(e){return(0,t.isValidElement)(e)&&typeof e.props.id==`string`}var c=(0,t.forwardRef)(function({items:o,onReorder:c,renderDragOverlay:l,className:u,children:d,...f},p){let m=(0,t.useId)(),[h,g]=(0,t.useState)(null),[_,v]=(0,t.useState)(o),[y,b]=(0,t.useState)(o);o!==y&&o.join(`\0`)!==y.join(`\0`)&&(b(o),v(o));let x=(0,r.useSensors)((0,r.useSensor)(r.PointerSensor,{activationConstraint:{distance:4}}),(0,r.useSensor)(r.KeyboardSensor,{coordinateGetter:a.sortableKeyboardCoordinates})),S=(0,t.useCallback)(e=>{g(String(e.active.id))},[]),C=(0,t.useCallback)(e=>{g(null);let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=_.indexOf(String(t.id)),i=_.indexOf(String(n.id));if(r<0||i<0)return;let o=(0,a.arrayMove)(_,r,i);v(o),c?.(o)},[_,c]),w=t.Children.toArray(d),T=new Map(w.filter(s).map(e=>[e.props.id,e])),E=[..._.flatMap(e=>T.get(e)??[]),...w.filter(e=>!s(e)||!_.includes(e.props.id))],D=h?T.get(h):void 0;return(0,n.jsxs)(r.DndContext,{id:`ds-sortable-list-${m}`,sensors:x,collisionDetection:r.closestCenter,modifiers:[i.restrictToVerticalAxis],onDragStart:S,onDragEnd:C,onDragCancel:()=>g(null),children:[(0,n.jsx)(a.SortableContext,{items:_,strategy:a.verticalListSortingStrategy,children:(0,n.jsx)(`ul`,{ref:p,className:[`ds-sortable-list`,u].filter(Boolean).join(` `),...f,children:E})}),(0,n.jsx)(r.DragOverlay,{children:h?(0,n.jsxs)(`div`,{className:`ds-sortable-item`,"data-overlay":!0,children:[(0,n.jsx)(`span`,{className:`ds-sortable-item__handle`,"aria-hidden":`true`,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:l?l(h):D?.props.children})]}):null})]})}),l=(0,t.forwardRef)(function({id:t,label:r,action:i,className:s,children:c,...l},u){let{attributes:d,listeners:f,setNodeRef:p,transform:m,transition:h,isDragging:g}=(0,a.useSortable)({id:t});return(0,n.jsxs)(`li`,{ref:e=>{p(e),typeof u==`function`?u(e):u&&(u.current=e)},style:{transform:o.CSS.Translate.toString(m),transition:h},className:[`ds-sortable-item`,s].filter(Boolean).join(` `),"data-dragging":g||void 0,...l,children:[(0,n.jsx)(`button`,{type:`button`,className:`ds-sortable-item__handle`,"aria-label":r?`Move ${r}`:`Move item`,...d,...f,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-sortable-item__content`,children:c}),i&&(0,n.jsx)(`div`,{className:`ds-sortable-item__action`,children:i})]})});exports.SortableList=c,exports.SortableListItem=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@dnd-kit/core"),a=require("@dnd-kit/modifiers"),o=require("@dnd-kit/sortable"),s=require("@dnd-kit/utilities");function c(e){return(0,n.isValidElement)(e)&&typeof e.props.id==`string`}var l=(0,n.forwardRef)(function({items:t,onReorder:s,renderDragOverlay:l,className:u,children:d,...f},p){let m=(0,n.useId)(),[h,g]=(0,n.useState)(null),[_,v]=(0,n.useState)(t),[y,b]=(0,n.useState)(t);t!==y&&t.join(`\0`)!==y.join(`\0`)&&(b(t),v(t));let x=(0,i.useSensors)((0,i.useSensor)(i.PointerSensor,{activationConstraint:{distance:4}}),(0,i.useSensor)(i.KeyboardSensor,{coordinateGetter:o.sortableKeyboardCoordinates})),S=(0,n.useCallback)(e=>{g(String(e.active.id))},[]),C=(0,n.useCallback)(e=>{g(null);let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=_.indexOf(String(t.id)),i=_.indexOf(String(n.id));if(r<0||i<0)return;let a=(0,o.arrayMove)(_,r,i);v(a),s?.(a)},[_,s]),w=n.Children.toArray(d),T=new Map(w.filter(c).map(e=>[e.props.id,e])),E=[..._.flatMap(e=>T.get(e)??[]),...w.filter(e=>!c(e)||!_.includes(e.props.id))],D=h?T.get(h):void 0;return(0,r.jsxs)(i.DndContext,{id:`ds-sortable-list-${m}`,sensors:x,collisionDetection:i.closestCenter,modifiers:[a.restrictToVerticalAxis],onDragStart:S,onDragEnd:C,onDragCancel:()=>g(null),children:[(0,r.jsx)(o.SortableContext,{items:_,strategy:o.verticalListSortingStrategy,children:(0,r.jsx)(`ul`,{ref:p,className:[`ds-sortable-list`,u].filter(Boolean).join(` `),...f,children:E})}),(0,r.jsx)(i.DragOverlay,{children:h?(0,r.jsxs)(`div`,{className:`ds-sortable-item`,"data-overlay":!0,children:[(0,r.jsx)(`span`,{className:`ds-sortable-item__handle`,"aria-hidden":`true`,children:(0,r.jsx)(e.t,{name:`grip-vertical`})}),(0,r.jsx)(`div`,{className:`ds-sortable-item__content`,children:l?l(h):D?.props.children})]}):null})]})}),u=(0,n.forwardRef)(function({id:e,label:n,action:i,className:a,children:c,...l},u){let{attributes:d,listeners:f,setNodeRef:p,transform:m,transition:h,isDragging:g}=(0,o.useSortable)({id:e});return(0,r.jsxs)(`li`,{ref:e=>{p(e),typeof u==`function`?u(e):u&&(u.current=e)},style:{transform:s.CSS.Translate.toString(m),transition:h},className:[`ds-sortable-item`,a].filter(Boolean).join(` `),"data-dragging":g||void 0,...l,children:[(0,r.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`grip-vertical`,className:`ds-sortable-item__handle`,"aria-label":n?`Move ${n}`:`Move item`,...d,...f}),(0,r.jsx)(`div`,{className:`ds-sortable-item__content`,children:c}),i&&(0,r.jsx)(`div`,{className:`ds-sortable-item__action`,children:i})]})});exports.SortableList=l,exports.SortableListItem=u;
 //# sourceMappingURL=index.cjs.map

package/dist/components/SortableList/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["isValidElement","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","useCallback","arrayMove","Children","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","DragOverlay","Icon","useSortable","CSS","require_Icon","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_modifiers","_dnd_kit_sortable","_dnd_kit_utilities","isItem","child","SortableList","rest","dndId","activeId","setActiveId","order","setOrder","items","prevItems","setPrevItems","sensors","handleStart","event","handleEnd","over","active","from","to","next","onReorder","childArray","children","rows","ordered","id","activeRow","className","renderDragOverlay","SortableListItem","setNodeRef","node","ref","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <button\n          type=\"button\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        >\n          <Icon name=\"grip-vertical\" />\n        </button>\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["isValidElement","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","useCallback","arrayMove","Children","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","DragOverlay","Icon","useSortable","CSS","Button","require_Icon","require_components_Button_index","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_modifiers","_dnd_kit_sortable","_dnd_kit_utilities","isItem","child","SortableList","rest","dndId","activeId","setActiveId","order","setOrder","items","prevItems","setPrevItems","sensors","handleStart","event","handleEnd","over","active","from","to","next","onReorder","childArray","children","rows","ordered","id","activeRow","className","renderDragOverlay","SortableListItem","setNodeRef","node","ref","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"grip-vertical\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        />\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/SortableList/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAuBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAiC5B,CAAC"}

package/dist/components/SortableList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAgC5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortableList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAuBf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC5F,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,iGAAiG;IACjG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,gHA6ExB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,iHAiC5B,CAAC"}

package/dist/components/SortableList/index.js

@@ -1,85 +1,88 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
-import { Children as t, forwardRef as n, isValidElement as r, useCallback as i, useId as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { DndContext as l, DragOverlay as u, KeyboardSensor as d, PointerSensor as f, closestCenter as p, useSensor as m, useSensors as h } from "@dnd-kit/core";
-import { restrictToVerticalAxis as g } from "@dnd-kit/modifiers";
-import { SortableContext as _, arrayMove as v, sortableKeyboardCoordinates as y, useSortable as b, verticalListSortingStrategy as x } from "@dnd-kit/sortable";
-import { CSS as S } from "@dnd-kit/utilities";
+import { Button as t } from "../Button/index.js";
+import { Children as n, forwardRef as r, isValidElement as i, useCallback as a, useId as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { DndContext as u, DragOverlay as d, KeyboardSensor as f, PointerSensor as p, closestCenter as m, useSensor as h, useSensors as g } from "@dnd-kit/core";
+import { restrictToVerticalAxis as _ } from "@dnd-kit/modifiers";
+import { SortableContext as v, arrayMove as y, sortableKeyboardCoordinates as b, useSortable as x, verticalListSortingStrategy as S } from "@dnd-kit/sortable";
+import { CSS as C } from "@dnd-kit/utilities";
 //#region src/components/SortableList/index.tsx
-function C(e) {
-	return r(e) && typeof e.props.id == "string";
+function w(e) {
+	return i(e) && typeof e.props.id == "string";
 }
-var w = n(function({ items: n, onReorder: r, renderDragOverlay: b, className: S, children: w, ...T }, E) {
-	let D = a(), [O, k] = o(null), [A, j] = o(n), [M, N] = o(n);
-	n !== M && n.join("\0") !== M.join("\0") && (N(n), j(n));
-	let P = h(m(f, { activationConstraint: { distance: 4 } }), m(d, { coordinateGetter: y })), F = i((e) => {
+var T = r(function({ items: t, onReorder: r, renderDragOverlay: i, className: x, children: C, ...T }, E) {
+	let D = o(), [O, k] = s(null), [A, j] = s(t), [M, N] = s(t);
+	t !== M && t.join("\0") !== M.join("\0") && (N(t), j(t));
+	let P = g(h(p, { activationConstraint: { distance: 4 } }), h(f, { coordinateGetter: b })), F = a((e) => {
 		k(String(e.active.id));
-	}, []), I = i((e) => {
+	}, []), I = a((e) => {
 		k(null);
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
 		let i = A.indexOf(String(t.id)), a = A.indexOf(String(n.id));
 		if (i < 0 || a < 0) return;
-		let o = v(A, i, a);
+		let o = y(A, i, a);
 		j(o), r?.(o);
-	}, [A, r]), L = t.toArray(w), R = new Map(L.filter(C).map((e) => [e.props.id, e])), z = [...A.flatMap((e) => R.get(e) ?? []), ...L.filter((e) => !C(e) || !A.includes(e.props.id))], B = O ? R.get(O) : void 0;
-	return /* @__PURE__ */ c(l, {
+	}, [A, r]), L = n.toArray(C), R = new Map(L.filter(w).map((e) => [e.props.id, e])), z = [...A.flatMap((e) => R.get(e) ?? []), ...L.filter((e) => !w(e) || !A.includes(e.props.id))], B = O ? R.get(O) : void 0;
+	return /* @__PURE__ */ l(u, {
 		id: `ds-sortable-list-${D}`,
 		sensors: P,
-		collisionDetection: p,
-		modifiers: [g],
+		collisionDetection: m,
+		modifiers: [_],
 		onDragStart: F,
 		onDragEnd: I,
 		onDragCancel: () => k(null),
-		children: [/* @__PURE__ */ s(_, {
+		children: [/* @__PURE__ */ c(v, {
 			items: A,
-			strategy: x,
-			children: /* @__PURE__ */ s("ul", {
+			strategy: S,
+			children: /* @__PURE__ */ c("ul", {
 				ref: E,
-				className: ["ds-sortable-list", S].filter(Boolean).join(" "),
+				className: ["ds-sortable-list", x].filter(Boolean).join(" "),
 				...T,
 				children: z
 			})
-		}), /* @__PURE__ */ s(u, { children: O ? /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ c(d, { children: O ? /* @__PURE__ */ l("div", {
 			className: "ds-sortable-item",
 			"data-overlay": !0,
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ c("span", {
 				className: "ds-sortable-item__handle",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ s(e, { name: "grip-vertical" })
-			}), /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ c(e, { name: "grip-vertical" })
+			}), /* @__PURE__ */ c("div", {
 				className: "ds-sortable-item__content",
-				children: b ? b(O) : B?.props.children
+				children: i ? i(O) : B?.props.children
 			})]
 		}) : null })]
 	});
-}), T = n(function({ id: t, label: n, action: r, className: i, children: a, ...o }, l) {
-	let { attributes: u, listeners: d, setNodeRef: f, transform: p, transition: m, isDragging: h } = b({ id: t });
-	return /* @__PURE__ */ c("li", {
+}), E = r(function({ id: e, label: n, action: r, className: i, children: a, ...o }, s) {
+	let { attributes: u, listeners: d, setNodeRef: f, transform: p, transition: m, isDragging: h } = x({ id: e });
+	return /* @__PURE__ */ l("li", {
 		ref: (e) => {
-			f(e), typeof l == "function" ? l(e) : l && (l.current = e);
+			f(e), typeof s == "function" ? s(e) : s && (s.current = e);
 		},
 		style: {
-			transform: S.Translate.toString(p),
+			transform: C.Translate.toString(p),
 			transition: m
 		},
 		className: ["ds-sortable-item", i].filter(Boolean).join(" "),
 		"data-dragging": h || void 0,
 		...o,
 		children: [
-			/* @__PURE__ */ s("button", {
-				type: "button",
+			/* @__PURE__ */ c(t, {
+				variant: "simple",
+				size: "sm",
+				isIconOnly: !0,
+				iconStart: "grip-vertical",
 				className: "ds-sortable-item__handle",
 				"aria-label": n ? `Move ${n}` : "Move item",
 				...u,
-				...d,
-				children: /* @__PURE__ */ s(e, { name: "grip-vertical" })
+				...d
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ c("div", {
 				className: "ds-sortable-item__content",
 				children: a
 			}),
-			r && /* @__PURE__ */ s("div", {
+			r && /* @__PURE__ */ c("div", {
 				className: "ds-sortable-item__action",
 				children: r
 			})
@@ -87,6 +90,6 @@ var w = n(function({ items: n, onReorder: r, renderDragOverlay: b, className: S,
 	});
 });
 //#endregion
-export { w as SortableList, T as SortableListItem };
+export { T as SortableList, E as SortableListItem };
 
 //# sourceMappingURL=index.js.map

package/dist/components/SortableList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","isItem","isValidElement","child","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","order","setOrder","items","prevItems","setPrevItems","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","to","next","arrayMove","onReorder","childArray","Children","children","rows","ordered","id","activeRow","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","className","DragOverlay","renderDragOverlay","SortableListItem","useSortable","setNodeRef","node","ref","CSS","transform","isDragging","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <button\n          type=\"button\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        >\n          <Icon name=\"grip-vertical\" />\n        </button>\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Icon","isItem","isValidElement","child","SortableList","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","order","setOrder","items","prevItems","setPrevItems","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleStart","useCallback","event","handleEnd","over","active","from","to","next","arrayMove","onReorder","childArray","Children","children","rows","ordered","id","activeRow","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","className","DragOverlay","renderDragOverlay","SortableListItem","useSortable","setNodeRef","node","ref","CSS","transform","isDragging","Button","label","attributes","listeners","action"],"sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface SortableListProps extends Omit<HTMLAttributes<HTMLUListElement>, \"onDragEnd\"> {\n  /** Item ids in render order. */\n  items: string[];\n  /** Fired with the whole list in its new order. Apply it to your own state. */\n  onReorder?: (items: string[]) => void;\n  /** Rendered inside the drag overlay while a row is in the air. Defaults to the row's content. */\n  renderDragOverlay?: (id: string) => ReactNode;\n  children?: ReactNode;\n}\n\ntype ItemElement = ReactElement<SortableListItemProps>;\n\nfunction isItem(child: ReactNode): child is ItemElement {\n  return isValidElement<SortableListItemProps>(child) && typeof child.props.id === \"string\";\n}\n\n/**\n * A single vertical list you can re-order — the board's mechanics without the\n * lanes. Each row carries a grip on the left. The list keeps the dropped order\n * itself, so it works on its own; pass `onReorder` to mirror it into your data.\n * A new `items` value from the parent always wins.\n */\nexport const SortableList = forwardRef<HTMLUListElement, SortableListProps>(\n  function SortableList({ items, onReorder, renderDragOverlay, className, children, ...rest }, ref) {\n    const dndId = useId();\n    const [activeId, setActiveId] = useState<string | null>(null);\n    const [order, setOrder] = useState(items);\n    const [prevItems, setPrevItems] = useState(items);\n    if (items !== prevItems && items.join(\"\\u0000\") !== prevItems.join(\"\\u0000\")) {\n      setPrevItems(items);\n      setOrder(items);\n    }\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n    );\n\n    const handleStart = useCallback((event: DragStartEvent) => {\n      setActiveId(String(event.active.id));\n    }, []);\n\n    const handleEnd = useCallback(\n      (event: DragEndEvent) => {\n        setActiveId(null);\n        const { active, over } = event;\n        if (!over || active.id === over.id) return;\n        const from = order.indexOf(String(active.id));\n        const to = order.indexOf(String(over.id));\n        if (from < 0 || to < 0) return;\n        const next = arrayMove(order, from, to);\n        setOrder(next);\n        onReorder?.(next);\n      },\n      [order, onReorder],\n    );\n\n    // Rows follow the list's own order; anything that isn't a row keeps its place at the end.\n    const childArray = Children.toArray(children);\n    const rows = new Map(childArray.filter(isItem).map((child) => [child.props.id, child]));\n    const ordered = [\n      ...order.flatMap((id) => rows.get(id) ?? []),\n      ...childArray.filter((child) => !isItem(child) || !order.includes(child.props.id)),\n    ];\n    const activeRow = activeId ? rows.get(activeId) : undefined;\n\n    return (\n      <DndContext\n        id={`ds-sortable-list-${dndId}`}\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        modifiers={[restrictToVerticalAxis]}\n        onDragStart={handleStart}\n        onDragEnd={handleEnd}\n        onDragCancel={() => setActiveId(null)}\n      >\n        <SortableContext items={order} strategy={verticalListSortingStrategy}>\n          <ul\n            ref={ref}\n            className={[\"ds-sortable-list\", className].filter(Boolean).join(\" \")}\n            {...rest}\n          >\n            {ordered}\n          </ul>\n        </SortableContext>\n        <DragOverlay>\n          {activeId ? (\n            <div className=\"ds-sortable-item\" data-overlay>\n              <span className=\"ds-sortable-item__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-sortable-item__content\">\n                {renderDragOverlay ? renderDragOverlay(activeId) : activeRow?.props.children}\n              </div>\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  },\n);\n\nexport interface SortableListItemProps extends HTMLAttributes<HTMLLIElement> {\n  id: string;\n  /** Accessible name announced when the row is picked up. */\n  label?: string;\n  /** A control at the end of the row, e.g. a menu or a delete button. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/** One row of a `SortableList`. The grip on the left is the only handle. */\nexport const SortableListItem = forwardRef<HTMLLIElement, SortableListItemProps>(\n  function SortableListItem({ id, label, action, className, children, ...rest }, ref) {\n    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n      id,\n    });\n\n    return (\n      <li\n        ref={(node) => {\n          setNodeRef(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-sortable-item\", className].filter(Boolean).join(\" \")}\n        data-dragging={isDragging || undefined}\n        {...rest}\n      >\n        <Button\n          variant=\"simple\"\n          size=\"sm\"\n          isIconOnly\n          iconStart=\"grip-vertical\"\n          className=\"ds-sortable-item__handle\"\n          aria-label={label ? `Move ${label}` : \"Move item\"}\n          {...attributes}\n          {...listeners}\n        />\n        <div className=\"ds-sortable-item__content\">{children}</div>\n        {action && <div className=\"ds-sortable-item__action\">{action}</div>}\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/SortableList/style.css

@@ -35,25 +35,19 @@
   }
 
   .ds-sortable-item__handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    padding: 0;
-    background: none;
-    color: var(--color-text-muted);
+    flex: none;
     cursor: grab;
     touch-action: none;
   }
 
-  .ds-sortable-item__handle:hover {
-    color: var(--color-text);
-  }
-
-  .ds-sortable-item__handle:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
+  /* The drag overlay's grip is a picture of the handle, not a second control. */
+  span.ds-sortable-item__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--field-height-sm);
+    block-size: var(--field-height-sm);
+    color: var(--color-text-muted);
   }
 
   .ds-sortable-item[data-overlay] .ds-sortable-item__handle {

package/dist/components/Stepper/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}var i=(0,t.forwardRef)(function({steps:t,activeStep:i,size:a=`md`,label:o=`Progress`,onStepChange:s,className:c,...l},u){return(0,n.jsx)(`nav`,{ref:u,"aria-label":o,"data-size":a,className:[`ds-stepper`,c].filter(Boolean).join(` `),...l,children:(0,n.jsx)(`ol`,{className:`ds-stepper__list`,children:t.map((t,a)=>{let o=r(a,i),c=!!s&&o!==`upcoming`;return(0,n.jsxs)(`li`,{className:`ds-stepper__step`,"data-status":o,"aria-current":o===`current`?`step`:void 0,children:[(0,n.jsxs)(`span`,{className:`ds-stepper__track`,"aria-hidden":`true`,children:[(0,n.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`start`}),(0,n.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`end`})]}),(0,n.jsxs)(c?`button`:`span`,{className:`ds-stepper__marker`,...c?{type:`button`,onClick:()=>s?.(a,t.id)}:{},children:[o===`complete`?(0,n.jsx)(e.t,{name:`check`,size:16,"aria-hidden":`true`}):a+1,(0,n.jsx)(`span`,{className:`ds-stepper__sr`,children:o})]}),(0,n.jsxs)(`span`,{className:`ds-stepper__text`,children:[(0,n.jsx)(`span`,{className:`ds-stepper__label`,children:t.label}),t.description&&(0,n.jsx)(`span`,{className:`ds-stepper__description`,children:t.description})]})]},t.id)})})})});exports.Stepper=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}var a=(0,n.forwardRef)(function({steps:a,activeStep:o,size:s=`md`,label:c=`Progress`,onStepChange:l,className:u,...d},f){let p=(0,n.useId)();return(0,r.jsx)(`nav`,{ref:f,"aria-label":c,"data-size":s,className:[`ds-stepper`,u].filter(Boolean).join(` `),...d,children:(0,r.jsx)(`ol`,{className:`ds-stepper__list`,children:a.map((n,a)=>{let s=i(a,o),c=!!l&&s!==`upcoming`,u=(0,r.jsxs)(r.Fragment,{children:[s===`complete`?(0,r.jsx)(e.t,{name:`check`,size:16,"aria-hidden":`true`}):a+1,(0,r.jsx)(`span`,{id:`${p}-${a}-status`,className:`ds-stepper__sr`,children:s})]});return(0,r.jsxs)(`li`,{className:`ds-stepper__step`,"data-status":s,"aria-current":s===`current`?`step`:void 0,children:[(0,r.jsxs)(`span`,{className:`ds-stepper__track`,"aria-hidden":`true`,children:[(0,r.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`start`}),(0,r.jsx)(`span`,{className:`ds-stepper__connector`,"data-side":`end`})]}),c?(0,r.jsx)(t.Button,{className:`ds-stepper__marker`,variant:s===`complete`?`primary`:`active`,size:`sm`,isIconOnly:!0,"aria-labelledby":`${p}-${a}-label`,"aria-describedby":`${p}-${a}-status`,onClick:()=>l?.(a,n.id),children:u}):(0,r.jsx)(`span`,{className:`ds-stepper__marker`,children:u}),(0,r.jsxs)(`span`,{className:`ds-stepper__text`,children:[(0,r.jsx)(`span`,{id:`${p}-${a}-label`,className:`ds-stepper__label`,children:n.label}),n.description&&(0,r.jsx)(`span`,{className:`ds-stepper__description`,children:n.description})]})]},n.id)})})})});exports.Stepper=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Stepper/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","statusOf","index","activeStep","Stepper","rest","label","size","className","steps","status","interactive","onStepChange","step"],"sources":["../../../src/components/Stepper/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport type StepperSize = \"sm\" | \"md\";\nexport type StepStatus = \"complete\" | \"current\" | \"upcoming\";\n\nexport interface Step {\n  /** Stable key, and the value reported by `onStepChange`. */\n  id: string;\n  /** The step in the user's words — sentence case. */\n  label: ReactNode;\n  /** One line on what happens here. */\n  description?: ReactNode;\n}\n\nexport interface StepperProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onChange\" | \"children\"> {\n  /** The ordered steps. Three or more spread evenly across the full width. */\n  steps: Step[];\n  /** Index of the step being worked on. Everything before it reads as complete. */\n  activeStep: number;\n  /** Marker scale. `sm` for a toolbar band, `md` for a page header. */\n  size?: StepperSize;\n  /** Accessible name for the progress bar. */\n  label?: string;\n  /**\n   * Makes completed steps (and the current one) navigable. Omit for a\n   * read-only progress indicator.\n   */\n  onStepChange?: (index: number, id: string) => void;\n}\n\nfunction statusOf(index: number, activeStep: number): StepStatus {\n  if (index < activeStep) return \"complete\";\n  if (index === activeStep) return \"current\";\n  return \"upcoming\";\n}\n\n/**\n * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many\n * there are, so the last marker always lands on the trailing edge.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(function Stepper(\n  { steps, activeStep, size = \"md\", label = \"Progress\", onStepChange, className, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      data-size={size}\n      className={[\"ds-stepper\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ol className=\"ds-stepper__list\">\n        {steps.map((step, index) => {\n          const status = statusOf(index, activeStep);\n          const interactive = Boolean(onStepChange) && status !== \"upcoming\";\n          const Marker = interactive ? \"button\" : \"span\";\n          return (\n            <li\n              key={step.id}\n              className=\"ds-stepper__step\"\n              data-status={status}\n              aria-current={status === \"current\" ? \"step\" : undefined}\n            >\n              <span className=\"ds-stepper__track\" aria-hidden=\"true\">\n                <span className=\"ds-stepper__connector\" data-side=\"start\" />\n                <span className=\"ds-stepper__connector\" data-side=\"end\" />\n              </span>\n              <Marker\n                className=\"ds-stepper__marker\"\n                {...(interactive\n                  ? {\n                      type: \"button\" as const,\n                      onClick: () => onStepChange?.(index, step.id),\n                    }\n                  : {})}\n              >\n                {status === \"complete\" ? (\n                  <Icon name=\"check\" size={16} aria-hidden=\"true\" />\n                ) : (\n                  index + 1\n                )}\n                <span className=\"ds-stepper__sr\">{status}</span>\n              </Marker>\n              <span className=\"ds-stepper__text\">\n                <span className=\"ds-stepper__label\">{step.label}</span>\n                {step.description && (\n                  <span className=\"ds-stepper__description\">{step.description}</span>\n                )}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n"],"mappings":"A,2KAiCA,SAASK,EAAS,EAAe,EAAgC,CAG/D,OAFIC,EAAQC,EAAmB,WAC3BD,IAAUC,EAAmB,UAC1B,UACT,CAMA,IAAaC,GAAA,EAAUR,EAAAA,WAAAA,CAAsC,SAC3D,CAAE,QAAO,aAAY,OAAO,KAAM,QAAQ,WAAY,eAAc,YAAW,GAAGS,GAClF,EACA,CACA,OACE,EAAAL,EAAA,IAAA,CAAC,MAAD,CACO,MACL,aAAYM,EACZ,YAAWC,EACX,UAAW,CAAC,aAAcC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC7D,GAAIH,EAEJ,UAAA,EAAAL,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,mBACX,SAAAS,EAAM,KAAK,EAAM,IAAU,CAC1B,IAAMC,EAAST,EAASC,EAAOC,CAAU,EACnCQ,EAAc,EAAQC,GAAiBF,IAAW,WAExD,OACE,EAAAV,EAAA,KAAA,CAAC,KAAD,CAEE,UAAU,mBACV,cAAaU,EACb,eAAcA,IAAW,UAAY,OAAS,IAAA,GAJhD,SAAA,EAME,EAAAV,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,oBAAoB,cAAY,OAAhD,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAwB,YAAU,OAAS,CAAA,GAC3D,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAwB,YAAU,KAAO,CAAA,CACrD,C,IACN,EAAAA,EAAA,KAAA,CAZWW,EAAc,SAAW,OAYpC,CACE,UAAU,qBACV,GAAKA,EACD,CACE,KAAM,SACN,YAAeC,IAAeV,EAAOW,EAAK,EAAE,CAC9C,EACA,CAAC,EAPP,SAAA,CASGH,IAAW,YACV,EAAAV,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAK,QAAQ,KAAM,GAAI,cAAY,MAAQ,CAAA,EAEjDK,EAAQ,GAEV,EAAAF,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iBAAkB,SAAAU,CAAa,CAAA,CACzC,C,IACR,EAAAV,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,mBAAhB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oBAAqB,SAAAa,EAAK,KAAY,CAAA,EACrDA,EAAK,cACJ,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,0BAA2B,SAAAa,EAAK,WAAkB,CAAA,CAEhE,C,EACJ,CA/BG,EAAAA,EAAK,EA+BR,CAER,CAAC,CACC,CAAA,CACD,CAAA,CAET,CAAC,E"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useId","_Fragment","Icon","Button","require_Icon","require_components_Button_index","react","react_jsx_runtime","statusOf","index","activeStep","Stepper","rest","id","label","size","className","steps","status","interactive","onStepChange","marker","step"],"sources":["../../../src/components/Stepper/index.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nexport type StepperSize = \"sm\" | \"md\";\nexport type StepStatus = \"complete\" | \"current\" | \"upcoming\";\n\nexport interface Step {\n  /** Stable key, and the value reported by `onStepChange`. */\n  id: string;\n  /** The step in the user's words — sentence case. */\n  label: ReactNode;\n  /** One line on what happens here. */\n  description?: ReactNode;\n}\n\nexport interface StepperProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onChange\" | \"children\"> {\n  /** The ordered steps. Three or more spread evenly across the full width. */\n  steps: Step[];\n  /** Index of the step being worked on. Everything before it reads as complete. */\n  activeStep: number;\n  /** Marker scale. `sm` for a toolbar band, `md` for a page header. */\n  size?: StepperSize;\n  /** Accessible name for the progress bar. */\n  label?: string;\n  /**\n   * Makes completed steps (and the current one) navigable. Omit for a\n   * read-only progress indicator.\n   */\n  onStepChange?: (index: number, id: string) => void;\n}\n\nfunction statusOf(index: number, activeStep: number): StepStatus {\n  if (index < activeStep) return \"complete\";\n  if (index === activeStep) return \"current\";\n  return \"upcoming\";\n}\n\n/**\n * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many\n * there are, so the last marker always lands on the trailing edge.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(function Stepper(\n  { steps, activeStep, size = \"md\", label = \"Progress\", onStepChange, className, ...rest },\n  ref,\n) {\n  const id = useId();\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      data-size={size}\n      className={[\"ds-stepper\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ol className=\"ds-stepper__list\">\n        {steps.map((step, index) => {\n          const status = statusOf(index, activeStep);\n          const interactive = Boolean(onStepChange) && status !== \"upcoming\";\n          const marker = <>\n            {status === \"complete\" ? <Icon name=\"check\" size={16} aria-hidden=\"true\" /> : index + 1}\n            <span id={`${id}-${index}-status`} className=\"ds-stepper__sr\">{status}</span>\n          </>;\n          return (\n            <li\n              key={step.id}\n              className=\"ds-stepper__step\"\n              data-status={status}\n              aria-current={status === \"current\" ? \"step\" : undefined}\n            >\n              <span className=\"ds-stepper__track\" aria-hidden=\"true\">\n                <span className=\"ds-stepper__connector\" data-side=\"start\" />\n                <span className=\"ds-stepper__connector\" data-side=\"end\" />\n              </span>\n              {interactive ? <Button\n                className=\"ds-stepper__marker\"\n                variant={status === \"complete\" ? \"primary\" : \"active\"}\n                size=\"sm\"\n                isIconOnly\n                aria-labelledby={`${id}-${index}-label`}\n                aria-describedby={`${id}-${index}-status`}\n                onClick={() => onStepChange?.(index, step.id)}\n              >{marker}</Button> : <span className=\"ds-stepper__marker\">{marker}</span>}\n              <span className=\"ds-stepper__text\">\n                <span id={`${id}-${index}-label`} className=\"ds-stepper__label\">{step.label}</span>\n                {step.description && (\n                  <span className=\"ds-stepper__description\">{step.description}</span>\n                )}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n"],"mappings":"A,4MAkCA,SAASS,EAAS,EAAe,EAAgC,CAG/D,OAFIC,EAAQC,EAAmB,WAC3BD,IAAUC,EAAmB,UAC1B,UACT,CAMA,IAAaC,GAAA,EAAUZ,EAAAA,WAAAA,CAAsC,SAC3D,CAAE,QAAO,aAAY,OAAO,KAAM,QAAQ,WAAY,eAAc,YAAW,GAAGa,GAClF,EACA,CACA,IAAMC,GAAA,EAAKb,EAAAA,MAAAA,CAAM,EACjB,OACE,EAAAO,EAAA,IAAA,CAAC,MAAD,CACO,MACL,aAAYO,EACZ,YAAWC,EACX,UAAW,CAAC,aAAcC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC7D,GAAIJ,EAEJ,UAAA,EAAAL,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,mBACX,SAAAU,EAAM,KAAK,EAAM,IAAU,CAC1B,IAAMC,EAASV,EAASC,EAAOC,CAAU,EACnCS,EAAc,EAAQC,GAAiBF,IAAW,WAClDG,GAAS,EAAAd,EAAA,KAAA,CAAAN,EAAAA,SAAA,CAAA,SAAA,CACZiB,IAAW,YAAa,EAAAX,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAM,KAAK,QAAQ,KAAM,GAAI,cAAY,MAAQ,CAAA,EAAIO,EAAQ,GACtF,EAAAF,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAGM,EAAG,GAAGJ,EAAM,SAAU,UAAU,iBAAkB,SAAAS,CAAa,CAAA,CAC5E,CAAA,CAAA,EACF,OACE,EAAAX,EAAA,KAAA,CAAC,KAAD,CAEE,UAAU,mBACV,cAAaW,EACb,eAAcA,IAAW,UAAY,OAAS,IAAA,GAJhD,SAAA,EAME,EAAAX,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,oBAAoB,cAAY,OAAhD,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAwB,YAAU,OAAS,CAAA,GAC3D,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAwB,YAAU,KAAO,CAAA,CACrD,C,GACLY,GAAc,EAAAZ,EAAA,IAAA,CAACJ,EAAAA,OAAD,CACb,UAAU,qBACV,QAASe,IAAW,WAAa,UAAY,SAC7C,KAAK,KACL,WAAA,GACA,kBAAiB,GAAGL,EAAG,GAAGJ,EAAM,QAChC,mBAAkB,GAAGI,EAAG,GAAGJ,EAAM,SACjC,YAAeW,IAAeX,EAAOa,EAAK,EAAE,EAC5C,SAAAD,CAAe,CAAA,GAAI,EAAAd,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAsB,SAAAc,CAAa,CAAA,GACxE,EAAAd,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,mBAAhB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAGM,EAAG,GAAGJ,EAAM,QAAS,UAAU,oBAAqB,SAAAa,EAAK,KAAY,CAAA,EACjFA,EAAK,cACJ,EAAAf,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,0BAA2B,SAAAe,EAAK,WAAkB,CAAA,CAEhE,C,EACJ,CAxBG,EAAAA,EAAK,EAwBR,CAER,CAAC,CACC,CAAA,CACD,CAAA,CAET,CAAC,E"}

package/dist/components/Stepper/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,IAAI;IACnB,4DAA4D;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAClE,4EAA4E;IAC5E,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAQD;;;GAGG;AACH,eAAO,MAAM,OAAO,sGAwDlB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,IAAI;IACnB,4DAA4D;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAClE,4EAA4E;IAC5E,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAQD;;;GAGG;AACH,eAAO,MAAM,OAAO,sGAqDlB,CAAC"}

package/dist/components/Stepper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,IAAI;IACnB,4DAA4D;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAClE,4EAA4E;IAC5E,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAQD;;;GAGG;AACH,eAAO,MAAM,OAAO,sGAwDlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,IAAI;IACnB,4DAA4D;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAClE,4EAA4E;IAC5E,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAQD;;;GAGG;AACH,eAAO,MAAM,OAAO,sGAqDlB,CAAC"}

package/dist/components/Stepper/index.js

@@ -1,69 +1,78 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
-import { forwardRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Button as t } from "../Button/index.js";
+import { forwardRef as n, useId as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Stepper/index.tsx
-function i(e, t) {
+function s(e, t) {
 	return e < t ? "complete" : e === t ? "current" : "upcoming";
 }
-var a = t(function({ steps: t, activeStep: a, size: o = "md", label: s = "Progress", onStepChange: c, className: l, ...u }, d) {
-	return /* @__PURE__ */ n("nav", {
-		ref: d,
-		"aria-label": s,
-		"data-size": o,
-		className: ["ds-stepper", l].filter(Boolean).join(" "),
-		...u,
-		children: /* @__PURE__ */ n("ol", {
+var c = n(function({ steps: n, activeStep: c, size: l = "md", label: u = "Progress", onStepChange: d, className: f, ...p }, m) {
+	let h = r();
+	return /* @__PURE__ */ a("nav", {
+		ref: m,
+		"aria-label": u,
+		"data-size": l,
+		className: ["ds-stepper", f].filter(Boolean).join(" "),
+		...p,
+		children: /* @__PURE__ */ a("ol", {
 			className: "ds-stepper__list",
-			children: t.map((t, o) => {
-				let s = i(o, a), l = !!c && s !== "upcoming";
-				return /* @__PURE__ */ r("li", {
+			children: n.map((n, r) => {
+				let l = s(r, c), u = !!d && l !== "upcoming", f = /* @__PURE__ */ o(i, { children: [l === "complete" ? /* @__PURE__ */ a(e, {
+					name: "check",
+					size: 16,
+					"aria-hidden": "true"
+				}) : r + 1, /* @__PURE__ */ a("span", {
+					id: `${h}-${r}-status`,
+					className: "ds-stepper__sr",
+					children: l
+				})] });
+				return /* @__PURE__ */ o("li", {
 					className: "ds-stepper__step",
-					"data-status": s,
-					"aria-current": s === "current" ? "step" : void 0,
+					"data-status": l,
+					"aria-current": l === "current" ? "step" : void 0,
 					children: [
-						/* @__PURE__ */ r("span", {
+						/* @__PURE__ */ o("span", {
 							className: "ds-stepper__track",
 							"aria-hidden": "true",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ a("span", {
 								className: "ds-stepper__connector",
 								"data-side": "start"
-							}), /* @__PURE__ */ n("span", {
+							}), /* @__PURE__ */ a("span", {
 								className: "ds-stepper__connector",
 								"data-side": "end"
 							})]
 						}),
-						/* @__PURE__ */ r(l ? "button" : "span", {
+						u ? /* @__PURE__ */ a(t, {
 							className: "ds-stepper__marker",
-							...l ? {
-								type: "button",
-								onClick: () => c?.(o, t.id)
-							} : {},
-							children: [s === "complete" ? /* @__PURE__ */ n(e, {
-								name: "check",
-								size: 16,
-								"aria-hidden": "true"
-							}) : o + 1, /* @__PURE__ */ n("span", {
-								className: "ds-stepper__sr",
-								children: s
-							})]
+							variant: l === "complete" ? "primary" : "active",
+							size: "sm",
+							isIconOnly: !0,
+							"aria-labelledby": `${h}-${r}-label`,
+							"aria-describedby": `${h}-${r}-status`,
+							onClick: () => d?.(r, n.id),
+							children: f
+						}) : /* @__PURE__ */ a("span", {
+							className: "ds-stepper__marker",
+							children: f
 						}),
-						/* @__PURE__ */ r("span", {
+						/* @__PURE__ */ o("span", {
 							className: "ds-stepper__text",
-							children: [/* @__PURE__ */ n("span", {
+							children: [/* @__PURE__ */ a("span", {
+								id: `${h}-${r}-label`,
 								className: "ds-stepper__label",
-								children: t.label
-							}), t.description && /* @__PURE__ */ n("span", {
+								children: n.label
+							}), n.description && /* @__PURE__ */ a("span", {
 								className: "ds-stepper__description",
-								children: t.description
+								children: n.description
 							})]
 						})
 					]
-				}, t.id);
+				}, n.id);
 			})
 		})
 	});
 });
 //#endregion
-export { a as Stepper };
+export { c as Stepper };
 
 //# sourceMappingURL=index.js.map