@diwauhris/ui 1.3.0 → 1.4.0

package/lib/index1750.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1750.cjs","names":[],"sources":["../src/ui-library/gallery/filter-chip/FilterChip.tsx"],"sourcesContent":["/**\n * FilterChip — Design System Component\n *\n * A removable tag/chip for displaying active filters.\n * Purely presentational — no filter state, no URL state, no search logic.\n *\n * Accessibility:\n *   - The remove button has an aria-label describing what will be removed.\n *   - Disabled chips prevent removal.\n *   - The chip itself is not interactive — only the remove button is.\n *\n * Usage:\n *   <FilterChip label=\"Department: HR\" onRemove={() => removeFilter('department')} />\n *   <FilterChip label=\"Status: Active\" onRemove={handleRemove} />\n *   <FilterChip label=\"Read only\" />       // no remove button\n *   <FilterChip label=\"Locked\" disabled /> // disabled state\n */\n\nimport { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nexport interface FilterChipProps {\n  /** Label content — string or ReactNode */\n  label: ReactNode;\n  /** When provided, renders a remove (×) button */\n  onRemove?: () => void;\n  /** Disables the remove button */\n  disabled?: boolean;\n  /** Optional accessible label for the remove button (defaults to \"Remove filter\") */\n  removeLabel?: string;\n  className?: string;\n}\n\nexport function FilterChip({\n  label,\n  onRemove,\n  disabled = false,\n  removeLabel = 'Remove filter',\n  className = '',\n}: FilterChipProps) {\n  return (\n    <span\n      className={[\n        'inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border',\n        'py-1 pl-3 text-xs font-semibold',\n        onRemove ? 'pr-1.5' : 'pr-3',\n        disabled\n          ? 'border-slate-200 bg-slate-50 text-slate-400'\n          : 'border-brand-blue/30 bg-blue-50 text-brand-blue',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Label — truncate long text */}\n      <span className=\"truncate\">{label}</span>\n\n      {/* Remove button */}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={!disabled ? onRemove : undefined}\n          disabled={disabled}\n          aria-label={removeLabel}\n          className={[\n            'flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n            disabled\n              ? 'cursor-not-allowed text-slate-300'\n              : 'text-brand-blue hover:bg-blue-100 hover:text-brand-navy',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <X size={10} aria-hidden=\"true\" strokeWidth={3} />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,WAAW,EACzB,OACA,UACA,WAAW,OACX,cAAc,iBACd,YAAY,MACM;CAClB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,WAAW;GACT;GACA;GACA,WAAW,WAAW;GACtB,WACI,gDACA;GACJ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAXb,UAAA,CAcE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAY,UAAA;EAAY,CAAA,GAGvC,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,MAAK;GACL,SAAS,CAAC,WAAW,WAAW,KAAA;GACtB;GACV,cAAY;GACZ,WAAW;IACT;IACA;IACA,WACI,sCACA;GACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAA,SAAD;IAAG,MAAM;IAAI,eAAY;IAAO,aAAa;GAAI,CAAA;EAC3C,CAAA,CAEN;;AAEV"}

package/lib/index1750.mjs

@@ -1,54 +0,0 @@
-import X from "./index1723.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/ui-library/gallery/filter-chip/FilterChip.tsx
-/**
-* FilterChip — Design System Component
-*
-* A removable tag/chip for displaying active filters.
-* Purely presentational — no filter state, no URL state, no search logic.
-*
-* Accessibility:
-*   - The remove button has an aria-label describing what will be removed.
-*   - Disabled chips prevent removal.
-*   - The chip itself is not interactive — only the remove button is.
-*
-* Usage:
-*   <FilterChip label="Department: HR" onRemove={() => removeFilter('department')} />
-*   <FilterChip label="Status: Active" onRemove={handleRemove} />
-*   <FilterChip label="Read only" />       // no remove button
-*   <FilterChip label="Locked" disabled /> // disabled state
-*/
-function FilterChip({ label, onRemove, disabled = false, removeLabel = "Remove filter", className = "" }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: [
-			"inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border",
-			"py-1 pl-3 text-xs font-semibold",
-			onRemove ? "pr-1.5" : "pr-3",
-			disabled ? "border-slate-200 bg-slate-50 text-slate-400" : "border-brand-blue/30 bg-blue-50 text-brand-blue",
-			className
-		].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: label
-		}), onRemove && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: !disabled ? onRemove : void 0,
-			disabled,
-			"aria-label": removeLabel,
-			className: [
-				"flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition",
-				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
-				disabled ? "cursor-not-allowed text-slate-300" : "text-brand-blue hover:bg-blue-100 hover:text-brand-navy"
-			].filter(Boolean).join(" "),
-			children: /* @__PURE__ */ jsx(X, {
-				size: 10,
-				"aria-hidden": "true",
-				strokeWidth: 3
-			})
-		})]
-	});
-}
-//#endregion
-export { FilterChip };
-
-//# sourceMappingURL=index1750.mjs.map

package/lib/index1750.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1750.mjs","names":[],"sources":["../src/ui-library/gallery/filter-chip/FilterChip.tsx"],"sourcesContent":["/**\n * FilterChip — Design System Component\n *\n * A removable tag/chip for displaying active filters.\n * Purely presentational — no filter state, no URL state, no search logic.\n *\n * Accessibility:\n *   - The remove button has an aria-label describing what will be removed.\n *   - Disabled chips prevent removal.\n *   - The chip itself is not interactive — only the remove button is.\n *\n * Usage:\n *   <FilterChip label=\"Department: HR\" onRemove={() => removeFilter('department')} />\n *   <FilterChip label=\"Status: Active\" onRemove={handleRemove} />\n *   <FilterChip label=\"Read only\" />       // no remove button\n *   <FilterChip label=\"Locked\" disabled /> // disabled state\n */\n\nimport { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nexport interface FilterChipProps {\n  /** Label content — string or ReactNode */\n  label: ReactNode;\n  /** When provided, renders a remove (×) button */\n  onRemove?: () => void;\n  /** Disables the remove button */\n  disabled?: boolean;\n  /** Optional accessible label for the remove button (defaults to \"Remove filter\") */\n  removeLabel?: string;\n  className?: string;\n}\n\nexport function FilterChip({\n  label,\n  onRemove,\n  disabled = false,\n  removeLabel = 'Remove filter',\n  className = '',\n}: FilterChipProps) {\n  return (\n    <span\n      className={[\n        'inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border',\n        'py-1 pl-3 text-xs font-semibold',\n        onRemove ? 'pr-1.5' : 'pr-3',\n        disabled\n          ? 'border-slate-200 bg-slate-50 text-slate-400'\n          : 'border-brand-blue/30 bg-blue-50 text-brand-blue',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Label — truncate long text */}\n      <span className=\"truncate\">{label}</span>\n\n      {/* Remove button */}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={!disabled ? onRemove : undefined}\n          disabled={disabled}\n          aria-label={removeLabel}\n          className={[\n            'flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n            disabled\n              ? 'cursor-not-allowed text-slate-300'\n              : 'text-brand-blue hover:bg-blue-100 hover:text-brand-navy',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <X size={10} aria-hidden=\"true\" strokeWidth={3} />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,WAAW,EACzB,OACA,UACA,WAAW,OACX,cAAc,iBACd,YAAY,MACM;CAClB,OACE,qBAAC,QAAD;EACE,WAAW;GACT;GACA;GACA,WAAW,WAAW;GACtB,WACI,gDACA;GACJ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAXb,UAAA,CAcE,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA;EAAY,CAAA,GAGvC,YACC,oBAAC,UAAD;GACE,MAAK;GACL,SAAS,CAAC,WAAW,WAAW,KAAA;GACtB;GACV,cAAY;GACZ,WAAW;IACT;IACA;IACA,WACI,sCACA;GACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEX,UAAA,oBAAC,GAAD;IAAG,MAAM;IAAI,eAAY;IAAO,aAAa;GAAI,CAAA;EAC3C,CAAA,CAEN;;AAEV"}

package/lib/index1751.cjs

@@ -1,100 +0,0 @@
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-//#region src/ui-library/gallery/segmented-control/SegmentedControl.tsx
-/**
-* SegmentedControl — Design System Component
-*
-* An inline pill-shaped control for switching between mutually exclusive
-* options. Semantically equivalent to a group of radio buttons but styled
-* as a connected pill strip.
-*
-* ARIA: uses role="radiogroup" on the container and role="radio" on each
-* option, matching the WAI-ARIA authoring guide for mutually exclusive
-* single-selection controls that are not tab panels.
-*
-* Keyboard: Arrow keys move selection within the group (roving tabIndex).
-* This matches the native radio group keyboard pattern.
-*
-* API:
-*   <SegmentedControl
-*     options={[{ value: 'a', label: 'Option A' }, ...]}
-*     defaultValue="a"         // uncontrolled
-*     value={value}            // controlled
-*     onValueChange={setValue} // controlled callback
-*     aria-label="View mode"
-*   />
-*/
-function SegmentedControl({ options, defaultValue, value: controlledValue, onValueChange, disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className = "" }) {
-	const isControlled = controlledValue !== void 0;
-	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue ?? options.find((o) => !o.disabled)?.value ?? "");
-	const groupId = (0, react.useId)();
-	const activeValue = isControlled ? controlledValue : uncontrolledValue;
-	const select = (val) => {
-		if (disabled) return;
-		if (!isControlled) setUncontrolledValue(val);
-		onValueChange?.(val);
-	};
-	const enabledOptions = options.filter((o) => !o.disabled);
-	const handleKeyDown = (e) => {
-		if (disabled) return;
-		const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);
-		let nextIdx = null;
-		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-			e.preventDefault();
-			nextIdx = (currentIdx + 1) % enabledOptions.length;
-		} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-			e.preventDefault();
-			nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;
-		} else if (e.key === "Home") {
-			e.preventDefault();
-			nextIdx = 0;
-		} else if (e.key === "End") {
-			e.preventDefault();
-			nextIdx = enabledOptions.length - 1;
-		}
-		if (nextIdx !== null) {
-			const nextValue = enabledOptions[nextIdx]?.value;
-			if (nextValue !== void 0) {
-				select(nextValue);
-				const id = `${groupId}-${nextValue}`;
-				document.getElementById(id)?.focus();
-			}
-		}
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "radiogroup",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledby,
-		"aria-disabled": disabled || void 0,
-		onKeyDown: handleKeyDown,
-		className: [
-			"inline-flex rounded-xl bg-slate-100 p-1",
-			disabled ? "opacity-50 pointer-events-none" : "",
-			className
-		].filter(Boolean).join(" "),
-		children: options.map((opt) => {
-			const isSelected = opt.value === activeValue;
-			const isDisabled = disabled || opt.disabled;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				id: `${groupId}-${opt.value}`,
-				type: "button",
-				role: "radio",
-				"aria-checked": isSelected,
-				"aria-disabled": isDisabled || void 0,
-				disabled: isDisabled,
-				tabIndex: isSelected ? 0 : -1,
-				onClick: () => !isDisabled && select(opt.value),
-				className: [
-					"rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150",
-					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1",
-					isSelected ? "bg-white text-slate-900 shadow-sm" : isDisabled ? "text-slate-300 cursor-not-allowed" : "text-slate-500 hover:text-slate-700"
-				].filter(Boolean).join(" "),
-				children: opt.label
-			}, opt.value);
-		})
-	});
-}
-//#endregion
-exports.SegmentedControl = SegmentedControl;
-
-//# sourceMappingURL=index1751.cjs.map

package/lib/index1751.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1751.cjs","names":[],"sources":["../src/ui-library/gallery/segmented-control/SegmentedControl.tsx"],"sourcesContent":["/**\n * SegmentedControl — Design System Component\n *\n * An inline pill-shaped control for switching between mutually exclusive\n * options. Semantically equivalent to a group of radio buttons but styled\n * as a connected pill strip.\n *\n * ARIA: uses role=\"radiogroup\" on the container and role=\"radio\" on each\n * option, matching the WAI-ARIA authoring guide for mutually exclusive\n * single-selection controls that are not tab panels.\n *\n * Keyboard: Arrow keys move selection within the group (roving tabIndex).\n * This matches the native radio group keyboard pattern.\n *\n * API:\n *   <SegmentedControl\n *     options={[{ value: 'a', label: 'Option A' }, ...]}\n *     defaultValue=\"a\"         // uncontrolled\n *     value={value}            // controlled\n *     onValueChange={setValue} // controlled callback\n *     aria-label=\"View mode\"\n *   />\n */\n\nimport { useId, useState, type KeyboardEvent } from 'react';\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  options: SegmentedControlOption[];\n  /** Uncontrolled: initial selected value */\n  defaultValue?: string;\n  /** Controlled: current selected value */\n  value?: string;\n  /** Controlled: called on value change */\n  onValueChange?: (value: string) => void;\n  /** Disables the entire control */\n  disabled?: boolean;\n  /** Accessible label for the group */\n  'aria-label'?: string;\n  /** Associate with an external label element */\n  'aria-labelledby'?: string;\n  className?: string;\n}\n\nexport function SegmentedControl({\n  options,\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  className = '',\n}: SegmentedControlProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? options.find((o) => !o.disabled)?.value ?? '',\n  );\n  const groupId = useId();\n\n  const activeValue = isControlled ? controlledValue : uncontrolledValue;\n\n  const select = (val: string) => {\n    if (disabled) return;\n    if (!isControlled) setUncontrolledValue(val);\n    onValueChange?.(val);\n  };\n\n  const enabledOptions = options.filter((o) => !o.disabled);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);\n\n    let nextIdx: number | null = null;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      nextIdx = (currentIdx + 1) % enabledOptions.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      nextIdx = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      nextIdx = enabledOptions.length - 1;\n    }\n\n    if (nextIdx !== null) {\n      const nextValue = enabledOptions[nextIdx]?.value;\n      if (nextValue !== undefined) {\n        select(nextValue);\n        // Move DOM focus to the newly-selected button\n        const id = `${groupId}-${nextValue}`;\n        document.getElementById(id)?.focus();\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      className={[\n        'inline-flex rounded-xl bg-slate-100 p-1',\n        disabled ? 'opacity-50 pointer-events-none' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {options.map((opt) => {\n        const isSelected = opt.value === activeValue;\n        const isDisabled = disabled || opt.disabled;\n\n        return (\n          <button\n            key={opt.value}\n            id={`${groupId}-${opt.value}`}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-disabled={isDisabled || undefined}\n            disabled={isDisabled}\n            tabIndex={isSelected ? 0 : -1}\n            onClick={() => !isDisabled && select(opt.value)}\n            className={[\n              'rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150',\n              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1',\n              isSelected\n                ? 'bg-white text-slate-900 shadow-sm'\n                : isDisabled\n                  ? 'text-slate-300 cursor-not-allowed'\n                  : 'text-slate-500 hover:text-slate-700',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,iBAAiB,EAC/B,SACA,cACA,OAAO,iBACP,eACA,WAAW,OACX,cAAc,WACd,mBAAmB,gBACnB,YAAY,MACY;CACxB,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,CAAC,mBAAmB,yBAAA,GAAwB,MAAA,SAAA,CAChD,gBAAgB,QAAQ,MAAM,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,EAC7D;CACA,MAAM,WAAA,GAAU,MAAA,MAAA,CAAM;CAEtB,MAAM,cAAc,eAAe,kBAAkB;CAErD,MAAM,UAAU,QAAgB;EAC9B,IAAI,UAAU;EACd,IAAI,CAAC,cAAc,qBAAqB,GAAG;EAC3C,gBAAgB,GAAG;CACrB;CAEA,MAAM,iBAAiB,QAAQ,QAAQ,MAAM,CAAC,EAAE,QAAQ;CAExD,MAAM,iBAAiB,MAAqC;EAC1D,IAAI,UAAU;EACd,MAAM,aAAa,eAAe,WAAW,MAAM,EAAE,UAAU,WAAW;EAE1E,IAAI,UAAyB;EAC7B,IAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;GACnD,EAAE,eAAe;GACjB,WAAW,aAAa,KAAK,eAAe;EAC9C,OAAO,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;GACvD,EAAE,eAAe;GACjB,WAAW,aAAa,IAAI,eAAe,UAAU,eAAe;EACtE,OAAO,IAAI,EAAE,QAAQ,QAAQ;GAC3B,EAAE,eAAe;GACjB,UAAU;EACZ,OAAO,IAAI,EAAE,QAAQ,OAAO;GAC1B,EAAE,eAAe;GACjB,UAAU,eAAe,SAAS;EACpC;EAEA,IAAI,YAAY,MAAM;GACpB,MAAM,YAAY,eAAe,QAAQ,EAAE;GAC3C,IAAI,cAAc,KAAA,GAAW;IAC3B,OAAO,SAAS;IAEhB,MAAM,KAAK,GAAG,QAAQ,GAAG;IACzB,SAAS,eAAe,EAAE,CAAC,EAAE,MAAM;GACrC;EACF;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe,YAAY,KAAA;EAC3B,WAAW;EACX,WAAW;GACT;GACA,WAAW,mCAAmC;GAC9C;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA,QAAQ,KAAK,QAAQ;GACpB,MAAM,aAAa,IAAI,UAAU;GACjC,MAAM,aAAa,YAAY,IAAI;GAEnC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAEE,IAAI,GAAG,QAAQ,GAAG,IAAI;IACtB,MAAK;IACL,MAAK;IACL,gBAAc;IACd,iBAAe,cAAc,KAAA;IAC7B,UAAU;IACV,UAAU,aAAa,IAAI;IAC3B,eAAe,CAAC,cAAc,OAAO,IAAI,KAAK;IAC9C,WAAW;KACT;KACA;KACA,aACI,sCACA,aACE,sCACA;IACR,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IAEV,UAAA,IAAI;GACC,GAtBD,IAAI,KAsBH;EAEZ,CAAC;CACE,CAAA;AAET"}

package/lib/index1751.mjs

@@ -1,100 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useId, useState } from "react";
-//#region src/ui-library/gallery/segmented-control/SegmentedControl.tsx
-/**
-* SegmentedControl — Design System Component
-*
-* An inline pill-shaped control for switching between mutually exclusive
-* options. Semantically equivalent to a group of radio buttons but styled
-* as a connected pill strip.
-*
-* ARIA: uses role="radiogroup" on the container and role="radio" on each
-* option, matching the WAI-ARIA authoring guide for mutually exclusive
-* single-selection controls that are not tab panels.
-*
-* Keyboard: Arrow keys move selection within the group (roving tabIndex).
-* This matches the native radio group keyboard pattern.
-*
-* API:
-*   <SegmentedControl
-*     options={[{ value: 'a', label: 'Option A' }, ...]}
-*     defaultValue="a"         // uncontrolled
-*     value={value}            // controlled
-*     onValueChange={setValue} // controlled callback
-*     aria-label="View mode"
-*   />
-*/
-function SegmentedControl({ options, defaultValue, value: controlledValue, onValueChange, disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className = "" }) {
-	const isControlled = controlledValue !== void 0;
-	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? options.find((o) => !o.disabled)?.value ?? "");
-	const groupId = useId();
-	const activeValue = isControlled ? controlledValue : uncontrolledValue;
-	const select = (val) => {
-		if (disabled) return;
-		if (!isControlled) setUncontrolledValue(val);
-		onValueChange?.(val);
-	};
-	const enabledOptions = options.filter((o) => !o.disabled);
-	const handleKeyDown = (e) => {
-		if (disabled) return;
-		const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);
-		let nextIdx = null;
-		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-			e.preventDefault();
-			nextIdx = (currentIdx + 1) % enabledOptions.length;
-		} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-			e.preventDefault();
-			nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;
-		} else if (e.key === "Home") {
-			e.preventDefault();
-			nextIdx = 0;
-		} else if (e.key === "End") {
-			e.preventDefault();
-			nextIdx = enabledOptions.length - 1;
-		}
-		if (nextIdx !== null) {
-			const nextValue = enabledOptions[nextIdx]?.value;
-			if (nextValue !== void 0) {
-				select(nextValue);
-				const id = `${groupId}-${nextValue}`;
-				document.getElementById(id)?.focus();
-			}
-		}
-	};
-	return /* @__PURE__ */ jsx("div", {
-		role: "radiogroup",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledby,
-		"aria-disabled": disabled || void 0,
-		onKeyDown: handleKeyDown,
-		className: [
-			"inline-flex rounded-xl bg-slate-100 p-1",
-			disabled ? "opacity-50 pointer-events-none" : "",
-			className
-		].filter(Boolean).join(" "),
-		children: options.map((opt) => {
-			const isSelected = opt.value === activeValue;
-			const isDisabled = disabled || opt.disabled;
-			return /* @__PURE__ */ jsx("button", {
-				id: `${groupId}-${opt.value}`,
-				type: "button",
-				role: "radio",
-				"aria-checked": isSelected,
-				"aria-disabled": isDisabled || void 0,
-				disabled: isDisabled,
-				tabIndex: isSelected ? 0 : -1,
-				onClick: () => !isDisabled && select(opt.value),
-				className: [
-					"rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150",
-					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1",
-					isSelected ? "bg-white text-slate-900 shadow-sm" : isDisabled ? "text-slate-300 cursor-not-allowed" : "text-slate-500 hover:text-slate-700"
-				].filter(Boolean).join(" "),
-				children: opt.label
-			}, opt.value);
-		})
-	});
-}
-//#endregion
-export { SegmentedControl };
-
-//# sourceMappingURL=index1751.mjs.map

package/lib/index1751.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1751.mjs","names":[],"sources":["../src/ui-library/gallery/segmented-control/SegmentedControl.tsx"],"sourcesContent":["/**\n * SegmentedControl — Design System Component\n *\n * An inline pill-shaped control for switching between mutually exclusive\n * options. Semantically equivalent to a group of radio buttons but styled\n * as a connected pill strip.\n *\n * ARIA: uses role=\"radiogroup\" on the container and role=\"radio\" on each\n * option, matching the WAI-ARIA authoring guide for mutually exclusive\n * single-selection controls that are not tab panels.\n *\n * Keyboard: Arrow keys move selection within the group (roving tabIndex).\n * This matches the native radio group keyboard pattern.\n *\n * API:\n *   <SegmentedControl\n *     options={[{ value: 'a', label: 'Option A' }, ...]}\n *     defaultValue=\"a\"         // uncontrolled\n *     value={value}            // controlled\n *     onValueChange={setValue} // controlled callback\n *     aria-label=\"View mode\"\n *   />\n */\n\nimport { useId, useState, type KeyboardEvent } from 'react';\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  options: SegmentedControlOption[];\n  /** Uncontrolled: initial selected value */\n  defaultValue?: string;\n  /** Controlled: current selected value */\n  value?: string;\n  /** Controlled: called on value change */\n  onValueChange?: (value: string) => void;\n  /** Disables the entire control */\n  disabled?: boolean;\n  /** Accessible label for the group */\n  'aria-label'?: string;\n  /** Associate with an external label element */\n  'aria-labelledby'?: string;\n  className?: string;\n}\n\nexport function SegmentedControl({\n  options,\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  className = '',\n}: SegmentedControlProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? options.find((o) => !o.disabled)?.value ?? '',\n  );\n  const groupId = useId();\n\n  const activeValue = isControlled ? controlledValue : uncontrolledValue;\n\n  const select = (val: string) => {\n    if (disabled) return;\n    if (!isControlled) setUncontrolledValue(val);\n    onValueChange?.(val);\n  };\n\n  const enabledOptions = options.filter((o) => !o.disabled);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);\n\n    let nextIdx: number | null = null;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      nextIdx = (currentIdx + 1) % enabledOptions.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      nextIdx = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      nextIdx = enabledOptions.length - 1;\n    }\n\n    if (nextIdx !== null) {\n      const nextValue = enabledOptions[nextIdx]?.value;\n      if (nextValue !== undefined) {\n        select(nextValue);\n        // Move DOM focus to the newly-selected button\n        const id = `${groupId}-${nextValue}`;\n        document.getElementById(id)?.focus();\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      className={[\n        'inline-flex rounded-xl bg-slate-100 p-1',\n        disabled ? 'opacity-50 pointer-events-none' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {options.map((opt) => {\n        const isSelected = opt.value === activeValue;\n        const isDisabled = disabled || opt.disabled;\n\n        return (\n          <button\n            key={opt.value}\n            id={`${groupId}-${opt.value}`}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-disabled={isDisabled || undefined}\n            disabled={isDisabled}\n            tabIndex={isSelected ? 0 : -1}\n            onClick={() => !isDisabled && select(opt.value)}\n            className={[\n              'rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150',\n              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1',\n              isSelected\n                ? 'bg-white text-slate-900 shadow-sm'\n                : isDisabled\n                  ? 'text-slate-300 cursor-not-allowed'\n                  : 'text-slate-500 hover:text-slate-700',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,iBAAiB,EAC/B,SACA,cACA,OAAO,iBACP,eACA,WAAW,OACX,cAAc,WACd,mBAAmB,gBACnB,YAAY,MACY;CACxB,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,gBAAgB,QAAQ,MAAM,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,EAC7D;CACA,MAAM,UAAU,MAAM;CAEtB,MAAM,cAAc,eAAe,kBAAkB;CAErD,MAAM,UAAU,QAAgB;EAC9B,IAAI,UAAU;EACd,IAAI,CAAC,cAAc,qBAAqB,GAAG;EAC3C,gBAAgB,GAAG;CACrB;CAEA,MAAM,iBAAiB,QAAQ,QAAQ,MAAM,CAAC,EAAE,QAAQ;CAExD,MAAM,iBAAiB,MAAqC;EAC1D,IAAI,UAAU;EACd,MAAM,aAAa,eAAe,WAAW,MAAM,EAAE,UAAU,WAAW;EAE1E,IAAI,UAAyB;EAC7B,IAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;GACnD,EAAE,eAAe;GACjB,WAAW,aAAa,KAAK,eAAe;EAC9C,OAAO,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;GACvD,EAAE,eAAe;GACjB,WAAW,aAAa,IAAI,eAAe,UAAU,eAAe;EACtE,OAAO,IAAI,EAAE,QAAQ,QAAQ;GAC3B,EAAE,eAAe;GACjB,UAAU;EACZ,OAAO,IAAI,EAAE,QAAQ,OAAO;GAC1B,EAAE,eAAe;GACjB,UAAU,eAAe,SAAS;EACpC;EAEA,IAAI,YAAY,MAAM;GACpB,MAAM,YAAY,eAAe,QAAQ,EAAE;GAC3C,IAAI,cAAc,KAAA,GAAW;IAC3B,OAAO,SAAS;IAEhB,MAAM,KAAK,GAAG,QAAQ,GAAG;IACzB,SAAS,eAAe,EAAE,CAAC,EAAE,MAAM;GACrC;EACF;CACF;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe,YAAY,KAAA;EAC3B,WAAW;EACX,WAAW;GACT;GACA,WAAW,mCAAmC;GAC9C;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA,QAAQ,KAAK,QAAQ;GACpB,MAAM,aAAa,IAAI,UAAU;GACjC,MAAM,aAAa,YAAY,IAAI;GAEnC,OACE,oBAAC,UAAD;IAEE,IAAI,GAAG,QAAQ,GAAG,IAAI;IACtB,MAAK;IACL,MAAK;IACL,gBAAc;IACd,iBAAe,cAAc,KAAA;IAC7B,UAAU;IACV,UAAU,aAAa,IAAI;IAC3B,eAAe,CAAC,cAAc,OAAO,IAAI,KAAK;IAC9C,WAAW;KACT;KACA;KACA,aACI,sCACA,aACE,sCACA;IACR,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IAEV,UAAA,IAAI;GACC,GAtBD,IAAI,KAsBH;EAEZ,CAAC;CACE,CAAA;AAET"}

package/lib/index1752.cjs

@@ -1,27 +0,0 @@
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
-function ValidationSummary({ issues, heading = "Review these fields before saving", className = "" }) {
-	if (issues.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		role: "alert",
-		className: ["rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900", className].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "font-bold",
-			children: heading
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "mt-2 list-disc space-y-1 pl-5",
-			children: issues.map((issue) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "font-semibold",
-					children: [issue.field, ":"]
-				}),
-				" ",
-				issue.message
-			] }, `${issue.field}:${issue.message}`))
-		})]
-	});
-}
-//#endregion
-exports.ValidationSummary = ValidationSummary;
-
-//# sourceMappingURL=index1752.cjs.map

package/lib/index1752.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1752.cjs","names":[],"sources":["../src/ui-library/gallery/validation-summary/ValidationSummary.tsx"],"sourcesContent":["/**\n * ValidationSummary — Design System Component\n *\n * Renders a list of validation errors or warnings before a form is submitted.\n * Matches the production implementation in shared/components/ValidationSummary.tsx.\n *\n * Accessibility:\n *   - role=\"alert\" causes immediate announcement when injected into the DOM.\n *   - <ul> with <li> items provides proper list semantics.\n *   - The heading is a <div role=\"heading\" aria-level=\"3\"> to avoid disrupting\n *     page outline; callers may override via headingLevel.\n *   - Each issue is identified by field name + message.\n *\n * Usage:\n *   const [issues, setIssues] = useState<ValidationIssue[]>([]);\n *   // ... after validation:\n *   setIssues([{ field: 'Employee ID', message: 'is required' }]);\n *   // Render:\n *   <ValidationSummary issues={issues} />\n */\n\nexport interface ValidationIssue {\n  /** Human-readable field label. */\n  field: string;\n  /** Error description for this field. */\n  message: string;\n}\n\nexport interface ValidationSummaryProps {\n  /** List of validation issues. Renders nothing when empty. */\n  issues: ValidationIssue[];\n  /**\n   * Heading text shown above the issue list.\n   * Default: \"Review these fields before saving\"\n   */\n  heading?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function ValidationSummary({\n  issues,\n  heading = 'Review these fields before saving',\n  className = '',\n}: ValidationSummaryProps) {\n  if (issues.length === 0) return null;\n\n  return (\n    <div\n      role=\"alert\"\n      className={[\n        'rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"font-bold\">{heading}</div>\n      <ul className=\"mt-2 list-disc space-y-1 pl-5\">\n        {issues.map((issue) => (\n          <li key={`${issue.field}:${issue.message}`}>\n            <span className=\"font-semibold\">{issue.field}:</span>{' '}\n            {issue.message}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Re-export type for consumer convenience\nexport type { ValidationIssue as ValidationSummaryIssue };\n"],"mappings":";;AAwCA,SAAgB,kBAAkB,EAChC,QACA,UAAU,qCACV,YAAY,MACa;CACzB,IAAI,OAAO,WAAW,GAAG,OAAO;CAEhC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,MAAK;EACL,WAAW,CACT,mFACA,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GAAa,UAAA;EAAa,CAAA,GACzC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAU;GACX,UAAA,OAAO,KAAK,UACX,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAAiC,MAAM,OAAM,GAAO;;IAAE;IACrD,MAAM;GACL,EAAA,GAHK,GAAG,MAAM,MAAM,GAAG,MAAM,SAG7B,CACL;EACC,CAAA,CACD;;AAET"}

package/lib/index1752.mjs

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
-function ValidationSummary({ issues, heading = "Review these fields before saving", className = "" }) {
-	if (issues.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		role: "alert",
-		className: ["rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900", className].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "font-bold",
-			children: heading
-		}), /* @__PURE__ */ jsx("ul", {
-			className: "mt-2 list-disc space-y-1 pl-5",
-			children: issues.map((issue) => /* @__PURE__ */ jsxs("li", { children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-semibold",
-					children: [issue.field, ":"]
-				}),
-				" ",
-				issue.message
-			] }, `${issue.field}:${issue.message}`))
-		})]
-	});
-}
-//#endregion
-export { ValidationSummary };
-
-//# sourceMappingURL=index1752.mjs.map

package/lib/index1752.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1752.mjs","names":[],"sources":["../src/ui-library/gallery/validation-summary/ValidationSummary.tsx"],"sourcesContent":["/**\n * ValidationSummary — Design System Component\n *\n * Renders a list of validation errors or warnings before a form is submitted.\n * Matches the production implementation in shared/components/ValidationSummary.tsx.\n *\n * Accessibility:\n *   - role=\"alert\" causes immediate announcement when injected into the DOM.\n *   - <ul> with <li> items provides proper list semantics.\n *   - The heading is a <div role=\"heading\" aria-level=\"3\"> to avoid disrupting\n *     page outline; callers may override via headingLevel.\n *   - Each issue is identified by field name + message.\n *\n * Usage:\n *   const [issues, setIssues] = useState<ValidationIssue[]>([]);\n *   // ... after validation:\n *   setIssues([{ field: 'Employee ID', message: 'is required' }]);\n *   // Render:\n *   <ValidationSummary issues={issues} />\n */\n\nexport interface ValidationIssue {\n  /** Human-readable field label. */\n  field: string;\n  /** Error description for this field. */\n  message: string;\n}\n\nexport interface ValidationSummaryProps {\n  /** List of validation issues. Renders nothing when empty. */\n  issues: ValidationIssue[];\n  /**\n   * Heading text shown above the issue list.\n   * Default: \"Review these fields before saving\"\n   */\n  heading?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function ValidationSummary({\n  issues,\n  heading = 'Review these fields before saving',\n  className = '',\n}: ValidationSummaryProps) {\n  if (issues.length === 0) return null;\n\n  return (\n    <div\n      role=\"alert\"\n      className={[\n        'rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"font-bold\">{heading}</div>\n      <ul className=\"mt-2 list-disc space-y-1 pl-5\">\n        {issues.map((issue) => (\n          <li key={`${issue.field}:${issue.message}`}>\n            <span className=\"font-semibold\">{issue.field}:</span>{' '}\n            {issue.message}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Re-export type for consumer convenience\nexport type { ValidationIssue as ValidationSummaryIssue };\n"],"mappings":";;AAwCA,SAAgB,kBAAkB,EAChC,QACA,UAAU,qCACV,YAAY,MACa;CACzB,IAAI,OAAO,WAAW,GAAG,OAAO;CAEhC,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,CACT,mFACA,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA,CASE,oBAAC,OAAD;GAAK,WAAU;GAAa,UAAA;EAAa,CAAA,GACzC,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,OAAO,KAAK,UACX,qBAAC,MAAD,EAAA,UAAA;IACE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAAiC,MAAM,OAAM,GAAO;;IAAE;IACrD,MAAM;GACL,EAAA,GAHK,GAAG,MAAM,MAAM,GAAG,MAAM,SAG7B,CACL;EACC,CAAA,CACD;;AAET"}

package/lib/index1753.cjs

@@ -1,76 +0,0 @@
-const require_circle_alert = require("./index382.cjs");
-const require_circle_check = require("./index392.cjs");
-const require_info = require("./index864.cjs");
-const require_triangle_alert = require("./index1607.cjs");
-const require_x = require("./index1723.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/ui-library/gallery/alert/Alert.tsx
-var TONE_FULL = {
-	info: "border-l-4 border-sky-400    bg-sky-50    text-sky-800",
-	success: "border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800",
-	warning: "border-l-4 border-amber-400  bg-amber-50  text-amber-800",
-	danger: "border-l-4 border-rose-500   bg-rose-50   text-rose-800"
-};
-var TONE_SUBTLE = {
-	info: "border-l-4 border-sky-400    bg-white text-sky-700",
-	success: "border-l-4 border-emerald-400 bg-white text-emerald-700",
-	warning: "border-l-4 border-amber-400  bg-white text-amber-700",
-	danger: "border-l-4 border-rose-500   bg-white text-rose-700"
-};
-var ICON_CLASS = {
-	info: "text-sky-500",
-	success: "text-emerald-500",
-	warning: "text-amber-500",
-	danger: "text-rose-500"
-};
-var TONE_ICON = {
-	info: require_info.default,
-	success: require_circle_check.default,
-	warning: require_triangle_alert.default,
-	danger: require_circle_alert.default
-};
-var DISMISS_CLASS = {
-	info: "text-sky-400 hover:bg-sky-100",
-	success: "text-emerald-400 hover:bg-emerald-100",
-	warning: "text-amber-400 hover:bg-amber-100",
-	danger: "text-rose-400 hover:bg-rose-100"
-};
-function Alert({ tone, title, children, icon = true, onDismiss, subtle = false, className = "" }) {
-	const Icon = TONE_ICON[tone];
-	const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		role: "alert",
-		className: `flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`,
-		children: [
-			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				size: 20,
-				className: `mt-0.5 shrink-0 ${ICON_CLASS[tone]}`,
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "min-w-0 flex-1 text-sm",
-				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "font-bold leading-snug mb-0.5",
-					children: title
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "font-medium leading-relaxed",
-					children
-				})]
-			}),
-			onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				onClick: onDismiss,
-				"aria-label": "Dismiss",
-				className: `-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_x.default, {
-					size: 14,
-					"aria-hidden": "true"
-				})
-			})
-		]
-	});
-}
-//#endregion
-exports.Alert = Alert;
-
-//# sourceMappingURL=index1753.cjs.map

package/lib/index1753.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1753.cjs","names":[],"sources":["../src/ui-library/gallery/alert/Alert.tsx"],"sourcesContent":["/**\n * Alert — Design System Component\n *\n * Inline contextual feedback. Purely presentational.\n *\n * Tones:   info | success | warning | danger\n * Variants: default | subtle\n */\n\nimport type { ReactNode } from 'react';\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from 'lucide-react';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertProps {\n  tone: AlertTone;\n  title?: string;\n  children: ReactNode;\n  /** Show an icon matching the tone */\n  icon?: boolean;\n  /** Show a dismiss button */\n  onDismiss?: () => void;\n  /** Subtle variant uses a lighter background */\n  subtle?: boolean;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\n// Full background tones — keep semantic colors, add the DIWA left-rule\nconst TONE_FULL: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-sky-50    text-sky-800',\n  success: 'border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800',\n  warning: 'border-l-4 border-amber-400  bg-amber-50  text-amber-800',\n  danger:  'border-l-4 border-rose-500   bg-rose-50   text-rose-800',\n};\n\n// Subtle: white bg, left rule is the only structural marker\nconst TONE_SUBTLE: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-white text-sky-700',\n  success: 'border-l-4 border-emerald-400 bg-white text-emerald-700',\n  warning: 'border-l-4 border-amber-400  bg-white text-amber-700',\n  danger:  'border-l-4 border-rose-500   bg-white text-rose-700',\n};\n\nconst ICON_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-500',\n  success: 'text-emerald-500',\n  warning: 'text-amber-500',\n  danger:  'text-rose-500',\n};\n\nconst TONE_ICON: Record<AlertTone, typeof Info> = {\n  info:    Info,\n  success: CheckCircle2,\n  warning: AlertTriangle,\n  danger:  AlertCircle,\n};\n\nconst DISMISS_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-400 hover:bg-sky-100',\n  success: 'text-emerald-400 hover:bg-emerald-100',\n  warning: 'text-amber-400 hover:bg-amber-100',\n  danger:  'text-rose-400 hover:bg-rose-100',\n};\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Alert({\n  tone,\n  title,\n  children,\n  icon = true,\n  onDismiss,\n  subtle = false,\n  className = '',\n}: AlertProps) {\n  const Icon = TONE_ICON[tone];\n  const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];\n\n  return (\n    <div\n      role=\"alert\"\n      className={`flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`}\n    >\n      {icon && (\n        <Icon\n          size={20}\n          className={`mt-0.5 shrink-0 ${ICON_CLASS[tone]}`}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div className=\"min-w-0 flex-1 text-sm\">\n        {title && <p className=\"font-bold leading-snug mb-0.5\">{title}</p>}\n        <div className=\"font-medium leading-relaxed\">{children}</div>\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n          className={`-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`}\n        >\n          <X size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA8BA,IAAM,YAAuC;CAC3C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAGA,IAAM,cAAyC;CAC7C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,aAAwC;CAC5C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,YAA4C;CAChD,MAAS,aAAA;CACT,SAAS,qBAAA;CACT,SAAS,uBAAA;CACT,QAAS,qBAAA;AACX;AAEA,IAAM,gBAA2C;CAC/C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAIA,SAAgB,MAAM,EACpB,MACA,OACA,UACA,OAAO,MACP,WACA,SAAS,OACT,YAAY,MACC;CACb,MAAM,OAAO,UAAU;CACvB,MAAM,aAAa,SAAS,YAAY,QAAQ,UAAU;CAE1D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,MAAK;EACL,WAAW,0CAA0C,WAAW,GAAG;EAFrE,UAAA;GAIG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IACE,MAAM;IACN,WAAW,mBAAmB,WAAW;IACzC,eAAY;GACb,CAAA;GAEH,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAG,WAAU;KAAiC,UAAA;IAAS,CAAA,GACjE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACzD;;GACJ,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,cAAW;IACX,WAAW,+HAA+H,cAAc;IAExJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAA,SAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC3B,CAAA;EAEP;;AAET"}

package/lib/index1753.mjs

@@ -1,76 +0,0 @@
-import CircleAlert from "./index382.mjs";
-import CircleCheck from "./index392.mjs";
-import Info from "./index864.mjs";
-import TriangleAlert from "./index1607.mjs";
-import X from "./index1723.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/ui-library/gallery/alert/Alert.tsx
-var TONE_FULL = {
-	info: "border-l-4 border-sky-400    bg-sky-50    text-sky-800",
-	success: "border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800",
-	warning: "border-l-4 border-amber-400  bg-amber-50  text-amber-800",
-	danger: "border-l-4 border-rose-500   bg-rose-50   text-rose-800"
-};
-var TONE_SUBTLE = {
-	info: "border-l-4 border-sky-400    bg-white text-sky-700",
-	success: "border-l-4 border-emerald-400 bg-white text-emerald-700",
-	warning: "border-l-4 border-amber-400  bg-white text-amber-700",
-	danger: "border-l-4 border-rose-500   bg-white text-rose-700"
-};
-var ICON_CLASS = {
-	info: "text-sky-500",
-	success: "text-emerald-500",
-	warning: "text-amber-500",
-	danger: "text-rose-500"
-};
-var TONE_ICON = {
-	info: Info,
-	success: CircleCheck,
-	warning: TriangleAlert,
-	danger: CircleAlert
-};
-var DISMISS_CLASS = {
-	info: "text-sky-400 hover:bg-sky-100",
-	success: "text-emerald-400 hover:bg-emerald-100",
-	warning: "text-amber-400 hover:bg-amber-100",
-	danger: "text-rose-400 hover:bg-rose-100"
-};
-function Alert({ tone, title, children, icon = true, onDismiss, subtle = false, className = "" }) {
-	const Icon = TONE_ICON[tone];
-	const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];
-	return /* @__PURE__ */ jsxs("div", {
-		role: "alert",
-		className: `flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`,
-		children: [
-			icon && /* @__PURE__ */ jsx(Icon, {
-				size: 20,
-				className: `mt-0.5 shrink-0 ${ICON_CLASS[tone]}`,
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1 text-sm",
-				children: [title && /* @__PURE__ */ jsx("p", {
-					className: "font-bold leading-snug mb-0.5",
-					children: title
-				}), /* @__PURE__ */ jsx("div", {
-					className: "font-medium leading-relaxed",
-					children
-				})]
-			}),
-			onDismiss && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onDismiss,
-				"aria-label": "Dismiss",
-				className: `-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`,
-				children: /* @__PURE__ */ jsx(X, {
-					size: 14,
-					"aria-hidden": "true"
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { Alert };
-
-//# sourceMappingURL=index1753.mjs.map

package/lib/index1753.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1753.mjs","names":[],"sources":["../src/ui-library/gallery/alert/Alert.tsx"],"sourcesContent":["/**\n * Alert — Design System Component\n *\n * Inline contextual feedback. Purely presentational.\n *\n * Tones:   info | success | warning | danger\n * Variants: default | subtle\n */\n\nimport type { ReactNode } from 'react';\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from 'lucide-react';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertProps {\n  tone: AlertTone;\n  title?: string;\n  children: ReactNode;\n  /** Show an icon matching the tone */\n  icon?: boolean;\n  /** Show a dismiss button */\n  onDismiss?: () => void;\n  /** Subtle variant uses a lighter background */\n  subtle?: boolean;\n  className?: string;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\n// Full background tones — keep semantic colors, add the DIWA left-rule\nconst TONE_FULL: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-sky-50    text-sky-800',\n  success: 'border-l-4 border-emerald-400 bg-emerald-50 text-emerald-800',\n  warning: 'border-l-4 border-amber-400  bg-amber-50  text-amber-800',\n  danger:  'border-l-4 border-rose-500   bg-rose-50   text-rose-800',\n};\n\n// Subtle: white bg, left rule is the only structural marker\nconst TONE_SUBTLE: Record<AlertTone, string> = {\n  info:    'border-l-4 border-sky-400    bg-white text-sky-700',\n  success: 'border-l-4 border-emerald-400 bg-white text-emerald-700',\n  warning: 'border-l-4 border-amber-400  bg-white text-amber-700',\n  danger:  'border-l-4 border-rose-500   bg-white text-rose-700',\n};\n\nconst ICON_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-500',\n  success: 'text-emerald-500',\n  warning: 'text-amber-500',\n  danger:  'text-rose-500',\n};\n\nconst TONE_ICON: Record<AlertTone, typeof Info> = {\n  info:    Info,\n  success: CheckCircle2,\n  warning: AlertTriangle,\n  danger:  AlertCircle,\n};\n\nconst DISMISS_CLASS: Record<AlertTone, string> = {\n  info:    'text-sky-400 hover:bg-sky-100',\n  success: 'text-emerald-400 hover:bg-emerald-100',\n  warning: 'text-amber-400 hover:bg-amber-100',\n  danger:  'text-rose-400 hover:bg-rose-100',\n};\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Alert({\n  tone,\n  title,\n  children,\n  icon = true,\n  onDismiss,\n  subtle = false,\n  className = '',\n}: AlertProps) {\n  const Icon = TONE_ICON[tone];\n  const colorClass = subtle ? TONE_SUBTLE[tone] : TONE_FULL[tone];\n\n  return (\n    <div\n      role=\"alert\"\n      className={`flex gap-3 rounded-md pl-4 pr-4 py-3.5 ${colorClass} ${className}`}\n    >\n      {icon && (\n        <Icon\n          size={20}\n          className={`mt-0.5 shrink-0 ${ICON_CLASS[tone]}`}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div className=\"min-w-0 flex-1 text-sm\">\n        {title && <p className=\"font-bold leading-snug mb-0.5\">{title}</p>}\n        <div className=\"font-medium leading-relaxed\">{children}</div>\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n          className={`-mr-1 -mt-0.5 shrink-0 rounded-lg p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current ${DISMISS_CLASS[tone]}`}\n        >\n          <X size={14} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA8BA,IAAM,YAAuC;CAC3C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAGA,IAAM,cAAyC;CAC7C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,aAAwC;CAC5C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,YAA4C;CAChD,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAEA,IAAM,gBAA2C;CAC/C,MAAS;CACT,SAAS;CACT,SAAS;CACT,QAAS;AACX;AAIA,SAAgB,MAAM,EACpB,MACA,OACA,UACA,OAAO,MACP,WACA,SAAS,OACT,YAAY,MACC;CACb,MAAM,OAAO,UAAU;CACvB,MAAM,aAAa,SAAS,YAAY,QAAQ,UAAU;CAE1D,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,0CAA0C,WAAW,GAAG;EAFrE,UAAA;GAIG,QACC,oBAAC,MAAD;IACE,MAAM;IACN,WAAW,mBAAmB,WAAW;IACzC,eAAY;GACb,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAU;KAAiC,UAAA;IAAS,CAAA,GACjE,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACzD;;GACJ,aACC,oBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,cAAW;IACX,WAAW,+HAA+H,cAAc;IAExJ,UAAA,oBAAC,GAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC3B,CAAA;EAEP;;AAET"}

package/lib/index1754.cjs

@@ -1,19 +0,0 @@
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/ui-library/gallery/error-banner/ErrorBanner.tsx
-var STYLES = {
-	error: "border-rose-100   bg-rose-50   text-rose-700",
-	warning: "border-amber-200  bg-amber-50  text-amber-800",
-	info: "border-sky-200    bg-sky-50    text-sky-800"
-};
-function ErrorBanner({ message, tone = "error", className = "" }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: tone === "error" ? "alert" : void 0,
-		"aria-live": tone !== "error" ? "polite" : void 0,
-		className: `rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`,
-		children: message
-	});
-}
-//#endregion
-exports.ErrorBanner = ErrorBanner;
-
-//# sourceMappingURL=index1754.cjs.map

package/lib/index1754.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1754.cjs","names":[],"sources":["../src/ui-library/gallery/error-banner/ErrorBanner.tsx"],"sourcesContent":["/**\n * ErrorBanner — Design System Component\n *\n * Inline feedback banner for error, warning, and info messages.\n *\n * This gallery component preserves the established visual language of\n * the production ErrorBanner from shared/components/ui.tsx:\n *   - Same tone system: 'error' | 'warning' | 'info'\n *   - Same visual treatment: rounded-2xl, border, px-5 py-4, text-sm font-bold\n *\n * Accessibility:\n *   - role=\"alert\" for error tone (polite live region for warnings/info)\n *   - aria-live for warning/info tones\n *\n * Usage:\n *   <ErrorBanner message=\"Failed to save changes.\" />\n *   <ErrorBanner message=\"Draft saved.\" tone=\"info\" />\n *   <ErrorBanner message=\"This action cannot be undone.\" tone=\"warning\" />\n */\n\nimport type { ReactNode } from 'react';\n\nexport type ErrorBannerTone = 'error' | 'warning' | 'info';\n\nexport interface ErrorBannerProps {\n  /** Primary message text */\n  message: ReactNode;\n  tone?: ErrorBannerTone;\n  className?: string;\n}\n\nconst STYLES: Record<ErrorBannerTone, string> = {\n  error:   'border-rose-100   bg-rose-50   text-rose-700',\n  warning: 'border-amber-200  bg-amber-50  text-amber-800',\n  info:    'border-sky-200    bg-sky-50    text-sky-800',\n};\n\nexport function ErrorBanner({ message, tone = 'error', className = '' }: ErrorBannerProps) {\n  return (\n    <div\n      role={tone === 'error' ? 'alert' : undefined}\n      aria-live={tone !== 'error' ? 'polite' : undefined}\n      className={`rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`}\n    >\n      {message}\n    </div>\n  );\n}\n"],"mappings":";;AA+BA,IAAM,SAA0C;CAC9C,OAAS;CACT,SAAS;CACT,MAAS;AACX;AAEA,SAAgB,YAAY,EAAE,SAAS,OAAO,SAAS,YAAY,MAAwB;CACzF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAM,SAAS,UAAU,UAAU,KAAA;EACnC,aAAW,SAAS,UAAU,WAAW,KAAA;EACzC,WAAW,kDAAkD,OAAO,MAAM,GAAG;EAE5E,UAAA;CACE,CAAA;AAET"}

package/lib/index1754.mjs

@@ -1,19 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/ui-library/gallery/error-banner/ErrorBanner.tsx
-var STYLES = {
-	error: "border-rose-100   bg-rose-50   text-rose-700",
-	warning: "border-amber-200  bg-amber-50  text-amber-800",
-	info: "border-sky-200    bg-sky-50    text-sky-800"
-};
-function ErrorBanner({ message, tone = "error", className = "" }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: tone === "error" ? "alert" : void 0,
-		"aria-live": tone !== "error" ? "polite" : void 0,
-		className: `rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`,
-		children: message
-	});
-}
-//#endregion
-export { ErrorBanner };
-
-//# sourceMappingURL=index1754.mjs.map

package/lib/index1754.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index1754.mjs","names":[],"sources":["../src/ui-library/gallery/error-banner/ErrorBanner.tsx"],"sourcesContent":["/**\n * ErrorBanner — Design System Component\n *\n * Inline feedback banner for error, warning, and info messages.\n *\n * This gallery component preserves the established visual language of\n * the production ErrorBanner from shared/components/ui.tsx:\n *   - Same tone system: 'error' | 'warning' | 'info'\n *   - Same visual treatment: rounded-2xl, border, px-5 py-4, text-sm font-bold\n *\n * Accessibility:\n *   - role=\"alert\" for error tone (polite live region for warnings/info)\n *   - aria-live for warning/info tones\n *\n * Usage:\n *   <ErrorBanner message=\"Failed to save changes.\" />\n *   <ErrorBanner message=\"Draft saved.\" tone=\"info\" />\n *   <ErrorBanner message=\"This action cannot be undone.\" tone=\"warning\" />\n */\n\nimport type { ReactNode } from 'react';\n\nexport type ErrorBannerTone = 'error' | 'warning' | 'info';\n\nexport interface ErrorBannerProps {\n  /** Primary message text */\n  message: ReactNode;\n  tone?: ErrorBannerTone;\n  className?: string;\n}\n\nconst STYLES: Record<ErrorBannerTone, string> = {\n  error:   'border-rose-100   bg-rose-50   text-rose-700',\n  warning: 'border-amber-200  bg-amber-50  text-amber-800',\n  info:    'border-sky-200    bg-sky-50    text-sky-800',\n};\n\nexport function ErrorBanner({ message, tone = 'error', className = '' }: ErrorBannerProps) {\n  return (\n    <div\n      role={tone === 'error' ? 'alert' : undefined}\n      aria-live={tone !== 'error' ? 'polite' : undefined}\n      className={`rounded-2xl border px-5 py-4 text-sm font-bold ${STYLES[tone]} ${className}`}\n    >\n      {message}\n    </div>\n  );\n}\n"],"mappings":";;AA+BA,IAAM,SAA0C;CAC9C,OAAS;CACT,SAAS;CACT,MAAS;AACX;AAEA,SAAgB,YAAY,EAAE,SAAS,OAAO,SAAS,YAAY,MAAwB;CACzF,OACE,oBAAC,OAAD;EACE,MAAM,SAAS,UAAU,UAAU,KAAA;EACnC,aAAW,SAAS,UAAU,WAAW,KAAA;EACzC,WAAW,kDAAkD,OAAO,MAAM,GAAG;EAE5E,UAAA;CACE,CAAA;AAET"}