@alixpartners/ui-components 2.0.0-beta.8 → 2.0.0

package/dist/components/Banner/Banner.d.ts

@@ -1,6 +1,8 @@
 import { ApIcon } from '../../assets/ap-icons-types';
 import { ReactNode } from 'react';
+import { InteractiveEventHandlers } from '../../types/native-events';
 type BannerProps = {
+    className?: string;
     type: 'info' | 'success' | 'warning' | 'error' | 'ai';
     size: 'sm' | 'md' | 'lg';
     content?: string;
@@ -8,7 +10,7 @@ type BannerProps = {
     icon?: ApIcon;
     isFullWidth?: boolean;
     onClose?: () => void;
-};
+} & InteractiveEventHandlers;
 /**
  * Banner component for displaying contextual messages such as info, success, warning, or error.
  *
@@ -22,5 +24,5 @@ type BannerProps = {
  * @param {() => void} [props.onClose] - Callback fired when the close button is clicked (renders close button if provided and size is not 'sm')
  * @returns {JSX.Element} The rendered Banner component
  */
-export default function Banner({ type, size, content, contentHTML, icon, isFullWidth, onClose }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export default function Banner({ type, size, content, contentHTML, icon, isFullWidth, onClose, className, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Banner/Banner.js

@@ -1,40 +1,42 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { jsx as o, jsxs as B } from "react/jsx-runtime";
 import { c as l } from "../../clsx-OuTLNxxd.js";
 import a from "../Icon/Icon.js";
-import '../../assets/Banner.css';const f = "Banner-module__root___thkfk", B = "Banner-module__info___xuru-", h = "Banner-module__lg___3Ebme", b = "Banner-module__md___ClFFt", w = "Banner-module__sm___KWc4x", g = "Banner-module__warning___3hSt-", p = "Banner-module__error___b9QKF", k = "Banner-module__success___ZM5V0", x = "Banner-module__ai___RlIcg", I = "Banner-module__inner___S3o73", N = "Banner-module__icon___ZtVmk", j = "Banner-module__closeIcon___ON0vc", y = "Banner-module__btnClose___hjsC7", n = {
-  root: f,
-  info: B,
-  lg: h,
-  md: b,
-  sm: w,
+import '../../assets/Banner.css';const h = "Banner-module__root___thkfk", b = "Banner-module__info___xuru-", w = "Banner-module__lg___3Ebme", g = "Banner-module__md___ClFFt", p = "Banner-module__sm___KWc4x", k = "Banner-module__warning___3hSt-", x = "Banner-module__error___b9QKF", I = "Banner-module__success___ZM5V0", N = "Banner-module__ai___RlIcg", j = "Banner-module__inner___S3o73", y = "Banner-module__icon___ZtVmk", K = "Banner-module__closeIcon___ON0vc", D = "Banner-module__btnClose___hjsC7", n = {
+  root: h,
+  info: b,
+  lg: w,
+  md: g,
+  sm: p,
   "full-width": "Banner-module__full-width___qGjmw",
-  warning: g,
-  error: p,
-  success: k,
-  ai: x,
-  inner: I,
-  icon: N,
-  closeIcon: j,
-  btnClose: y
+  warning: k,
+  error: x,
+  success: I,
+  ai: N,
+  inner: j,
+  icon: y,
+  closeIcon: K,
+  btnClose: D
 };
-function v({
+function E({
   type: c,
   size: e,
   content: t,
   contentHTML: s,
   icon: i = "ap-icon-info",
   isFullWidth: m,
-  onClose: _
+  onClose: _,
+  className: d,
+  ...u
 }) {
-  const d = (r) => {
+  const f = (r) => {
     (r.key === "Enter" || r.key === " ") && (r.preventDefault(), _ == null || _());
   };
-  return /* @__PURE__ */ o("div", { className: l(n.root, n[c], n[e], m && n["full-width"]), role: "alert", children: /* @__PURE__ */ u("div", { className: l(n.inner, n[c], n[e]), children: [
+  return /* @__PURE__ */ o("div", { className: l(n.root, n[c], n[e], m && n["full-width"], d), role: "alert", ...u, children: /* @__PURE__ */ B("div", { className: l(n.inner, n[c], n[e]), children: [
     /* @__PURE__ */ o(a, { icon: i, className: n.icon }),
     /* @__PURE__ */ o("span", { children: s || t }),
-    e !== "sm" && _ && /* @__PURE__ */ o("button", { onClick: _, onKeyDown: d, className: n.btnClose, "aria-label": "Close banner", children: /* @__PURE__ */ o(a, { icon: "ap-icon-close", className: n.closeIcon }) })
+    e !== "sm" && _ && /* @__PURE__ */ o("button", { onClick: _, onKeyDown: f, className: n.btnClose, "aria-label": "Close banner", children: /* @__PURE__ */ o(a, { icon: "ap-icon-close", className: n.closeIcon }) })
   ] }) });
 }
 export {
-  v as default
+  E as default
 };

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

@@ -1,5 +1,17 @@
 import { ApIcon } from '../../assets/ap-icons-types';
 import { DataAttributes } from '../../types/data-attributes';
+import { InteractiveEventHandlers } from '../../types/native-events';
+export type ButtonProps = {
+    type: 'primary' | 'secondary' | 'tertiary';
+    variant: 'default' | 'danger' | 'cancel';
+    size: 'sm' | 'md';
+    icon?: ApIcon;
+    disabled?: boolean;
+    loading?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    iconClassName?: string;
+} & DataAttributes & InteractiveEventHandlers;
 /**
  * A versatile button component that supports different types, variants, sizes, and states.
  * Used for user interactions and form submissions throughout the application.
@@ -15,17 +27,4 @@ import { DataAttributes } from '../../types/data-attributes';
  * @param {() => void} [props.onClick] - Callback fired when the button is clicked
  * @returns {JSX.Element} The rendered Button component
  */
-type ButtonProps = {
-    type: 'primary' | 'secondary' | 'tertiary';
-    variant: 'default' | 'danger' | 'cancel';
-    size: 'sm' | 'md';
-    icon?: ApIcon;
-    disabled?: boolean;
-    loading?: boolean;
-    children?: React.ReactNode;
-    onClick?: () => void;
-    className?: string;
-    iconClassName?: string;
-} & DataAttributes;
-export default function Button({ type, variant, size, icon, disabled, loading, onClick, children, className, iconClassName, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function Button({ type, variant, size, icon, disabled, loading, children, className, iconClassName, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -1,8 +1,9 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { c as d } from "../../clsx-OuTLNxxd.js";
-import B from "../Spinner/Spinner.js";
-import '../../assets/Button.css';const p = "Button-module__btn___daEdK", g = "Button-module__loading___QfItr", t = {
-  btn: p,
+import { jsxs as y, jsx as b } from "react/jsx-runtime";
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import f from "../Spinner/Spinner.js";
+import g from "../Icon/Icon.js";
+import '../../assets/Button.css';const w = "Button-module__btn___daEdK", x = "Button-module__loading___QfItr", t = {
+  btn: w,
   "btn-icon": "Button-module__btn-icon___G7m4S",
   "btn-icon-sm": "Button-module__btn-icon-sm___w7eg9",
   "btn-icon-md": "Button-module__btn-icon-md___8Ywy2",
@@ -15,32 +16,33 @@ import '../../assets/Button.css';const p = "Button-module__btn___daEdK", g = "Bu
   "btn-tertiary": "Button-module__btn-tertiary___G-7lD",
   "btn-disabled": "Button-module__btn-disabled___eg1uH",
   "btn-loading": "Button-module__btn-loading___vAg78",
-  loading: g,
+  loading: x,
   "btn-sm": "Button-module__btn-sm___KNlkv",
   "btn-md": "Button-module__btn-md___C8vqh",
   "btn-text": "Button-module__btn-text___3ccH9"
-}, y = (n) => {
-  (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click());
 };
-function K({
-  type: n,
-  variant: a,
-  size: _,
-  icon: b,
-  disabled: l = !1,
-  loading: o = !1,
-  onClick: m,
-  children: u,
-  className: s,
-  iconClassName: r,
-  ...c
+function h({
+  type: c,
+  variant: i,
+  size: o,
+  icon: l,
+  disabled: u = !1,
+  loading: e = !1,
+  children: d,
+  className: r,
+  iconClassName: s,
+  ..._
 }) {
-  return /* @__PURE__ */ i("button", { type: "button", className: d(t.btn, t[`btn-${n}`], t[`btn-${a}`], t[`btn-${_}`], l && t["btn-disabled"], s), disabled: l || o, onClick: m, onKeyDown: y, ...c, children: [
-    !!b && !o && /* @__PURE__ */ e("span", { className: d(t["btn-icon"], t[`btn-icon-${_}`], b, r) }),
-    o && /* @__PURE__ */ e(B, { size: _, color: "white", className: t["loading-spinner"] }),
-    u && /* @__PURE__ */ e("span", { className: t["btn-text"], children: u })
+  const B = (n) => {
+    var m;
+    (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click()), (m = _.onKeyDown) == null || m.call(_, n);
+  };
+  return /* @__PURE__ */ y("button", { type: "button", className: a(t.btn, t[`btn-${c}`], t[`btn-${i}`], t[`btn-${o}`], u && t["btn-disabled"], r), disabled: u || e, onKeyDown: B, ..._, children: [
+    !!l && !e && /* @__PURE__ */ b(g, { icon: l, className: a(t["btn-icon"], t[`btn-icon-${o}`], s) }),
+    e && /* @__PURE__ */ b(f, { size: o, color: "white", className: t["loading-spinner"] }),
+    d && /* @__PURE__ */ b("span", { className: t["btn-text"], children: d })
   ] });
 }
 export {
-  K as default
+  h as default
 };

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

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import { CheckedState } from '@radix-ui/react-checkbox';
+import { InteractiveEventHandlers } from '../../types/native-events';
 type CheckboxProps = {
+    className?: string;
     label: ReactNode;
     checked?: boolean;
     disabled?: boolean;
     onChange?: ((checked: CheckedState) => void) | undefined;
-};
+} & InteractiveEventHandlers;
 /**
  * Checkboxes are used when there are multiple items to select in a list.
  *
@@ -16,5 +18,5 @@ type CheckboxProps = {
  * @param {(checked: CheckedState) => void} [props.onChange] - Callback fired when the checkbox state changes
  * @returns {JSX.Element} The rendered Checkbox component
  */
-export default function Checkbox({ label, checked, disabled, onChange, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default function Checkbox({ className, label, checked, disabled, onChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
-import { jsx as u, jsxs as B, Fragment as j } from "react/jsx-runtime";
-import * as p from "react";
+import { jsx as h, jsxs as B, Fragment as j } from "react/jsx-runtime";
+import * as b from "react";
 import { useId as z, useState as G, useEffect as J } from "react";
 import U from "../Icon/Icon.js";
 import { c as P } from "../../clsx-OuTLNxxd.js";
-import { c as V, P as N, u as W, d as M, a as g, e as $ } from "../../index-CVlmPg9Z.js";
+import { c as V, P as w, u as W, d as D, a as g, e as $ } from "../../index-DWydnyjJ.js";
 import { u as Q } from "../../index-BZPx6jYI.js";
-import { P as Y } from "../../index-BvhDRUM9.js";
+import { P as Y } from "../../index-DpfPnSMn.js";
 import '../../assets/Checkbox.css';const Z = "Checkbox-module__wrapper___rznMS", ee = "Checkbox-module__root___BS5dT", te = "Checkbox-module__indicator___HXLHH", oe = "Checkbox-module__checked___XfvkJ", re = "Checkbox-module__icon___VMxEf", ce = "Checkbox-module__label___JBaRm", ne = "Checkbox-module__disabled___WagIC", C = {
   wrapper: Z,
   root: ee,
@@ -15,137 +15,137 @@ import '../../assets/Checkbox.css';const Z = "Checkbox-module__wrapper___rznMS",
   label: ce,
   disabled: ne
 };
-var y = "Checkbox", [se, ke] = V(y), [ae, S] = se(y);
+var I = "Checkbox", [se, ke] = V(I), [ae, N] = se(I);
 function de(t) {
   const {
-    __scopeCheckbox: c,
-    checked: o,
-    children: n,
+    __scopeCheckbox: n,
+    checked: c,
+    children: s,
     defaultChecked: r,
     disabled: e,
-    form: f,
-    name: s,
-    onCheckedChange: i,
-    required: a,
-    value: k = "on",
+    form: p,
+    name: i,
+    onCheckedChange: a,
+    required: l,
+    value: m = "on",
     // @ts-expect-error
-    internal_do_not_use_render: h
-  } = t, [b, v] = W({
-    prop: o,
+    internal_do_not_use_render: o
+  } = t, [u, v] = W({
+    prop: c,
     defaultProp: r ?? !1,
-    onChange: i,
-    caller: y
-  }), [_, x] = p.useState(null), [I, d] = p.useState(null), l = p.useRef(!1), E = _ ? !!f || !!_.closest("form") : (
+    onChange: a,
+    caller: I
+  }), [_, x] = b.useState(null), [y, d] = b.useState(null), f = b.useRef(!1), E = _ ? !!p || !!_.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
   ), R = {
-    checked: b,
+    checked: u,
     disabled: e,
     setChecked: v,
     control: _,
     setControl: x,
-    name: s,
-    form: f,
-    value: k,
-    hasConsumerStoppedPropagationRef: l,
-    required: a,
-    defaultChecked: m(r) ? !1 : r,
+    name: i,
+    form: p,
+    value: m,
+    hasConsumerStoppedPropagationRef: f,
+    required: l,
+    defaultChecked: k(r) ? !1 : r,
     isFormControl: E,
-    bubbleInput: I,
+    bubbleInput: y,
     setBubbleInput: d
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ h(
     ae,
     {
-      scope: c,
+      scope: n,
       ...R,
-      children: ie(h) ? h(R) : n
+      children: ie(o) ? o(R) : s
     }
   );
 }
-var D = "CheckboxTrigger", T = p.forwardRef(
-  ({ __scopeCheckbox: t, onKeyDown: c, onClick: o, ...n }, r) => {
+var M = "CheckboxTrigger", T = b.forwardRef(
+  ({ __scopeCheckbox: t, onKeyDown: n, onClick: c, ...s }, r) => {
     const {
       control: e,
-      value: f,
-      disabled: s,
-      checked: i,
-      required: a,
-      setControl: k,
-      setChecked: h,
-      hasConsumerStoppedPropagationRef: b,
+      value: p,
+      disabled: i,
+      checked: a,
+      required: l,
+      setControl: m,
+      setChecked: o,
+      hasConsumerStoppedPropagationRef: u,
       isFormControl: v,
       bubbleInput: _
-    } = S(D, t), x = M(r, k), I = p.useRef(i);
-    return p.useEffect(() => {
+    } = N(M, t), x = D(r, m), y = b.useRef(a);
+    return b.useEffect(() => {
       const d = e == null ? void 0 : e.form;
       if (d) {
-        const l = () => h(I.current);
-        return d.addEventListener("reset", l), () => d.removeEventListener("reset", l);
+        const f = () => o(y.current);
+        return d.addEventListener("reset", f), () => d.removeEventListener("reset", f);
       }
-    }, [e, h]), /* @__PURE__ */ u(
-      N.button,
+    }, [e, o]), /* @__PURE__ */ h(
+      w.button,
       {
         type: "button",
         role: "checkbox",
-        "aria-checked": m(i) ? "mixed" : i,
-        "aria-required": a,
-        "data-state": K(i),
-        "data-disabled": s ? "" : void 0,
-        disabled: s,
-        value: f,
-        ...n,
+        "aria-checked": k(a) ? "mixed" : a,
+        "aria-required": l,
+        "data-state": L(a),
+        "data-disabled": i ? "" : void 0,
+        disabled: i,
+        value: p,
+        ...s,
         ref: x,
-        onKeyDown: g(c, (d) => {
+        onKeyDown: g(n, (d) => {
           d.key === "Enter" && d.preventDefault();
         }),
-        onClick: g(o, (d) => {
-          h((l) => m(l) ? !0 : !l), _ && v && (b.current = d.isPropagationStopped(), b.current || d.stopPropagation());
+        onClick: g(c, (d) => {
+          o((f) => k(f) ? !0 : !f), _ && v && (u.current = d.isPropagationStopped(), u.current || d.stopPropagation());
         })
       }
     );
   }
 );
-T.displayName = D;
-var H = p.forwardRef(
-  (t, c) => {
+T.displayName = M;
+var H = b.forwardRef(
+  (t, n) => {
     const {
-      __scopeCheckbox: o,
-      name: n,
+      __scopeCheckbox: c,
+      name: s,
       checked: r,
       defaultChecked: e,
-      required: f,
-      disabled: s,
-      value: i,
-      onCheckedChange: a,
-      form: k,
-      ...h
+      required: p,
+      disabled: i,
+      value: a,
+      onCheckedChange: l,
+      form: m,
+      ...o
     } = t;
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ h(
       de,
       {
-        __scopeCheckbox: o,
+        __scopeCheckbox: c,
         checked: r,
         defaultChecked: e,
-        disabled: s,
-        required: f,
-        onCheckedChange: a,
-        name: n,
-        form: k,
-        value: i,
-        internal_do_not_use_render: ({ isFormControl: b }) => /* @__PURE__ */ B(j, { children: [
-          /* @__PURE__ */ u(
+        disabled: i,
+        required: p,
+        onCheckedChange: l,
+        name: s,
+        form: m,
+        value: a,
+        internal_do_not_use_render: ({ isFormControl: u }) => /* @__PURE__ */ B(j, { children: [
+          /* @__PURE__ */ h(
             T,
             {
-              ...h,
-              ref: c,
-              __scopeCheckbox: o
+              ...o,
+              ref: n,
+              __scopeCheckbox: c
             }
           ),
-          b && /* @__PURE__ */ u(
-            L,
+          u && /* @__PURE__ */ h(
+            K,
             {
-              __scopeCheckbox: o
+              __scopeCheckbox: c
             }
           )
         ] })
@@ -153,21 +153,21 @@ var H = p.forwardRef(
     );
   }
 );
-H.displayName = y;
-var q = "CheckboxIndicator", A = p.forwardRef(
-  (t, c) => {
-    const { __scopeCheckbox: o, forceMount: n, ...r } = t, e = S(q, o);
-    return /* @__PURE__ */ u(
+H.displayName = I;
+var q = "CheckboxIndicator", A = b.forwardRef(
+  (t, n) => {
+    const { __scopeCheckbox: c, forceMount: s, ...r } = t, e = N(q, c);
+    return /* @__PURE__ */ h(
       Y,
       {
-        present: n || m(e.checked) || e.checked === !0,
-        children: /* @__PURE__ */ u(
-          N.span,
+        present: s || k(e.checked) || e.checked === !0,
+        children: /* @__PURE__ */ h(
+          w.span,
           {
-            "data-state": K(e.checked),
+            "data-state": L(e.checked),
             "data-disabled": e.disabled ? "" : void 0,
             ...r,
-            ref: c,
+            ref: n,
             style: { pointerEvents: "none", ...t.style }
           }
         )
@@ -176,51 +176,51 @@ var q = "CheckboxIndicator", A = p.forwardRef(
   }
 );
 A.displayName = q;
-var F = "CheckboxBubbleInput", L = p.forwardRef(
-  ({ __scopeCheckbox: t, ...c }, o) => {
+var F = "CheckboxBubbleInput", K = b.forwardRef(
+  ({ __scopeCheckbox: t, ...n }, c) => {
     const {
-      control: n,
+      control: s,
       hasConsumerStoppedPropagationRef: r,
       checked: e,
-      defaultChecked: f,
-      required: s,
-      disabled: i,
-      name: a,
-      value: k,
-      form: h,
-      bubbleInput: b,
+      defaultChecked: p,
+      required: i,
+      disabled: a,
+      name: l,
+      value: m,
+      form: o,
+      bubbleInput: u,
       setBubbleInput: v
-    } = S(F, t), _ = M(o, v), x = Q(e), I = $(n);
-    p.useEffect(() => {
-      const l = b;
-      if (!l) return;
-      const E = window.HTMLInputElement.prototype, w = Object.getOwnPropertyDescriptor(
+    } = N(F, t), _ = D(c, v), x = Q(e), y = $(s);
+    b.useEffect(() => {
+      const f = u;
+      if (!f) return;
+      const E = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
         E,
         "checked"
       ).set, O = !r.current;
-      if (x !== e && w) {
+      if (x !== e && S) {
         const X = new Event("click", { bubbles: O });
-        l.indeterminate = m(e), w.call(l, m(e) ? !1 : e), l.dispatchEvent(X);
+        f.indeterminate = k(e), S.call(f, k(e) ? !1 : e), f.dispatchEvent(X);
       }
-    }, [b, x, e, r]);
-    const d = p.useRef(m(e) ? !1 : e);
-    return /* @__PURE__ */ u(
-      N.input,
+    }, [u, x, e, r]);
+    const d = b.useRef(k(e) ? !1 : e);
+    return /* @__PURE__ */ h(
+      w.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: f ?? d.current,
-        required: s,
-        disabled: i,
-        name: a,
-        value: k,
-        form: h,
-        ...c,
+        defaultChecked: p ?? d.current,
+        required: i,
+        disabled: a,
+        name: l,
+        value: m,
+        form: o,
+        ...n,
         tabIndex: -1,
         ref: _,
         style: {
-          ...c.style,
-          ...I,
+          ...n.style,
+          ...y,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -234,34 +234,37 @@ var F = "CheckboxBubbleInput", L = p.forwardRef(
     );
   }
 );
-L.displayName = F;
+K.displayName = F;
 function ie(t) {
   return typeof t == "function";
 }
-function m(t) {
+function k(t) {
   return t === "indeterminate";
 }
-function K(t) {
-  return m(t) ? "indeterminate" : t ? "checked" : "unchecked";
+function L(t) {
+  return k(t) ? "indeterminate" : t ? "checked" : "unchecked";
 }
 function _e({
-  label: t,
+  className: t,
+  label: n,
   checked: c = !1,
-  disabled: o = !1,
-  onChange: n
+  disabled: s = !1,
+  onChange: r,
+  ...e
 }) {
-  const r = z(), [e, f] = G(c);
+  const p = z(), [i, a] = G(c);
   J(() => {
-    f(c);
+    a(c);
   }, [c]);
-  const s = (a) => {
-    f(a), n == null || n(a);
-  }, i = (a) => {
-    !o && a.key === " " && (a.preventDefault(), s == null || s(!e));
+  const l = (o) => {
+    a(o), r == null || r(o);
+  }, m = (o) => {
+    var u;
+    !s && o.key === " " && (o.preventDefault(), l == null || l(!i)), (u = e.onKeyDown) == null || u.call(e, o);
   };
-  return /* @__PURE__ */ B("div", { className: P(C.wrapper, o && C.disabled), children: [
-    /* @__PURE__ */ u(H, { id: r, className: P(C.root, e && C.checked), checked: e, onCheckedChange: s, onKeyDown: i, disabled: o, children: /* @__PURE__ */ u(A, { className: P(C.indicator), children: /* @__PURE__ */ u(U, { icon: "ap-icon-check", className: C.icon }) }) }),
-    t && /* @__PURE__ */ u("label", { className: C.label, htmlFor: r, children: t })
+  return /* @__PURE__ */ B("div", { className: P(C.wrapper, s && C.disabled, t), children: [
+    /* @__PURE__ */ h(H, { id: p, className: P(C.root, i && C.checked), checked: i, onCheckedChange: l, onKeyDown: m, disabled: s, ...e, children: /* @__PURE__ */ h(A, { className: P(C.indicator), children: /* @__PURE__ */ h(U, { icon: "ap-icon-check", className: C.icon }) }) }),
+    n && /* @__PURE__ */ h("label", { className: C.label, htmlFor: p, children: n })
   ] });
 }
 export {

package/dist/components/Creatable/Creatable.d.ts

@@ -1,6 +1,8 @@
 import { DataAttributes } from '../../types/data-attributes';
 import { DropdownOption } from '../Dropdown/Dropdown';
+import { InteractiveEventHandlers } from '../../types/native-events';
 type CreatableProps = {
+    className?: string;
     label: string;
     required?: boolean;
     options: DropdownOption[];
@@ -10,9 +12,10 @@ type CreatableProps = {
     helpLink?: string;
     helpLinkText?: string;
     disabled?: boolean;
+    caseSensitive?: boolean;
     errorMessage?: string;
     onChange?: (selectedValues: string[]) => void;
-} & DataAttributes;
+} & DataAttributes & InteractiveEventHandlers;
 /**
  * A dropdown input that lets users create new items on the fly.
  *
@@ -29,10 +32,11 @@ type CreatableProps = {
  * @param {[string]} [props.helpLink] - Optional URL for help link displayed with helper text
  * @param {[string]} [props.helpLinkText] - Optional help link label to display when `helpLink` is provided
  * @param {[boolean]} [props.disabled] - Whether the field is disabled
+ * @param {[boolean]} [props.caseSensitive] - Whether to perform case-sensitive matching when checking for existing options in creatable mode (defaults to false)
  * @param {[string]} [props.errorMessage] - Optional error message displayed below the field
  * @param {(selectedValues: string[]) => void} [props.onChange] - Callback fired when selection changes
  * @param {DataAttributes} [props.data-*] - Additional `data-` attributes forwarded to the root element
  * @returns {JSX.Element} The rendered Creatable component
  */
-export default function Creatable({ label, required, multiSelect, value, helpText, helpLink, helpLinkText, disabled, errorMessage, onChange, ...props }: CreatableProps): import("react/jsx-runtime").JSX.Element;
+export default function Creatable({ className, label, required, multiSelect, value, helpText, helpLink, helpLinkText, disabled, caseSensitive, errorMessage, onChange, onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseOver, onMouseOut, onMouseMove, onKeyDown, onKeyUp, onFocus, onBlur, ...props }: CreatableProps): import("react/jsx-runtime").JSX.Element;
 export {};