@blakesteve/roster 5.2.0 → 5.3.0

package/dist/components/atoms/Combobox/Combobox.js

@@ -1,81 +1,82 @@
 "use client";
 import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import * as I from "react";
-import { Fragment as L } from "react";
-import { Combobox as U, ComboboxInput as _, ComboboxButton as H, ComboboxOptions as S, ComboboxOption as h } from "../../../node_modules/@headlessui/react/dist/components/combobox/combobox.js";
-import { Description as j } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as A } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Label as R } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { Transition as T } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-import { FontAwesomeIcon as q } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faChevronDown as B } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import * as U from "react";
+import { Fragment as _ } from "react";
+import { Combobox as H, ComboboxInput as S, ComboboxButton as j, ComboboxOptions as A, ComboboxOption as v } from "../../../node_modules/@headlessui/react/dist/components/combobox/combobox.js";
+import { Description as R } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as T } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Label as q } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { Transition as B } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { FontAwesomeIcon as E } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faChevronDown as V } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as e } from "../../../lib/utils.js";
-import { inputVariants as E } from "../Input/input-variants.js";
-import { PopupOption as V } from "../../../internal/PopupOption.js";
-import { useDarkScope as W, POPUP_ANCHOR as K, POPUP_WIDTH_OF_INPUT as Q, POPUP_PANEL as Z, popupInDarkPalette as G } from "../../../internal/popup.js";
-const J = (s, o) => {
+import { isFieldInvalid as W, withoutInvalidProps as K } from "../../../internal/field-invalid.js";
+import { inputVariants as Q } from "../Input/input-variants.js";
+import { PopupOption as Z } from "../../../internal/PopupOption.js";
+import { useDarkScope as G, POPUP_ANCHOR as J, POPUP_WIDTH_OF_INPUT as X, POPUP_PANEL as Y, popupInDarkPalette as $ } from "../../../internal/popup.js";
+const M = (s, o) => {
   const a = o.trim().toLowerCase();
-  return a ? s.filter((i) => i.label.toLowerCase().includes(a)) : s;
-}, mt = ({
+  return a ? s.filter((l) => l.label.toLowerCase().includes(a)) : s;
+}, ft = ({
   options: s,
   value: o,
   onChange: a,
-  placeholder: i = "Search...",
+  placeholder: l = "Search...",
   disabled: c = !1,
-  variant: p,
-  size: l,
-  error: v,
-  label: d,
+  variant: d,
+  size: i,
+  error: P,
+  label: p,
   helperText: f,
-  errorMessage: m,
+  errorMessage: n,
   className: y,
   inputClassName: N,
-  optionsClassName: P,
-  emptyMessage: C = "No matches",
-  filter: k = J,
-  ...g
+  optionsClassName: C,
+  emptyMessage: k = "No matches",
+  filter: g = M,
+  ...u
 }) => {
-  const [O, u] = I.useState(""), { ref: w, inDarkScope: D } = W(), n = !!m || v, x = k(s, O), F = s.find((r) => r.value === o) ?? null;
+  const [O, x] = U.useState(""), { ref: w, inDarkScope: F } = G(), m = !!n || P, I = W(m, u), D = K(u), h = g(s, O), L = s.find((r) => r.value === o) ?? null;
   return /* @__PURE__ */ b(
-    A,
+    T,
     {
       disabled: c,
       className: e("rst:flex rst:flex-col rst:gap-1.5", y),
-      ...g,
+      ...D,
       children: [
-        d && /* @__PURE__ */ t(R, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: d }),
+        p && /* @__PURE__ */ t(q, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: p }),
         /* @__PURE__ */ t(
-          U,
+          H,
           {
             value: o ?? null,
             onChange: a,
             disabled: c,
             children: /* @__PURE__ */ b("div", { ref: w, className: "rst:relative", children: [
               /* @__PURE__ */ t(
-                _,
+                S,
                 {
-                  "aria-invalid": n || void 0,
+                  "aria-invalid": I || void 0,
                   className: e(
-                    E({ variant: p, size: l, error: n }),
+                    Q({ variant: d, size: i, error: m }),
                     N,
                     "rst:pr-9"
                   ),
-                  placeholder: i,
-                  displayValue: () => F?.label ?? "",
-                  onChange: (r) => u(r.target.value)
+                  placeholder: l,
+                  displayValue: () => L?.label ?? "",
+                  onChange: (r) => x(r.target.value)
                 }
               ),
               /* @__PURE__ */ t(
-                H,
+                j,
                 {
                   className: e(
                     "rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:w-11 rst:cursor-pointer rst:items-center rst:justify-end",
-                    l === "sm" ? "rst:pr-2.5" : "rst:pr-3"
+                    i === "sm" ? "rst:pr-2.5" : "rst:pr-3"
                   ),
                   children: /* @__PURE__ */ t(
-                    q,
+                    E,
                     {
-                      icon: B,
+                      icon: V,
                       className: "rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500",
                       "aria-hidden": "true"
                     }
@@ -83,43 +84,43 @@ const J = (s, o) => {
                 }
               ),
               /* @__PURE__ */ t(
-                T,
+                B,
                 {
-                  as: L,
+                  as: _,
                   leave: "rst:transition rst:ease-in rst:duration-100",
                   leaveFrom: "rst:opacity-100",
                   leaveTo: "rst:opacity-0",
-                  afterLeave: () => u(""),
+                  afterLeave: () => x(""),
                   children: /* @__PURE__ */ t(
-                    S,
+                    A,
                     {
-                      anchor: K,
+                      anchor: J,
                       className: e(
-                        G(D, p) && "dark",
-                        Z,
+                        $(F, d) && "dark",
+                        Y,
                         /* `--input-width`, not `--button-width`: the button here is
                            the chevron, so matching it renders a 20px sliver. */
-                        Q,
-                        P
+                        X,
+                        C
                       ),
-                      children: x.length === 0 ? /* @__PURE__ */ t(
-                        h,
+                      children: h.length === 0 ? /* @__PURE__ */ t(
+                        v,
                         {
                           value: "",
                           disabled: !0,
                           className: e(
                             "rst:px-4 rst:py-2.5 rst:text-sm rst:opacity-70",
-                            l === "sm" && "rst:px-3 rst:py-2"
+                            i === "sm" && "rst:px-3 rst:py-2"
                           ),
-                          children: C
+                          children: k
                         }
-                      ) : x.map((r) => /* @__PURE__ */ t(
-                        V,
+                      ) : h.map((r) => /* @__PURE__ */ t(
+                        Z,
                         {
-                          as: h,
+                          as: v,
                           value: r.value,
                           disabled: r.disabled,
-                          size: l,
+                          size: i,
                           children: r.label
                         },
                         r.value
@@ -131,14 +132,14 @@ const J = (s, o) => {
             ] })
           }
         ),
-        (f || m) && /* @__PURE__ */ t(
-          j,
+        (f || n) && /* @__PURE__ */ t(
+          R,
           {
             className: e(
               "rst:text-xs rst:text-left",
-              n ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
+              m ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
             ),
-            children: m || f
+            children: n || f
           }
         )
       ]
@@ -146,5 +147,5 @@ const J = (s, o) => {
   );
 };
 export {
-  mt as Combobox
+  ft as Combobox
 };

package/dist/components/atoms/InlineCode/inline-code-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-mono rst:text-[0.8125rem]",{variants:{colorScheme:{primary:"rst:text-primary-600 rst:dark:text-primary-400",neutral:"rst:text-gray-800 rst:dark:text-gray-200",current:"rst:text-current"},surface:{none:"",soft:"rst:rounded rst:bg-gray-100 rst:px-1 rst:py-0.5 rst:dark:bg-gray-800"}},defaultVariants:{colorScheme:"primary",surface:"none"}});exports.inlineCodeVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-mono rst:text-[0.8125rem]",{variants:{colorScheme:{primary:"rst:text-primary-600 rst:dark:text-primary-400",neutral:"rst:text-gray-800 rst:dark:text-gray-200",current:"rst:text-current"},surface:{none:"",soft:"rst:rounded-sm rst:bg-gray-100 rst:px-1 rst:py-0.5 rst:dark:bg-gray-800"}},defaultVariants:{colorScheme:"primary",surface:"none"}});exports.inlineCodeVariants=t;

package/dist/components/atoms/InlineCode/inline-code-variants.js

@@ -8,7 +8,7 @@ const e = /* @__PURE__ */ r("rst:font-mono rst:text-[0.8125rem]", {
     },
     surface: {
       none: "",
-      soft: "rst:rounded rst:bg-gray-100 rst:px-1 rst:py-0.5 rst:dark:bg-gray-800"
+      soft: "rst:rounded-sm rst:bg-gray-100 rst:px-1 rst:py-0.5 rst:dark:bg-gray-800"
     }
   },
   defaultVariants: { colorScheme: "primary", surface: "none" }

package/dist/components/atoms/Input/Input.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("react"),V=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),k=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),w=require("../../../node_modules/@headlessui/react/dist/components/input/input.cjs"),P=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),t=require("../../../lib/utils.cjs"),o=require("./input-variants.cjs"),m=g.forwardRef(({className:x,type:f,label:d,helperText:u,errorMessage:e,variant:i,size:n,error:v,startIcon:a,endIcon:l,disabled:p,inputClassName:j,...q},N)=>{const s=!!e||v,{"aria-invalid":c,invalid:b,...h}=q,y=!!b||c!==void 0&&c!==!1&&c!=="false";return r.jsxs(k.Field,{disabled:p,className:t.cn("rst:w-full",x),children:[d&&r.jsx(P.Label,{className:t.cn("rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-left rst:mb-1.5 rst:transition-colors","rst:text-[var(--roster-control-text)]","rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70"),children:d}),r.jsxs("div",{className:"rst:relative",children:[a&&r.jsx("div",{className:t.cn(o.iconVariants({variant:i,error:s}),"rst:left-3"),children:a}),r.jsx(w.Input,{ref:N,type:f,disabled:p,className:t.cn(o.inputVariants({variant:i,size:n,error:s}),a&&(n==="sm"?"rst:pl-9":"rst:pl-10"),l&&(n==="sm"?"rst:pr-9":"rst:pr-10"),j),...h,invalid:y}),l&&r.jsx("div",{className:t.cn(o.iconVariants({variant:i,error:s}),"rst:right-3"),children:l})]}),(u||e)&&r.jsx(V.Description,{className:t.cn("rst:text-xs rst:text-left rst:mt-1.5",s?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:e||u})]})});m.displayName="Input";exports.Input=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("react"),g=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),w=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),V=require("../../../node_modules/@headlessui/react/dist/components/input/input.cjs"),k=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),r=require("../../../lib/utils.cjs"),a=require("./input-variants.cjs"),p=require("../../../internal/field-invalid.cjs"),x=y.forwardRef(({className:f,type:j,label:o,helperText:u,errorMessage:e,variant:i,size:n,error:q,startIcon:l,endIcon:c,disabled:d,inputClassName:h,...m},v)=>{const s=!!e||q,N=p.isFieldInvalid(s,m),b=p.withoutInvalidProps(m);return t.jsxs(w.Field,{disabled:d,className:r.cn("rst:w-full",f),children:[o&&t.jsx(k.Label,{className:r.cn("rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-left rst:mb-1.5 rst:transition-colors","rst:text-[var(--roster-control-text)]","rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70"),children:o}),t.jsxs("div",{className:"rst:relative",children:[l&&t.jsx("div",{className:r.cn(a.iconVariants({variant:i,error:s}),"rst:left-3"),children:l}),t.jsx(V.Input,{ref:v,type:j,disabled:d,className:r.cn(a.inputVariants({variant:i,size:n,error:s}),l&&(n==="sm"?"rst:pl-9":"rst:pl-10"),c&&(n==="sm"?"rst:pr-9":"rst:pr-10"),h),...b,invalid:N}),c&&t.jsx("div",{className:r.cn(a.iconVariants({variant:i,error:s}),"rst:right-3"),children:c})]}),(u||e)&&t.jsx(g.Description,{className:r.cn("rst:text-xs rst:text-left rst:mt-1.5",s?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:e||u})]})});x.displayName="Input";exports.Input=x;

package/dist/components/atoms/Input/Input.js

@@ -1,33 +1,30 @@
 "use client";
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import g from "react";
-import { Description as j } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as P } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Input as R } from "../../../node_modules/@headlessui/react/dist/components/input/input.js";
-import { Label as V } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import b from "react";
+import { Description as k } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as g } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Input as j } from "../../../node_modules/@headlessui/react/dist/components/input/input.js";
+import { Label as F } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
 import { cn as r } from "../../../lib/utils.js";
-import { iconVariants as f, inputVariants as _ } from "./input-variants.js";
-const D = g.forwardRef(
+import { iconVariants as f, inputVariants as P } from "./input-variants.js";
+import { isFieldInvalid as R, withoutInvalidProps as V } from "../../../internal/field-invalid.js";
+const _ = b.forwardRef(
   ({
-    className: x,
-    type: u,
-    label: n,
-    helperText: d,
-    errorMessage: i,
-    variant: e,
-    size: a,
-    error: v,
-    startIcon: o,
-    endIcon: l,
-    disabled: p,
+    className: u,
+    type: x,
+    label: l,
+    helperText: n,
+    errorMessage: e,
+    variant: o,
+    size: i,
+    error: h,
+    startIcon: m,
+    endIcon: a,
+    disabled: c,
     inputClassName: N,
-    ...h
-  }, y) => {
-    const s = !!i || v, {
-      "aria-invalid": m,
-      invalid: b,
-      ...k
-    } = h, w = !!b || m !== void 0 && m !== !1 && m !== "false";
+    ...d
+  }, v) => {
+    const t = !!e || h, w = R(t, d), y = V(d);
     return (
       /* No `space-y-*` here, deliberately. Headless UI's Field appends a
           hidden zero-height <span> after the control, and Tailwind v4 applies
@@ -42,73 +39,73 @@ const D = g.forwardRef(
          DisabledProvider stays false and the Label and Description never dim.
          Fixed in both rather than one, because a form with a disabled Input
          and a disabled Select that grey differently is worse than neither. */
-      /* @__PURE__ */ c(P, { disabled: p, className: r("rst:w-full", x), children: [
-        n && /* @__PURE__ */ t(
-          V,
+      /* @__PURE__ */ p(g, { disabled: c, className: r("rst:w-full", u), children: [
+        l && /* @__PURE__ */ s(
+          F,
           {
             className: r(
               "rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-left rst:mb-1.5 rst:transition-colors",
               "rst:text-[var(--roster-control-text)]",
               "rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70"
             ),
-            children: n
+            children: l
           }
         ),
-        /* @__PURE__ */ c("div", { className: "rst:relative", children: [
-          o && /* @__PURE__ */ t(
+        /* @__PURE__ */ p("div", { className: "rst:relative", children: [
+          m && /* @__PURE__ */ s(
             "div",
             {
               className: r(
-                f({ variant: e, error: s }),
+                f({ variant: o, error: t }),
                 "rst:left-3"
               ),
-              children: o
+              children: m
             }
           ),
-          /* @__PURE__ */ t(
-            R,
+          /* @__PURE__ */ s(
+            j,
             {
-              ref: y,
-              type: u,
-              disabled: p,
+              ref: v,
+              type: x,
+              disabled: c,
               className: r(
-                _({ variant: e, size: a, error: s }),
+                P({ variant: o, size: i, error: t }),
                 /* Icon inset tracks the size's own padding: sm is px-3, so it
                    needs one step less clearance than the 16px sizes. */
-                o && (a === "sm" ? "rst:pl-9" : "rst:pl-10"),
-                l && (a === "sm" ? "rst:pr-9" : "rst:pr-10"),
+                m && (i === "sm" ? "rst:pl-9" : "rst:pl-10"),
+                a && (i === "sm" ? "rst:pr-9" : "rst:pr-10"),
                 N
               ),
-              ...k,
+              ...y,
               invalid: w
             }
           ),
-          l && /* @__PURE__ */ t(
+          a && /* @__PURE__ */ s(
             "div",
             {
               className: r(
-                f({ variant: e, error: s }),
+                f({ variant: o, error: t }),
                 "rst:right-3"
               ),
-              children: l
+              children: a
             }
           )
         ] }),
-        (d || i) && /* @__PURE__ */ t(
-          j,
+        (n || e) && /* @__PURE__ */ s(
+          k,
           {
             className: r(
               "rst:text-xs rst:text-left rst:mt-1.5",
-              s ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
+              t ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
             ),
-            children: i || d
+            children: e || n
           }
         )
       ] })
     );
   }
 );
-D.displayName = "Input";
+_.displayName = "Input";
 export {
-  D as Input
+  _ as Input
 };

package/dist/components/atoms/Input/input-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:flex rst:w-full rst:rounded-md rst:border rst:h-10 rst:px-4 rst:text-sm rst:ring-offset-background rst:focus-visible:ring-offset-2 rst:file:border-0 rst:file:bg-transparent rst:file:text-sm rst:file:font-medium rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:transition-all",{variants:{variant:{white:"rst:border-gray-300 rst:bg-white rst:text-gray-900 rst:placeholder:text-gray-400 rst:focus-visible:border-primary-500 rst:dark:border-gray-700 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500",soft:"rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:text-gray-900 rst:placeholder:text-gray-400 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:focus-visible:border-primary-400 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500 rst:dark:focus-visible:bg-gray-900",slate:"rst:border-transparent rst:bg-gray-700 rst:text-gray-100 rst:placeholder:text-gray-400 rst:focus-visible:bg-gray-600 rst:dark:bg-gray-900 rst:dark:placeholder:text-gray-500 rst:dark:focus-visible:bg-gray-800",outline:"rst:border-[var(--roster-control-border)] rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:placeholder:text-gray-400 rst:focus-visible:border-[var(--roster-control-border-focus)] rst:dark:placeholder:text-gray-500",ghost:"rst:border-transparent rst:bg-transparent rst:text-gray-900 rst:placeholder:text-gray-400 rst:hover:bg-gray-100 rst:focus-visible:bg-gray-100 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500 rst:dark:hover:bg-gray-800 rst:dark:focus-visible:bg-gray-800"},size:{sm:"rst:h-9 rst:px-3",default:"rst:h-10 rst:px-4",lg:"rst:h-11 rst:px-4"},error:{true:"rst:border-error-500 rst:focus-visible:ring-error-500 rst:text-error-600 rst:placeholder:text-error-300 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:placeholder:text-error-800 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:absolute rst:top-1/2 rst:-translate-y-1/2 rst:transition-colors",{variants:{variant:{white:"rst:text-gray-400 rst:dark:text-gray-500",soft:"rst:text-gray-500 rst:dark:text-gray-400",slate:"rst:text-gray-300 rst:dark:text-gray-500",outline:"rst:text-gray-400 rst:dark:text-gray-500",ghost:"rst:text-gray-500 rst:dark:text-gray-400"},error:{true:"rst:text-error-500 rst:dark:text-error-400",false:""}},defaultVariants:{variant:"outline",error:!1}});exports.iconVariants=s;exports.inputVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:flex rst:w-full rst:rounded-md rst:border rst:h-10 rst:px-4 rst:text-sm rst:ring-offset-background rst:focus-visible:ring-offset-2 rst:file:border-0 rst:file:bg-transparent rst:file:text-sm rst:file:font-medium rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:transition-all",{variants:{variant:{white:"rst:border-gray-300 rst:bg-white rst:text-gray-900 rst:placeholder:text-gray-500 rst:focus-visible:border-primary-500 rst:dark:border-gray-700 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-400",soft:"rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:text-gray-900 rst:placeholder:text-gray-500 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:focus-visible:border-primary-400 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-400 rst:dark:focus-visible:bg-gray-900",slate:"rst:border-transparent rst:bg-gray-700 rst:text-gray-100 rst:placeholder:text-gray-300 rst:focus-visible:bg-gray-600 rst:dark:bg-gray-900 rst:dark:placeholder:text-gray-400 rst:dark:focus-visible:bg-gray-800",outline:"rst:border-[var(--roster-control-border)] rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:placeholder:text-[color-mix(in_srgb,var(--roster-control-text)_65%,transparent)] rst:focus-visible:border-[var(--roster-control-border-focus)]",ghost:"rst:border-transparent rst:bg-transparent rst:text-gray-900 rst:placeholder:text-gray-500 rst:hover:bg-gray-100 rst:focus-visible:bg-gray-100 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-400 rst:dark:hover:bg-gray-800 rst:dark:focus-visible:bg-gray-800"},size:{sm:"rst:h-9 rst:px-3",default:"rst:h-10 rst:px-4",lg:"rst:h-11 rst:px-4"},error:{true:"rst:border-error-500 rst:focus-visible:ring-error-500 rst:text-error-600 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:absolute rst:top-1/2 rst:-translate-y-1/2 rst:transition-colors",{variants:{variant:{white:"rst:text-gray-400 rst:dark:text-gray-500",soft:"rst:text-gray-500 rst:dark:text-gray-400",slate:"rst:text-gray-300 rst:dark:text-gray-500",outline:"rst:text-gray-400 rst:dark:text-gray-500",ghost:"rst:text-gray-500 rst:dark:text-gray-400"},error:{true:"rst:text-error-500 rst:dark:text-error-400",false:""}},defaultVariants:{variant:"outline",error:!1}});exports.iconVariants=s;exports.inputVariants=t;

package/dist/components/atoms/Input/input-variants.js

@@ -9,7 +9,7 @@ const s = /* @__PURE__ */ r(
   {
     variants: {
       variant: {
-        white: "rst:border-gray-300 rst:bg-white rst:text-gray-900 rst:placeholder:text-gray-400 rst:focus-visible:border-primary-500 rst:dark:border-gray-700 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500",
+        white: "rst:border-gray-300 rst:bg-white rst:text-gray-900 rst:placeholder:text-gray-500 rst:focus-visible:border-primary-500 rst:dark:border-gray-700 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-400",
         /* A boundary that does not depend on what is behind it. `soft` used
            `border-transparent` and leaned on its fill alone, which fails the
            moment the fill matches the surface — exactly 1.00:1 inside a
@@ -17,8 +17,8 @@ const s = /* @__PURE__ */ r(
            vanished until focus. Reported twice in one app before anyone read
            the variant. The border is the same token `outline` reads, so a
            consumer repaints both at once. */
-        soft: "rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:text-gray-900 rst:placeholder:text-gray-400 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:focus-visible:border-primary-400 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500 rst:dark:focus-visible:bg-gray-900",
-        slate: "rst:border-transparent rst:bg-gray-700 rst:text-gray-100 rst:placeholder:text-gray-400 rst:focus-visible:bg-gray-600 rst:dark:bg-gray-900 rst:dark:placeholder:text-gray-500 rst:dark:focus-visible:bg-gray-800",
+        soft: "rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:text-gray-900 rst:placeholder:text-gray-500 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:focus-visible:border-primary-400 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-400 rst:dark:focus-visible:bg-gray-900",
+        slate: "rst:border-transparent rst:bg-gray-700 rst:text-gray-100 rst:placeholder:text-gray-300 rst:focus-visible:bg-gray-600 rst:dark:bg-gray-900 rst:dark:placeholder:text-gray-400 rst:dark:focus-visible:bg-gray-800",
         /* The default variant, and the only one that reads tokens.
                    `Button`'s colors resolve through `--roster-*`, so remapping a palette
                    carries; these were hardcoded, so a consumer wanting a field border in
@@ -33,9 +33,19 @@ const s = /* @__PURE__ */ r(
                    know, and `soft` leaning on fill alone made it invisible at 1.00:1
                    inside a `white` Dialog in dark mode. `white`, `slate` and `ghost`
                    stay fully opinionated — each names a specific surface, and a token
-                   that meant something different in each would not be a token. */
-        outline: "rst:border-[var(--roster-control-border)] rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:placeholder:text-gray-400 rst:focus-visible:border-[var(--roster-control-border-focus)] rst:dark:placeholder:text-gray-500",
-        ghost: "rst:border-transparent rst:bg-transparent rst:text-gray-900 rst:placeholder:text-gray-400 rst:hover:bg-gray-100 rst:focus-visible:bg-gray-100 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500 rst:dark:hover:bg-gray-800 rst:dark:focus-visible:bg-gray-800"
+                   that meant something different in each would not be a token.
+        
+                   Placeholders have to reach 4.5:1; gray-400, which every variant
+                   used, is 2.52:1 on white. Here the placeholder is the text token at
+                   65%, so it follows whatever surface the text was chosen for (5.46:1
+                   on a white page, 7.76 on the dark one, 5.02 inside the `slate`
+                   Dialog, where a fixed gray-500 would fall to 1.71; measured
+                   rendered, src/fills-and-fields.checks.stories.tsx). The opinionated
+                   variants name a step per scheme instead, measured on their own
+                   fill. An error leaves the placeholder alone: a red that passes is
+                   too close to the typed text's red to tell them apart. */
+        outline: "rst:border-[var(--roster-control-border)] rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:placeholder:text-[color-mix(in_srgb,var(--roster-control-text)_65%,transparent)] rst:focus-visible:border-[var(--roster-control-border-focus)]",
+        ghost: "rst:border-transparent rst:bg-transparent rst:text-gray-900 rst:placeholder:text-gray-500 rst:hover:bg-gray-100 rst:focus-visible:bg-gray-100 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-400 rst:dark:hover:bg-gray-800 rst:dark:focus-visible:bg-gray-800"
       },
       /* Deliberately the same three heights as Button: h-9 / h-10 / h-11.
          Input was a fixed 42px, which agreed with Button at no size at all, so
@@ -51,7 +61,7 @@ const s = /* @__PURE__ */ r(
         lg: "rst:h-11 rst:px-4"
       },
       error: {
-        true: "rst:border-error-500 rst:focus-visible:ring-error-500 rst:text-error-600 rst:placeholder:text-error-300 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:placeholder:text-error-800 rst:dark:focus-visible:ring-error-400",
+        true: "rst:border-error-500 rst:focus-visible:ring-error-500 rst:text-error-600 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",
         false: ""
       }
     },

package/dist/components/atoms/LabeledDivider/LabeledDivider.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),d=require("../../../lib/utils.cjs"),t=require("../Eyebrow/Eyebrow.cjs"),a=c.forwardRef(({label:i,trailing:r,align:s="start",className:n,...l},o)=>e.jsxs("div",{ref:o,className:d.cn("rst:font-ui rst:flex rst:items-center rst:gap-3",n),...l,children:[s==="end"&&e.jsx("span",{role:"presentation",className:"rst:h-px rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800"}),e.jsx(t.Eyebrow,{children:i}),s==="start"&&e.jsx("span",{role:"presentation",className:"rst:h-px rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800"}),r&&e.jsx(t.Eyebrow,{children:r})]}));a.displayName="LabeledDivider";exports.LabeledDivider=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("react"),c=require("../../../lib/utils.cjs"),t=require("../Eyebrow/Eyebrow.cjs"),a=l.forwardRef(({label:i,trailing:e,align:s="start",className:o,...d},n)=>r.jsxs("div",{ref:n,className:c.cn("rst:font-ui rst:flex rst:items-center rst:gap-3",o),...d,children:[s==="end"&&r.jsx("span",{role:"presentation",className:"rst:h-[var(--roster-border-width,1px)] rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800"}),r.jsx(t.Eyebrow,{children:i}),s==="start"&&r.jsx("span",{role:"presentation",className:"rst:h-[var(--roster-border-width,1px)] rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800"}),e&&r.jsx(t.Eyebrow,{children:e})]}));a.displayName="LabeledDivider";exports.LabeledDivider=a;

package/dist/components/atoms/LabeledDivider/LabeledDivider.js

@@ -2,13 +2,13 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import m from "react";
 import { cn as n } from "../../../lib/utils.js";
-import { Eyebrow as t } from "../Eyebrow/Eyebrow.js";
+import { Eyebrow as s } from "../Eyebrow/Eyebrow.js";
 const p = m.forwardRef(
-  ({ label: a, trailing: e, align: s = "start", className: o, ...i }, d) => /* @__PURE__ */ l("div", { ref: d, className: n("rst:font-ui rst:flex rst:items-center rst:gap-3", o), ...i, children: [
-    s === "end" && /* @__PURE__ */ r("span", { role: "presentation", className: "rst:h-px rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800" }),
-    /* @__PURE__ */ r(t, { children: a }),
-    s === "start" && /* @__PURE__ */ r("span", { role: "presentation", className: "rst:h-px rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800" }),
-    e && /* @__PURE__ */ r(t, { children: e })
+  ({ label: a, trailing: e, align: t = "start", className: o, ...d }, i) => /* @__PURE__ */ l("div", { ref: i, className: n("rst:font-ui rst:flex rst:items-center rst:gap-3", o), ...d, children: [
+    t === "end" && /* @__PURE__ */ r("span", { role: "presentation", className: "rst:h-[var(--roster-border-width,1px)] rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800" }),
+    /* @__PURE__ */ r(s, { children: a }),
+    t === "start" && /* @__PURE__ */ r("span", { role: "presentation", className: "rst:h-[var(--roster-border-width,1px)] rst:flex-1 rst:bg-gray-200 rst:dark:bg-gray-800" }),
+    e && /* @__PURE__ */ r(s, { children: e })
   ] })
 );
 p.displayName = "LabeledDivider";

package/dist/components/atoms/MultiSelect/MultiSelect.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),O=require("react"),B=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),H=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),M=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),x=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),Y=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),S=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),T=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),s=require("../../../lib/utils.cjs"),W=require("../Select/select-variants.cjs"),F=require("../Chip/Chip.cjs"),X=require("../../../internal/PopupOption.cjs"),c=require("../../../internal/popup.cjs"),G=({options:h,value:n,onChange:m,placeholder:b="Select options",disabled:o=!1,variant:f,size:i,error:R,className:_,triggerClassName:L,optionsClassName:D,helperText:v,errorMessage:p,label:g,display:u="chips",maxChips:N,clearable:j=!1,chipColorScheme:k="neutral",chipVariant:w="outline",clearLabel:A="Clear selection",removeLabel:E=l=>`Remove ${l}`,...U})=>{const l=!!p||R,a=n.length>0,y=new Map(h.map((r,e)=>[r.value,e])),d=n.map(r=>({value:r,label:h.find(e=>e.value===r)?.label??String(r)})).sort((r,e)=>(y.get(r.value)??Number.POSITIVE_INFINITY)-(y.get(e.value)??Number.POSITIVE_INFINITY)),P=N===void 0?d:d.slice(0,N),I=d.length-P.length,{ref:$,inDarkScope:C}=c.useDarkScope(),q=O.useRef(null);return t.jsxs(H.Field,{disabled:o,className:s.cn("rst:flex rst:flex-col rst:gap-1.5",_),...U,children:[g&&t.jsx(M.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:g}),t.jsx(x.Listbox,{value:n,onChange:m,disabled:o,multiple:!0,children:t.jsxs("div",{ref:$,className:"rst:relative",children:[t.jsxs("div",{className:s.cn(W.selectTriggerVariants({variant:f,size:i,error:l}),"rst:h-auto rst:flex-wrap rst:items-center rst:gap-1.5 rst:py-1.5",i==="sm"?"rst:min-h-9":i==="lg"?"rst:min-h-11":"rst:min-h-10",j&&a&&"rst:pr-16","rst:focus-within:ring-2 rst:focus-within:ring-ring",o&&"rst:opacity-50 rst:cursor-not-allowed",L),children:[t.jsx(x.ListboxButton,{ref:q,"aria-invalid":l||void 0,className:"rst:absolute rst:inset-0 rst:h-full rst:w-full rst:cursor-pointer rst:rounded-md rst:focus:outline-hidden rst:disabled:cursor-not-allowed",children:t.jsx("span",{className:"rst:sr-only",children:a?u==="count"?`${n.length} selected`:d.map(r=>r.label).join(", "):b})}),!a&&t.jsx("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate rst:text-gray-500 rst:dark:text-gray-400",children:b}),a&&u==="count"&&t.jsxs("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate",children:[n.length," selected"]}),a&&u==="chips"&&P.map((r,e)=>t.jsx(F.Chip,{size:"sm",variant:w,colorScheme:k,disabled:o,onRemove:()=>m(n.filter(V=>V!==r.value)),removeLabel:E(r.label),className:s.cn("rst:relative rst:max-w-[12rem] rst:pointer-events-none","rst:[&_button]:pointer-events-auto","rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70"),children:t.jsx("span",{className:"rst:block rst:truncate",children:r.label})},`${e}-${String(r.value)}`)),I>0&&u==="chips"&&t.jsxs(F.Chip,{size:"sm",variant:w,colorScheme:k,"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70",children:["+",I]}),t.jsx("span",{className:s.cn("rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",i==="sm"?"rst:pr-2.5":"rst:pr-3"),children:t.jsx(S.FontAwesomeIcon,{icon:T.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),j&&a&&t.jsx("button",{type:"button",disabled:o,onClick:()=>{m([]),q.current?.focus()},"aria-label":A,className:s.cn("rst:absolute rst:inset-y-0 rst:flex rst:w-6 rst:items-center rst:justify-center","rst:cursor-pointer rst:disabled:cursor-not-allowed","rst:text-current rst:opacity-70 rst:hover:opacity-100 rst:disabled:opacity-40","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:rounded-sm",i==="sm"?"rst:right-7":"rst:right-8"),children:t.jsx(S.FontAwesomeIcon,{icon:T.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}),t.jsx(Y.Transition,{as:O.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:t.jsx(x.ListboxOptions,{anchor:c.POPUP_ANCHOR,className:s.cn(c.popupInDarkPalette(C,f)&&"dark",c.POPUP_PANEL,c.POPUP_WIDTH_OF_BUTTON,D),children:h.map(r=>t.jsx(X.PopupOption,{as:x.ListboxOption,value:r.value,disabled:r.disabled,size:i,children:r.label},r.value))})})]})}),(v||p)&&t.jsx(B.Description,{className:s.cn("rst:text-xs rst:text-left",l?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:p||v})]})};exports.MultiSelect=G;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),Y=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),W=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),X=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),h=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),G=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),T=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),F=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),s=require("../../../lib/utils.cjs"),R=require("../../../internal/field-invalid.cjs"),J=require("../Select/select-variants.cjs"),_=require("../Chip/Chip.cjs"),K=require("../../../internal/PopupOption.cjs"),c=require("../../../internal/popup.cjs"),Q=({options:x,value:n,onChange:m,placeholder:v="Select options",disabled:a=!1,variant:f,size:i,error:L,className:D,triggerClassName:A,optionsClassName:E,helperText:b,errorMessage:p,label:g,display:u="chips",maxChips:N,clearable:j=!1,chipColorScheme:w="neutral",chipVariant:k="outline",clearLabel:U="Clear selection",removeLabel:$=l=>`Remove ${l}`,...I})=>{const l=!!p||L,C=R.isFieldInvalid(l,I),V=R.withoutInvalidProps(I),o=n.length>0,P=new Map(x.map((r,e)=>[r.value,e])),d=n.map(r=>({value:r,label:x.find(e=>e.value===r)?.label??String(r)})).sort((r,e)=>(P.get(r.value)??Number.POSITIVE_INFINITY)-(P.get(e.value)??Number.POSITIVE_INFINITY)),y=N===void 0?d:d.slice(0,N),q=d.length-y.length,{ref:B,inDarkScope:H}=c.useDarkScope(),O=S.useRef(null);return t.jsxs(W.Field,{disabled:a,className:s.cn("rst:flex rst:flex-col rst:gap-1.5",D),...V,children:[g&&t.jsx(X.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:g}),t.jsx(h.Listbox,{value:n,onChange:m,disabled:a,multiple:!0,children:t.jsxs("div",{ref:B,className:"rst:relative",children:[t.jsxs("div",{className:s.cn(J.selectTriggerVariants({variant:f,size:i,error:l}),"rst:h-auto rst:flex-wrap rst:items-center rst:gap-1.5 rst:py-1.5",i==="sm"?"rst:min-h-9":i==="lg"?"rst:min-h-11":"rst:min-h-10",j&&o&&"rst:pr-16","rst:focus-within:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-within:ring-ring",a&&"rst:opacity-50 rst:cursor-not-allowed",A),children:[t.jsx(h.ListboxButton,{ref:O,"aria-invalid":C||void 0,className:"rst:absolute rst:inset-0 rst:h-full rst:w-full rst:cursor-pointer rst:rounded-md rst:focus:outline-hidden rst:disabled:cursor-not-allowed",children:t.jsx("span",{className:"rst:sr-only",children:o?u==="count"?`${n.length} selected`:d.map(r=>r.label).join(", "):v})}),!o&&t.jsx("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate rst:text-gray-500 rst:dark:text-gray-400",children:v}),o&&u==="count"&&t.jsxs("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate",children:[n.length," selected"]}),o&&u==="chips"&&y.map((r,e)=>t.jsx(_.Chip,{size:"sm",variant:k,colorScheme:w,disabled:a,onRemove:()=>m(n.filter(M=>M!==r.value)),removeLabel:$(r.label),className:s.cn("rst:relative rst:max-w-[12rem] rst:pointer-events-none","rst:[&_button]:pointer-events-auto","rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70"),children:t.jsx("span",{className:"rst:block rst:truncate",children:r.label})},`${e}-${String(r.value)}`)),q>0&&u==="chips"&&t.jsxs(_.Chip,{size:"sm",variant:k,colorScheme:w,"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70",children:["+",q]}),t.jsx("span",{className:s.cn("rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",i==="sm"?"rst:pr-2.5":"rst:pr-3"),children:t.jsx(T.FontAwesomeIcon,{icon:F.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),j&&o&&t.jsx("button",{type:"button",disabled:a,onClick:()=>{m([]),O.current?.focus()},"aria-label":U,className:s.cn("rst:absolute rst:inset-y-0 rst:flex rst:w-6 rst:items-center rst:justify-center","rst:cursor-pointer rst:disabled:cursor-not-allowed","rst:text-current rst:opacity-70 rst:hover:opacity-100 rst:disabled:opacity-40","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:rounded-sm",i==="sm"?"rst:right-7":"rst:right-8"),children:t.jsx(T.FontAwesomeIcon,{icon:F.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}),t.jsx(G.Transition,{as:S.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:t.jsx(h.ListboxOptions,{anchor:c.POPUP_ANCHOR,className:s.cn(c.popupInDarkPalette(H,f)&&"dark",c.POPUP_PANEL,c.POPUP_WIDTH_OF_BUTTON,E),children:x.map(r=>t.jsx(K.PopupOption,{as:h.ListboxOption,value:r.value,disabled:r.disabled,size:i,children:r.label},r.value))})})]})}),(b||p)&&t.jsx(Y.Description,{className:s.cn("rst:text-xs rst:text-left",l?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:p||b})]})};exports.MultiSelect=Q;