athameui 0.0.12 → 0.0.14

package/dist/athameui.cjs

@@ -2201,6 +2201,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   onClick,
   onFocus,
   onKeyDown,
+  onMouseDown,
   onMouseEnter,
   onMouseLeave,
   ...other
@@ -2220,6 +2221,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
   const onBlurHandler = e => {
     onBlur?.(e);
   };
+  const onMouseDownHandler = e => {
+    onMouseDown?.(e);
+  };
   const onMouseEnterHandler = e => {
     onMouseEnter?.(e);
   };
@@ -2239,6 +2243,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     onBlur: onBlurHandler,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
+    onMouseDown: onMouseDownHandler,
     ...other,
     children: icon ? jsxs(Fragment, {
       children: [icon, !isIconOnly && children]
@@ -2285,6 +2290,8 @@ const AccordionItem = ({
         textPosition: headingTextPosition,
         onClick: onToggleHandler,
         disabled: disabled,
+        "aria-expanded": expanded,
+        "aria-controls": `accordion-content-${item.id}`,
         sx: sx?.accordionHeading,
         dark: true,
         children: jsx("div", {
@@ -2292,9 +2299,11 @@ const AccordionItem = ({
           children: item.heading
         })
       }), jsx("div", {
+        id: `accordion-content-${item.id}`,
         className: expansionClasses,
         style: {
-          height: expanded ? contentHeight : 0
+          height: expanded ? contentHeight : 0,
+          visibility: expanded ? "visible" : "hidden"
         },
         children: jsx("div", {
           ref: contentRef,
@@ -2353,20 +2362,18 @@ const Accordion = ({
     className: accordionClasses,
     css: sx?.accordion,
     children: [childrenFirst && children, jsx(List, {
-      children: items.map(item => jsx("div", {
-        children: CustomAccordionItem ? jsx(CustomAccordionItem, {
-          expanded: expandedItems.includes(item.id),
-          onToggle: expandToggle,
-          ...item
-        }) : jsx(AccordionItem, {
-          sx: sx,
-          item: item,
-          expanded: expandedItems.includes(item.id),
-          onToggle: expandToggle,
-          className: className?.accordionItem ? {
-            ...className.accordionItem
-          } : undefined
-        })
+      children: items.map(item => CustomAccordionItem ? jsx(CustomAccordionItem, {
+        expanded: expandedItems.includes(item.id),
+        onToggle: expandToggle,
+        ...item
+      }, item.id) : jsx(AccordionItem, {
+        sx: sx,
+        item: item,
+        expanded: expandedItems.includes(item.id),
+        onToggle: expandToggle,
+        className: className?.accordionItem ? {
+          ...className.accordionItem
+        } : undefined
       }, item.id))
     }), !childrenFirst && children]
   });
@@ -2386,6 +2393,8 @@ const Avatar = ({
   return jsx("div", {
     css: sx?.avatar,
     className: avatarClasses,
+    role: "img",
+    "aria-label": displayName,
     children: jsxs("div", {
       css: sx?.initials,
       className: initialsClasses,
@@ -2464,7 +2473,7 @@ const HugeiconsIcon = React.forwardRef(({ color = 'currentColor', size = 24, str
 });
 HugeiconsIcon.displayName = 'HugeiconsIcon';
 
-const Qt=[["path",{d:"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],un=[["path",{d:"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],uL=[["path",{d:"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M14.9994 15L9 9M9.00064 15L15 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],ll=[["path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M12 9.00014V16.0002M15.5 11.5C15.5 11.5 12.9223 8.00001 12 8C11.0777 7.99999 8.50003 11.5 8.50003 11.5",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]];
+const Qt=[["path",{d:"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],un=[["path",{d:"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],uL=[["path",{d:"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M14.9994 15L9 9M9.00064 15L15 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],ll=[["path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M12 9.00014V16.0002M15.5 11.5C15.5 11.5 12.9223 8.00001 12 8C11.0777 7.99999 8.50003 11.5 8.50003 11.5",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],eI=[["path",{d:"M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"1"}],["path",{d:"M9.5 16.5L9.5 10.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"2"}],["path",{d:"M14.5 16.5L14.5 10.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"3"}]];
 
 const ScrollToTopButton = ({
   className,
@@ -2502,7 +2511,8 @@ const ScrollToTopButton = ({
     "data-testid": "ath-scroll-to-top-button",
     onClick: scrollToTop,
     variant: variant ?? "secondary",
-    title: title ?? "Back to Top",
+    title: title ?? "Back to top",
+    "aria-label": "Back to top",
     dark: dark,
     children: jsx(HugeiconsIcon, {
       icon: ll,
@@ -2582,16 +2592,96 @@ const ButtonGroup = ({
   });
 };
 
+const FormLabel = ({
+  label,
+  required,
+  className,
+  labelPosition = "above",
+  dark,
+  sx,
+  ...other
+}) => {
+  const labelClasses = cx("ath-form-input-label", labelPosition ? `ath-form-input-label-${labelPosition}` : "", dark ? "ath-form-input-label-dark" : "", className?.label);
+  const requiredClasses = cx("ath-form-input-label-required", dark ? "ath-form-input-label-required-dark" : "", className?.required);
+  return jsxs("label", {
+    className: labelClasses,
+    css: sx?.label,
+    ...other,
+    children: [label, required && jsx("span", {
+      className: requiredClasses,
+      css: sx?.required,
+      "aria-label": "required",
+      children: "*"
+    })]
+  });
+};
+
 const Carousel = ({
   children,
   className,
   emptyMessage = "Nothing here yet",
+  label,
+  onRemove,
+  onReorder,
+  removeLabel = "Remove item",
   sx
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
+  const [showLeftArrow, setShowLeftArrow] = React.useState(false);
+  const [showRightArrow, setShowRightArrow] = React.useState(false);
+  const [dropIndex, setDropIndex] = React.useState(null);
   const carouselRef = React.useRef(null);
-  const carouselClasses = cx("ath-carousel", isHovered ? "ath-carousel-hover" : "", className?.carousel);
-  const hasItems = React.Children.count(children) > 0;
+  const dragIndex = React.useRef(null);
+  const carouselClasses = cx("ath-carousel", className?.carousel);
+  const items = React.Children.toArray(children);
+  const itemCount = items.length;
+  const interactive = Boolean(onRemove || onReorder);
+  const finishDrag = () => {
+    dragIndex.current = null;
+    setDropIndex(null);
+  };
+  const handleDragStart = index => event => {
+    const target = event.target;
+    if (target instanceof Element && target.closest(".ath-carousel-remove, .ath-carousel-remove-button")) {
+      event.preventDefault();
+      return;
+    }
+    dragIndex.current = index;
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(index));
+  };
+  const handleDragOver = index => event => {
+    if (!onReorder) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+    if (dropIndex !== index) setDropIndex(index);
+  };
+  const handleDrop = index => event => {
+    event.preventDefault();
+    const from = dragIndex.current;
+    finishDrag();
+    if (from == null || !onReorder) return;
+    onReorder(from, index);
+  };
+  React.useLayoutEffect(() => {
+    const el = carouselRef.current;
+    if (!el) return;
+    const updateArrows = () => {
+      const hidden = el.scrollWidth - el.clientWidth;
+      setShowLeftArrow(el.scrollLeft > 1);
+      setShowRightArrow(hidden - el.scrollLeft > 1);
+    };
+    updateArrows();
+    el.addEventListener("scroll", updateArrows, {
+      passive: true
+    });
+    const observer = new ResizeObserver(updateArrows);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateArrows);
+      observer.disconnect();
+    };
+  }, [itemCount]);
   const scrollByPage = direction => {
     const el = carouselRef.current;
     if (!el) return;
@@ -2600,53 +2690,109 @@ const Carousel = ({
       behavior: "smooth"
     });
   };
-  const handleLeftArrowClick = () => {
-    scrollByPage(-1);
-  };
-  const handleRightArrowClick = () => {
-    scrollByPage(1);
-  };
   const handleMouseEnter = () => {
     setIsHovered(true);
   };
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-  return jsx("div", {
-    className: "ath-carousel-wrapper",
-    children: jsxs("div", {
-      className: carouselClasses,
-      css: sx?.carousel,
+  return jsxs("div", {
+    className: "ath-carousel-container",
+    style: {
+      minWidth: itemCount === 1 ? "" : 0
+    },
+    children: [label && jsx(FormLabel, {
+      label: label,
+      dark: true
+    }), jsxs("div", {
+      className: cx("ath-carousel-wrapper", isHovered && "ath-carousel-hover", label && "ath-carousel-label"),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      ref: carouselRef,
-      children: [jsx(Button, {
+      children: [showLeftArrow && jsx(Button, {
         className: {
           button: "ath-carousel-arrow ath-carousel-left-arrow"
         },
-        onClick: handleLeftArrowClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+        onClick: () => scrollByPage(-1),
+        "aria-label": label ? `Scroll ${label} backward` : "Scroll backward",
         icon: jsx(HugeiconsIcon, {
           icon: Qt,
           size: 36
         })
-      }), hasItems ? children : jsx("div", {
-        className: "ath-carousel-empty",
-        children: emptyMessage
-      }), jsx(Button, {
+      }), jsx("div", {
+        className: carouselClasses,
+        css: sx?.carousel,
+        ref: carouselRef,
+        children: itemCount > 0 ? interactive ? items.map((child, index) => jsxs("div", {
+          className: cx("ath-carousel-slot", onReorder && dropIndex === index && "ath-carousel-slot-target"),
+          draggable: Boolean(onReorder),
+          onDragStart: onReorder ? handleDragStart(index) : undefined,
+          onDragOver: onReorder ? handleDragOver(index) : undefined,
+          onDrop: onReorder ? handleDrop(index) : undefined,
+          onDragEnd: onReorder ? finishDrag : undefined,
+          children: [onRemove && jsx(Button, {
+            variant: "ghost",
+            size: "small",
+            type: "button",
+            className: {
+              button: "ath-carousel-remove-button"
+            },
+            icon: jsx(HugeiconsIcon, {
+              icon: eI,
+              size: 16
+            }),
+            "aria-label": typeof removeLabel === "function" ? removeLabel(index) : removeLabel,
+            onMouseDown: event => event.stopPropagation(),
+            onClick: event => {
+              event.stopPropagation();
+              onRemove(index);
+            }
+          }), child]
+        }, /*#__PURE__*/React.isValidElement(child) ? child.key ?? index : index)) : children : jsx("div", {
+          className: "ath-carousel-empty",
+          children: emptyMessage
+        })
+      }), showRightArrow && jsx(Button, {
         className: {
           button: "ath-carousel-arrow ath-carousel-right-arrow"
         },
-        onClick: handleRightArrowClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+        onClick: () => scrollByPage(1),
+        "aria-label": label ? `Scroll ${label} forward` : "Scroll forward",
         icon: jsx(HugeiconsIcon, {
           icon: un,
           size: 36
         })
       })]
-    })
+    })]
+  });
+};
+
+const Checkbox = ({
+  checked,
+  className,
+  dark = false,
+  disabled = false,
+  id,
+  label,
+  name,
+  sx,
+  onChange
+}) => {
+  return jsxs("label", {
+    className: cx("ath-checkbox", dark && "ath-checkbox-dark", disabled && "ath-checkbox-disabled", className),
+    css: sx,
+    htmlFor: id,
+    children: [jsx("input", {
+      id: id,
+      className: "ath-checkbox-input",
+      type: "checkbox",
+      name: name,
+      checked: checked,
+      disabled: disabled,
+      onChange: event => onChange(event.target.checked)
+    }), label && jsx("span", {
+      className: "ath-checkbox-label",
+      children: label
+    })]
   });
 };
 
@@ -2679,30 +2825,6 @@ const Dropdown = ({
   });
 };
 
-const FormLabel = ({
-  label,
-  required,
-  className,
-  labelPosition = "above",
-  dark,
-  sx,
-  ...other
-}) => {
-  const labelClasses = cx("ath-form-input-label", labelPosition ? `ath-form-input-label-${labelPosition}` : "", dark ? "ath-form-input-label-dark" : "", className?.label);
-  const requiredClasses = cx("ath-form-input-label-required", dark ? "ath-form-input-label-required-dark" : "", className?.required);
-  return jsxs("label", {
-    className: labelClasses,
-    css: sx?.label,
-    ...other,
-    children: [label, required && jsx("span", {
-      className: requiredClasses,
-      css: sx?.required,
-      "aria-label": "required",
-      children: "*"
-    })]
-  });
-};
-
 const FormTextInput = ({
   autoComplete,
   autoFocus,
@@ -2711,6 +2833,7 @@ const FormTextInput = ({
   error,
   disabled,
   id,
+  inputMode,
   name,
   placeholder,
   readOnly,
@@ -2720,6 +2843,8 @@ const FormTextInput = ({
   type = "text",
   value,
   onChange,
+  onBlur,
+  onFocus,
   onKeyDown,
   ...other
 }) => {
@@ -2736,12 +2861,15 @@ const FormTextInput = ({
     css: sx?.input,
     disabled: disabled,
     name: name,
+    inputMode: inputMode,
     placeholder: placeholder,
     readOnly: readOnly,
     tabIndex: disabled ? -1 : tabIndex,
     type: type,
     value: value,
     onChange: onChangeHandler,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     id: id,
     ...other
@@ -2758,6 +2886,7 @@ const FormField = ({
   error,
   helperText,
   id,
+  inputMode,
   label,
   labelPosition = "above",
   name,
@@ -2770,6 +2899,8 @@ const FormField = ({
   type = "text",
   value,
   onChange,
+  onBlur,
+  onFocus,
   onKeyDown,
   ...other
 }) => {
@@ -2814,14 +2945,20 @@ const FormField = ({
     labelPosition: labelPosition,
     dark: dark
   }) : null;
+  const describedBy = [error && name ? `${name}-error` : "", helperText && name ? `${name}-helper` : ""].filter(Boolean).join(" ") || undefined;
   const inputElement = type === "textarea" ? jsx("textarea", {
     autoComplete: autoComplete,
     autoFocus: autoFocus,
     ref: textAreaRef,
+    id: id,
     name: name,
+    "aria-invalid": error ? true : undefined,
+    "aria-describedby": describedBy,
     onChange: handleTextAreaChange,
     disabled: disabled,
     readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : tabIndex,
     className: textAreaClasses,
@@ -2833,10 +2970,13 @@ const FormField = ({
     autoComplete: autoComplete,
     autoFocus: autoFocus,
     name: name,
+    inputMode: inputMode,
     type: type,
     onChange: handleInputChange,
     disabled: disabled,
     readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : tabIndex,
     className: {
@@ -2847,6 +2987,8 @@ const FormField = ({
     placeholder: placeholder,
     size: size,
     id: id,
+    "aria-invalid": error ? true : undefined,
+    "aria-describedby": describedBy,
     ...other
   });
   const errorElement = error ? jsx("div", {
@@ -2888,10 +3030,11 @@ const Header = ({
 const Main = ({
   children,
   className,
-  sx
+  sx,
+  width = "wide"
 }) => {
   const mainClasses = cx("ath-main", typeof className === "object" && className !== null ? className.main : "");
-  const mainContentClasses = cx("ath-main-content", typeof className === "object" && className !== null ? className.mainContent : "");
+  const mainContentClasses = cx("ath-main-content", typeof className === "object" && className !== null ? className.mainContent : "", width === "full" ? "full" : "", width === "wide" ? "wide" : "", width === "medium" ? "medium" : "", width === "narrow" ? "narrow" : "");
   return jsx("main", {
     css: sx?.main,
     className: mainClasses,
@@ -2957,6 +3100,9 @@ const Modal = ({
   trapFocus = true,
   initialFocusRef,
   finalFocusRef,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
   sx,
   onClose,
   ...other
@@ -3045,11 +3191,15 @@ const Modal = ({
       css: sx?.modal,
       className: modalClasses,
       role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": ariaLabelledBy || titleId,
+      "aria-label": ariaLabelledBy || titleId ? undefined : ariaLabel,
+      "aria-describedby": ariaDescribedBy,
       ...other,
       children: [(title || showCloseButton) && jsxs("div", {
         css: sx?.header,
         className: headerClasses,
-        children: [title && jsx("h1", {
+        children: [title && jsx("h2", {
           css: sx?.title,
           className: titleClasses,
           id: titleId,
@@ -3183,7 +3333,22 @@ const SlideOut = ({
   const overlayClasses = cx("ath-slide-out-overlay", isOpen && "ath-slide-out-overlay-open", className?.overlay);
   const panelClasses = cx("ath-slide-out-panel", from === "left" ? "ath-slide-out-from-left" : "ath-slide-out-from-right", isOpen && "ath-slide-out-panel-open", className?.panel);
   const closeButtonClasses = cx("ath-slide-out-close-button", className?.closeButton);
+  const slideOutRef = React.useRef(null);
+  React.useEffect(() => {
+    const element = slideOutRef.current;
+    if (!element) return;
+    if (isOpen) element.removeAttribute("inert");else element.setAttribute("inert", "");
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = event => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
   return jsxs("div", {
+    ref: slideOutRef,
     className: slideOutClasses,
     css: sx?.slideOut,
     "data-testid": "slide-out",
@@ -3194,6 +3359,9 @@ const SlideOut = ({
     }), jsxs("div", {
       className: panelClasses,
       css: sx?.panel,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Menu",
       children: [jsx(Button, {
         className: {
           button: closeButtonClasses
@@ -3227,192 +3395,182 @@ const breakpoints = {
 };
 const minWidth = width => `@media (min-width: ${width}px)`;
 const maxWidth = width => `@media (max-width: ${width - 1}px)`;
-const minXs = minWidth(breakpoints.xs);
-const minSm = minWidth(breakpoints.sm);
-const minMd = minWidth(breakpoints.md);
-const minLg = minWidth(breakpoints.lg);
-const minXl = minWidth(breakpoints.xl);
-const min2xl = minWidth(breakpoints["2xl"]);
-const min3xl = minWidth(breakpoints["3xl"]);
-const min4xl = minWidth(breakpoints["4xl"]);
-const maxXs = maxWidth(breakpoints.xs);
-const maxSm = maxWidth(breakpoints.sm);
-const maxMd = maxWidth(breakpoints.md);
-const maxLg = maxWidth(breakpoints.lg);
-const maxXl = maxWidth(breakpoints.xl);
-const max2xl = maxWidth(breakpoints["2xl"]);
-const max3xl = maxWidth(breakpoints["3xl"]);
-const max4xl = maxWidth(breakpoints["4xl"]);
-
-const tokens = {
-  font: {
-    family: {
-      sans: "Montserrat, sans-serif",
-      serif: "Libre Baskerville, serif"
-    },
-    size: {
-      xs: "0.75rem",
-      sm: "0.875rem",
-      md: "1rem",
-      lg: "1.25rem",
-      xl: "1.5rem",
-      "2xl": "2rem",
-      "3xl": "2.5rem",
-      "4xl": "3rem",
-      "5xl": "3.5rem"
+const media = {
+  min: {
+    xs: minWidth(breakpoints.xs),
+    sm: minWidth(breakpoints.sm),
+    md: minWidth(breakpoints.md),
+    lg: minWidth(breakpoints.lg),
+    xl: minWidth(breakpoints.xl),
+    "2xl": minWidth(breakpoints["2xl"]),
+    "3xl": minWidth(breakpoints["3xl"]),
+    "4xl": minWidth(breakpoints["4xl"])
+  },
+  max: {
+    xs: maxWidth(breakpoints.xs),
+    sm: maxWidth(breakpoints.sm),
+    md: maxWidth(breakpoints.md),
+    lg: maxWidth(breakpoints.lg),
+    xl: maxWidth(breakpoints.xl),
+    "2xl": maxWidth(breakpoints["2xl"]),
+    "3xl": maxWidth(breakpoints["3xl"]),
+    "4xl": maxWidth(breakpoints["4xl"])
+  }
+};
+const font = {
+  family: {
+    sans: "Montserrat, sans-serif",
+    serif: "Libre Baskerville, serif"
+  },
+  size: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "1.5rem",
+    "2xl": "2rem",
+    "3xl": "2.5rem",
+    "4xl": "3rem",
+    "5xl": "3.5rem"
+  }
+};
+const color = {
+  primary: {
+    "50": "#f0f2f5",
+    "100": "#d9dee6",
+    "200": "#b8c3d1",
+    "300": "#8a9bae",
+    "400": "#4a5f7a",
+    "500": "#0b1828",
+    "600": "#081320",
+    "700": "#060e18",
+    "800": "#04090f",
+    "900": "#020407",
+    default: "#0b1828",
+    vibrant: {
+      "300": "#8ab6ff",
+      "500": "#4f86f7",
+      "700": "#1e3a8a"
     }
   },
-  color: {
-    primary: {
-      "50": "#f0f2f5",
-      "100": "#d9dee6",
-      "200": "#b8c3d1",
-      "300": "#8a9bae",
-      "400": "#4a5f7a",
-      "500": "#0b1828",
-      "600": "#081320",
-      "700": "#060e18",
-      "800": "#04090f",
-      "900": "#020407",
-      "default": "#0b1828",
-      vibrant: {
-        "300": "#8ab6ff",
-        "500": "#4f86f7",
-        "700": "#1e3a8a"
-      }
-    },
-    secondary: {
-      "50": "#e6f7f6",
-      "100": "#b3e8e5",
-      "200": "#80d9d4",
-      "300": "#4dcac3",
-      "400": "#2aa39b",
-      "500": "#146b68",
-      "600": "#125a57",
-      "700": "#0f4a47",
-      "800": "#0c3835",
-      "900": "#081f1c",
-      "default": "#146b68",
-      vibrant: {
-        "300": "#75dac7",
-        "500": "#1abc9c",
-        "700": "#138f6e"
-      }
-    },
-    tertiary: {
-      "50": "#f7f4f0",
-      "100": "#eedecc",
-      "200": "#e5c8a8",
-      "300": "#dcb184",
-      "400": "#d19b60",
-      "500": "#bfa081",
-      "600": "#a68965",
-      "700": "#7d6748",
-      "800": "#54442c",
-      "900": "#2b2216",
-      "default": "#bfa081",
-      vibrant: {
-        "300": "#f7c873",
-        "500": "#f39c12",
-        "700": "#c9780e"
-      }
-    },
-    error: {
-      "50": "#fee6e6",
-      "100": "#fbb3b3",
-      "200": "#f88080",
-      "300": "#f54d4d",
-      "400": "#f21a1a",
-      "500": "#9f0001",
-      "600": "#800001",
-      "700": "#600001",
-      "800": "#400000",
-      "900": "#200000",
-      "default": "#9f0001",
-      vibrant: {
-        "300": "#f48a6f",
-        "500": "#e74c3c",
-        "700": "#c0392b"
-      }
-    },
-    warning: {
-      "50": "#fef5ec",
-      "100": "#fdebda",
-      "200": "#fad8b3",
-      "300": "#f8c48c",
-      "400": "#f5b065",
+  secondary: {
+    "50": "#e6f7f6",
+    "100": "#b3e8e5",
+    "200": "#80d9d4",
+    "300": "#4dcac3",
+    "400": "#2aa39b",
+    "500": "#146b68",
+    "600": "#125a57",
+    "700": "#0f4a47",
+    "800": "#0c3835",
+    "900": "#081f1c",
+    default: "#146b68",
+    vibrant: {
+      "300": "#75dac7",
+      "500": "#1abc9c",
+      "700": "#138f6e"
+    }
+  },
+  tertiary: {
+    "50": "#f7f4f0",
+    "100": "#eedecc",
+    "200": "#e5c8a8",
+    "300": "#dcb184",
+    "400": "#d19b60",
+    "500": "#bfa081",
+    "600": "#a68965",
+    "700": "#7d6748",
+    "800": "#54442c",
+    "900": "#2b2216",
+    default: "#bfa081",
+    vibrant: {
+      "300": "#f7c873",
       "500": "#f39c12",
-      "600": "#c27d0e",
-      "700": "#925e0b",
-      "800": "#613e07",
-      "900": "#311f04",
-      "default": "#f39c12",
-      vibrant: {
-        "300": "#fce705",
-        "500": "#fbc306",
-        "700": "#f8950a"
-      }
-    },
-    success: {
-      "50": "#e8f5f2",
-      "100": "#d1ece4",
-      "200": "#a3d8ca",
-      "300": "#76c5af",
-      "400": "#48b195",
-      "500": "#1a9e7a",
-      "600": "#157e62",
-      "700": "#105f49",
-      "800": "#0a3f31",
-      "900": "#052018",
-      "default": "#1a9e7a",
-      vibrant: {
-        "300": "#07e71f",
-        "500": "#08e27e",
-        "700": "#26b656"
-      }
-    },
-    text: {
-      dark: "#040a0c",
-      light: "#fcfbf7"
-    },
-    background: {
-      light: "#fcfbf7",
-      dark: "#040a0c"
+      "700": "#c9780e"
     }
   },
-  padding: {
-    xs: "2px",
-    sm: "4px",
-    md: "6px",
-    lg: "10px",
-    xl: "16px"
+  error: {
+    "50": "#fee6e6",
+    "100": "#fbb3b3",
+    "200": "#f88080",
+    "300": "#f54d4d",
+    "400": "#f21a1a",
+    "500": "#9f0001",
+    "600": "#800001",
+    "700": "#600001",
+    "800": "#400000",
+    "900": "#200000",
+    default: "#9f0001",
+    vibrant: {
+      "300": "#f48a6f",
+      "500": "#e74c3c",
+      "700": "#c0392b"
+    }
   },
-  radius: {
-    sm: "3px",
-    md: "5px",
-    lg: "8px"
+  warning: {
+    "50": "#fef5ec",
+    "100": "#fdebda",
+    "200": "#fad8b3",
+    "300": "#f8c48c",
+    "400": "#f5b065",
+    "500": "#f39c12",
+    "600": "#c27d0e",
+    "700": "#925e0b",
+    "800": "#613e07",
+    "900": "#311f04",
+    default: "#f39c12",
+    vibrant: {
+      "300": "#fce705",
+      "500": "#fbc306",
+      "700": "#f8950a"
+    }
   },
-  media: {
-    min: {
-      xs: "@media (min-width: 320px)",
-      sm: "@media (min-width: 480px)",
-      md: "@media (min-width: 620px)",
-      lg: "@media (min-width: 768px)",
-      xl: "@media (min-width: 896px)",
-      "2xl": "@media (min-width: 1024px)",
-      "3xl": "@media (min-width: 1280px)"
-    },
-    max: {
-      xs: "@media (max-width: 319px)",
-      sm: "@media (max-width: 479px)",
-      md: "@media (max-width: 767px)",
-      lg: "@media (max-width: 895px)",
-      xl: "@media (max-width: 1023px)",
-      "2xl": "@media (max-width: 1279px)",
-      "3xl": "@media (max-width: 1535px)"
+  success: {
+    "50": "#e8f5f2",
+    "100": "#d1ece4",
+    "200": "#a3d8ca",
+    "300": "#76c5af",
+    "400": "#48b195",
+    "500": "#1a9e7a",
+    "600": "#157e62",
+    "700": "#105f49",
+    "800": "#0a3f31",
+    "900": "#052018",
+    default: "#1a9e7a",
+    vibrant: {
+      "300": "#07e71f",
+      "500": "#08e27e",
+      "700": "#26b656"
     }
+  },
+  text: {
+    dark: "#040a0c",
+    light: "#fcfbf7"
+  },
+  background: {
+    light: "#fcfbf7",
+    dark: "#040a0c"
   }
 };
+const padding = {
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "10px",
+  xl: "16px"
+};
+const radius = {
+  sm: "3px",
+  md: "5px",
+  lg: "8px"
+};
+const tokens = {
+  font,
+  color,
+  media,
+  padding,
+  radius
+};
 
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
@@ -3421,6 +3579,7 @@ exports.Block = Block;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Carousel = Carousel;
+exports.Checkbox = Checkbox;
 exports.ContainerScalingText = ContainerScalingText;
 exports.Dropdown = Dropdown;
 exports.Footer = Footer;
@@ -3436,22 +3595,11 @@ exports.ScrollToTopButton = ScrollToTopButton;
 exports.Search = Search;
 exports.SlideOut = SlideOut;
 exports.breakpoints = breakpoints;
+exports.color = color;
 exports.cx = cx;
-exports.max2xl = max2xl;
-exports.max3xl = max3xl;
-exports.max4xl = max4xl;
-exports.maxLg = maxLg;
-exports.maxMd = maxMd;
-exports.maxSm = maxSm;
-exports.maxXl = maxXl;
-exports.maxXs = maxXs;
-exports.min2xl = min2xl;
-exports.min3xl = min3xl;
-exports.min4xl = min4xl;
-exports.minLg = minLg;
-exports.minMd = minMd;
-exports.minSm = minSm;
-exports.minXl = minXl;
-exports.minXs = minXs;
+exports.font = font;
+exports.media = media;
+exports.padding = padding;
+exports.radius = radius;
 exports.tokens = tokens;
 //# sourceMappingURL=athameui.cjs.map