@atom-learning/components 6.5.3 → 6.5.5

package/dist/components/tree/TreeCollapsibleContent.js

@@ -1,24 +1,31 @@
-import { TreeCollapsibleContext as e } from "./TreeCollapsible.js";
-import { TreeList as t } from "./TreeList.js";
-import n from "clsx";
-import r from "react";
-import { Content as i } from "@radix-ui/react-collapsible";
+import { TreeCollapsibleContext } from "./TreeCollapsible.js";
+import { TreeList } from "./TreeList.js";
+import clsx from "clsx";
+import React from "react";
+import { Content } from "@radix-ui/react-collapsible";
 //#region src/components/tree/TreeCollapsibleContent.tsx
-var a = r.forwardRef(({ children: a, className: o, ...s }, c) => {
-	let { triggerRef: l } = r.useContext(e);
-	return /* @__PURE__ */ r.createElement(i, {
-		className: n("data-[state=closed]:hidden", o),
-		onKeyDown: (e) => {
-			l?.current && e.key === "Escape" && (e.stopPropagation(), e.preventDefault(), l.current.focus(), l.current.click());
-		},
-		...s,
-		asChild: !0
-	}, /* @__PURE__ */ r.createElement(t, {
-		ref: c,
+var TreeCollapsibleContent = React.forwardRef(({ children, className, ...rest }, ref) => {
+	const { triggerRef } = React.useContext(TreeCollapsibleContext);
+	const handleOnKeydown = (e) => {
+		if (!triggerRef?.current) return;
+		if (e.key === "Escape") {
+			e.stopPropagation();
+			e.preventDefault();
+			triggerRef.current.focus();
+			triggerRef.current.click();
+		}
+	};
+	return /* @__PURE__ */ React.createElement(Content, {
+		className: clsx("data-[state=closed]:hidden", className),
+		onKeyDown: handleOnKeydown,
+		...rest,
+		asChild: true
+	}, /* @__PURE__ */ React.createElement(TreeList, {
+		ref,
 		role: "group"
-	}, a));
+	}, children));
 });
 //#endregion
-export { a as TreeCollapsibleContent };
+export { TreeCollapsibleContent };
 
 //# sourceMappingURL=TreeCollapsibleContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsibleContent.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\ntype TreeCollapsibleContentProps = React.ComponentProps<typeof Content> &\n  React.ComponentProps<typeof TreeList>\n\nexport const TreeCollapsibleContent = React.forwardRef<\n  HTMLUListElement,\n  TreeCollapsibleContentProps\n>(({ children, className, ...rest }, ref): JSX.Element => {\n  const { triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <Content\n      className={clsx('data-[state=closed]:hidden', className)}\n      onKeyDown={handleOnKeydown}\n      {...rest}\n      asChild\n    >\n      <TreeList ref={ref} role=\"group\">\n        {children}\n      </TreeList>\n    </Content>\n  )\n})\n"],"mappings":";;;;;;AAUA,IAAa,IAAyB,EAAM,YAGzC,EAAE,aAAU,cAAW,GAAG,KAAQ,MAAqB;CACxD,IAAM,EAAE,kBAAe,EAAM,WAAW,EAAuB;AAY/D,QACE,kBAAA,cAAC,GAAD;EACE,WAAW,EAAK,8BAA8B,EAAU;EACxD,YAbqB,MAAM;AACxB,MAAY,WACb,EAAE,QAAQ,aACZ,EAAE,iBAAiB,EACnB,EAAE,gBAAgB,EAClB,EAAW,QAAQ,OAAO,EAC1B,EAAW,QAAQ,OAAO;;EAQ1B,GAAI;EACJ,SAAA;EAKQ,EAHR,kBAAA,cAAC,GAAD;EAAe;EAAK,MAAK;EAEd,EADR,EACQ,CACH;EAEZ"}
+{"version":3,"file":"TreeCollapsibleContent.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport clsx from 'clsx'\nimport React from 'react'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\ntype TreeCollapsibleContentProps = React.ComponentProps<typeof Content> &\n  React.ComponentProps<typeof TreeList>\n\nexport const TreeCollapsibleContent = React.forwardRef<\n  HTMLUListElement,\n  TreeCollapsibleContentProps\n>(({ children, className, ...rest }, ref): JSX.Element => {\n  const { triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <Content\n      className={clsx('data-[state=closed]:hidden', className)}\n      onKeyDown={handleOnKeydown}\n      {...rest}\n      asChild\n    >\n      <TreeList ref={ref} role=\"group\">\n        {children}\n      </TreeList>\n    </Content>\n  )\n})\n"],"mappings":";;;;;;AAUA,IAAa,yBAAyB,MAAM,YAGzC,EAAE,UAAU,WAAW,GAAG,QAAQ,QAAqB;CACxD,MAAM,EAAE,eAAe,MAAM,WAAW,uBAAuB;CAE/D,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,sBAAA,cAAC,SAAD;EACE,WAAW,KAAK,8BAA8B,UAAU;EACxD,WAAW;EACX,GAAI;EACJ,SAAA;EAKQ,EAHR,sBAAA,cAAC,UAAD;EAAe;EAAK,MAAK;EAEd,EADR,SACQ,CACH;EAEZ"}

package/dist/components/tree/TreeCollapsibleTrigger.js

@@ -1,14 +1,14 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { ActionIcon as n } from "../action-icon/ActionIcon.js";
-import { TreeCollapsibleContext as r } from "./TreeCollapsible.js";
-import { TreeItemContent as i } from "./TreeItemContent.js";
-import a from "clsx";
-import o from "react";
-import { ChevronDown as s } from "@atom-learning/icons";
-import { Trigger as c } from "@radix-ui/react-collapsible";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { TreeCollapsibleContext } from "./TreeCollapsible.js";
+import { TreeItemContent } from "./TreeItemContent.js";
+import clsx from "clsx";
+import React from "react";
+import { ChevronDown } from "@atom-learning/icons";
+import { Trigger } from "@radix-ui/react-collapsible";
 //#region src/components/tree/TreeCollapsibleTrigger.tsx
-var l = e(n, { base: [
+var StyledActionIcon = styled(ActionIcon, { base: [
 	"absolute",
 	"left-0",
 	"top-0",
@@ -17,24 +17,26 @@ var l = e(n, { base: [
 	"[&_svg]:transition-transform",
 	"[&[data-state=closed]>svg]:-rotate-90",
 	"[&[data-state=open]>svg]:rotate-0"
-] }), u = ({ children: e, label: n, className: u, ...d }) => {
-	let { setTriggerRef: f, triggerRef: p } = o.useContext(r);
-	return /* @__PURE__ */ o.createElement(i, {
-		...d,
-		className: a("cursor-pointer", u),
-		onClick: (e) => {
-			d.onClick?.(e), p?.current?.click();
+] });
+var TreeCollapsibleTrigger = ({ children, label, className, ...rest }) => {
+	const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext);
+	return /* @__PURE__ */ React.createElement(TreeItemContent, {
+		...rest,
+		className: clsx("cursor-pointer", className),
+		onClick: (event) => {
+			rest.onClick?.(event);
+			triggerRef?.current?.click();
 		}
-	}, /* @__PURE__ */ o.createElement(c, { asChild: !0 }, /* @__PURE__ */ o.createElement(l, {
+	}, /* @__PURE__ */ React.createElement(Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(StyledActionIcon, {
 		size: "sm",
-		ref: f,
-		label: n,
+		ref: setTriggerRef,
+		label,
 		theme: "neutral",
-		hasTooltip: !1,
+		hasTooltip: false,
 		onClick: (e) => e.stopPropagation()
-	}, /* @__PURE__ */ o.createElement(t, { is: s }))), e);
+	}, /* @__PURE__ */ React.createElement(Icon, { is: ChevronDown }))), children);
 };
 //#endregion
-export { u as TreeCollapsibleTrigger };
+export { TreeCollapsibleTrigger };
 
 //# sourceMappingURL=TreeCollapsibleTrigger.js.map

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 clsx from 'clsx'\nimport React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\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 TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={clsx('cursor-pointer', className)}\n      onClick={(event) => {\n        rest.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: PointerEvent) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,IAAmB,EAAO,GAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAQW,KAA0B,EACrC,aACA,UACA,cACA,GAAG,QACyC;CAC5C,IAAM,EAAE,kBAAe,kBAAe,EAAM,WAAW,EAAuB;AAE9E,QACE,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,WAAW,EAAK,kBAAkB,EAAU;EAC5C,UAAU,MAAU;AAElB,GADA,EAAK,UAAU,EAAM,EACrB,GAAY,SAAS,OAAO;;EAgBd,EAbhB,kBAAA,cAAC,GAAD,EAAS,SAAA,IAWC,EAVR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,KAAK;EACE;EACP,OAAM;EACN,YAAY;EACZ,UAAU,MAAoB,EAAE,iBAAiB;EAGhC,EADjB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAe,CAAA,CACR,CACX,EACT,EACe"}
+{"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 clsx from 'clsx'\nimport React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\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 TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={clsx('cursor-pointer', className)}\n      onClick={(event) => {\n        rest.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: PointerEvent) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAQF,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,GAAG,WACyC;CAC5C,MAAM,EAAE,eAAe,eAAe,MAAM,WAAW,uBAAuB;AAE9E,QACE,sBAAA,cAAC,iBAAD;EACE,GAAI;EACJ,WAAW,KAAK,kBAAkB,UAAU;EAC5C,UAAU,UAAU;AAClB,QAAK,UAAU,MAAM;AACrB,eAAY,SAAS,OAAO;;EAgBd,EAbhB,sBAAA,cAAC,SAAD,EAAS,SAAA,MAWC,EAVR,sBAAA,cAAC,kBAAD;EACE,MAAK;EACL,KAAK;EACE;EACP,OAAM;EACN,YAAY;EACZ,UAAU,MAAoB,EAAE,iBAAiB;EAGhC,EADjB,sBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR,CACX,EACT,SACe"}

package/dist/components/tree/TreeIcon.js

@@ -1,13 +1,13 @@
-import { Icon as e } from "../icon/Icon.js";
-import t from "clsx";
-import * as n from "react";
+import { Icon } from "../icon/Icon.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/tree/TreeIcon.tsx
-var r = ({ className: r, ...i }) => /* @__PURE__ */ n.createElement(e, {
+var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ React$1.createElement(Icon, {
 	size: "md",
-	...i,
-	className: t("shrink-0 self-start my-1", r)
+	...props,
+	className: clsx("my-1 shrink-0 self-start", className)
 });
 //#endregion
-export { r as TreeIcon };
+export { TreeIcon };
 
 //# sourceMappingURL=TreeIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nexport const TreeIcon = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n  <Icon\n    size=\"md\"\n    {...props}\n    className={clsx('shrink-0 self-start my-1', className)}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,KAAY,EACvB,cACA,GAAG,QAEH,kBAAA,cAAC,GAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,EAAK,4BAA4B,EAAU;CACtD,CAAA"}
+{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\n\nexport const TreeIcon = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Icon>): JSX.Element => (\n  <Icon\n    size=\"md\"\n    {...props}\n    className={clsx('my-1 shrink-0 self-start', className)}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,YAAY,EACvB,WACA,GAAG,YAEH,wBAAA,cAAC,MAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,KAAK,4BAA4B,UAAU;CACtD,CAAA"}

package/dist/components/tree/TreeItem.js

@@ -1,9 +1,11 @@
-import { TreeListItem as e } from "./TreeListItem.js";
-import { TreeItemContent as t } from "./TreeItemContent.js";
-import n from "react";
+import { TreeListItem } from "./TreeListItem.js";
+import { TreeItemContent } from "./TreeItemContent.js";
+import React from "react";
 //#region src/components/tree/TreeItem.tsx
-var r = ({ children: r, ...i }) => /* @__PURE__ */ n.createElement(e, null, /* @__PURE__ */ n.createElement(t, i, r));
+var TreeItem = ({ children, ...rest }) => {
+	return /* @__PURE__ */ React.createElement(TreeListItem, null, /* @__PURE__ */ React.createElement(TreeItemContent, rest, children));
+};
 //#endregion
-export { r as TreeItem };
+export { TreeItem };
 
 //# sourceMappingURL=TreeItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.js","names":[],"sources":["../../../src/components/tree/TreeItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { TreeItemContent } from './TreeItemContent'\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeItemProps = React.ComponentProps<typeof TreeItemContent>\n\nexport const TreeItem = ({ children, ...rest }: TreeItemProps): JSX.Element => {\n  return (\n    <TreeListItem>\n      <TreeItemContent {...rest}>{children}</TreeItemContent>\n    </TreeListItem>\n  )\n}\n"],"mappings":";;;;AAOA,IAAa,KAAY,EAAE,aAAU,GAAG,QAEpC,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,GAAoB,GAAO,EAA2B,CAC1C"}
+{"version":3,"file":"TreeItem.js","names":[],"sources":["../../../src/components/tree/TreeItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { TreeItemContent } from './TreeItemContent'\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeItemProps = React.ComponentProps<typeof TreeItemContent>\n\nexport const TreeItem = ({ children, ...rest }: TreeItemProps): JSX.Element => {\n  return (\n    <TreeListItem>\n      <TreeItemContent {...rest}>{children}</TreeItemContent>\n    </TreeListItem>\n  )\n}\n"],"mappings":";;;;AAOA,IAAa,YAAY,EAAE,UAAU,GAAG,WAAuC;AAC7E,QACE,sBAAA,cAAC,cAAA,MACC,sBAAA,cAAC,iBAAoB,MAAO,SAA2B,CAC1C"}

package/dist/components/tree/TreeItemContent.js

@@ -1,10 +1,10 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { TreeIcon as n } from "./TreeIcon.js";
-import { TreeText as r } from "./TreeText.js";
-import * as i from "react";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { TreeIcon } from "./TreeIcon.js";
+import { TreeText } from "./TreeText.js";
+import * as React$1 from "react";
 //#region src/components/tree/TreeItemContent.tsx
-var a = e("div", { base: [
+var StyledItemContent = styled("div", { base: [
 	"w-full",
 	"relative",
 	"min-h-8",
@@ -12,11 +12,16 @@ var a = e("div", { base: [
 	"flex",
 	"items-center",
 	"gap-2"
-] }), o = i.forwardRef(({ children: e, ...o }, s) => /* @__PURE__ */ i.createElement(a, {
-	ref: s,
-	...o
-}, i.Children.map(e, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ i.createElement(r, null, e) : i.isValidElement(e) && e.type === t ? /* @__PURE__ */ i.createElement(n, e.props) : e)));
+] });
+var TreeItemContent = React$1.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledItemContent, {
+	ref,
+	...rest
+}, React$1.Children.map(children, (child) => {
+	if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ React$1.createElement(TreeText, null, child);
+	if (React$1.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ React$1.createElement(TreeIcon, child.props);
+	return child;
+})));
 //#endregion
-export { o as TreeItemContent };
+export { TreeItemContent };
 
 //# sourceMappingURL=TreeItemContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItemContent.js","names":[],"sources":["../../../src/components/tree/TreeItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { TreeIcon } from './TreeIcon'\nimport { TreeText } from './TreeText'\n\nconst StyledItemContent = styled('div', {\n  base: [\n    'w-full',\n    'relative',\n    'min-h-8',\n    'pl-10',\n    'flex',\n    'items-center',\n    'gap-2'\n  ]\n})\n\ntype TreeItemContentProps = React.ComponentProps<typeof StyledItemContent>\n\nexport const TreeItemContent = React.forwardRef<\n  HTMLDivElement,\n  TreeItemContentProps\n>(({ children, ...rest }, ref) => (\n  <StyledItemContent ref={ref} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return <TreeText>{child}</TreeText>\n        }\n        if (React.isValidElement(child) && child.type === Icon) {\n          return <TreeIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement[]\n    }\n  </StyledItemContent>\n))\n"],"mappings":";;;;;;AAQA,IAAM,IAAoB,EAAO,OAAO,EACtC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAIW,IAAkB,EAAM,YAGlC,EAAE,aAAU,GAAG,KAAQ,MACxB,kBAAA,cAAC,GAAD;CAAwB;CAAK,GAAI;CAYb,EAVhB,EAAM,SAAS,IAAI,IAAW,MACxB,OAAO,KAAU,YAAY,OAAO,KAAU,WACzC,kBAAA,cAAC,GAAA,MAAU,EAAiB,GAEjC,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,IACzC,kBAAA,cAAC,GAAa,EAAM,MAAS,GAE/B,EACP,CAEc,CACpB"}
+{"version":3,"file":"TreeItemContent.js","names":[],"sources":["../../../src/components/tree/TreeItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { TreeIcon } from './TreeIcon'\nimport { TreeText } from './TreeText'\n\nconst StyledItemContent = styled('div', {\n  base: [\n    'w-full',\n    'relative',\n    'min-h-8',\n    'pl-10',\n    'flex',\n    'items-center',\n    'gap-2'\n  ]\n})\n\ntype TreeItemContentProps = React.ComponentProps<typeof StyledItemContent>\n\nexport const TreeItemContent = React.forwardRef<\n  HTMLDivElement,\n  TreeItemContentProps\n>(({ children, ...rest }, ref) => (\n  <StyledItemContent ref={ref} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return <TreeText>{child}</TreeText>\n        }\n        if (React.isValidElement(child) && child.type === Icon) {\n          return <TreeIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement[]\n    }\n  </StyledItemContent>\n))\n"],"mappings":";;;;;;AAQA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAIF,IAAa,kBAAkB,QAAM,YAGlC,EAAE,UAAU,GAAG,QAAQ,QACxB,wBAAA,cAAC,mBAAD;CAAwB;CAAK,GAAI;CAYb,EAVhB,QAAM,SAAS,IAAI,WAAW,UAAU;AACtC,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO,wBAAA,cAAC,UAAA,MAAU,MAAiB;AAErC,KAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,UAAa,MAAM,MAAS;AAEtC,QAAO;EACP,CAEc,CACpB"}

package/dist/components/tree/TreeList.js

@@ -1,12 +1,15 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/tree/TreeList.tsx
-var t = e("ul", { base: [
+var TreeList = styled("ul", { base: [
 	"flex",
 	"flex-col",
+	"p-0",
+	"m-0",
+	"list-none",
 	"w-full",
 	"[&_&]:pl-4"
 ] });
 //#endregion
-export { t as TreeList };
+export { TreeList };
 
 //# sourceMappingURL=TreeList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeList.js","names":[],"sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TreeList = styled('ul', {\n  base: ['flex', 'flex-col', 'w-full', '[&_&]:pl-4']\n})\n"],"mappings":";;AAEA,IAAa,IAAW,EAAO,MAAM,EACnC,MAAM;CAAC;CAAQ;CAAY;CAAU;CAAa,EACnD,CAAC"}
+{"version":3,"file":"TreeList.js","names":[],"sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TreeList = styled('ul', {\n  base: ['flex', 'flex-col', 'p-0', 'm-0', 'list-none', 'w-full', '[&_&]:pl-4']\n})\n"],"mappings":";;AAEA,IAAa,WAAW,OAAO,MAAM,EACnC,MAAM;CAAC;CAAQ;CAAY;CAAO;CAAO;CAAa;CAAU;CAAa,EAC9E,CAAC"}

package/dist/components/tree/TreeListItem.js

@@ -1,13 +1,13 @@
-import e from "clsx";
-import * as t from "react";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/tree/TreeListItem.tsx
-var n = t.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t.createElement("li", {
-	...r,
-	ref: i,
+var TreeListItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React$1.createElement("li", {
+	...props,
+	ref,
 	role: "treeitem",
-	className: e("not-first:mt-0.5 flex items-center gap-2", n)
+	className: clsx("flex items-center gap-2 not-first:mt-0.5", className)
 }));
 //#endregion
-export { n as TreeListItem };
+export { TreeListItem };
 
 //# sourceMappingURL=TreeListItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      role=\"treeitem\"\n      className={clsx('not-first:mt-0.5 flex items-center gap-2', className)}\n    />\n  )\n)\n"],"mappings":";;;AAKA,IAAa,IAAe,EAAM,YAC/B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAA,cAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,EAAK,4CAA4C,EAAU;CACtE,CAAA,CAEL"}
+{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      role=\"treeitem\"\n      className={clsx('flex items-center gap-2 not-first:mt-0.5', className)}\n    />\n  )\n)\n"],"mappings":";;;AAKA,IAAa,eAAe,QAAM,YAC/B,EAAE,WAAW,GAAG,SAAS,QACxB,wBAAA,cAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,KAAK,4CAA4C,UAAU;CACtE,CAAA,CAEL"}

package/dist/components/tree/TreeText.js

@@ -1,14 +1,14 @@
-import { Text as e } from "../text/Text.js";
-import t from "clsx";
-import n from "react";
+import { Text } from "../text/Text.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/tree/TreeText.tsx
-var r = (r) => /* @__PURE__ */ n.createElement(e, {
+var TreeText = (props) => /* @__PURE__ */ React.createElement(Text, {
 	as: "span",
-	className: t("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", r.className),
-	size: "md",
-	...r
+	...props,
+	className: clsx("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
+	size: "md"
 });
 //#endregion
-export { r as TreeText };
+export { TreeText };
 
 //# sourceMappingURL=TreeText.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n  <Text\n    as=\"span\"\n    className={clsx(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      props.className\n    )}\n    size=\"md\"\n    {...props}\n  />\n)\n"],"mappings":";;;;AAOA,IAAa,KAAY,MACvB,kBAAA,cAAC,GAAD;CACE,IAAG;CACH,WAAW,EACT,UACA,qBACA,qBACA,iBACA,EAAM,UACP;CACD,MAAK;CACL,GAAI;CACJ,CAAA"}
+{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n  <Text\n    as=\"span\"\n    {...props}\n    className={clsx(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      props.className\n    )}\n    size=\"md\"\n  />\n)\n"],"mappings":";;;;AAOA,IAAa,YAAY,UACvB,sBAAA,cAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,KACT,UACA,qBACA,qBACA,iBACA,MAAM,UACP;CACD,MAAK;CACL,CAAA"}

package/dist/components/video/Video.js

@@ -1,21 +1,21 @@
-import { CSSWrapper as e } from "../../utilities/css-wrapper/CSSWrapper.js";
-import * as t from "react";
-import n from "react-player/vimeo";
+import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
+import * as React$1 from "react";
+import ReactPlayer from "react-player/vimeo";
 //#region src/components/video/Video.tsx
-var r = t.forwardRef(({ id: r, ratio: i = 9 / 16, className: a, ...o }, s) => /* @__PURE__ */ t.createElement(e, { className: a }, /* @__PURE__ */ t.createElement("div", {
-	style: { "--ratio": `${i * 100}%` },
+var Video = React$1.forwardRef(({ id, ratio = 9 / 16, className, ...remainingProps }, ref) => /* @__PURE__ */ React$1.createElement(CSSWrapper, { className }, /* @__PURE__ */ React$1.createElement("div", {
+	style: { "--ratio": `${ratio * 100}%` },
 	className: "relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)"
-}, /* @__PURE__ */ t.createElement(n, {
-	...o,
+}, /* @__PURE__ */ React$1.createElement(ReactPlayer, {
+	...remainingProps,
 	role: "figure",
-	url: `https://player.vimeo.com/video/${r}`,
+	url: `https://player.vimeo.com/video/${id}`,
 	height: "100%",
 	width: "100%",
-	ref: s,
+	ref,
 	className: "absolute top-0 left-0"
 }))));
-r.displayName = "Video";
+Video.displayName = "Video";
 //#endregion
-export { r as Video };
+export { Video };
 
 //# sourceMappingURL=Video.js.map

package/dist/components/video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","names":[],"sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import * as React from 'react'\n// Note: Only loading vimeo to reduce the bundle size  https://www.npmjs.com/package/react-player\nimport ReactPlayer from 'react-player/vimeo'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\nimport { Override } from '~/utilities/types'\n\ntype VideoProps = Override<\n  React.ComponentProps<typeof ReactPlayer>,\n  {\n    id: string\n    ratio?: number\n    className?: string\n  }\n>\n\nexport const Video = React.forwardRef<any, VideoProps>(\n  ({ id, ratio = 9 / 16, className, ...remainingProps }, ref) => (\n    <CSSWrapper className={className}>\n      <div\n        style={{ '--ratio': `${ratio * 100}%` }}\n        className=\"relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)\"\n      >\n        <ReactPlayer\n          {...remainingProps}\n          role=\"figure\"\n          url={`https://player.vimeo.com/video/${id}`}\n          height=\"100%\"\n          width=\"100%\"\n          ref={ref}\n          className=\"absolute top-0 left-0\"\n        />\n      </div>\n    </CSSWrapper>\n  )\n)\n\nVideo.displayName = 'Video'\n"],"mappings":";;;;AAgBA,IAAa,IAAQ,EAAM,YACxB,EAAE,OAAI,WAAQ,IAAI,IAAI,cAAW,GAAG,KAAkB,MACrD,kBAAA,cAAC,GAAD,EAAuB,cAeV,EAdX,kBAAA,cAAC,OAAD;CACE,OAAO,EAAE,WAAW,GAAG,IAAQ,IAAI,IAAI;CACvC,WAAU;CAWN,EATJ,kBAAA,cAAC,GAAD;CACE,GAAI;CACJ,MAAK;CACL,KAAK,kCAAkC;CACvC,QAAO;CACP,OAAM;CACD;CACL,WAAU;CACV,CAAA,CACE,CACK,CAEhB;AAED,EAAM,cAAc"}
+{"version":3,"file":"Video.js","names":[],"sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import * as React from 'react'\n// Note: Only loading vimeo to reduce the bundle size  https://www.npmjs.com/package/react-player\nimport ReactPlayer from 'react-player/vimeo'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\nimport { Override } from '~/utilities/types'\n\ntype VideoProps = Override<\n  React.ComponentProps<typeof ReactPlayer>,\n  {\n    id: string\n    ratio?: number\n    className?: string\n  }\n>\n\nexport const Video = React.forwardRef<any, VideoProps>(\n  ({ id, ratio = 9 / 16, className, ...remainingProps }, ref) => (\n    <CSSWrapper className={className}>\n      <div\n        style={{ '--ratio': `${ratio * 100}%` }}\n        className=\"relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)\"\n      >\n        <ReactPlayer\n          {...remainingProps}\n          role=\"figure\"\n          url={`https://player.vimeo.com/video/${id}`}\n          height=\"100%\"\n          width=\"100%\"\n          ref={ref}\n          className=\"absolute top-0 left-0\"\n        />\n      </div>\n    </CSSWrapper>\n  )\n)\n\nVideo.displayName = 'Video'\n"],"mappings":";;;;AAgBA,IAAa,QAAQ,QAAM,YACxB,EAAE,IAAI,QAAQ,IAAI,IAAI,WAAW,GAAG,kBAAkB,QACrD,wBAAA,cAAC,YAAD,EAAuB,WAeV,EAdX,wBAAA,cAAC,OAAD;CACE,OAAO,EAAE,WAAW,GAAG,QAAQ,IAAI,IAAI;CACvC,WAAU;CAWN,EATJ,wBAAA,cAAC,aAAD;CACE,GAAI;CACJ,MAAK;CACL,KAAK,kCAAkC;CACvC,QAAO;CACP,OAAM;CACD;CACL,WAAU;CACV,CAAA,CACE,CACK,CAEhB;AAED,MAAM,cAAc"}

package/dist/experiments/color-scheme/ColorScheme.config.js

@@ -1,23 +1,32 @@
 //#region src/experiments/color-scheme/ColorScheme.config.ts
-var e = ({ prefix: e, colorName: t, color0: n = "" }) => {
-	let r = {}, i = 1;
-	n && (r[`--${e}-${i}`] = `var(--color-${n})`, i++);
-	let a = 1;
-	for (; i <= 11; i++) r[`--${e}-${i}`] = `var(--color-${t}-${a * 100})`, a++;
-	return r;
-}, t = {};
-t["interactive-loContrast"] = {
+var generateColors = ({ prefix, colorName, color0 = "" }) => {
+	const colors = {};
+	let i = 1;
+	if (color0) {
+		colors[`--${prefix}-${i}`] = `var(--color-${color0})`;
+		i++;
+	}
+	let k = 1;
+	for (; i <= 11; i++) {
+		colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`;
+		k++;
+	}
+	return colors;
+};
+var colorSchemes = {};
+colorSchemes["interactive-loContrast"] = {
 	"--interactive-foreground": "var(--foreground)",
 	"--interactive-1": "var(--accent-1)",
 	"--interactive-2": "var(--accent-2)",
 	"--interactive-3": "var(--accent-3)"
-}, t["interactive-hiContrast"] = {
+};
+colorSchemes["interactive-hiContrast"] = {
 	"--interactive-foreground": "var(--foreground-7-plus)",
 	"--interactive-1": "var(--accent-9)",
 	"--interactive-2": "var(--accent-10)",
 	"--interactive-3": "var(--accent-11)"
 };
-var n = Object.fromEntries([
+var colorNames = [
 	"primary",
 	"grey",
 	"blue",
@@ -31,29 +40,35 @@ var n = Object.fromEntries([
 	"orange",
 	"yellow",
 	"lime"
-].flatMap((e) => [[`${e}1`, {
-	colorName: e,
+];
+var createVariants = () => Object.fromEntries(colorNames.flatMap((c) => [[`${c}1`, {
+	colorName: c,
 	color0: "white"
-}], [`${e}2`, { colorName: e }]])), r = n;
-Object.entries(n).forEach(([n, r]) => {
-	let i = `base-${n}`;
-	t[i] = {
-		"--foreground": "var(--color-grey-1000)",
-		"--foreground-7-plus": "var(--color-white)",
-		...e({
-			prefix: "base",
-			colorName: r.colorName,
-			color0: r.color0
-		})
-	};
-}), Object.entries(r).forEach(([n, r]) => {
-	t[`accent-${n}`] = e({
-		prefix: "accent",
-		colorName: r.colorName,
-		color0: r.color0
+}], [`${c}2`, { colorName: c }]]));
+var bases = createVariants();
+var accents = bases;
+(() => {
+	Object.entries(bases).forEach(([name, config]) => {
+		const themeName = `base-${name}`;
+		colorSchemes[themeName] = {
+			"--foreground": "var(--color-grey-1000)",
+			"--foreground-7-plus": "var(--color-white)",
+			...generateColors({
+				prefix: "base",
+				colorName: config.colorName,
+				color0: config.color0
+			})
+		};
+	});
+	Object.entries(accents).forEach(([name, config]) => {
+		colorSchemes[`accent-${name}`] = generateColors({
+			prefix: "accent",
+			colorName: config.colorName,
+			color0: config.color0
+		});
 	});
-});
+})();
 //#endregion
-export { t as colorSchemes };
+export { colorSchemes };
 
 //# sourceMappingURL=ColorScheme.config.js.map

package/dist/experiments/color-scheme/ColorScheme.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorScheme.config.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.config.ts"],"sourcesContent":["type ColorSchemeKeys = 'interactive' | 'base' | 'accent' | 'foreground'\n\n// ColorScheme is a partial record, but values are always strings (never undefined)\ntype ColorScheme = Partial<\n  Record<`--${ColorSchemeKeys}` | `--${ColorSchemeKeys}-${string}`, string>\n>\n\ntype ColorSchemeConfig = { colorName: string; color0?: string }\n\nconst generateColors = ({\n  prefix,\n  colorName,\n  color0 = ''\n}: {\n  prefix: ColorSchemeKeys\n  colorName: string\n  color0?: string\n}): ColorScheme => {\n  const colors: Record<string, string> = {}\n  let i = 1\n  if (color0) {\n    colors[`--${prefix}-${i}`] = `var(--color-${color0})`\n    i++\n  }\n  let k = 1\n  for (i; i <= 11; i++) {\n    colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`\n    k++\n  }\n  return colors as ColorScheme\n}\n\nexport const colorSchemes: Record<string, ColorScheme> = {} as Record<\n  string,\n  ColorScheme\n>\n\ncolorSchemes['interactive-loContrast'] = {\n  '--interactive-foreground': 'var(--foreground)',\n  '--interactive-1': 'var(--accent-1)',\n  '--interactive-2': 'var(--accent-2)',\n  '--interactive-3': 'var(--accent-3)'\n}\n\ncolorSchemes['interactive-hiContrast'] = {\n  '--interactive-foreground': 'var(--foreground-7-plus)',\n  '--interactive-1': 'var(--accent-9)',\n  '--interactive-2': 'var(--accent-10)',\n  '--interactive-3': 'var(--accent-11)'\n}\n\nconst colorNames = [\n  'primary',\n  'grey',\n  'blue',\n  'pink',\n  'purple',\n  'cyan',\n  'green',\n  'magenta',\n  'red',\n  'teal',\n  'orange',\n  'yellow',\n  'lime'\n]\n\nconst createVariants = () =>\n  Object.fromEntries(\n    colorNames.flatMap((c) => [\n      [`${c}1`, { colorName: c, color0: 'white' }],\n      [`${c}2`, { colorName: c }]\n    ])\n  ) as Record<string, ColorSchemeConfig>\n\nexport const bases = createVariants()\nexport const accents = bases\n;(() => {\n  Object.entries(bases).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      const themeName = `base-${name}`\n      colorSchemes[themeName] = {\n        '--foreground': 'var(--color-grey-1000)',\n        '--foreground-7-plus': 'var(--color-white)',\n        ...generateColors({\n          prefix: 'base',\n          colorName: config.colorName,\n          color0: config.color0\n        })\n      }\n    }\n  )\n\n  Object.entries(accents).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      colorSchemes[`accent-${name}`] = generateColors({\n        prefix: 'accent',\n        colorName: config.colorName,\n        color0: config.color0\n      })\n    }\n  )\n})()\n"],"mappings":";AASA,IAAM,KAAkB,EACtB,WACA,cACA,YAAS,SAKQ;CACjB,IAAM,IAAiC,EAAE,EACrC,IAAI;AACR,CAAI,MACF,EAAO,KAAK,EAAO,GAAG,OAAO,eAAe,EAAO,IACnD;CAEF,IAAI,IAAI;AACR,QAAQ,KAAK,IAAI,IAEf,CADA,EAAO,KAAK,EAAO,GAAG,OAAO,eAAe,EAAU,GAAG,IAAI,IAAI,IACjE;AAEF,QAAO;GAGI,IAA4C,EAAE;AAK3D,EAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB,EAED,EAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB;AAED,IAwBa,IAPX,OAAO,YAjBU;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAIc,SAAS,MAAM,CACxB,CAAC,GAAG,EAAE,IAAI;CAAE,WAAW;CAAG,QAAQ;CAAS,CAAC,EAC5C,CAAC,GAAG,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,CAC5B,CAAC,CACH,EAGU,IAAU;AAErB,OAAO,QAAQ,EAAM,CAAC,SACnB,CAAC,GAAM,OAAyC;CAC/C,IAAM,IAAY,QAAQ;AAC1B,GAAa,KAAa;EACxB,gBAAgB;EAChB,uBAAuB;EACvB,GAAG,EAAe;GAChB,QAAQ;GACR,WAAW,EAAO;GAClB,QAAQ,EAAO;GAChB,CAAC;EACH;EAEJ,EAED,OAAO,QAAQ,EAAQ,CAAC,SACrB,CAAC,GAAM,OAAyC;AAC/C,GAAa,UAAU,OAAU,EAAe;EAC9C,QAAQ;EACR,WAAW,EAAO;EAClB,QAAQ,EAAO;EAChB,CAAC;EAEL"}
+{"version":3,"file":"ColorScheme.config.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.config.ts"],"sourcesContent":["type ColorSchemeKeys = 'interactive' | 'base' | 'accent' | 'foreground'\n\n// ColorScheme is a partial record, but values are always strings (never undefined)\ntype ColorScheme = Partial<\n  Record<`--${ColorSchemeKeys}` | `--${ColorSchemeKeys}-${string}`, string>\n>\n\ntype ColorSchemeConfig = { colorName: string; color0?: string }\n\nconst generateColors = ({\n  prefix,\n  colorName,\n  color0 = ''\n}: {\n  prefix: ColorSchemeKeys\n  colorName: string\n  color0?: string\n}): ColorScheme => {\n  const colors: Record<string, string> = {}\n  let i = 1\n  if (color0) {\n    colors[`--${prefix}-${i}`] = `var(--color-${color0})`\n    i++\n  }\n  let k = 1\n  for (i; i <= 11; i++) {\n    colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`\n    k++\n  }\n  return colors as ColorScheme\n}\n\nexport const colorSchemes: Record<string, ColorScheme> = {} as Record<\n  string,\n  ColorScheme\n>\n\ncolorSchemes['interactive-loContrast'] = {\n  '--interactive-foreground': 'var(--foreground)',\n  '--interactive-1': 'var(--accent-1)',\n  '--interactive-2': 'var(--accent-2)',\n  '--interactive-3': 'var(--accent-3)'\n}\n\ncolorSchemes['interactive-hiContrast'] = {\n  '--interactive-foreground': 'var(--foreground-7-plus)',\n  '--interactive-1': 'var(--accent-9)',\n  '--interactive-2': 'var(--accent-10)',\n  '--interactive-3': 'var(--accent-11)'\n}\n\nconst colorNames = [\n  'primary',\n  'grey',\n  'blue',\n  'pink',\n  'purple',\n  'cyan',\n  'green',\n  'magenta',\n  'red',\n  'teal',\n  'orange',\n  'yellow',\n  'lime'\n]\n\nconst createVariants = () =>\n  Object.fromEntries(\n    colorNames.flatMap((c) => [\n      [`${c}1`, { colorName: c, color0: 'white' }],\n      [`${c}2`, { colorName: c }]\n    ])\n  ) as Record<string, ColorSchemeConfig>\n\nexport const bases = createVariants()\nexport const accents = bases\n;(() => {\n  Object.entries(bases).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      const themeName = `base-${name}`\n      colorSchemes[themeName] = {\n        '--foreground': 'var(--color-grey-1000)',\n        '--foreground-7-plus': 'var(--color-white)',\n        ...generateColors({\n          prefix: 'base',\n          colorName: config.colorName,\n          color0: config.color0\n        })\n      }\n    }\n  )\n\n  Object.entries(accents).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      colorSchemes[`accent-${name}`] = generateColors({\n        prefix: 'accent',\n        colorName: config.colorName,\n        color0: config.color0\n      })\n    }\n  )\n})()\n"],"mappings":";AASA,IAAM,kBAAkB,EACtB,QACA,WACA,SAAS,SAKQ;CACjB,MAAM,SAAiC,EAAE;CACzC,IAAI,IAAI;AACR,KAAI,QAAQ;AACV,SAAO,KAAK,OAAO,GAAG,OAAO,eAAe,OAAO;AACnD;;CAEF,IAAI,IAAI;AACR,QAAQ,KAAK,IAAI,KAAK;AACpB,SAAO,KAAK,OAAO,GAAG,OAAO,eAAe,UAAU,GAAG,IAAI,IAAI;AACjE;;AAEF,QAAO;;AAGT,IAAa,eAA4C,EAAE;AAK3D,aAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB;AAED,aAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB;AAED,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,uBACJ,OAAO,YACL,WAAW,SAAS,MAAM,CACxB,CAAC,GAAG,EAAE,IAAI;CAAE,WAAW;CAAG,QAAQ;CAAS,CAAC,EAC5C,CAAC,GAAG,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,CAC5B,CAAC,CACH;AAEH,IAAa,QAAQ,gBAAgB;AACrC,IAAa,UAAU;OACf;AACN,QAAO,QAAQ,MAAM,CAAC,SACnB,CAAC,MAAM,YAAyC;EAC/C,MAAM,YAAY,QAAQ;AAC1B,eAAa,aAAa;GACxB,gBAAgB;GAChB,uBAAuB;GACvB,GAAG,eAAe;IAChB,QAAQ;IACR,WAAW,OAAO;IAClB,QAAQ,OAAO;IAChB,CAAC;GACH;GAEJ;AAED,QAAO,QAAQ,QAAQ,CAAC,SACrB,CAAC,MAAM,YAAyC;AAC/C,eAAa,UAAU,UAAU,eAAe;GAC9C,QAAQ;GACR,WAAW,OAAO;GAClB,QAAQ,OAAO;GAChB,CAAC;GAEL;IACC"}

package/dist/experiments/color-scheme/ColorScheme.js

@@ -1,21 +1,25 @@
-import { colorSchemes as e } from "./ColorScheme.config.js";
-import * as t from "react";
-import { Slot as n } from "@radix-ui/react-slot";
+import { colorSchemes } from "./ColorScheme.config.js";
+import * as React$1 from "react";
+import { Slot } from "@radix-ui/react-slot";
 //#region src/experiments/color-scheme/ColorScheme.tsx
-var r = t.forwardRef(({ base: r = "", accent: i = "", interactive: a = "", asChild: o = !1, ...s }, c) => {
-	let l = o ? n : "div", u = {
-		...a && e[`interactive-${a}`],
-		...i && e[`accent-${i}`],
-		...r && e[`base-${r}`]
+/**
+* @experimental Component has not been finalised. Further design input required. Use with caution.
+*/
+var ColorScheme = React$1.forwardRef(({ base = "", accent = "", interactive = "", asChild = false, ...rest }, ref) => {
+	const Component = asChild ? Slot : "div";
+	const style = {
+		...interactive && colorSchemes[`interactive-${interactive}`],
+		...accent && colorSchemes[`accent-${accent}`],
+		...base && colorSchemes[`base-${base}`]
 	};
-	return /* @__PURE__ */ t.createElement(l, {
-		...s,
-		ref: c,
-		style: u
+	return /* @__PURE__ */ React$1.createElement(Component, {
+		...rest,
+		ref,
+		style
 	});
 });
-r.displayName = "ColorScheme";
+ColorScheme.displayName = "ColorScheme";
 //#endregion
-export { r as ColorScheme };
+export { ColorScheme };
 
 //# sourceMappingURL=ColorScheme.js.map

package/dist/experiments/color-scheme/ColorScheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorScheme.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { accents, bases, colorSchemes } from './ColorScheme.config'\n\nexport type TcolorScheme = {\n  base?: keyof typeof bases\n  accent?: keyof typeof accents\n  interactive?: 'loContrast' | 'hiContrast'\n}\n\ntype TColorSchemeOwnProps = TcolorScheme & {\n  asChild?: boolean\n}\n\ntype TColorSchemeProps = React.HTMLAttributes<HTMLDivElement> &\n  TColorSchemeOwnProps\n\n/**\n * @experimental Component has not been finalised. Further design input required. Use with caution.\n */\nexport const ColorScheme = React.forwardRef<HTMLDivElement, TColorSchemeProps>(\n  (\n    { base = '', accent = '', interactive = '', asChild = false, ...rest },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'div'\n\n    // Build style object - config ensures values are always strings (never undefined)\n    const style = {\n      ...(interactive && colorSchemes[`interactive-${interactive}`]),\n      ...(accent && colorSchemes[`accent-${accent}`]),\n      ...(base && colorSchemes[`base-${base}`])\n    } as React.CSSProperties\n\n    return <Component {...rest} ref={ref} style={style} />\n  }\n)\n\nColorScheme.displayName = 'ColorScheme'\n"],"mappings":";;;;AAqBA,IAAa,IAAc,EAAM,YAE7B,EAAE,UAAO,IAAI,YAAS,IAAI,iBAAc,IAAI,aAAU,IAAO,GAAG,KAChE,MACG;CACH,IAAM,IAAY,IAAU,IAAO,OAG7B,IAAQ;EACZ,GAAI,KAAe,EAAa,eAAe;EAC/C,GAAI,KAAU,EAAa,UAAU;EACrC,GAAI,KAAQ,EAAa,QAAQ;EAClC;AAED,QAAO,kBAAA,cAAC,GAAD;EAAW,GAAI;EAAW;EAAY;EAAS,CAAA;EAEzD;AAED,EAAY,cAAc"}
+{"version":3,"file":"ColorScheme.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { accents, bases, colorSchemes } from './ColorScheme.config'\n\nexport type TcolorScheme = {\n  base?: keyof typeof bases\n  accent?: keyof typeof accents\n  interactive?: 'loContrast' | 'hiContrast'\n}\n\ntype TColorSchemeOwnProps = TcolorScheme & {\n  asChild?: boolean\n}\n\ntype TColorSchemeProps = React.HTMLAttributes<HTMLDivElement> &\n  TColorSchemeOwnProps\n\n/**\n * @experimental Component has not been finalised. Further design input required. Use with caution.\n */\nexport const ColorScheme = React.forwardRef<HTMLDivElement, TColorSchemeProps>(\n  (\n    { base = '', accent = '', interactive = '', asChild = false, ...rest },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'div'\n\n    // Build style object - config ensures values are always strings (never undefined)\n    const style = {\n      ...(interactive && colorSchemes[`interactive-${interactive}`]),\n      ...(accent && colorSchemes[`accent-${accent}`]),\n      ...(base && colorSchemes[`base-${base}`])\n    } as React.CSSProperties\n\n    return <Component {...rest} ref={ref} style={style} />\n  }\n)\n\nColorScheme.displayName = 'ColorScheme'\n"],"mappings":";;;;;;;AAqBA,IAAa,cAAc,QAAM,YAE7B,EAAE,OAAO,IAAI,SAAS,IAAI,cAAc,IAAI,UAAU,OAAO,GAAG,QAChE,QACG;CACH,MAAM,YAAY,UAAU,OAAO;CAGnC,MAAM,QAAQ;EACZ,GAAI,eAAe,aAAa,eAAe;EAC/C,GAAI,UAAU,aAAa,UAAU;EACrC,GAAI,QAAQ,aAAa,QAAQ;EAClC;AAED,QAAO,wBAAA,cAAC,WAAD;EAAW,GAAI;EAAW;EAAY;EAAS,CAAA;EAEzD;AAED,YAAY,cAAc"}