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

package/dist/components/toggle-group/ToggleGroupItem.js

@@ -2,56 +2,46 @@ import { styled } from "../../styled.js";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
 //#region src/components/toggle-group/ToggleGroupItem.tsx
 var standardVariant = [
-	"before:bg-grey-600",
-	"bg-white",
+	"before:bg-neutral-solid",
+	"bg-surface",
 	"border",
-	"border-grey-600",
-	"text-grey-800",
+	"border-neutral-solid",
+	"text-subtle",
 	"data-[state=on]:border-current!",
 	"data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]",
-	"data-[state=on]:text-primary-800",
+	"data-[state=on]:text-accent",
 	"not-disabled:data-[state=on]:before:bg-none",
 	"not-disabled:focus-visible:before:bg-none",
-	"not-disabled:focus-visible:data-[state=off]:border-grey-600!",
-	"not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]",
-	"not-disabled:focus-visible:outline-none",
+	"not-disabled:focus-visible:data-[state=off]:border-neutral-solid!",
+	"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-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!",
 	"not-disabled:focus-visible:z-1",
 	"not-disabled:hover:before:bg-none",
 	"not-disabled:hover:border-current!",
-	"not-disabled:hover:text-primary-900"
+	"not-disabled:hover:text-accent-hover"
 ];
 var modernVariant = [
-	"bg-grey-200",
+	"bg-neutral",
 	"border-0",
-	"text-grey-800",
+	"text-subtle",
 	"overflow-hidden",
 	"rounded-md",
-	"data-[state=on]:bg-white",
+	"data-[state=on]:bg-surface",
 	"data-[state=on]:border!",
-	"data-[state=on]:border-grey-200!",
+	"data-[state=on]:border-subtle!",
 	"data-[state=on]:shadow-none!",
-	"data-[state=on]:text-grey-900",
-	"not-disabled:focus-visible:data-[state=off]:border-grey-600!",
-	"not-disabled:focus-visible:outline-none",
+	"data-[state=on]:text-default",
+	"not-disabled:focus-visible:data-[state=off]:border-neutral-solid!",
+	"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-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!",
 	"not-disabled:focus-visible:z-1",
-	"not-disabled:hover:text-primary-900"
-];
-var darkBase = [
-	"bg-transparent",
-	"text-grey-200",
-	"data-[state=on]:text-white",
-	"not-disabled:hover:text-white",
-	"not-disabled:focus-visible:shadow-[var(--color-grey-1000)_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!"
-];
-var standardDarkVariant = darkBase;
-var modernDarkVariant = [
-	...darkBase,
-	"data-[state=on]:bg-grey-900",
-	"data-[state=on]:border-grey-800!"
+	"not-disabled:hover:text-accent-hover"
 ];
 var ToggleGroupItem = styled(ToggleGroup.Item, {
 	base: [
@@ -59,31 +49,13 @@ var ToggleGroupItem = styled(ToggleGroup.Item, {
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
-	variants: {
-		theme: {
-			standard: standardVariant,
-			modern: modernVariant
-		},
-		colorMode: {
-			light: [],
-			dark: []
-		}
-	},
-	compoundVariants: [{
-		theme: "standard",
-		colorMode: "dark",
-		class: standardDarkVariant
-	}, {
-		theme: "modern",
-		colorMode: "dark",
-		class: modernDarkVariant
-	}],
-	defaultVariants: {
-		theme: "standard",
-		colorMode: "light"
-	}
+	variants: { appearance: {
+		standard: standardVariant,
+		modern: modernVariant
+	} },
+	defaultVariants: { appearance: "standard" }
 }, { enablePolymorphism: false });
 //#endregion
-export { ToggleGroupItem, modernDarkVariant, modernVariant, standardDarkVariant, standardVariant };
+export { ToggleGroupItem, modernVariant, standardVariant };
 
 //# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/toggle-group/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '../../styled'\n\nexport const standardVariant = [\n  'before:bg-grey-600',\n  'bg-white',\n  'border',\n  'border-grey-600',\n  'text-grey-800',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-primary-800',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  // One comma-separated ring: separate shadow classes overwrite each other\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n  'bg-grey-200',\n  'border-0',\n  'text-grey-800',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-white',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-grey-200!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-grey-900',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  // One comma-separated ring: separate shadow classes overwrite each other,\n  // and it must be important to beat data-[state=on]:shadow-none!\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:text-primary-900'\n]\n\n// Dark classes are layered over a theme's classes (via compoundVariants), so\n// they only list what differs; tailwind-merge drops the overridden light ones.\nconst darkBase = [\n  'bg-transparent',\n  'text-grey-200',\n  'data-[state=on]:text-white',\n  'not-disabled:hover:text-white',\n  // Inner offset is grey-1000, not white, so the ring reads on a dark surface\n  'not-disabled:focus-visible:shadow-[var(--color-grey-1000)_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!'\n]\n\nexport const standardDarkVariant = darkBase\n\nexport const modernDarkVariant = [\n  ...darkBase,\n  'data-[state=on]:bg-grey-900',\n  'data-[state=on]:border-grey-800!'\n]\n\nexport const ToggleGroupItem = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      },\n      colorMode: {\n        light: [],\n        dark: []\n      }\n    },\n    compoundVariants: [\n      { theme: 'standard', colorMode: 'dark', class: standardDarkVariant },\n      { theme: 'modern', colorMode: 'dark', class: modernDarkVariant }\n    ],\n    defaultVariants: {\n      theme: 'standard',\n      colorMode: 'light'\n    }\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;AACF;AAIA,IAAM,WAAW;CACf;CACA;CACA;CACA;CAEA;AACF;AAEA,IAAa,sBAAsB;AAEnC,IAAa,oBAAoB;CAC/B,GAAG;CACH;CACA;AACF;AAEA,IAAa,kBAAkB,OAC7B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,UAAU;GACV,QAAQ;EACV;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB,CAChB;EAAE,OAAO;EAAY,WAAW;EAAQ,OAAO;CAAoB,GACnE;EAAE,OAAO;EAAU,WAAW;EAAQ,OAAO;CAAkB,CACjE;CACA,iBAAiB;EACf,OAAO;EACP,WAAW;CACb;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '../../styled'\n\nexport const standardVariant = [\n  'before:bg-neutral-solid',\n  'bg-surface',\n  'border',\n  'border-neutral-solid',\n  'text-subtle',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-accent',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-neutral-solid!',\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  // Lifts the ring above the neighbouring items that would cover it\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-accent-hover'\n]\n\nexport const modernVariant = [\n  'bg-neutral',\n  'border-0',\n  'text-subtle',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-surface',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-subtle!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-default',\n  'not-disabled:focus-visible:data-[state=off]:border-neutral-solid!',\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  // Lifts the ring above the neighbouring items that would cover it\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:text-accent-hover'\n]\n\nexport const ToggleGroupItem = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      appearance: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    defaultVariants: {\n      appearance: 'standard'\n    }\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF;AAEA,IAAa,kBAAkB,OAC7B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,YAAY,WACd;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/toggle-group/ToggleGroupRoot.d.ts

@@ -11,8 +11,7 @@ export declare const StyledRoot: import("../..").PolymorphicComponent<({ ref, di
     isFullWidth?: boolean | undefined;
     hasGap?: boolean | undefined;
     direction?: "column" | "row" | undefined;
-    theme?: "modern" | "standard" | undefined;
-    colorMode?: "dark" | "light" | undefined;
+    appearance?: "modern" | "standard" | undefined;
 }>;
-export declare const ToggleGroupRoot: ({ ref, orientation, gap, isFullWidth, children, theme, colorMode, wrap, ...rest }: React.ComponentProps<typeof StyledRoot> & RootType) => React.JSX.Element;
+export declare const ToggleGroupRoot: ({ ref, orientation, gap, isFullWidth, children, appearance, wrap, ...rest }: React.ComponentProps<typeof StyledRoot> & RootType) => React.JSX.Element;
 export {};

package/dist/components/toggle-group/ToggleGroupRoot.js

@@ -28,20 +28,16 @@ var StyledRoot = styled(ToggleGroup.Root, {
 			column: [],
 			row: []
 		},
-		theme: {
+		appearance: {
 			standard: [],
-			modern: ["bg-grey-200"]
-		},
-		colorMode: {
-			light: [],
-			dark: []
+			modern: ["bg-neutral"]
 		}
 	},
 	compoundVariants: [
 		{
 			hasGap: false,
 			direction: "row",
-			theme: "standard",
+			appearance: "standard",
 			class: [
 				"**:data-radix-collection-item:first:rounded-l-md",
 				"**:data-radix-collection-item:last:rounded-r-md",
@@ -58,7 +54,7 @@ var StyledRoot = styled(ToggleGroup.Root, {
 		{
 			hasGap: false,
 			direction: "column",
-			theme: "standard",
+			appearance: "standard",
 			class: [
 				"**:data-radix-collection-item:first:rounded-t-sm",
 				"**:data-radix-collection-item:last:rounded-b-sm",
@@ -73,27 +69,17 @@ var StyledRoot = styled(ToggleGroup.Root, {
 		},
 		{
 			hasGap: false,
-			theme: "modern",
+			appearance: "modern",
 			class: []
 		},
 		{
 			hasGap: false,
-			theme: "standard",
+			appearance: "standard",
 			class: [
 				"**:data-radix-collection-item:bg-transparent",
 				"**:data-radix-collection-item:rounded-none",
-				"bg-white"
+				"bg-surface"
 			]
-		},
-		{
-			theme: "standard",
-			colorMode: "dark",
-			class: ["bg-transparent"]
-		},
-		{
-			theme: "modern",
-			colorMode: "dark",
-			class: ["bg-grey-800"]
 		}
 	]
 });
@@ -104,7 +90,7 @@ var gapClassMap = {
 	3: "gap-3"
 };
 var orientationToDirection = (orientation) => orientation === "horizontal" ? "row" : "column";
-var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, children, theme = "standard", colorMode = "light", wrap, ...rest }) => {
+var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, children, appearance = "standard", wrap, ...rest }) => {
 	const hasGap = typeof gap === "number";
 	return /* @__PURE__ */ jsx(StyledRoot, {
 		ref,
@@ -112,16 +98,14 @@ var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, chil
 		hasGap,
 		isFullWidth,
 		orientation,
-		theme,
-		colorMode,
+		appearance,
 		...rest,
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap"),
 			children: React$1.Children.toArray(children).map((child) => {
 				if (React$1.isValidElement(child)) return React$1.cloneElement(child, {
 					...child.props,
-					theme,
-					colorMode
+					appearance
 				});
 				return child;
 			})

package/dist/components/toggle-group/ToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ToggleGroup } from '../../utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n  gap?: 0 | 1 | 2 | 3\n  wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  base: ['w-fit'],\n  variants: {\n    isFullWidth: {\n      true: [\n        '**:data-radix-collection-item:basis-0',\n        '**:data-radix-collection-item:grow',\n        'w-full'\n      ],\n      false: ['w-auto']\n    },\n    hasGap: {\n      true: ['**:data-radix-collection-item:rounded-md'],\n      false: [\n        '**:data-radix-collection-item:not-last:before:absolute',\n        \"**:data-radix-collection-item:not-last:before:content-['']\",\n        '**:data-radix-collection-item:relative',\n        'rounded-md'\n      ]\n    },\n    direction: {\n      column: [],\n      row: []\n    },\n    theme: {\n      standard: [],\n      modern: ['bg-grey-200']\n    },\n    colorMode: {\n      light: [],\n      dark: []\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-l-md',\n        '**:data-radix-collection-item:last:rounded-r-md',\n        '**:data-radix-collection-item:not-first:border-l-transparent',\n        '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:before:right-0',\n        '**:data-radix-collection-item:not-last:before:-top-px',\n        '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n        '**:data-radix-collection-item:not-last:before:w-px',\n        '**:data-radix-collection-item:not-last:border-r-transparent',\n        '**:data-radix-collection-item:rounded-none'\n      ]\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-t-sm',\n        '**:data-radix-collection-item:last:rounded-b-sm',\n        '**:data-radix-collection-item:not-first:border-t-transparent',\n        '**:data-radix-collection-item:not-last:before:bottom-0',\n        '**:data-radix-collection-item:not-last:before:h-px',\n        '**:data-radix-collection-item:not-last:before:-left-px',\n        '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n        '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:border-b-transparent'\n      ]\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      class: []\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:bg-transparent',\n        '**:data-radix-collection-item:rounded-none',\n        'bg-white'\n      ]\n    },\n    // After the light compounds so these win the merge\n    {\n      theme: 'standard',\n      colorMode: 'dark',\n      class: ['bg-transparent']\n    },\n    {\n      theme: 'modern',\n      colorMode: 'dark',\n      class: ['bg-grey-800']\n    }\n  ]\n})\n\nconst gapClassMap = {\n  0: 'gap-0.5',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = ({\n  ref,\n  orientation = 'horizontal',\n  gap,\n  isFullWidth,\n  children,\n  theme = 'standard',\n  colorMode = 'light',\n  wrap,\n  ...rest\n}: React.ComponentProps<typeof StyledRoot> & RootType) => {\n  const hasGap = typeof gap === 'number'\n  const direction = orientationToDirection(orientation)\n\n  return (\n    <StyledRoot\n      ref={ref}\n      direction={direction}\n      hasGap={hasGap}\n      isFullWidth={isFullWidth}\n      orientation={orientation}\n      theme={theme}\n      colorMode={colorMode}\n      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          hasGap && gapClassMap[gap],\n          orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n          wrap ? 'flex-wrap' : 'flex-nowrap'\n        )}\n      >\n        {\n          React.Children.toArray(children).map((child) => {\n            if (\n              React.isValidElement<{\n                theme?: typeof theme\n                colorMode?: typeof colorMode\n              }>(child)\n            ) {\n              return React.cloneElement(child, {\n                ...child.props,\n                theme,\n                colorMode\n              })\n            }\n            return child\n          }) as React.ReactElement<unknown>[]\n        }\n      </div>\n    </StyledRoot>\n  )\n}\n"],"mappings":";;;;;;AAYA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,OAAO;CACd,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO,CAAC,QAAQ;EAClB;EACA,QAAQ;GACN,MAAM,CAAC,0CAA0C;GACjD,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,QAAQ,CAAC;GACT,KAAK,CAAC;EACR;EACA,OAAO;GACL,UAAU,CAAC;GACX,QAAQ,CAAC,aAAa;EACxB;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO,CAAC;EACV;EACA;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;GACF;EACF;EAEA;GACE,OAAO;GACP,WAAW;GACX,OAAO,CAAC,gBAAgB;EAC1B;EACA;GACE,OAAO;GACP,WAAW;GACX,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAED,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,mBAAmB,EAC9B,KACA,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,YAAY,SACZ,MACA,GAAG,WACqD;CACxD,MAAM,SAAS,OAAO,QAAQ;CAG9B,OACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,WAK1B;EACH;EACK;EACA;EACN;EACI;EACX,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,aACvB;aAGE,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;IAC9C,IACE,QAAM,eAGH,KAAK,GAER,OAAO,QAAM,aAAa,OAAO;KAC/B,GAAG,MAAM;KACT;KACA;IACF,CAAC;IAEH,OAAO;GACT,CAAC;EAEA,CAAA;CACK,CAAA;AAEhB"}
+{"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ToggleGroup } from '../../utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n  gap?: 0 | 1 | 2 | 3\n  wrap?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  base: ['w-fit'],\n  variants: {\n    isFullWidth: {\n      true: [\n        '**:data-radix-collection-item:basis-0',\n        '**:data-radix-collection-item:grow',\n        'w-full'\n      ],\n      false: ['w-auto']\n    },\n    hasGap: {\n      true: ['**:data-radix-collection-item:rounded-md'],\n      false: [\n        '**:data-radix-collection-item:not-last:before:absolute',\n        \"**:data-radix-collection-item:not-last:before:content-['']\",\n        '**:data-radix-collection-item:relative',\n        'rounded-md'\n      ]\n    },\n    direction: {\n      column: [],\n      row: []\n    },\n    appearance: {\n      standard: [],\n      modern: ['bg-neutral']\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      appearance: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-l-md',\n        '**:data-radix-collection-item:last:rounded-r-md',\n        '**:data-radix-collection-item:not-first:border-l-transparent',\n        '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:before:right-0',\n        '**:data-radix-collection-item:not-last:before:-top-px',\n        '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n        '**:data-radix-collection-item:not-last:before:w-px',\n        '**:data-radix-collection-item:not-last:border-r-transparent',\n        '**:data-radix-collection-item:rounded-none'\n      ]\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      appearance: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-t-sm',\n        '**:data-radix-collection-item:last:rounded-b-sm',\n        '**:data-radix-collection-item:not-first:border-t-transparent',\n        '**:data-radix-collection-item:not-last:before:bottom-0',\n        '**:data-radix-collection-item:not-last:before:h-px',\n        '**:data-radix-collection-item:not-last:before:-left-px',\n        '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n        '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:border-b-transparent'\n      ]\n    },\n    {\n      hasGap: false,\n      appearance: 'modern',\n      class: []\n    },\n    {\n      hasGap: false,\n      appearance: 'standard',\n      class: [\n        '**:data-radix-collection-item:bg-transparent',\n        '**:data-radix-collection-item:rounded-none',\n        'bg-surface'\n      ]\n    }\n  ]\n})\n\nconst gapClassMap = {\n  0: 'gap-0.5',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3'\n}\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot = ({\n  ref,\n  orientation = 'horizontal',\n  gap,\n  isFullWidth,\n  children,\n  appearance = 'standard',\n  wrap,\n  ...rest\n}: React.ComponentProps<typeof StyledRoot> & RootType) => {\n  const hasGap = typeof gap === 'number'\n  const direction = orientationToDirection(orientation)\n\n  return (\n    <StyledRoot\n      ref={ref}\n      direction={direction}\n      hasGap={hasGap}\n      isFullWidth={isFullWidth}\n      orientation={orientation}\n      appearance={appearance}\n      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          hasGap && gapClassMap[gap],\n          orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n          wrap ? 'flex-wrap' : 'flex-nowrap'\n        )}\n      >\n        {\n          React.Children.toArray(children).map((child) => {\n            if (\n              React.isValidElement<{ appearance?: typeof appearance }>(child)\n            ) {\n              return React.cloneElement(child, { ...child.props, appearance })\n            }\n            return child\n          }) as React.ReactElement<unknown>[]\n        }\n      </div>\n    </StyledRoot>\n  )\n}\n"],"mappings":";;;;;;AAYA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,OAAO;CACd,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;GACF;GACA,OAAO,CAAC,QAAQ;EAClB;EACA,QAAQ;GACN,MAAM,CAAC,0CAA0C;GACjD,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,QAAQ,CAAC;GACT,KAAK,CAAC;EACR;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ,CAAC,YAAY;EACvB;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,YAAY;GACZ,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,WAAW;GACX,YAAY;GACZ,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,QAAQ;GACR,YAAY;GACZ,OAAO,CAAC;EACV;EACA;GACE,QAAQ;GACR,YAAY;GACZ,OAAO;IACL;IACA;IACA;GACF;EACF;CACF;AACF,CAAC;AAED,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,mBAAmB,EAC9B,KACA,cAAc,cACd,KACA,aACA,UACA,aAAa,YACb,MACA,GAAG,WACqD;CACxD,MAAM,SAAS,OAAO,QAAQ;CAG9B,OACE,oBAAC,YAAD;EACO;EACM,WALG,uBAAuB,WAK1B;EACH;EACK;EACA;EACD;EACZ,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,aACvB;aAGE,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;IAC9C,IACE,QAAM,eAAmD,KAAK,GAE9D,OAAO,QAAM,aAAa,OAAO;KAAE,GAAG,MAAM;KAAO;IAAW,CAAC;IAEjE,OAAO;GACT,CAAC;EAEA,CAAA;CACK,CAAA;AAEhB"}

package/dist/components/toggle-group/index.d.ts

@@ -1,10 +1,9 @@
 export declare const ToggleGroup: {
     Item: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
-        theme?: "modern" | "standard" | undefined;
-        colorMode?: "dark" | "light" | undefined;
+        appearance?: "modern" | "standard" | undefined;
     }>;
-    Button: ({ ref, size, theme, colorMode, children, ...rest }: React.ComponentProps<typeof import("./ToggleGroupButton").StyledButton>) => import("react").JSX.Element;
-    Root: ({ ref, orientation, gap, isFullWidth, children, theme, colorMode, wrap, ...rest }: React.ComponentProps<typeof import("./ToggleGroupRoot").StyledRoot> & {
+    Button: ({ ref, size, appearance, children, ...rest }: React.ComponentProps<typeof import("./ToggleGroupButton").StyledButton>) => import("react").JSX.Element;
+    Root: ({ ref, orientation, gap, isFullWidth, children, appearance, wrap, ...rest }: React.ComponentProps<typeof import("./ToggleGroupRoot").StyledRoot> & {
         orientation?: 'horizontal' | 'vertical';
         isFullWidth?: boolean;
         gap?: 0 | 1 | 2 | 3;

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { Root } from '@radix-ui/react-tooltip';
+import { Portal, Root } from '@radix-ui/react-tooltip';
 import * as React from 'react';
 type TooltipProps = React.ComponentProps<typeof Root>;
 export declare const Tooltip: {
@@ -11,7 +11,7 @@ export declare const Tooltip: {
         as?: never;
     } & Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "as" | "size"> & import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
     Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Portal: React.FC<import("@radix-ui/react-tooltip").TooltipPortalProps>;
+    Portal: ({ children, ...rest }: React.ComponentProps<typeof Portal>) => React.JSX.Element;
     Provider: React.FC<import("@radix-ui/react-tooltip").TooltipProviderProps>;
 };
 export {};

package/dist/components/tooltip/Tooltip.js

@@ -1,8 +1,13 @@
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
 import { TooltipContent } from "./TooltipContent.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
 //#region src/components/tooltip/Tooltip.tsx
+var TooltipPortal = ({ children, ...rest }) => /* @__PURE__ */ jsx(Portal, {
+	...rest,
+	children: /* @__PURE__ */ jsx(ThemePortalScope, { children })
+});
 var TooltipComponent = ({ children, delayDuration = 350, ...rest }) => /* @__PURE__ */ jsx(Root, {
 	delayDuration,
 	...rest,
@@ -11,7 +16,7 @@ var TooltipComponent = ({ children, delayDuration = 350, ...rest }) => /* @__PUR
 var Tooltip = /* @__PURE__ */ Object.assign(TooltipComponent, {
 	Content: TooltipContent,
 	Trigger,
-	Portal,
+	Portal: TooltipPortal,
 	Provider
 });
 TooltipComponent.displayName = "Tooltip";

package/dist/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Portal, Provider, Root, Trigger } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { TooltipContent } from './TooltipContent'\n\ntype TooltipProps = React.ComponentProps<typeof Root>\n\nconst TooltipComponent = ({\n  children,\n  delayDuration = 350,\n  ...rest\n}: TooltipProps) => (\n  <Root delayDuration={delayDuration} {...rest}>\n    {children}\n  </Root>\n)\n\nexport const Tooltip = /* @__PURE__ */ Object.assign(TooltipComponent, {\n  Content: TooltipContent,\n  Trigger: Trigger,\n  Portal: Portal,\n  Provider: Provider\n})\n\nTooltipComponent.displayName = 'Tooltip'\n"],"mappings":";;;;;AAOA,IAAM,oBAAoB,EACxB,UACA,gBAAgB,KAChB,GAAG,WAEH,oBAAC,MAAD;CAAqB;CAAe,GAAI;CACrC;AACG,CAAA;AAGR,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,SAAS;CACA;CACD;CACE;AACZ,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Portal, Provider, Root, Trigger } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { TooltipContent } from './TooltipContent'\n\nconst TooltipPortal = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof Portal>) => (\n  <Portal {...rest}>\n    <ThemePortalScope>{children}</ThemePortalScope>\n  </Portal>\n)\n\ntype TooltipProps = React.ComponentProps<typeof Root>\n\nconst TooltipComponent = ({\n  children,\n  delayDuration = 350,\n  ...rest\n}: TooltipProps) => (\n  <Root delayDuration={delayDuration} {...rest}>\n    {children}\n  </Root>\n)\n\nexport const Tooltip = /* @__PURE__ */ Object.assign(TooltipComponent, {\n  Content: TooltipContent,\n  Trigger: Trigger,\n  Portal: TooltipPortal,\n  Provider: Provider\n})\n\nTooltipComponent.displayName = 'Tooltip'\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,EACrB,UACA,GAAG,WAEH,oBAAC,QAAD;CAAQ,GAAI;WACV,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;AACxC,CAAA;AAKV,IAAM,oBAAoB,EACxB,UACA,gBAAgB,KAChB,GAAG,WAEH,oBAAC,MAAD;CAAqB;CAAe,GAAI;CACrC;AACG,CAAA;AAGR,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,SAAS;CACA;CACT,QAAQ;CACE;AACZ,CAAC;AAED,iBAAiB,cAAc"}

package/dist/components/tooltip/TooltipContent.js

@@ -5,10 +5,12 @@ import { Arrow, Content } from "@radix-ui/react-tooltip";
 //#region src/components/tooltip/TooltipContent.tsx
 var StyledContent = styled(Content, {
 	base: [
-		"bg-grey-900",
+		"bg-inverse",
 		"rounded-sm",
-		"shadow-sm",
-		"text-white",
+		"shadow-(--shadow-floating-sm)",
+		"forced-colors:border",
+		"forced-colors:border-[CanvasText]",
+		"text-on-inverse",
 		"font-body",
 		"text-sm",
 		"leading-normal",
@@ -33,7 +35,7 @@ var StyledContent = styled(Content, {
 	} }
 });
 var StyledArrow = styled(Arrow, { base: [
-	"fill-grey-900",
+	"fill-(--background-color-inverse)",
 	"in-data-[align=end]:mr-2",
 	"in-data-[align=start]:ml-2"
 ] });

package/dist/components/tooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.js","names":[],"sources":["../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { Arrow, Content } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-grey-900',\n    'rounded-sm',\n    'shadow-sm',\n    'text-white',\n    'font-body',\n    'text-sm',\n    'leading-normal',\n    'whitespace-normal',\n    'px-3',\n    'py-2',\n    'z-10',\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=delayed-open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-25'],\n      md: ['max-w-[250px]'],\n      lg: ['max-w-100']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: [\n    'fill-grey-900',\n    'in-data-[align=end]:mr-2',\n    'in-data-[align=start]:ml-2'\n  ]\n})\n\ntype TooltipContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content>\n\nexport const TooltipContent = ({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  size = 'md',\n  ...rest\n}: TooltipContentProps) => (\n  <StyledContent side={side} sideOffset={sideOffset} size={size} {...rest}>\n    {children}\n    <StyledArrow />\n  </StyledContent>\n)\n"],"mappings":";;;;;AAKA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,eAAe;EACpB,IAAI,CAAC,WAAW;CAClB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,OAAO,MACP,GAAG,WAEH,qBAAC,eAAD;CAAqB;CAAkB;CAAkB;CAAM,GAAI;WAAnE,CACG,UACD,oBAAC,aAAD,CAAc,CAAA,CACD"}
+{"version":3,"file":"TooltipContent.js","names":[],"sources":["../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { Arrow, Content } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-inverse',\n    'rounded-sm',\n    'shadow-(--shadow-floating-sm)',\n    // Forced colours drop box-shadow, so the edge needs a real border\n    'forced-colors:border',\n    'forced-colors:border-[CanvasText]',\n    'text-on-inverse',\n    'font-body',\n    'text-sm',\n    'leading-normal',\n    'whitespace-normal',\n    'px-3',\n    'py-2',\n    'z-10',\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=delayed-open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-25'],\n      md: ['max-w-[250px]'],\n      lg: ['max-w-100']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: [\n    'fill-(--background-color-inverse)',\n    'in-data-[align=end]:mr-2',\n    'in-data-[align=start]:ml-2'\n  ]\n})\n\ntype TooltipContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content>\n\nexport const TooltipContent = ({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  size = 'md',\n  ...rest\n}: TooltipContentProps) => (\n  <StyledContent side={side} sideOffset={sideOffset} size={size} {...rest}>\n    {children}\n    <StyledArrow />\n  </StyledContent>\n)\n"],"mappings":";;;;;AAKA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,eAAe;EACpB,IAAI,CAAC,WAAW;CAClB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,OAAO,MACP,GAAG,WAEH,qBAAC,eAAD;CAAqB;CAAkB;CAAkB;CAAM,GAAI;WAAnE,CACG,UACD,oBAAC,aAAD,CAAc,CAAA,CACD"}

package/dist/components/top-bar/TopBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Theme } from '../../styled';
 declare const StyledRoot: import("../..").PolymorphicComponent<"header", {
     hasScrolled?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     size?: ("lg" | "md" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md">>) | undefined;
@@ -7,9 +6,9 @@ declare const StyledRoot: import("../..").PolymorphicComponent<"header", {
     appearance?: ("rounded" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "rounded" | "standard">>) | undefined;
 }>;
 declare const Container: import("../..").PolymorphicComponent<"div", unknown>;
-type TopBarProps = React.ComponentProps<typeof StyledRoot> & React.ComponentProps<typeof Container> & React.ComponentProps<typeof Theme>;
+type TopBarProps = React.ComponentProps<typeof StyledRoot> & React.ComponentProps<typeof Container>;
 export declare const TopBar: {
-    ({ size, diffused, theme, appearance, ...rest }: React.PropsWithChildren<TopBarProps>): React.JSX.Element;
+    ({ size, diffused, appearance, ...rest }: React.PropsWithChildren<TopBarProps>): React.JSX.Element;
     displayName: string;
 } & {
     Brand: import("../..").PolymorphicComponent<"a", unknown>;
@@ -27,14 +26,16 @@ export declare const TopBar: {
         weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
         family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
     }>;
-    ActionIcon: ({ ref, icon, ...rest }: Omit<Omit<{
-        theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+    ActionIcon: ({ ref, icon, ...rest }: Omit<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;

package/dist/components/top-bar/TopBar.js

@@ -1,7 +1,6 @@
-import { Theme, styled } from "../../styled.js";
+import { styled } from "../../styled.js";
 import { Divider } from "../divider/Divider.js";
 import { useWindowScrollPosition } from "../../utilities/hooks/useWindowScrollPosition.js";
-import { colorSchemes } from "./TopBar.colorscheme.config.js";
 import { TopBarActionIcon } from "./TopBarActionIcon.js";
 import { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from "./TopBarBrand.js";
 import "react";
@@ -9,11 +8,11 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/top-bar/TopBar.tsx
 var TopBarDivider = () => /* @__PURE__ */ jsx(Divider, {
 	orientation: "vertical",
-	className: "bg-divider h-6"
+	className: "h-6"
 });
 var StyledRoot = styled("header", {
 	base: [
-		"bg-(--background)",
+		"bg-surface",
 		"sticky",
 		"flex",
 		"items-center",
@@ -23,26 +22,26 @@ var StyledRoot = styled("header", {
 		"ease-out"
 	],
 	variants: {
-		hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
+		hasScrolled: { true: ["shadow-(--shadow-edge-bottom)"] },
 		size: {
 			md: ["h-safe-offset-top-16", "pt-safe"],
 			lg: ["h-safe-offset-top-24", "pt-safe"]
 		},
-		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
+		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,var(--background-color-surface)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
 		appearance: {
 			standard: [
 				"w-screen",
 				"max-w-full",
 				"top-0",
 				"border-b",
-				"border-b-(--border-bottom)"
+				"border-b-subtle"
 			],
 			rounded: [
 				"w-full",
 				"top-safe-offset-2",
 				"p-2",
 				"border",
-				"border-white",
+				"border-(--background-color-surface)",
 				"rounded-full"
 			]
 		}
@@ -56,17 +55,14 @@ var Container = styled("div", { base: [
 	"w-full",
 	"md:mx-8"
 ] });
-var TopBarComponent = ({ size = "md", diffused, theme, appearance = "standard", ...rest }) => {
+var TopBarComponent = ({ size = "md", diffused, appearance = "standard", ...rest }) => {
 	const { y: scrollPositionY } = useWindowScrollPosition();
-	return /* @__PURE__ */ jsx(Theme, {
-		theme: theme || colorSchemes["light"],
-		children: /* @__PURE__ */ jsx(StyledRoot, {
-			hasScrolled: !!scrollPositionY,
-			diffused,
-			appearance,
-			size,
-			children: /* @__PURE__ */ jsx(Container, { ...rest })
-		})
+	return /* @__PURE__ */ jsx(StyledRoot, {
+		hasScrolled: !!scrollPositionY,
+		diffused,
+		appearance,
+		size,
+		children: /* @__PURE__ */ jsx(Container, { ...rest })
 	});
 };
 var TopBar = /* @__PURE__ */ Object.assign(TopBarComponent, {

package/dist/components/top-bar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '../../styled'\nimport { useWindowScrollPosition } from '../../utilities/hooks/useWindowScrollPosition'\nimport { Divider } from '../divider/Divider'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n  'header',\n  {\n    base: [\n      'bg-(--background)',\n      'sticky',\n      'flex',\n      'items-center',\n      'z-15',\n      'transition-shadow',\n      'duration-200',\n      'ease-out'\n    ],\n    variants: {\n      hasScrolled: {\n        true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n      },\n      size: {\n        // height includes the inset, pt-safe pushes content below it\n        md: ['h-safe-offset-top-16', 'pt-safe'],\n        lg: ['h-safe-offset-top-24', 'pt-safe']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      },\n      appearance: {\n        standard: [\n          'w-screen',\n          'max-w-full',\n          // inset is cleared inside the bar, so the root stays at the top\n          'top-0',\n          'border-b',\n          'border-b-(--border-bottom)'\n        ],\n        rounded: [\n          'w-full',\n          'top-safe-offset-2',\n          'p-2',\n          'border',\n          'border-white',\n          'rounded-full'\n        ]\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nconst Container = styled('div', {\n  base: ['flex', 'items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n  React.ComponentProps<typeof Container> &\n  React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  theme,\n  appearance = 'standard',\n  ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <Theme theme={theme || topBarColorSchemes['light']}>\n      <StyledRoot\n        hasScrolled={!!scrollPositionY}\n        diffused={diffused}\n        appearance={appearance}\n        size={size}\n      >\n        <Container {...rest} />\n      </StyledRoot>\n    </Theme>\n  )\n}\n\nexport const TopBar = /* @__PURE__ */ Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"mappings":";;;;;;;;;AASA,IAAM,sBACJ,oBAAC,SAAD;CAAS,aAAY;CAAW,WAAU;AAAkB,CAAA;AAG9D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,8CAA8C,EACvD;EACA,MAAM;GAEJ,IAAI,CAAC,wBAAwB,SAAS;GACtC,IAAI,CAAC,wBAAwB,SAAS;EACxC;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;EACA,YAAY;GACV,UAAU;IACR;IACA;IAEA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;AAAS,EACpE,CAAC;AAMD,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,wBAAwB;CAEvD,OACE,oBAAC,OAAD;EAAO,OAAO,SAAS,aAAmB;YACxC,oBAAC,YAAD;GACE,aAAa,CAAC,CAAC;GACL;GACE;GACN;aAEN,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;EACZ,CAAA;CACP,CAAA;AAEX;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useWindowScrollPosition } from '../../utilities/hooks/useWindowScrollPosition'\nimport { Divider } from '../divider/Divider'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => <Divider orientation=\"vertical\" className=\"h-6\" />\n\nconst StyledRoot = styled(\n  'header',\n  {\n    base: [\n      'bg-surface',\n      'sticky',\n      'flex',\n      'items-center',\n      'z-15',\n      'transition-shadow',\n      'duration-200',\n      'ease-out'\n    ],\n    variants: {\n      hasScrolled: {\n        true: ['shadow-(--shadow-edge-bottom)']\n      },\n      size: {\n        // height includes the inset, pt-safe pushes content below it\n        md: ['h-safe-offset-top-16', 'pt-safe'],\n        lg: ['h-safe-offset-top-24', 'pt-safe']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,var(--background-color-surface)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      },\n      appearance: {\n        standard: [\n          'w-screen',\n          'max-w-full',\n          // inset is cleared inside the bar, so the root stays at the top\n          'top-0',\n          'border-b',\n          'border-b-subtle'\n        ],\n        rounded: [\n          'w-full',\n          'top-safe-offset-2',\n          'p-2',\n          'border',\n          'border-(--background-color-surface)',\n          'rounded-full'\n        ]\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\nconst Container = styled('div', {\n  base: ['flex', 'items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n  React.ComponentProps<typeof Container>\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  appearance = 'standard',\n  ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot\n      hasScrolled={!!scrollPositionY}\n      diffused={diffused}\n      appearance={appearance}\n      size={size}\n    >\n      <Container {...rest} />\n    </StyledRoot>\n  )\n}\n\nexport const TopBar = /* @__PURE__ */ Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"mappings":";;;;;;;;AAQA,IAAM,sBAAsB,oBAAC,SAAD;CAAS,aAAY;CAAW,WAAU;AAAO,CAAA;AAE7E,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,+BAA+B,EACxC;EACA,MAAM;GAEJ,IAAI,CAAC,wBAAwB,SAAS;GACtC,IAAI,CAAC,wBAAwB,SAAS;EACxC;EACA,UAAU,EACR,MAAM,CACJ,6FACA,qCACF,EACF;EACA,YAAY;GACV,UAAU;IACR;IACA;IAEA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;AAAS,EACpE,CAAC;AAKD,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,wBAAwB;CAEvD,OACE,oBAAC,YAAD;EACE,aAAa,CAAC,CAAC;EACL;EACE;EACN;YAEN,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;CACZ,CAAA;AAEhB;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/top-bar/TopBarActionIcon.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 var TopBarActionIcon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsx(ActionIcon, {
 	size: "md",
 	appearance: "simple",
-	theme: "neutral",
+	tone: "neutral",
 	ref,
 	...rest,
 	children: /* @__PURE__ */ jsx(Icon, { is: icon })

package/dist/components/top-bar/TopBarActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBarActionIcon.js","names":[],"sources":["../../../src/components/top-bar/TopBarActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\ntype TopBarActionIconProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'size' | 'children'\n> & {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>\n  label: string\n}\n\nexport const TopBarActionIcon = ({\n  ref,\n  icon,\n  ...rest\n}: TopBarActionIconProps) => (\n  <ActionIcon size=\"md\" appearance=\"simple\" theme=\"neutral\" ref={ref} {...rest}>\n    <Icon is={icon} />\n  </ActionIcon>\n)\n"],"mappings":";;;;;AAaA,IAAa,oBAAoB,EAC/B,KACA,MACA,GAAG,WAEH,oBAAC,YAAD;CAAY,MAAK;CAAK,YAAW;CAAS,OAAM;CAAe;CAAK,GAAI;WACtE,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;AACP,CAAA"}
+{"version":3,"file":"TopBarActionIcon.js","names":[],"sources":["../../../src/components/top-bar/TopBarActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\ntype TopBarActionIconProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'size' | 'children'\n> & {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>\n  label: string\n}\n\nexport const TopBarActionIcon = ({\n  ref,\n  icon,\n  ...rest\n}: TopBarActionIconProps) => (\n  <ActionIcon size=\"md\" appearance=\"simple\" tone=\"neutral\" ref={ref} {...rest}>\n    <Icon is={icon} />\n  </ActionIcon>\n)\n"],"mappings":";;;;;AAaA,IAAa,oBAAoB,EAC/B,KACA,MACA,GAAG,WAEH,oBAAC,YAAD;CAAY,MAAK;CAAK,YAAW;CAAS,MAAK;CAAe;CAAK,GAAI;WACrE,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;AACP,CAAA"}

package/dist/components/top-bar/TopBarBrand.js

@@ -10,12 +10,12 @@ var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => /* @__
 	alt,
 	className: cn("h-8", "mr-3", "w-auto", className)
 });
-var TopBarBrandName = styled(Text, { base: ["text-grey-800"] });
+var TopBarBrandName = styled(Text, { base: ["text-subtle"] });
 var TopBarBrand = styled("a", { base: [
 	"flex",
 	"items-center",
 	"no-underline",
-	"text-grey-800",
+	"text-subtle",
 	"hover:no-underline",
 	"focus:no-underline"
 ] });

package/dist/components/top-bar/TopBarBrand.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const TopBarBrandLogo = ({\n  src,\n  alt = 'Atom Learning logo',\n  className\n}: Pick<React.ComponentProps<typeof Image>, 'src' | 'alt'> & {\n  className?: string\n}) => (\n  <Image\n    src={src}\n    alt={alt}\n    className={cn('h-8', 'mr-3', 'w-auto', className)}\n  />\n)\n\nexport const TopBarBrandName = styled(Text, {\n  base: ['text-grey-800']\n})\n\nexport const TopBarBrand = styled('a', {\n  base: [\n    'flex',\n    'items-center',\n    'no-underline',\n    'text-grey-800',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n"],"mappings":";;;;;;;AAMA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAIA,oBAAC,OAAD;CACO;CACA;CACL,WAAW,GAAG,OAAO,QAAQ,UAAU,SAAS;AACjD,CAAA;AAGH,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,eAAe,EACxB,CAAC;AAED,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}
+{"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const TopBarBrandLogo = ({\n  src,\n  alt = 'Atom Learning logo',\n  className\n}: Pick<React.ComponentProps<typeof Image>, 'src' | 'alt'> & {\n  className?: string\n}) => (\n  <Image\n    src={src}\n    alt={alt}\n    className={cn('h-8', 'mr-3', 'w-auto', className)}\n  />\n)\n\nexport const TopBarBrandName = styled(Text, {\n  base: ['text-subtle']\n})\n\nexport const TopBarBrand = styled('a', {\n  base: [\n    'flex',\n    'items-center',\n    'no-underline',\n    'text-subtle',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n"],"mappings":";;;;;;;AAMA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAIA,oBAAC,OAAD;CACO;CACA;CACL,WAAW,GAAG,OAAO,QAAQ,UAAU,SAAS;AACjD,CAAA;AAGH,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,aAAa,EACtB,CAAC;AAED,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}

package/dist/components/tree/TreeCollapsibleTrigger.js

@@ -34,7 +34,7 @@ var TreeCollapsibleTrigger = ({ children, label, className, onClick, ...rest })
 				size: "sm",
 				ref: setTriggerRef,
 				label,
-				theme: "neutral",
+				tone: "neutral",
 				hasTooltip: false,
 				onClick: (e) => e.stopPropagation(),
 				children: /* @__PURE__ */ jsx(Icon, { is: ChevronDown })

package/dist/components/tree/TreeCollapsibleTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsibleTrigger.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: [\n    'absolute',\n    'left-0',\n    'top-0',\n    'pointer-events-none',\n    '[&_svg]:duration-300',\n    '[&_svg]:transition-transform',\n    '[&[data-state=closed]>svg]:-rotate-90',\n    '[&[data-state=open]>svg]:rotate-0'\n  ]\n})\n\ntype NavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  onClick,\n  ...rest\n}: NavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.use(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={cn('cursor-pointer', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        triggerRef?.current?.click()\n      }}\n    >\n      <Trigger asChild>\n        <StyledActionIcon\n          size=\"sm\"\n          ref={setTriggerRef}\n          label={label}\n          theme=\"neutral\"\n          hasTooltip={false}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAQD,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,SACA,GAAG,WACwC;CAC3C,MAAM,EAAE,eAAe,eAAe,QAAM,IAAI,sBAAsB;CAEtE,OACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,SAAS;EACzC,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,YAAY,SAAS,MAAM;EAC7B;YANF,CAQE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,kBAAD;IACE,MAAK;IACL,KAAK;IACE;IACP,OAAM;IACN,YAAY;IACZ,UAAU,MAAM,EAAE,gBAAgB;cAElC,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACR,CAAA;EACX,CAAA,GACR,QACc;;AAErB"}
+{"version":3,"file":"TreeCollapsibleTrigger.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: [\n    'absolute',\n    'left-0',\n    'top-0',\n    'pointer-events-none',\n    '[&_svg]:duration-300',\n    '[&_svg]:transition-transform',\n    '[&[data-state=closed]>svg]:-rotate-90',\n    '[&[data-state=open]>svg]:rotate-0'\n  ]\n})\n\ntype NavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  onClick,\n  ...rest\n}: NavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.use(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={cn('cursor-pointer', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        triggerRef?.current?.click()\n      }}\n    >\n      <Trigger asChild>\n        <StyledActionIcon\n          size=\"sm\"\n          ref={setTriggerRef}\n          label={label}\n          tone=\"neutral\"\n          hasTooltip={false}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAQD,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,SACA,GAAG,WACwC;CAC3C,MAAM,EAAE,eAAe,eAAe,QAAM,IAAI,sBAAsB;CAEtE,OACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,SAAS;EACzC,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,YAAY,SAAS,MAAM;EAC7B;YANF,CAQE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,kBAAD;IACE,MAAK;IACL,KAAK;IACE;IACP,MAAK;IACL,YAAY;IACZ,UAAU,MAAM,EAAE,gBAAgB;cAElC,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACR,CAAA;EACX,CAAA,GACR,QACc;;AAErB"}