@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

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

@@ -1,9 +1,9 @@
-import { styled as e } from "../../styled.js";
-import { ToggleGroup as t } from "../../utilities/radix-overrides/toggle-group/index.js";
-import n from "clsx";
-import * as r from "react";
+import { styled } from "../../styled.js";
+import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/toggle-group/ToggleGroupRoot.tsx
-var i = e(t.Root, {
+var StyledRoot = styled(ToggleGroup.Root, {
 	base: ["w-fit"],
 	variants: {
 		isFullWidth: {
@@ -34,7 +34,7 @@ var i = e(t.Root, {
 	},
 	compoundVariants: [
 		{
-			hasGap: !1,
+			hasGap: false,
 			direction: "row",
 			theme: "standard",
 			class: [
@@ -51,7 +51,7 @@ var i = e(t.Root, {
 			]
 		},
 		{
-			hasGap: !1,
+			hasGap: false,
 			direction: "column",
 			theme: "standard",
 			class: [
@@ -67,12 +67,12 @@ var i = e(t.Root, {
 			]
 		},
 		{
-			hasGap: !1,
+			hasGap: false,
 			theme: "modern",
 			class: []
 		},
 		{
-			hasGap: !1,
+			hasGap: false,
 			theme: "standard",
 			class: [
 				"**:data-radix-collection-item:bg-transparent",
@@ -81,27 +81,34 @@ var i = e(t.Root, {
 			]
 		}
 	]
-}), a = {
+});
+var gapClassMap = {
 	0: "gap-0.5",
 	1: "gap-1",
 	2: "gap-2",
 	3: "gap-3"
-}, o = (e) => e === "horizontal" ? "row" : "column", s = r.forwardRef(({ className: e, orientation: t = "horizontal", gap: s, isFullWidth: c, children: l, theme: u = "standard", wrap: d, ...f }, p) => {
-	let m = typeof s == "number", h = o(t);
-	return /* @__PURE__ */ r.createElement(i, {
-		ref: p,
-		direction: h,
-		hasGap: m,
-		isFullWidth: c,
-		orientation: t,
-		theme: u,
-		...f
-	}, /* @__PURE__ */ r.createElement("div", { className: n("flex", m && a[s], t === "horizontal" ? "flex-row" : "flex-col", d ? "flex-wrap" : "flex-nowrap", e) }, r.Children.toArray(l).map((e) => r.isValidElement(e) ? r.cloneElement(e, {
-		...e.props,
-		theme: u
-	}) : e)));
+};
+var orientationToDirection = (orientation) => orientation === "horizontal" ? "row" : "column";
+var ToggleGroupRoot = React$1.forwardRef(({ orientation = "horizontal", gap, isFullWidth, children, theme = "standard", wrap, ...rest }, ref) => {
+	const hasGap = typeof gap === "number";
+	const direction = orientationToDirection(orientation);
+	return /* @__PURE__ */ React$1.createElement(StyledRoot, {
+		ref,
+		direction,
+		hasGap,
+		isFullWidth,
+		orientation,
+		theme,
+		...rest
+	}, /* @__PURE__ */ React$1.createElement("div", { className: clsx("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap") }, React$1.Children.toArray(children).map((child) => {
+		if (React$1.isValidElement(child)) return React$1.cloneElement(child, {
+			...child.props,
+			theme
+		});
+		return child;
+	})));
 });
 //#endregion
-export { s as ToggleGroupRoot };
+export { ToggleGroupRoot };
 
 //# sourceMappingURL=ToggleGroupRoot.js.map

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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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  },\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  ]\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 = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledRoot> & RootType\n>(\n  (\n    {\n      className,\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\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        {...rest}\n      >\n        <div\n          className={clsx(\n            'flex',\n            hasGap && gapClassMap[gap],\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n            wrap ? 'flex-wrap' : 'flex-nowrap',\n            className\n          )}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </div>\n      </StyledRoot>\n    )\n  }\n)\n"],"mappings":";;;;;AAaA,IAAa,IAAa,EAAO,EAAY,MAAM;CACjD,MAAM,CAAC,QAAQ;CACf,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACD;GACD,OAAO,CAAC,SAAS;GAClB;EACD,QAAQ;GACN,MAAM,CAAC,2CAA2C;GAClD,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,QAAQ,EAAE;GACV,KAAK,EAAE;GACR;EACD,OAAO;GACL,UAAU,EAAE;GACZ,QAAQ,CAAC,cAAc;GACxB;EACF;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO,EAAE;GACV;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;IACD;GACF;EACF;CACF,CAAC,EAEI,IAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ,EAEK,KAA0B,MAC9B,MAAgB,eAAe,QAAQ,UAE5B,IAAkB,EAAM,YAKjC,EACE,cACA,iBAAc,cACd,QACA,gBACA,aACA,WAAQ,YACR,SACA,GAAG,KAEL,MACG;CACH,IAAM,IAAS,OAAO,KAAQ,UACxB,IAAY,EAAuB,EAAY;AAErD,QACE,kBAAA,cAAC,GAAD;EACO;EACM;EACH;EACK;EACA;EACN;EACP,GAAI;EAoBO,EAlBX,kBAAA,cAAC,OAAD,EACE,WAAW,EACT,QACA,KAAU,EAAY,IACtB,MAAgB,eAAe,aAAa,YAC5C,IAAO,cAAc,eACrB,EACD,EAUG,EAPF,EAAM,SAAS,QAAQ,EAAS,CAAC,KAAK,MAChC,EAAM,eAAe,EAAM,GACtB,EAAM,aAAa,GAAO;EAAE,GAAG,EAAM;EAAO;EAAO,CAAC,GAEtD,EACP,CAEA,CACK;EAGlB"}
+{"version":3,"file":"ToggleGroupRoot.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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  },\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  ]\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 = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof StyledRoot> & RootType\n>(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\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        {...rest}\n      >\n        <div\n          className={clsx(\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 (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </div>\n      </StyledRoot>\n    )\n  }\n)\n"],"mappings":";;;;;AAaA,IAAa,aAAa,OAAO,YAAY,MAAM;CACjD,MAAM,CAAC,QAAQ;CACf,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACD;GACD,OAAO,CAAC,SAAS;GAClB;EACD,QAAQ;GACN,MAAM,CAAC,2CAA2C;GAClD,OAAO;IACL;IACA;IACA;IACA;IACD;GACF;EACD,WAAW;GACT,QAAQ,EAAE;GACV,KAAK,EAAE;GACR;EACD,OAAO;GACL,UAAU,EAAE;GACZ,QAAQ,CAAC,cAAc;GACxB;EACF;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,WAAW;GACX,OAAO;GACP,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO,EAAE;GACV;EACD;GACE,QAAQ;GACR,OAAO;GACP,OAAO;IACL;IACA;IACA;IACD;GACF;EACF;CACF,CAAC;AAEF,IAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,0BAA0B,gBAC9B,gBAAgB,eAAe,QAAQ;AAEzC,IAAa,kBAAkB,QAAM,YAKjC,EACE,cAAc,cACd,KACA,aACA,UACA,QAAQ,YACR,MACA,GAAG,QAEL,QACG;CACH,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,YAAY,uBAAuB,YAAY;AAErD,QACE,wBAAA,cAAC,YAAD;EACO;EACM;EACH;EACK;EACA;EACN;EACP,GAAI;EAmBO,EAjBX,wBAAA,cAAC,OAAD,EACE,WAAW,KACT,QACA,UAAU,YAAY,MACtB,gBAAgB,eAAe,aAAa,YAC5C,OAAO,cAAc,cACtB,EAUG,EAPF,QAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,UAAU;AAC9C,MAAI,QAAM,eAAe,MAAM,CAC7B,QAAO,QAAM,aAAa,OAAO;GAAE,GAAG,MAAM;GAAO;GAAO,CAAC;AAE7D,SAAO;GACP,CAEA,CACK;EAGlB"}

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

@@ -1,13 +1,13 @@
-import { ToggleGroupItem as e } from "./ToggleGroupItem.js";
-import { ToggleGroupButton as t } from "./ToggleGroupButton.js";
-import { ToggleGroupRoot as n } from "./ToggleGroupRoot.js";
+import { ToggleGroupItem } from "./ToggleGroupItem.js";
+import { ToggleGroupButton } from "./ToggleGroupButton.js";
+import { ToggleGroupRoot } from "./ToggleGroupRoot.js";
 //#region src/components/toggle-group/index.ts
-var r = {
-	Item: e,
-	Button: t,
-	Root: n
+var ToggleGroup = {
+	Item: ToggleGroupItem,
+	Button: ToggleGroupButton,
+	Root: ToggleGroupRoot
 };
 //#endregion
-export { r as ToggleGroup };
+export { ToggleGroup };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/toggle-group/index.ts"],"sourcesContent":["import { ToggleGroupButton as Button } from './ToggleGroupButton'\nimport { ToggleGroupItem as Item } from './ToggleGroupItem'\nimport { ToggleGroupRoot as Root } from './ToggleGroupRoot'\n\nexport const ToggleGroup = { Item, Button, Root }\n"],"mappings":";;;;AAIA,IAAa,IAAc;CAAE,MAAA;CAAM,QAAA;CAAQ,MAAA;CAAM"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/toggle-group/index.ts"],"sourcesContent":["import { ToggleGroupButton as Button } from './ToggleGroupButton'\nimport { ToggleGroupItem as Item } from './ToggleGroupItem'\nimport { ToggleGroupRoot as Root } from './ToggleGroupRoot'\n\nexport const ToggleGroup = { Item, Button, Root }\n"],"mappings":";;;;AAIA,IAAa,cAAc;CAAE,MAAA;CAAM,QAAA;CAAQ,MAAA;CAAM"}

package/dist/components/tooltip/Tooltip.js

@@ -1,18 +1,19 @@
-import { TooltipContent as e } from "./TooltipContent.js";
-import * as t from "react";
-import { Portal as n, Provider as r, Root as i, Trigger as a } from "@radix-ui/react-tooltip";
+import { TooltipContent } from "./TooltipContent.js";
+import * as React$1 from "react";
+import { Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
 //#region src/components/tooltip/Tooltip.tsx
-var o = ({ children: e, delayDuration: n = 350, ...r }) => /* @__PURE__ */ t.createElement(i, {
-	delayDuration: n,
-	...r
-}, e), s = Object.assign(o, {
-	Content: e,
-	Trigger: a,
-	Portal: n,
-	Provider: r
+var TooltipComponent = ({ children, delayDuration = 350, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(Root, {
+	delayDuration,
+	...remainingProps
+}, children);
+var Tooltip = Object.assign(TooltipComponent, {
+	Content: TooltipContent,
+	Trigger,
+	Portal,
+	Provider
 });
-o.displayName = "Tooltip";
+TooltipComponent.displayName = "Tooltip";
 //#endregion
-export { s as Tooltip };
+export { Tooltip };
 
 //# sourceMappingURL=Tooltip.js.map

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  ...remainingProps\n}: TooltipProps) => (\n  <Root delayDuration={delayDuration} {...remainingProps}>\n    {children}\n  </Root>\n)\n\nexport const Tooltip = Object.assign(TooltipComponent, {\n  Content: TooltipContent,\n  Trigger: Trigger,\n  Portal: Portal,\n  Provider: Provider\n})\n\nTooltipComponent.displayName = 'Tooltip'\n"],"mappings":";;;;AAOA,IAAM,KAAoB,EACxB,aACA,mBAAgB,KAChB,GAAG,QAEH,kBAAA,cAAC,GAAD;CAAqB;CAAe,GAAI;CAEjC,EADJ,EACI,EAGI,IAAU,OAAO,OAAO,GAAkB;CACrD,SAAS;CACA;CACD;CACE;CACX,CAAC;AAEF,EAAiB,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 { TooltipContent } from './TooltipContent'\n\ntype TooltipProps = React.ComponentProps<typeof Root>\n\nconst TooltipComponent = ({\n  children,\n  delayDuration = 350,\n  ...remainingProps\n}: TooltipProps) => (\n  <Root delayDuration={delayDuration} {...remainingProps}>\n    {children}\n  </Root>\n)\n\nexport const Tooltip = 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,qBAEH,wBAAA,cAAC,MAAD;CAAqB;CAAe,GAAI;CAEjC,EADJ,SACI;AAGT,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,SAAS;CACA;CACD;CACE;CACX,CAAC;AAEF,iBAAiB,cAAc"}

package/dist/components/tooltip/TooltipContent.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
-import { Arrow as n, Content as r } from "@radix-ui/react-tooltip";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
+import { Arrow, Content } from "@radix-ui/react-tooltip";
 //#region src/components/tooltip/TooltipContent.tsx
-var i = e(r, {
+var StyledContent = styled(Content, {
 	base: [
 		"bg-grey-900",
 		"rounded-sm",
@@ -30,17 +30,19 @@ var i = e(r, {
 		md: ["max-w-[250px]"],
 		lg: ["max-w-100"]
 	} }
-}), a = e(n, { base: [
+});
+var StyledArrow = styled(Arrow, { base: [
 	"fill-grey-900",
 	"in-data-[align=end]:mr-2",
 	"in-data-[align=start]:ml-2"
-] }), o = ({ children: e, side: n = "top", sideOffset: r = 4, size: o = "md", ...s }) => /* @__PURE__ */ t.createElement(i, {
-	side: n,
-	sideOffset: r,
-	size: o,
-	...s
-}, e, /* @__PURE__ */ t.createElement(a, null));
+] });
+var TooltipContent = ({ children, side = "top", sideOffset = 4, size = "md", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(StyledContent, {
+	side,
+	sideOffset,
+	size,
+	...remainingProps
+}, children, /* @__PURE__ */ React$1.createElement(StyledArrow, null));
 //#endregion
-export { o as TooltipContent };
+export { TooltipContent };
 
 //# sourceMappingURL=TooltipContent.js.map

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  ...remainingProps\n}: TooltipContentProps) => (\n  <StyledContent\n    side={side}\n    sideOffset={sideOffset}\n    size={size}\n    {...remainingProps}\n  >\n    {children}\n    <StyledArrow />\n  </StyledContent>\n)\n"],"mappings":";;;;AAKA,IAAM,IAAgB,EAAO,GAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,gBAAgB;EACrB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC,EAEI,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACD,EACF,CAAC,EAKW,KAAkB,EAC7B,aACA,UAAO,OACP,gBAAa,GACb,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,GAAD;CACQ;CACM;CACN;CACN,GAAI;CAIU,EAFb,GACD,kBAAA,cAAC,GAAA,KAAc,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-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  ...remainingProps\n}: TooltipContentProps) => (\n  <StyledContent\n    side={side}\n    sideOffset={sideOffset}\n    size={size}\n    {...remainingProps}\n  >\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;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,gBAAgB;EACrB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACD,EACF,CAAC;AAKF,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,OAAO,MACP,GAAG,qBAEH,wBAAA,cAAC,eAAD;CACQ;CACM;CACN;CACN,GAAI;CAIU,EAFb,UACD,wBAAA,cAAC,aAAA,KAAc,CACD"}

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

@@ -1,9 +1,9 @@
-var e = { light: {
+var colorSchemes = { light: {
 	"--background": "white",
 	"--divider": "var(--color-grey-200)",
 	"--border-bottom": "var(--color-grey-200)"
 } };
 //#endregion
-export { e as colorSchemes };
+export { colorSchemes };
 
 //# sourceMappingURL=TopBar.colorscheme.config.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TopBar.colorscheme.config.js","names":[],"sources":["../../../src/components/top-bar/TopBar.colorscheme.config.ts"],"sourcesContent":["const light = {\n  '--background': 'white',\n  '--divider': 'var(--color-grey-200)',\n  '--border-bottom': 'var(--color-grey-200)'\n}\n\nexport const colorSchemes = {\n  light\n}\n"],"mappings":"AAMA,IAAa,IAAe,EAC1B,OAPY;CACZ,gBAAgB;CAChB,aAAa;CACb,mBAAmB;CACpB,EAIA"}
+{"version":3,"file":"TopBar.colorscheme.config.js","names":[],"sources":["../../../src/components/top-bar/TopBar.colorscheme.config.ts"],"sourcesContent":["const light = {\n  '--background': 'white',\n  '--divider': 'var(--color-grey-200)',\n  '--border-bottom': 'var(--color-grey-200)'\n}\n\nexport const colorSchemes = {\n  light\n}\n"],"mappings":"AAMA,IAAa,eAAe,EAC1B,OAPY;CACZ,gBAAgB;CAChB,aAAa;CACb,mBAAmB;CACpB,EAIA"}

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

@@ -1,15 +1,16 @@
-import { Theme as e, styled as t } from "../../styled.js";
-import { Divider as n } from "../divider/Divider.js";
-import { useWindowScrollPosition as r } from "../../utilities/hooks/useWindowScrollPosition.js";
-import { colorSchemes as i } from "./TopBar.colorscheme.config.js";
-import { TopBarActionIcon as a } from "./TopBarActionIcon.js";
-import { TopBarBrand as o, TopBarBrandLogo as s, TopBarBrandName as c } from "./TopBarBrand.js";
-import * as l from "react";
+import { Theme, 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 * as React$1 from "react";
 //#region src/components/top-bar/TopBar.tsx
-var u = () => /* @__PURE__ */ l.createElement(n, {
+var TopBarDivider = () => /* @__PURE__ */ React$1.createElement(Divider, {
 	orientation: "vertical",
 	className: "bg-divider h-6"
-}), d = t("header", {
+});
+var StyledRoot = styled("header", {
 	base: [
 		"bg-(--background)",
 		"sticky",
@@ -45,30 +46,33 @@ var u = () => /* @__PURE__ */ l.createElement(n, {
 			]
 		}
 	}
-}, { enabledResponsiveVariants: !0 }), f = t("div", { base: [
+}, { enabledResponsiveVariants: true });
+var Container = styled("div", { base: [
 	"flex",
 	"items-center",
 	"h-10",
 	"mx-4",
 	"w-full",
 	"md:mx-8"
-] }), p = ({ size: t = "md", diffused: n, theme: a, appearance: o = "standard", ...s }) => {
-	let { y: c } = r();
-	return /* @__PURE__ */ l.createElement(e, { theme: a || i.light }, /* @__PURE__ */ l.createElement(d, {
-		hasScrolled: !!c,
-		diffused: n,
-		appearance: o,
-		size: t
-	}, /* @__PURE__ */ l.createElement(f, s)));
-}, m = Object.assign(p, {
-	Brand: o,
-	BrandLogo: s,
-	BrandName: c,
-	ActionIcon: a,
-	Divider: u
+] });
+var TopBarComponent = ({ size = "md", diffused, theme, appearance = "standard", ...rest }) => {
+	const { y: scrollPositionY } = useWindowScrollPosition();
+	return /* @__PURE__ */ React$1.createElement(Theme, { theme: theme || colorSchemes["light"] }, /* @__PURE__ */ React$1.createElement(StyledRoot, {
+		hasScrolled: !!scrollPositionY,
+		diffused,
+		appearance,
+		size
+	}, /* @__PURE__ */ React$1.createElement(Container, rest)));
+};
+var TopBar = Object.assign(TopBarComponent, {
+	Brand: TopBarBrand,
+	BrandLogo: TopBarBrandLogo,
+	BrandName: TopBarBrandName,
+	ActionIcon: TopBarActionIcon,
+	Divider: TopBarDivider
 });
-p.displayName = "TopBar";
+TopBarComponent.displayName = "TopBar";
 //#endregion
-export { m as TopBar };
+export { TopBar };
 
 //# sourceMappingURL=TopBar.js.map

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'\n\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        md: ['h-16'],\n        lg: ['h-24']\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          'top-0',\n          'border-b',\n          'border-b-(--border-bottom)'\n        ],\n        rounded: [\n          'w-full',\n          'top-2',\n          'p-2',\n          'border',\n          'border-white',\n          'rounded-full'\n        ]\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: 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 = 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":";;;;;;;;AAUA,IAAM,UACJ,kBAAA,cAAC,GAAD;CAAS,aAAY;CAAW,WAAU;CAAmB,CAAA,EAGzD,IAAa,EACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,CAAC,+CAA+C,EACvD;EACD,MAAM;GACJ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CACJ,wEACA,sCACD,EACF;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACF,EACD,EACE,2BAA2B,IAC5B,CACF,EAEK,IAAY,EAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;CAAU,EACpE,CAAC,EAMI,KAAmB,EACvB,UAAO,MACP,aACA,UACA,gBAAa,YACb,GAAG,QACuC;CAC1C,IAAM,EAAE,GAAG,MAAoB,GAAyB;AAExD,QACE,kBAAA,cAAC,GAAD,EAAO,OAAO,KAAS,EAAmB,OASlC,EARN,kBAAA,cAAC,GAAD;EACE,aAAa,CAAC,CAAC;EACL;EACE;EACN;EAGK,EADX,kBAAA,cAAC,GAAc,EAAQ,CACZ,CACP;GAIC,IAAS,OAAO,OAAO,GAAiB;CACnD,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;CACV,CAAC;AAEF,EAAgB,cAAc"}
+{"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'\n\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        md: ['h-16'],\n        lg: ['h-24']\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          'top-0',\n          'border-b',\n          'border-b-(--border-bottom)'\n        ],\n        rounded: [\n          'w-full',\n          'top-2',\n          'p-2',\n          'border',\n          'border-white',\n          'rounded-full'\n        ]\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: 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 = 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":";;;;;;;;AAUA,IAAM,sBACJ,wBAAA,cAAC,SAAD;CAAS,aAAY;CAAW,WAAU;CAAmB,CAAA;AAG/D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,CAAC,+CAA+C,EACvD;EACD,MAAM;GACJ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CACJ,wEACA,sCACD,EACF;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;CAAU,EACpE,CAAC;AAMF,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,yBAAyB;AAExD,QACE,wBAAA,cAAC,OAAD,EAAO,OAAO,SAAS,aAAmB,UASlC,EARN,wBAAA,cAAC,YAAD;EACE,aAAa,CAAC,CAAC;EACL;EACE;EACN;EAGK,EADX,wBAAA,cAAC,WAAc,KAAQ,CACZ,CACP;;AAIZ,IAAa,SAAS,OAAO,OAAO,iBAAiB;CACnD,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;CACV,CAAC;AAEF,gBAAgB,cAAc"}

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

@@ -1,15 +1,17 @@
-import { Icon as e } from "../icon/Icon.js";
-import { ActionIcon as t } from "../action-icon/ActionIcon.js";
-import n from "react";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import React from "react";
 //#region src/components/top-bar/TopBarActionIcon.tsx
-var r = n.forwardRef(({ icon: r, ...i }, a) => /* @__PURE__ */ n.createElement(t, {
-	size: "md",
-	appearance: "simple",
-	theme: "neutral",
-	ref: a,
-	...i
-}, /* @__PURE__ */ n.createElement(e, { is: r })));
+var TopBarActionIcon = React.forwardRef(({ icon, ...rest }, forwardedRef) => {
+	return /* @__PURE__ */ React.createElement(ActionIcon, {
+		size: "md",
+		appearance: "simple",
+		theme: "neutral",
+		ref: forwardedRef,
+		...rest
+	}, /* @__PURE__ */ React.createElement(Icon, { is: icon }));
+});
 //#endregion
-export { r as TopBarActionIcon };
+export { TopBarActionIcon };
 
 //# sourceMappingURL=TopBarActionIcon.js.map

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 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 = React.forwardRef<\n  HTMLButtonElement,\n  TopBarActionIconProps\n>(({ icon, ...rest }, forwardedRef) => {\n  return (\n    <ActionIcon\n      size=\"md\"\n      appearance=\"simple\"\n      theme=\"neutral\"\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Icon is={icon} />\n    </ActionIcon>\n  )\n})\n"],"mappings":";;;;AAaA,IAAa,IAAmB,EAAM,YAGnC,EAAE,SAAM,GAAG,KAAQ,MAElB,kBAAA,cAAC,GAAD;CACE,MAAK;CACL,YAAW;CACX,OAAM;CACN,KAAK;CACL,GAAI;CAGO,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAQ,CAAA,CACP,CAEf"}
+{"version":3,"file":"TopBarActionIcon.js","names":[],"sources":["../../../src/components/top-bar/TopBarActionIcon.tsx"],"sourcesContent":["import 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 = React.forwardRef<\n  HTMLButtonElement,\n  TopBarActionIconProps\n>(({ icon, ...rest }, forwardedRef) => {\n  return (\n    <ActionIcon\n      size=\"md\"\n      appearance=\"simple\"\n      theme=\"neutral\"\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Icon is={icon} />\n    </ActionIcon>\n  )\n})\n"],"mappings":";;;;AAaA,IAAa,mBAAmB,MAAM,YAGnC,EAAE,MAAM,GAAG,QAAQ,iBAAiB;AACrC,QACE,sBAAA,cAAC,YAAD;EACE,MAAK;EACL,YAAW;EACX,OAAM;EACN,KAAK;EACL,GAAI;EAGO,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACP;EAEf"}

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

@@ -1,14 +1,18 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import { Image as n } from "../image/Image.js";
-import r from "clsx";
-import i from "react";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import { Image } from "../image/Image.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/top-bar/TopBarBrand.tsx
-var a = ({ src: e, alt: t = "Atom Learning logo", className: a }) => /* @__PURE__ */ i.createElement(n, {
-	src: e,
-	alt: t,
-	className: r("h-8", "mr-3", "w-auto", a)
-}), o = e(t, { base: ["text-grey-800"] }), s = e("a", { base: [
+var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => {
+	return /* @__PURE__ */ React.createElement(Image, {
+		src,
+		alt,
+		className: clsx("h-8", "mr-3", "w-auto", className)
+	});
+};
+var TopBarBrandName = styled(Text, { base: ["text-grey-800"] });
+var TopBarBrand = styled("a", { base: [
 	"flex",
 	"items-center",
 	"no-underline",
@@ -17,6 +21,6 @@ var a = ({ src: e, alt: t = "Atom Learning logo", className: a }) => /* @__PURE_
 	"focus:no-underline"
 ] });
 //#endregion
-export { s as TopBarBrand, a as TopBarBrandLogo, o as TopBarBrandName };
+export { TopBarBrand, TopBarBrandLogo, TopBarBrandName };
 
 //# sourceMappingURL=TopBarBrand.js.map

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 clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\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}): JSX.Element => {\n  return (\n    <Image\n      src={src}\n      alt={alt}\n      className={clsx('h-8', 'mr-3', 'w-auto', className)}\n    />\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":";;;;;;AAQA,IAAa,KAAmB,EAC9B,QACA,SAAM,sBACN,mBAKE,kBAAA,cAAC,GAAD;CACO;CACA;CACL,WAAW,EAAK,OAAO,QAAQ,UAAU,EAAU;CACnD,CAAA,EAIO,IAAkB,EAAO,GAAM,EAC1C,MAAM,CAAC,gBAAgB,EACxB,CAAC,EAEW,IAAc,EAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
+{"version":3,"file":"TopBarBrand.js","names":[],"sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\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}): JSX.Element => {\n  return (\n    <Image\n      src={src}\n      alt={alt}\n      className={clsx('h-8', 'mr-3', 'w-auto', className)}\n    />\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":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,KACA,MAAM,sBACN,gBAGiB;AACjB,QACE,sBAAA,cAAC,OAAD;EACO;EACA;EACL,WAAW,KAAK,OAAO,QAAQ,UAAU,UAAU;EACnD,CAAA;;AAIN,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM,CAAC,gBAAgB,EACxB,CAAC;AAEF,IAAa,cAAc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}

package/dist/components/tree/Tree.js

@@ -1,25 +1,28 @@
-import { TreeCollapsible as e } from "./TreeCollapsible.js";
-import { TreeList as t } from "./TreeList.js";
-import { TreeCollapsibleContent as n } from "./TreeCollapsibleContent.js";
-import { TreeIcon as r } from "./TreeIcon.js";
-import { TreeText as i } from "./TreeText.js";
-import { TreeCollapsibleTrigger as a } from "./TreeCollapsibleTrigger.js";
-import { TreeItem as o } from "./TreeItem.js";
-import s from "react";
+import { TreeCollapsible } from "./TreeCollapsible.js";
+import { TreeList } from "./TreeList.js";
+import { TreeCollapsibleContent } from "./TreeCollapsibleContent.js";
+import { TreeIcon } from "./TreeIcon.js";
+import { TreeText } from "./TreeText.js";
+import { TreeCollapsibleTrigger } from "./TreeCollapsibleTrigger.js";
+import { TreeItem } from "./TreeItem.js";
+import React from "react";
 //#region src/components/tree/Tree.tsx
-var c = s.forwardRef(({ children: e, ...n }, r) => /* @__PURE__ */ s.createElement(t, {
-	...n,
-	ref: r,
-	role: "tree"
-}, e)), l = Object.assign(c, {
-	Collapsible: e,
-	CollapsibleContent: n,
-	CollapsibleTrigger: a,
-	Item: o,
-	Icon: r,
-	Text: i
+var TreeRoot = React.forwardRef(({ children, ...rest }, ref) => {
+	return /* @__PURE__ */ React.createElement(TreeList, {
+		...rest,
+		ref,
+		role: "tree"
+	}, children);
+});
+var Tree = Object.assign(TreeRoot, {
+	Collapsible: TreeCollapsible,
+	CollapsibleContent: TreeCollapsibleContent,
+	CollapsibleTrigger: TreeCollapsibleTrigger,
+	Item: TreeItem,
+	Icon: TreeIcon,
+	Text: TreeText
 });
 //#endregion
-export { l as Tree };
+export { Tree };
 
 //# sourceMappingURL=Tree.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","names":[],"sources":["../../../src/components/tree/Tree.tsx"],"sourcesContent":["import React from 'react'\n\nimport { TreeCollapsible } from './TreeCollapsible'\nimport { TreeCollapsibleContent } from './TreeCollapsibleContent'\nimport { TreeCollapsibleTrigger } from './TreeCollapsibleTrigger'\nimport { TreeIcon } from './TreeIcon'\nimport { TreeItem } from './TreeItem'\nimport { TreeList } from './TreeList'\nimport { TreeText } from './TreeText'\n\ntype TreeProps = React.ComponentProps<typeof TreeList>\n\nexport const TreeRoot = React.forwardRef<HTMLUListElement, TreeProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <TreeList {...rest} ref={ref} role=\"tree\">\n        {children}\n      </TreeList>\n    )\n  }\n)\n\nexport const Tree = Object.assign(TreeRoot, {\n  Collapsible: TreeCollapsible,\n  CollapsibleContent: TreeCollapsibleContent,\n  CollapsibleTrigger: TreeCollapsibleTrigger,\n  Item: TreeItem,\n  Icon: TreeIcon,\n  Text: TreeText\n})\n"],"mappings":";;;;;;;;;AAYA,IAAa,IAAW,EAAM,YAC3B,EAAE,aAAU,GAAG,KAAQ,MAEpB,kBAAA,cAAC,GAAD;CAAU,GAAI;CAAW;CAAK,MAAK;CAExB,EADR,EACQ,CAGhB,EAEY,IAAO,OAAO,OAAO,GAAU;CAC1C,aAAa;CACb,oBAAoB;CACpB,oBAAoB;CACpB,MAAM;CACN,MAAM;CACN,MAAM;CACP,CAAC"}
+{"version":3,"file":"Tree.js","names":[],"sources":["../../../src/components/tree/Tree.tsx"],"sourcesContent":["import React from 'react'\n\nimport { TreeCollapsible } from './TreeCollapsible'\nimport { TreeCollapsibleContent } from './TreeCollapsibleContent'\nimport { TreeCollapsibleTrigger } from './TreeCollapsibleTrigger'\nimport { TreeIcon } from './TreeIcon'\nimport { TreeItem } from './TreeItem'\nimport { TreeList } from './TreeList'\nimport { TreeText } from './TreeText'\n\ntype TreeProps = React.ComponentProps<typeof TreeList>\n\nexport const TreeRoot = React.forwardRef<HTMLUListElement, TreeProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <TreeList {...rest} ref={ref} role=\"tree\">\n        {children}\n      </TreeList>\n    )\n  }\n)\n\nexport const Tree = Object.assign(TreeRoot, {\n  Collapsible: TreeCollapsible,\n  CollapsibleContent: TreeCollapsibleContent,\n  CollapsibleTrigger: TreeCollapsibleTrigger,\n  Item: TreeItem,\n  Icon: TreeIcon,\n  Text: TreeText\n})\n"],"mappings":";;;;;;;;;AAYA,IAAa,WAAW,MAAM,YAC3B,EAAE,UAAU,GAAG,QAAQ,QAAQ;AAC9B,QACE,sBAAA,cAAC,UAAD;EAAU,GAAI;EAAW;EAAK,MAAK;EAExB,EADR,SACQ;EAGhB;AAED,IAAa,OAAO,OAAO,OAAO,UAAU;CAC1C,aAAa;CACb,oBAAoB;CACpB,oBAAoB;CACpB,MAAM;CACN,MAAM;CACN,MAAM;CACP,CAAC"}

package/dist/components/tree/TreeCollapsible.js

@@ -1,17 +1,22 @@
-import { styled as e } from "../../styled.js";
-import { useCallbackRef as t } from "../../utilities/hooks/useCallbackRef.js";
-import { TreeListItem as n } from "./TreeListItem.js";
-import * as r from "react";
-import { Root as i } from "@radix-ui/react-collapsible";
+import { styled } from "../../styled.js";
+import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
+import { TreeListItem } from "./TreeListItem.js";
+import * as React$1 from "react";
+import { Root } from "@radix-ui/react-collapsible";
 //#region src/components/tree/TreeCollapsible.tsx
-var a = r.createContext({}), o = ({ children: e }) => {
-	let [n, i] = t();
-	return /* @__PURE__ */ r.createElement(a.Provider, { value: {
-		triggerRef: n,
-		setTriggerRef: i
-	} }, e);
-}, s = e(i, { base: ["w-full"] }), c = r.forwardRef((e, t) => /* @__PURE__ */ r.createElement(n, { ref: t }, /* @__PURE__ */ r.createElement(o, null, /* @__PURE__ */ r.createElement(s, e))));
+var TreeCollapsibleContext = React$1.createContext({});
+var TreeCollapsibleProvider = ({ children }) => {
+	const [triggerRef, setTriggerRef] = useCallbackRef();
+	return /* @__PURE__ */ React$1.createElement(TreeCollapsibleContext.Provider, { value: {
+		triggerRef,
+		setTriggerRef
+	} }, children);
+};
+var StyledCollapsibleTreeItemRoot = styled(Root, { base: ["w-full"] });
+var TreeCollapsible = React$1.forwardRef((props, ref) => {
+	return /* @__PURE__ */ React$1.createElement(TreeListItem, { ref }, /* @__PURE__ */ React$1.createElement(TreeCollapsibleProvider, null, /* @__PURE__ */ React$1.createElement(StyledCollapsibleTreeItemRoot, props)));
+});
 //#endregion
-export { c as TreeCollapsible, a as TreeCollapsibleContext };
+export { TreeCollapsible, TreeCollapsibleContext };
 
 //# sourceMappingURL=TreeCollapsible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsible.js","names":[],"sources":["../../../src/components/tree/TreeCollapsible.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeCollapsibleContextValue = {\n  triggerRef?: React.MutableRefObject<HTMLElement | null>\n  setTriggerRef?: (HTMLElement) => void\n}\nexport const TreeCollapsibleContext =\n  React.createContext<TreeCollapsibleContextValue>({})\nconst TreeCollapsibleProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  return (\n    <TreeCollapsibleContext.Provider value={{ triggerRef, setTriggerRef }}>\n      {children}\n    </TreeCollapsibleContext.Provider>\n  )\n}\n\nconst StyledCollapsibleTreeItemRoot = styled(Root, {\n  base: ['w-full']\n})\n\ntype TreeCollapsibleProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof StyledCollapsibleTreeItemRoot>\nexport const TreeCollapsible = React.forwardRef(\n  (\n    props: TreeCollapsibleProps,\n    ref: React.ForwardedRef<HTMLLIElement>\n  ): JSX.Element => {\n    return (\n      <TreeListItem ref={ref}>\n        <TreeCollapsibleProvider>\n          <StyledCollapsibleTreeItemRoot {...props} />\n        </TreeCollapsibleProvider>\n      </TreeListItem>\n    )\n  }\n)\n"],"mappings":";;;;;;AAYA,IAAa,IACX,EAAM,cAA2C,EAAE,CAAC,EAChD,KAA2B,EAAE,kBAAe;CAChD,IAAM,CAAC,GAAY,KAAiB,GAAgB;AACpD,QACE,kBAAA,cAAC,EAAuB,UAAxB,EAAiC,OAAO;EAAE;EAAY;EAAe,EAEnC,EAD/B,EAC+B;GAIhC,IAAgC,EAAO,GAAM,EACjD,MAAM,CAAC,SAAS,EACjB,CAAC,EAIW,IAAkB,EAAM,YAEjC,GACA,MAGE,kBAAA,cAAC,GAAD,EAAmB,QAIJ,EAHb,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAkC,EAAS,CACpB,CACb,CAGpB"}
+{"version":3,"file":"TreeCollapsible.js","names":[],"sources":["../../../src/components/tree/TreeCollapsible.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeCollapsibleContextValue = {\n  triggerRef?: React.MutableRefObject<HTMLElement | null>\n  setTriggerRef?: (HTMLElement) => void\n}\nexport const TreeCollapsibleContext =\n  React.createContext<TreeCollapsibleContextValue>({})\nconst TreeCollapsibleProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  return (\n    <TreeCollapsibleContext.Provider value={{ triggerRef, setTriggerRef }}>\n      {children}\n    </TreeCollapsibleContext.Provider>\n  )\n}\n\nconst StyledCollapsibleTreeItemRoot = styled(Root, {\n  base: ['w-full']\n})\n\ntype TreeCollapsibleProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof StyledCollapsibleTreeItemRoot>\nexport const TreeCollapsible = React.forwardRef(\n  (\n    props: TreeCollapsibleProps,\n    ref: React.ForwardedRef<HTMLLIElement>\n  ): JSX.Element => {\n    return (\n      <TreeListItem ref={ref}>\n        <TreeCollapsibleProvider>\n          <StyledCollapsibleTreeItemRoot {...props} />\n        </TreeCollapsibleProvider>\n      </TreeListItem>\n    )\n  }\n)\n"],"mappings":";;;;;;AAYA,IAAa,yBACX,QAAM,cAA2C,EAAE,CAAC;AACtD,IAAM,2BAA2B,EAAE,eAAe;CAChD,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;AACpD,QACE,wBAAA,cAAC,uBAAuB,UAAxB,EAAiC,OAAO;EAAE;EAAY;EAAe,EAEnC,EAD/B,SAC+B;;AAItC,IAAM,gCAAgC,OAAO,MAAM,EACjD,MAAM,CAAC,SAAS,EACjB,CAAC;AAIF,IAAa,kBAAkB,QAAM,YAEjC,OACA,QACgB;AAChB,QACE,wBAAA,cAAC,cAAD,EAAmB,KAIJ,EAHb,wBAAA,cAAC,yBAAA,MACC,wBAAA,cAAC,+BAAkC,MAAS,CACpB,CACb;EAGpB"}