@caspeco/casper-ui-library 5.1.0 → 5.2.0

package/README.md

@@ -63,3 +63,4 @@ export default defineConfig({
 3. Make your changes.
 4. Bump the `version` field in `package.json` (following [Semantic versioning](https://semver.org/)) and run `npm install`.
 5. Open a [pull request](https://github.com/Caspeco/casper-ui-library/pulls) using the template and assign a reviewer.
+6. When you have gotten your PR approved, merge the PR. If you have a new version in package.json it will automatically publish your changes to npm. A new version of the documentation website will always be built.

package/dist/components/breadcrumbs/breadcrumb-item.d.ts

@@ -1,5 +1,5 @@
 import { BreadcrumbItemProps as ChakraBreadcrumbItemProps } from '@chakra-ui/react';
-type ChakraBreadcrumbItemProperties = Pick<ChakraBreadcrumbItemProps, "children" | "isCurrentPage" | "key" | "color">;
+type ChakraBreadcrumbItemProperties = Pick<ChakraBreadcrumbItemProps, "overflow" | "children" | "isCurrentPage" | "key" | "color">;
 export type BreadcrumbItemProps = ChakraBreadcrumbItemProperties;
 export declare function BreadcrumbItem({ children, ...props }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/breadcrumbs/breadcrumb-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CACzC,yBAAyB,EACzB,UAAU,GAAG,eAAe,GAAG,KAAK,GAAG,OAAO,CAC9C,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAEzE"}
+{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CACzC,yBAAyB,EACzB,UAAU,GAAG,UAAU,GAAG,eAAe,GAAG,KAAK,GAAG,OAAO,CAC3D,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAMzE"}

package/dist/components/breadcrumbs/breadcrumb-item.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { BreadcrumbItem as t } from "@chakra-ui/react";
-function a({ children: r, ...m }) {
-  return /* @__PURE__ */ e(t, { ...m, children: r });
+import { jsx as m } from "react/jsx-runtime";
+import { BreadcrumbItem as o } from "@chakra-ui/react";
+function c({ children: r, ...e }) {
+  return /* @__PURE__ */ m(o, { whiteSpace: "nowrap", overflow: "hidden", ...e, children: r });
 }
 export {
-  a as BreadcrumbItem
+  c as BreadcrumbItem
 };

package/dist/components/breadcrumbs/breadcrumb-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-link.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;AAClG,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,GAAG;IAClE,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAEzE"}
+{"version":3,"file":"breadcrumb-link.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;AAClG,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,GAAG;IAClE,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAMzE"}

package/dist/components/breadcrumbs/breadcrumb-link.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
-import { BreadcrumbLink as n } from "@chakra-ui/react";
-function t({ children: r, ...m }) {
-  return /* @__PURE__ */ i(n, { ...m, children: r });
+import { BreadcrumbLink as o } from "@chakra-ui/react";
+function t({ children: r, ...e }) {
+  return /* @__PURE__ */ i(o, { overflow: "hidden", textOverflow: "ellipsis", ...e, children: r });
 }
 export {
   t as BreadcrumbLink

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,11 +1,22 @@
+import { As } from '@chakra-ui/react';
 export type Breadcrumb = {
     title: string;
-    as?: any;
+    as?: As;
     to?: string;
     href?: string;
 };
 export type BreadcrumbsProps = {
+    /**
+     * The number of items to show before the ellipsis when collapsed.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * The number of items to show after the ellipsis when collapsed.
+     * @default 2
+     */
+    itemsAfterCollapse?: number;
     breadCrumbs: Breadcrumb[];
 };
-export declare function Breadcrumbs({ breadCrumbs }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumbs({ breadCrumbs, itemsBeforeCollapse, itemsAfterCollapse, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/components/breadcrumbs/breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,WAAW,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAgEF,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,EAAE,gBAAgB,2CAoC5D"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAI3E,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,EAAE,CAAC;IACR,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAgEF,wBAAgB,WAAW,CAAC,EAC3B,WAAW,EACX,mBAAuB,EACvB,kBAAsB,GACtB,EAAE,gBAAgB,2CA6DlB"}

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -1,55 +1,80 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { Breadcrumb as p } from "@chakra-ui/react";
-import { BreadcrumbItem as u } from "./breadcrumb-item.js";
-import { BreadcrumbLink as f } from "./breadcrumb-link.js";
-import { Menu as d } from "../menu/menu.js";
-import { MenuButton as g } from "../menu/menu-button.js";
-import { MenuList as M } from "../menu/menu-list.js";
-import { MenuItem as s } from "../menu/menu-item.js";
-import { ThemeFontVariable as k, ThemeFontSizeVariable as S, ThemeColorVariable as c } from "../../theme/theme-types.js";
-function y({ key: n, isCurrentPage: i, breadCrumb: t }) {
-  const e = i ? c.OnBackground : c.OnBackgroundSubdued;
-  return /* @__PURE__ */ h(u, { isCurrentPage: i, color: e, children: [
-    t.as && t.to && !t.href && /* @__PURE__ */ o(f, { as: t.as, to: t.to, children: t.title }),
-    t.href && !t.as && !t.to && /* @__PURE__ */ o(f, { href: t.href, children: t.title })
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { Breadcrumb as f } from "@chakra-ui/react";
+import { BreadcrumbItem as M } from "./breadcrumb-item.js";
+import { BreadcrumbLink as m } from "./breadcrumb-link.js";
+import { Menu as O } from "../menu/menu.js";
+import { MenuButton as w } from "../menu/menu-button.js";
+import { MenuList as z } from "../menu/menu-list.js";
+import { MenuItem as u } from "../menu/menu-item.js";
+import { ThemeFontVariable as a, ThemeFontSizeVariable as B, ThemeColorVariable as c } from "../../theme/theme-types.js";
+function g({ key: n, isCurrentPage: e, breadCrumb: t }) {
+  const i = e ? c.OnBackground : c.OnBackgroundSubdued;
+  return /* @__PURE__ */ d(M, { isCurrentPage: e, color: i, children: [
+    t.as && t.to && !t.href && /* @__PURE__ */ o(m, { as: t.as, to: t.to, children: t.title }),
+    t.href && !t.as && !t.to && /* @__PURE__ */ o(m, { href: t.href, children: t.title })
   ] }, n);
 }
-function I({ key: n, breadCrumbs: i }) {
-  return /* @__PURE__ */ o(u, { color: c.OnBackgroundSubdued, children: /* @__PURE__ */ h(d, { children: [
-    /* @__PURE__ */ o(g, { variant: "ghost", size: "sm", "aria-label": "Show collapsed items", children: "..." }),
-    /* @__PURE__ */ o(M, { children: i.map((t, e) => t.as && t.to ? /* @__PURE__ */ o(s, { as: t.as, to: t.to, children: t.title }, e) : t.href ? /* @__PURE__ */ o(s, { itemType: "link", href: t.href, children: t.title }, e) : /* @__PURE__ */ o(s, { isDisabled: !0, children: t.title }, e)) })
+function F({ key: n, breadCrumbs: e }) {
+  return /* @__PURE__ */ o(M, { overflow: "unset", color: c.OnBackgroundSubdued, children: /* @__PURE__ */ d(O, { children: [
+    /* @__PURE__ */ o(w, { variant: "ghost", size: "sm", "aria-label": "Show collapsed items", children: "..." }),
+    /* @__PURE__ */ o(z, { children: e.map((t, i) => t.as && t.to ? /* @__PURE__ */ o(u, { as: t.as, to: t.to, children: t.title }, i) : t.href ? /* @__PURE__ */ o(u, { itemType: "link", href: t.href, children: t.title }, i) : /* @__PURE__ */ o(u, { isDisabled: !0, children: t.title }, i)) })
   ] }) }, n);
 }
-function D({ breadCrumbs: n }) {
-  const i = n.length > 4, t = i ? n.slice(1, -2) : [], e = n.filter((r) => !t.includes(r)), m = i ? [
-    ...e.slice(0, 1),
+function H({
+  breadCrumbs: n,
+  itemsBeforeCollapse: e = 1,
+  itemsAfterCollapse: t = 2
+}) {
+  const i = e + t;
+  if (!(n.length > i)) {
+    const l = n;
+    return /* @__PURE__ */ o(
+      f,
+      {
+        color: c.OnBackground,
+        fontSize: B.Medium,
+        fontFamily: a.Body,
+        width: "100%",
+        children: l.map((r, s, h) => {
+          const I = s + 1 === h.length;
+          return g({
+            key: s.toString(),
+            isCurrentPage: I,
+            breadCrumb: r
+          });
+        })
+      }
+    );
+  }
+  const k = n.slice(0, e), p = t > 0 ? n.slice(-t) : [], S = n.slice(e, n.length - t), y = [
+    ...k,
     {
       title: "",
-      as: "",
       isMenuButton: !0
     },
-    ...e.slice(1)
-  ] : e;
+    ...p
+  ];
   return /* @__PURE__ */ o(
-    p,
+    f,
     {
       color: c.OnBackground,
-      fontSize: S.Medium,
-      fontFamily: k.Body,
-      children: m.map((r, l, a) => {
-        const B = l + 1 === a.length;
-        return r.isMenuButton ? I({
-          key: l.toString(),
-          breadCrumbs: t
-        }) : y({
-          key: l.toString(),
-          isCurrentPage: B,
-          breadCrumb: r
+      fontSize: B.Medium,
+      fontFamily: a.Body,
+      width: "100%",
+      children: y.map((l, r, s) => {
+        const h = r + 1 === s.length;
+        return l.isMenuButton ? F({
+          key: r.toString(),
+          breadCrumbs: S
+        }) : g({
+          key: r.toString(),
+          isCurrentPage: h,
+          breadCrumb: l
         });
       })
     }
   );
 }
 export {
-  D as Breadcrumbs
+  H as Breadcrumbs
 };

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,2CAwKpB"}
+{"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,2CAiLpB"}

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

@@ -1,16 +1,16 @@
 import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { useStyleConfig as E, Flex as u, Box as d, Input as F } from "@chakra-ui/react";
-import { Fragment as L } from "react";
-import { ComboboxItem as O } from "./combobox-item.js";
-import { Tag as N } from "../tag/tag.js";
-import { Icon as X } from "../icon/icon.js";
-import { Icons as K } from "../icon/types.js";
-import { ThemeColorVariable as n, ThemeSpaceVariable as c, ThemeRadiusVariable as T, ThemeIconSizeVariable as U } from "../../theme/theme-types.js";
-function y() {
+import { useStyleConfig as F, Flex as u, Box as d, Input as L } from "@chakra-ui/react";
+import { Fragment as N } from "react";
+import { ComboboxItem as y } from "./combobox-item.js";
+import { Tag as X } from "../tag/tag.js";
+import { Icon as $ } from "../icon/icon.js";
+import { Icons as v } from "../icon/types.js";
+import { ThemeColorVariable as r, ThemeSpaceVariable as c, ThemeRadiusVariable as K, ThemeIconSizeVariable as T } from "../../theme/theme-types.js";
+function s() {
   return /* @__PURE__ */ i(
     d,
     {
-      backgroundColor: n.NeutralContainer,
+      backgroundColor: r.NeutralContainer,
       width: "8px",
       borderRadius: "4px",
       marginRight: "-8px",
@@ -21,45 +21,45 @@ function y() {
         height: "100%",
         width: "8px",
         display: "block",
-        backgroundColor: n.Surface
+        backgroundColor: r.Surface
       }
     }
   );
 }
 function H({
-  id: s,
+  id: _,
   asPlainText: l,
   inputValue: b,
-  selectedItems: r,
-  displayItems: _,
-  toggleItem: x,
-  highlightState: f,
+  selectedItems: n,
+  displayItems: E,
+  toggleItem: C,
+  highlightState: e,
   openState: a,
   parentStrings: j,
   size: B,
   variant: R,
-  label: C,
+  label: S,
   placeHolderText: V,
   isDisabled: h,
   isReadOnly: m,
-  isInvalid: W,
-  collapsed: S,
-  hasPendingDelete: w,
-  setHasPendingDelete: g,
-  setInputValue: k,
-  onSearch: t,
-  isSingleSelect: v
+  isInvalid: w,
+  collapsed: k,
+  hasPendingDelete: g,
+  setHasPendingDelete: x,
+  setInputValue: t,
+  onSearch: O,
+  isSingleSelect: W
 }) {
-  const z = E("Combobox", { size: B, variant: R }), A = (o) => {
-    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? x(_[f.index]) : a.open()), o.key === "Escape") {
+  const z = F("Combobox", { size: B, variant: R }), A = (o) => {
+    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? C(E[e.index]) : a.open()), o.key === "Escape") {
       if (!a.isOpen) return;
-      o.preventDefault(), o.stopPropagation(), a.close(), l || (k(""), t?.(""));
+      o.preventDefault(), o.stopPropagation(), a.close(), l || (t(""), O?.(""));
     }
-    o.key === "Backspace" ? b.length === 0 && r.length > 0 && !l && (w ? (x(r[r.length - 1]), g(!1)) : g(!0)) : g(!1), o.key === "ArrowDown" && (a.isOpen ? f.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? f.previous() : a.open());
+    o.key === "Backspace" ? b.length === 0 && n.length > 0 && !l && (g ? (C(n[n.length - 1]), x(!1)) : x(!0)) : x(!1), o.key === "ArrowDown" && (a.isOpen ? e.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? e.previous() : a.open());
   }, D = (o) => {
     o.preventDefault(), o.stopPropagation();
-    const e = o.target.value;
-    k(e), t?.(e), f.set(0), a.open();
+    const f = o.target.value;
+    t(f), O?.(f), e.set(0), a.open();
   };
   return /* @__PURE__ */ p(
     u,
@@ -67,27 +67,32 @@ function H({
       __css: z,
       "aria-disabled": h,
       "aria-readonly": m,
-      borderRadius: T.Small,
+      "aria-invalid": w,
+      borderRadius: K.Small,
       padding: c.Small,
-      _focusWithin: {
-        borderColor: n.Info,
-        boxShadow: `0 0 0 4px ${n.InfoContainer}`,
-        backgroundColor: n.Surface
+      _focusWithin: w ? {
+        borderColor: r.Error,
+        boxShadow: `0 0 0 4px ${r.ErrorContainer}`,
+        backgroundColor: r.Surface
+      } : {
+        borderColor: r.Info,
+        boxShadow: `0 0 0 4px ${r.InfoContainer}`,
+        backgroundColor: r.Surface
       },
       _disabled: {
         borderColor: "transparent",
-        backgroundColor: n.SurfaceDisabled
+        backgroundColor: r.SurfaceDisabled
       },
       children: [
         /* @__PURE__ */ p(
           u,
           {
-            flexWrap: S || v ? "nowrap" : "wrap",
+            flexWrap: k || W ? "nowrap" : "wrap",
             gap: c.Small,
             overflow: "hidden",
             children: [
-              C && /* @__PURE__ */ i(d, { whiteSpace: "nowrap", children: C }),
-              !l && (S ? r.length > 0 && /* @__PURE__ */ p(
+              S && /* @__PURE__ */ i(d, { whiteSpace: "nowrap", children: S }),
+              !l && (k ? n.length > 0 && /* @__PURE__ */ p(
                 u,
                 {
                   gap: c.XSmall,
@@ -96,48 +101,48 @@ function H({
                   whiteSpace: "nowrap",
                   textOverflow: "ellipsis",
                   children: [
-                    r.length > 3 && /* @__PURE__ */ i(y, {}),
-                    r.length > 2 && /* @__PURE__ */ i(y, {}),
-                    r.length > 1 && /* @__PURE__ */ i(N, { children: r.length - 1 }),
+                    n.length > 3 && /* @__PURE__ */ i(s, {}),
+                    n.length > 2 && /* @__PURE__ */ i(s, {}),
+                    n.length > 1 && /* @__PURE__ */ i(X, { children: n.length - 1 }),
                     /* @__PURE__ */ i(
-                      O,
+                      y,
                       {
-                        isDeleting: w,
-                        item: r[r.length - 1],
+                        isDeleting: g,
+                        item: n[n.length - 1],
                         asPlainText: l
                       }
                     )
                   ]
                 }
-              ) : r.map((o, e) => /* @__PURE__ */ i(
-                O,
+              ) : n.map((o, f) => /* @__PURE__ */ i(
+                y,
                 {
                   item: o,
                   asPlainText: l,
-                  isDeleting: e === r.length - 1 && w
+                  isDeleting: f === n.length - 1 && g
                 },
                 o.id
               ))),
-              l && r.length > 0 && b === r[0].label && j[r[0].id]?.map((o) => /* @__PURE__ */ p(L, { children: [
+              l && n.length > 0 && b === n[0].label && j[n[0].id]?.map((o) => /* @__PURE__ */ p(N, { children: [
                 /* @__PURE__ */ i(
                   d,
                   {
-                    color: n.OnSurfaceSubdued,
+                    color: r.OnSurfaceSubdued,
                     textOverflow: "ellipsis",
                     overflow: "hidden",
                     whiteSpace: "nowrap",
                     children: o
                   }
                 ),
-                /* @__PURE__ */ i(d, { color: n.OnSurfaceSubdued, children: "/" })
+                /* @__PURE__ */ i(d, { color: r.OnSurfaceSubdued, children: "/" })
               ] }, o)),
               /* @__PURE__ */ i(
-                F,
+                L,
                 {
-                  id: s,
+                  id: _,
                   isDisabled: h,
                   isReadOnly: m,
-                  isInvalid: W,
+                  isInvalid: w,
                   onKeyDown: A,
                   variant: "unstyled",
                   value: b,
@@ -147,14 +152,14 @@ function H({
                   placeholder: V,
                   border: "none",
                   flex: 1,
-                  color: n.OnSurface,
+                  color: r.OnSurface,
                   outline: "none",
                   _placeholder: {
-                    color: n.OnSurfaceSubdued
+                    color: r.OnSurfaceSubdued
                   },
                   _disabled: {
                     cursor: "not-allowed",
-                    color: n.OnSurfaceSubdued
+                    color: r.OnSurfaceSubdued
                   }
                 }
               )
@@ -162,11 +167,11 @@ function H({
           }
         ),
         /* @__PURE__ */ i(u, { className: "combobox-dropdown-icon", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ i(
-          X,
+          $,
           {
-            icon: K.TreeViewCollapse,
-            size: U.Small,
-            color: h || m ? n.OnSurfaceSubdued : n.OnSurface
+            icon: v.TreeViewCollapse,
+            size: T.Small,
+            color: h || m ? r.OnSurfaceSubdued : r.OnSurface
           }
         ) })
       ]

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;AAoE5E,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;AAgF5E,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAC"}

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

@@ -12,6 +12,18 @@ const a = {
   '&[aria-readonly="true"]': {
     borderColor: "transparent",
     backgroundColor: o.SurfaceDisabled
+  },
+  '&[aria-invalid="true"]': {
+    borderColor: o.Error,
+    _focusWithin: {
+      borderColor: o.Error,
+      boxShadow: `0 0 0 4px ${o.ErrorContainer}`
+    },
+    "@media(hover: hover)": {
+      "&:hover:not(:focus-within)": {
+        borderColor: o.ErrorHover
+      }
+    }
   }
 }, n = {
   outline: {

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

@@ -7,6 +7,7 @@ export declare const paginatorConfig: {
         display: string;
         justifyContent: string;
         alignItems: string;
+        fontVariant: string;
         padding: ThemeSpaceVariable;
         gap: ThemeSpaceVariable;
         div: {

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

@@ -1 +1 @@
-{"version":3,"file":"paginator-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/paginator-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB1B,CAAC"}
+{"version":3,"file":"paginator-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/paginator-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB1B,CAAC"}

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

@@ -1,22 +1,23 @@
-import { defineStyleConfig as o } from "@chakra-ui/react";
-import { ThemeFontSizeVariable as a, ThemeSpaceVariable as e, ThemeColorVariable as i, ThemeFontVariable as t } from "../../theme-types.js";
-const r = o({
+import { defineStyleConfig as a } from "@chakra-ui/react";
+import { ThemeFontSizeVariable as o, ThemeSpaceVariable as e, ThemeColorVariable as t, ThemeFontVariable as i } from "../../theme-types.js";
+const l = a({
   baseStyle: {
     width: "100%",
-    fontFamily: t.Body,
-    color: i.OnBackground,
+    fontFamily: i.Body,
+    color: t.OnBackground,
     display: "flex",
     justifyContent: "flex-end",
     alignItems: "center",
+    fontVariant: "tabular-nums",
     padding: e.Small,
     gap: e.Medium,
     div: {
       button: {
-        fontSize: a.Large
+        fontSize: o.Large
       }
     }
   }
 });
 export {
-  r as paginatorConfig
+  l as paginatorConfig
 };

package/package.json

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