@atom-learning/components 8.0.2 → 9.0.0-beta.0

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

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import { NavigationMenuVerticalList } from './NavigationMenuVerticalList';
 declare const StyledNavigationMenuVerticalAccordionContent: React.ForwardRefExoticComponent<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
-type TNavigationMenuVerticalAccordionContentProps = React.ComponentProps<typeof StyledNavigationMenuVerticalAccordionContent> & React.ComponentProps<typeof NavigationMenuVerticalList>;
-export declare const NavigationMenuVerticalAccordionContent: ({ children, ...rest }: TNavigationMenuVerticalAccordionContentProps) => React.JSX.Element;
+type NavigationMenuVerticalAccordionContentProps = React.ComponentProps<typeof StyledNavigationMenuVerticalAccordionContent> & React.ComponentProps<typeof NavigationMenuVerticalList>;
+export declare const NavigationMenuVerticalAccordionContent: ({ children, ...rest }: NavigationMenuVerticalAccordionContentProps) => React.JSX.Element;
 export {};

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

@@ -1,12 +1,12 @@
 import { NavigationMenuVerticalAccordionContext } from "./NavigationMenuVerticalAccordion.js";
 import { NavigationMenuVerticalList } from "./NavigationMenuVerticalList.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Content } from "@radix-ui/react-collapsible";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx
 var StyledNavigationMenuVerticalAccordionContent = Content;
 var NavigationMenuVerticalAccordionContent = ({ children, ...rest }) => {
-	const { triggerRef } = React.useContext(NavigationMenuVerticalAccordionContext);
+	const { triggerRef } = React$1.useContext(NavigationMenuVerticalAccordionContext);
 	const handleOnKeydown = (e) => {
 		if (!triggerRef?.current) return;
 		if (e.key === "Escape") {

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype TNavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionContent\n> &\n  React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n  children,\n  ...rest\n}: TNavigationMenuVerticalAccordionContentProps): React.JSX.Element => {\n  const { triggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <StyledNavigationMenuVerticalAccordionContent\n      onKeyDown={handleOnKeydown}\n      {...rest}\n    >\n      <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n    </StyledNavigationMenuVerticalAccordionContent>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WACkE;CACrE,MAAM,EAAE,eAAe,MAAM,WAC3B,uCACD;CAED,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,oBAAC,8CAAD;EACE,WAAW;EACX,GAAI;YAEJ,oBAAC,4BAAD,EAA6B,UAAsC,CAAA;EACtB,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype NavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionContent\n> &\n  React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n  children,\n  ...rest\n}: NavigationMenuVerticalAccordionContentProps) => {\n  const { triggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <StyledNavigationMenuVerticalAccordionContent\n      onKeyDown={handleOnKeydown}\n      {...rest}\n    >\n      <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n    </StyledNavigationMenuVerticalAccordionContent>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,eAAe,QAAM,WAC3B,sCACF;CAEA,MAAM,mBAAmB,MAAM;EAC7B,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,EAAE,QAAQ,UAAU;GACtB,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,WAAW,QAAQ,MAAM;GACzB,WAAW,QAAQ,MAAM;EAC3B;CACF;CAEA,OACE,oBAAC,8CAAD;EACE,WAAW;EACX,GAAI;YAEJ,oBAAC,4BAAD,EAA6B,SAAqC,CAAA;CACtB,CAAA;AAElD"}

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

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

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

@@ -3,7 +3,7 @@ import { Icon } from "../icon/Icon.js";
 import { NavigationMenuVerticalAccordionContext } from "./NavigationMenuVerticalAccordion.js";
 import { navigationMenuVerticalItemStyles } from "./NavigationMenuVertical.styles.js";
 import { NavigationMenuVerticalItemContent } from "./NavigationMenuVerticalItemContent.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
 import { Trigger } from "@radix-ui/react-collapsible";
@@ -22,7 +22,7 @@ var StyledIcon = styled(Icon, { base: [
 	"[[data-state=open]>&]:rotate-180"
 ] });
 var NavigationMenuVerticalAccordionTrigger = ({ children, ...rest }) => {
-	const { setTriggerRef } = React.useContext(NavigationMenuVerticalAccordionContext);
+	const { setTriggerRef } = React$1.useContext(NavigationMenuVerticalAccordionContext);
 	return /* @__PURE__ */ jsx(Link, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(StyledNavigationMenuVerticalAccordionTrigger, {

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\nconst StyledIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180'\n  ]\n})\n\ntype TNavigationMenuAccordionTriggerProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n  children,\n  ...rest\n}: TNavigationMenuAccordionTriggerProps) => {\n  const { setTriggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  return (\n    <Link asChild>\n      <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between gap-3\"\n          ref={setTriggerRef}\n        >\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n          <StyledIcon size=\"sm\" is={ChevronDown} />\n        </button>\n      </StyledNavigationMenuVerticalAccordionTrigger>\n    </Link>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,+CAA+C,OAAO,SAAS;CACnE,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,WAAW;EACjB,EACF;CACF,CAAC;AAEF,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ;CACA;CACA;CACD,EACF,CAAC;AAMF,IAAa,0CAA0C,EACrD,UACA,GAAG,WACuC;CAC1C,MAAM,EAAE,kBAAkB,MAAM,WAC9B,uCACD;AAED,QACE,oBAAC,MAAD;EAAM,SAAA;YACJ,oBAAC,8CAAD;GAA8C,MAAK;GAAK,GAAI;GAAM,SAAA;aAChE,qBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,KAAK;cAHP,CAKE,oBAAC,mCAAD,EACG,UACiC,CAAA,EACpC,oBAAC,YAAD;KAAY,MAAK;KAAK,IAAI;KAAe,CAAA,CAClC;;GACoC,CAAA;EAC1C,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\nconst StyledIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180'\n  ]\n})\n\ntype NavigationMenuAccordionTriggerProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n  children,\n  ...rest\n}: NavigationMenuAccordionTriggerProps) => {\n  const { setTriggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  return (\n    <Link asChild>\n      <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between gap-3\"\n          ref={setTriggerRef}\n        >\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n          <StyledIcon size=\"sm\" is={ChevronDown} />\n        </button>\n      </StyledNavigationMenuVerticalAccordionTrigger>\n    </Link>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,+CAA+C,OAAO,SAAS;CACnE,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;CACjB,EACF;AACF,CAAC;AAED,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,0CAA0C,EACrD,UACA,GAAG,WACsC;CACzC,MAAM,EAAE,kBAAkB,QAAM,WAC9B,sCACF;CAEA,OACE,oBAAC,MAAD;EAAM,SAAA;YACJ,oBAAC,8CAAD;GAA8C,MAAK;GAAK,GAAI;GAAM,SAAA;aAChE,qBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,KAAK;cAHP,CAKE,oBAAC,mCAAD,EACG,SACgC,CAAA,GACnC,oBAAC,YAAD;KAAY,MAAK;KAAK,IAAI;IAAc,CAAA,CAClC;;EACoC,CAAA;CAC1C,CAAA;AAEV"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalIcon.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst StyledNavigationMenuVerticalIcon = styled(Icon, {\n  base: ['self-start']\n})\n\nexport const NavigationMenuVerticalIcon = (\n  props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>\n): React.JSX.Element => (\n  <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n)\n"],"mappings":";;;;;AAKA,IAAM,mCAAmC,OAAO,MAAM,EACpD,MAAM,CAAC,aAAa,EACrB,CAAC;AAEF,IAAa,8BACX,UAEA,oBAAC,kCAAD;CAAkC,MAAK;CAAK,GAAI;CAAS,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalIcon.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\n\nconst StyledNavigationMenuVerticalIcon = styled(Icon, {\n  base: ['self-start']\n})\n\nexport const NavigationMenuVerticalIcon = (\n  props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>\n) => <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n"],"mappings":";;;;;AAKA,IAAM,mCAAmC,OAAO,MAAM,EACpD,MAAM,CAAC,YAAY,EACrB,CAAC;AAED,IAAa,8BACX,UACG,oBAAC,kCAAD;CAAkC,MAAK;CAAK,GAAI;AAAQ,CAAA"}

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

@@ -1,5 +1,5 @@
 import { Item } from '@radix-ui/react-navigation-menu';
-import React from 'react';
-type TNavigationMenuVerticalItemProps = Omit<React.ComponentProps<typeof Item>, 'value'>;
-export declare const NavigationMenuVerticalItem: (props: TNavigationMenuVerticalItemProps) => React.JSX.Element;
+import * as React from 'react';
+type NavigationMenuVerticalItemProps = Omit<React.ComponentProps<typeof Item>, 'value'>;
+export declare const NavigationMenuVerticalItem: (props: NavigationMenuVerticalItemProps) => React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalItem.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { cn } from '~/styled'\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the `value` prop does nothing, so removing it from typescript\n */\ntype TNavigationMenuVerticalItemProps = Omit<\n  React.ComponentProps<typeof Item>,\n  'value'\n>\n\nexport const NavigationMenuVerticalItem = (\n  props: TNavigationMenuVerticalItemProps\n): React.JSX.Element => (\n  <Item\n    className={cn(\n      '[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]',\n      '[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]',\n      '[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]'\n    )}\n    {...props}\n  />\n)\n"],"mappings":";;;;;AAgBA,IAAa,8BACX,UAEA,oBAAC,MAAD;CACE,WAAW,GACT,+DACA,kEACA,mEACD;CACD,GAAI;CACJ,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalItem.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the `value` prop does nothing, so removing it from typescript\n */\ntype NavigationMenuVerticalItemProps = Omit<\n  React.ComponentProps<typeof Item>,\n  'value'\n>\n\nexport const NavigationMenuVerticalItem = (\n  props: NavigationMenuVerticalItemProps\n) => (\n  <Item\n    className={cn(\n      '[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]',\n      '[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]',\n      '[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]'\n    )}\n    {...props}\n  />\n)\n"],"mappings":";;;;;AAgBA,IAAa,8BACX,UAEA,oBAAC,MAAD;CACE,WAAW,GACT,+DACA,kEACA,kEACF;CACA,GAAI;AACL,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalItemContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype TNavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  className,\n  ...rest\n}: TNavigationMenuVerticalItemContentProps): React.JSX.Element => (\n  <div className={cn('flex', 'gap-2', 'items-center', className)} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return (\n            <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n          )\n        }\n        if (\n          React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n            child\n          ) &&\n          child.type === Icon\n        ) {\n          return <NavigationMenuVerticalIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement<unknown>[]\n    }\n  </div>\n)\n"],"mappings":";;;;;;;AAUA,IAAa,qCAAqC,EAChD,UACA,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,QAAQ,SAAS,gBAAgB,UAAU;CAAE,GAAI;WAEhE,QAAM,SAAS,IAAI,WAAW,UAAU;AACtC,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QACE,oBAAC,4BAAD,EAAA,UAA6B,OAAmC,CAAA;AAGpE,MACE,QAAM,eACJ,MACD,IACD,MAAM,SAAS,KAEf,QAAO,oBAAC,4BAAD,EAA4B,GAAI,MAAM,OAAS,CAAA;AAExD,SAAO;GACP;CAEA,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalItemContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\ntype NavigationMenuVerticalItemContentProps = React.ComponentProps<'div'>\n\nexport const NavigationMenuVerticalItemContent = ({\n  children,\n  className,\n  ...rest\n}: NavigationMenuVerticalItemContentProps) => (\n  <div className={cn('flex', 'gap-2', 'items-center', className)} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return (\n            <NavigationMenuVerticalText>{child}</NavigationMenuVerticalText>\n          )\n        }\n        if (\n          React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n            child\n          ) &&\n          child.type === Icon\n        ) {\n          return <NavigationMenuVerticalIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement<unknown>[]\n    }\n  </div>\n)\n"],"mappings":";;;;;;;AASA,IAAa,qCAAqC,EAChD,UACA,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,QAAQ,SAAS,gBAAgB,SAAS;CAAG,GAAI;WAEhE,QAAM,SAAS,IAAI,WAAW,UAAU;EACtC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OACE,oBAAC,4BAAD,EAAA,UAA6B,MAAkC,CAAA;EAGnE,IACE,QAAM,eACJ,KACF,KACA,MAAM,SAAS,MAEf,OAAO,oBAAC,4BAAD,EAA4B,GAAI,MAAM,MAAQ,CAAA;EAEvD,OAAO;CACT,CAAC;AAEA,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalLink.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalLink = styled(Link, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\ntype NavigationMenuVerticalItemProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalLink\n>\n\nexport const NavigationMenuVerticalLink = ({\n  as,\n  href,\n  children,\n  ...rest\n}: NavigationMenuVerticalItemProps) => {\n  const Component = (as || (href ? 'a' : 'button')) as React.ElementType\n  const componentProps = as\n    ? {}\n    : href\n      ? getExternalAnchorProps(href)\n      : { type: 'button' }\n\n  return (\n    <NavigationMenuVerticalItem>\n      <StyledNavigationMenuVerticalLink\n        size=\"lg\"\n        href={href}\n        {...rest}\n        {...componentProps}\n        onSelect={preventEvent}\n        asChild // ?: Can't use `as` for this as we lose `data-active` etc. attributes when we try to. Using `asChild` and `Component` as a workaround.\n      >\n        <Component>\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n        </Component>\n      </StyledNavigationMenuVerticalLink>\n    </NavigationMenuVerticalItem>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,WAAW;EACjB,EACF;CACF,CAAC;AAMF,IAAa,8BAA8B,EACzC,IACA,MACA,UACA,GAAG,WACkC;CACrC,MAAM,YAAa,OAAO,OAAO,MAAM;CACvC,MAAM,iBAAiB,KACnB,EAAE,GACF,OACE,uBAAuB,KAAK,GAC5B,EAAE,MAAM,UAAU;AAExB,QACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,kCAAD;EACE,MAAK;EACC;EACN,GAAI;EACJ,GAAI;EACJ,UAAU;EACV,SAAA;YAEA,oBAAC,WAAD,EAAA,UACE,oBAAC,mCAAD,EACG,UACiC,CAAA,EAC1B,CAAA;EACqB,CAAA,EACR,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalLink.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\nimport { getExternalAnchorProps } from '../../utilities/uri'\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"],"mappings":";;;;;;;;;;AAUA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;CACjB,EACF;AACF,CAAC;AAMD,IAAa,8BAA8B,EACzC,IACA,MACA,UACA,GAAG,WACkC;CACrC,MAAM,YAAa,OAAO,OAAO,MAAM;CACvC,MAAM,iBAAiB,KACnB,CAAC,IACD,OACE,uBAAuB,IAAI,IAC3B,EAAE,MAAM,SAAS;CAEvB,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,kCAAD;EACE,MAAK;EACC;EACN,GAAI;EACJ,GAAI;EACJ,UAAU;EACV,SAAA;YAEA,oBAAC,WAAD,EAAA,UACE,oBAAC,mCAAD,EACG,SACgC,CAAA,EAC1B,CAAA;CACqB,CAAA,EACR,CAAA;AAEhC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalList.js","names":[],"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"],"mappings":";;AAWA,IAAa,6BAPM,OAAO,MAAM,EAC9B,MAAM,CACJ,qDACA,qBACD,EACF,CAAC"}
+{"version":3,"file":"NavigationMenuVerticalList.js","names":[],"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"],"mappings":";;AAWA,IAAa,6BAPM,OAAO,MAAM,EAC9B,MAAM,CACJ,qDACA,oBACF,EACF,CAE0C"}

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

@@ -1,18 +1,12 @@
-import React from 'react';
-declare const StyledNavigationMenuVerticalText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "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?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
-} & {
-    as?: React.ElementType;
-}, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "isExpanded"> & {
+import * as React from 'react';
+declare const StyledNavigationMenuVerticalText: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>, {
     isExpanded?: boolean | undefined;
-} & {
-    as?: React.ElementType;
 }>;
-type TStyledNavigationMenuVerticalTextProps = React.ComponentProps<typeof StyledNavigationMenuVerticalText>;
-export declare const NavigationMenuVerticalText: (props: TStyledNavigationMenuVerticalTextProps) => React.JSX.Element;
+type StyledNavigationMenuVerticalTextProps = React.ComponentProps<typeof StyledNavigationMenuVerticalText>;
+export declare const NavigationMenuVerticalText: (props: StyledNavigationMenuVerticalTextProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import { useSidebarState } from "../side-bar/SideBarContext.js";
+import { useSidebarState } from "../side-bar/SideBar.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalText.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { useSidebarState } from '../side-bar/SideBarContext'\n\nconst StyledNavigationMenuVerticalText = styled(Text, {\n  base: [\n    'font-(--navigation-menu-vertical-item-font-weight)',\n    'w-max',\n    'max-w-40',\n    'text-left',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[opacity,translate]'\n  ],\n  variants: {\n    isExpanded: {\n      true: ['opacity-100', 'motion-safe:translate-0'],\n      false: ['opacity-0', 'motion-safe:translate-x-2']\n    }\n  }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n  props: TStyledNavigationMenuVerticalTextProps\n): React.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"],"mappings":";;;;;;AAOA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,eAAe,0BAA0B;EAChD,OAAO,CAAC,aAAa,4BAA4B;EAClD,EACF;CACF,CAAC;AAMF,IAAa,8BACX,UACsB;CACtB,MAAM,EAAE,eAAe,iBAAiB;AAExC,QACE,oBAAC,kCAAD;EACE,MAAK;EACL,IAAG;EACH,GAAI;EACQ;EACZ,CAAA"}
+{"version":3,"file":"NavigationMenuVerticalText.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useSidebarState } from '../side-bar/SideBar.context'\nimport { Text } from '../text/Text'\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 StyledNavigationMenuVerticalTextProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n  props: StyledNavigationMenuVerticalTextProps\n) => {\n  const { isExpanded } = useSidebarState()\n\n  return (\n    <StyledNavigationMenuVerticalText\n      size=\"md\"\n      as=\"span\"\n      {...props}\n      isExpanded={isExpanded}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,MAAM,CAAC,eAAe,yBAAyB;EAC/C,OAAO,CAAC,aAAa,2BAA2B;CAClD,EACF;AACF,CAAC;AAMD,IAAa,8BACX,UACG;CACH,MAAM,EAAE,eAAe,gBAAgB;CAEvC,OACE,oBAAC,kCAAD;EACE,MAAK;EACL,IAAG;EACH,GAAI;EACQ;CACb,CAAA;AAEL"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Badge } from '../badge/Badge';
 type BadgeProps = React.ComponentProps<typeof Badge>;
 type NotificationBadgeProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst 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  <div className=\"relative\">\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  </div>\n)\n"],"mappings":";;;;;;AAOA,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAWF,IAAa,qBAAqB,EAChC,OACA,WAAW,QACX,QAAQ,WACR,MACA,eAEA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,CAAC,CAAC,SACD,qBAAC,aAAD;EAAa,MAAK;EAAmB;EAAiB;YAAtD,CACG,QAAQ,oBAAC,MAAD;GAAM,IAAI;GAAM,MAAK;GAAM,eAAY;GAAU,CAAA,EACzD,MACW;KAEf,SACG"}
+{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\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  <div className=\"relative\">\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  </div>\n)\n"],"mappings":";;;;;;AAMA,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAWD,IAAa,qBAAqB,EAChC,OACA,WAAW,QACX,QAAQ,WACR,MACA,eAEA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,CAAC,CAAC,SACD,qBAAC,aAAD;EAAa,MAAK;EAAmB;EAAiB;YAAtD,CACG,QAAQ,oBAAC,MAAD;GAAM,IAAI;GAAM,MAAK;GAAM,eAAY;EAAS,CAAA,GACxD,KACU;KAEd,QACE"}

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

@@ -23,4 +23,6 @@ export interface NumberInputProps {
     };
     className?: string;
 }
-export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const NumberInput: ({ ref, value, defaultValue, onValueChange, min, max, step, disabled: isDisabled, readonly: isReadOnly, size, stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance, theme, emphasis, ...rest }: NumberInputProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import { cn, styled } from "../../styled.js";
-import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import { Input } from "../input/Input.js";
 import { NumberInputStepper } from "./NumberInputStepper.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ var NumberInputContainer = styled("div", {
 		emphasis: { bold: ["gap-0"] }
 	}
 });
-var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }, ref) => {
+var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }) => {
 	const [internalValue, setInternalValue] = React$1.useState(value || defaultValue);
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") setInternalValue(value);
@@ -165,8 +165,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 			})
 		]
 	});
-});
-NumberInput.displayName = "NumberInput";
+};
 //#endregion
 export { NumberInput };
 

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      theme,\n      emphasis,\n      ...rest\n    },\n    ref\n  ): React.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      theme,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: cn(\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={cn(\n            emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          fieldTheme={theme}\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={cn(\n            emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          fieldTheme={theme}\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"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\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  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\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    theme,\n    state: externalState || (hasError ? 'error' : undefined),\n    'aria-invalid': externalAriaInvalid || hasError || undefined,\n    className: cn(\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={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\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={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\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"],"mappings":"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"}

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

@@ -1,26 +1,25 @@
 import * as React from 'react';
 import { ActionIcon } from '../action-icon/ActionIcon';
-declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "size" | "theme" | "isRounded"> & {
-    theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
-    appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
-    size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
-    isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+declare const StyledStepperButton: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+    appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
+    size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
+    isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
+    as?: never;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance" | "fieldTheme"> & {
-    fieldAppearance?: "standard" | "modern" | undefined;
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions) => React.JSX.Element, {
+    fieldAppearance?: "modern" | "standard" | undefined;
     fieldTheme?: "grey" | "white" | undefined;
     emphasis?: "bold" | undefined;
-} & {
-    as?: React.ElementType;
 }>;
 type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'children'> & Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {
     icon: React.FC<React.SVGProps<SVGSVGElement>>;
     showTooltip?: boolean;
     disabledTooltipContent?: string;
 };
-export declare const NumberInputStepper: React.ForwardRefExoticComponent<Omit<NumberInputStepperProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberInputStepper: ({ ref, icon, disabledTooltipContent, showTooltip, fieldAppearance, fieldTheme, ...rest }: NumberInputStepperProps) => React.JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { Tooltip } from "../tooltip/Tooltip.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
-import * as React$1 from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/number-input/NumberInputStepper.tsx
 var StyledStepperButton = styled(ActionIcon, {
@@ -57,8 +57,7 @@ var StyledStepperButton = styled(ActionIcon, {
 		}
 	]
 });
-var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
-	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldTheme, ...rest } = props;
+var NumberInputStepper = ({ ref, icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldTheme, ...rest }) => {
 	/**
 	* Focus has been removed from the button
 	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
@@ -75,13 +74,13 @@ var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
 				appearance: "outline",
 				fieldAppearance,
 				fieldTheme,
-				ref: forwardedRef,
+				ref,
 				...rest,
 				children: /* @__PURE__ */ jsx(Icon, { is: icon })
 			})
 		})
 	}), showTooltip && /* @__PURE__ */ jsx(Tooltip.Content, { children: disabledTooltipContent })] });
-});
+};
 //#endregion
 export { NumberInputStepper };
 

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst 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    fieldTheme: {\n      white: [],\n      grey: []\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: 'modern',\n      fieldTheme: 'white',\n      class: ['bg-white']\n    },\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    fieldTheme,\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        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            fieldTheme={fieldTheme}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"mappings":";;;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,YAAY;GACV,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB;EAChB;GACE,iBAAiB;GACjB,YAAY;GACZ,OAAO,CAAC,WAAW;GACpB;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,YAAY,sBAAsB;GAC3C;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,aAAa,wBAAwB;GAC9C;EACF;CACF,CAAC;AAYF,IAAa,qBAAqB,QAAM,YAGrC,OAAO,iBAAiB;CACzB,MAAM,EACJ,MACA,wBACA,aACA,kBAAkB,YAClB,YACA,GAAG,SACD;;;;;;AAOJ,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,QAAQ,SAAT;EAAiB,SAAA;YACf,oBAAC,QAAD;GAAM,WAAU;GAAM,UAAU;aAC9B,oBAAC,qBAAD;IACE,YAAY;IACZ,UAAU;IACV,YAAW;IACM;IACL;IACZ,KAAK;IACL,GAAI;cAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;IACE,CAAA;GACjB,CAAA;EACS,CAAA,EACjB,eACC,oBAAC,QAAQ,SAAT,EAAA,UAAkB,wBAAyC,CAAA,CAErD,EAAA,CAAA;EAEZ"}
+{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\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    fieldTheme: {\n      white: [],\n      grey: []\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: 'modern',\n      fieldTheme: 'white',\n      class: ['bg-white']\n    },\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 = ({\n  ref,\n  icon,\n  disabledTooltipContent,\n  showTooltip,\n  fieldAppearance = 'standard',\n  fieldTheme,\n  ...rest\n}: NumberInputStepperProps) => {\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        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            fieldTheme={fieldTheme}\n            ref={ref}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,kBAAkB;GACzC,QAAQ;IAAC;IAAe;IAAoB;GAAoB;EAClE;EACA,YAAY;GACV,OAAO,CAAC;GACR,MAAM,CAAC;EACT;EACA,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF,EACF;CACF;CACA,kBAAkB;EAChB;GACE,iBAAiB;GACjB,YAAY;GACZ,OAAO,CAAC,UAAU;EACpB;EACA;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,YAAY,qBAAqB;EAC3C;EACA;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,aAAa,uBAAuB;EAC9C;CACF;AACF,CAAC;AAYD,IAAa,sBAAsB,EACjC,KACA,MACA,wBACA,aACA,kBAAkB,YAClB,YACA,GAAG,WAC0B;;;;;;CAM7B,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,QAAQ,SAAT;EAAiB,SAAA;YACf,oBAAC,QAAD;GAAM,WAAU;GAAM,UAAU;aAC9B,oBAAC,qBAAD;IACE,YAAY;IACZ,UAAU;IACV,YAAW;IACM;IACL;IACP;IACL,GAAI;cAEJ,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;GACE,CAAA;EACjB,CAAA;CACS,CAAA,GAChB,eACC,oBAAC,QAAQ,SAAT,EAAA,UAAkB,uBAAwC,CAAA,CAErD,EAAA,CAAA;AAEb"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form/validation';
+import type { ValidationOptions } from '../form/validation';
 import type { NumberInputProps } from '../number-input/NumberInput';
 export interface NumberInputFieldProps extends NumberInputProps {
     className?: string;
@@ -13,7 +13,7 @@ export interface NumberInputFieldProps extends NumberInputProps {
     };
     validation?: ValidationOptions;
 }
-export declare const NumberInputField: {
-    ({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }: NumberInputFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function NumberInputField({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }: NumberInputFieldProps): React.JSX.Element;
+export declare namespace NumberInputField {
+    var displayName: string;
+}

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

@@ -6,7 +6,7 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/number-input-field/NumberInputField.tsx
-var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }) => {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }) => {
 	const { control } = useFormContext();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
@@ -47,7 +47,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 			value: innerValue,
 			appearance: formAppearance,
 			theme: formTheme,
-			...remainingProps
+			...rest
 		})
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;IAAM;GACxC;GACd,gBAAgB,aAAa;AAC3B,aAAS,SAAS;AAClB,oBAAgB,SAAS;;GAE3B,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,CAAA;EACW,CAAA;;AAInB,iBAAiB,cAAc"}
+{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport type { ValidationOptions } from '../form/validation'\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...rest\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAoBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,WACwB;CAC3B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,QAAM,gBAAgB;EAEpB,IAAI,OAAO,UAAU,aAAa,SAAS,KAAK;CAClD,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;GAAK;GACvC;GACd,gBAAgB,aAAa;IAC3B,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,iBAAiB,cAAc"}

package/dist/components/pagination/{pagination-context/PaginationContext.d.ts → Pagination.context.d.ts}

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { PaginationContextValue, PaginationProviderProps } from '../types';
+import type { PaginationContextValue, PaginationProviderProps } from './types';
 export declare const PaginationContext: React.Context<PaginationContextValue>;
 export declare const PaginationProvider: ({ onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children }: React.PropsWithChildren<PaginationProviderProps>) => React.JSX.Element;

package/dist/components/pagination/{pagination-context/PaginationContext.js → Pagination.context.js}

@@ -1,8 +1,8 @@
-import { VisibleElementsAmount } from "../pagination.constants.js";
-import { findNextAvailablePage, findPreviousAvailablePage, getPaginationElementsToRender } from "../pagination.helper.js";
+import { VisibleElementsAmount } from "./pagination.constants.js";
+import { findNextAvailablePage, findPreviousAvailablePage, getPaginationElementsToRender } from "./pagination.helper.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/pagination/pagination-context/PaginationContext.tsx
+//#region src/components/pagination/Pagination.context.tsx
 var PaginationContext = React$1.createContext({
 	goToPage: () => null,
 	goToPreviousPage: () => null,
@@ -68,4 +68,4 @@ var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsC
 //#endregion
 export { PaginationContext, PaginationProvider };
 
-//# sourceMappingURL=PaginationContext.js.map
+//# sourceMappingURL=Pagination.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.context.js","names":[],"sources":["../../../src/components/pagination/Pagination.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from './pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from './pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from './types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = getPaginationElementsToRender(\n    currentPage,\n    pagesCount,\n    visibleElementsCount\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,CAAC;CAClB,QAAQ,CAAC;CACT,gBAAgB,CAAC;CACjB,eAAe,CAAC;AAClB,CAAC;AAED,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,CAAC,GAClB,gBAAgB,CAAC,GACjB,oBAAoB,MACpB,SAAS,CAAC,GACV,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,CAAC;CAEtE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;EACtB,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GACA,CAAC,oBAAoB,CACvB;CAGA,MAAM,wBAAwB,0BADT,cAAc,GAGjC,aACF;CAEA,MAAM,mBAAmB,QAAM,kBAAkB;EAC/C,IAAI,uBAAuB,SAAS,qBAAqB;CAC3D,GAAG,CAAC,UAAU,qBAAqB,CAAC;CAGpC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,UACF;CACA,MAAM,eAAe,QAAM,kBAAkB;EAC3C,IAAI,mBAAmB,SAAS,iBAAiB;CACnD,GAAG,CAAC,UAAU,iBAAiB,CAAC;CAEhC,MAAM,kBAAkB,8BACtB,aACA,YACA,oBACF;CAEA,MAAM,QAAQ,QAAM,cAAc;EAChC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;CACyB,CAAA;AAEhC"}