@atom-learning/components 11.6.0 → 12.0.0-beta.1

package/dist/components/markdown-content/components/MarkdownCode.js

@@ -3,9 +3,9 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/markdown-content/components/MarkdownCode.tsx
 var StyledMarkdownCode = styled("div", { base: [
-	"bg-grey-200",
+	"bg-neutral",
 	"rounded-md",
-	"text-grey-1000",
+	"text-default",
 	"font-mono",
 	"text-sm/[1.4]",
 	"my-4",

package/dist/components/markdown-content/components/MarkdownCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownCode.tsx"],"sourcesContent":["import type { Code } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownCodeProps = {\n  node: Code\n}\n\nconst StyledMarkdownCode = styled('div', {\n  base: [\n    'bg-grey-200',\n    'rounded-md',\n    'text-grey-1000',\n    'font-mono',\n    'text-sm/[1.4]',\n    'my-4',\n    'p-3'\n  ]\n})\n\nexport const MarkdownCode = ({ node }: MarkdownCodeProps) => (\n  <StyledMarkdownCode as=\"pre\">{node.value}</StyledMarkdownCode>\n)\n"],"mappings":";;;;AASA,IAAM,qBAAqB,OAAO,OAAO,EACvC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,gBAAgB,EAAE,WAC7B,oBAAC,oBAAD;CAAoB,IAAG;WAAO,KAAK;AAA0B,CAAA"}
+{"version":3,"file":"MarkdownCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownCode.tsx"],"sourcesContent":["import type { Code } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownCodeProps = {\n  node: Code\n}\n\nconst StyledMarkdownCode = styled('div', {\n  base: [\n    'bg-neutral',\n    'rounded-md',\n    'text-default',\n    'font-mono',\n    'text-sm/[1.4]',\n    'my-4',\n    'p-3'\n  ]\n})\n\nexport const MarkdownCode = ({ node }: MarkdownCodeProps) => (\n  <StyledMarkdownCode as=\"pre\">{node.value}</StyledMarkdownCode>\n)\n"],"mappings":";;;;AASA,IAAM,qBAAqB,OAAO,OAAO,EACvC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,gBAAgB,EAAE,WAC7B,oBAAC,oBAAD;CAAoB,IAAG;WAAO,KAAK;AAA0B,CAAA"}

package/dist/components/markdown-content/components/MarkdownInlineCode.js

@@ -3,9 +3,9 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/markdown-content/components/MarkdownInlineCode.tsx
 var StyledMarkdownInlineCode = styled("div", { base: [
-	"bg-grey-200",
+	"bg-neutral",
 	"rounded-sm",
-	"text-grey-1000",
+	"text-default",
 	"inline-block",
 	"font-mono",
 	"text-[85%]",

package/dist/components/markdown-content/components/MarkdownInlineCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownInlineCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownInlineCode.tsx"],"sourcesContent":["import type { InlineCode } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownInlineCodeProps = {\n  node: InlineCode\n}\n\nconst StyledMarkdownInlineCode = styled('div', {\n  base: [\n    'bg-grey-200',\n    'rounded-sm',\n    'text-grey-1000',\n    'inline-block',\n    'font-mono',\n    'text-[85%]',\n    'px-1',\n    'py-0.5'\n  ]\n})\n\nexport const MarkdownInlineCode = ({ node }: MarkdownInlineCodeProps) => (\n  <StyledMarkdownInlineCode as=\"code\">{node.value}</StyledMarkdownInlineCode>\n)\n"],"mappings":";;;;AASA,IAAM,2BAA2B,OAAO,OAAO,EAC7C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,sBAAsB,EAAE,WACnC,oBAAC,0BAAD;CAA0B,IAAG;WAAQ,KAAK;AAAgC,CAAA"}
+{"version":3,"file":"MarkdownInlineCode.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownInlineCode.tsx"],"sourcesContent":["import type { InlineCode } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownInlineCodeProps = {\n  node: InlineCode\n}\n\nconst StyledMarkdownInlineCode = styled('div', {\n  base: [\n    'bg-neutral',\n    'rounded-sm',\n    'text-default',\n    'inline-block',\n    'font-mono',\n    'text-[85%]',\n    'px-1',\n    'py-0.5'\n  ]\n})\n\nexport const MarkdownInlineCode = ({ node }: MarkdownInlineCodeProps) => (\n  <StyledMarkdownInlineCode as=\"code\">{node.value}</StyledMarkdownInlineCode>\n)\n"],"mappings":";;;;AASA,IAAM,2BAA2B,OAAO,OAAO,EAC7C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,sBAAsB,EAAE,WACnC,oBAAC,0BAAD;CAA0B,IAAG;WAAQ,KAAK;AAAgC,CAAA"}

package/dist/components/navigation/NavigationMenu.js

@@ -1,6 +1,5 @@
 import { cn } from "../../utilities/tw-merge/index.js";
 import { styled } from "../../styled.js";
-import { colorSchemes } from "./NavigationMenu.colorscheme.config.js";
 import { NavigationMenuContext } from "./NavigationMenu.context.js";
 import { NavigationMenuDropdownContent } from "./NavigationMenuDropdownContent.js";
 import { NavigationMenuDropdownTrigger } from "./NavigationMenuDropdownTrigger.js";
@@ -60,7 +59,6 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 		value: React$1.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate]),
 		children: /* @__PURE__ */ jsxs(StyledMenu, {
 			className: cn(className),
-			style: colorSchemes["light"],
 			onValueChange: setActiveItem,
 			...rest,
 			children: [/* @__PURE__ */ jsx(StyledList, {

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = listRef.current.offsetWidth\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(setOffset, 200, null)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\n      if (trigger && listWidth && activeItem === itemValue) {\n        const listCenter = listWidth / 2\n\n        const triggerOffsetRight =\n          listWidth -\n          trigger.offsetLeft -\n          trigger.offsetWidth +\n          trigger.offsetWidth / 2\n\n        setOffset(Math.round(listCenter - triggerOffsetRight))\n      }\n\n      return trigger\n    },\n    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,WAAW,WAAW,KAAK,IAAI;EAGzC,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = listRef.current.offsetWidth\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(setOffset, 200, null)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\n      if (trigger && listWidth && activeItem === itemValue) {\n        const listCenter = listWidth / 2\n\n        const triggerOffsetRight =\n          listWidth -\n          trigger.offsetLeft -\n          trigger.offsetWidth +\n          trigger.offsetWidth / 2\n\n        setOffset(Math.round(listCenter - triggerOffsetRight))\n      }\n\n      return trigger\n    },\n    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,WAAW,WAAW,KAAK,IAAI;EAGzC,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,eAAe;GACf,GAAI;aAHN,CAKE,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}

package/dist/components/navigation/NavigationMenu.styles.js

@@ -1,30 +1,31 @@
 //#region src/components/navigation/NavigationMenu.styles.ts
 var navigationMenuBaseItemStyles = [
 	"relative",
-	"text-(--text)",
+	"text-subtle",
 	"outline-none",
 	"cursor-pointer",
 	"font-body",
 	"select-none",
 	"p-3",
 	"rounded-md",
-	"bg-(--background)",
-	"hover:bg-(--background-hover)",
-	"hover:text-(--text-hover)",
-	"active:bg-(--background-active)",
-	"active:text-(--text-active)",
-	"focus-visible:inset-shadow-[0_0_0_2px_var(--color-primary-800)]",
-	"disabled:bg-none",
-	"disabled:cursor-default",
-	"disabled:opacity-[30%]",
-	"disabled:text-(--text)"
+	"hover:bg-hover",
+	"hover:text-default",
+	"active:bg-hover",
+	"active:text-default",
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-solid",
+	"focus-visible:outline-focus",
+	"focus-visible:z-1",
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-30"
 ];
 var navigationMenuActiveItemStyles = [
 	"font-semibold",
-	"text-item-(--background-selected)",
+	"text-default",
 	"after:-translate-x-1/2",
 	"after:absolute",
-	"after:bg-item-(--background-selected)",
+	"after:bg-(--text-color-default)",
 	"after:block",
 	"after:bottom-0",
 	"after:h-0.5",

package/dist/components/navigation/NavigationMenu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.styles.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.styles.ts"],"sourcesContent":["export const navigationMenuBaseItemStyles = [\n  'relative',\n  'text-(--text)',\n  'outline-none',\n  'cursor-pointer',\n  'font-body',\n  'select-none',\n  'p-3',\n  'rounded-md',\n  'bg-(--background)',\n  'hover:bg-(--background-hover)',\n  'hover:text-(--text-hover)',\n  'active:bg-(--background-active)',\n  'active:text-(--text-active)',\n  'focus-visible:inset-shadow-[0_0_0_2px_var(--color-primary-800)]',\n  'disabled:bg-none',\n  'disabled:cursor-default',\n  'disabled:opacity-[30%]',\n  'disabled:text-(--text)'\n]\n\nexport const navigationMenuActiveItemStyles = [\n  'font-semibold',\n  'text-item-(--background-selected)',\n  'after:-translate-x-1/2',\n  'after:absolute',\n  'after:bg-item-(--background-selected)',\n  'after:block',\n  'after:bottom-0',\n  'after:h-0.5',\n  'after:left-1/2',\n  'after:rounded-md',\n  'after:translate-y-0',\n  'after:w-6'\n]\n"],"mappings":";AAAA,IAAa,+BAA+B;CAC1C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,iCAAiC;CAC5C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"NavigationMenu.styles.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.styles.ts"],"sourcesContent":["// Items have no resting fill and translucent states so the same styles work in\n// the bar (bg-surface) and in the dropdown (bg-surface-overlay).\nexport const navigationMenuBaseItemStyles = [\n  'relative',\n  'text-subtle',\n  'outline-none',\n  'cursor-pointer',\n  'font-body',\n  'select-none',\n  'p-3',\n  'rounded-md',\n  'hover:bg-hover',\n  'hover:text-default',\n  'active:bg-hover',\n  'active:text-default',\n  'focus-visible:outline-2',\n  'focus-visible:outline-offset-2',\n  'focus-visible:outline-solid',\n  'focus-visible:outline-focus',\n  'focus-visible:z-1',\n  'disabled:cursor-not-allowed',\n  'disabled:opacity-30'\n]\n\nexport const navigationMenuActiveItemStyles = [\n  'font-semibold',\n  'text-default',\n  'after:-translate-x-1/2',\n  'after:absolute',\n  'after:bg-(--text-color-default)',\n  'after:block',\n  'after:bottom-0',\n  'after:h-0.5',\n  'after:left-1/2',\n  'after:rounded-md',\n  'after:translate-y-0',\n  'after:w-6'\n]\n"],"mappings":";AAEA,IAAa,+BAA+B;CAC1C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,iCAAiC;CAC5C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/navigation/NavigationMenuDropdownContent.js

@@ -6,9 +6,11 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation/NavigationMenuDropdownContent.tsx
 var StyledContent = styled(NavigationMenuPrimitive.Content, { base: [
 	"p-3",
-	"bg-(--dropdown-background)",
+	"bg-surface-overlay",
 	"mt-1",
-	"shadow-md",
+	"shadow-(--shadow-floating-md)",
+	"forced-colors:border",
+	"forced-colors:border-[CanvasText]",
 	"rounded-md"
 ] });
 var NavigationMenuDropdownContent = ({ children, ...rest }) => /* @__PURE__ */ jsx(StyledContent, {

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuDropdownContent.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownContent.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\n\nconst StyledContent = styled(NavigationMenuPrimitive.Content, {\n  base: ['p-3', 'bg-(--dropdown-background)', 'mt-1', 'shadow-md', 'rounded-md']\n})\n\ntype NavigationMenuDropdownContentProps = React.ComponentProps<\n  typeof StyledContent\n>\n\nexport const NavigationMenuDropdownContent = ({\n  children,\n  ...rest\n}: NavigationMenuDropdownContentProps) => (\n  <StyledContent\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n    {...rest}\n  >\n    <ul>{children}</ul>\n  </StyledContent>\n)\n\nNavigationMenuDropdownContent.displayName = 'NavigationMenuDropdownContent'\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS,EAC5D,MAAM;CAAC;CAAO;CAA8B;CAAQ;CAAa;AAAY,EAC/E,CAAC;AAMD,IAAa,iCAAiC,EAC5C,UACA,GAAG,WAEH,oBAAC,eAAD;CACE,eAAe;CACf,gBAAgB;CAChB,GAAI;WAEJ,oBAAC,MAAD,EAAK,SAAa,CAAA;AACL,CAAA;AAGjB,8BAA8B,cAAc"}
+{"version":3,"file":"NavigationMenuDropdownContent.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownContent.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\n\nconst StyledContent = styled(NavigationMenuPrimitive.Content, {\n  base: [\n    'p-3',\n    'bg-surface-overlay',\n    'mt-1',\n    'shadow-(--shadow-floating-md)',\n    // Forced colours drop box-shadow, so the edge needs a real border\n    'forced-colors:border',\n    'forced-colors:border-[CanvasText]',\n    'rounded-md'\n  ]\n})\n\ntype NavigationMenuDropdownContentProps = React.ComponentProps<\n  typeof StyledContent\n>\n\nexport const NavigationMenuDropdownContent = ({\n  children,\n  ...rest\n}: NavigationMenuDropdownContentProps) => (\n  <StyledContent\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n    {...rest}\n  >\n    <ul>{children}</ul>\n  </StyledContent>\n)\n\nNavigationMenuDropdownContent.displayName = 'NavigationMenuDropdownContent'\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS,EAC5D,MAAM;CACJ;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,iCAAiC,EAC5C,UACA,GAAG,WAEH,oBAAC,eAAD;CACE,eAAe;CACf,gBAAgB;CAChB,GAAI;WAEJ,oBAAC,MAAD,EAAK,SAAa,CAAA;AACL,CAAA;AAGjB,8BAA8B,cAAc"}

package/dist/components/navigation/NavigationMenuDropdownItem.js

@@ -9,7 +9,7 @@ var NavigationMenuDropdownItem = ({ ref, ...props }) => /* @__PURE__ */ jsx(Navi
 	variant: "dropdownItem",
 	...props
 });
-var NavigationMenuDropdownItemTitle = styled(Text, { base: ["text-grey-900", "font-semibold"] });
+var NavigationMenuDropdownItemTitle = styled(Text, { base: ["text-default", "font-semibold"] });
 NavigationMenuDropdownItemTitle.displayName = "NavigationMenuDropdownItemTitle";
 //#endregion
 export { NavigationMenuDropdownItem, NavigationMenuDropdownItemTitle };

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuDropdownItem.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nexport const NavigationMenuDropdownItem = ({\n  ref,\n  ...props\n}: React.PropsWithChildren<\n  React.ComponentProps<typeof NavigationMenuLink>\n>) => <NavigationMenuLink ref={ref} variant=\"dropdownItem\" {...props} />\n\nexport const NavigationMenuDropdownItemTitle = styled(Text, {\n  base: ['text-grey-900', 'font-semibold']\n})\n\nNavigationMenuDropdownItemTitle.displayName = 'NavigationMenuDropdownItemTitle'\n"],"mappings":";;;;;;AAMA,IAAa,8BAA8B,EACzC,KACA,GAAG,YAGC,oBAAC,oBAAD;CAAyB;CAAK,SAAQ;CAAe,GAAI;AAAQ,CAAA;AAEvE,IAAa,kCAAkC,OAAO,MAAM,EAC1D,MAAM,CAAC,iBAAiB,eAAe,EACzC,CAAC;AAED,gCAAgC,cAAc"}
+{"version":3,"file":"NavigationMenuDropdownItem.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nexport const NavigationMenuDropdownItem = ({\n  ref,\n  ...props\n}: React.PropsWithChildren<\n  React.ComponentProps<typeof NavigationMenuLink>\n>) => <NavigationMenuLink ref={ref} variant=\"dropdownItem\" {...props} />\n\nexport const NavigationMenuDropdownItemTitle = styled(Text, {\n  base: ['text-default', 'font-semibold']\n})\n\nNavigationMenuDropdownItemTitle.displayName = 'NavigationMenuDropdownItemTitle'\n"],"mappings":";;;;;;AAMA,IAAa,8BAA8B,EACzC,KACA,GAAG,YAGC,oBAAC,oBAAD;CAAyB;CAAK,SAAQ;CAAe,GAAI;AAAQ,CAAA;AAEvE,IAAa,kCAAkC,OAAO,MAAM,EAC1D,MAAM,CAAC,gBAAgB,eAAe,EACxC,CAAC;AAED,gCAAgC,cAAc"}

package/dist/components/navigation/NavigationMenuDropdownTrigger.js

@@ -15,7 +15,7 @@ var StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {
 		"items-center",
 		"rounded-md",
 		"justify-between",
-		"data-[state=open]:bg-(--trigger-background-open)"
+		"data-[state=open]:bg-hover"
 	],
 	variants: { active: { true: navigationMenuActiveItemStyles } }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-(--trigger-background-open)'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = ({\n  ref,\n  children,\n  active,\n  ...rest\n}: React.ComponentProps<typeof StyledTrigger>) => (\n  <StyledTrigger\n    active={active}\n    {...rest}\n    ref={ref}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={cn(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n)\n"],"mappings":";;;;;;;;;;AAYA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ,EACN,MAAM,+BACR,EACF;AACF,CAAC;AAED,IAAa,iCAAiC,EAC5C,KACA,UACA,QACA,GAAG,WAEH,qBAAC,eAAD;CACU;CACR,GAAI;CACC;CACL,eAAe;CACf,gBAAgB;WALlB,CAOG,UACD,oBAAC,MAAD;EACE,IAAI;EACJ,MAAK;EACL,WAAW,GACT,QACA,oCACA,4BACA,uBACA,kCACF;CACD,CAAA,CACY"}
+{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-hover'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = ({\n  ref,\n  children,\n  active,\n  ...rest\n}: React.ComponentProps<typeof StyledTrigger>) => (\n  <StyledTrigger\n    active={active}\n    {...rest}\n    ref={ref}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={cn(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n)\n"],"mappings":";;;;;;;;;;AAYA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ,EACN,MAAM,+BACR,EACF;AACF,CAAC;AAED,IAAa,iCAAiC,EAC5C,KACA,UACA,QACA,GAAG,WAEH,qBAAC,eAAD;CACU;CACR,GAAI;CACC;CACL,eAAe;CACf,gBAAgB;WALlB,CAOG,UACD,oBAAC,MAAD;EACE,IAAI;EACJ,MAAK;EACL,WAAW,GACT,QACA,oCACA,4BACA,uBACA,kCACF;CACD,CAAA,CACY"}

package/dist/components/navigation/NavigationMenuLink.js

@@ -6,13 +6,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation/NavigationMenuLink.tsx
-var DisabledButton = styled("button", { base: [
-	...navigationMenuBaseItemStyles,
-	"disabled:bg-none",
-	"disabled:cursor-default",
-	"disabled:opacity-30",
-	"disabled:text-text"
-] });
+var DisabledButton = styled("button", { base: navigationMenuBaseItemStyles });
 var ListItem = NavigationMenuPrimitive.Item;
 var StyledLink = styled(NavigationMenuPrimitive.Link, {
 	base: [
@@ -23,21 +17,19 @@ var StyledLink = styled(NavigationMenuPrimitive.Link, {
 	],
 	variants: { elementType: {
 		dropdownItem: [
-			"data-active:bg-background-selected",
-			"data-active:text-text-selected",
-			"data-active:hover:bg-background-selected-hover",
-			"data-active:hover:text-text-selected-hover",
-			"data-active:active:bg-background-selected-pressed",
-			"data-active:active:text-text-selected-pressed",
-			"data-active:focus-visible:shadow-[0_0_0_2px_var(--color-primary-800)]",
-			"data-active:focus-visible:text-text-selected-focus"
+			"data-active:bg-accent-subtle",
+			"data-active:text-accent",
+			"data-active:hover:bg-accent-subtle-hover",
+			"data-active:hover:text-accent",
+			"data-active:active:bg-accent-subtle-active",
+			"data-active:active:text-accent"
 		],
 		link: [
 			"data-active:font-semibold",
-			"data-active:text-item-(--background-selected)",
+			"data-active:text-default",
 			"data-active:after:-translate-x-1/2",
 			"data-active:after:absolute",
-			"data-active:after:bg-item-(--background-selected)",
+			"data-active:after:bg-(--text-color-default)",
 			"data-active:after:block",
 			"data-active:after:bottom-0",
 			"data-active:after:h-0.5",

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 * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\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 = ({\n  ref,\n  children,\n  href,\n  disabled,\n  className,\n  variant = 'link',\n  reloadDocument,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n  disabled?: boolean\n  variant?: React.ComponentProps<typeof StyledLink>['elementType']\n  reloadDocument?: boolean\n  ref?: React.Ref<HTMLAnchorElement>\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={ref}\n          elementType={variant}\n          className={className}\n          asChild\n          {...rest}\n        >\n          <RouterLink href={href}>{children}</RouterLink>\n        </StyledLink>\n      ) : (\n        <StyledLink\n          href={href}\n          ref={ref}\n          elementType={variant}\n          className={className}\n          {...getExternalAnchorProps(href)}\n          {...rest}\n        >\n          {children}\n        </StyledLink>\n      )}\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;CACF;CACA,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,KACA,UACA,MACA,UACA,WACA,UAAU,QACV,gBACA,GAAG,WAMC;CAEJ,MAAM,aADkB,mBAAmB,MAAM,EAAE,eAAe,CAC/C,CAAA,CAAgB;CAEnC,OACE,oBAAC,UAAD,EAAA,UACG,WACC,oBAAC,gBAAD;EAAgB,UAAA;EAAoB;EACjC;CACa,CAAA,IACd,aACF,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,SAAA;EACA,GAAI;YAEJ,oBAAC,YAAD;GAAkB;GAAO;EAAqB,CAAA;CACpC,CAAA,IAEZ,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,GAAI,uBAAuB,IAAI;EAC/B,GAAI;EAEH;CACS,CAAA,EAEN,CAAA;AAEd"}
+{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { navigationMenuBaseItemStyles } from './NavigationMenu.styles'\n\nconst DisabledButton = styled('button', {\n  base: navigationMenuBaseItemStyles\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-accent-subtle',\n        'data-active:text-accent',\n        'data-active:hover:bg-accent-subtle-hover',\n        'data-active:hover:text-accent',\n        'data-active:active:bg-accent-subtle-active',\n        'data-active:active:text-accent'\n      ],\n      // Spelled out (not derived from navigationMenuActiveItemStyles) because\n      // Tailwind only generates classes it finds literally in source\n      link: [\n        'data-active:font-semibold',\n        'data-active:text-default',\n        'data-active:after:-translate-x-1/2',\n        'data-active:after:absolute',\n        'data-active:after:bg-(--text-color-default)',\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 = ({\n  ref,\n  children,\n  href,\n  disabled,\n  className,\n  variant = 'link',\n  reloadDocument,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n  disabled?: boolean\n  variant?: React.ComponentProps<typeof StyledLink>['elementType']\n  reloadDocument?: boolean\n  ref?: React.Ref<HTMLAnchorElement>\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={ref}\n          elementType={variant}\n          className={className}\n          asChild\n          {...rest}\n        >\n          <RouterLink href={href}>{children}</RouterLink>\n        </StyledLink>\n      ) : (\n        <StyledLink\n          href={href}\n          ref={ref}\n          elementType={variant}\n          className={className}\n          {...getExternalAnchorProps(href)}\n          {...rest}\n        >\n          {children}\n        </StyledLink>\n      )}\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM,6BACR,CAAC;AAED,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;CACF;CACA,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;EACF;EAGA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,KACA,UACA,MACA,UACA,WACA,UAAU,QACV,gBACA,GAAG,WAMC;CAEJ,MAAM,aADkB,mBAAmB,MAAM,EAAE,eAAe,CAC/C,CAAA,CAAgB;CAEnC,OACE,oBAAC,UAAD,EAAA,UACG,WACC,oBAAC,gBAAD;EAAgB,UAAA;EAAoB;EACjC;CACa,CAAA,IACd,aACF,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,SAAA;EACA,GAAI;YAEJ,oBAAC,YAAD;GAAkB;GAAO;EAAqB,CAAA;CACpC,CAAA,IAEZ,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,GAAI,uBAAuB,IAAI;EAC/B,GAAI;EAEH;CACS,CAAA,EAEN,CAAA;AAEd"}

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

@@ -1,5 +1,4 @@
-import { Theme, styled } from "../../styled.js";
-import { colorSchemes } from "./NavigationMenuVertical.colorscheme.config.js";
+import { styled } from "../../styled.js";
 import { NavigationMenuVerticalItem } from "./NavigationMenuVerticalItem.js";
 import { NavigationMenuVerticalAccordion } from "./NavigationMenuVerticalAccordion.js";
 import { NavigationMenuVerticalList } from "./NavigationMenuVerticalList.js";
@@ -14,13 +13,10 @@ import { jsx } from "react/jsx-runtime";
 import { Root } from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation-menu-vertical/NavigationMenuVertical.tsx
 var StyledRoot = styled(Root, { base: ["w-full"] });
-var NavigationMenuVertical = /* @__PURE__ */ Object.assign(({ children, ...rest }) => /* @__PURE__ */ jsx(Theme, {
-	theme: colorSchemes["light"],
-	children: /* @__PURE__ */ jsx(StyledRoot, {
-		...rest,
-		orientation: "vertical",
-		children: /* @__PURE__ */ jsx(NavigationMenuVerticalList, { children })
-	})
+var NavigationMenuVertical = /* @__PURE__ */ Object.assign(({ children, ...rest }) => /* @__PURE__ */ jsx(StyledRoot, {
+	...rest,
+	orientation: "vertical",
+	children: /* @__PURE__ */ jsx(NavigationMenuVerticalList, { children })
 }), {
 	Link: NavigationMenuVerticalLink,
 	Accordion: NavigationMenuVerticalAccordion,

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVertical.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, Theme } from '../../styled'\nimport { colorSchemes as navigationMenuVerticalColorSchemes } from './NavigationMenuVertical.colorscheme.config'\nimport { NavigationMenuVerticalAccordion } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalAccordionContent } from './NavigationMenuVerticalAccordionContent'\nimport { NavigationMenuVerticalAccordionTrigger } from './NavigationMenuVerticalAccordionTrigger'\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\nimport { NavigationMenuVerticalLink } from './NavigationMenuVerticalLink'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\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 below `value` based props and `Trigger`/`Content`\n * animations do nothing, so removing them from typescript\n */\ntype NavigationVerticalProps = Omit<\n  React.ComponentProps<typeof StyledRoot>,\n  | 'delayDuration'\n  | 'skipDelayDuration'\n  | 'defaultValue'\n  | 'value'\n  | 'onValueChange'\n>\n\nexport const NavigationMenuVertical = /* @__PURE__ */ Object.assign(\n  ({ children, ...rest }: NavigationVerticalProps) => (\n    <Theme theme={navigationMenuVerticalColorSchemes['light']}>\n      <StyledRoot {...rest} orientation=\"vertical\">\n        <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n      </StyledRoot>\n    </Theme>\n  ),\n  {\n    Link: NavigationMenuVerticalLink,\n    Accordion: NavigationMenuVerticalAccordion,\n    AccordionContent: NavigationMenuVerticalAccordionContent,\n    AccordionTrigger: NavigationMenuVerticalAccordionTrigger,\n    Item: NavigationMenuVerticalItem,\n    ItemContent: NavigationMenuVerticalItemContent,\n    Icon: NavigationMenuVerticalIcon,\n    Text: NavigationMenuVerticalText\n  }\n)\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,QAAQ,EACjB,CAAC;AAkBD,IAAa,yBAAyC,uBAAO,QAC1D,EAAE,UAAU,GAAG,WACd,oBAAC,OAAD;CAAO,OAAO,aAAmC;WAC/C,oBAAC,YAAD;EAAY,GAAI;EAAM,aAAY;YAChC,oBAAC,4BAAD,EAA6B,SAAqC,CAAA;CACxD,CAAA;AACP,CAAA,GAET;CACE,MAAM;CACN,WAAW;CACX,kBAAkB;CAClB,kBAAkB;CAClB,MAAM;CACN,aAAa;CACb,MAAM;CACN,MAAM;AACR,CACF"}
+{"version":3,"file":"NavigationMenuVertical.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { NavigationMenuVerticalAccordion } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalAccordionContent } from './NavigationMenuVerticalAccordionContent'\nimport { NavigationMenuVerticalAccordionTrigger } from './NavigationMenuVerticalAccordionTrigger'\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\nimport { NavigationMenuVerticalLink } from './NavigationMenuVerticalLink'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\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 below `value` based props and `Trigger`/`Content`\n * animations do nothing, so removing them from typescript\n */\ntype NavigationVerticalProps = Omit<\n  React.ComponentProps<typeof StyledRoot>,\n  | 'delayDuration'\n  | 'skipDelayDuration'\n  | 'defaultValue'\n  | 'value'\n  | 'onValueChange'\n>\n\nexport const NavigationMenuVertical = /* @__PURE__ */ Object.assign(\n  ({ children, ...rest }: NavigationVerticalProps) => (\n    <StyledRoot {...rest} orientation=\"vertical\">\n      <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n    </StyledRoot>\n  ),\n  {\n    Link: NavigationMenuVerticalLink,\n    Accordion: NavigationMenuVerticalAccordion,\n    AccordionContent: NavigationMenuVerticalAccordionContent,\n    AccordionTrigger: NavigationMenuVerticalAccordionTrigger,\n    Item: NavigationMenuVerticalItem,\n    ItemContent: NavigationMenuVerticalItemContent,\n    Icon: NavigationMenuVerticalIcon,\n    Text: NavigationMenuVerticalText\n  }\n)\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,QAAQ,EACjB,CAAC;AAkBD,IAAa,yBAAyC,uBAAO,QAC1D,EAAE,UAAU,GAAG,WACd,oBAAC,YAAD;CAAY,GAAI;CAAM,aAAY;WAChC,oBAAC,4BAAD,EAA6B,SAAqC,CAAA;AACxD,CAAA,GAEd;CACE,MAAM;CACN,WAAW;CACX,kBAAkB;CAClB,kBAAkB;CAClB,MAAM;CACN,aAAa;CACb,MAAM;CACN,MAAM;AACR,CACF"}

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

@@ -13,20 +13,21 @@ var navigationMenuVerticalItemStyles = [
 	"p-2",
 	"pl-(--navigation-menu-vertical-item-pl)",
 	"w-full",
-	"text-(--text)",
-	"bg-(--background)",
+	"text-default",
+	"bg-surface",
 	"disabled:cursor-not-allowed",
 	"[text-decoration:unset]",
 	"disabled:opacity-30",
-	"not-disabled:active:bg-(--background-active)",
-	"not-disabled:focus-visible:outline-none",
+	"not-disabled:active:bg-surface-hover",
+	"not-disabled:focus-visible:outline-2",
+	"not-disabled:focus-visible:outline-offset-2",
+	"not-disabled:focus-visible:outline-solid",
+	"not-disabled:focus-visible:outline-focus",
 	"not-disabled:focus-visible:relative",
-	"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
 	"not-disabled:focus-visible:z-1",
-	"not-disabled:hover:bg-(--background-hover)",
-	"data-active:bg-(--background-selected)",
-	"data-active:text-(--text-selected)",
+	"not-disabled:hover:bg-hover",
+	"data-active:bg-accent-subtle",
+	"data-active:text-accent",
 	"data-active:[--navigation-menu-vertical-item-font-weight:600]"
 ];
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVertical.styles.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["export const navigationMenuVerticalItemStyles = [\n  '[--navigation-menu-vertical-item-font-weight:400]',\n  'data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]',\n  'border-none',\n  'outline-none',\n  'bg-none',\n  'decoration-[inherit]',\n  'cursor-pointer',\n  'rounded-md',\n  'flex',\n  'items-center',\n  'p-2',\n  'pl-(--navigation-menu-vertical-item-pl)',\n  'w-full',\n  'text-(--text)',\n  'bg-(--background)',\n  'disabled:cursor-not-allowed',\n  '[text-decoration:unset]',\n  'disabled:opacity-30',\n  'not-disabled:active:bg-(--background-active)',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:bg-(--background-hover)',\n  'data-active:bg-(--background-selected)',\n  'data-active:text-(--text-selected)',\n  'data-active:[--navigation-menu-vertical-item-font-weight:600]'\n]\n"],"mappings":";AAAA,IAAa,mCAAmC;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"NavigationMenuVertical.styles.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["export const navigationMenuVerticalItemStyles = [\n  '[--navigation-menu-vertical-item-font-weight:400]',\n  'data-[state=open]:[--navigation-menu-vertical-item-font-weight:600]',\n  'border-none',\n  'outline-none',\n  'bg-none',\n  'decoration-[inherit]',\n  'cursor-pointer',\n  'rounded-md',\n  'flex',\n  'items-center',\n  'p-2',\n  'pl-(--navigation-menu-vertical-item-pl)',\n  'w-full',\n  'text-default',\n  'bg-surface',\n  'disabled:cursor-not-allowed',\n  '[text-decoration:unset]',\n  'disabled:opacity-30',\n  'not-disabled:active:bg-surface-hover',\n  'not-disabled:focus-visible:outline-2',\n  'not-disabled:focus-visible:outline-offset-2',\n  'not-disabled:focus-visible:outline-solid',\n  'not-disabled:focus-visible:outline-focus',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:bg-hover',\n  'data-active:bg-accent-subtle',\n  'data-active:text-accent',\n  'data-active:[--navigation-menu-vertical-item-font-weight:600]'\n]\n"],"mappings":";AAAA,IAAa,mCAAmC;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { Badge } from '../badge/Badge';
+import { Badge, type BadgeColorProps } from '../badge/Badge';
 type BadgeProps = React.ComponentProps<typeof Badge>;
-type NotificationBadgeProps = {
+type NotificationBadgeProps = BadgeColorProps & {
     value: number | string;
     emphasis?: BadgeProps['emphasis'];
-    theme?: BadgeProps['theme'];
     icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 };
-export declare const NotificationBadge: ({ value, emphasis, theme, icon, children }: React.PropsWithChildren<NotificationBadgeProps>) => React.JSX.Element;
+export declare const NotificationBadge: ({ value, emphasis, tone, accent, icon, children }: React.PropsWithChildren<NotificationBadgeProps>) => React.JSX.Element;
 export {};

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

@@ -19,12 +19,12 @@ var StyledBadge = styled(Badge, { base: [
 	"min-w-6",
 	"text-center"
 ] });
-var NotificationBadge = ({ value, emphasis = "bold", theme = "primary", icon, children }) => /* @__PURE__ */ jsxs("div", {
+var NotificationBadge = ({ value, emphasis = "bold", tone, accent, icon, children }) => /* @__PURE__ */ jsxs("div", {
 	className: "relative",
 	children: [!!value && /* @__PURE__ */ jsxs(StyledBadge, {
 		role: "status",
 		emphasis,
-		theme,
+		...tone ? { tone } : { accent: accent ?? "inherit" },
 		children: [icon && /* @__PURE__ */ jsx(Icon, {
 			is: icon,
 			role: "img",

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 * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-full',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <div className=\"relative\">\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </div>\n)\n"],"mappings":";;;;;;AAMA,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAWD,IAAa,qBAAqB,EAChC,OACA,WAAW,QACX,QAAQ,WACR,MACA,eAEA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,CAAC,CAAC,SACD,qBAAC,aAAD;EAAa,MAAK;EAAmB;EAAiB;YAAtD,CACG,QAAQ,oBAAC,MAAD;GAAM,IAAI;GAAM,MAAK;GAAM,eAAY;EAAS,CAAA,GACxD,KACU;KAEd,QACE"}
+{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Badge, type BadgeColorProps } 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 = BadgeColorProps & {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  tone,\n  accent,\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <div className=\"relative\">\n    {!!value && (\n      <StyledBadge\n        role=\"status\"\n        emphasis={emphasis}\n        // Unset follows the surrounding accent, not Badge's neutral\n        {...(tone ? { tone } : { accent: accent ?? 'inherit' })}\n      >\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </div>\n)\n"],"mappings":";;;;;;AAMA,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAUD,IAAa,qBAAqB,EAChC,OACA,WAAW,QACX,MACA,QACA,MACA,eAEA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,CAAC,CAAC,SACD,qBAAC,aAAD;EACE,MAAK;EACK;EAEV,GAAK,OAAO,EAAE,KAAK,IAAI,EAAE,QAAQ,UAAU,UAAU;YAJvD,CAMG,QAAQ,oBAAC,MAAD;GAAM,IAAI;GAAM,MAAK;GAAM,eAAY;EAAS,CAAA,GACxD,KACU;KAEd,QACE"}

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

@@ -10,7 +10,7 @@ export interface NumberInputProps {
     readonly?: boolean;
     size?: 'sm' | 'md' | 'lg';
     appearance?: 'standard' | 'modern';
-    theme?: 'white' | 'grey';
+    fill?: 'surface' | 'subtle';
     emphasis?: 'bold';
     onValueChange?: (value: number) => void;
     stepperButtonLabels?: {
@@ -23,6 +23,6 @@ export interface NumberInputProps {
     };
     className?: string;
 }
-export declare const NumberInput: ({ ref, value, defaultValue, onValueChange, min, max, step, disabled: isDisabled, readonly: isReadOnly, size, stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance, theme, emphasis, ...rest }: NumberInputProps & {
+export declare const NumberInput: ({ ref, value, defaultValue, onValueChange, min, max, step, disabled: isDisabled, readonly: isReadOnly, size, stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance, fill, emphasis, ...rest }: NumberInputProps & {
     ref?: React.Ref<HTMLInputElement>;
 }) => React.JSX.Element;

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

@@ -18,7 +18,7 @@ var NumberInputContainer = styled("div", {
 		emphasis: { bold: ["gap-0"] }
 	}
 });
-var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }) => {
+var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", fill, emphasis, ...rest }) => {
 	const [internalValue, setInternalValue] = React$1.useState(value ?? defaultValue);
 	const currentValue = value ?? internalValue;
 	const inputRef = React$1.useRef(null);
@@ -109,19 +109,19 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 		onKeyDown,
 		size,
 		appearance,
-		theme,
+		fill,
 		state: externalState || (hasError ? "error" : void 0),
 		"aria-invalid": externalAriaInvalid || hasError || void 0,
 		className: cn("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
 			"rounded-1",
 			"[&_>_input[aria-invalid=true]]:text-danger",
-			"focus-within:[&_>_input]:text-grey-1000"
+			"focus-within:[&_>_input]:text-default"
 		], emphasis === "bold" && appearance === "standard" && [
 			"border-none",
 			"[&:has([aria-invalid=true])]:border-2",
 			"[&:has([aria-invalid=true])]:border-danger",
 			"focus-within:border-2",
-			"focus-within:border-blue-800"
+			"focus-within:border-focus"
 		]),
 		ref: composedInputRef,
 		readOnly: isReadOnly,
@@ -142,7 +142,7 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 				className: cn(emphasis !== "bold" && ["border-r-none", "rounded-r-none"]),
 				size: iconSize,
 				fieldAppearance: appearance,
-				fieldTheme: theme,
+				fieldFill: fill,
 				emphasis,
 				disabled: isAtMin || isDisabled,
 				showTooltip: isAtMin && !isDisabled,
@@ -156,7 +156,7 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 				className: cn(emphasis !== "bold" && ["border-l-none", "rounded-l-none"]),
 				size: iconSize,
 				fieldAppearance: appearance,
-				fieldTheme: theme,
+				fieldFill: fill,
 				emphasis,
 				disabled: isAtMax || isDisabled,
 				showTooltip: isAtMax && !isDisabled,

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 { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  theme?: 'white' | 'grey'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\n  value,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled: isDisabled = false,\n  readonly: isReadOnly = false,\n  size = 'md',\n  stepperButtonLabels: stepperButtonLabelsProp,\n  disabledTooltipContent: disabledTooltipContentProp,\n  className,\n  appearance = 'standard',\n  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\n  // `?? defaultValue` (not `||`): a controlled `value={0}` is a value, not\n  // an absence. `currentValue` is derived during render — mirroring the prop\n  // into state via an effect would paint one stale frame per update.\n  const [internalValue, setInternalValue] = React.useState<number>(\n    value ?? defaultValue\n  )\n  const currentValue = value ?? internalValue\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n  const composedInputRef = useComposedRefs(ref, inputRef)\n\n  const iconSize = getFieldIconSize(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 = currentValue >= max\n  const isAtMin = currentValue <= 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(currentValue) + step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMax, isReadOnly, step, updateValue, currentValue])\n\n  const decrement = React.useCallback(() => {\n    if (isAtMin || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) - step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMin, isReadOnly, min, step, updateValue, currentValue])\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 = currentValue < min || currentValue > 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: currentValue,\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: composedInputRef,\n    readOnly: isReadOnly,\n    disabled: isDisabled,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': currentValue,\n    role: 'spinbutton'\n  }\n\n  return (\n    <NumberInputContainer\n      appearance={appearance}\n      emphasis={emphasis}\n      className={className}\n    >\n      <NumberInputStepper\n        onClick={decrement}\n        icon={Minus}\n        className={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMin || isDisabled}\n        showTooltip={isAtMin && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.decrement}\n        label={stepperButtonLabels.decrement}\n      />\n      <Input {...inputProps} />\n      <NumberInputStepper\n        onClick={increment}\n        icon={Plus}\n        className={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\n        emphasis={emphasis}\n        disabled={isAtMax || isDisabled}\n        showTooltip={isAtMax && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.increment}\n        label={stepperButtonLabels.increment}\n      />\n    </NumberInputContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  fill?: 'surface' | 'subtle'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\n  value,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled: isDisabled = false,\n  readonly: isReadOnly = false,\n  size = 'md',\n  stepperButtonLabels: stepperButtonLabelsProp,\n  disabledTooltipContent: disabledTooltipContentProp,\n  className,\n  appearance = 'standard',\n  fill,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\n  // `?? defaultValue` (not `||`): a controlled `value={0}` is a value, not\n  // an absence. `currentValue` is derived during render — mirroring the prop\n  // into state via an effect would paint one stale frame per update.\n  const [internalValue, setInternalValue] = React.useState<number>(\n    value ?? defaultValue\n  )\n  const currentValue = value ?? internalValue\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n  const composedInputRef = useComposedRefs(ref, inputRef)\n\n  const iconSize = getFieldIconSize(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 = currentValue >= max\n  const isAtMin = currentValue <= 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(currentValue) + step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMax, isReadOnly, step, updateValue, currentValue])\n\n  const decrement = React.useCallback(() => {\n    if (isAtMin || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) - step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMin, isReadOnly, min, step, updateValue, currentValue])\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 = currentValue < min || currentValue > 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: currentValue,\n    ...restProps,\n    onChange: onInputChange,\n    onKeyDown,\n    size,\n    appearance,\n    fill,\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-default'\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-focus'\n        ]\n    ),\n    ref: composedInputRef,\n    readOnly: isReadOnly,\n    disabled: isDisabled,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': currentValue,\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        fieldFill={fill}\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        fieldFill={fill}\n        emphasis={emphasis}\n        disabled={isAtMax || isDisabled}\n        showTooltip={isAtMax && !isDisabled}\n        disabledTooltipContent={disabledTooltipContent.increment}\n        label={stepperButtonLabels.increment}\n      />\n    </NumberInputContainer>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { ActionIcon } from '../action-icon/ActionIcon';
-declare const StyledStepperButton: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+declare const StyledStepperButton: import("../..").PolymorphicComponent<({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<Omit<{
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "colorRole" | "isRounded" | "size">, "colorRole">, "as" | "children" | "hasTooltip" | "href" | "inverse" | "label" | "reloadDocument" | "tone" | "tooltipSide"> & {
+    tone?: "danger" | "neutral" | "success" | "warning";
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;
@@ -15,7 +17,7 @@ declare const StyledStepperButton: import("../..").PolymorphicComponent<({ ref,
     reloadDocument?: boolean;
 } & Omit<import("../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, {
     fieldAppearance?: "modern" | "standard" | undefined;
-    fieldTheme?: "grey" | "white" | undefined;
+    fieldFill?: "subtle" | "surface" | undefined;
     emphasis?: "bold" | undefined;
 }>;
 type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'children'> & Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {
@@ -23,5 +25,5 @@ type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'ch
     showTooltip?: boolean;
     disabledTooltipContent?: string;
 };
-export declare const NumberInputStepper: ({ ref, icon, disabledTooltipContent, showTooltip, fieldAppearance, fieldTheme, ...rest }: NumberInputStepperProps) => React.JSX.Element;
+export declare const NumberInputStepper: ({ ref, icon, disabledTooltipContent, showTooltip, fieldAppearance, fieldFill, ...rest }: NumberInputStepperProps) => React.JSX.Element;
 export {};