@atom-learning/components 6.17.0 → 8.0.0

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,sBAAA,cAAC,MAAD,EAAM,SAAA,MAaC,EAZL,sBAAA,cAAC,8CAAD;EAA8C,MAAK;EAAK,GAAI;EAAM,SAAA;EAWnB,EAV7C,sBAAA,cAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,KAAK;EAME,EAJP,sBAAA,cAAC,mCAAA,MACE,SACiC,EACpC,sBAAA,cAAC,YAAD;EAAY,MAAK;EAAK,IAAI;EAAe,CAAA,CAClC,CACoC,CAC1C"}
+{"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"}

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

@@ -1,6 +1,6 @@
 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;
+declare const StyledNavigationMenuVerticalIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<SVGSVGElement> | null | undefined;
 }, "size"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
 } & {
@@ -8,8 +8,10 @@ declare const StyledNavigationMenuVerticalIcon: React.ForwardRefExoticComponent<
 }, "is" | "as"> & {
     is: React.FC<React.SVGProps<SVGSVGElement>>;
     as?: never;
-}, "ref"> & React.RefAttributes<SVGSVGElement>, never> & {
+}, "ref"> & React.RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<SVGSVGElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
-export declare const NavigationMenuVerticalIcon: (props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>) => JSX.Element;
+export declare const NavigationMenuVerticalIcon: (props: React.ComponentProps<typeof StyledNavigationMenuVerticalIcon>) => React.JSX.Element;
 export {};

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

@@ -1,9 +1,10 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalIcon.tsx
 var StyledNavigationMenuVerticalIcon = styled(Icon, { base: ["self-start"] });
-var NavigationMenuVerticalIcon = (props) => /* @__PURE__ */ React$1.createElement(StyledNavigationMenuVerticalIcon, {
+var NavigationMenuVerticalIcon = (props) => /* @__PURE__ */ jsx(StyledNavigationMenuVerticalIcon, {
 	size: "md",
 	...props
 });

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): JSX.Element => <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n"],"mappings":";;;;AAKA,IAAM,mCAAmC,OAAO,MAAM,EACpD,MAAM,CAAC,aAAa,EACrB,CAAC;AAEF,IAAa,8BACX,UACgB,wBAAA,cAAC,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 { 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 => <StyledNavigationMenuVerticalIcon size=\"md\" {...props} />\n"],"mappings":";;;;;AAKA,IAAM,mCAAmC,OAAO,MAAM,EACpD,MAAM,CAAC,aAAa,EACrB,CAAC;AAEF,IAAa,8BACX,UACsB,oBAAC,kCAAD;CAAkC,MAAK;CAAK,GAAI;CAAS,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) => JSX.Element;
+export declare const NavigationMenuVerticalItem: (props: TNavigationMenuVerticalItemProps) => React.JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
 import { cn } from "../../styled.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Item } from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalItem.tsx
-var NavigationMenuVerticalItem = (props) => /* @__PURE__ */ React.createElement(Item, {
+var NavigationMenuVerticalItem = (props) => /* @__PURE__ */ jsx(Item, {
 	className: cn("[ul_li_&]:[--navigation-menu-vertical-item-pl:--spacing(8)]", "[ul_li_&_&]:[--navigation-menu-vertical-item-pl:--spacing(12)]", "[ul_li_&_&_&]:[--navigation-menu-vertical-item-pl:--spacing(16)]"),
 	...props
 });

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): 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,sBAAA,cAAC,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 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"}

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) => JSX.Element;
+export declare const NavigationMenuVerticalItemContent: ({ children, className, ...rest }: TNavigationMenuVerticalItemContentProps) => React.JSX.Element;
 export {};

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

@@ -3,15 +3,17 @@ import { Icon } from "../icon/Icon.js";
 import { NavigationMenuVerticalIcon } from "./NavigationMenuVerticalIcon.js";
 import { NavigationMenuVerticalText } from "./NavigationMenuVerticalText.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.tsx
-var NavigationMenuVerticalItemContent = ({ children, className, ...rest }) => /* @__PURE__ */ React$1.createElement("div", {
+var NavigationMenuVerticalItemContent = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex", "gap-2", "items-center", className),
-	...rest
-}, React$1.Children.map(children, (child) => {
-	if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ React$1.createElement(NavigationMenuVerticalText, null, child);
-	if (React$1.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ React$1.createElement(NavigationMenuVerticalIcon, child.props);
-	return child;
-}));
+	...rest,
+	children: React$1.Children.map(children, (child) => {
+		if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx(NavigationMenuVerticalText, { children: child });
+		if (React$1.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ jsx(NavigationMenuVerticalIcon, { ...child.props });
+		return child;
+	})
+});
 //#endregion
 export { NavigationMenuVerticalItemContent };
 

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): 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 (React.isValidElement(child) && child.type === Icon) {\n          return <NavigationMenuVerticalIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement[]\n    }\n  </div>\n)\n"],"mappings":";;;;;;AAUA,IAAa,qCAAqC,EAChD,UACA,WACA,GAAG,WAEH,wBAAA,cAAC,OAAD;CAAK,WAAW,GAAG,QAAQ,SAAS,gBAAgB,UAAU;CAAE,GAAI;CAc9D,EAZF,QAAM,SAAS,IAAI,WAAW,UAAU;AACtC,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QACE,wBAAA,cAAC,4BAAA,MAA4B,MAAmC;AAGpE,KAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,4BAA+B,MAAM,MAAS;AAExD,QAAO;EACP,CAEA"}
+{"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[]\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"}

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

@@ -1,5 +1,7 @@
 import React from 'react';
-declare const StyledNavigationMenuVerticalLink: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "size"> & {
+declare const StyledNavigationMenuVerticalLink: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLAnchorElement> | null | undefined;
+}, "size"> & {
     size?: "md" | "lg" | undefined;
 } & {
     as?: React.ElementType;

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

@@ -4,7 +4,8 @@ import { preventEvent } from "../../utilities/event/preventEvent.js";
 import { NavigationMenuVerticalItem } from "./NavigationMenuVerticalItem.js";
 import { navigationMenuVerticalItemStyles } from "./NavigationMenuVertical.styles.js";
 import { NavigationMenuVerticalItemContent } from "./NavigationMenuVerticalItemContent.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Link } from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx
 var StyledNavigationMenuVerticalLink = styled(Link, {
@@ -17,14 +18,15 @@ var StyledNavigationMenuVerticalLink = styled(Link, {
 var NavigationMenuVerticalLink = ({ as, href, children, ...rest }) => {
 	const Component = as || (href ? "a" : "button");
 	const componentProps = as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
-	return /* @__PURE__ */ React.createElement(NavigationMenuVerticalItem, null, /* @__PURE__ */ React.createElement(StyledNavigationMenuVerticalLink, {
+	return /* @__PURE__ */ jsx(NavigationMenuVerticalItem, { children: /* @__PURE__ */ jsx(StyledNavigationMenuVerticalLink, {
 		size: "lg",
 		href,
 		...rest,
 		...componentProps,
 		onSelect: preventEvent,
-		asChild: true
-	}, /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(NavigationMenuVerticalItemContent, null, children))));
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(NavigationMenuVerticalItemContent, { children }) })
+	}) });
 };
 //#endregion
 export { NavigationMenuVerticalLink };

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,sBAAA,cAAC,4BAAA,MACC,sBAAA,cAAC,kCAAD;EACE,MAAK;EACC;EACN,GAAI;EACJ,GAAI;EACJ,UAAU;EACV,SAAA;EAOiC,EALjC,sBAAA,cAAC,WAAA,MACC,sBAAA,cAAC,mCAAA,MACE,SACiC,CAC1B,CACqB,CACR"}
+{"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"}

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

@@ -1,3 +1,5 @@
-export declare const NavigationMenuVerticalList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, never> & {
+export declare const NavigationMenuVerticalList: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
+}, never> & {
     as?: import("react").ElementType;
 }>;

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

@@ -1,6 +1,6 @@
 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;
+declare const StyledNavigationMenuVerticalText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | 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;
@@ -10,11 +10,13 @@ declare const StyledNavigationMenuVerticalText: React.ForwardRefExoticComponent<
     as?: React.ElementType;
 }, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "isExpanded"> & {
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+}, "isExpanded"> & {
     isExpanded?: boolean | undefined;
 } & {
     as?: React.ElementType;
 }>;
 type TStyledNavigationMenuVerticalTextProps = React.ComponentProps<typeof StyledNavigationMenuVerticalText>;
-export declare const NavigationMenuVerticalText: (props: TStyledNavigationMenuVerticalTextProps) => JSX.Element;
+export declare const NavigationMenuVerticalText: (props: TStyledNavigationMenuVerticalTextProps) => React.JSX.Element;
 export {};

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

@@ -1,7 +1,8 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { useSidebarState } from "../side-bar/SideBarContext.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx
 var StyledNavigationMenuVerticalText = styled(Text, {
 	base: [
@@ -20,7 +21,7 @@ var StyledNavigationMenuVerticalText = styled(Text, {
 });
 var NavigationMenuVerticalText = (props) => {
 	const { isExpanded } = useSidebarState();
-	return /* @__PURE__ */ React.createElement(StyledNavigationMenuVerticalText, {
+	return /* @__PURE__ */ jsx(StyledNavigationMenuVerticalText, {
 		size: "md",
 		as: "span",
 		...props,

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): 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,UACgB;CAChB,MAAM,EAAE,eAAe,iBAAiB;AAExC,QACE,sBAAA,cAAC,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 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"}

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

@@ -1,7 +1,8 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { Badge } from "../badge/Badge.js";
-import React from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/notification-badge/NotificationBadge.tsx
 var StyledBadge = styled(Badge, { base: [
 	"font-body",
@@ -18,15 +19,19 @@ var StyledBadge = styled(Badge, { base: [
 	"min-w-6",
 	"text-center"
 ] });
-var NotificationBadge = ({ value, emphasis = "bold", theme = "primary", icon, children }) => /* @__PURE__ */ React.createElement("div", { className: "relative" }, !!value && /* @__PURE__ */ React.createElement(StyledBadge, {
-	role: "status",
-	emphasis,
-	theme
-}, icon && /* @__PURE__ */ React.createElement(Icon, {
-	is: icon,
-	role: "img",
-	"aria-hidden": "false"
-}), value), children);
+var NotificationBadge = ({ value, emphasis = "bold", theme = "primary", icon, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "relative",
+	children: [!!value && /* @__PURE__ */ jsxs(StyledBadge, {
+		role: "status",
+		emphasis,
+		theme,
+		children: [icon && /* @__PURE__ */ jsx(Icon, {
+			is: icon,
+			role: "img",
+			"aria-hidden": "false"
+		}), value]
+	}), children]
+});
 //#endregion
 export { NotificationBadge };
 

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,sBAAA,cAAC,OAAD,EAAK,WAAU,YAQT,EAPH,CAAC,CAAC,SACD,sBAAA,cAAC,aAAD;CAAa,MAAK;CAAmB;CAAiB;CAGxC,EAFX,QAAQ,sBAAA,cAAC,MAAD;CAAM,IAAI;CAAM,MAAK;CAAM,eAAY;CAAU,CAAA,EACzD,MACW,EAEf,SACG"}
+{"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"}

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

@@ -3,6 +3,7 @@ import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { NumberInputStepper } from "./NumberInputStepper.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Minus, Plus } from "@atom-learning/icons";
 //#region src/components/number-input/NumberInput.tsx
 var NumberInputContainer = styled("div", {
@@ -130,35 +131,40 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		"aria-valuenow": internalValue,
 		role: "spinbutton"
 	};
-	return /* @__PURE__ */ React$1.createElement(NumberInputContainer, {
+	return /* @__PURE__ */ jsxs(NumberInputContainer, {
 		appearance,
 		emphasis,
-		className
-	}, /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
-		onClick: decrement,
-		icon: Minus,
-		className: cn(emphasis !== "bold" && ["border-r-none", "rounded-r-none"]),
-		size: iconSize,
-		fieldAppearance: appearance,
-		fieldTheme: theme,
-		emphasis,
-		disabled: isAtMin || isDisabled,
-		showTooltip: isAtMin && !isDisabled,
-		disabledTooltipContent: disabledTooltipContent.decrement,
-		label: stepperButtonLabels.decrement
-	}), /* @__PURE__ */ React$1.createElement(Input, inputProps), /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
-		onClick: increment,
-		icon: Plus,
-		className: cn(emphasis !== "bold" && ["border-l-none", "rounded-l-none"]),
-		size: iconSize,
-		fieldAppearance: appearance,
-		fieldTheme: theme,
-		emphasis,
-		disabled: isAtMax || isDisabled,
-		showTooltip: isAtMax && !isDisabled,
-		disabledTooltipContent: disabledTooltipContent.increment,
-		label: stepperButtonLabels.increment
-	}));
+		className,
+		children: [
+			/* @__PURE__ */ jsx(NumberInputStepper, {
+				onClick: decrement,
+				icon: Minus,
+				className: cn(emphasis !== "bold" && ["border-r-none", "rounded-r-none"]),
+				size: iconSize,
+				fieldAppearance: appearance,
+				fieldTheme: theme,
+				emphasis,
+				disabled: isAtMin || isDisabled,
+				showTooltip: isAtMin && !isDisabled,
+				disabledTooltipContent: disabledTooltipContent.decrement,
+				label: stepperButtonLabels.decrement
+			}),
+			/* @__PURE__ */ jsx(Input, { ...inputProps }),
+			/* @__PURE__ */ jsx(NumberInputStepper, {
+				onClick: increment,
+				icon: Plus,
+				className: cn(emphasis !== "bold" && ["border-l-none", "rounded-l-none"]),
+				size: iconSize,
+				fieldAppearance: appearance,
+				fieldTheme: theme,
+				emphasis,
+				disabled: isAtMax || isDisabled,
+				showTooltip: isAtMax && !isDisabled,
+				disabledTooltipContent: disabledTooltipContent.increment,
+				label: stepperButtonLabels.increment
+			})
+		]
+	});
 });
 NumberInput.displayName = "NumberInput";
 //#endregion

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  ): 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 } 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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"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ActionIcon } from '../action-icon/ActionIcon';
-declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "theme" | "isRounded"> & {
     theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
@@ -12,7 +12,9 @@ declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
 }, "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"> & {
+} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "emphasis" | "fieldAppearance" | "fieldTheme"> & {
     fieldAppearance?: "standard" | "modern" | undefined;
     fieldTheme?: "grey" | "white" | undefined;
     emphasis?: "bold" | undefined;

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

@@ -3,6 +3,7 @@ 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 { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/number-input/NumberInputStepper.tsx
 var StyledStepperButton = styled(ActionIcon, {
 	base: [
@@ -63,18 +64,23 @@ var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
 	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
 	* see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role
 	*/
-	return /* @__PURE__ */ React$1.createElement(Tooltip, null, /* @__PURE__ */ React$1.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React$1.createElement("span", {
-		className: "z-1",
-		tabIndex: -1
-	}, /* @__PURE__ */ React$1.createElement(StyledStepperButton, {
-		hasTooltip: false,
-		tabIndex: -1,
-		appearance: "outline",
-		fieldAppearance,
-		fieldTheme,
-		ref: forwardedRef,
-		...rest
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: icon })))), showTooltip && /* @__PURE__ */ React$1.createElement(Tooltip.Content, null, disabledTooltipContent));
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "z-1",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx(StyledStepperButton, {
+				hasTooltip: false,
+				tabIndex: -1,
+				appearance: "outline",
+				fieldAppearance,
+				fieldTheme,
+				ref: forwardedRef,
+				...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,wBAAA,cAAC,SAAA,MACC,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAcC,EAbhB,wBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAYzB,EAXL,wBAAA,cAAC,qBAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACL;EACZ,KAAK;EACL,GAAI;EAGgB,EADpB,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACE,CACjB,CACS,EACjB,eACC,wBAAA,cAAC,QAAQ,SAAA,MAAS,uBAAyC,CAErD;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'\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"}