@atom-learning/components 6.2.2 → 6.4.0

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts

@@ -10,13 +10,16 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         as?: React.ElementType;
     }) => React.JSX.Element;
     Accordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
+        content?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
+        prefix?: string | undefined | undefined;
         children?: React.ReactNode;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         ref?: React.Ref<HTMLLIElement> | undefined;
         className?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         role?: React.AriaRole | undefined;
@@ -239,7 +242,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         suppressHydrationWarning?: boolean | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoFocus?: boolean | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -247,13 +250,10 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         nonce?: string | undefined | undefined;
         placeholder?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         about?: string | undefined | undefined;
-        content?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
-        prefix?: string | undefined | undefined;
         property?: string | undefined | undefined;
         rel?: string | undefined | undefined;
         resource?: string | undefined | undefined;
@@ -284,13 +284,16 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         as?: React.ElementType;
     }) => React.JSX.Element;
     Item: (props: {
+        content?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
+        prefix?: string | undefined | undefined;
         children?: React.ReactNode;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         ref?: React.Ref<HTMLLIElement> | undefined;
         className?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         role?: React.AriaRole | undefined;
@@ -513,7 +516,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         suppressHydrationWarning?: boolean | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoFocus?: boolean | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -521,13 +524,10 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         nonce?: string | undefined | undefined;
         placeholder?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         about?: string | undefined | undefined;
-        content?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
-        prefix?: string | undefined | undefined;
         property?: string | undefined | undefined;
         rel?: string | undefined | undefined;
         resource?: string | undefined | undefined;
@@ -549,17 +549,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         is?: string | undefined | undefined;
         asChild?: boolean | undefined;
     }) => JSX.Element;
-    ItemContent: ({ children, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
-        direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
-        wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-        justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-        align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
-        gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
-    } & {
-        as?: React.ElementType;
-    }) => JSX.Element;
+    ItemContent: ({ children, className, ...rest }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
     Icon: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
         ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
     }, "size"> & {
@@ -578,7 +568,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
         noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+        family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
     } & {
         as?: React.ElementType;
     }, "as"> & {

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\nconst StyledIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180'\n  ]\n})\n\ntype TNavigationMenuAccordionTriggerProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n  children,\n  ...rest\n}: TNavigationMenuAccordionTriggerProps) => {\n  const { setTriggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  return (\n    <Link asChild>\n      <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between gap-3\"\n          ref={setTriggerRef}\n        >\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n          <StyledIcon size=\"sm\" is={ChevronDown} />\n        </button>\n      </StyledNavigationMenuVerticalAccordionTrigger>\n    </Link>\n  )\n}\n"],"names":["StyledNavigationMenuVerticalAccordionTrigger","styled","Trigger","navigationMenuVerticalItemStyles","StyledIcon","Icon","NavigationMenuVerticalAccordionTrigger","children","rest","setTriggerRef","React","NavigationMenuVerticalAccordionContext","Link","NavigationMenuVerticalItemContent","ChevronDown"],"mappings":"ohBAYA,MAAMA,EAA+CC,EAAOC,EAAS,CACnE,KAAMC,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,UAAU,CACjB,CACF,CACF,CAAC,EAEKC,EAAaH,EAAOI,EAAM,CAC9B,KAAM,CACJ,uBACA,eACA,kCACF,CACF,CAAC,EAMYC,EAAyC,CAAC,CACrD,SAAAC,EACA,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,cAAAC,CAAc,EAAIC,EAAM,WAC9BC,CACF,EAEA,OACED,EAAA,cAACE,EAAA,CAAK,QAAO,EACXF,EAAAA,EAAA,cAACV,EAAA,CAA6C,KAAK,KAAM,GAAGQ,EAAM,QAAO,EAAA,EACvEE,EAAA,cAAC,SACC,CAAA,KAAK,SACL,UAAU,0CACV,IAAKD,GAELC,EAAA,cAACG,EAAA,KACEN,CACH,EACAG,EAAA,cAACN,EAAA,CAAW,KAAK,KAAK,GAAIU,CAAAA,CAAa,CACzC,CACF,CACF,CAEJ"}
+{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\nconst StyledIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180'\n  ]\n})\n\ntype TNavigationMenuAccordionTriggerProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n  children,\n  ...rest\n}: TNavigationMenuAccordionTriggerProps) => {\n  const { setTriggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  return (\n    <Link asChild>\n      <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between gap-3\"\n          ref={setTriggerRef}\n        >\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n          <StyledIcon size=\"sm\" is={ChevronDown} />\n        </button>\n      </StyledNavigationMenuVerticalAccordionTrigger>\n    </Link>\n  )\n}\n"],"names":["StyledNavigationMenuVerticalAccordionTrigger","styled","Trigger","navigationMenuVerticalItemStyles","StyledIcon","Icon","NavigationMenuVerticalAccordionTrigger","children","rest","setTriggerRef","React","NavigationMenuVerticalAccordionContext","Link","NavigationMenuVerticalItemContent","ChevronDown"],"mappings":"ohBAYA,MAAMA,EAA+CC,EAAOC,EAAS,CACnE,KAAMC,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,UAAU,CACjB,CACF,CACF,CAAC,EAEKC,EAAaH,EAAOI,EAAM,CAC9B,KAAM,CACJ,uBACA,eACA,kCACF,CACF,CAAC,EAMYC,EAAyC,CAAC,CACrD,SAAAC,EACA,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,cAAAC,CAAc,EAAIC,EAAM,WAC9BC,CACF,EAEA,OACED,EAAA,cAACE,EAAA,CAAK,QAAO,EACXF,EAAAA,EAAA,cAACV,EAAA,CAA6C,KAAK,KAAM,GAAGQ,EAAM,QAAO,EAAA,EACvEE,EAAA,cAAC,SACC,CAAA,KAAK,SACL,UAAU,0CACV,IAAKD,GAELC,EAAA,cAACG,EAAA,KACEN,CACH,EACAG,EAAA,cAACN,EAAA,CAAW,KAAK,KAAK,GAAIU,CAAAA,CAAa,CACzC,CACF,CACF,CAEJ"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalIcon.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\n\nconst StyledNavigationMenuVerticalIcon = styled(Icon, {\n  base: ['self-start']\n})\n\nexport const NavigationMenuVerticalIcon = (\n  props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>\n): JSX.Element => <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n"],"names":["StyledNavigationMenuVerticalIcon","styled","Icon","NavigationMenuVerticalIcon","props","React"],"mappings":"wGAKA,MAAMA,EAAmCC,EAAOC,EAAM,CACpD,KAAM,CAAC,YAAY,CACrB,CAAC,EAEYC,EACXC,GACgBC,EAAA,cAACL,EAAA,CAAiC,KAAK,KAAM,GAAGI,CAAO,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalIcon.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst StyledNavigationMenuVerticalIcon = styled(Icon, {\n  base: ['self-start']\n})\n\nexport const NavigationMenuVerticalIcon = (\n  props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>\n): JSX.Element => <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n"],"names":["StyledNavigationMenuVerticalIcon","styled","Icon","NavigationMenuVerticalIcon","props","React"],"mappings":"wGAKA,MAAMA,EAAmCC,EAAOC,EAAM,CACpD,KAAM,CAAC,YAAY,CACrB,CAAC,EAEYC,EACXC,GACgBC,EAAA,cAACL,EAAA,CAAiC,KAAK,KAAM,GAAGI,CAAO,CAAA"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Flex } from '../../components/flex';
-type TNavigationMenuVerticalItemContentProps = React.ComponentProps<typeof Flex>;
-export declare const NavigationMenuVerticalItemContent: ({ children, ...rest }: TNavigationMenuVerticalItemContentProps) => JSX.Element;
+type TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>;
+export declare const NavigationMenuVerticalItemContent: ({ children, className, ...rest }: TNavigationMenuVerticalItemContentProps) => JSX.Element;
 export {};

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{Flex as o}from"../flex/Flex.js";import{Icon as i}from"../icon/Icon.js";import{NavigationMenuVerticalIcon as a}from"./NavigationMenuVerticalIcon.js";import{NavigationMenuVerticalText as m}from"./NavigationMenuVerticalText.js";const l=({children:t,...n})=>r.createElement(o,{gap:2,align:"center",...n},r.Children.map(t,e=>typeof e=="string"||typeof e=="number"?r.createElement(m,null,e):r.isValidElement(e)&&e.type===i?r.createElement(a,{...e.props}):e));export{l as NavigationMenuVerticalItemContent};
+import o from"clsx";import*as t from"react";import{Icon as a}from"../icon/Icon.js";import{NavigationMenuVerticalIcon as m}from"./NavigationMenuVerticalIcon.js";import{NavigationMenuVerticalText as l}from"./NavigationMenuVerticalText.js";const p=({children:r,className:i,...n})=>t.createElement("div",{className:o("flex","gap-2","items-center",i),...n},t.Children.map(r,e=>typeof e=="string"||typeof e=="number"?t.createElement(l,null,e):t.isValidElement(e)&&e.type===a?t.createElement(m,{...e.props}):e));export{p as NavigationMenuVerticalItemContent};
 //# sourceMappingURL=NavigationMenuVerticalItemContent.js.map

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalItemContent.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<typeof Flex>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => {\n  return (\n    <Flex gap={2} align=\"center\" {...rest}>\n      {\n        React.Children.map(children, (child) => {\n          if (typeof child === 'string' || typeof child === 'number') {\n            return (\n              <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n            )\n          }\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <NavigationMenuVerticalIcon {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </Flex>\n  )\n}\n"],"names":["NavigationMenuVerticalItemContent","children","rest","React","Flex","child","NavigationMenuVerticalText","Icon","NavigationMenuVerticalIcon"],"mappings":"gQAUa,MAAAA,EAAoC,CAAC,CAChD,SAAAC,EACA,GAAGC,CACL,IAEIC,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,MAAM,SAAU,GAAGF,CAAAA,EAE7BC,EAAM,SAAS,IAAIF,EAAWI,GACxB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SAE9CF,EAAA,cAACG,EAAA,KAA4BD,CAAM,EAGnCF,EAAM,eAAeE,CAAK,GAAKA,EAAM,OAASE,EACzCJ,EAAA,cAACK,EAAA,CAA4B,GAAGH,EAAM,KAAO,CAAA,EAE/CA,CACR,CAEL"}
+{"version":3,"file":"NavigationMenuVerticalItemContent.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  className,\n  ...rest\n}: TNavigationMenuVerticalItemContentProps): JSX.Element => (\n  <div className={clsx('flex', 'gap-2', 'items-center', className)} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return (\n            <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n          )\n        }\n        if (React.isValidElement(child) && child.type === Icon) {\n          return <NavigationMenuVerticalIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement[]\n    }\n  </div>\n)\n"],"names":["NavigationMenuVerticalItemContent","children","className","rest","React","clsx","child","NavigationMenuVerticalText","Icon","NavigationMenuVerticalIcon"],"mappings":"6OAUa,MAAAA,EAAoC,CAAC,CAChD,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWC,EAAK,OAAQ,QAAS,eAAgBH,CAAS,EAAI,GAAGC,CAAAA,EAElEC,EAAM,SAAS,IAAIH,EAAWK,GACxB,OAAOA,GAAU,UAAY,OAAOA,GAAU,SAE9CF,EAAA,cAACG,EAAA,KAA4BD,CAAM,EAGnCF,EAAM,eAAeE,CAAK,GAAKA,EAAM,OAASE,EACzCJ,EAAA,cAACK,EAAA,CAA4B,GAAGH,EAAM,KAAO,CAAA,EAE/CA,CACR,CAEL"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js

@@ -1,2 +1,2 @@
-import{Link as a}from"@radix-ui/react-navigation-menu";import t from"react";import{styled as l}from"../../styled.js";import{getExternalAnchorProps as c}from"../../utilities/uri/index.js";import{navigationMenuVerticalItemStyles as p}from"./NavigationMenuVertical.styles.js";import{NavigationMenuVerticalItem as s}from"./NavigationMenuVerticalItem.js";import{NavigationMenuVerticalItemContent as f}from"./NavigationMenuVerticalItemContent.js";import{preventEvent as u}from"../../utilities/event/preventEvent.js";const v=l(a,{base:p,variants:{size:{md:["min-h-10"],lg:["min-h-12"]}}}),g=({as:r,href:e,children:n,...o})=>{const i=r||(e?"a":"button"),m=r?{}:e?c(e):{type:"button"};return t.createElement(s,null,t.createElement(v,{size:"lg",href:e,...o,...m,onSelect:u,asChild:!0},t.createElement(i,null,t.createElement(f,null,n))))};export{g as NavigationMenuVerticalLink};
+import{Link as a}from"@radix-ui/react-navigation-menu";import t from"react";import{styled as l}from"../../styled.js";import{preventEvent as c}from"../../utilities/event/preventEvent.js";import{getExternalAnchorProps as p}from"../../utilities/uri/index.js";import{navigationMenuVerticalItemStyles as s}from"./NavigationMenuVertical.styles.js";import{NavigationMenuVerticalItem as f}from"./NavigationMenuVerticalItem.js";import{NavigationMenuVerticalItemContent as u}from"./NavigationMenuVerticalItemContent.js";const v=l(a,{base:s,variants:{size:{md:["min-h-10"],lg:["min-h-12"]}}}),g=({as:r,href:e,children:n,...o})=>{const i=r||(e?"a":"button"),m=r?{}:e?p(e):{type:"button"};return t.createElement(f,null,t.createElement(v,{size:"lg",href:e,...o,...m,onSelect:c,asChild:!0},t.createElement(i,null,t.createElement(u,null,n))))};export{g as NavigationMenuVerticalLink};
 //# sourceMappingURL=NavigationMenuVerticalLink.js.map

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalLink.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalLink = styled(Link, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\ntype NavigationMenuVerticalItemProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalLink\n>\n\nexport const NavigationMenuVerticalLink = ({\n  as,\n  href,\n  children,\n  ...rest\n}: NavigationMenuVerticalItemProps) => {\n  const Component = (as || (href ? 'a' : 'button')) as React.ElementType\n  const componentProps = as\n    ? {}\n    : href\n      ? getExternalAnchorProps(href)\n      : { type: 'button' }\n\n  return (\n    <NavigationMenuVerticalItem>\n      <StyledNavigationMenuVerticalLink\n        size=\"lg\"\n        href={href}\n        {...rest}\n        {...componentProps}\n        onSelect={preventEvent}\n        asChild // ?: Can't use `as` for this as we lose `data-active` etc. attributes when we try to. Using `asChild` and `Component` as a workaround.\n      >\n        <Component>\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n        </Component>\n      </StyledNavigationMenuVerticalLink>\n    </NavigationMenuVerticalItem>\n  )\n}\n"],"names":["StyledNavigationMenuVerticalLink","styled","Link","navigationMenuVerticalItemStyles","NavigationMenuVerticalLink","as","href","children","rest","Component","componentProps","getExternalAnchorProps","React","NavigationMenuVerticalItem","preventEvent","NavigationMenuVerticalItemContent"],"mappings":"8fAWA,MAAMA,EAAmCC,EAAOC,EAAM,CACpD,KAAMC,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,UAAU,CACjB,CACF,CACF,CAAC,EAMYC,EAA6B,CAAC,CACzC,GAAAC,EACA,KAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAuC,CACrC,MAAMC,EAAaJ,IAAOC,EAAO,IAAM,UACjCI,EAAiBL,EACnB,CAAC,EACDC,EACEK,EAAuBL,CAAI,EAC3B,CAAE,KAAM,QAAS,EAEvB,OACEM,EAAA,cAACC,EAAA,KACCD,EAAA,cAACZ,EAAA,CACC,KAAK,KACL,KAAMM,EACL,GAAGE,EACH,GAAGE,EACJ,SAAUI,EACV,QAAO,EAAA,EAEPF,EAAA,cAACH,EAAA,KACCG,EAAA,cAACG,EAAA,KACER,CACH,CACF,CACF,CACF,CAEJ"}
+{"version":3,"file":"NavigationMenuVerticalLink.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalLink = styled(Link, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\ntype NavigationMenuVerticalItemProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalLink\n>\n\nexport const NavigationMenuVerticalLink = ({\n  as,\n  href,\n  children,\n  ...rest\n}: NavigationMenuVerticalItemProps) => {\n  const Component = (as || (href ? 'a' : 'button')) as React.ElementType\n  const componentProps = as\n    ? {}\n    : href\n      ? getExternalAnchorProps(href)\n      : { type: 'button' }\n\n  return (\n    <NavigationMenuVerticalItem>\n      <StyledNavigationMenuVerticalLink\n        size=\"lg\"\n        href={href}\n        {...rest}\n        {...componentProps}\n        onSelect={preventEvent}\n        asChild // ?: Can't use `as` for this as we lose `data-active` etc. attributes when we try to. Using `asChild` and `Component` as a workaround.\n      >\n        <Component>\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n        </Component>\n      </StyledNavigationMenuVerticalLink>\n    </NavigationMenuVerticalItem>\n  )\n}\n"],"names":["StyledNavigationMenuVerticalLink","styled","Link","navigationMenuVerticalItemStyles","NavigationMenuVerticalLink","as","href","children","rest","Component","componentProps","getExternalAnchorProps","React","NavigationMenuVerticalItem","preventEvent","NavigationMenuVerticalItemContent"],"mappings":"8fAWA,MAAMA,EAAmCC,EAAOC,EAAM,CACpD,KAAMC,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,UAAU,CACjB,CACF,CACF,CAAC,EAMYC,EAA6B,CAAC,CACzC,GAAAC,EACA,KAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAuC,CACrC,MAAMC,EAAaJ,IAAOC,EAAO,IAAM,UACjCI,EAAiBL,EACnB,CAAC,EACDC,EACEK,EAAuBL,CAAI,EAC3B,CAAE,KAAM,QAAS,EAEvB,OACEM,EAAA,cAACC,EAAA,KACCD,EAAA,cAACZ,EAAA,CACC,KAAK,KACL,KAAMM,EACL,GAAGE,EACH,GAAGE,EACJ,SAAUI,EACV,QAAO,EAAA,EAEPF,EAAA,cAACH,EAAA,KACCG,EAAA,cAACG,EAAA,KACER,CACH,CACF,CACF,CACF,CAEJ"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.d.ts

@@ -5,7 +5,7 @@ declare const StyledNavigationMenuVerticalText: React.ForwardRefExoticComponent<
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js

@@ -1,2 +1,2 @@
-import a from"react";import{Text as o}from"../text/Text.js";import{styled as i}from"../../styled.js";import"../side-bar/SideBar.js";import{useSidebarState as n}from"../side-bar/SideBarContext.js";const r=i(o,{base:["font-(--navigation-menu-vertical-item-font-weight)","w-max","max-w-40","text-left","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[opacity,translate]"],variants:{isExpanded:{true:["opacity-100","motion-safe:translate-0"],false:["opacity-0","motion-safe:translate-x-2"]}}}),s=t=>{const{isExpanded:e}=n();return a.createElement(r,{size:"md",as:"span",...t,isExpanded:e})};export{s as NavigationMenuVerticalText};
+import a from"react";import{Text as o}from"../text/Text.js";import{styled as i}from"../../styled.js";import{useSidebarState as n}from"../side-bar/SideBarContext.js";const s=i(o,{base:["font-(--navigation-menu-vertical-item-font-weight)","w-max","max-w-40","text-left","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[opacity,translate]"],variants:{isExpanded:{true:["opacity-100","motion-safe:translate-0"],false:["opacity-0","motion-safe:translate-x-2"]}}}),r=t=>{const{isExpanded:e}=n();return a.createElement(s,{size:"md",as:"span",...t,isExpanded:e})};export{r as NavigationMenuVerticalText};
 //# sourceMappingURL=NavigationMenuVerticalText.js.map

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\n\nimport { useSidebarState } from '../side-bar'\n\nconst StyledNavigationMenuVerticalText = styled(Text, {\n  base: [\n    'font-(--navigation-menu-vertical-item-font-weight)',\n    'w-max',\n    'max-w-40',\n    'text-left',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[opacity,translate]'\n  ],\n  variants: {\n    isExpanded: {\n      true: ['opacity-100', 'motion-safe:translate-0'],\n      false: ['opacity-0', 'motion-safe:translate-x-2']\n    }\n  }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n  props: TStyledNavigationMenuVerticalTextProps\n): JSX.Element => {\n  const { isExpanded } = useSidebarState()\n\n  return (\n    <StyledNavigationMenuVerticalText\n      size=\"md\"\n      as=\"span\"\n      {...props}\n      isExpanded={isExpanded}\n    />\n  )\n}\n"],"names":["StyledNavigationMenuVerticalText","styled","Text","NavigationMenuVerticalText","props","isExpanded","useSidebarState","React"],"mappings":"oMAOA,MAAMA,EAAmCC,EAAOC,EAAM,CACpD,KAAM,CACJ,qDACA,QACA,WACA,YACA,2BACA,uBACA,4CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,cAAe,yBAAyB,EAC/C,MAAO,CAAC,YAAa,2BAA2B,CAClD,CACF,CACF,CAAC,EAMYC,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,IAEvB,OACEC,EAAA,cAACP,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGI,EACJ,WAAYC,EACd,CAEJ"}
+{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { useSidebarState } from '../side-bar/SideBarContext'\n\nconst StyledNavigationMenuVerticalText = styled(Text, {\n  base: [\n    'font-(--navigation-menu-vertical-item-font-weight)',\n    'w-max',\n    'max-w-40',\n    'text-left',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[opacity,translate]'\n  ],\n  variants: {\n    isExpanded: {\n      true: ['opacity-100', 'motion-safe:translate-0'],\n      false: ['opacity-0', 'motion-safe:translate-x-2']\n    }\n  }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n  props: TStyledNavigationMenuVerticalTextProps\n): JSX.Element => {\n  const { isExpanded } = useSidebarState()\n\n  return (\n    <StyledNavigationMenuVerticalText\n      size=\"md\"\n      as=\"span\"\n      {...props}\n      isExpanded={isExpanded}\n    />\n  )\n}\n"],"names":["StyledNavigationMenuVerticalText","styled","Text","NavigationMenuVerticalText","props","isExpanded","useSidebarState","React"],"mappings":"qKAOA,MAAMA,EAAmCC,EAAOC,EAAM,CACpD,KAAM,CACJ,qDACA,QACA,WACA,YACA,2BACA,uBACA,4CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,cAAe,yBAAyB,EAC/C,MAAO,CAAC,YAAa,2BAA2B,CAClD,CACF,CACF,CAAC,EAMYC,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,IAEvB,OACEC,EAAA,cAACP,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGI,EACJ,WAAYC,EACd,CAEJ"}

package/dist/components/notification-badge/NotificationBadge.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge } from '../badge';
+import { Badge } from '../badge/Badge';
 type BadgeProps = React.ComponentProps<typeof Badge>;
 type NotificationBadgeProps = {
     value: number | string;

package/dist/components/notification-badge/NotificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge'\nimport { Icon } from '../icon'\n\nconst StyledWrapper = styled('div', {\n  base: ['relative']\n})\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-full',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <StyledWrapper>\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </StyledWrapper>\n)\n"],"names":["StyledWrapper","styled","StyledBadge","Badge","NotificationBadge","value","emphasis","theme","icon","children","React","Icon"],"mappings":"+IAOA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,KAAM,CAAC,UAAU,CACnB,CAAC,EAEKC,EAAcD,EAAOE,EAAO,CAChC,KAAM,CACJ,YACA,UACA,WACA,iBACA,WACA,QACA,UACA,gBACA,mBACA,eACA,MACA,UACA,aACF,CACF,CAAC,EAWYC,EAAoB,CAAC,CAChC,MAAAC,EACA,SAAAC,EAAW,OACX,MAAAC,EAAQ,UACR,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAACV,EAAA,KACE,CAAC,CAACK,GACDK,EAAA,cAACR,EAAA,CAAY,KAAK,SAAS,SAAUI,EAAU,MAAOC,CAAAA,EACnDC,GAAQE,EAAA,cAACC,EAAA,CAAK,GAAIH,EAAM,KAAK,MAAM,cAAY,OAAQ,CAAA,EACvDH,CACH,EAEDI,CACH"}
+{"version":3,"file":"NotificationBadge.js","sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledWrapper = styled('div', {\n  base: ['relative']\n})\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-full',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <StyledWrapper>\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </StyledWrapper>\n)\n"],"names":["StyledWrapper","styled","StyledBadge","Badge","NotificationBadge","value","emphasis","theme","icon","children","React","Icon"],"mappings":"+IAOA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,KAAM,CAAC,UAAU,CACnB,CAAC,EAEKC,EAAcD,EAAOE,EAAO,CAChC,KAAM,CACJ,YACA,UACA,WACA,iBACA,WACA,QACA,UACA,gBACA,mBACA,eACA,MACA,UACA,aACF,CACF,CAAC,EAWYC,EAAoB,CAAC,CAChC,MAAAC,EACA,SAAAC,EAAW,OACX,MAAAC,EAAQ,UACR,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAACV,EAAA,KACE,CAAC,CAACK,GACDK,EAAA,cAACR,EAAA,CAAY,KAAK,SAAS,SAAUI,EAAU,MAAOC,CAAAA,EACnDC,GAAQE,EAAA,cAACC,EAAA,CAAK,GAAIH,EAAM,KAAK,MAAM,cAAY,OAAQ,CAAA,EACvDH,CACH,EAEDI,CACH"}

package/dist/components/number-input/NumberInput.js

@@ -1,2 +1,2 @@
-import{Minus as X,Plus as G}from"@atom-learning/icons";import y from"clsx";import*as a from"react";import{styled as O}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as P}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as U}from"../flex/Flex.js";import{Input as j}from"../input/Input.js";import{NumberInputStepper as _}from"./NumberInputStepper.js";const q=O(U,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]},emphasis:{bold:["gap-0"]}}}),T=a.forwardRef(({value:p,defaultValue:z=0,onValueChange:w,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:u=!1,size:N="md",stepperButtonLabels:M,disabledTooltipContent:D,className:F,appearance:m="standard",emphasis:l,...R},S)=>{const[n,E]=a.useState(p||z);a.useEffect(()=>{typeof p<"u"&&E(p)},[p]);const s=a.useRef(null);a.useImperativeHandle(S,()=>s.current);const g=a.useMemo(()=>P(N),[N]),k={increment:"increment",decrement:"decrement",...M},x={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...D},b=n>=o,f=n<=r,v=a.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),t=a.useCallback(e=>{w==null||w(e),E(e)},[w]),V=a.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),h=a.useCallback(()=>{var e;if(b||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)+c;t(v(i))},[v,b,u,c,t,n]),C=a.useCallback(()=>{var e;if(f||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)-c;t(v(i))},[v,f,u,r,c,t,n]),$=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,I={ArrowUp:h,ArrowRight:h,ArrowDown:C,ArrowLeft:C,Home:()=>t(r),End:()=>t(o)}[i];I&&(e.preventDefault(),I(e))},[h,C,t,r,o]),A=n<r||n>o,{state:B,"aria-invalid":H,...K}=R,L={type:"number",value:n,...K,onChange:V,onKeyDown:$,size:N,appearance:m,state:B||(A?"error":void 0),"aria-invalid":H||A||void 0,className:y("rounded-none","w-16","[&_>_input]:text-center","disabled:opacity-30","disabled:pointer-events-none",l==="bold"&&["rounded-1","[&_>_input[aria-invalid=true]]:text-danger","focus-within:[&_>_input]:text-grey-1000"],l==="bold"&&m==="standard"&&["border-none","[&:has([aria-invalid=true])]:border-2","[&:has([aria-invalid=true])]:border-danger","focus-within:border-2","focus-within:border-blue-800"]),ref:s,readOnly:u,disabled:d,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":n,role:"spinbutton"};return a.createElement(q,{appearance:m,emphasis:l,className:F},a.createElement(_,{onClick:C,icon:X,className:y(l!=="bold"&&"border-r-none rounded-r-none"),size:g,fieldAppearance:m,emphasis:l,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:x.decrement,label:k.decrement}),a.createElement(j,{...L}),a.createElement(_,{onClick:h,icon:G,className:y(l!=="bold"&&"border-l-none rounded-l-none"),size:g,fieldAppearance:m,emphasis:l,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:x.increment,label:k.increment}))});T.displayName="NumberInput";export{T as NumberInput};
+import{Minus as q,Plus as G}from"@atom-learning/icons";import y from"clsx";import*as a from"react";import{styled as O}from"../../styled.js";import{getFieldIconSize as P}from"../../utilities/style/get-icon-size.js";import{Input as U}from"../input/Input.js";import{NumberInputStepper as _}from"./NumberInputStepper.js";const j=O("div",{base:["flex"],variants:{appearance:{standard:[],modern:["gap-px"]},emphasis:{bold:["gap-0"]}}}),T=a.forwardRef(({value:p,defaultValue:z=0,onValueChange:w,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:u=!1,size:N="md",stepperButtonLabels:M,disabledTooltipContent:D,className:R,appearance:m="standard",emphasis:l,...S},F)=>{const[n,E]=a.useState(p||z);a.useEffect(()=>{typeof p<"u"&&E(p)},[p]);const s=a.useRef(null);a.useImperativeHandle(F,()=>s.current);const g=a.useMemo(()=>P(N),[N]),k={increment:"increment",decrement:"decrement",...M},x={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...D},b=n>=o,f=n<=r,v=a.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),t=a.useCallback(e=>{w==null||w(e),E(e)},[w]),V=a.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),h=a.useCallback(()=>{var e;if(b||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)+c;t(v(i))},[v,b,u,c,t,n]),C=a.useCallback(()=>{var e;if(f||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)-c;t(v(i))},[v,f,u,r,c,t,n]),B=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,I={ArrowUp:h,ArrowRight:h,ArrowDown:C,ArrowLeft:C,Home:()=>t(r),End:()=>t(o)}[i];I&&(e.preventDefault(),I(e))},[h,C,t,r,o]),A=n<r||n>o,{state:H,"aria-invalid":K,...L}=S,X={type:"number",value:n,...L,onChange:V,onKeyDown:B,size:N,appearance:m,state:H||(A?"error":void 0),"aria-invalid":K||A||void 0,className:y("rounded-none","w-16","[&_>_input]:text-center","disabled:opacity-30","disabled:pointer-events-none",l==="bold"&&["rounded-1","[&_>_input[aria-invalid=true]]:text-danger","focus-within:[&_>_input]:text-grey-1000"],l==="bold"&&m==="standard"&&["border-none","[&:has([aria-invalid=true])]:border-2","[&:has([aria-invalid=true])]:border-danger","focus-within:border-2","focus-within:border-blue-800"]),ref:s,readOnly:u,disabled:d,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":n,role:"spinbutton"};return a.createElement(j,{appearance:m,emphasis:l,className:R},a.createElement(_,{onClick:C,icon:q,className:y(l!=="bold"&&"border-r-none rounded-r-none"),size:g,fieldAppearance:m,emphasis:l,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:x.decrement,label:k.decrement}),a.createElement(U,{...X}),a.createElement(_,{onClick:h,icon:G,className:y(l!=="bold"&&"border-l-none rounded-l-none"),size:g,fieldAppearance:m,emphasis:l,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:x.increment,label:k.increment}))});T.displayName="NumberInput";export{T as NumberInput};
 //# sourceMappingURL=NumberInput.js.map

package/dist/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled(Flex, {\n  base: [],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}

package/dist/components/number-input/NumberInputStepper.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { ActionIcon } from '../action-icon';
+import { ActionIcon } from '../action-icon/ActionIcon';
 declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "size" | "appearance" | "isRounded"> & {
-    theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+}, "appearance" | "size" | "theme" | "isRounded"> & {
+    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../types/navigatorActions.types").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance"> & {
+} & Omit<import("../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types/navigatorActions.types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance"> & {
     fieldAppearance?: "standard" | "modern" | undefined;
     emphasis?: "bold" | undefined;
 } & {

package/dist/components/number-input/NumberInputStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', {\n  base: ['z-1']\n})\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <StyledSpan tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </StyledSpan>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"kNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAChC,KAAM,CAAC,KAAK,CACd,CAAC,EAEKC,EAAsBD,EAAOE,EAAY,CAC7C,KAAM,CACJ,aACA,MACA,UACA,8BACA,oBACA,wBACA,+BACA,qBACA,sBACA,8BACF,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CAAC,WAAY,kBAAkB,EACzC,OAAQ,CAAC,cAAe,mBAAoB,oBAAoB,CAClE,EACA,SAAU,CACR,KAAM,CACJ,2BACA,wBACA,kCACA,yBACA,kCACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,gBAAiB,WACjB,SAAU,OACV,MAAO,CAAC,WAAY,qBAAqB,CAC3C,EACA,CACE,gBAAiB,SACjB,SAAU,OACV,MAAO,CAAC,YAAa,uBAAuB,CAC9C,CACF,CACF,CAAC,EAYYC,EAAqBC,EAAM,WAGtC,CAACC,EAAOC,IAAiB,CACzB,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,WAClB,GAAGC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,IACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,IACpBK,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}
+{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledSpan = styled('span', {\n  base: ['z-1']\n})\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <StyledSpan tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </StyledSpan>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"kNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAChC,KAAM,CAAC,KAAK,CACd,CAAC,EAEKC,EAAsBD,EAAOE,EAAY,CAC7C,KAAM,CACJ,aACA,MACA,UACA,8BACA,oBACA,wBACA,+BACA,qBACA,sBACA,8BACF,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CAAC,WAAY,kBAAkB,EACzC,OAAQ,CAAC,cAAe,mBAAoB,oBAAoB,CAClE,EACA,SAAU,CACR,KAAM,CACJ,2BACA,wBACA,kCACA,yBACA,kCACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,gBAAiB,WACjB,SAAU,OACV,MAAO,CAAC,WAAY,qBAAqB,CAC3C,EACA,CACE,gBAAiB,SACjB,SAAU,OACV,MAAO,CAAC,YAAa,uBAAuB,CAC9C,CACF,CACF,CAAC,EAYYC,EAAqBC,EAAM,WAGtC,CAACC,EAAOC,IAAiB,CACzB,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,WAClB,GAAGC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,IACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,IACpBK,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}

package/dist/components/number-input-field/NumberInputField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form';
+import { ValidationOptions } from '../../components/form/validation';
 import type { NumberInputProps } from '../number-input/NumberInput';
 export interface NumberInputFieldProps extends NumberInputProps {
     className?: string;

package/dist/components/number-input-field/NumberInputField.js

@@ -1,2 +1,2 @@
-import*as l from"react";import{useFormContext as g,useController as x}from"react-hook-form";import{FieldWrapper as E}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as q}from"../form/useFieldError.js";import{useFormCustomContext as y}from"../form/useFormCustomContext.js";import{NumberInput as L}from"../number-input/NumberInput.js";const d=({className:s,defaultValue:o=0,hideLabel:f,value:r,prompt:c,description:b,label:C,name:e,validation:a,onValueChange:t,appearance:v,...F})=>{const{control:N}=g(),n=y(),{field:{ref:h,onChange:m,value:I,name:V}}=x({name:e,control:N,rules:a,defaultValue:o}),{error:u}=q(e),p=(n==null?void 0:n.appearance)||v;return l.useEffect(()=>{typeof r<"u"&&m(r)},[r]),l.createElement(E,{className:s,description:b,error:u,fieldId:e,hideLabel:f,label:C,prompt:c,required:!!(a!=null&&a.required),appearance:p},l.createElement(L,{id:e,name:V,ref:h,...u&&{state:"error","aria-invalid":!0},defaultValue:o,onValueChange:i=>{m(i),t==null||t(i)},value:I,appearance:p,...F}))};d.displayName="NumberInputField";export{d as NumberInputField};
+import*as l from"react";import{useFormContext as g,useController as x}from"react-hook-form";import{FieldWrapper as E}from"../field-wrapper/FieldWrapper.js";import{useFieldError as q}from"../form/useFieldError.js";import{useFormCustomContext as y}from"../form/useFormCustomContext.js";import{NumberInput as L}from"../number-input/NumberInput.js";const d=({className:s,defaultValue:o=0,hideLabel:f,value:r,prompt:c,description:b,label:C,name:e,validation:a,onValueChange:t,appearance:v,...F})=>{const{control:N}=g(),n=y(),{field:{ref:h,onChange:u,value:I,name:V}}=x({name:e,control:N,rules:a,defaultValue:o}),{error:m}=q(e),p=(n==null?void 0:n.appearance)||v;return l.useEffect(()=>{typeof r<"u"&&u(r)},[r]),l.createElement(E,{className:s,description:b,error:m,fieldId:e,hideLabel:f,label:C,prompt:c,required:!!(a!=null&&a.required),appearance:p},l.createElement(L,{id:e,name:V,ref:h,...m&&{state:"error","aria-invalid":!0},defaultValue:o,onValueChange:i=>{u(i),t==null||t(i)},value:I,appearance:p,...F}))};d.displayName="NumberInputField";export{d as NumberInputField};
 //# sourceMappingURL=NumberInputField.js.map

package/dist/components/number-input-field/NumberInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper'\nimport {\n  useFieldError,\n  useFormCustomContext,\n  ValidationOptions\n} from '~/components/form'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"names":["NumberInputField","className","defaultValue","hideLabel","value","prompt","description","label","name","validation","onValueChange","appearance","remainingProps","control","useFormContext","context","useFormCustomContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","formAppearance","React","FieldWrapper","NumberInput","newValue"],"mappings":"gaAuBa,MAAAA,EAAmB,CAAC,CAC/B,UAAAC,EACA,aAAAC,EAAe,EACf,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACdC,EAAUC,IACV,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAb,EACA,QAAAK,EACA,MAAOJ,EACP,aAAAP,CACF,CAAC,EACK,CAAE,MAAAoB,CAAM,EAAIC,EAAcf,CAAI,EAE9BgB,GAAiBT,GAAA,YAAAA,EAAS,aAAcJ,EAE9C,OAAAc,EAAM,UAAU,IAAM,CAEhB,OAAOrB,EAAU,KAAac,EAASd,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRqB,EAAA,cAACC,EAAA,CACC,UAAWzB,EACX,YAAaK,EACb,MAAOgB,EACP,QAASd,EACT,UAAWL,EACX,MAAOI,EACP,OAAQF,EACR,SAAU,GAAQI,GAAA,MAAAA,EAAY,UAC9B,WAAYe,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAInB,EACJ,KAAMY,EACN,IAAKH,EACJ,GAAIK,GAAS,CAAE,MAAO,QAAS,eAAgB,EAAK,EACrD,aAAcpB,EACd,cAAgB0B,GAAa,CAC3BV,EAASU,CAAQ,EACjBlB,GAAA,MAAAA,EAAgBkB,CAClB,CAAA,EACA,MAAOT,EACP,WAAYK,EACX,GAAGZ,CAAAA,CACN,CACF,CAEJ,EAEAZ,EAAiB,YAAc"}
+{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"names":["NumberInputField","className","defaultValue","hideLabel","value","prompt","description","label","name","validation","onValueChange","appearance","remainingProps","control","useFormContext","context","useFormCustomContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","formAppearance","React","FieldWrapper","NumberInput","newValue"],"mappings":"+VAqBaA,EAAmB,CAAC,CAC/B,UAAAC,EACA,aAAAC,EAAe,EACf,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACdC,EAAUC,IACV,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAb,EACA,QAAAK,EACA,MAAOJ,EACP,aAAAP,CACF,CAAC,EACK,CAAE,MAAAoB,CAAM,EAAIC,EAAcf,CAAI,EAE9BgB,GAAiBT,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OAAAc,EAAM,UAAU,IAAM,CAEhB,OAAOrB,EAAU,KAAac,EAASd,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRqB,EAAA,cAACC,EAAA,CACC,UAAWzB,EACX,YAAaK,EACb,MAAOgB,EACP,QAASd,EACT,UAAWL,EACX,MAAOI,EACP,OAAQF,EACR,SAAU,CAAQI,EAAAA,GAAA,MAAAA,EAAY,UAC9B,WAAYe,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAInB,EACJ,KAAMY,EACN,IAAKH,EACJ,GAAIK,GAAS,CAAE,MAAO,QAAS,eAAgB,EAAK,EACrD,aAAcpB,EACd,cAAgB0B,GAAa,CAC3BV,EAASU,CAAQ,EACjBlB,GAAA,MAAAA,EAAgBkB,CAClB,CAAA,EACA,MAAOT,EACP,WAAYK,EACX,GAAGZ,CAAAA,CACN,CACF,CAEJ,EAEAZ,EAAiB,YAAc"}

package/dist/components/pagination/Pagination.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as p}from"../flex/Flex.js";import{PaginationProvider as b}from"./pagination-context/PaginationContext.js";import{VisibleElementsAmount as u}from"./pagination.constants.js";import{PaginationItems as C}from"./PaginationItems.js";import{PaginationPopover as E}from"./PaginationPopover.js";const t=({colorScheme:a,onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l=u.LESS,pagesCount:o,indicatedPages:r=[],disabledPages:m=[],onItemHover:s=()=>null,labels:g={},children:c,...d})=>o?e.createElement(b,{onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l,pagesCount:o,indicatedPages:r,disabledPages:m,onItemHover:s,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...a,asChild:!0},e.createElement(p,{gap:1,...d},c||e.createElement(C,null)))):null,f=Object.assign(t,{Popover:E});t.displayName="Pagination";export{f as Pagination};
+import p from"clsx";import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{PaginationProvider as b}from"./pagination-context/PaginationContext.js";import{VisibleElementsAmount as f}from"./pagination.constants.js";import{PaginationItems as u}from"./PaginationItems.js";import{PaginationPopover as v}from"./PaginationPopover.js";const t=({colorScheme:n,onSelectedPageChange:i,selectedPage:l,visibleElementsCount:m=f.LESS,pagesCount:a,indicatedPages:s=[],disabledPages:r=[],onItemHover:c=()=>null,labels:g={},children:d,...o})=>a?e.createElement(b,{onSelectedPageChange:i,selectedPage:l,visibleElementsCount:m,pagesCount:a,indicatedPages:s,disabledPages:r,onItemHover:c,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...n,asChild:!0},e.createElement("div",{className:p("flex","gap-1",o.className),...o},d||e.createElement(u,null)))):null,C=Object.assign(t,{Popover:v});t.displayName="Pagination";export{C as Pagination};
 //# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '../flex'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <Flex gap={1} {...rest}>\n          {children || <PaginationItems />}\n        </Flex>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","Flex","PaginationItems","Pagination","PaginationPopover"],"mappings":"8YAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,EACA,GAAGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CAKEG,EAAAA,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAAA,EAClEY,EAAA,cAACG,EAAA,CAAK,IAAK,EAAI,GAAGJ,CAAAA,EACfD,GAAYE,EAAA,cAACI,EAAA,IAAgB,CAChC,CACF,CACF,EApBsB,KAwBbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <div className={clsx('flex', 'gap-1', rest.className)} {...rest}>\n          {children || <PaginationItems />}\n        </div>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","clsx","PaginationItems","Pagination","PaginationPopover"],"mappings":"2XAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,CAAC,EAClB,cAAAC,EAAgB,CAChB,EAAA,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,EACA,GAAGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CACF,EAIIG,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAClEY,EAAAA,EAAA,cAAC,MAAA,CAAI,UAAWG,EAAK,OAAQ,QAASJ,EAAK,SAAS,EAAI,GAAGA,CACxDD,EAAAA,GAAYE,EAAA,cAACI,EAAA,IAAgB,CAChC,CACF,CACF,EApBsB,KAwBbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}

package/dist/components/pagination/PaginationNextButton.d.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "size" | "appearance" | "isRounded"> & {
-    theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+}, "appearance" | "size" | "theme" | "isRounded"> & {
+    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../types/navigatorActions.types").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
+} & Omit<import("../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types/navigatorActions.types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
     as?: React.ElementType;
 }>;
 export declare const PaginationNextButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;

package/dist/components/pagination/PaginationNextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationNextButton","props","goToNextPage","labels","nextAvailablePage","usePagination","React","Icon","ChevronRight"],"mappings":"yQASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,KAAM,CAAC,OAAQ,qBAAqB,CACtC,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,aAAAC,EAAc,OAAAC,EAAQ,kBAAAC,CAAkB,EAAIC,IAIpD,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,WAAA,EAEtCG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAc,CAC1B,CAEJ"}
+{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationNextButton","props","goToNextPage","labels","nextAvailablePage","usePagination","React","Icon","ChevronRight"],"mappings":"yQASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,KAAM,CAAC,OAAQ,qBAAqB,CACtC,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,aAAAC,EAAc,OAAAC,EAAQ,kBAAAC,CAAkB,EAAIC,IAIpD,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,WAAA,EAEtCG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAc,CAC1B,CAEJ"}

package/dist/components/pagination/PaginationPage.js

@@ -1,2 +1,2 @@
-import*as p from"react";import{styled as u}from"../../styled.js";import{usePagination as m}from"./usePagination.js";const g=u("button",{base:["items-center","border","border-transparent","rounded-sm","cursor-pointer","font-body","justify-center","whitespace-nowrap","w-max","flex","flex-col","p-0","font-normal","text-text-subtle","bg-(--base-1)","relative","not-disabled:active:bg-(--base-3)","not-disabled:active:text-(--text-bold)","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-(--base-2)","not-disabled:hover:text-text-regular","disabled:cursor-not-allowed","disabled:opacity-30","disabled:pointer-events-none"],variants:{size:{md:["size-10"]},selected:{true:["border","border-(--accent-9)","font-semibold","not-disabled:active:border-(--accent-11)","not-disabled:active:text-(--accent-11)","not-disabled:hover:border-(--accent-10)","not-disabled:hover:text-(--accent-10)","text-(--accent-9)"]},indicated:{true:["bg-(--accent-9)","font-semibold","not-disabled:active:bg-(--accent-11)","not-disabled:active:text-white","not-disabled:hover:bg-(--accent-10)","not-disabled:hover:text-white","text-white"]}},compoundVariants:[{selected:!0,indicated:!0,class:["bg-(--accent-9)","font-semibold","not-disabled:active:bg-(--accent-11)","not-disabled:active:text-white","not-disabled:hover:bg-(--accent-10)","not-disabled:hover:text-white","not-focus-visible:border-white!","shadow-[var(--accent-9)_0px_0px_0px_1px]","text-white"]}]}),h=({pageNumber:e,className:d,onClick:o})=>{const{currentPage:n,goToPage:s,indicatedPages:c,disabledPages:r,onItemHover:i}=m(),l=c.includes(e),t=r.includes(e),a=n===e,b=()=>{a||t||i==null||i(e)},x=v=>{o==null||o(),s(v)};return p.createElement(g,{selected:a,size:"md",onClick:()=>x(e),className:d,indicated:l,disabled:t,"aria-current":a&&"page","aria-disabled":t,onMouseOver:b},e)};export{h as PaginationPage};
+import*as u from"react";import{styled as p}from"../../styled.js";import{usePagination as m}from"./usePagination.js";const g=p("button",{base:["items-center","border","border-transparent","rounded-sm","cursor-pointer","font-body","justify-center","whitespace-nowrap","w-max","flex","flex-col","font-normal","text-text-subtle","bg-(--base-1)","relative","not-disabled:active:bg-(--base-3)","not-disabled:active:text-(--text-bold)","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-(--base-2)","not-disabled:hover:text-text-regular","disabled:cursor-not-allowed","disabled:opacity-30","disabled:pointer-events-none"],variants:{size:{md:["size-10"]},selected:{true:["border","border-(--accent-9)","font-semibold","not-disabled:active:border-(--accent-11)","not-disabled:active:text-(--accent-11)","not-disabled:hover:border-(--accent-10)","not-disabled:hover:text-(--accent-10)","text-(--accent-9)"]},indicated:{true:["bg-(--accent-9)","font-semibold","not-disabled:active:bg-(--accent-11)","not-disabled:active:text-white","not-disabled:hover:bg-(--accent-10)","not-disabled:hover:text-white","text-white"]}},compoundVariants:[{selected:!0,indicated:!0,class:["bg-(--accent-9)","font-semibold","not-disabled:active:bg-(--accent-11)","not-disabled:active:text-white","not-disabled:hover:bg-(--accent-10)","not-disabled:hover:text-white","not-focus-visible:border-white!","shadow-[var(--accent-9)_0px_0px_0px_1px]","text-white"]}]}),h=({pageNumber:e,className:d,onClick:o})=>{const{currentPage:n,goToPage:s,indicatedPages:c,disabledPages:r,onItemHover:i}=m(),l=c.includes(e),t=r.includes(e),a=n===e,b=()=>{a||t||i==null||i(e)},x=v=>{o==null||o(),s(v)};return u.createElement(g,{selected:a,size:"md",onClick:()=>x(e),className:d,indicated:l,disabled:t,"aria-current":a&&"page","aria-disabled":t,onMouseOver:b},e)};export{h as PaginationPage};
 //# sourceMappingURL=PaginationPage.js.map

package/dist/components/pagination/PaginationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'p-0',\n    'font-normal',\n    'text-text-subtle',\n    'bg-(--base-1)',\n    'relative',\n    'not-disabled:active:bg-(--base-3)',\n    'not-disabled:active:text-(--text-bold)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--base-2)',\n    'not-disabled:hover:text-text-regular',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:border-(--accent-11)',\n        'not-disabled:active:text-(--accent-11)',\n        'not-disabled:hover:border-(--accent-10)',\n        'not-disabled:hover:text-(--accent-10)',\n        'text-(--accent-9)'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'text-white'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'not-focus-visible:border-white!',\n        'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n        'text-white'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\n  onClick\n}: PaginationPageProps) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  const handleOnClick = (pageNumber) => {\n    onClick?.()\n    goToPage(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => handleOnClick(pageNumber)}\n      className={className}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n    </StyledButton>\n  )\n}\n"],"names":["StyledButton","styled","PaginationPage","pageNumber","className","onClick","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","handleOnHover","handleOnClick","React"],"mappings":"oHAOA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,eACA,SACA,qBACA,aACA,iBACA,YACA,iBACA,oBACA,QACA,OACA,WACA,MACA,cACA,mBACA,gBACA,WACA,oCACA,yCACA,0CACA,sCACA,+EACA,4DACA,iCACA,mCACA,uCACA,8BACA,sBACA,8BACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,SAAS,CAChB,EACA,SAAU,CACR,KAAM,CACJ,SACA,sBACA,gBACA,2CACA,yCACA,0CACA,wCACA,mBACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,kBACA,gBACA,uCACA,iCACA,sCACA,gCACA,YACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,SAAU,GACV,UAAW,GACX,MAAO,CACL,kBACA,gBACA,uCACA,iCACA,sCACA,gCACA,kCACA,2CACA,YACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiB,CAAC,CAC7B,WAAAC,EACA,UAAAC,EACA,QAAAC,CACF,IAA2B,CACzB,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,IAEIC,EAAcJ,EAAe,SAASL,CAAU,EAChDU,EAAaJ,EAAc,SAASN,CAAU,EAE9CW,EAAaR,IAAgBH,EAE7BY,EAAgB,IAAM,CACtBD,GAAcD,GAClBH,GAAA,MAAAA,EAAcP,CAAAA,CAChB,EAEMa,EAAiBb,GAAe,CACpCE,GAAA,MAAAA,IACAE,EAASJ,CAAU,CACrB,EAEA,OACEc,EAAA,cAACjB,EAAA,CACC,SAAUc,EACV,KAAK,KACL,QAAS,IAAME,EAAcb,CAAU,EACvC,UAAWC,EACX,UAAWQ,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAAaE,CAEZZ,EAAAA,CACH,CAEJ"}
+{"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'font-normal',\n    'text-text-subtle',\n    'bg-(--base-1)',\n    'relative',\n    'not-disabled:active:bg-(--base-3)',\n    'not-disabled:active:text-(--text-bold)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--base-2)',\n    'not-disabled:hover:text-text-regular',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:border-(--accent-11)',\n        'not-disabled:active:text-(--accent-11)',\n        'not-disabled:hover:border-(--accent-10)',\n        'not-disabled:hover:text-(--accent-10)',\n        'text-(--accent-9)'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'text-white'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'not-focus-visible:border-white!',\n        'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n        'text-white'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\n  onClick\n}: PaginationPageProps) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  const handleOnClick = (pageNumber) => {\n    onClick?.()\n    goToPage(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => handleOnClick(pageNumber)}\n      className={className}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n    </StyledButton>\n  )\n}\n"],"names":["StyledButton","styled","PaginationPage","pageNumber","className","onClick","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","handleOnHover","handleOnClick","React"],"mappings":"oHAOA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,eACA,SACA,qBACA,aACA,iBACA,YACA,iBACA,oBACA,QACA,OACA,WACA,cACA,mBACA,gBACA,WACA,oCACA,yCACA,0CACA,sCACA,+EACA,4DACA,iCACA,mCACA,uCACA,8BACA,sBACA,8BACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,SAAS,CAChB,EACA,SAAU,CACR,KAAM,CACJ,SACA,sBACA,gBACA,2CACA,yCACA,0CACA,wCACA,mBACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,kBACA,gBACA,uCACA,iCACA,sCACA,gCACA,YACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,SAAU,GACV,UAAW,GACX,MAAO,CACL,kBACA,gBACA,uCACA,iCACA,sCACA,gCACA,kCACA,2CACA,YACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiB,CAAC,CAC7B,WAAAC,EACA,UAAAC,EACA,QAAAC,CACF,IAA2B,CACzB,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,IAEIC,EAAcJ,EAAe,SAASL,CAAU,EAChDU,EAAaJ,EAAc,SAASN,CAAU,EAE9CW,EAAaR,IAAgBH,EAE7BY,EAAgB,IAAM,CACtBD,GAAcD,GAClBH,GAAA,MAAAA,EAAcP,CAAAA,CAChB,EAEMa,EAAiBb,GAAe,CACpCE,GAAA,MAAAA,IACAE,EAASJ,CAAU,CACrB,EAEA,OACEc,EAAA,cAACjB,EAAA,CACC,SAAUc,EACV,KAAK,KACL,QAAS,IAAME,EAAcb,CAAU,EACvC,UAAWC,EACX,UAAWQ,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAAaE,CAEZZ,EAAAA,CACH,CAEJ"}