@namroodinc/liquid-editorial 0.1.6 → 0.1.7

package/dist/components/Board/index.js

@@ -1,11 +1,12 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
-import { createContext as t, forwardRef as n, useCallback as r, useContext as i, useId as a, useMemo 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, MeasuringStrategy as p, PointerSensor as m, closestCorners as h, pointerWithin as g, useDroppable as _, useSensor as v, useSensors as y } from "@dnd-kit/core";
-import { SortableContext as b, horizontalListSortingStrategy as x, sortableKeyboardCoordinates as S, useSortable as C, verticalListSortingStrategy as w } from "@dnd-kit/sortable";
-import { CSS as T } from "@dnd-kit/utilities";
+import { Button as t } from "../Button/index.js";
+import { createContext as n, forwardRef as r, useCallback as i, useContext as a, useId as o, useMemo as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { DndContext as d, DragOverlay as f, KeyboardSensor as p, MeasuringStrategy as m, PointerSensor as h, closestCorners as g, pointerWithin as _, useDroppable as v, useSensor as y, useSensors as b } from "@dnd-kit/core";
+import { SortableContext as x, horizontalListSortingStrategy as S, sortableKeyboardCoordinates as C, useSortable as w, verticalListSortingStrategy as T } from "@dnd-kit/sortable";
+import { CSS as E } from "@dnd-kit/utilities";
 //#region src/components/Board/index.tsx
-var E = (e, t) => {
+var D = (e, t) => {
 	let { currentCoordinates: n, context: r } = t;
 	if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
 		let t = r.droppableContainers.getEnabled().filter((e) => e.data.current?.type === "column-body").sort((e, t) => (e.rect.current?.left ?? 0) - (t.rect.current?.left ?? 0)), i = r.active?.rect.current.translated;
@@ -16,8 +17,8 @@ var E = (e, t) => {
 			y: n.y
 		}) : void 0;
 	}
-	return S(e, t);
-}, D = (e) => {
+	return C(e, t);
+}, O = (e) => {
 	let t = e.active.data.current?.type === "column", n = e.droppableContainers.filter((e) => {
 		let n = e.data.current?.type;
 		return t ? n === "column" : n !== "column";
@@ -25,21 +26,21 @@ var E = (e, t) => {
 		...e,
 		droppableContainers: n
 	};
-	if (t) return h(r);
-	let i = g(r);
+	if (t) return g(r);
+	let i = _(r);
 	if (i.length > 0) {
 		let e = (e) => n.find((t) => t.id === e)?.data.current?.type === "card" ? 0 : 1;
 		return [...i].sort((t, n) => e(t.id) - e(n.id));
 	}
-	return h(r);
-}, O = t({
+	return g(r);
+}, k = n({
 	activeId: null,
 	activeType: null,
 	overColumnId: null
-}), k = n(function({ columnIds: t, onMove: n, onColumnMove: i, renderDragOverlay: h, renderColumnDragOverlay: g, className: _, children: S, ...C }, w) {
-	let T = a(), [k, A] = s(null), [j, M] = s(null), [N, P] = s(null), F = y(v(m, { activationConstraint: { distance: 4 } }), v(f, { coordinateGetter: E })), I = r((e) => {
+}), A = r(function({ columnIds: t, onMove: n, onColumnMove: r, renderDragOverlay: a, renderColumnDragOverlay: g, className: _, children: v, ...C }, w) {
+	let T = o(), [E, A] = c(null), [j, M] = c(null), [N, P] = c(null), F = b(y(h, { activationConstraint: { distance: 4 } }), y(p, { coordinateGetter: D })), I = i((e) => {
 		A(String(e.active.id)), M(e.active.data.current?.type === "column" ? "column" : "card");
-	}, []), L = r((e) => {
+	}, []), L = i((e) => {
 		let t = e.over;
 		if (!t) {
 			P(null);
@@ -47,181 +48,184 @@ var E = (e, t) => {
 		}
 		let n = t.data.current ?? {}, r = n.type === "column" ? String(t.id) : String(n.columnId ?? "");
 		P(r || null);
-	}, []), R = r(() => {
+	}, []), R = i(() => {
 		A(null), M(null), P(null);
-	}, []), z = r((e) => {
-		let { active: r, over: a } = e;
+	}, []), z = i((e) => {
+		let { active: i, over: a } = e;
 		if (R(), !a) return;
-		let o = r.data.current ?? {}, s = a.data.current ?? {};
+		let o = i.data.current ?? {}, s = a.data.current ?? {};
 		if (o.type === "column") {
 			let e = t ?? [], n = s.type === "column" ? String(a.id) : String(s.columnId ?? ""), o = e.indexOf(n);
-			if (o < 0 || n === String(r.id)) return;
-			i?.({
-				columnId: String(r.id),
+			if (o < 0 || n === String(i.id)) return;
+			r?.({
+				columnId: String(i.id),
 				toIndex: o
 			});
 			return;
 		}
 		let c = String(o.columnId ?? ""), l = "", u = 0;
-		s.type === "card" ? (l = String(s.columnId ?? ""), u = s.sortable?.index ?? 0) : (l = String(s.columnId ?? a.id), u = (s.items ?? []).length), l && (c !== l || String(r.id) !== String(a.id)) && n?.({
-			cardId: String(r.id),
+		s.type === "card" ? (l = String(s.columnId ?? ""), u = s.sortable?.index ?? 0) : (l = String(s.columnId ?? a.id), u = (s.items ?? []).length), l && (c !== l || String(i.id) !== String(a.id)) && n?.({
+			cardId: String(i.id),
 			fromColumnId: c,
 			toColumnId: l,
 			toIndex: u
 		});
 	}, [
 		t,
-		i,
+		r,
 		n,
 		R
-	]), B = o(() => ({
-		activeId: k,
+	]), B = s(() => ({
+		activeId: E,
 		activeType: j,
 		overColumnId: N
 	}), [
-		k,
+		E,
 		j,
 		N
-	]), V = /* @__PURE__ */ c("div", {
+	]), V = /* @__PURE__ */ l("div", {
 		ref: w,
 		className: ["ds-board", _].filter(Boolean).join(" "),
 		...C,
-		children: S
+		children: v
 	});
-	return /* @__PURE__ */ c(O.Provider, {
+	return /* @__PURE__ */ l(k.Provider, {
 		value: B,
-		children: /* @__PURE__ */ l(u, {
+		children: /* @__PURE__ */ u(d, {
 			id: `ds-board-${T}`,
 			sensors: F,
-			collisionDetection: D,
-			measuring: { droppable: { strategy: p.Always } },
+			collisionDetection: O,
+			measuring: { droppable: { strategy: m.Always } },
 			onDragStart: I,
 			onDragOver: L,
 			onDragEnd: z,
 			onDragCancel: R,
-			children: [t ? /* @__PURE__ */ c(b, {
+			children: [t ? /* @__PURE__ */ l(x, {
 				items: t,
-				strategy: x,
+				strategy: S,
 				children: V
-			}) : V, /* @__PURE__ */ l(d, { children: [k && j === "card" ? /* @__PURE__ */ l("div", {
+			}) : V, /* @__PURE__ */ u(f, { children: [E && j === "card" ? /* @__PURE__ */ u("div", {
 				className: "ds-board-card",
 				"data-overlay": !0,
-				children: [/* @__PURE__ */ c("span", {
+				children: [/* @__PURE__ */ l("span", {
 					className: "ds-board-card__handle",
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ c(e, { name: "grip-vertical" })
-				}), /* @__PURE__ */ c("div", {
+					children: /* @__PURE__ */ l(e, { name: "grip-vertical" })
+				}), /* @__PURE__ */ l("div", {
 					className: "ds-board-card__content",
-					children: h?.(k)
+					children: a?.(E)
 				})]
-			}) : null, k && j === "column" ? /* @__PURE__ */ c("div", {
+			}) : null, E && j === "column" ? /* @__PURE__ */ l("div", {
 				className: "ds-board-column",
 				"data-overlay": !0,
-				children: g?.(k)
+				children: g?.(E)
 			}) : null] })]
 		})
 	});
-}), A = n(function({ id: t, title: n, itemIds: r, count: a, action: o, isDraggable: s = !0, className: u, children: d, ...f }, p) {
-	let { activeType: m, overColumnId: h } = i(O), { setNodeRef: g } = _({
-		id: `${t}::body`,
+}), j = r(function({ id: e, title: n, itemIds: r, count: i, action: o, isDraggable: s = !0, className: c, children: d, ...f }, p) {
+	let { activeType: m, overColumnId: h } = a(k), { setNodeRef: g } = v({
+		id: `${e}::body`,
 		data: {
 			type: "column-body",
-			columnId: t,
+			columnId: e,
 			items: r
 		}
-	}), { attributes: v, listeners: y, setNodeRef: x, transform: S, transition: E, isDragging: D } = C({
-		id: t,
+	}), { attributes: _, listeners: y, setNodeRef: b, transform: S, transition: C, isDragging: D } = w({
+		id: e,
 		disabled: !s,
 		data: {
 			type: "column",
-			columnId: t,
+			columnId: e,
 			items: r
 		}
 	});
-	return /* @__PURE__ */ l("section", {
+	return /* @__PURE__ */ u("section", {
 		ref: (e) => {
-			x(e), typeof p == "function" ? p(e) : p && (p.current = e);
+			b(e), typeof p == "function" ? p(e) : p && (p.current = e);
 		},
 		style: {
-			transform: T.Translate.toString(S),
-			transition: E
+			transform: E.Translate.toString(S),
+			transition: C
 		},
-		className: ["ds-board-column", u].filter(Boolean).join(" "),
-		"data-over": m === "card" && h === t || void 0,
+		className: ["ds-board-column", c].filter(Boolean).join(" "),
+		"data-over": m === "card" && h === e || void 0,
 		"data-dragging": D || void 0,
 		"aria-label": n,
 		...f,
 		children: [
-			s && /* @__PURE__ */ c("button", {
-				type: "button",
+			s && /* @__PURE__ */ l(t, {
+				variant: "simple",
+				size: "sm",
+				iconStart: "grip-horizontal",
 				className: "ds-board-column__grip",
 				"aria-label": `Reorder ${n}`,
-				...v,
-				...y,
-				children: /* @__PURE__ */ c(e, { name: "grip-horizontal" })
+				..._,
+				...y
 			}),
-			/* @__PURE__ */ l("header", {
+			/* @__PURE__ */ u("header", {
 				className: "ds-board-column__head",
 				children: [
-					/* @__PURE__ */ c("span", {
+					/* @__PURE__ */ l("span", {
 						className: "ds-board-column__title",
 						children: n
 					}),
-					/* @__PURE__ */ c("span", {
+					/* @__PURE__ */ l("span", {
 						className: "ds-board-column__count",
-						children: a ?? r.length
+						children: i ?? r.length
 					}),
-					o && /* @__PURE__ */ c("span", {
+					o && /* @__PURE__ */ l("span", {
 						className: "ds-board-column__action",
 						children: o
 					})
 				]
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", {
 				ref: g,
 				className: "ds-board-column__body",
-				children: /* @__PURE__ */ c(b, {
+				children: /* @__PURE__ */ l(x, {
 					items: r,
-					strategy: w,
+					strategy: T,
 					children: d
 				})
 			})
 		]
 	});
-}), j = n(function({ id: t, columnId: n, label: r, className: a, children: o, ...s }, u) {
-	let { attributes: d, listeners: f, setNodeRef: p, transform: m, transition: h, isDragging: g } = C({
-		id: t,
+}), M = r(function({ id: e, columnId: n, label: r, className: i, children: o, ...s }, c) {
+	let { attributes: d, listeners: f, setNodeRef: p, transform: m, transition: h, isDragging: g } = w({
+		id: e,
 		data: {
 			type: "card",
 			columnId: n
 		}
-	}), { activeId: _ } = i(O);
-	return /* @__PURE__ */ l("div", {
+	}), { activeId: _ } = a(k);
+	return /* @__PURE__ */ u("div", {
 		ref: (e) => {
-			p(e), typeof u == "function" ? u(e) : u && (u.current = e);
+			p(e), typeof c == "function" ? c(e) : c && (c.current = e);
 		},
 		style: {
-			transform: T.Translate.toString(m),
+			transform: E.Translate.toString(m),
 			transition: h
 		},
-		className: ["ds-board-card", a].filter(Boolean).join(" "),
+		className: ["ds-board-card", i].filter(Boolean).join(" "),
 		"data-dragging": g || void 0,
-		"data-idle": _ && _ !== t ? "" : void 0,
+		"data-idle": _ && _ !== e ? "" : void 0,
 		...s,
-		children: [/* @__PURE__ */ c("button", {
-			type: "button",
+		children: [/* @__PURE__ */ l(t, {
+			variant: "simple",
+			size: "sm",
+			isIconOnly: !0,
+			iconStart: "grip-vertical",
 			className: "ds-board-card__handle",
 			"aria-label": r ? `Move ${r}` : "Move card",
 			...d,
-			...f,
-			children: /* @__PURE__ */ c(e, { name: "grip-vertical" })
-		}), /* @__PURE__ */ c("div", {
+			...f
+		}), /* @__PURE__ */ l("div", {
 			className: "ds-board-card__content",
 			children: o
 		})]
 	});
 });
 //#endregion
-export { k as Board, j as BoardCard, A as BoardColumn };
+export { A as Board, M as BoardCard, j as BoardColumn };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","boardCoordinateGetter","args","event","containers","context","c","\"type\"","a","b","activeRect","rect","currentCoordinates","sortableKeyboardCoordinates","boardCollisionDetection","isColumn","type","container","scoped","closestCorners","within","pointerWithin","rank","id","BoardContext","createContext","Board","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","activeType","setActiveType","overColumnId","setOverColumnId","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleStart","useCallback","handleOver","over","overData","columnId","\"columnId\"","reset","handleEnd","activeData","active","ids","columnIds","toIndex","fromColumnId","toColumnId","\"sortable\"","\"items\"","onMove","onColumnMove","value","useMemo","board","className","DndContext","MeasuringStrategy","SortableContext","horizontalListSortingStrategy","DragOverlay","renderDragOverlay","renderColumnDragOverlay","BoardColumn","useContext","setBodyRef","useDroppable","itemIds","setColumnRef","useSortable","isDraggable","node","ref","CSS","transform","isDragging","title","attributes","listeners","count","action","verticalListSortingStrategy","BoardCard","setNodeRef","label"],"sources":["../../../src/components/Board/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCorners,\n  pointerWithin,\n  MeasuringStrategy,\n\n  useDroppable,\n  useSensor,\n  useSensors,\n  type CollisionDetection,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport type { KeyboardCoordinateGetter } from \"@dnd-kit/core\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface BoardMove {\n  cardId: string;\n  fromColumnId: string;\n  toColumnId: string;\n  /** Index the card lands on inside the destination column. */\n  toIndex: number;\n}\n\nexport interface BoardColumnMove {\n  columnId: string;\n  toIndex: number;\n}\n\ninterface BoardContextValue {\n  activeId: string | null;\n  activeType: \"card\" | \"column\" | null;\n  /** The lane the pointer is currently over, whatever it is actually over. */\n  overColumnId: string | null;\n}\n\n/**\n * Arrow up/down sorts inside a lane; left/right jumps lanes, which the stock\n * sortable getter does not do.\n */\nconst boardCoordinateGetter: KeyboardCoordinateGetter = (event, args) => {\n  const { currentCoordinates, context } = args;\n  if (event.code === \"ArrowLeft\" || event.code === \"ArrowRight\") {\n    const containers = context.droppableContainers\n      .getEnabled()\n      .filter((c) => c.data.current?.[\"type\"] === \"column-body\")\n      .sort((a, b) => (a.rect.current?.left ?? 0) - (b.rect.current?.left ?? 0));\n    const activeRect = context.active?.rect.current.translated;\n    if (!activeRect) return undefined;\n    const index = containers.findIndex(\n      (c) => (c.rect.current?.left ?? 0) <= activeRect.left + 1 &&\n        (c.rect.current?.right ?? 0) >= activeRect.left - 1,\n    );\n    const next = containers[index + (event.code === \"ArrowRight\" ? 1 : -1)];\n    const rect = next?.rect.current;\n    if (!rect) return undefined;\n    event.preventDefault();\n    return { x: rect.left + rect.width / 2 - activeRect.width / 2, y: currentCoordinates.y };\n  }\n  return sortableKeyboardCoordinates(event, args);\n};\n\n/**\n * A lane's body sits inside the lane's frame, so a raw corner-distance\n * strategy lets the body steal the hit from the lane itself — most visibly at\n * the board ends, where the last lane then never shifts aside to open the\n * drop gap. Resolve by what is being dragged: a column only ever hits other\n * columns; a card hits the card under the pointer first, then the lane body\n * under it, then whatever is nearest.\n */\nconst boardCollisionDetection: CollisionDetection = (args) => {\n  const isColumn = args.active.data.current?.[\"type\"] === \"column\";\n  const containers = args.droppableContainers.filter((container) => {\n    const type = container.data.current?.[\"type\"];\n    return isColumn ? type === \"column\" : type !== \"column\";\n  });\n  const scoped = { ...args, droppableContainers: containers };\n  if (isColumn) return closestCorners(scoped);\n  const within = pointerWithin(scoped);\n  if (within.length > 0) {\n    const rank = (id: (typeof within)[number][\"id\"]) =>\n      containers.find((c) => c.id === id)?.data.current?.[\"type\"] === \"card\" ? 0 : 1;\n    return [...within].sort((a, b) => rank(a.id) - rank(b.id));\n  }\n  return closestCorners(scoped);\n};\n\nconst BoardContext = createContext<BoardContextValue>({\n  activeId: null,\n  activeType: null,\n  overColumnId: null,\n});\n\nexport interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onDragEnd\"> {\n  /** Column ids in render order. Required for columns to be re-orderable. */\n  columnIds?: string[];\n  /** Fired once a card is dropped somewhere new. Apply it to your own state. */\n  onMove?: (move: BoardMove) => void;\n  /** Fired once a column is dropped in a new position. */\n  onColumnMove?: (move: BoardColumnMove) => void;\n  /** Rendered inside the drag overlay while a card is in the air. */\n  renderDragOverlay?: (cardId: string) => ReactNode;\n  /** Rendered inside the drag overlay while a column is in the air. */\n  renderColumnDragOverlay?: (columnId: string) => ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A column board with pointer and keyboard dragging. The board owns the drag\n * mechanics only — the card data stays yours; react to `onMove`.\n */\nexport const Board = forwardRef<HTMLDivElement, BoardProps>(function Board(\n  {\n    columnIds,\n    onMove,\n    onColumnMove,\n    renderDragOverlay,\n    renderColumnDragOverlay,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const dndId = useId();\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [activeType, setActiveType] = useState<\"card\" | \"column\" | null>(null);\n  const [overColumnId, setOverColumnId] = useState<string | null>(null);\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: boardCoordinateGetter }),\n  );\n\n  const handleStart = useCallback((event: DragStartEvent) => {\n    setActiveId(String(event.active.id));\n    setActiveType(event.active.data.current?.[\"type\"] === \"column\" ? \"column\" : \"card\");\n  }, []);\n\n  /* Cards land on cards as often as on empty space, so the lane a drag is over\n   * is always resolved back to a column id — one highlight, one meaning. */\n  const handleOver = useCallback((event: DragOverEvent) => {\n    const over = event.over;\n    if (!over) {\n      setOverColumnId(null);\n      return;\n    }\n    const overData = over.data.current ?? {};\n    const columnId =\n      overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n    setOverColumnId(columnId || null);\n  }, []);\n\n  const reset = useCallback(() => {\n    setActiveId(null);\n    setActiveType(null);\n    setOverColumnId(null);\n  }, []);\n\n  const handleEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n      reset();\n      if (!over) return;\n\n      const activeData = active.data.current ?? {};\n      const overData = over.data.current ?? {};\n\n      /* Columns reorder among themselves; a column never lands inside a lane. */\n      if (activeData[\"type\"] === \"column\") {\n        const ids = columnIds ?? [];\n        const overColumnId =\n          overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n        const toIndex = ids.indexOf(overColumnId);\n        if (toIndex < 0 || overColumnId === String(active.id)) return;\n        onColumnMove?.({ columnId: String(active.id), toIndex });\n        return;\n      }\n\n      const fromColumnId = String(activeData[\"columnId\"] ?? \"\");\n      let toColumnId = \"\";\n      let toIndex = 0;\n\n      if (overData[\"type\"] === \"card\") {\n        /* Dropped on a card — land exactly where that card sits, in any lane. */\n        toColumnId = String(overData[\"columnId\"] ?? \"\");\n        toIndex = (overData[\"sortable\"] as { index: number } | undefined)?.index ?? 0;\n      } else {\n        /* Dropped on empty lane space — land at the end. */\n        toColumnId = String(overData[\"columnId\"] ?? over.id);\n        toIndex = ((overData[\"items\"] as string[] | undefined) ?? []).length;\n      }\n\n      if (!toColumnId) return;\n      if (fromColumnId === toColumnId && String(active.id) === String(over.id)) return;\n      onMove?.({ cardId: String(active.id), fromColumnId, toColumnId, toIndex });\n    },\n    [columnIds, onColumnMove, onMove, reset],\n  );\n\n  const value = useMemo(\n    () => ({ activeId, activeType, overColumnId }),\n    [activeId, activeType, overColumnId],\n  );\n\n  const board = (\n    <div ref={ref} className={[\"ds-board\", className].filter(Boolean).join(\" \")} {...rest}>\n      {children}\n    </div>\n  );\n\n  return (\n    <BoardContext.Provider value={value}>\n      <DndContext\n        id={`ds-board-${dndId}`}\n        sensors={sensors}\n        collisionDetection={boardCollisionDetection}\n        /* Lanes scroll and change height mid-drag, so positions are re-read\n         * continuously — without this the shift animation misfires. */\n        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}\n\n        onDragStart={handleStart}\n        onDragOver={handleOver}\n        onDragEnd={handleEnd}\n        onDragCancel={reset}\n      >\n        {columnIds ? (\n          <SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>\n            {board}\n          </SortableContext>\n        ) : (\n          board\n        )}\n        <DragOverlay>\n          {activeId && activeType === \"card\" ? (\n            <div className=\"ds-board-card\" data-overlay>\n              <span className=\"ds-board-card__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-board-card__content\">{renderDragOverlay?.(activeId)}</div>\n            </div>\n          ) : null}\n          {activeId && activeType === \"column\" ? (\n            <div className=\"ds-board-column\" data-overlay>\n              {renderColumnDragOverlay?.(activeId)}\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    </BoardContext.Provider>\n  );\n});\n\nexport interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  title: string;\n  /** Card ids in render order — the sortable contract for this column. */\n  itemIds: string[];\n  /** Shown beside the title; defaults to the number of cards. */\n  count?: number;\n  /** A control in the column head, e.g. an add button or a menu. */\n  action?: ReactNode;\n  /** Set false to pin a lane in place. */\n  isDraggable?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * One lane of the board. Heavy frame, hairline head rule, scrolling body, and\n * a grip on top of the head that drags the whole lane sideways.\n */\nexport const BoardColumn = forwardRef<HTMLElement, BoardColumnProps>(\n  function BoardColumn(\n    { id, title, itemIds, count, action, isDraggable = true, className, children, ...rest },\n    ref,\n  ) {\n    const { activeType, overColumnId } = useContext(BoardContext);\n    const { setNodeRef: setBodyRef } = useDroppable({\n      id: `${id}::body`,\n      data: { type: \"column-body\", columnId: id, items: itemIds },\n    });\n    const {\n      attributes,\n      listeners,\n      setNodeRef: setColumnRef,\n      transform,\n      transition,\n      isDragging,\n    } = useSortable({\n      id,\n      disabled: !isDraggable,\n      data: { type: \"column\", columnId: id, items: itemIds },\n    });\n\n    return (\n      <section\n        ref={(node) => {\n          setColumnRef(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-board-column\", className].filter(Boolean).join(\" \")}\n        data-over={(activeType === \"card\" && overColumnId === id) || undefined}\n        data-dragging={isDragging || undefined}\n\n        aria-label={title}\n        {...rest}\n      >\n        {isDraggable && (\n          <button\n            type=\"button\"\n            className=\"ds-board-column__grip\"\n            aria-label={`Reorder ${title}`}\n            {...attributes}\n            {...listeners}\n          >\n            <Icon name=\"grip-horizontal\" />\n          </button>\n        )}\n        <header className=\"ds-board-column__head\">\n          <span className=\"ds-board-column__title\">{title}</span>\n          <span className=\"ds-board-column__count\">{count ?? itemIds.length}</span>\n          {action && <span className=\"ds-board-column__action\">{action}</span>}\n        </header>\n        <div ref={setBodyRef} className=\"ds-board-column__body\">\n          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>\n            {children}\n          </SortableContext>\n        </div>\n      </section>\n    );\n  },\n);\n\nexport interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  columnId: string;\n  /** Accessible name announced when the card is picked up. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * A draggable card. The grip on the left is the handle, so the card body can\n * hold links and buttons; the grip is a real button for keyboard users:\n * space to pick up, arrows to move, space to drop.\n */\nexport const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(function BoardCard(\n  { id, columnId, label, className, children, ...rest },\n  ref,\n) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =\n    useSortable({ id, data: { type: \"card\", columnId } });\n  const { activeId } = useContext(BoardContext);\n\n  return (\n    <div\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-board-card\", className].filter(Boolean).join(\" \")}\n      data-dragging={isDragging || undefined}\n      data-idle={activeId && activeId !== id ? \"\" : undefined}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        className=\"ds-board-card__handle\"\n        aria-label={label ? `Move ${label}` : \"Move card\"}\n        {...attributes}\n        {...listeners}\n      >\n        <Icon name=\"grip-vertical\" />\n      </button>\n      <div className=\"ds-board-card__content\">{children}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Icon","boardCoordinateGetter","args","event","containers","context","c","\"type\"","a","b","activeRect","rect","currentCoordinates","sortableKeyboardCoordinates","boardCollisionDetection","isColumn","type","container","scoped","closestCorners","within","pointerWithin","rank","id","BoardContext","createContext","Board","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","activeType","setActiveType","overColumnId","setOverColumnId","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleStart","useCallback","handleOver","over","overData","columnId","\"columnId\"","reset","handleEnd","activeData","active","ids","columnIds","toIndex","fromColumnId","toColumnId","\"sortable\"","\"items\"","onMove","onColumnMove","value","useMemo","board","className","DndContext","MeasuringStrategy","SortableContext","horizontalListSortingStrategy","DragOverlay","renderDragOverlay","renderColumnDragOverlay","BoardColumn","useContext","setBodyRef","useDroppable","itemIds","setColumnRef","useSortable","isDraggable","node","ref","CSS","transform","isDragging","title","Button","attributes","listeners","count","action","verticalListSortingStrategy","BoardCard","setNodeRef","label"],"sources":["../../../src/components/Board/index.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCorners,\n  pointerWithin,\n  MeasuringStrategy,\n\n  useDroppable,\n  useSensor,\n  useSensors,\n  type CollisionDetection,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport type { KeyboardCoordinateGetter } from \"@dnd-kit/core\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface BoardMove {\n  cardId: string;\n  fromColumnId: string;\n  toColumnId: string;\n  /** Index the card lands on inside the destination column. */\n  toIndex: number;\n}\n\nexport interface BoardColumnMove {\n  columnId: string;\n  toIndex: number;\n}\n\ninterface BoardContextValue {\n  activeId: string | null;\n  activeType: \"card\" | \"column\" | null;\n  /** The lane the pointer is currently over, whatever it is actually over. */\n  overColumnId: string | null;\n}\n\n/**\n * Arrow up/down sorts inside a lane; left/right jumps lanes, which the stock\n * sortable getter does not do.\n */\nconst boardCoordinateGetter: KeyboardCoordinateGetter = (event, args) => {\n  const { currentCoordinates, context } = args;\n  if (event.code === \"ArrowLeft\" || event.code === \"ArrowRight\") {\n    const containers = context.droppableContainers\n      .getEnabled()\n      .filter((c) => c.data.current?.[\"type\"] === \"column-body\")\n      .sort((a, b) => (a.rect.current?.left ?? 0) - (b.rect.current?.left ?? 0));\n    const activeRect = context.active?.rect.current.translated;\n    if (!activeRect) return undefined;\n    const index = containers.findIndex(\n      (c) => (c.rect.current?.left ?? 0) <= activeRect.left + 1 &&\n        (c.rect.current?.right ?? 0) >= activeRect.left - 1,\n    );\n    const next = containers[index + (event.code === \"ArrowRight\" ? 1 : -1)];\n    const rect = next?.rect.current;\n    if (!rect) return undefined;\n    event.preventDefault();\n    return { x: rect.left + rect.width / 2 - activeRect.width / 2, y: currentCoordinates.y };\n  }\n  return sortableKeyboardCoordinates(event, args);\n};\n\n/**\n * A lane's body sits inside the lane's frame, so a raw corner-distance\n * strategy lets the body steal the hit from the lane itself — most visibly at\n * the board ends, where the last lane then never shifts aside to open the\n * drop gap. Resolve by what is being dragged: a column only ever hits other\n * columns; a card hits the card under the pointer first, then the lane body\n * under it, then whatever is nearest.\n */\nconst boardCollisionDetection: CollisionDetection = (args) => {\n  const isColumn = args.active.data.current?.[\"type\"] === \"column\";\n  const containers = args.droppableContainers.filter((container) => {\n    const type = container.data.current?.[\"type\"];\n    return isColumn ? type === \"column\" : type !== \"column\";\n  });\n  const scoped = { ...args, droppableContainers: containers };\n  if (isColumn) return closestCorners(scoped);\n  const within = pointerWithin(scoped);\n  if (within.length > 0) {\n    const rank = (id: (typeof within)[number][\"id\"]) =>\n      containers.find((c) => c.id === id)?.data.current?.[\"type\"] === \"card\" ? 0 : 1;\n    return [...within].sort((a, b) => rank(a.id) - rank(b.id));\n  }\n  return closestCorners(scoped);\n};\n\nconst BoardContext = createContext<BoardContextValue>({\n  activeId: null,\n  activeType: null,\n  overColumnId: null,\n});\n\nexport interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onDragEnd\"> {\n  /** Column ids in render order. Required for columns to be re-orderable. */\n  columnIds?: string[];\n  /** Fired once a card is dropped somewhere new. Apply it to your own state. */\n  onMove?: (move: BoardMove) => void;\n  /** Fired once a column is dropped in a new position. */\n  onColumnMove?: (move: BoardColumnMove) => void;\n  /** Rendered inside the drag overlay while a card is in the air. */\n  renderDragOverlay?: (cardId: string) => ReactNode;\n  /** Rendered inside the drag overlay while a column is in the air. */\n  renderColumnDragOverlay?: (columnId: string) => ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A column board with pointer and keyboard dragging. The board owns the drag\n * mechanics only — the card data stays yours; react to `onMove`.\n */\nexport const Board = forwardRef<HTMLDivElement, BoardProps>(function Board(\n  {\n    columnIds,\n    onMove,\n    onColumnMove,\n    renderDragOverlay,\n    renderColumnDragOverlay,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const dndId = useId();\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [activeType, setActiveType] = useState<\"card\" | \"column\" | null>(null);\n  const [overColumnId, setOverColumnId] = useState<string | null>(null);\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: boardCoordinateGetter }),\n  );\n\n  const handleStart = useCallback((event: DragStartEvent) => {\n    setActiveId(String(event.active.id));\n    setActiveType(event.active.data.current?.[\"type\"] === \"column\" ? \"column\" : \"card\");\n  }, []);\n\n  /* Cards land on cards as often as on empty space, so the lane a drag is over\n   * is always resolved back to a column id — one highlight, one meaning. */\n  const handleOver = useCallback((event: DragOverEvent) => {\n    const over = event.over;\n    if (!over) {\n      setOverColumnId(null);\n      return;\n    }\n    const overData = over.data.current ?? {};\n    const columnId =\n      overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n    setOverColumnId(columnId || null);\n  }, []);\n\n  const reset = useCallback(() => {\n    setActiveId(null);\n    setActiveType(null);\n    setOverColumnId(null);\n  }, []);\n\n  const handleEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n      reset();\n      if (!over) return;\n\n      const activeData = active.data.current ?? {};\n      const overData = over.data.current ?? {};\n\n      /* Columns reorder among themselves; a column never lands inside a lane. */\n      if (activeData[\"type\"] === \"column\") {\n        const ids = columnIds ?? [];\n        const overColumnId =\n          overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n        const toIndex = ids.indexOf(overColumnId);\n        if (toIndex < 0 || overColumnId === String(active.id)) return;\n        onColumnMove?.({ columnId: String(active.id), toIndex });\n        return;\n      }\n\n      const fromColumnId = String(activeData[\"columnId\"] ?? \"\");\n      let toColumnId = \"\";\n      let toIndex = 0;\n\n      if (overData[\"type\"] === \"card\") {\n        /* Dropped on a card — land exactly where that card sits, in any lane. */\n        toColumnId = String(overData[\"columnId\"] ?? \"\");\n        toIndex = (overData[\"sortable\"] as { index: number } | undefined)?.index ?? 0;\n      } else {\n        /* Dropped on empty lane space — land at the end. */\n        toColumnId = String(overData[\"columnId\"] ?? over.id);\n        toIndex = ((overData[\"items\"] as string[] | undefined) ?? []).length;\n      }\n\n      if (!toColumnId) return;\n      if (fromColumnId === toColumnId && String(active.id) === String(over.id)) return;\n      onMove?.({ cardId: String(active.id), fromColumnId, toColumnId, toIndex });\n    },\n    [columnIds, onColumnMove, onMove, reset],\n  );\n\n  const value = useMemo(\n    () => ({ activeId, activeType, overColumnId }),\n    [activeId, activeType, overColumnId],\n  );\n\n  const board = (\n    <div ref={ref} className={[\"ds-board\", className].filter(Boolean).join(\" \")} {...rest}>\n      {children}\n    </div>\n  );\n\n  return (\n    <BoardContext.Provider value={value}>\n      <DndContext\n        id={`ds-board-${dndId}`}\n        sensors={sensors}\n        collisionDetection={boardCollisionDetection}\n        /* Lanes scroll and change height mid-drag, so positions are re-read\n         * continuously — without this the shift animation misfires. */\n        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}\n\n        onDragStart={handleStart}\n        onDragOver={handleOver}\n        onDragEnd={handleEnd}\n        onDragCancel={reset}\n      >\n        {columnIds ? (\n          <SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>\n            {board}\n          </SortableContext>\n        ) : (\n          board\n        )}\n        <DragOverlay>\n          {activeId && activeType === \"card\" ? (\n            <div className=\"ds-board-card\" data-overlay>\n              <span className=\"ds-board-card__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-board-card__content\">{renderDragOverlay?.(activeId)}</div>\n            </div>\n          ) : null}\n          {activeId && activeType === \"column\" ? (\n            <div className=\"ds-board-column\" data-overlay>\n              {renderColumnDragOverlay?.(activeId)}\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    </BoardContext.Provider>\n  );\n});\n\nexport interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  title: string;\n  /** Card ids in render order — the sortable contract for this column. */\n  itemIds: string[];\n  /** Shown beside the title; defaults to the number of cards. */\n  count?: number;\n  /** A control in the column head, e.g. an add button or a menu. */\n  action?: ReactNode;\n  /** Set false to pin a lane in place. */\n  isDraggable?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * One lane of the board. Heavy frame, hairline head rule, scrolling body, and\n * a grip on top of the head that drags the whole lane sideways.\n */\nexport const BoardColumn = forwardRef<HTMLElement, BoardColumnProps>(\n  function BoardColumn(\n    { id, title, itemIds, count, action, isDraggable = true, className, children, ...rest },\n    ref,\n  ) {\n    const { activeType, overColumnId } = useContext(BoardContext);\n    const { setNodeRef: setBodyRef } = useDroppable({\n      id: `${id}::body`,\n      data: { type: \"column-body\", columnId: id, items: itemIds },\n    });\n    const {\n      attributes,\n      listeners,\n      setNodeRef: setColumnRef,\n      transform,\n      transition,\n      isDragging,\n    } = useSortable({\n      id,\n      disabled: !isDraggable,\n      data: { type: \"column\", columnId: id, items: itemIds },\n    });\n\n    return (\n      <section\n        ref={(node) => {\n          setColumnRef(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-board-column\", className].filter(Boolean).join(\" \")}\n        data-over={(activeType === \"card\" && overColumnId === id) || undefined}\n        data-dragging={isDragging || undefined}\n\n        aria-label={title}\n        {...rest}\n      >\n        {isDraggable && (\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            iconStart=\"grip-horizontal\"\n            className=\"ds-board-column__grip\"\n            aria-label={`Reorder ${title}`}\n            {...attributes}\n            {...listeners}\n          />\n        )}\n        <header className=\"ds-board-column__head\">\n          <span className=\"ds-board-column__title\">{title}</span>\n          <span className=\"ds-board-column__count\">{count ?? itemIds.length}</span>\n          {action && <span className=\"ds-board-column__action\">{action}</span>}\n        </header>\n        <div ref={setBodyRef} className=\"ds-board-column__body\">\n          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>\n            {children}\n          </SortableContext>\n        </div>\n      </section>\n    );\n  },\n);\n\nexport interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  columnId: string;\n  /** Accessible name announced when the card is picked up. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * A draggable card. The grip on the left is the handle, so the card body can\n * hold links and buttons; the grip is a real button for keyboard users:\n * space to pick up, arrows to move, space to drop.\n */\nexport const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(function BoardCard(\n  { id, columnId, label, className, children, ...rest },\n  ref,\n) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =\n    useSortable({ id, data: { type: \"card\", columnId } });\n  const { activeId } = useContext(BoardContext);\n\n  return (\n    <div\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-board-card\", className].filter(Boolean).join(\" \")}\n      data-dragging={isDragging || undefined}\n      data-idle={activeId && activeId !== id ? \"\" : undefined}\n      {...rest}\n    >\n      <Button\n        variant=\"simple\"\n        size=\"sm\"\n        isIconOnly\n        iconStart=\"grip-vertical\"\n        className=\"ds-board-card__handle\"\n        aria-label={label ? `Move ${label}` : \"Move card\"}\n        {...attributes}\n        {...listeners}\n      />\n      <div className=\"ds-board-card__content\">{children}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Board/style.css

@@ -36,37 +36,28 @@
     box-shadow: var(--shadow-lg);
   }
 
-  /* The lane grip sits on top of the head — the whole lane travels with it. */
-  .ds-board-column__grip,
-  .ds-board-card__handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background: none;
-    color: var(--color-text-muted);
+  /* The lane grip sits on top of the head — the whole lane travels with it.
+   * Qualified so grab outranks Button's pointer, which the aggregate
+   * stylesheet loads after this file. */
+  .ds-board-column__grip.ds-button,
+  .ds-board-card__handle.ds-button {
+    flex: none;
     cursor: grab;
     touch-action: none;
-    padding: 0;
-  }
-
-  .ds-board-column__grip:hover,
-  .ds-board-card__handle:hover {
-    color: var(--color-text);
   }
 
-  .ds-board-column__grip:focus-visible,
-  .ds-board-card__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-board-card__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--field-height-sm);
+    block-size: var(--field-height-sm);
+    color: var(--color-text-muted);
   }
 
-  .ds-board-column__grip {
-    inline-size: 100%;
-    block-size: var(--space-5);
-    border-block-end: var(--rule-width) solid var(--rule-color);
-  }
+  .ds-board-column__grip { inline-size: 100%; }
 
   .ds-board-column__head {
     display: flex;
@@ -119,9 +110,7 @@
   }
 
   .ds-board-card__handle {
-    align-self: stretch;
-    align-items: flex-start;
-    padding-block-start: 2px;
+    align-self: flex-start;
   }
 
   .ds-board-card__content {

package/dist/components/Button/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");var r=(0,t.forwardRef)(function({variant:t=`neutral`,size:r=`md`,iconStart:i,iconEnd:a,isIconOnly:o=!1,isDisabled:s=!1,isPending:c=!1,className:l,children:u,type:d=`button`,...f},p){let m=r===`lg`?20:16;return(0,n.jsxs)(`button`,{ref:p,type:d,disabled:s||c,"data-variant":t,"data-size":r,"data-icon-only":o||void 0,"data-pending":c||void 0,className:[`ds-button`,l].filter(Boolean).join(` `),...f,children:[c?(0,n.jsx)(e.t,{name:`spinner`,size:m,className:`ds-button__spinner`}):i&&(0,n.jsx)(e.t,{name:i,size:m}),!o&&u,a&&!o&&(0,n.jsx)(e.t,{name:a,size:m})]})});exports.Button=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(function({variant:t=`neutral`,size:r=`md`,iconStart:i,iconEnd:a,isIconOnly:o=!1,isDisabled:s=!1,isPending:c=!1,className:l,children:u,type:d=`button`,...f},p){let m=r===`lg`?20:16;return(0,n.jsxs)(`button`,{ref:p,type:d,disabled:s||c,"data-variant":t,"data-size":r,"data-icon-only":o||void 0,"data-pending":c||void 0,className:[`ds-button`,l].filter(Boolean).join(` `),...f,children:[c?(0,n.jsx)(e.t,{name:`spinner`,size:m,className:`ds-button__spinner`}):i&&(0,n.jsx)(e.t,{name:i,size:m}),(!o||!i&&!c)&&u,a&&!o&&(0,n.jsx)(e.t,{name:a,size:m})]})});exports.Button=r;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","Button","rest","glyph","size","isDisabled","isPending","variant","isIconOnly","className","iconStart","children","iconEnd"],"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"danger\" | \"active\" | \"simple\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  iconStart?: IconName;\n  iconEnd?: IconName;\n  /** Square, height-sized button. Requires `aria-label`. */\n  isIconOnly?: boolean;\n  isDisabled?: boolean;\n  /** Label stays, spinner replaces `iconStart`, press is blocked. */\n  isPending?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Every action the user can take. One primary per view; a sixth variant is a\n * conversation, not a prop.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"neutral\",\n    size = \"md\",\n    iconStart,\n    iconEnd,\n    isIconOnly = false,\n    isDisabled = false,\n    isPending = false,\n    className,\n    children,\n    type = \"button\",\n    ...rest\n  },\n  ref,\n) {\n  const glyph = size === \"lg\" ? 20 : 16;\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={isDisabled || isPending}\n      data-variant={variant}\n      data-size={size}\n      data-icon-only={isIconOnly || undefined}\n      data-pending={isPending || undefined}\n      className={[\"ds-button\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {isPending ? (\n        <Icon name=\"spinner\" size={glyph} className=\"ds-button__spinner\" />\n      ) : (\n        iconStart && <Icon name={iconStart} size={glyph} />\n      )}\n      {!isIconOnly && children}\n      {iconEnd && !isIconOnly && <Icon name={iconEnd} size={glyph} />}\n    </button>\n  );\n});\n"],"mappings":"A,2KA0BA,IAAaK,GAAA,EAASL,EAAAA,WAAAA,CAA2C,SAC/D,CACE,UAAU,UACV,OAAO,KACP,YACA,UACA,aAAa,GACb,aAAa,GACb,YAAY,GACZ,YACA,WACA,OAAO,SACP,GAAGM,GAEL,EACA,CACA,IAAMC,EAAQC,IAAS,KAAO,GAAK,GACnC,OACE,EAAAJ,EAAA,KAAA,CAAC,SAAD,CACO,MACC,OACN,SAAUK,GAAcC,EACxB,eAAcC,EACd,YAAWH,EACX,iBAAgBI,GAAc,IAAA,GAC9B,eAAcF,GAAa,IAAA,GAC3B,UAAW,CAAC,YAAaG,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAIP,EATN,SAAA,CAWGI,GACC,EAAAN,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAK,UAAU,KAAMM,EAAO,UAAU,oBAAsB,CAAA,EAElEO,IAAa,EAAAV,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMa,EAAW,KAAMP,CAAQ,CAAA,EAEnD,CAACK,GAAcG,EACfC,GAAW,CAACJ,IAAc,EAAAR,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMe,EAAS,KAAMT,CAAQ,CAAA,CACxD,C,EAEZ,CAAC,E"}
+{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","Button","rest","glyph","size","isDisabled","isPending","variant","isIconOnly","className","iconStart","children","iconEnd"],"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"danger\" | \"active\" | \"simple\";\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n  variant?: ButtonVariant;\n  /** `xs` is for compact actions inside a field or chip, such as clear and remove. */\n  size?: ButtonSize;\n  iconStart?: IconName;\n  iconEnd?: IconName;\n  /** Square button. Label with aria-label/aria-labelledby. Children can supply a custom glyph. */\n  isIconOnly?: boolean;\n  isDisabled?: boolean;\n  /** Label stays, spinner replaces `iconStart`, press is blocked. */\n  isPending?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Every action the user can take. One primary per view; a sixth variant is a\n * conversation, not a prop.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"neutral\",\n    size = \"md\",\n    iconStart,\n    iconEnd,\n    isIconOnly = false,\n    isDisabled = false,\n    isPending = false,\n    className,\n    children,\n    type = \"button\",\n    ...rest\n  },\n  ref,\n) {\n  const glyph = size === \"lg\" ? 20 : 16;\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={isDisabled || isPending}\n      data-variant={variant}\n      data-size={size}\n      data-icon-only={isIconOnly || undefined}\n      data-pending={isPending || undefined}\n      className={[\"ds-button\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {isPending ? (\n        <Icon name=\"spinner\" size={glyph} className=\"ds-button__spinner\" />\n      ) : (\n        iconStart && <Icon name={iconStart} size={glyph} />\n      )}\n      {(!isIconOnly || (!iconStart && !isPending)) && children}\n      {iconEnd && !isIconOnly && <Icon name={iconEnd} size={glyph} />}\n    </button>\n  );\n});\n"],"mappings":"A,2KA2BA,IAAaK,GAAA,EAASL,EAAAA,WAAAA,CAA2C,SAC/D,CACE,UAAU,UACV,OAAO,KACP,YACA,UACA,aAAa,GACb,aAAa,GACb,YAAY,GACZ,YACA,WACA,OAAO,SACP,GAAGM,GAEL,EACA,CACA,IAAMC,EAAQC,IAAS,KAAO,GAAK,GACnC,OACE,EAAAJ,EAAA,KAAA,CAAC,SAAD,CACO,MACC,OACN,SAAUK,GAAcC,EACxB,eAAcC,EACd,YAAWH,EACX,iBAAgBI,GAAc,IAAA,GAC9B,eAAcF,GAAa,IAAA,GAC3B,UAAW,CAAC,YAAaG,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAIP,EATN,SAAA,CAWGI,GACC,EAAAN,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAK,UAAU,KAAMM,EAAO,UAAU,oBAAsB,CAAA,EAElEO,IAAa,EAAAV,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMa,EAAW,KAAMP,CAAQ,CAAA,GAElD,CAACK,GAAe,CAACE,GAAa,CAACJ,IAAeK,EAC/CC,GAAW,CAACJ,IAAc,EAAAR,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMe,EAAS,KAAMT,CAAQ,CAAA,CACxD,C,EAEZ,CAAC,E"}

package/dist/components/Button/index.d.cts

@@ -1,13 +1,14 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import type { IconName } from "../Icon/icons.cjs";
 export type ButtonVariant = "primary" | "neutral" | "danger" | "active" | "simple";
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
     variant?: ButtonVariant;
+    /** `xs` is for compact actions inside a field or chip, such as clear and remove. */
     size?: ButtonSize;
     iconStart?: IconName;
     iconEnd?: IconName;
-    /** Square, height-sized button. Requires `aria-label`. */
+    /** Square button. Label with aria-label/aria-labelledby. Children can supply a custom glyph. */
     isIconOnly?: boolean;
     isDisabled?: boolean;
     /** Label stays, spinner replaces `iconStart`, press is blocked. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAsCjB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oFAAoF;IACpF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,gGAAgG;IAChG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAsCjB,CAAC"}

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

@@ -1,13 +1,14 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import type { IconName } from "../Icon/icons.js";
 export type ButtonVariant = "primary" | "neutral" | "danger" | "active" | "simple";
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
     variant?: ButtonVariant;
+    /** `xs` is for compact actions inside a field or chip, such as clear and remove. */
     size?: ButtonSize;
     iconStart?: IconName;
     iconEnd?: IconName;
-    /** Square, height-sized button. Requires `aria-label`. */
+    /** Square button. Label with aria-label/aria-labelledby. Children can supply a custom glyph. */
     isIconOnly?: boolean;
     isDisabled?: boolean;
     /** Label stays, spinner replaces `iconStart`, press is blocked. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAsCjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oFAAoF;IACpF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,gGAAgG;IAChG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAsCjB,CAAC"}

package/dist/components/Button/index.js

@@ -23,7 +23,7 @@ var i = t(function({ variant: t = "neutral", size: i = "md", iconStart: a, iconE
 				name: a,
 				size: h
 			}),
-			!s && d,
+			(!s || !a && !l) && d,
 			o && !s && /* @__PURE__ */ n(e, {
 				name: o,
 				size: h

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","Button","forwardRef","rest","glyph","size","isDisabled","isPending","variant","isIconOnly","className","iconStart","children","iconEnd"],"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"danger\" | \"active\" | \"simple\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  iconStart?: IconName;\n  iconEnd?: IconName;\n  /** Square, height-sized button. Requires `aria-label`. */\n  isIconOnly?: boolean;\n  isDisabled?: boolean;\n  /** Label stays, spinner replaces `iconStart`, press is blocked. */\n  isPending?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Every action the user can take. One primary per view; a sixth variant is a\n * conversation, not a prop.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"neutral\",\n    size = \"md\",\n    iconStart,\n    iconEnd,\n    isIconOnly = false,\n    isDisabled = false,\n    isPending = false,\n    className,\n    children,\n    type = \"button\",\n    ...rest\n  },\n  ref,\n) {\n  const glyph = size === \"lg\" ? 20 : 16;\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={isDisabled || isPending}\n      data-variant={variant}\n      data-size={size}\n      data-icon-only={isIconOnly || undefined}\n      data-pending={isPending || undefined}\n      className={[\"ds-button\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {isPending ? (\n        <Icon name=\"spinner\" size={glyph} className=\"ds-button__spinner\" />\n      ) : (\n        iconStart && <Icon name={iconStart} size={glyph} />\n      )}\n      {!isIconOnly && children}\n      {iconEnd && !isIconOnly && <Icon name={iconEnd} size={glyph} />}\n    </button>\n  );\n});\n"],"mappings":";;;;AA0BA,IAAaC,IAASC,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,cACA,YACA,gBAAa,IACb,gBAAa,IACb,eAAY,IACZ,cACA,aACA,UAAO,UACP,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,MAAS,OAAO,KAAK;CACnC,OACE,kBAAC,UAAD;EACO;EACC;EACN,UAAUC,KAAcC;EACxB,gBAAcC;EACd,aAAWH;EACX,kBAAgBI,KAAc,KAAA;EAC9B,gBAAcF,KAAa,KAAA;EAC3B,WAAW,CAAC,aAAaG,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIP;EATN,UAAA;GAWGI,IACC,kBAACP,GAAD;IAAM,MAAK;IAAU,MAAMI;IAAO,WAAU;GAAsB,CAAA,IAElEO,KAAa,kBAACX,GAAD;IAAM,MAAMW;IAAW,MAAMP;GAAQ,CAAA;GAEnD,CAACK,KAAcG;GACfC,KAAW,CAACJ,KAAc,kBAACT,GAAD;IAAM,MAAMa;IAAS,MAAMT;GAAQ,CAAA;EACxD;;AAEZ,CAAC"}
+{"version":3,"file":"index.js","names":["Icon","Button","forwardRef","rest","glyph","size","isDisabled","isPending","variant","isIconOnly","className","iconStart","children","iconEnd"],"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"danger\" | \"active\" | \"simple\";\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n  variant?: ButtonVariant;\n  /** `xs` is for compact actions inside a field or chip, such as clear and remove. */\n  size?: ButtonSize;\n  iconStart?: IconName;\n  iconEnd?: IconName;\n  /** Square button. Label with aria-label/aria-labelledby. Children can supply a custom glyph. */\n  isIconOnly?: boolean;\n  isDisabled?: boolean;\n  /** Label stays, spinner replaces `iconStart`, press is blocked. */\n  isPending?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Every action the user can take. One primary per view; a sixth variant is a\n * conversation, not a prop.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"neutral\",\n    size = \"md\",\n    iconStart,\n    iconEnd,\n    isIconOnly = false,\n    isDisabled = false,\n    isPending = false,\n    className,\n    children,\n    type = \"button\",\n    ...rest\n  },\n  ref,\n) {\n  const glyph = size === \"lg\" ? 20 : 16;\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={isDisabled || isPending}\n      data-variant={variant}\n      data-size={size}\n      data-icon-only={isIconOnly || undefined}\n      data-pending={isPending || undefined}\n      className={[\"ds-button\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {isPending ? (\n        <Icon name=\"spinner\" size={glyph} className=\"ds-button__spinner\" />\n      ) : (\n        iconStart && <Icon name={iconStart} size={glyph} />\n      )}\n      {(!isIconOnly || (!iconStart && !isPending)) && children}\n      {iconEnd && !isIconOnly && <Icon name={iconEnd} size={glyph} />}\n    </button>\n  );\n});\n"],"mappings":";;;;AA2BA,IAAaC,IAASC,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,cACA,YACA,gBAAa,IACb,gBAAa,IACb,eAAY,IACZ,cACA,aACA,UAAO,UACP,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQC,MAAS,OAAO,KAAK;CACnC,OACE,kBAAC,UAAD;EACO;EACC;EACN,UAAUC,KAAcC;EACxB,gBAAcC;EACd,aAAWH;EACX,kBAAgBI,KAAc,KAAA;EAC9B,gBAAcF,KAAa,KAAA;EAC3B,WAAW,CAAC,aAAaG,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIP;EATN,UAAA;GAWGI,IACC,kBAACP,GAAD;IAAM,MAAK;IAAU,MAAMI;IAAO,WAAU;GAAsB,CAAA,IAElEO,KAAa,kBAACX,GAAD;IAAM,MAAMW;IAAW,MAAMP;GAAQ,CAAA;IAElD,CAACK,KAAe,CAACE,KAAa,CAACJ,MAAeK;GAC/CC,KAAW,CAACJ,KAAc,kBAACT,GAAD;IAAM,MAAMa;IAAS,MAAMT;GAAQ,CAAA;EACxD;;AAEZ,CAAC"}