@caspeco/casper-ui-library 7.10.0 → 7.11.0

package/dist/components/combobox/combobox-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-button.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAsBlD,wBAAgB,cAAc,CAAC,EAC9B,EAAE,EACF,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,IAAI,EACJ,OAAO,EACP,KAAK,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,cAAc,GACd,EAAE,kBAAkB,2CAsMpB"}
+{"version":3,"file":"combobox-button.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAsBlD,wBAAgB,cAAc,CAAC,EAC9B,EAAE,EACF,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,IAAI,EACJ,OAAO,EACP,KAAK,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,cAAc,GACd,EAAE,kBAAkB,2CAgMpB"}

package/dist/components/combobox/combobox-button.js

@@ -1,12 +1,12 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useStyleConfig as N, Flex as c, Box as d, Input as X } from "@chakra-ui/react";
-import { Fragment as $ } from "react";
+import { useStyleConfig as X, Flex as c, Box as d, Input as $ } from "@chakra-ui/react";
+import { Fragment as D } from "react";
 import { ComboboxItem as E } from "./combobox-item.js";
 import { Tag as K } from "../tag/tag.js";
 import { Icon as U } from "../icon/icon.js";
 import { Icons as q } from "../icon/types.js";
 import { ThemeColorVariable as r, ThemeSpaceVariable as u, ThemeRadiusVariable as G, ThemeIconSizeVariable as J } from "../../theme/theme-types.js";
-function j() {
+function R() {
   return /* @__PURE__ */ i(
     d,
     {
@@ -27,50 +27,50 @@ function j() {
   );
 }
 function oo({
-  id: B,
+  id: j,
   asPlainText: e,
   inputValue: h,
   selectedItems: n,
-  displayItems: R,
-  toggleItem: C,
+  displayItems: B,
+  toggleItem: x,
   highlightState: l,
   openState: a,
   parentStrings: V,
   size: W,
   variant: v,
   label: S,
-  placeHolderText: s,
+  placeHolderText: C,
   isDisabled: b,
-  isReadOnly: m,
-  isInvalid: w,
+  isReadOnly: s,
+  isInvalid: m,
   collapsed: k,
-  hasPendingDelete: t,
-  setHasPendingDelete: g,
+  hasPendingDelete: w,
+  setHasPendingDelete: t,
   setInputValue: O,
   onSearch: y,
   isSingleSelect: z
 }) {
-  const A = N("Combobox", { size: W, variant: v }), D = (o) => {
-    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? C(R[l.index]) : a.open()), o.key === "Escape") {
+  const A = X("Combobox", { size: W, variant: v }), F = (o) => {
+    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? x(B[l.index]) : a.open()), o.key === "Escape") {
       if (!a.isOpen) return;
       o.preventDefault(), o.stopPropagation(), a.close(), e || (O(""), y?.(""));
     }
-    o.key === "Backspace" ? h.length === 0 && n.length > 0 && !e && (t ? (C(n[n.length - 1]), g(!1)) : g(!0)) : g(!1), o.key === "ArrowDown" && (a.isOpen ? l.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? l.previous() : a.open());
-  }, F = (o) => {
+    o.key === "Backspace" ? h.length === 0 && n.length > 0 && !e && (w ? (x(n[n.length - 1]), t(!1)) : t(!0)) : t(!1), o.key === "ArrowDown" && (a.isOpen ? l.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? l.previous() : a.open());
+  }, L = (o) => {
     o.preventDefault(), o.stopPropagation();
     const p = o.target.value;
     O(p), y?.(p), l.set(0), a.open();
-  }, x = n[0], _ = n[n.length - 1], L = a.isOpen || e || s;
+  }, g = n[0], _ = n[n.length - 1], N = a.isOpen || e || C;
   return /* @__PURE__ */ f(
     c,
     {
       __css: A,
       "aria-disabled": b,
-      "aria-readonly": m,
-      "aria-invalid": w,
+      "aria-readonly": s,
+      "aria-invalid": m,
       borderRadius: G.Small,
       padding: u.Small,
-      _focusWithin: w ? {
+      _focusWithin: m ? {
         borderColor: r.Error,
         boxShadow: `0 0 0 4px ${r.ErrorContainer}`,
         backgroundColor: r.Surface
@@ -79,10 +79,6 @@ function oo({
         boxShadow: `0 0 0 4px ${r.InfoContainer}`,
         backgroundColor: r.Surface
       },
-      _disabled: {
-        borderColor: "transparent",
-        backgroundColor: r.SurfaceDisabled
-      },
       children: [
         /* @__PURE__ */ f(
           c,
@@ -101,13 +97,13 @@ function oo({
                   whiteSpace: "nowrap",
                   textOverflow: "ellipsis",
                   children: [
-                    n.length > 3 && /* @__PURE__ */ i(j, {}),
-                    n.length > 2 && /* @__PURE__ */ i(j, {}),
+                    n.length > 3 && /* @__PURE__ */ i(R, {}),
+                    n.length > 2 && /* @__PURE__ */ i(R, {}),
                     n.length > 1 && /* @__PURE__ */ i(K, { children: n.length - 1 }),
                     /* @__PURE__ */ i(
                       E,
                       {
-                        isDeleting: t,
+                        isDeleting: w,
                         item: _,
                         asPlainText: e
                       }
@@ -119,11 +115,11 @@ function oo({
                 {
                   item: o,
                   asPlainText: e,
-                  isDeleting: p === n.length - 1 && t
+                  isDeleting: p === n.length - 1 && w
                 },
                 o.id
               ))),
-              e && n.length > 0 && x && h === x.label && V[x.id]?.map((o) => /* @__PURE__ */ f($, { children: [
+              e && n.length > 0 && g && h === g.label && V[g.id]?.map((o) => /* @__PURE__ */ f(D, { children: [
                 /* @__PURE__ */ i(
                   d,
                   {
@@ -137,19 +133,19 @@ function oo({
                 /* @__PURE__ */ i(d, { color: r.OnSurfaceSubdued, children: "/" })
               ] }, o)),
               /* @__PURE__ */ i(
-                X,
+                $,
                 {
-                  id: B,
+                  id: j,
                   isDisabled: b,
-                  isReadOnly: m,
-                  isInvalid: w,
-                  onKeyDown: D,
+                  isReadOnly: s,
+                  isInvalid: m,
+                  onKeyDown: F,
                   variant: "unstyled",
                   value: h,
                   autoComplete: "off",
                   minWidth: u.XLarge,
-                  onChange: F,
-                  placeholder: s,
+                  onChange: L,
+                  placeholder: C,
                   border: "none",
                   flex: 1,
                   color: r.OnSurface,
@@ -161,7 +157,7 @@ function oo({
                     cursor: "not-allowed",
                     color: r.OnSurfaceSubdued
                   },
-                  sx: L ? {} : {
+                  sx: N ? {} : {
                     position: "absolute",
                     width: "1px",
                     height: "1px",
@@ -182,7 +178,7 @@ function oo({
           {
             icon: q.TreeViewCollapse,
             size: J.Small,
-            color: b || m ? r.OnSurfaceSubdued : r.OnSurface
+            color: b ? r.OnSurfaceSubdued : r.OnSurface
           }
         ) })
       ]

package/dist/components/table/table-content.d.ts

@@ -43,8 +43,12 @@ export interface TableContentProps<TData extends TableData = TableData> {
      * Enables virtualization for the table rows to improve performance with large datasets.
      */
     virtualization?: VirtualizationOptions;
+    /**
+     * Anchor portals to a referenced layer. Defaults to document body.
+     */
+    portalContainerRef?: React.RefObject<HTMLElement | null>;
 }
-declare const TableContentInner: <TData extends TableData>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, virtualization, ...props }: TableContentProps<TData> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableContentInner: <TData extends TableData>({ onClickRow, onRowClickIndication, hideTableHeaderDropdown, showRowHoverStyle, stickyHeaders, virtualization, portalContainerRef, ...props }: TableContentProps<TData> & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableContent: typeof TableContentInner;
 export {};
 //# sourceMappingURL=table-content.d.ts.map

package/dist/components/table/table-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;CACvC;AAED,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,2HAQjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAsJ5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,+IASjD,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,4CAuJ5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}

package/dist/components/table/table-content.js

@@ -1,20 +1,21 @@
 import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import { Table as j, Thead as E, Box as M, Tbody as y } from "@chakra-ui/react";
-import { useVirtualizer as $ } from "../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { memo as D, useRef as L, useMemo as u } from "react";
-import { useTableContext as O } from "./table-context.js";
-import { TableHeaderRow as Y } from "./table-header-row.js";
+import { Table as E, Thead as M, Box as $, Tbody as y } from "@chakra-ui/react";
+import { useVirtualizer as D } from "../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { memo as L, useRef as O, useMemo as u } from "react";
+import { useTableContext as Y } from "./table-context.js";
+import { TableHeaderRow as k } from "./table-header-row.js";
 import { TableRow as v } from "./table-row.js";
-const k = ({
+const q = ({
   onClickRow: m,
   onRowClickIndication: b,
   hideTableHeaderDropdown: w,
   showRowHoverStyle: g = !0,
   stickyHeaders: h,
   virtualization: a,
-  ...R
+  portalContainerRef: R,
+  ...z
 }) => {
-  const t = O(), i = L(null), z = u(() => h ? {
+  const t = Y(), i = O(null), B = u(() => h ? {
     position: "sticky",
     top: 0,
     zIndex: 1
@@ -29,7 +30,7 @@ const k = ({
       t.sorting,
       t.data
     ]
-  ), p = c.length, l = !!a, f = a?.estimateRowHeight ?? 40, x = a?.overscan ?? 5, B = a?.height ?? "600px", H = u(
+  ), p = c.length, l = !!a, f = a?.estimateRowHeight ?? 40, x = a?.overscan ?? 5, H = a?.height ?? "600px", I = u(
     () => ({
       count: p,
       getScrollElement: () => i.current,
@@ -41,7 +42,7 @@ const k = ({
       }
     }),
     [l, f, x, p]
-  ), C = $(H), n = l ? C.getVirtualItems() : [], I = () => {
+  ), C = D(I), n = l ? C.getVirtualItems() : [], _ = () => {
     if (!l)
       return /* @__PURE__ */ e(y, { children: c.map((s) => {
         const r = s.getVisibleCells();
@@ -63,12 +64,12 @@ const k = ({
       n.map((s) => {
         const r = c[s.index];
         if (!r) return null;
-        const _ = r.getVisibleCells();
+        const j = r.getVisibleCells();
         return /* @__PURE__ */ e(
           v,
           {
             row: r,
-            visibleCells: _,
+            visibleCells: j,
             onClickRow: m,
             onRowClickIndication: b,
             showRowHoverStyle: g
@@ -78,23 +79,24 @@ const k = ({
       }),
       d > 0 && /* @__PURE__ */ e("tr", { style: { height: `${d}px` }, "aria-hidden": "true", children: /* @__PURE__ */ e("td", { colSpan: V }) })
     ] });
-  }, T = /* @__PURE__ */ S(j, { ...R, id: t.id, children: [
-    /* @__PURE__ */ e(E, { style: z, children: t.table.getHeaderGroups().map((o) => /* @__PURE__ */ e(
-      Y,
+  }, T = /* @__PURE__ */ S(E, { ...z, id: t.id, children: [
+    /* @__PURE__ */ e(M, { style: B, children: t.table.getHeaderGroups().map((o) => /* @__PURE__ */ e(
+      k,
       {
         headerGroup: o,
-        hideTableHeaderDropdown: w
+        hideTableHeaderDropdown: w,
+        portalContainerRef: R
       },
       o.id
     )) }),
-    I()
+    _()
   ] });
   return l ? /* @__PURE__ */ e(
-    M,
+    $,
     {
       ref: i,
       overflowY: "auto",
-      height: B,
+      height: H,
       position: "relative",
       tabIndex: -1,
       outline: "none",
@@ -103,7 +105,7 @@ const k = ({
       children: T
     }
   ) : T;
-}, P = D(k);
+}, Q = L(q);
 export {
-  P as TableContent
+  Q as TableContent
 };

package/dist/components/table/table-header-dropdown.d.ts

@@ -12,7 +12,9 @@ type TableHeaderDropdownProps<TData extends TableData> = {
     columnVisibility: VisibilityState;
     localeString: Locales;
 };
-declare const TableHeaderDropdownComponent: <TData extends TableData>({ header, breakingContentState, onBreakingContentChange, setBreakingContentState, headerGroup, sorting, setSorting, localeString, }: TableHeaderDropdownProps<TData>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeaderDropdownComponent: <TData extends TableData>({ header, breakingContentState, onBreakingContentChange, setBreakingContentState, headerGroup, sorting, setSorting, localeString, portalContainerRef, }: TableHeaderDropdownProps<TData> & {
+    portalContainerRef?: React.RefObject<HTMLElement | null>;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHeaderDropdown: typeof TableHeaderDropdownComponent;
 export {};
 //# sourceMappingURL=table-header-dropdown.d.ts.map

package/dist/components/table/table-header-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-dropdown.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-dropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,EAGN,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnD,KAAK,wBAAwB,CAAC,KAAK,SAAS,SAAS,IAAI;IACxD,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,uBAAuB,CAAC,EAAE,CAAC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClF,uBAAuB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACxF,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;IAC5C,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,gBAAgB,EAAE,eAAe,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,4BAA4B,GAAI,KAAK,SAAS,SAAS,EAAE,qIAS5D,wBAAwB,CAAC,KAAK,CAAC,4CA0IjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAyC,OAAO,4BAA4B,CAAC"}
+{"version":3,"file":"table-header-dropdown.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-dropdown.tsx"],"names":[],"mappings":"AAWA,OAAO,EAGN,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnD,KAAK,wBAAwB,CAAC,KAAK,SAAS,SAAS,IAAI;IACxD,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,uBAAuB,CAAC,EAAE,CAAC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClF,uBAAuB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACxF,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;IAC5C,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,gBAAgB,EAAE,eAAe,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,4BAA4B,GAAI,KAAK,SAAS,SAAS,EAAE,yJAU5D,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CA0IhG,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAyC,OAAO,4BAA4B,CAAC"}

package/dist/components/table/table-header-dropdown.js

@@ -1,8 +1,8 @@
 import { jsxs as d, Fragment as a, jsx as n } from "react/jsx-runtime";
-import { Portal as O } from "@chakra-ui/react";
-import { flexRender as j } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { memo as A, useCallback as D, useMemo as p } from "react";
-import { useTableContext as L } from "./table-context.js";
+import { Portal as j } from "@chakra-ui/react";
+import { flexRender as A } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { memo as L, useCallback as D, useMemo as p } from "react";
+import { useTableContext as R } from "./table-context.js";
 import { translations as U } from "./translations.js";
 import { Icon as S } from "../icon/icon.js";
 import { Icons as l } from "../icon/types.js";
@@ -11,10 +11,10 @@ import { Text as r } from "../text/text.js";
 import { MenuDivider as k } from "../menu/menu-divider.js";
 import { Switch as X } from "../switch/switch.js";
 import { Menu as v } from "../menu/menu.js";
-import { MenuBoxButton as R } from "../menu/menu-box-button.js";
-import { MenuList as $ } from "../menu/menu-list.js";
-import { ThemeIconSizeVariable as F, ThemeColorVariable as w, ThemeSpaceVariable as q, ThemeFontSizeVariable as z } from "../../theme/theme-types.js";
-const J = ({
+import { MenuBoxButton as $ } from "../menu/menu-box-button.js";
+import { MenuList as q } from "../menu/menu-list.js";
+import { ThemeIconSizeVariable as F, ThemeColorVariable as w, ThemeSpaceVariable as J, ThemeFontSizeVariable as z } from "../../theme/theme-types.js";
+const K = ({
   header: o,
   breakingContentState: m,
   onBreakingContentChange: h,
@@ -22,9 +22,10 @@ const J = ({
   headerGroup: g,
   sorting: u,
   setSorting: f,
-  localeString: V
+  localeString: V,
+  portalContainerRef: y
 }) => {
-  const e = U[V], y = L(), { getTableFilterMethods: s } = y, T = D(
+  const e = U[V], H = R(), { getTableFilterMethods: s } = H, T = D(
     (i) => {
       const c = {
         ...m,
@@ -36,18 +37,18 @@ const J = ({
   ), b = D(
     (i) => {
       const c = i.getIndex();
-      g.forEach((B) => {
-        B.headers.forEach((E, I) => {
-          const { column: M } = E;
+      g.forEach((E) => {
+        E.headers.forEach((O, I) => {
+          const { column: M } = O;
           i.getIsPinned() ? I >= c && M.pin(!1) : I <= c && M.pin("left");
         });
       });
     },
     [g]
-  ), H = p(() => /* @__PURE__ */ d(a, { children: [
+  ), P = p(() => /* @__PURE__ */ d(a, { children: [
     u.find((i) => i.id === o.column.id) && (u.find((i) => i.desc) ? /* @__PURE__ */ n(S, { icon: l.SortDesc, size: F.XSmall }) : /* @__PURE__ */ n(S, { icon: l.SortAsc, size: F.XSmall })),
     o.column.columnDef.header
-  ] }), [o.column.columnDef.header, o.column.id, u]), x = p(() => s()?.canFilterOnColumn(o.column.id) ?? !1, [o.column.id, s]), P = p(() => /* @__PURE__ */ d(a, { children: [
+  ] }), [o.column.columnDef.header, o.column.id, u]), x = p(() => s()?.canFilterOnColumn(o.column.id) ?? !1, [o.column.id, s]), B = p(() => /* @__PURE__ */ d(a, { children: [
     /* @__PURE__ */ n(
       t,
       {
@@ -101,7 +102,7 @@ const J = ({
   ]);
   return /* @__PURE__ */ n(v, { isLazy: !0, children: ({ isOpen: i }) => /* @__PURE__ */ d(a, { children: [
     /* @__PURE__ */ n(
-      R,
+      $,
       {
         color: w.OnBackgroundSubdued,
         textTransform: "none",
@@ -109,15 +110,15 @@ const J = ({
         h: "40px",
         display: "flex",
         alignItems: "center",
-        padding: `0px 0px 0px ${q.Small}`,
+        padding: `0px 0px 0px ${J.Small}`,
         backgroundColor: i ? w.BackgroundDisabled : "unset",
         w: "100%",
-        children: j(H, o.getContext())
+        children: A(P, o.getContext())
       }
     ),
-    /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n($, { fontSize: z.Medium, children: P }) })
+    /* @__PURE__ */ n(j, { containerRef: y, children: /* @__PURE__ */ n(q, { fontSize: z.Medium, children: B }) })
   ] }) });
-}, dn = A(J);
+}, un = L(K);
 export {
-  dn as TableHeaderDropdown
+  un as TableHeaderDropdown
 };

package/dist/components/table/table-header-row.d.ts

@@ -4,7 +4,9 @@ type TableHeaderRowProps<TData extends TableData> = {
     headerGroup: HeaderGroup<TableRow<TData>>;
     hideTableHeaderDropdown: boolean | undefined;
 };
-declare const TableHeaderRowComponent: <TData extends TableData>({ headerGroup, hideTableHeaderDropdown, }: TableHeaderRowProps<TData>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeaderRowComponent: <TData extends TableData>({ headerGroup, hideTableHeaderDropdown, portalContainerRef, }: TableHeaderRowProps<TData> & {
+    portalContainerRef?: React.RefObject<HTMLElement | null>;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHeaderRow: typeof TableHeaderRowComponent;
 export {};
 //# sourceMappingURL=table-header-row.d.ts.map

package/dist/components/table/table-header-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAYlF,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,2CAGvD,mBAAmB,CAAC,KAAK,CAAC,4CA0F5B,CAAC;AAuJF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAYlF,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,4CA2F3F,CAAC;AAuJF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}

package/dist/components/table/table-header-row.js

@@ -1,16 +1,16 @@
-import { jsx as e, Fragment as h, jsxs as S } from "react/jsx-runtime";
-import { Tr as B, Th as C, useMediaQuery as v, Portal as M } from "@chakra-ui/react";
+import { jsx as e, Fragment as u, jsxs as f } from "react/jsx-runtime";
+import { Tr as B, Th as b, useMediaQuery as v, Portal as M } from "@chakra-ui/react";
 import { flexRender as T } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { memo as y, useCallback as w, useMemo as A } from "react";
-import { useTableContext as u } from "./table-context.js";
+import { memo as y, useCallback as C, useMemo as A } from "react";
+import { useTableContext as p } from "./table-context.js";
 import { TableHeaderDropdown as V } from "./table-header-dropdown.js";
-import { translations as k } from "./translations.js";
+import { translations as x } from "./translations.js";
 import { Box as g } from "../box/box.js";
-import { Flex as f } from "../flex/flex.js";
+import { Flex as w } from "../flex/flex.js";
 import { Divider as z } from "../divider/divider.js";
 import { Menu as D } from "../menu/menu.js";
 import { MenuButton as F } from "../menu/menu-button.js";
-import { Icons as x } from "../icon/types.js";
+import { Icons as R } from "../icon/types.js";
 import { MenuList as H } from "../menu/menu-list.js";
 import { Checkbox as P } from "../checkbox/checkbox.js";
 import { MenuItem as L } from "../menu/menu-item.js";
@@ -19,21 +19,22 @@ import { Button as O } from "../button/button.js";
 import { ThemeColorVariable as d, ThemeSpaceVariable as m, ThemeFontSizeVariable as j, ThemeFontVariable as $ } from "../../theme/theme-types.js";
 const W = ({
   headerGroup: o,
-  hideTableHeaderDropdown: l
+  hideTableHeaderDropdown: r,
+  portalContainerRef: a
 }) => {
-  const n = u(), a = !!n.getRowActions, s = w((r) => {
-    const t = r.getIsPinned();
+  const n = p(), s = !!n.getRowActions, i = C((t) => {
+    const l = t.getIsPinned();
     return {
-      position: t ? "sticky" : "relative",
-      left: t ? `${r.getStart("left")}px` : void 0,
-      backgroundColor: t ? d.Background : void 0,
-      zIndex: t ? 1 : 0,
-      width: r.getSize(),
-      maxWidth: r.getSize()
+      position: l ? "sticky" : "relative",
+      left: l ? `${t.getStart("left")}px` : void 0,
+      backgroundColor: l ? d.Background : void 0,
+      zIndex: l ? 1 : 0,
+      width: t.getSize(),
+      maxWidth: t.getSize()
     };
-  }, []), i = (n.selectedRowIds?.length ?? 0) > 0 && (n.selectionActions?.length ?? 0) > 0;
-  return /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(B, { children: i ? /* @__PURE__ */ e(
-    C,
+  }, []), c = (n.selectedRowIds?.length ?? 0) > 0 && (n.selectionActions?.length ?? 0) > 0;
+  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(B, { children: c ? /* @__PURE__ */ e(
+    b,
     {
       colSpan: o.headers.length,
       sx: {
@@ -48,27 +49,27 @@ const W = ({
       zIndex: 1,
       style: {
         borderBottom: `1px solid ${d.OnBackgroundBorder}`,
-        paddingLeft: a ? "24px" : void 0
+        paddingLeft: s ? "24px" : void 0
       },
-      children: /* @__PURE__ */ e(b, { showSelectAll: !0, children: /* @__PURE__ */ e(Q, {}) })
+      children: /* @__PURE__ */ e(I, { showSelectAll: !0, children: /* @__PURE__ */ e(Q, {}) })
     }
-  ) : /* @__PURE__ */ e(h, { children: o.headers.map((r) => {
-    const { column: t } = r, c = t.getIndex() === 0;
+  ) : /* @__PURE__ */ e(u, { children: o.headers.map((t) => {
+    const { column: l } = t, h = l.getIndex() === 0;
     return /* @__PURE__ */ e(
-      C,
+      b,
       {
         className: "tableHeaderCell",
-        isNumeric: t.columnDef.meta?.isNumeric,
-        zIndex: t.getIsPinned() ? 2 : 1,
+        isNumeric: l.columnDef.meta?.isNumeric,
+        zIndex: l.getIsPinned() ? 2 : 1,
         style: {
-          ...s(t),
+          ...i(l),
           borderBottom: `1px solid ${d.OnBackgroundBorder}`,
-          paddingLeft: c && a ? "24px" : void 0
+          paddingLeft: h && s ? "24px" : void 0
         },
-        children: /* @__PURE__ */ e(b, { showSelectAll: n.canSelectRows && c, children: /* @__PURE__ */ e(h, { children: l ? /* @__PURE__ */ e(g, { paddingLeft: m.Small, children: T(r.column.columnDef.header, r.getContext()) }) : /* @__PURE__ */ e(
+        children: /* @__PURE__ */ e(I, { showSelectAll: n.canSelectRows && h, children: /* @__PURE__ */ e(u, { children: r ? /* @__PURE__ */ e(g, { paddingLeft: m.Small, children: T(t.column.columnDef.header, t.getContext()) }) : /* @__PURE__ */ e(
           V,
           {
-            header: r,
+            header: t,
             breakingContentState: n.breakingContentState,
             columnVisibility: n.columnVisibility,
             headerGroup: n.table.getHeaderGroups(),
@@ -76,42 +77,43 @@ const W = ({
             setBreakingContentState: n.setBreakingContentState,
             setSorting: n.setSorting,
             sorting: n.sorting,
-            onBreakingContentChange: n.onBreakingContentChange
+            onBreakingContentChange: n.onBreakingContentChange,
+            portalContainerRef: a
           }
         ) }) })
       },
-      r.id
+      t.id
     );
   }) }) }, o.id) });
-}, b = ({ showSelectAll: o, children: l }) => o ? /* @__PURE__ */ S(f, { w: "100%", align: "center", children: [
+}, I = ({ showSelectAll: o, children: r }) => o ? /* @__PURE__ */ f(w, { w: "100%", align: "center", children: [
   /* @__PURE__ */ e(g, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ e(E, {}) }),
-  l
-] }) : /* @__PURE__ */ e(h, { children: l }), E = () => {
-  const o = u(), l = w(
+  r
+] }) : /* @__PURE__ */ e(u, { children: r }), E = () => {
+  const o = p(), r = C(
     (s) => {
-      const i = s.target.checked, r = o.getSelectableRowIds();
-      i ? o.setSelectedRowIds((t) => [.../* @__PURE__ */ new Set([...t, ...r])]) : o.setSelectedRowIds((t) => t.filter((c) => !r.includes(c)));
+      const i = s.target.checked, c = o.getSelectableRowIds();
+      i ? o.setSelectedRowIds((t) => [.../* @__PURE__ */ new Set([...t, ...c])]) : o.setSelectedRowIds((t) => t.filter((l) => !c.includes(l)));
     },
     [o]
-  ), { allIsSelected: n, shouldShowIndeterminateState: a } = A(() => {
-    const i = o.table.getRowModel().flatRows, r = new Set(o.selectedRowIds), t = o.getSelectableRowIds(), c = t.length > 0 && t.every((p) => r.has(p)), R = i.some((p) => r.has(p.id));
+  ), { allIsSelected: a, shouldShowIndeterminateState: n } = A(() => {
+    const i = o.table.getRowModel().flatRows, c = new Set(o.selectedRowIds), t = o.getSelectableRowIds(), l = t.length > 0 && t.every((S) => c.has(S)), h = i.some((S) => c.has(S.id));
     return {
-      allIsSelected: c,
-      shouldShowIndeterminateState: R && !c
+      allIsSelected: l,
+      shouldShowIndeterminateState: h && !l
     };
   }, [o]);
   return /* @__PURE__ */ e(
     P,
     {
-      isChecked: n,
-      isIndeterminate: a,
-      onChange: l
+      isChecked: a,
+      isIndeterminate: n,
+      onChange: r
     }
   );
 }, Q = () => {
-  const { localeString: o, selectedRowIds: l = [], selectionActions: n = [] } = u(), a = k[o], [s] = v("(min-width: 48em)"), i = n.length > 3 || !s, r = l.length === 1 ? a.selectedSingular.replace("{count}", "1") : a.selected.replace("{count}", l.length.toString());
-  return /* @__PURE__ */ S(
-    f,
+  const { localeString: o, selectedRowIds: r = [], selectionActions: a = [] } = p(), n = x[o], [s] = v("(min-width: 48em)"), i = a.length > 3 || !s, c = r.length === 1 ? n.selectedSingular.replace("{count}", "1") : n.selected.replace("{count}", r.length.toString());
+  return /* @__PURE__ */ f(
+    w,
     {
       gap: m.Medium,
       align: "center",
@@ -127,30 +129,30 @@ const W = ({
             fontSize: j.Medium,
             whiteSpace: "nowrap",
             style: { fontVariantNumeric: "normal" },
-            children: r
+            children: c
           }
         ),
         /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(z, { orientation: "vertical", height: "20px" }) }),
-        /* @__PURE__ */ e(f, { gap: m.Small, align: "center", children: i ? /* @__PURE__ */ S(D, { children: [
-          /* @__PURE__ */ e(F, { variant: "ghost", rightIcon: x.TreeViewCollapse, children: a.action }),
-          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(H, { children: n.map((t) => /* @__PURE__ */ e(I, { isMenuItem: !0, action: t }, t.name)) }) })
-        ] }) : n.map((t) => /* @__PURE__ */ e(I, { isMenuItem: !1, action: t }, t.name)) })
+        /* @__PURE__ */ e(w, { gap: m.Small, align: "center", children: i ? /* @__PURE__ */ f(D, { children: [
+          /* @__PURE__ */ e(F, { variant: "ghost", rightIcon: R.TreeViewCollapse, children: n.action }),
+          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(H, { children: a.map((t) => /* @__PURE__ */ e(k, { isMenuItem: !0, action: t }, t.name)) }) })
+        ] }) : a.map((t) => /* @__PURE__ */ e(k, { isMenuItem: !1, action: t }, t.name)) })
       ]
     }
   );
-}, I = ({ isMenuItem: o, action: l }) => {
-  const { selectedRowIds: n, localeString: a } = u(), s = k[a], i = w(() => {
-    l.onClick(n || []);
-  }, [l, n]);
-  return o ? /* @__PURE__ */ e(L, { onClick: i, children: l.variant === "delete" ? /* @__PURE__ */ e(g, { as: "span", color: d.Error, children: l.name }) : l.name }) : l.variant === "delete" ? /* @__PURE__ */ e(
+}, k = ({ isMenuItem: o, action: r }) => {
+  const { selectedRowIds: a, localeString: n } = p(), s = x[n], i = C(() => {
+    r.onClick(a || []);
+  }, [r, a]);
+  return o ? /* @__PURE__ */ e(L, { onClick: i, children: r.variant === "delete" ? /* @__PURE__ */ e(g, { as: "span", color: d.Error, children: r.name }) : r.name }) : r.variant === "delete" ? /* @__PURE__ */ e(
     N,
     {
       onClick: i,
-      icon: x.Delete,
+      icon: R.Delete,
       "aria-label": s.deleteSelectedRows,
       variant: "ghost"
     }
-  ) : /* @__PURE__ */ e(O, { onClick: i, variant: "ghost", children: l.name });
+  ) : /* @__PURE__ */ e(O, { onClick: i, variant: "ghost", children: r.name });
 }, de = y(W);
 export {
   de as TableHeaderRow

package/dist/theme/theme-config/components/combobox-theme.d.ts

@@ -23,6 +23,14 @@ export declare const comboboxConfig: {
             background: ThemeColorVariable;
             color: ThemeColorVariable;
             borderColor: ThemeColorVariable;
+            '&[aria-disabled="true"]': {
+                backgroundColor: ThemeColorVariable;
+                color: ThemeColorVariable;
+            };
+            '&[aria-readonly="true"]': {
+                backgroundColor: ThemeColorVariable;
+                color: ThemeColorVariable;
+            };
             "@media(hover: hover)": {
                 '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
                     borderColor: ThemeColorVariable;
@@ -32,6 +40,17 @@ export declare const comboboxConfig: {
         ghost: {
             background: string;
             color: ThemeColorVariable;
+            '&[aria-disabled="true"]': {
+                backgroundColor: string;
+                color: ThemeColorVariable;
+            };
+            '&[aria-readonly="true"]': {
+                backgroundColor: string;
+                color: ThemeColorVariable;
+                ".combobox-dropdown-icon": {
+                    opacity: number;
+                };
+            };
             '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
                 opacity: number;
             };
@@ -41,7 +60,7 @@ export declare const comboboxConfig: {
                 };
             };
             "@media(hover: hover)": {
-                "&:hover:not(:focus-within)": {
+                '&:hover:not(:focus-within):not([aria-disabled="true"])': {
                     backgroundColor: ThemeColorVariable;
                     ".combobox-dropdown-icon": {
                         opacity: number;

package/dist/theme/theme-config/components/combobox-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/combobox-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAgF5E,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAC"}
+{"version":3,"file":"combobox-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/combobox-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAiG5E,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAC"}

package/dist/theme/theme-config/components/combobox-theme.js

@@ -6,12 +6,10 @@ const a = {
   border: `${e.XSmall} transparent`,
   '&[aria-disabled="true"]': {
     borderColor: "transparent",
-    backgroundColor: o.SurfaceDisabled,
     cursor: "not-allowed"
   },
   '&[aria-readonly="true"]': {
-    borderColor: "transparent",
-    backgroundColor: o.SurfaceDisabled
+    borderColor: "transparent"
   },
   '&[aria-invalid="true"]': {
     borderColor: o.Error,
@@ -30,6 +28,14 @@ const a = {
     background: o.Surface,
     color: o.OnSurface,
     borderColor: o.OnSurfaceBorder,
+    '&[aria-disabled="true"]': {
+      backgroundColor: o.SurfaceDisabled,
+      color: o.OnSurfaceSubdued
+    },
+    '&[aria-readonly="true"]': {
+      backgroundColor: o.SurfaceDisabled,
+      color: o.OnSurface
+    },
     "@media(hover: hover)": {
       '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
         borderColor: o.OnSurface
@@ -39,6 +45,17 @@ const a = {
   ghost: {
     background: "none",
     color: o.OnSurface,
+    '&[aria-disabled="true"]': {
+      backgroundColor: "transparent",
+      color: o.OnSurfaceSubdued
+    },
+    '&[aria-readonly="true"]': {
+      backgroundColor: "transparent",
+      color: o.OnSurface,
+      ".combobox-dropdown-icon": {
+        opacity: 1
+      }
+    },
     '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
       opacity: 0
     },
@@ -48,7 +65,7 @@ const a = {
       }
     },
     "@media(hover: hover)": {
-      "&:hover:not(:focus-within)": {
+      '&:hover:not(:focus-within):not([aria-disabled="true"])': {
         backgroundColor: o.SurfaceDisabled,
         ".combobox-dropdown-icon": {
           opacity: 1

package/dist/theme/theme-config/components/input-theme.d.ts

@@ -121,6 +121,21 @@ export declare const inputConfig: {
                 borderColor: string;
                 background: string;
                 color: ThemeColorToken;
+                _hover: undefined;
+                _disabled: {
+                    cursor: string;
+                    background: string;
+                    color: ThemeColorToken;
+                    borderColor: string;
+                    opacity: number;
+                };
+                _readOnly: {
+                    color: ThemeColorToken;
+                    background: string;
+                    userSelect: string;
+                    opacity: number;
+                    borderColor: string;
+                };
                 _focus: {
                     border: ThemeBorderToken;
                     borderColor: ThemeColorToken;
@@ -128,10 +143,7 @@ export declare const inputConfig: {
                     backgroundColor: ThemeColorToken;
                 };
                 "@media(hover: hover)": {
-                    "&:hover": {
-                        borderColor: ThemeColorToken;
-                    };
-                    "&:hover:not(:focus)": {
+                    "&:hover:not(:focus):not(:disabled)": {
                         backgroundColor: ThemeColorToken;
                         borderColor: string;
                     };
@@ -146,29 +158,10 @@ export declare const inputConfig: {
                 paddingInlineStart: ThemeSpaceToken;
                 paddingInlineEnd: ThemeSpaceToken;
                 width: string;
-                _disabled: {
-                    cursor: string;
-                    background: ThemeColorToken;
-                    color: ThemeColorToken;
-                    border: number;
-                    opacity: number;
-                };
-                _readOnly: {
-                    color: ThemeColorToken;
-                    background: ThemeColorToken;
-                    userSelect: string;
-                    opacity: number;
-                    border: number;
-                };
                 _placeholder: {
                     color: ThemeColorToken;
                     opacity: number;
                 };
-                _hover: {
-                    borderColor: ThemeColorToken;
-                    _disabled: undefined;
-                    _readOnly: undefined;
-                };
             };
             addon: {
                 color: ThemeColorToken;

package/dist/theme/theme-config/components/input-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/input-theme.ts"],"names":[],"mappings":"AAIA,OAAO,EACN,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,MAAM,iBAAiB,CAAC;AAkJzB,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMtB,CAAC"}
+{"version":3,"file":"input-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/input-theme.ts"],"names":[],"mappings":"AAIA,OAAO,EACN,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,MAAM,iBAAiB,CAAC;AA8JzB,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMtB,CAAC"}

package/dist/theme/theme-config/components/input-theme.js

@@ -1,12 +1,12 @@
-import { createMultiStyleConfigHelpers as f, defineStyle as l } from "@chakra-ui/react";
-import { isTouchScreenDevice as m } from "../../theme-helper.js";
+import { createMultiStyleConfigHelpers as s, defineStyle as l } from "@chakra-ui/react";
+import { isTouchScreenDevice as b } from "../../theme-helper.js";
 import { ThemeColorVariable as n } from "../../theme-types.js";
-import { ThemeColorToken as o, ThemeSpaceToken as r, ThemeRadiusToken as t, ThemeBorderToken as d, ThemeFontToken as s, ThemeFontSizeToken as i } from "../theme-tokens.js";
-import { inputAnatomy as b } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
-const { definePartsStyle: a, defineMultiStyleConfig: p } = f(b.keys), c = {
-  fontFamily: s.Body,
+import { ThemeColorToken as o, ThemeSpaceToken as r, ThemeRadiusToken as t, ThemeBorderToken as a, ThemeFontToken as f, ThemeFontSizeToken as i } from "../theme-tokens.js";
+import { inputAnatomy as m } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
+const { definePartsStyle: d, defineMultiStyleConfig: p } = s(m.keys), c = {
+  fontFamily: f.Body,
   color: o.OnSurface,
-  border: d.XSmall,
+  border: a.XSmall,
   borderColor: o.OnSurfaceBorder,
   background: o.Surface,
   borderRadius: t.Small,
@@ -40,7 +40,7 @@ const { definePartsStyle: a, defineMultiStyleConfig: p } = f(b.keys), c = {
     boxShadow: `0 0 0 4px ${n.InfoContainer}`
   },
   _hover: {
-    borderColor: m() ? o.OnSurfaceBorder : o.OnSurface,
+    borderColor: b() ? o.OnSurfaceBorder : o.OnSurface,
     _disabled: void 0,
     _readOnly: void 0
   }
@@ -79,65 +79,77 @@ const { definePartsStyle: a, defineMultiStyleConfig: p } = f(b.keys), c = {
     px: r.Small
   })
 }, g = {
-  lg: a({
+  lg: d({
     field: e.lg,
     addon: e.lg,
     element: e.lg
   }),
-  md: a({
+  md: d({
     field: e.md,
     addon: e.md,
     element: e.md
   }),
-  sm: a({
+  sm: d({
     field: e.sm,
     addon: e.sm,
     element: e.sm
   })
-}, h = a({
+}, C = d({
   field: {
     ...c,
-    border: d.XSmall,
+    border: a.XSmall,
     borderColor: "transparent",
     background: "none",
     color: o.OnSurface,
+    _hover: void 0,
+    _disabled: {
+      cursor: "not-allowed",
+      background: "none",
+      color: o.OnSurfaceSubdued,
+      borderColor: "transparent",
+      opacity: 1
+    },
+    _readOnly: {
+      color: o.OnSurface,
+      background: "none",
+      userSelect: "text",
+      opacity: 1,
+      borderColor: "transparent"
+    },
     _focus: {
-      border: d.XSmall,
+      border: a.XSmall,
       borderColor: o.Info,
       boxShadow: `0 0 0 4px ${n.InfoContainer}`,
       backgroundColor: o.Surface
     },
     "@media(hover: hover)": {
-      "&:hover": {
-        borderColor: o.Info
-      },
-      "&:hover:not(:focus)": {
+      "&:hover:not(:focus):not(:disabled)": {
         backgroundColor: o.SurfaceDisabled,
         borderColor: "transparent"
       }
     },
     _invalid: {
-      border: d.XSmall,
+      border: a.XSmall,
       borderColor: o.Error,
       boxShadow: `0 0 0 4px ${n.ErrorContainer}`
     }
   },
   addon: u,
   element: S
-}), C = {
+}), h = {
   outline: {
     field: c,
     addon: u,
     element: S
   },
-  ghost: h
-}, _ = p({
+  ghost: C
+}, T = p({
   sizes: g,
-  variants: C,
+  variants: h,
   defaultProps: {
     variant: "outline"
   }
 });
 export {
-  _ as inputConfig
+  T as inputConfig
 };

package/dist/theme/theme-config/components/select-theme.d.ts

@@ -98,6 +98,21 @@ export declare const selectConfig: {
                 borderColor?: string | undefined;
                 background?: string | undefined;
                 color?: ThemeColorToken | undefined;
+                _hover?: undefined;
+                _disabled?: {
+                    cursor: string;
+                    background: string;
+                    color: ThemeColorToken;
+                    borderColor: string;
+                    opacity: number;
+                } | undefined;
+                _readOnly?: {
+                    color: ThemeColorToken;
+                    background: string;
+                    userSelect: string;
+                    opacity: number;
+                    borderColor: string;
+                } | undefined;
                 _focus?: {
                     border: import('../theme-tokens.js').ThemeBorderToken;
                     borderColor: ThemeColorToken;
@@ -105,10 +120,7 @@ export declare const selectConfig: {
                     backgroundColor: ThemeColorToken;
                 } | undefined;
                 "@media(hover: hover)"?: {
-                    "&:hover": {
-                        borderColor: ThemeColorToken;
-                    };
-                    "&:hover:not(:focus)": {
+                    "&:hover:not(:focus):not(:disabled)": {
                         backgroundColor: ThemeColorToken;
                         borderColor: string;
                     };
@@ -123,29 +135,10 @@ export declare const selectConfig: {
                 paddingInlineStart?: import('../theme-tokens.js').ThemeSpaceToken | undefined;
                 paddingInlineEnd?: import('../theme-tokens.js').ThemeSpaceToken | undefined;
                 width?: string | undefined;
-                _disabled?: {
-                    cursor: string;
-                    background: ThemeColorToken;
-                    color: ThemeColorToken;
-                    border: number;
-                    opacity: number;
-                } | undefined;
-                _readOnly?: {
-                    color: ThemeColorToken;
-                    background: ThemeColorToken;
-                    userSelect: string;
-                    opacity: number;
-                    border: number;
-                } | undefined;
                 _placeholder?: {
                     color: ThemeColorToken;
                     opacity: number;
                 } | undefined;
-                _hover?: {
-                    borderColor: ThemeColorToken;
-                    _disabled: undefined;
-                    _readOnly: undefined;
-                } | undefined;
             };
             icon: {
                 fontSize: ThemeFontSizeToken;

package/dist/theme/theme-config/components/select-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/select-theme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA8CtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvB,CAAC"}
+{"version":3,"file":"select-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/select-theme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA8CtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvB,CAAC"}

package/dist/theme/theme-config/components/textarea-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/textarea-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAAqB,MAAM,kBAAkB,CAAC;AA8EtF,eAAO,MAAM,cAAc,EAAE,0BAQ3B,CAAC"}
+{"version":3,"file":"textarea-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/textarea-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAAqB,MAAM,kBAAkB,CAAC;AA2FtF,eAAO,MAAM,cAAc,EAAE,0BAQ3B,CAAC"}

package/dist/theme/theme-config/components/textarea-theme.js

@@ -1,14 +1,14 @@
 import { defineStyleConfig as d } from "@chakra-ui/react";
 import { isTouchScreenDevice as n } from "../../theme-helper.js";
-import { ThemeColorVariable as r } from "../../theme-types.js";
-import { ThemeColorToken as o, ThemeBorderToken as e, ThemeSpaceToken as l, ThemeRadiusToken as i, ThemeFontToken as c } from "../theme-tokens.js";
+import { ThemeColorVariable as e } from "../../theme-types.js";
+import { ThemeColorToken as o, ThemeBorderToken as r, ThemeSpaceToken as l, ThemeRadiusToken as t, ThemeFontToken as c } from "../theme-tokens.js";
 const a = {
   fontFamily: c.Body,
   color: o.OnSurface,
-  border: e.XSmall,
+  border: r.XSmall,
   borderColor: o.OnSurfaceBorder,
   background: o.Surface,
-  borderRadius: i.Small,
+  borderRadius: t.Small,
   paddingX: l.Medium,
   paddingY: "12px",
   width: "100%",
@@ -32,7 +32,7 @@ const a = {
   },
   _invalid: {
     borderColor: o.Error,
-    boxShadow: `0 0 0 4px ${r.ErrorContainer}`
+    boxShadow: `0 0 0 4px ${e.ErrorContainer}`
   },
   _hover: {
     borderColor: n() ? o.OnSurfaceBorder : o.OnSurface,
@@ -41,39 +41,52 @@ const a = {
   },
   _focus: {
     borderColor: o.Info,
-    boxShadow: `0 0 0 4px ${r.InfoContainer}`
+    boxShadow: `0 0 0 4px ${e.InfoContainer}`
   }
-}, t = {
+}, i = {
   ...a,
-  border: "none",
+  border: r.XSmall,
+  borderColor: "transparent",
+  _hover: void 0,
+  _disabled: {
+    cursor: "not-allowed",
+    background: "none",
+    color: o.OnSurfaceSubdued,
+    borderColor: "transparent",
+    opacity: 1
+  },
+  _readOnly: {
+    color: o.OnSurface,
+    background: "none",
+    userSelect: "text",
+    opacity: 1,
+    borderColor: "transparent"
+  },
   _focus: {
-    border: e.XSmall,
+    border: r.XSmall,
     borderColor: o.Info,
-    boxShadow: `0 0 0 4px ${r.InfoContainer}`
+    boxShadow: `0 0 0 4px ${e.InfoContainer}`
   },
   "@media(hover: hover)": {
-    "&:hover": {
-      borderColor: o.Info
-    },
-    "&:hover:not(:focus)": {
+    "&:hover:not(:focus):not(:disabled)": {
       backgroundColor: o.SurfaceDisabled,
-      borderColor: o.OnSurfaceBorder
+      borderColor: "transparent"
     }
   },
   _invalid: {
-    border: e.XSmall,
+    border: r.XSmall,
     borderColor: o.Error,
-    boxShadow: `0 0 0 4px ${r.ErrorContainer}`
+    boxShadow: `0 0 0 4px ${e.ErrorContainer}`
   }
-}, s = d({
+}, f = d({
   variants: {
     unstyled: a,
-    ghost: t
+    ghost: i
   },
   defaultProps: {
     variant: "unstyled"
   }
 });
 export {
-  s as textareaConfig
+  f as textareaConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "7.10.0",
+	"version": "7.11.0",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,