@pglevy/sailwind 0.4.0 → 0.5.1

package/README.md

@@ -1,6 +1,8 @@
 # Sailwind
 
-React component library for prototyping Appian applications with SAIL-compatible syntax.
+[![npm version](https://img.shields.io/npm/v/@pglevy/sailwind)](https://www.npmjs.com/package/@pglevy/sailwind)
+
+A React component library for vibe coding that speaks Appian SAIL
 
 ## Overview
 
@@ -20,6 +22,20 @@ Browse the **[Component Reference](https://pglevy.github.io/sailwind/)** to see
 npm install @pglevy/sailwind
 ```
 
+### Peer Dependencies
+
+Sailwind requires React 18 or 19 as a peer dependency:
+
+```bash
+npm install react react-dom
+```
+
+Supported versions:
+- `react` — `^18.0.0 || ^19.0.0`
+- `react-dom` — `^18.0.0 || ^19.0.0`
+
+These are listed as `peerDependencies` in the package, so your project needs to provide them.
+
 ### Setup
 
 Import the CSS in your main entry file (e.g., `main.tsx` or `App.tsx`):
@@ -122,7 +138,8 @@ a!tagField(
 
 - **[Component Reference](https://pglevy.github.io/sailwind/)** — Live Storybook with all components
 - **[TAILWIND-SAIL-MAPPING.md](TAILWIND-SAIL-MAPPING.md)** — Tailwind to SAIL style mappings
-- **[CLAUDE.md](CLAUDE.md)** — Instructions for LLM-assisted development
+- **[CONTRIBUTING.md](CONTRIBUTING.md)** — How to contribute to the project
+- **[AGENTS.md](AGENTS.md)** — Guidance for AI agents working with the library
 - **[SAIL Docs](https://docs.appian.com/suite/help/25.3/)** — Official Appian SAIL reference
 
 ## License

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

@@ -6,6 +6,19 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        style: {
+            control: "select";
+            options: string[];
+        };
+        color: {
+            control: "text";
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI;;;;;;;CAK2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAK3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAU2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWidget.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGnE,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AACzD,KAAK,WAAW,GAAG,UAAU,GAAG,MAAM,CAAA;AACtC,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAA;AAEnC;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,gDAAgD;IAChD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAA;IAClC,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+LpD,CAAA"}
+{"version":3,"file":"ButtonWidget.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGnE,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AACzD,KAAK,WAAW,GAAG,UAAU,GAAG,MAAM,CAAA;AACtC,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAA;AAEnC;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,gDAAgD;IAChD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAA;IAClC,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgNpD,CAAA"}

package/dist/components/Button/ButtonWidget.js

@@ -1,28 +1,28 @@
-import { jsxs as R, jsx as l } from "react/jsx-runtime";
+import { jsxs as j, jsx as c } from "react/jsx-runtime";
 import "react";
-import * as w from "lucide-react";
-import { mergeClasses as M } from "../../utils/classNames.js";
-const j = ({
-  label: a,
-  style: e = "OUTLINE",
-  color: t = "ACCENT",
-  size: d = "STANDARD",
-  width: p,
-  disabled: b = !1,
-  submit: c = !1,
-  showWhen: f = !0,
-  icon: i,
-  iconPosition: g = "START",
-  accessibilityText: h,
-  tooltip: C,
-  loadingIndicator: o = !1,
-  saveInto: A,
-  onClick: x,
-  value: E,
-  className: N
+import * as W from "lucide-react";
+import { mergeClasses as Y } from "../../utils/classNames.js";
+const K = ({
+  label: i,
+  style: t = "OUTLINE",
+  color: e = "ACCENT",
+  size: u = "STANDARD",
+  width: A,
+  disabled: l = !1,
+  submit: x = !1,
+  showWhen: E = !0,
+  icon: s,
+  iconPosition: p = "START",
+  accessibilityText: N,
+  tooltip: f,
+  loadingIndicator: n = !1,
+  saveInto: T,
+  onClick: S,
+  value: I,
+  className: m
 }) => {
-  if (!f) return null;
-  const T = {
+  if (!E) return null;
+  const v = {
     SMALL: "px-3 py-2 text-sm",
     // 12px horizontal, 8px vertical
     STANDARD: "px-4 py-2 text-base",
@@ -31,80 +31,86 @@ const j = ({
     // 24px horizontal, 12px vertical
     LARGE: "px-10 py-4 text-xl"
     // 40px horizontal, 16px vertical
-  }, S = p === "FILL" ? "w-full" : "w-auto", m = () => {
-    if (!t.startsWith("#")) return;
+  }, D = A === "FILL" ? "w-full" : "w-auto", y = (r) => {
+    const o = parseInt(r.slice(1, 3), 16), h = parseInt(r.slice(3, 5), 16), b = parseInt(r.slice(5, 7), 16), d = ($) => {
+      const g = $ / 255;
+      return g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+    }, C = 0.2126 * d(o) + 0.7152 * d(h) + 0.0722 * d(b), V = (1 + 0.05) / (C + 0.05), U = (C + 0.05) / (0 + 0.05);
+    return V >= U ? "#ffffff" : "#000000";
+  }, L = () => {
+    if (!e.startsWith("#")) return;
     const r = {};
-    return e === "SOLID" ? (r.backgroundColor = t, r.borderColor = "transparent", r.color = "#ffffff") : e === "OUTLINE" ? (r.borderColor = t, r.color = t, r.backgroundColor = "#ffffff") : (e === "GHOST" || e === "LINK") && (r.color = t, r.borderColor = "transparent"), Object.keys(r).length > 0 ? r : void 0;
-  }, I = () => {
-    if (t.startsWith("#"))
+    return t === "SOLID" ? (r.backgroundColor = e, r.borderColor = "transparent", r.color = y(e)) : t === "OUTLINE" ? (r.borderColor = e, r.color = e, r.backgroundColor = "#ffffff") : (t === "GHOST" || t === "LINK") && (r.color = e, r.borderColor = "transparent"), Object.keys(r).length > 0 ? r : void 0;
+  }, O = () => {
+    if (e.startsWith("#"))
       return "border";
-    const r = t;
-    return e === "SOLID" ? {
+    const r = e;
+    return t === "SOLID" ? {
       ACCENT: "border border-transparent bg-blue-500 text-white hover:bg-blue-700",
       POSITIVE: "border border-transparent bg-green-700 text-white hover:bg-green-900",
       NEGATIVE: "border border-transparent bg-red-700 text-white hover:bg-red-900",
       SECONDARY: "border border-transparent bg-gray-700 text-white hover:bg-gray-900",
       STANDARD: "border border-transparent bg-gray-900 text-white hover:bg-gray-700"
-    }[r] : e === "OUTLINE" ? {
+    }[r] : t === "OUTLINE" ? {
       ACCENT: "border border-blue-500 text-blue-500 bg-white hover:bg-blue-100",
       POSITIVE: "border border-green-700 text-green-700 bg-white hover:bg-green-100",
       NEGATIVE: "border border-red-700 text-red-700 bg-white hover:bg-red-100",
       SECONDARY: "border border-gray-700 text-gray-700 bg-white hover:bg-gray-100",
       STANDARD: "border border-gray-900 text-gray-900 bg-white hover:bg-gray-100"
-    }[r] : e === "GHOST" ? {
+    }[r] : t === "GHOST" ? {
       ACCENT: "border border-transparent text-blue-500 hover:bg-blue-100",
       POSITIVE: "border border-transparent text-green-700 hover:bg-green-100",
       NEGATIVE: "border border-transparent text-red-700 hover:bg-red-100",
       SECONDARY: "border border-transparent text-gray-700 hover:bg-gray-100",
       STANDARD: "border border-transparent text-gray-900 hover:bg-gray-100"
-    }[r] : e === "LINK" ? {
+    }[r] : t === "LINK" ? {
       ACCENT: "border border-transparent text-blue-500 hover:underline",
       POSITIVE: "border border-transparent text-green-700 hover:underline",
       NEGATIVE: "border border-transparent text-red-700 hover:underline",
       SECONDARY: "border border-transparent text-gray-700 hover:underline",
       STANDARD: "border border-transparent text-gray-900 hover:underline"
     }[r] : "";
-  }, D = () => "", v = `
+  }, w = () => "", R = `
     inline-flex items-center justify-center gap-1
     font-medium transition-colors h-auto rounded-sm
     focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
-    ${T[d]}
-    ${S}
-    ${D()}
-    ${I()}
-    ${b || o ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-  `.replace(/\s+/g, " ").trim(), y = M(v, N), L = () => {
-    const r = x || A;
-    r && !b && !o && r(E);
-  }, s = (() => {
-    if (!i) return null;
-    const r = i.split("-").map((u) => u.charAt(0).toUpperCase() + u.slice(1)).join(""), n = w[r];
-    return n ? /* @__PURE__ */ l(n, { size: {
+    ${v[u]}
+    ${D}
+    ${w()}
+    ${O()}
+    ${l || n ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+  `.replace(/\s+/g, " ").trim(), M = Y(R, m), k = () => {
+    const r = S || T;
+    r && !l && !n && r(I);
+  }, a = (() => {
+    if (!s) return null;
+    const r = s.split("-").map((b) => b.charAt(0).toUpperCase() + b.slice(1)).join(""), o = W[r];
+    return o ? /* @__PURE__ */ c(o, { size: {
       SMALL: 14,
       STANDARD: 16,
       MEDIUM: 18,
       LARGE: 20
-    }[d], "aria-hidden": "true" }) : (console.warn(`Icon "${i}" not found in Lucide icons`), null);
-  })(), O = m();
-  return /* @__PURE__ */ R(
+    }[u], "aria-hidden": "true" }) : (console.warn(`Icon "${s}" not found in Lucide icons`), null);
+  })(), G = L();
+  return /* @__PURE__ */ j(
     "button",
     {
-      type: c ? "submit" : "button",
-      onClick: L,
-      disabled: b || o,
-      className: y,
-      style: O,
-      "aria-label": h || a,
-      title: C,
+      type: x ? "submit" : "button",
+      onClick: k,
+      disabled: l || n,
+      className: M,
+      style: G,
+      "aria-label": N || i || f || (s ? s.replace(/-/g, " ") : void 0),
+      title: f,
       children: [
-        o && /* @__PURE__ */ l("span", { className: "animate-spin", "aria-label": "loading", children: "⟳" }),
-        !o && s && g === "START" && s,
-        a && /* @__PURE__ */ l("span", { children: a }),
-        !o && s && g === "END" && s
+        n && /* @__PURE__ */ c("span", { className: "animate-spin", "aria-label": "loading", children: "⟳" }),
+        !n && a && p === "START" && a,
+        i && /* @__PURE__ */ c("span", { children: i }),
+        !n && a && p === "END" && a
       ]
     }
   );
 };
 export {
-  j as ButtonWidget
+  K as ButtonWidget
 };

package/dist/components/Card/Card.stories.d.ts

@@ -6,6 +6,36 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        shape: {
+            control: "select";
+            options: string[];
+        };
+        padding: {
+            control: "select";
+            options: string[];
+        };
+        style: {
+            control: "select";
+            options: string[];
+        };
+        decorativeBarPosition: {
+            control: "select";
+            options: string[];
+        };
+        decorativeBarColor: {
+            control: "select";
+            options: string[];
+        };
+        marginAbove: {
+            control: "select";
+            options: string[];
+        };
+        marginBelow: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Card/Card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;CAKyB,CAAA;AAEnC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAe9B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAehC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAA"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcyB,CAAA;AAEnC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAe9B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAehC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAA"}

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -6,6 +6,28 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        labelPosition: {
+            control: "select";
+            options: string[];
+        };
+        choiceLayout: {
+            control: "select";
+            options: string[];
+        };
+        choiceStyle: {
+            control: "select";
+            options: string[];
+        };
+        choicePosition: {
+            control: "select";
+            options: string[];
+        };
+        spacing: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Checkbox/Checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI;;;;;;;CAK4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,KAWvC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA8B/B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkB/B,CAAA"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAK3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAY4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,KAWvC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkB/B,CAAA"}

package/dist/components/Checkbox/CheckboxField.js

@@ -1,79 +1,82 @@
-import { jsx as r, jsxs as N, Fragment as y } from "react/jsx-runtime";
+import { jsx as r, jsxs as x, Fragment as P } from "react/jsx-runtime";
 import "react";
-import { FieldWrapper as P } from "../shared/FieldWrapper.js";
-const Y = ({
+import { FieldWrapper as H } from "../shared/FieldWrapper.js";
+const X = ({
   label: C,
-  instructions: g,
-  required: m = !1,
-  disabled: a = !1,
-  choiceLabels: x,
-  choiceValues: R,
+  instructions: m,
+  required: g = !1,
+  disabled: n = !1,
+  choiceLabels: R,
+  choiceValues: b,
   value: i = [],
   validations: u = [],
-  saveInto: b,
-  onChange: T,
-  validationGroup: H,
-  requiredMessage: A,
-  align: D,
-  labelPosition: S = "ABOVE",
-  helpTooltip: j,
+  saveInto: T,
+  onChange: S,
+  validationGroup: L,
+  requiredMessage: h,
+  align: A,
+  labelPosition: j = "ABOVE",
+  helpTooltip: k,
   choiceLayout: c = "STACKED",
-  accessibilityText: k,
-  showWhen: w = !0,
-  choiceStyle: t = "STANDARD",
-  spacing: h = "STANDARD",
+  accessibilityText: w,
+  showWhen: M = !0,
+  choiceStyle: a = "STANDARD",
+  spacing: D = "STANDARD",
   data: U,
   sort: W,
   marginAbove: v = "NONE",
-  marginBelow: M = "STANDARD",
+  marginBelow: B = "STANDARD",
   choicePosition: O
 }) => {
-  if (!w) return null;
-  const s = `checkboxfield-${Math.random().toString(36).substr(2, 9)}`, $ = O ?? (t === "CARDS" ? "END" : "START"), B = {
+  if (!M) return null;
+  const s = `checkboxfield-${Math.random().toString(36).substr(2, 9)}`, $ = O ?? (a === "CARDS" ? "END" : "START"), F = {
     STANDARD: c === "STACKED" ? "gap-2" : "gap-4",
     MORE: c === "STACKED" ? "gap-4" : "gap-6",
     EVEN_MORE: c === "STACKED" ? "gap-6" : "gap-8"
-  }, F = {
+  }, K = {
     STANDARD: "gap-2",
     MORE: "gap-4",
     EVEN_MORE: "gap-6"
-  }, K = {
+  }, V = {
     LEFT: "justify-start",
     START: "justify-start",
     CENTER: "justify-center",
     RIGHT: "justify-end",
     END: "justify-end"
-  }, E = (o, e) => {
-    const n = T || b;
-    if (!n) return;
-    const l = e ? [...i, o] : i.filter((d) => d !== o);
-    n(l);
-  }, p = u.length > 0, V = m && !i.length && A, _ = /* @__PURE__ */ r(
+  }, E = (t, e) => {
+    const o = S || T;
+    if (!o) return;
+    const l = e ? [...i, t] : i.filter((d) => d !== t);
+    o(l);
+  }, p = u.length > 0, _ = g && !i.length && h, y = /* @__PURE__ */ r(
     "div",
     {
       className: [
         c === "STACKED" ? "flex flex-col" : "flex flex-wrap",
-        B[h],
-        D && K[D]
+        F[D],
+        A && V[A]
       ].filter(Boolean).join(" "),
       role: "group",
-      "aria-describedby": g ? `${s}-instructions` : void 0,
-      children: x.map((o, e) => {
-        const n = R[e], l = i.includes(n), d = `${s}-choice-${e}`, I = [
+      "aria-describedby": m ? `${s}-instructions` : void 0,
+      children: R.map((t, e) => {
+        const o = b[e], l = i.includes(o), d = `${s}-choice-${e}`, I = [
           "flex",
           "items-center",
-          F[h],
+          K[D],
           $ === "END" && "flex-row-reverse",
-          t === "CARDS" && "border border-gray-200 rounded-sm p-4 hover:border-blue-500 transition-colors cursor-pointer",
-          t === "CARDS" && l && "border-blue-500 bg-blue-50",
-          a && "opacity-50 cursor-not-allowed"
+          a === "CARDS" && "border border-gray-200 rounded-sm p-4 hover:border-blue-500 transition-colors cursor-pointer",
+          a === "CARDS" && l && "border-blue-500 bg-blue-50",
+          n && "opacity-50 cursor-not-allowed"
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ N(
+        return /* @__PURE__ */ x(
           "div",
           {
             className: I,
             onClick: (f) => {
-              t === "CARDS" && !a && f.target.tagName !== "INPUT" && E(n, !l);
+              if (a === "CARDS" && !n) {
+                const N = f.target;
+                N.tagName !== "INPUT" && N.tagName !== "LABEL" && E(o, !l);
+              }
             },
             children: [
               /* @__PURE__ */ r(
@@ -82,11 +85,11 @@ const Y = ({
                   id: d,
                   type: "checkbox",
                   checked: l,
-                  disabled: a,
-                  onChange: (f) => E(n, f.target.checked),
+                  disabled: n,
+                  onChange: (f) => E(o, f.target.checked),
                   className: [
                     "h-4 w-4 rounded border-gray-200 text-blue-500 focus:ring-blue-500",
-                    a ? "cursor-not-allowed" : "cursor-pointer"
+                    n ? "cursor-not-allowed" : "cursor-pointer"
                   ].filter(Boolean).join(" "),
                   "aria-invalid": p,
                   "aria-errormessage": p ? `${s}-error` : void 0
@@ -95,13 +98,13 @@ const Y = ({
               /* @__PURE__ */ r(
                 "label",
                 {
-                  htmlFor: t === "CARDS" ? void 0 : d,
+                  htmlFor: d,
                   className: [
                     "text-base text-gray-900",
-                    t === "CARDS" && "flex-1",
-                    a ? "cursor-not-allowed" : "cursor-pointer"
+                    a === "CARDS" && "flex-1",
+                    n ? "cursor-not-allowed" : "cursor-pointer"
                   ].filter(Boolean).join(" "),
-                  children: o
+                  children: t
                 }
               )
             ]
@@ -110,27 +113,27 @@ const Y = ({
         );
       })
     }
-  ), G = /* @__PURE__ */ N(y, { children: [
-    p && /* @__PURE__ */ r("div", { id: `${s}-error`, className: "mt-2", role: "alert", children: u.map((o, e) => /* @__PURE__ */ r("p", { className: "text-sm text-red-700", children: o }, e)) }),
-    V && /* @__PURE__ */ r("p", { className: "text-sm text-red-700 mt-2", role: "alert", children: A })
+  ), G = /* @__PURE__ */ x(P, { children: [
+    p && /* @__PURE__ */ r("div", { id: `${s}-error`, className: "mt-2", role: "alert", children: u.map((t, e) => /* @__PURE__ */ r("p", { className: "text-sm text-red-700", children: t }, e)) }),
+    _ && /* @__PURE__ */ r("p", { className: "text-sm text-red-700 mt-2", role: "alert", children: h })
   ] });
   return /* @__PURE__ */ r(
-    P,
+    H,
     {
       label: C,
-      labelPosition: S,
-      required: m,
-      instructions: g,
-      helpTooltip: j,
-      accessibilityText: k,
+      labelPosition: j,
+      required: g,
+      instructions: m,
+      helpTooltip: k,
+      accessibilityText: w,
       inputId: s,
       marginAbove: v,
-      marginBelow: M,
+      marginBelow: B,
       footer: G,
-      children: _
+      children: y
     }
   );
 };
 export {
-  Y as CheckboxField
+  X as CheckboxField
 };

package/dist/components/Dialog/Dialog.stories.d.ts

@@ -6,6 +6,16 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        width: {
+            control: "select";
+            options: string[];
+        };
+        height: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Dialog/Dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,QAAA,MAAM,IAAI;;;;;;;CAK0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuDxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6ChC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAqBxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA"}
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAS0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuExB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA4DhC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAqBxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA"}

package/dist/components/Dropdown/Dropdown.stories.d.ts

@@ -6,6 +6,16 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        labelPosition: {
+            control: "select";
+            options: string[];
+        };
+        searchDisplay: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Dropdown/Dropdown.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAK3D,QAAA,MAAM,IAAI;;;;;;;CAK4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAiBhC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAc9B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAkBnC,CAAA"}
+{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAS4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAkCrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAiBhC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAuC7B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAsB/B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA2BhC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAA"}

package/dist/components/Heading/Heading.stories.d.ts

@@ -9,6 +9,35 @@ declare const meta: {
     args: {
         text: string;
     };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        headingTag: {
+            control: "select";
+            options: string[];
+        };
+        fontWeight: {
+            control: "select";
+            options: string[];
+        };
+        align: {
+            control: "select";
+            options: string[];
+        };
+        marginAbove: {
+            control: "select";
+            options: string[];
+        };
+        marginBelow: {
+            control: "select";
+            options: string[];
+        };
+        color: {
+            control: "text";
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Heading/Heading.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;CAQ2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA"}
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA"}