@atom-learning/components 6.0.0-beta.8 → 6.0.0

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

@@ -1,15 +1,13 @@
 import React from 'react';
-declare const StyledRoot: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuProps & React.RefAttributes<HTMLElement> & {
+declare const StyledRoot: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuProps & React.RefAttributes<HTMLElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLElement>>;
+}>;
 type TNavigationVerticalProps = Omit<React.ComponentProps<typeof StyledRoot>, 'delayDuration' | 'skipDelayDuration' | 'defaultValue' | 'value' | 'onValueChange'>;
 export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigationVerticalProps) => React.JSX.Element) & {
-    Link: ({ as, href, children, ...rest }: Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement> & {
-        size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
+    Link: ({ as, href, children, ...rest }: Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "size"> & {
+        size?: "md" | "lg" | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLAnchorElement> & {
-        as?: React.ComponentType | React.ElementType;
     }) => React.JSX.Element;
     Accordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
         children?: React.ReactNode;
@@ -277,14 +275,14 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         is?: string | undefined | undefined;
         asChild?: boolean | undefined;
     }) => JSX.Element;
-    AccordionContent: ({ children, ...rest }: import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & React.RefAttributes<HTMLUListElement> & {
+    AccordionContent: ({ children, ...rest }: import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLUListElement>) => JSX.Element;
-    AccordionTrigger: ({ children, ...rest }: Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement> & {
-        size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
+    }) => JSX.Element;
+    AccordionTrigger: ({ children, ...rest }: Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
+        size?: "md" | "lg" | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
+    }) => React.JSX.Element;
     Item: (props: {
         children?: React.ReactNode;
         slot?: string | undefined | undefined;
@@ -553,7 +551,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
     }) => 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;
@@ -561,34 +559,34 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         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;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+    }) => 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"> & {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>, "is" | "as"> & {
+    }, "is" | "as"> & {
         is: React.FC<React.SVGProps<SVGSVGElement>>;
         as?: never;
-    }, "ref"> & React.RefAttributes<SVGSVGElement> & {
+    }, "ref"> & React.RefAttributes<SVGSVGElement>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>>>) => JSX.Element;
+    }>>) => JSX.Element;
     Text: (props: Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-    } & {
+    }, "size" | "noCapsize" | "weight" | "family"> & {
+        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;
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+    }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
-        isExpanded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "isExpanded"> & {
+        isExpanded?: boolean | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>) => JSX.Element;
+    }) => JSX.Element;
 };
 export {};

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js

@@ -1,2 +1,2 @@
-const e=["[--navigation-menu-vertical-item-font-weight:400]","data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]","border-none","outline-none","bg-none","text-[inherit]","cursor-pointer","rounded-xl","flex","items-center","p-2","pl-(--navigation-menu-vertical-item-pl)","w-full","text-(--text)","bg-(--background)","disabled:cursor-not-allowed","[text-decoration:unset]","disabled:opacity-30","not-disabled:active:bg-(--background-active)","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:bg-(--background-hover)","data-active:bg-(--background-selected)","data-active:text-(--text-selected)","data-active:[--navigation-menu-vertical-item-font-weight:600]"];export{e as navigationMenuVerticalItemStyles};
+const e=["[--navigation-menu-vertical-item-font-weight:400]","data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]","border-none","outline-none","bg-none","decoration-[inherit]","cursor-pointer","rounded-md","flex","items-center","p-2","pl-(--navigation-menu-vertical-item-pl)","w-full","text-(--text)","bg-(--background)","disabled:cursor-not-allowed","[text-decoration:unset]","disabled:opacity-30","not-disabled:active:bg-(--background-active)","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-(--background-hover)","data-active:bg-(--background-selected)","data-active:text-(--text-selected)","data-active:[--navigation-menu-vertical-item-font-weight:600]"];export{e as navigationMenuVerticalItemStyles};
 //# sourceMappingURL=NavigationMenuVertical.styles.js.map

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["export const navigationMenuVerticalItemStyles = [\n  '[--navigation-menu-vertical-item-font-weight:400]',\n  'data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]',\n  'border-none',\n  'outline-none',\n  'bg-none',\n  'text-[inherit]',\n  'cursor-pointer',\n  'rounded-xl',\n  'flex',\n  'items-center',\n  'p-2',\n  'pl-(--navigation-menu-vertical-item-pl)',\n  'w-full',\n  'text-(--text)',\n  'bg-(--background)',\n  'disabled:cursor-not-allowed',\n  '[text-decoration:unset]',\n  'disabled:opacity-30',\n  'not-disabled:active:bg-(--background-active)',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[$colors$primary800_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-(--background-hover)',\n  'data-active:bg-(--background-selected)',\n  'data-active:text-(--text-selected)',\n  'data-active:[--navigation-menu-vertical-item-font-weight:600]'\n]\n"],"names":["navigationMenuVerticalItemStyles"],"mappings":"AAAO,MAAMA,EAAmC,CAC9C,oDACA,sEACA,cACA,eACA,UACA,iBACA,iBACA,aACA,OACA,eACA,MACA,0CACA,SACA,gBACA,oBACA,8BACA,0BACA,sBACA,+CACA,0CACA,sCACA,yEACA,4DACA,iCACA,6CACA,yCACA,qCACA,+DACF"}
+{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["export const navigationMenuVerticalItemStyles = [\n  '[--navigation-menu-vertical-item-font-weight:400]',\n  'data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]',\n  'border-none',\n  'outline-none',\n  'bg-none',\n  'decoration-[inherit]',\n  'cursor-pointer',\n  'rounded-md',\n  'flex',\n  'items-center',\n  'p-2',\n  'pl-(--navigation-menu-vertical-item-pl)',\n  'w-full',\n  'text-(--text)',\n  'bg-(--background)',\n  'disabled:cursor-not-allowed',\n  '[text-decoration:unset]',\n  'disabled:opacity-30',\n  'not-disabled:active:bg-(--background-active)',\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-(--background-hover)',\n  'data-active:bg-(--background-selected)',\n  'data-active:text-(--text-selected)',\n  'data-active:[--navigation-menu-vertical-item-font-weight:600]'\n]\n"],"names":["navigationMenuVerticalItemStyles"],"mappings":"AAAO,MAAMA,EAAmC,CAC9C,oDACA,sEACA,cACA,eACA,UACA,uBACA,iBACA,aACA,OACA,eACA,MACA,0CACA,SACA,gBACA,oBACA,8BACA,0BACA,sBACA,+CACA,0CACA,sCACA,+EACA,4DACA,iCACA,6CACA,yCACA,qCACA,+DACF"}

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

@@ -1,9 +1,9 @@
 import React from 'react';
-declare const StyledNavigationMenuVerticalAccordionTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement> & {
-    size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
+declare const StyledNavigationMenuVerticalAccordionTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
+    size?: "md" | "lg" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+}>;
 type TNavigationMenuAccordionTriggerProps = React.ComponentProps<typeof StyledNavigationMenuVerticalAccordionTrigger>;
 export declare const NavigationMenuVerticalAccordionTrigger: ({ children, ...rest }: TNavigationMenuAccordionTriggerProps) => React.JSX.Element;
 export {};

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 declare const StyledNavigationMenuVerticalIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-} & {
+}, "size"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<SVGSVGElement>, "is" | "as"> & {
+}, "is" | "as"> & {
     is: React.FC<React.SVGProps<SVGSVGElement>>;
     as?: never;
-}, "ref"> & React.RefAttributes<SVGSVGElement> & {
+}, "ref"> & React.RefAttributes<SVGSVGElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<SVGSVGElement>>;
+}>;
 export declare const NavigationMenuVerticalIcon: (props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>) => JSX.Element;
 export {};

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

@@ -1,11 +1,9 @@
 import React from 'react';
-declare const StyledNavigationMenuVerticalLink: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement> & {
-    size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
+declare const StyledNavigationMenuVerticalLink: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "size"> & {
+    size?: "md" | "lg" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink> & {
-    as?: React.ComponentType | React.ElementType;
-};
+}>;
+type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink>;
 export declare const NavigationMenuVerticalLink: ({ as, href, children, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
 export {};

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  as?: React.ComponentType | React.ElementType\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,EAQYC,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'\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/NavigationMenuVerticalList.d.ts

@@ -1,3 +1,3 @@
-export declare const NavigationMenuVerticalList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement> & {
+export declare const NavigationMenuVerticalList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, never> & {
     as?: import("react").ElementType;
-}, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+}>;

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

@@ -1,2 +1,2 @@
-import{List as t}from"@radix-ui/react-navigation-menu";import{styled as i}from"../../styled.js";const n=i(t,{base:["p-0","m-0","list-none","[--navigation-menu-vertical-item-pl:--spacing(4)]","*:not-first:mt-0.5"]}),o=n;export{o as NavigationMenuVerticalList};
+import{List as t}from"@radix-ui/react-navigation-menu";import{styled as i}from"../../styled.js";const o=i(t,{base:["[--navigation-menu-vertical-item-pl:--spacing(4)]","*:not-first:mt-0.5"]}),n=o;export{n as NavigationMenuVerticalList};
 //# sourceMappingURL=NavigationMenuVerticalList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalList.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-navigation-menu'\n\nimport { styled } from '~/styled'\n\nconst StyledList = styled(List, {\n  base: [\n    'p-0',\n    'm-0',\n    'list-none',\n    '[--navigation-menu-vertical-item-pl:--spacing(4)]',\n    '*:not-first:mt-0.5'\n  ]\n})\n\nexport const NavigationMenuVerticalList = StyledList\n"],"names":["StyledList","styled","List","NavigationMenuVerticalList"],"mappings":"gGAIA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CACJ,MACA,MACA,YACA,oDACA,oBACF,CACF,CAAC,EAEYC,EAA6BH"}
+{"version":3,"file":"NavigationMenuVerticalList.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-navigation-menu'\n\nimport { styled } from '~/styled'\n\nconst StyledList = styled(List, {\n  base: [\n    '[--navigation-menu-vertical-item-pl:--spacing(4)]',\n    '*:not-first:mt-0.5'\n  ]\n})\n\nexport const NavigationMenuVerticalList = StyledList\n"],"names":["StyledList","styled","List","NavigationMenuVerticalList"],"mappings":"gGAIA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CACJ,oDACA,oBACF,CACF,CAAC,EAEYC,EAA6BH"}

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

@@ -1,20 +1,20 @@
 import React from 'react';
 declare const StyledNavigationMenuVerticalText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-} & {
+}, "size" | "noCapsize" | "weight" | "family"> & {
+    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;
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+}, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
-    isExpanded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "isExpanded"> & {
+    isExpanded?: boolean | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+}>;
 type TStyledNavigationMenuVerticalTextProps = React.ComponentProps<typeof StyledNavigationMenuVerticalText>;
 export declare const NavigationMenuVerticalText: (props: TStyledNavigationMenuVerticalTextProps) => JSX.Element;
 export {};

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)","leading-[1.2]","w-max","max-w-40","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[opacity,translate]"],variants:{isExpanded:{true:["opacity-100","motion-safe:translate-0"]}}}),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"../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};
 //# 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    'leading-[1.2]',\n    'w-max',\n    'max-w-40',\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'] // triggered when isExpanded is undefined as well\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  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,gBACA,QACA,WACA,2BACA,uBACA,4CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,cAAe,yBAAyB,CAEjD,CACF,CACF,CAAC,EAMYC,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,EACvB,EAAA,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'\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"}

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

@@ -1,2 +1,2 @@
-import e from"react";import{styled as o}from"../../styled.js";import{Badge as n}from"../badge/Badge.js";import{Icon as l}from"../icon/Icon.js";const s=o("div",{base:["relative"]}),d=o(n,{base:["font-body","text-sm","flex-row","justify-center","absolute","top-0","right-0","translate-x-3","-translate-y-1/2","rounded-round","h-6","min-w-6","text-center"]}),c=({value:t,emphasis:a="bold",theme:i="primary",icon:r,children:m})=>e.createElement(s,null,!!t&&e.createElement(d,{role:"status",emphasis:a,theme:i},r&&e.createElement(l,{is:r,role:"img","aria-hidden":"false"}),t),m);export{c as NotificationBadge};
+import e from"react";import{styled as a}from"../../styled.js";import{Badge as m}from"../badge/Badge.js";import{Icon as n}from"../icon/Icon.js";const s=a("div",{base:["relative"]}),d=a(m,{base:["font-body","text-sm","flex-row","justify-center","absolute","top-0","right-0","translate-x-3","-translate-y-1/2","rounded-full","h-6","min-w-6","text-center"]}),c=({value:t,emphasis:o="bold",theme:i="primary",icon:r,children:l})=>e.createElement(s,null,!!t&&e.createElement(d,{role:"status",emphasis:o,theme:i},r&&e.createElement(n,{is:r,role:"img","aria-hidden":"false"}),t),l);export{c as NotificationBadge};
 //# sourceMappingURL=NotificationBadge.js.map

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-round',\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,gBACA,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'\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"}

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

@@ -10,6 +10,7 @@ export interface NumberInputProps {
     readonly?: boolean;
     size?: 'sm' | 'md' | 'lg';
     appearance?: 'standard' | 'modern';
+    emphasis?: 'bold';
     onValueChange?: (value: number) => void;
     stepperButtonLabels?: {
         increment?: string;

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

@@ -1,2 +1,2 @@
-import{Minus as H,Plus as K}from"@atom-learning/icons";import L from"clsx";import*as n from"react";import{styled as V}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as _}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as B}from"../flex/Flex.js";import{Input as O}from"../input/Input.js";import{NumberInputStepper as A}from"./NumberInputStepper.js";const P=V(B,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]}}}),I=n.forwardRef(({value:u,defaultValue:x=0,onValueChange:N,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:i=!1,readonly:m=!1,size:w="md",stepperButtonLabels:M,disabledTooltipContent:T,className:z,appearance:d="standard",...D},R)=>{const[t,E]=n.useState(u||x);n.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const s=n.useRef(null);n.useImperativeHandle(R,()=>s.current);const y=n.useMemo(()=>_(w),[w]),g={increment:"increment",decrement:"decrement",...M},k={decrement:"Cannot enter values below ".concat(r),increment:"Cannot enter values above ".concat(o),...T},p=t>=o,b=t<=r,f=n.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),a=n.useCallback(e=>{N==null||N(e),E(e)},[N]),S=n.useCallback(e=>{const l=Number(e.target.value.replace(/\D/g,""));a(l)},[a]),v=n.useCallback(()=>{var e;if(p||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)+c;a(f(l))},[f,p,m,c,a,t]),C=n.useCallback(()=>{var e;if(b||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)-c;a(f(l))},[f,b,m,r,c,a,t]),F=n.useCallback(e=>{if(e.nativeEvent.isComposing)return;const l=e.key,h={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>a(r),End:()=>a(o)}[l];h&&(e.preventDefault(),h(e))},[v,C,a,r,o]),G={type:"number",value:t,...D,onChange:S,onKeyDown:F,size:w,appearance:d,className:L("rounded-none","w-16","disabled:opacity-30","disabled:pointer-events-none"),ref:s,readOnly:m,disabled:i,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":t,role:"spinbutton"};return n.createElement(P,{appearance:d,className:z},n.createElement(A,{onClick:C,icon:H,size:y,fieldAppearance:d,disabled:b||i,showTooltip:b&&!i,disabledTooltipContent:k.decrement,label:g.decrement,className:"border-r-none rounded-r-none"}),n.createElement(O,{...G}),n.createElement(A,{onClick:v,icon:K,size:y,fieldAppearance:d,disabled:p||i,showTooltip:p&&!i,disabledTooltipContent:k.increment,label:g.increment,className:"border-l-none rounded-l-none"}))});I.displayName="NumberInput";export{I as NumberInput};
+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};
 //# 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  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  }\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      ...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 inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...rest,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none'\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 appearance={appearance} className={className}>\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n          className=\"border-r-none rounded-r-none\"\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n          className=\"border-l-none rounded-l-none\"\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","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","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'\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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"}

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

@@ -2,22 +2,22 @@ import * as React from 'react';
 import { ActionIcon } from '../action-icon';
 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?: ("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;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
-    as?: string | React.ReactNode;
+}, "children" | "label" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement> & {
-    fieldAppearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance"> & {
+    fieldAppearance?: "standard" | "modern" | undefined;
+    emphasis?: "bold" | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+}>;
 type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'children'> & Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {
     icon: React.FC<React.SVGProps<SVGSVGElement>>;
     showTooltip?: boolean;

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as r}from"../../styled.js";import{ActionIcon as s}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{Tooltip as t}from"../tooltip/Tooltip.js";const m=r("span",{base:["z-1"]}),g=r(s,{base:["rounded-md","z-1","h-full!","hover:[&_svg]:text-grey-800","hover:bg-grey-100","[&_svg]:text-grey-700","active:[&_svg]:text-grey-900","active:bg-grey-200","disabled:opacity-30","disabled:pointer-events-none"],variants:{fieldAppearance:{standard:["bg-white","border-grey-800!"],modern:["bg-grey-100","border-grey-100!"]}}}),b=e.forwardRef((o,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:d,fieldAppearance:l="standard",...p}=o;return e.createElement(t,null,e.createElement(t.Trigger,{asChild:!0},e.createElement(m,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:l,ref:n,...p},e.createElement(c,{is:a})))),d&&e.createElement(t.Content,null,i))});export{b as NumberInputStepper};
+import*as e from"react";import{styled as t}from"../../styled.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const g=t("span",{base:["z-1"]}),c=t(l,{base:["rounded-md","z-1","h-full!","hover:[&_svg]:text-grey-800","hover:bg-grey-100","[&_svg]:text-grey-700","active:[&_svg]:text-grey-900","active:bg-grey-200","disabled:opacity-30","disabled:pointer-events-none"],variants:{fieldAppearance:{standard:["bg-white","border-grey-800!"],modern:["bg-grey-100","border-grey-100!","hover:bg-grey-200!"]},emphasis:{bold:["[&_svg]:text-primary-700","hover:bg-primary-100!","hover:[&_svg]:text-primary-800!","active:bg-primary-200!","active:[&_svg]:text-primary-900!"]}},compoundVariants:[{fieldAppearance:"standard",emphasis:"bold",class:["bg-white","border-primary-800!"]},{fieldAppearance:"modern",emphasis:"bold",class:["bg-white!","hover:bg-primary-100!"]}]}),b=e.forwardRef((a,o)=>{const{icon:i,disabledTooltipContent:n,showTooltip:p,fieldAppearance:s="standard",...d}=a;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(g,{tabIndex:-1},e.createElement(c,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:s,ref:o,...d},e.createElement(m,{is:i})))),p&&e.createElement(r.Content,null,n))});export{b as NumberInputStepper};
 //# sourceMappingURL=NumberInputStepper.js.map

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!']\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,kBAAkB,CAC5C,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,EAAA,EACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAM,CAAA,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'\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"}

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

@@ -1,19 +1,18 @@
 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?: ("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;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
-    as?: string | React.ReactNode;
+}, "children" | "label" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+}>;
 export declare const PaginationNextButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;
 export {};

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-[$colors$primary800_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-[$colors$accent9_0px_0px_0px_1px]","text-white"]}]}),h=({pageNumber:e,className:d,onClick:o})=>{const{currentPage:s,goToPage:n,indicatedPages:c,disabledPages:l,onItemHover:i}=m(),r=c.includes(e),t=l.includes(e),a=s===e,b=()=>{a||t||i==null||i(e)},x=v=>{o==null||o(),n(v)};return p.createElement(g,{selected:a,size:"md",onClick:()=>x(e),className:d,indicated:r,disabled:t,"aria-current":a&&"page","aria-disabled":t,onMouseOver:b},e)};export{h as PaginationPage};
+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};
 //# 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-[$colors$primary800_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-[$colors$accent9_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,yEACA,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    '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"}

package/dist/components/pagination/PaginationPopover.js

@@ -1,2 +1,2 @@
-import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"clsx";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:a,labels:i}=d(),p=Array.from({length:a},(o,l)=>l+1),[n,m]=t.useState(!1);return t.createElement(r,{open:n,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,className:"p-0"},t.createElement(g,{className:"flex flex-wrap justify-center gap-1 p-4"},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
+import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../skeleton-loader/Skeleton.js";import"clsx";import"../tile/Tile.js";import"../skeleton-loader/SkeletonDoughnutChart.js";import"../table/Table.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:a,labels:i}=d(),p=Array.from({length:a},(o,l)=>l+1),[n,m]=t.useState(!1);return t.createElement(r,{open:n,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,className:"p-0"},t.createElement(g,{className:"flex flex-wrap justify-center gap-1 p-4"},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
 //# sourceMappingURL=PaginationPopover.js.map