@atom-learning/components 6.16.0-beta.4 → 6.16.1-beta.0

package/dist/components/navigation/NavigationMenuLink.js

@@ -1,6 +1,5 @@
 import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
-import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import { navigationMenuBaseItemStyles } from "./NavigationMenu.styles.js";
 import React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
@@ -47,27 +46,17 @@ var StyledLink = styled(NavigationMenuPrimitive.Link, {
 		]
 	} }
 });
-var NavigationMenuLink = React.forwardRef(({ children, href, disabled, className, variant = "link", ref: _ref, reloadDocument, ...props }, forwardedRef) => {
-	const RouterLink = useRouterLinkProps(href, { reloadDocument }).as;
-	return /* @__PURE__ */ React.createElement(ListItem, null, disabled ? /* @__PURE__ */ React.createElement(DisabledButton, {
-		disabled: true,
-		className
-	}, children) : RouterLink ? /* @__PURE__ */ React.createElement(StyledLink, {
-		href,
-		ref: forwardedRef,
-		elementType: variant,
-		className,
-		asChild: true,
-		...props
-	}, /* @__PURE__ */ React.createElement(RouterLink, { href }, children)) : /* @__PURE__ */ React.createElement(StyledLink, {
-		href,
-		ref: forwardedRef,
-		elementType: variant,
-		className,
-		...getExternalAnchorProps(href),
-		...props
-	}, children));
-});
+var NavigationMenuLink = React.forwardRef(({ children, href, disabled, className, variant = "link", ref: _ref, ...props }, forwardedRef) => /* @__PURE__ */ React.createElement(ListItem, null, disabled ? /* @__PURE__ */ React.createElement(DisabledButton, {
+	disabled: true,
+	className
+}, children) : /* @__PURE__ */ React.createElement(StyledLink, {
+	href,
+	ref: forwardedRef,
+	elementType: variant,
+	className,
+	...getExternalAnchorProps(href),
+	...props
+}, children)));
 NavigationMenuLink.displayName = "NavigationMenuLink";
 //#endregion
 export { NavigationMenuLink };

package/dist/components/navigation/NavigationMenuLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { navigationMenuBaseItemStyles } from './NavigationMenu.styles'\n\nconst DisabledButton = styled('button', {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'disabled:bg-none',\n    'disabled:cursor-default',\n    'disabled:opacity-30',\n    'disabled:text-text'\n  ]\n})\n\nconst ListItem = NavigationMenuPrimitive.Item\n\nconst StyledLink = styled(NavigationMenuPrimitive.Link, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'block',\n    'no-underline',\n    'leading-none'\n  ],\n  variants: {\n    elementType: {\n      dropdownItem: [\n        'data-active:bg-background-selected',\n        'data-active:text-text-selected',\n        'data-active:hover:bg-background-selected-hover',\n        'data-active:hover:text-text-selected-hover',\n        'data-active:active:bg-background-selected-pressed',\n        'data-active:active:text-text-selected-pressed',\n        'data-active:focus-visible:shadow-[0_0_0_2px_var(--color-primary-800)]',\n        'data-active:focus-visible:text-text-selected-focus'\n      ],\n      link: [\n        'data-active:font-semibold',\n        'data-active:text-item-(--background-selected)',\n        'data-active:after:-translate-x-1/2',\n        'data-active:after:absolute',\n        'data-active:after:bg-item-(--background-selected)',\n        'data-active:after:block',\n        'data-active:after:bottom-0',\n        'data-active:after:h-0.5',\n        'data-active:after:left-1/2',\n        'data-active:after:rounded-md',\n        'data-active:after:translate-y-0',\n        'data-active:after:w-6'\n      ]\n    }\n  }\n})\n\nexport const NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n    disabled?: boolean\n    variant?: React.ComponentProps<typeof StyledLink>['elementType']\n    reloadDocument?: boolean\n  }\n>(\n  (\n    {\n      children,\n      href,\n      disabled,\n      className,\n      variant = 'link',\n      ref: _ref,\n      reloadDocument,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n    const RouterLink = routerLinkProps.as\n\n    return (\n      <ListItem>\n        {disabled ? (\n          <DisabledButton disabled className={className}>\n            {children}\n          </DisabledButton>\n        ) : RouterLink ? (\n          <StyledLink\n            href={href}\n            ref={forwardedRef as any}\n            elementType={variant}\n            className={className}\n            asChild\n            {...props}\n          >\n            <RouterLink href={href}>{children}</RouterLink>\n          </StyledLink>\n        ) : (\n          <StyledLink\n            href={href}\n            ref={forwardedRef as any}\n            elementType={variant}\n            className={className}\n            {...getExternalAnchorProps(href)}\n            {...props}\n          >\n            {children}\n          </StyledLink>\n        )}\n      </ListItem>\n    )\n  }\n)\n\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n"],"mappings":";;;;;;;AASA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACD;CACD,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,CAAC;AAEF,IAAa,qBAAqB,MAAM,YASpC,EACE,UACA,MACA,UACA,WACA,UAAU,QACV,KAAK,MACL,gBACA,GAAG,SAEL,iBACG;CAEH,MAAM,aADkB,mBAAmB,MAAM,EAAE,gBAAgB,CAAC,CACjC;AAEnC,QACE,sBAAA,cAAC,UAAA,MACE,WACC,sBAAA,cAAC,gBAAD;EAAgB,UAAA;EAAoB;EAEnB,EADd,SACc,GACf,aACF,sBAAA,cAAC,YAAD;EACQ;EACN,KAAK;EACL,aAAa;EACF;EACX,SAAA;EACA,GAAI;EAGO,EADX,sBAAA,cAAC,YAAD,EAAkB,MAA6B,EAAtB,SAAsB,CACpC,GAEb,sBAAA,cAAC,YAAD;EACQ;EACN,KAAK;EACL,aAAa;EACF;EACX,GAAI,uBAAuB,KAAK;EAChC,GAAI;EAGO,EADV,SACU,CAEN;EAGhB;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuBaseItemStyles } from './NavigationMenu.styles'\n\nconst DisabledButton = styled('button', {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'disabled:bg-none',\n    'disabled:cursor-default',\n    'disabled:opacity-30',\n    'disabled:text-text'\n  ]\n})\n\nconst ListItem = NavigationMenuPrimitive.Item\n\nconst StyledLink = styled(NavigationMenuPrimitive.Link, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'block',\n    'no-underline',\n    'leading-none'\n  ],\n  variants: {\n    elementType: {\n      dropdownItem: [\n        'data-active:bg-background-selected',\n        'data-active:text-text-selected',\n        'data-active:hover:bg-background-selected-hover',\n        'data-active:hover:text-text-selected-hover',\n        'data-active:active:bg-background-selected-pressed',\n        'data-active:active:text-text-selected-pressed',\n        'data-active:focus-visible:shadow-[0_0_0_2px_var(--color-primary-800)]',\n        'data-active:focus-visible:text-text-selected-focus'\n      ],\n      link: [\n        'data-active:font-semibold',\n        'data-active:text-item-(--background-selected)',\n        'data-active:after:-translate-x-1/2',\n        'data-active:after:absolute',\n        'data-active:after:bg-item-(--background-selected)',\n        'data-active:after:block',\n        'data-active:after:bottom-0',\n        'data-active:after:h-0.5',\n        'data-active:after:left-1/2',\n        'data-active:after:rounded-md',\n        'data-active:after:translate-y-0',\n        'data-active:after:w-6'\n      ]\n    }\n  }\n})\n\nexport const NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n    disabled?: boolean\n    variant?: React.ComponentProps<typeof StyledLink>['elementType']\n  }\n>(\n  (\n    {\n      children,\n      href,\n      disabled,\n      className,\n      variant = 'link',\n      ref: _ref,\n      ...props\n    },\n    forwardedRef\n  ) => (\n    <ListItem>\n      {disabled ? (\n        <DisabledButton disabled className={className}>\n          {children}\n        </DisabledButton>\n      ) : (\n        <StyledLink\n          href={href}\n          ref={forwardedRef as any}\n          elementType={variant}\n          className={className}\n          {...getExternalAnchorProps(href)}\n          {...props}\n        >\n          {children}\n        </StyledLink>\n      )}\n    </ListItem>\n  )\n)\n\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n"],"mappings":";;;;;;AAQA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACD;CACD,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,CAAC;AAEF,IAAa,qBAAqB,MAAM,YAQpC,EACE,UACA,MACA,UACA,WACA,UAAU,QACV,KAAK,MACL,GAAG,SAEL,iBAEA,sBAAA,cAAC,UAAA,MACE,WACC,sBAAA,cAAC,gBAAD;CAAgB,UAAA;CAAoB;CAEnB,EADd,SACc,GAEjB,sBAAA,cAAC,YAAD;CACQ;CACN,KAAK;CACL,aAAa;CACF;CACX,GAAI,uBAAuB,KAAK;CAChC,GAAI;CAGO,EADV,SACU,CAEN,CAEd;AAED,mBAAmB,cAAc"}

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

@@ -4,12 +4,10 @@ declare const StyledRoot: React.ForwardRefExoticComponent<Omit<import("@radix-ui
 }>;
 type TNavigationVerticalProps = Omit<React.ComponentProps<typeof StyledRoot>, 'delayDuration' | 'skipDelayDuration' | 'defaultValue' | 'value' | 'onValueChange'>;
 export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigationVerticalProps) => React.JSX.Element) & {
-    Link: ({ as, href, children, reloadDocument, ...rest }: Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "size"> & {
+    Link: ({ as, href, children, ...rest }: Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "size"> & {
         size?: "md" | "lg" | undefined;
     } & {
         as?: React.ElementType;
-    } & {
-        reloadDocument?: boolean;
     }) => React.JSX.Element;
     Accordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
         content?: string | undefined | undefined;

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

@@ -4,8 +4,6 @@ declare const StyledNavigationMenuVerticalLink: React.ForwardRefExoticComponent<
 } & {
     as?: React.ElementType;
 }>;
-type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink> & {
-    reloadDocument?: boolean;
-};
-export declare const NavigationMenuVerticalLink: ({ as, href, children, reloadDocument, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
+type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink>;
+export declare const NavigationMenuVerticalLink: ({ as, href, children, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
 import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
-import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import { preventEvent } from "../../utilities/event/preventEvent.js";
 import { NavigationMenuVerticalItem } from "./NavigationMenuVerticalItem.js";
 import { navigationMenuVerticalItemStyles } from "./NavigationMenuVertical.styles.js";
@@ -15,10 +14,9 @@ var StyledNavigationMenuVerticalLink = styled(Link, {
 		lg: ["min-h-12"]
 	} }
 });
-var NavigationMenuVerticalLink = ({ as, href, children, reloadDocument, ...rest }) => {
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
-	const Component = as || routerLinkProps.as || (href ? "a" : "button");
-	const componentProps = as || routerLinkProps.as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
+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, {
 		size: "lg",
 		href,

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 { useRouterLinkProps } from '../router-provider/RouterProvider'\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> & { reloadDocument?: boolean }\n\nexport const NavigationMenuVerticalLink = ({\n  as,\n  href,\n  children,\n  reloadDocument,\n  ...rest\n}: NavigationMenuVerticalItemProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n  const Component = (as ||\n    routerLinkProps.as ||\n    (href ? 'a' : 'button')) as React.ElementType\n  const componentProps =\n    as || routerLinkProps.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":";;;;;;;;;;AAYA,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,gBACA,GAAG,WACkC;CACrC,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,gBAAgB,CAAC;CACpE,MAAM,YAAa,MACjB,gBAAgB,OACf,OAAO,MAAM;CAChB,MAAM,iBACJ,MAAM,gBAAgB,KAClB,EAAE,GACF,OACE,uBAAuB,KAAK,GAC5B,EAAE,MAAM,UAAU;AAE1B,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,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"}

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

@@ -137,7 +137,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 	}, /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
 		onClick: decrement,
 		icon: Minus,
-		className: cn(emphasis !== "bold" && "border-r-none rounded-r-none"),
+		className: cn(emphasis !== "bold" && ["border-r-none", "rounded-r-none"]),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,
@@ -149,7 +149,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 	}), /* @__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"),
+		className: cn(emphasis !== "bold" && ["border-l-none", "rounded-l-none"]),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,

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(emphasis !== 'bold' && 'border-r-none rounded-r-none')}\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(emphasis !== 'bold' && 'border-l-none rounded-l-none')}\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  ): 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

@@ -9,10 +9,9 @@ declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | "reloadDocument" | keyof import("../..").NavigatorActions> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-    reloadDocument?: boolean;
 } & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance" | "fieldTheme"> & {
     fieldAppearance?: "standard" | "modern" | undefined;
     fieldTheme?: "grey" | "white" | undefined;

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

@@ -8,10 +8,9 @@ declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<O
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | "reloadDocument" | keyof import("../..").NavigatorActions> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-    reloadDocument?: boolean;
 } & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
     as?: React.ElementType;
 }>;

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

@@ -8,10 +8,9 @@ declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<O
     isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | "reloadDocument" | keyof import("../..").NavigatorActions> & {
+}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-    reloadDocument?: boolean;
 } & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
     as?: React.ElementType;
 }>;

package/dist/components/password-field/PasswordField.js

@@ -22,7 +22,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		prompt,
 		required: Boolean(validation?.required),
 		appearance: formAppearance,
-		className: cn(className, "relative")
+		className: cn("relative", className)
 	}, /* @__PURE__ */ React$1.createElement(PasswordInput, {
 		autoComplete: "current-password",
 		name,

package/dist/components/password-field/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\nimport { cn } from '~/styled'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  theme,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\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      className={cn(className, 'relative')}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,GAAG,WAAW,WAAW;EAYvB,EAVb,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,OAAO;EACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}
+{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\nimport { cn } from '~/styled'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  theme,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\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      className={cn('relative', className)}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,GAAG,YAAY,UAAU;EAYvB,EAVb,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,OAAO;EACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}

package/dist/components/segmented-control/SegmentedControlBadge.js

@@ -13,7 +13,7 @@ var SegmentedControlBadge = ({ className, ...props }) => {
 	return /* @__PURE__ */ React$1.createElement(Badge, {
 		...props,
 		size: badgeSizeMap[size],
-		className: cn("border-none", className, "font-normal")
+		className: cn("border-none", "font-normal", className)
 	});
 };
 //#endregion

package/dist/components/segmented-control/SegmentedControlBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', className, 'font-normal')}\n    />\n  )\n}\n"],"mappings":";;;;;AAOA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,YACgE;CACnE,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QACE,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,WAAW,cAAc;EACtD,CAAA"}
+{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;AAOA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,YACgE;CACnE,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QACE,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,UAAU;EACtD,CAAA"}

package/dist/components/select-menu/SelectMenu.d.ts

@@ -0,0 +1,23 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+type SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {
+    size?: 'sm' | 'md' | 'lg';
+    theme?: 'white' | 'grey';
+    state?: 'error';
+};
+export declare const SelectMenu: (({ size, theme, state, children, ...props }: SelectMenuProps) => React.JSX.Element) & {
+    Trigger: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectTriggerProps & React.RefAttributes<HTMLButtonElement> & {
+        placeholder?: string;
+    }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Label: {
+        ({ className, ...props }: RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Separator: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, never> & {
+        as?: React.ElementType;
+    }>;
+};
+export {};

package/dist/components/select-menu/SelectMenu.js

@@ -0,0 +1,26 @@
+import { SelectMenuContent } from "./SelectMenuContent.js";
+import { SelectMenuContext } from "./SelectMenuContext.js";
+import { SelectMenuItem } from "./SelectMenuItem.js";
+import { SelectMenuLabel } from "./SelectMenuLabel.js";
+import { SelectMenuSeparator } from "./SelectMenuSeparator.js";
+import { SelectMenuTrigger } from "./SelectMenuTrigger.js";
+import * as React$1 from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenu.tsx
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...props }) => /* @__PURE__ */ React$1.createElement(SelectMenuContext.Provider, { value: {
+	size,
+	theme,
+	state
+} }, /* @__PURE__ */ React$1.createElement(RadixSelect.Root, props, children));
+var SelectMenu = Object.assign(SelectMenuRoot, {
+	Trigger: SelectMenuTrigger,
+	Content: SelectMenuContent,
+	Item: SelectMenuItem,
+	Group: RadixSelect.Group,
+	Label: SelectMenuLabel,
+	Separator: SelectMenuSeparator
+});
+//#endregion
+export { SelectMenu };
+
+//# sourceMappingURL=SelectMenu.js.map

package/dist/components/select-menu/SelectMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuContext } from './SelectMenuContext'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...props\n}: SelectMenuProps) => (\n  <SelectMenuContext.Provider value={{ size, theme, state }}>\n    <RadixSelect.Root {...props}>{children}</RadixSelect.Root>\n  </SelectMenuContext.Provider>\n)\n\nexport const SelectMenu = Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,YAEH,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO;CAAE;CAAM;CAAO;CAAO,EAE5B,EAD3B,wBAAA,cAAC,YAAY,MAAS,OAAQ,SAA4B,CAC/B;AAG/B,IAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;CACZ,CAAC"}

package/dist/components/select-menu/SelectMenuContent.d.ts

@@ -0,0 +1,3 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+export declare const SelectMenuContent: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/select-menu/SelectMenuContent.js

@@ -0,0 +1,66 @@
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import * as React$1 from "react";
+import { ChevronDown, ChevronUp } from "@atom-learning/icons";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuContent.tsx
+var Content = styled(RadixSelect.Content, {
+	base: [
+		"bg-white",
+		"rounded-md",
+		"shadow-lg",
+		"z-10",
+		"overflow-hidden",
+		"will-change-transform",
+		"will-change-opacity",
+		"[--slide-opacity-out:0]",
+		"data-[side=top]:[--slide-direction-out-y:-4px]",
+		"data-[side=right]:[--slide-direction-out-x:4px]",
+		"data-[side=bottom]:[--slide-direction-out-y:4px]",
+		"data-[side=left]:[--slide-direction-out-x:-4px]",
+		"motion-safe:data-[state=open]:animate-slide-direction-in",
+		"motion-safe:data-[state=closed]:animate-slide-direction-out"
+	],
+	variants: { position: {
+		popper: ["max-h-(--radix-select-content-available-height)", "min-w-(--radix-select-trigger-width)"],
+		"item-aligned": []
+	} }
+});
+var Viewport = styled(RadixSelect.Viewport, {
+	base: ["p-1", "w-full"],
+	variants: { position: {
+		popper: ["h-(--radix-select-content-available-height)"],
+		"item-aligned": []
+	} }
+});
+var ScrollUpButton = styled(RadixSelect.ScrollUpButton, { base: [
+	"flex",
+	"items-center",
+	"justify-center",
+	"h-6",
+	"cursor-default"
+] });
+var ScrollDownButton = styled(RadixSelect.ScrollDownButton, { base: [
+	"flex",
+	"items-center",
+	"justify-center",
+	"h-6",
+	"cursor-default"
+] });
+var SelectMenuContent = React$1.forwardRef(({ children, position = "popper", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React$1.createElement(RadixSelect.Portal, null, /* @__PURE__ */ React$1.createElement(Content, {
+	ref,
+	position,
+	sideOffset,
+	...props
+}, /* @__PURE__ */ React$1.createElement(ScrollUpButton, null, /* @__PURE__ */ React$1.createElement(Icon, {
+	is: ChevronUp,
+	className: "text-grey-700 size-4"
+})), /* @__PURE__ */ React$1.createElement(Viewport, { position }, children), /* @__PURE__ */ React$1.createElement(ScrollDownButton, null, /* @__PURE__ */ React$1.createElement(Icon, {
+	is: ChevronDown,
+	className: "text-grey-700 size-4"
+})))));
+SelectMenuContent.displayName = "SelectMenuContent";
+//#endregion
+export { SelectMenuContent };
+
+//# sourceMappingURL=SelectMenuContent.js.map

package/dist/components/select-menu/SelectMenuContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst Content = styled(RadixSelect.Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'z-10',\n    'overflow-hidden',\n    'will-change-transform',\n    'will-change-opacity',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      popper: [\n        'max-h-(--radix-select-content-available-height)',\n        'min-w-(--radix-select-trigger-width)'\n      ],\n      'item-aligned': []\n    }\n  }\n})\n\nconst Viewport = styled(RadixSelect.Viewport, {\n  base: ['p-1', 'w-full'],\n  variants: {\n    position: {\n      popper: ['h-(--radix-select-content-available-height)'],\n      'item-aligned': []\n    }\n  }\n})\n\nconst ScrollUpButton = styled(RadixSelect.ScrollUpButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\nconst ScrollDownButton = styled(RadixSelect.ScrollDownButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\ntype SelectMenuContentProps = React.ComponentPropsWithRef<\n  typeof RadixSelect.Content\n>\n\nexport const SelectMenuContent = React.forwardRef<\n  HTMLDivElement,\n  SelectMenuContentProps\n>(({ children, position = 'popper', sideOffset = 4, ...props }, ref) => (\n  <RadixSelect.Portal>\n    <Content ref={ref} position={position} sideOffset={sideOffset} {...props}>\n      <ScrollUpButton>\n        <Icon is={ChevronUp} className=\"text-grey-700 size-4\" />\n      </ScrollUpButton>\n      <Viewport position={position}>{children}</Viewport>\n      <ScrollDownButton>\n        <Icon is={ChevronDown} className=\"text-grey-700 size-4\" />\n      </ScrollDownButton>\n    </Content>\n  </RadixSelect.Portal>\n))\n\nSelectMenuContent.displayName = 'SelectMenuContent'\n"],"mappings":";;;;;;AAQA,IAAM,UAAU,OAAO,YAAY,SAAS;CAC1C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,UAAU;EACR,QAAQ,CACN,mDACA,uCACD;EACD,gBAAgB,EAAE;EACnB,EACF;CACF,CAAC;AAEF,IAAM,WAAW,OAAO,YAAY,UAAU;CAC5C,MAAM,CAAC,OAAO,SAAS;CACvB,UAAU,EACR,UAAU;EACR,QAAQ,CAAC,8CAA8C;EACvD,gBAAgB,EAAE;EACnB,EACF;CACF,CAAC;AAEF,IAAM,iBAAiB,OAAO,YAAY,gBAAgB,EACxD,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;CAAiB,EAC1E,CAAC;AAEF,IAAM,mBAAmB,OAAO,YAAY,kBAAkB,EAC5D,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;CAAiB,EAC1E,CAAC;AAMF,IAAa,oBAAoB,QAAM,YAGpC,EAAE,UAAU,WAAW,UAAU,aAAa,GAAG,GAAG,SAAS,QAC9D,wBAAA,cAAC,YAAY,QAAA,MACX,wBAAA,cAAC,SAAD;CAAc;CAAe;CAAsB;CAAY,GAAI;CAQzD,EAPR,wBAAA,cAAC,gBAAA,MACC,wBAAA,cAAC,MAAD;CAAM,IAAI;CAAW,WAAU;CAAyB,CAAA,CACzC,EACjB,wBAAA,cAAC,UAAD,EAAoB,UAA+B,EAApB,SAAoB,EACnD,wBAAA,cAAC,kBAAA,MACC,wBAAA,cAAC,MAAD;CAAM,IAAI;CAAa,WAAU;CAAyB,CAAA,CACzC,CACX,CACS,CACrB;AAEF,kBAAkB,cAAc"}

package/dist/components/select-menu/SelectMenuContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type SelectMenuContextValue = {
+    size: 'sm' | 'md' | 'lg';
+    theme: 'white' | 'grey';
+    state?: 'error';
+};
+export declare const SelectMenuContext: React.Context<SelectMenuContextValue>;
+export declare const useSelectMenuContext: () => SelectMenuContextValue;
+export {};

package/dist/components/select-menu/SelectMenuContext.js

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+//#region src/components/select-menu/SelectMenuContext.tsx
+var SelectMenuContext = React$1.createContext({
+	size: "md",
+	theme: "grey"
+});
+var useSelectMenuContext = () => React$1.useContext(SelectMenuContext);
+//#endregion
+export { SelectMenuContext, useSelectMenuContext };
+
+//# sourceMappingURL=SelectMenuContext.js.map

package/dist/components/select-menu/SelectMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuContext.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContext.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.useContext(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;CACR,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}

package/dist/components/select-menu/SelectMenuItem.d.ts

@@ -0,0 +1,3 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+export declare const SelectMenuItem: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/select-menu/SelectMenuItem.js

@@ -0,0 +1,59 @@
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { useSelectMenuContext } from "./SelectMenuContext.js";
+import * as React$1 from "react";
+import { Ok } from "@atom-learning/icons";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuItem.tsx
+var Item = styled(RadixSelect.Item, {
+	base: [
+		"relative",
+		"flex",
+		"items-center",
+		"text-grey-1000",
+		"font-body",
+		"font-normal",
+		"cursor-pointer",
+		"rounded-sm",
+		"outline-none",
+		"data-disabled:cursor-not-allowed",
+		"data-disabled:opacity-30",
+		"data-disabled:pointer-events-none",
+		"data-highlighted:bg-grey-100",
+		"data-highlighted:outline-none"
+	],
+	variants: { size: {
+		sm: [
+			"py-1.5",
+			"pl-7",
+			"pr-4",
+			"text-sm"
+		],
+		md: [
+			"py-2",
+			"pl-8",
+			"pr-6"
+		],
+		lg: [
+			"py-2",
+			"pl-8",
+			"pr-6"
+		]
+	} }
+});
+var SelectMenuItem = React$1.forwardRef(({ children, ...props }, ref) => {
+	const { size } = useSelectMenuContext();
+	return /* @__PURE__ */ React$1.createElement(Item, {
+		ref,
+		size,
+		...props
+	}, /* @__PURE__ */ React$1.createElement(RadixSelect.ItemIndicator, { className: "absolute left-2 inline-flex items-center" }, /* @__PURE__ */ React$1.createElement(Icon, {
+		is: Ok,
+		className: size === "sm" ? "size-3" : "size-4"
+	})), /* @__PURE__ */ React$1.createElement(RadixSelect.ItemText, null, children));
+});
+SelectMenuItem.displayName = "SelectMenuItem";
+//#endregion
+export { SelectMenuItem };
+
+//# sourceMappingURL=SelectMenuItem.js.map

package/dist/components/select-menu/SelectMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenuContext'\n\nconst Item = styled(RadixSelect.Item, {\n  base: [\n    'relative',\n    'flex',\n    'items-center',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'cursor-pointer',\n    'rounded-sm',\n    'outline-none',\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-30',\n    'data-disabled:pointer-events-none',\n    'data-highlighted:bg-grey-100',\n    'data-highlighted:outline-none'\n  ],\n  variants: {\n    size: {\n      sm: ['py-1.5', 'pl-7', 'pr-4', 'text-sm'],\n      md: ['py-2', 'pl-8', 'pr-6'],\n      lg: ['py-2', 'pl-8', 'pr-6']\n    }\n  }\n})\n\ntype SelectMenuItemProps = React.ComponentPropsWithRef<typeof RadixSelect.Item>\n\nexport const SelectMenuItem = React.forwardRef<\n  HTMLDivElement,\n  SelectMenuItemProps\n>(({ children, ...props }, ref) => {\n  const { size } = useSelectMenuContext()\n\n  return (\n    <Item ref={ref} size={size} {...props}>\n      <RadixSelect.ItemIndicator className=\"absolute left-2 inline-flex items-center\">\n        <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n      </RadixSelect.ItemIndicator>\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n    </Item>\n  )\n})\n\nSelectMenuItem.displayName = 'SelectMenuItem'\n"],"mappings":";;;;;;;AASA,IAAM,OAAO,OAAO,YAAY,MAAM;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAU;GAAQ;GAAQ;GAAU;EACzC,IAAI;GAAC;GAAQ;GAAQ;GAAO;EAC5B,IAAI;GAAC;GAAQ;GAAQ;GAAO;EAC7B,EACF;CACF,CAAC;AAIF,IAAa,iBAAiB,QAAM,YAGjC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,SAAS,sBAAsB;AAEvC,QACE,wBAAA,cAAC,MAAD;EAAW;EAAW;EAAM,GAAI;EAKzB,EAJL,wBAAA,cAAC,YAAY,eAAb,EAA2B,WAAU,4CAET,EAD1B,wBAAA,cAAC,MAAD;EAAM,IAAI;EAAI,WAAW,SAAS,OAAO,WAAW;EAAY,CAAA,CACtC,EAC5B,wBAAA,cAAC,YAAY,UAAA,MAAU,SAAgC,CAClD;EAET;AAEF,eAAe,cAAc"}

package/dist/components/select-menu/SelectMenuLabel.d.ts

@@ -0,0 +1,8 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+type SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>;
+export declare const SelectMenuLabel: {
+    ({ className, ...props }: SelectMenuLabelProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/select-menu/SelectMenuLabel.js

@@ -0,0 +1,16 @@
+import { cn } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import * as React$1 from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuLabel.tsx
+var SelectMenuLabel = ({ className, ...props }) => /* @__PURE__ */ React$1.createElement(Text, {
+	as: RadixSelect.Label,
+	size: "sm",
+	className: cn("p-2", "mb-1", "text-text-subtle", className),
+	...props
+});
+SelectMenuLabel.displayName = "SelectMenuLabel";
+//#endregion
+export { SelectMenuLabel };
+
+//# sourceMappingURL=SelectMenuLabel.js.map

package/dist/components/select-menu/SelectMenuLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...props\n}: SelectMenuLabelProps) => (\n  <Text\n    as={RadixSelect.Label}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-text-subtle', className)}\n    {...props}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;AASA,IAAa,mBAAmB,EAC9B,WACA,GAAG,YAEH,wBAAA,cAAC,MAAD;CACE,IAAI,YAAY;CAChB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,oBAAoB,UAAU;CAC3D,GAAI;CACJ,CAAA;AAGJ,gBAAgB,cAAc"}

package/dist/components/select-menu/SelectMenuSeparator.d.ts

@@ -0,0 +1,4 @@
+import * as RadixSelect from '@radix-ui/react-select';
+export declare const SelectMenuSeparator: import("react").ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>, never> & {
+    as?: import("react").ElementType;
+}>;

package/dist/components/select-menu/SelectMenuSeparator.js

@@ -0,0 +1,13 @@
+import { styled } from "../../styled.js";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuSeparator.tsx
+var SelectMenuSeparator = styled(RadixSelect.Separator, { base: [
+	"h-px",
+	"bg-grey-200",
+	"my-2",
+	"mx-1"
+] });
+//#endregion
+export { SelectMenuSeparator };
+
+//# sourceMappingURL=SelectMenuSeparator.js.map

package/dist/components/select-menu/SelectMenuSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\n\nimport { styled } from '~/styled'\n\nexport const SelectMenuSeparator = styled(RadixSelect.Separator, {\n  base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1']\n})\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OAAO,YAAY,WAAW,EAC/D,MAAM;CAAC;CAAQ;CAAe;CAAQ;CAAO,EAC9C,CAAC"}

package/dist/components/select-menu/SelectMenuTrigger.d.ts

@@ -0,0 +1,7 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+type SelectMenuTriggerProps = React.ComponentPropsWithRef<typeof RadixSelect.Trigger> & {
+    placeholder?: string;
+};
+export declare const SelectMenuTrigger: React.ForwardRefExoticComponent<Omit<SelectMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};