@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

package/dist/components/modal/modal-close-button.js

@@ -1,20 +1,19 @@
-import { jsx as o } from "react/jsx-runtime";
-import { ModalCloseButton as e } from "@chakra-ui/react";
-import { Icon as i } from "../icon/icon.js";
-import { Icons as r } from "../icon/types.js";
-import { ThemeSpaceVariable as t, ThemeIconSizeVariable as m } from "../../theme/theme-types.js";
-function c({ isAbsolutePositioned: n = !1 }) {
-  return n ? /* @__PURE__ */ o(
-    e,
+import { jsx as e } from "react/jsx-runtime";
+import { DialogCloseTrigger as i } from "@chakra-ui/react";
+import { ThemeSpaceVariable as o, ThemeIconSizeVariable as r } from "../../theme/theme-types.js";
+import { CloseIcon as m } from "../icon/icons/close-icon.js";
+function u({ isAbsolutePositioned: t = !1 }) {
+  return t ? /* @__PURE__ */ e(
+    i,
     {
       position: "absolute",
       zIndex: 1,
-      top: t.Medium,
-      right: t.Medium,
-      children: /* @__PURE__ */ o(i, { icon: r.Close, size: m.Medium })
+      top: o.Medium,
+      right: o.Medium,
+      children: /* @__PURE__ */ e(m, { size: r.Medium })
     }
-  ) : /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(i, { icon: r.Close, size: m.Medium }) });
+  ) : /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(m, { size: r.Medium }) });
 }
 export {
-  c as ModalCloseButton
+  u as ModalCloseButton
 };

package/dist/components/modal/modal-footer.d.ts

@@ -1,6 +1,6 @@
 import { ThemeStyleProps } from '../../theme/index.js';
-import { ModalFooterProps as ChakraModalFooterProps } from '@chakra-ui/react';
-export type ModalFooterProps = Pick<ChakraModalFooterProps, "children"> & ThemeStyleProps;
+import { Dialog as ChakraDialog } from '@chakra-ui/react';
+export type ModalFooterProps = Pick<ChakraDialog.FooterProps, "children"> & ThemeStyleProps;
 /**
  * ModalFooter houses any action buttons of the modal.
  * When sibling element ModalBody is overflowing the ModalFooter will be

package/dist/components/modal/modal-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-footer.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAEN,KAAK,gBAAgB,IAAI,sBAAsB,EAC/C,MAAM,kBAAkB,CAAC;AAG1B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC;AAE1F;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAqCnE"}
+{"version":3,"file":"modal-footer.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAI1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC;AAE5F;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CA0BnE"}

package/dist/components/modal/modal-footer.js

@@ -1,20 +1,21 @@
-import { jsx as l } from "react/jsx-runtime";
-import { ModalFooter as f } from "@chakra-ui/react";
-import { useState as m, useEffect as h } from "react";
-function x({ children: n, ...s }) {
-  const [a, d] = m(!1);
-  return h(() => {
-    const e = new ResizeObserver((i) => {
-      const t = i[0];
-      if (!t)
-        return;
-      const r = t.target, c = r.scrollHeight > r.clientHeight;
-      d(c);
-    }), o = document.querySelector("[id^='chakra-modal--body']");
-    return o && e.observe(o), () => {
-      o && e.unobserve(o), e.disconnect();
-    };
-  }, []), /* @__PURE__ */ l(f, { boxShadow: a ? "0px 0px 16px rgba(0, 0, 0, 0.24)" : "none", ...s, children: n });
+import { jsx as f } from "react/jsx-runtime";
+import { Dialog as d } from "@chakra-ui/react";
+import { useState as m, useEffect as u } from "react";
+import { useModalBodyContext as p } from "./modal-body-context.js";
+function x({ children: r, ...n }) {
+  const [s, i] = m(!1), o = p()?.bodyElement ?? null;
+  u(() => {
+    if (!o) return;
+    const t = new ResizeObserver((a) => {
+      const e = a[0];
+      if (!e) return;
+      const c = e.target.scrollHeight > e.target.clientHeight;
+      i(c);
+    });
+    return t.observe(o), () => t.disconnect();
+  }, [o]);
+  const l = s ? "0px 0px 16px rgba(0, 0, 0, 0.24)" : "none";
+  return /* @__PURE__ */ f(d.Footer, { boxShadow: l, ...n, children: r });
 }
 export {
   x as ModalFooter

package/dist/components/modal/modal-header.d.ts

@@ -1,11 +1,11 @@
 import { ThemeStyleProps } from '../../theme/index.js';
-import { ModalHeaderProps as ChakraModalHeaderProps } from '@chakra-ui/react';
+import { Dialog as ChakraDialog } from '@chakra-ui/react';
 type CustomModalHeaderProperties = {
     /** Will make the header and its content stick to the top of the modal
      * while scrolling overflowing content. Defaults to false. */
     sticky?: boolean;
 };
-export type ModalHeaderProps = Pick<ChakraModalHeaderProps, "children"> & CustomModalHeaderProperties & ThemeStyleProps;
+export type ModalHeaderProps = Pick<ChakraDialog.HeaderProps, "children"> & CustomModalHeaderProperties & ThemeStyleProps;
 /**
  * React component that houses the title of the modal.
  *

package/dist/components/modal/modal-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAEN,KAAK,gBAAgB,IAAI,sBAAsB,EAC/C,MAAM,kBAAkB,CAAC;AAE1B,KAAK,2BAA2B,GAAG;IAClC;iEAC6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,GACtE,2BAA2B,GAC3B,eAAe,CAAC;AAEjB;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAc,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAMnF"}
+{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE1D,KAAK,2BAA2B,GAAG;IAClC;iEAC6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,UAAU,CAAC,GACxE,2BAA2B,GAC3B,eAAe,CAAC;AAEjB;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAc,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAMnF"}

package/dist/components/modal/modal-header.js

@@ -1,7 +1,7 @@
-import { jsx as a } from "react/jsx-runtime";
-import { ModalHeader as d } from "@chakra-ui/react";
-function p({ children: r, sticky: o = !1, ...e }) {
-  return /* @__PURE__ */ a(d, { position: o ? "sticky" : void 0, top: o ? 0 : void 0, ...e, children: r });
+import { jsx as e } from "react/jsx-runtime";
+import { Dialog as t } from "@chakra-ui/react";
+function p({ children: r, sticky: o = !1, ...i }) {
+  return /* @__PURE__ */ e(t.Header, { position: o ? "sticky" : void 0, top: o ? 0 : void 0, ...i, children: r });
 }
 export {
   p as ModalHeader

package/dist/components/modal/modal-recipe.d.ts

@@ -0,0 +1,3 @@
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+export declare const modalRecipe: SlotRecipeDefinition;
+//# sourceMappingURL=modal-recipe.d.ts.map

package/dist/components/modal/modal-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-recipe.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAoB,MAAM,kBAAkB,CAAC;AAG/E,eAAO,MAAM,WAAW,EAAE,oBAgIxB,CAAC"}

package/dist/components/modal/modal-recipe.js

@@ -0,0 +1,136 @@
+import { buttonRecipe as t } from "../button/button-recipe.js";
+import { ThemeColorToken as e, ThemeRadiusToken as o, ThemeFontToken as a, ThemeFontSizeToken as r } from "../../theme/theme-tokens.js";
+import { defineSlotRecipe as i } from "@chakra-ui/react";
+import { dialogAnatomy as n } from "../../node_modules/@chakra-ui/react/dist/esm/anatomy.js";
+const x = i({
+  className: "modal",
+  slots: n.keys(),
+  base: {
+    backdrop: {
+      // Non white label-overridable color based on black, always
+      bg: "rgba(0, 0, 0, 0.32)"
+    },
+    header: {
+      display: "block",
+      bg: e.Surface,
+      position: "relative",
+      fontSize: r.XLarge,
+      fontFamily: a.SubHeader,
+      color: e.OnSurfaceHeader,
+      fontWeight: "medium",
+      borderTopRadius: o.Large,
+      minHeight: "72px",
+      px: 0,
+      py: 0
+    },
+    body: {
+      borderTopRadius: o.Large,
+      fontFamily: a.Body,
+      px: 0,
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    content: {
+      maxW: "384px",
+      my: "48px",
+      borderRadius: o.Large,
+      bg: e.Surface,
+      color: e.OnSurface
+    },
+    positioner: {
+      height: "100dvh"
+    },
+    footer: {
+      borderBottomRadius: o.Large,
+      bg: e.Surface,
+      gap: "unset",
+      paddingTop: 0,
+      paddingBottom: 0,
+      px: 0
+    },
+    closeTrigger: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "40px",
+      minW: "40px",
+      maxW: "40px",
+      height: "40px",
+      minH: "40px",
+      maxH: "40px",
+      position: "relative",
+      zIndex: "0",
+      right: "unset",
+      top: "unset",
+      alignSelf: "flex-start",
+      ...t.base,
+      ...t.variants?.variant?.secondary
+    }
+  },
+  variants: {
+    variant: {
+      /** Custom variant appearing as a mobile app "bottom sheet",
+       * filling 100% of view width and max 100% - 88px view height. */
+      bottomSheet: {
+        content: {
+          maxW: "100vw",
+          maxHeight: "calc(100dvh - 88px)",
+          borderBottomRadius: 0,
+          margin: 0
+        },
+        footer: {
+          borderBottomRadius: 0
+        },
+        positioner: {
+          alignItems: "flex-end"
+        }
+      }
+    },
+    size: {
+      sm: {
+        content: {
+          maxW: "384px"
+        }
+      },
+      md: {
+        content: {
+          maxW: "560px",
+          mx: "48px"
+        }
+      },
+      lg: {
+        content: {
+          maxW: "960px",
+          mx: "80px"
+        }
+      },
+      xl: {
+        content: {
+          maxW: "100%",
+          mx: "80px"
+        }
+      },
+      full: {
+        content: {
+          borderRadius: 0
+        },
+        body: {
+          borderRadius: 0
+        },
+        header: {
+          borderRadius: 0
+        },
+        footer: {
+          borderRadius: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: void 0,
+    size: "sm"
+  }
+});
+export {
+  x as modalRecipe
+};

package/dist/components/modal/modal.d.ts

@@ -1,11 +1,18 @@
-import { ModalProps as ChakraModalProps } from '@chakra-ui/react';
+import { Dialog as ChakraDialog } from '@chakra-ui/react';
 type CustomModalProperties = {
     /** Defines max width of modal on larger viewports. With the exception of 'full'
      * which covers 100% of any screen both horizontally and vertically. */
     size?: "sm" | "md" | "lg" | "xl" | "full";
+    onClose?: () => void;
+    isOpen?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    isCentered?: boolean;
+    returnFocusOnClose?: boolean;
+    onCloseComplete?: () => void;
 };
-type CharkaModalProperties = Pick<ChakraModalProps, "children" | "onClose" | "isOpen" | "id" | "isCentered" | "scrollBehavior" | "autoFocus" | "returnFocusOnClose" | "onCloseComplete" | "closeOnOverlayClick" | "closeOnEsc">;
-export type ModalProps = CustomModalProperties & CharkaModalProperties;
-export declare function Modal({ children, size, scrollBehavior, autoFocus, isCentered, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+type ChakraDialogProperties = Pick<ChakraDialog.RootProps, "children" | "id" | "scrollBehavior" | "lazyMount">;
+export type ModalProps = CustomModalProperties & ChakraDialogProperties;
+export declare function Modal({ children, isOpen, onClose, closeOnOverlayClick, closeOnEsc, onCloseComplete, returnFocusOnClose, size, scrollBehavior, isCentered, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,UAAU,IAAI,gBAAgB,EAGnC,MAAM,kBAAkB,CAAC;AAE1B,KAAK,qBAAqB,GAAG;IAC5B;2EACuE;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC1C,CAAC;AAEF,KAAK,qBAAqB,GAAG,IAAI,CAChC,gBAAgB,EACd,UAAU,GACV,SAAS,GACT,QAAQ,GACR,IAAI,GACJ,YAAY,GACZ,gBAAgB,GAChB,WAAW,GACX,oBAAoB,GACpB,iBAAiB,GACjB,qBAAqB,GACrB,YAAY,CACd,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAAG,qBAAqB,CAAC;AAEvE,wBAAgB,KAAK,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,cAAyB,EACzB,SAAiB,EACjB,UAAiB,EACjB,GAAG,KAAK,EACR,EAAE,UAAU,2CAiBZ"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,IAAI,YAAY,EAItB,MAAM,kBAAkB,CAAC;AAI1B,KAAK,qBAAqB,GAAG;IAC5B;2EACuE;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAG1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,KAAK,sBAAsB,GAAG,IAAI,CACjC,YAAY,CAAC,SAAS,EACtB,UAAU,GAAG,IAAI,GAAG,gBAAgB,GAAG,WAAW,CAClD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAExE,wBAAgB,KAAK,CAAC,EACrB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,mBAAmB,EACnB,UAAU,EACV,eAAe,EACf,kBAAyB,EACzB,IAAW,EACX,cAAyB,EACzB,UAAiB,EACjB,GAAG,KAAK,EACR,EAAE,UAAU,2CAoCZ"}

package/dist/components/modal/modal.js

@@ -1,30 +1,46 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { Modal as s, ModalOverlay as i, ModalContent as m } from "@chakra-ui/react";
-function u({
-  children: t,
-  size: e = "sm",
-  scrollBehavior: a = "inside",
-  autoFocus: r = !1,
-  isCentered: d = !0,
-  ...l
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { useBreakpointValue as O, Dialog as o, Portal as b } from "@chakra-ui/react";
+import { useState as B } from "react";
+import { ModalBodyContext as E } from "./modal-body-context.js";
+function k({
+  children: n,
+  isOpen: r,
+  onClose: i,
+  closeOnOverlayClick: a,
+  closeOnEsc: l,
+  onCloseComplete: s,
+  returnFocusOnClose: d = !0,
+  size: m = "sm",
+  scrollBehavior: c = "inside",
+  isCentered: p = !0,
+  ...u
 }) {
-  return /* @__PURE__ */ n(
-    s,
+  const [h, f] = B(null), t = O({ base: "bottomSheet", md: void 0 });
+  function v(x) {
+    x.open || i?.();
+  }
+  return /* @__PURE__ */ e(E.Provider, { value: { bodyElement: h, setBodyElement: f }, children: /* @__PURE__ */ e(
+    o.Root,
     {
-      variant: { base: "bottomSheet", md: "default" },
-      scrollBehavior: a,
-      motionPreset: "slideInBottom",
-      autoFocus: r,
-      size: e,
-      isCentered: d,
-      ...l,
-      children: [
-        /* @__PURE__ */ o(i, {}),
-        /* @__PURE__ */ o(m, { children: t })
-      ]
+      variant: t,
+      scrollBehavior: c,
+      motionPreset: "slide-in-bottom",
+      size: m,
+      placement: p ? "center" : void 0,
+      closeOnInteractOutside: a,
+      closeOnEscape: l,
+      open: r,
+      onOpenChange: v,
+      restoreFocus: d,
+      onExitComplete: s,
+      ...u,
+      children: /* @__PURE__ */ C(b, { children: [
+        /* @__PURE__ */ e(o.Backdrop, { "data-variant": t }),
+        /* @__PURE__ */ e(o.Positioner, { children: /* @__PURE__ */ e(o.Content, { children: n }) })
+      ] })
     }
-  );
+  ) });
 }
 export {
-  u as Modal
+  k as Modal
 };

package/dist/components/navigation-list/example-icon.d.ts

@@ -1,3 +1,2 @@
-import { ComponentWithAs, IconProps } from '@chakra-ui/react';
-export declare const ExampleIcon: ComponentWithAs<"svg", IconProps>;
+export declare const ExampleIcon: import('../icon/index.js').CasperIconComponent;
 //# sourceMappingURL=example-icon.d.ts.map

package/dist/components/navigation-list/example-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"example-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/example-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAc,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpF,eAAO,MAAM,WAAW,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAIxD,CAAC"}
+{"version":3,"file":"example-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/example-icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAKvB,CAAC"}

package/dist/components/navigation-list/navigation-list-item.d.ts

@@ -10,5 +10,5 @@ export declare function NavigationListLink({ children, display, w, minW, minH, t
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/navigation-list
  */
-export declare function NavigationListButton({ children, display, w, minW, minH, ...props }: NavigationButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationListButton({ children, display, w, minW, minH, isDisabled, ...props }: NavigationButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=navigation-list-item.d.ts.map

package/dist/components/navigation-list/navigation-list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-list-item.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/navigation-list-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmC1E;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAClC,QAAQ,EACR,OAAiB,EACjB,CAAU,EACV,IAAa,EACb,IAAa,EACb,EAAc,EACd,IAAgB,EAChB,UAAU,EACV,GAAG,KAAK,EACR,EAAE,mBAAmB,2CAkBrB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACpC,QAAQ,EACR,OAAiB,EACjB,CAAU,EACV,IAAa,EACb,IAAa,EACb,GAAG,KAAK,EACR,EAAE,qBAAqB,2CAQvB"}
+{"version":3,"file":"navigation-list-item.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/navigation-list-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoD1E;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAClC,QAAQ,EACR,OAAiB,EACjB,CAAU,EACV,IAAa,EACb,IAAa,EACb,EAAc,EACd,IAAgB,EAChB,UAAU,EACV,GAAG,KAAK,EACR,EAAE,mBAAmB,2CAmBrB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACpC,QAAQ,EACR,OAAiB,EACjB,CAAU,EACV,IAAa,EACb,IAAa,EACb,UAAU,EACV,GAAG,KAAK,EACR,EAAE,qBAAqB,2CAiBvB"}

package/dist/components/navigation-list/navigation-list-item.js

@@ -1,12 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Button as h, Link as p } from "@chakra-ui/react";
-import { ThemeColorVariable as l, ThemeSpaceVariable as c, ThemeFontSizeVariable as f, ThemeFontVariable as s } from "../../theme/theme-types.js";
-const d = {
-  fontFamily: s.Body,
-  fontSize: f.Medium,
-  color: l.OnSurface,
-  py: c.Small,
-  px: c.Medium,
+import { jsx as o } from "react/jsx-runtime";
+import { Button as f, Link as p } from "@chakra-ui/react";
+import { ThemeColorVariable as e, ThemeSpaceVariable as d, ThemeFontSizeVariable as h, ThemeFontVariable as m } from "../../theme/theme-types.js";
+const s = {
+  fontFamily: m.Body,
+  fontSize: h.Medium,
+  color: e.OnSurface,
+  py: d.Small,
+  px: d.Medium,
   fontWeight: "medium",
   // "Reset" styles:
   textDecoration: "none",
@@ -18,57 +18,87 @@ const d = {
   outline: "none",
   lineHeight: "auto",
   border: 0,
+  transitionProperty: "none",
   // Pseudo styles:
   _disabled: {
     opacity: 0.48
   },
   _hover: {
-    bg: l.AccentHoverAlpha,
+    color: e.OnSurface,
+    textDecoration: "none",
     cursor: "pointer",
+    bg: e.AccentHoverAlpha,
     _disabled: { bg: "none", cursor: "not-allowed" }
   },
+  _focus: {
+    "&:not(:focus-visible)": {
+      outline: "none"
+    }
+  },
+  _focusVisible: {
+    outline: `2px solid ${e.OnSurface}`,
+    outlineOffset: "2px"
+  },
   _active: {
-    bg: l.AccentActiveAlpha
+    color: e.OnSurface,
+    bg: e.AccentActiveAlpha,
+    _hover: {
+      bg: e.AccentActiveAlpha
+    }
   }
 };
-function A({
-  children: o,
-  display: t = "block",
+function S({
+  children: t,
+  display: n = "block",
   w: i = "100%",
-  minW: n = "auto",
-  minH: r = "auto",
-  to: a = void 0,
-  href: m = void 0,
+  minW: r = "auto",
+  minH: a = "auto",
+  to: l = void 0,
+  href: c = void 0,
   isDisabled: u,
   ...b
 }) {
-  return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
     p,
     {
-      sx: d,
+      css: s,
       w: i,
-      minW: n,
-      minH: r,
-      display: t,
-      to: a,
-      href: u ? void 0 : m,
+      minW: r,
+      minH: a,
+      display: n,
+      href: u ? void 0 : c,
       "aria-disabled": u,
+      to: l,
       ...b,
-      children: o
+      children: t
     }
   ) });
 }
-function S({
-  children: o,
-  display: t = "block",
+function x({
+  children: t,
+  display: n = "block",
   w: i = "100%",
-  minW: n = "auto",
-  minH: r = "auto",
-  ...a
+  minW: r = "auto",
+  minH: a = "auto",
+  isDisabled: l,
+  ...c
 }) {
-  return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(h, { sx: d, w: i, minW: n, minH: r, display: t, type: "button", ...a, children: o }) });
+  return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+    f,
+    {
+      css: s,
+      w: i,
+      minW: r,
+      minH: a,
+      display: n,
+      type: "button",
+      disabled: l,
+      ...c,
+      children: t
+    }
+  ) });
 }
 export {
-  S as NavigationListButton,
-  A as NavigationListLink
+  x as NavigationListButton,
+  S as NavigationListLink
 };

package/dist/components/navigation-list/navigation-list.js

@@ -1,8 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Box as i, UnorderedList as n } from "@chakra-ui/react";
-function s({ children: r, ...t }) {
-  return /* @__PURE__ */ o(i, { as: "nav", ...t, children: /* @__PURE__ */ o(n, { m: 0, listStyleType: "none", children: r }) });
+import { Box as n, List as r } from "@chakra-ui/react";
+function a({ children: t, ...i }) {
+  return /* @__PURE__ */ o(n, { as: "nav", ...i, children: /* @__PURE__ */ o(r.Root, { as: "ol", m: 0, listStyleType: "none", children: t }) });
 }
 export {
-  s as NavigationList
+  a as NavigationList
 };

package/dist/components/navigation-list/types.d.ts

@@ -13,7 +13,7 @@ type To = {
      * Link from routing libraries like React Router, Reach Router and Next.js. Use instead of href. */
     to?: string;
 };
-export type NavigationLinkProps = NavigationItemProps & To & Pick<ChakraLinkProps, "as" | "href" | "target" | "rel" | "isExternal" | "children">;
+export type NavigationLinkProps = NavigationItemProps & To & Pick<ChakraLinkProps, "as" | "asChild" | "href" | "target" | "rel" | "children">;
 export type NavigationButtonProps = NavigationItemProps & Pick<ChakraButtonProps, "onClick" | "children">;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/navigation-list/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,mBAAmB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACpB,GAAG,eAAe,CAAC;AAEpB,KAAK,EAAE,GAAG;IACT;uGACmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GACpD,EAAE,GACF,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,YAAY,GAAG,UAAU,CAAC,CAAC;AAErF,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,mBAAmB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACpB,GAAG,eAAe,CAAC;AAEpB,KAAK,EAAE,GAAG;IACT;uGACmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GACpD,EAAE,GACF,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC;AAElF,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC"}

package/dist/components/paginator/paginator-recipe.d.ts

@@ -0,0 +1,9 @@
+import { SystemStyleObject } from '@chakra-ui/react';
+export declare const paginatorRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    variant: {
+        ghost: SystemStyleObject;
+        outline: SystemStyleObject;
+    };
+}>;
+export type PaginatorVariant = keyof Exclude<typeof paginatorRecipe.variants, undefined>["variant"];
+//# sourceMappingURL=paginator-recipe.d.ts.map

package/dist/components/paginator/paginator-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginator-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator-recipe.ts"],"names":[],"mappings":"AAMA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAsCxE,eAAO,MAAM,eAAe;;;;;EAQ1B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,CAAC,OAAO,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC"}

package/dist/components/paginator/paginator-recipe.js

@@ -0,0 +1,41 @@
+import { ThemeSpaceVariable as a, ThemeColorVariable as e, ThemeFontSizeVariable as o, ThemeFontVariable as t } from "../../theme/theme-types.js";
+import { defineRecipe as n } from "@chakra-ui/react";
+const i = {
+  fontFamily: t.Body,
+  color: e.OnBackground,
+  fontVariant: "tabular-nums",
+  display: "flex",
+  alignItems: "center",
+  gap: a.Medium,
+  "& .paginator-buttons-container": {
+    display: "inline-flex",
+    "& button": {
+      fontSize: o.Large
+    }
+  }
+}, r = {
+  width: "100%",
+  justifyContent: "flex-end",
+  padding: a.Small
+}, l = {
+  width: "fit-content",
+  padding: `${a.XSmall} ${a.Medium}`,
+  borderRadius: a.Small,
+  border: `1px solid ${e.OnSurfaceBorder}`,
+  backgroundColor: e.Surface,
+  boxShadow: `0 4px 12px 0 ${e.ShadowCard}`,
+  "& .paginator-buttons-container": {
+    gap: a.Small
+  }
+}, s = n({
+  base: i,
+  variants: {
+    variant: {
+      ghost: r,
+      outline: l
+    }
+  }
+});
+export {
+  s as paginatorRecipe
+};

package/dist/components/paginator/paginator.d.ts

@@ -1,5 +1,5 @@
 import { ThemeStyleProps } from '../../theme/index.js';
-import { PaginatorVariant } from '../../theme/theme-config/components/paginator-theme.js';
+import { PaginatorVariant } from './paginator-recipe.js';
 import { Locale } from './translations.js';
 export type PaginatorProps = ThemeStyleProps & {
     variant?: PaginatorVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AAExF,OAAO,EAAE,KAAK,MAAM,EAAgB,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG;IAC9C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAElB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,QAAa,EACb,SAAS,EACT,SAAS,EAAE,UAAU,EACrB,YAAY,EACZ,OAAiB,EACjB,GAAG,IAAI,EACP,EAAE,cAAc,2CA6ChB"}
+{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,KAAK,MAAM,EAAgB,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG;IAC9C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAElB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,QAAa,EACb,SAAS,EACT,SAAS,EAAE,UAAU,EACrB,YAAY,EACZ,OAAiB,EACjB,GAAG,IAAI,EACP,EAAE,cAAc,2CA8ChB"}