@atom-learning/components 6.5.1 → 6.5.3

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

@@ -3,7 +3,7 @@ import { Icon as t } from "../icon/Icon.js";
 import { Badge as n } from "../badge/Badge.js";
 import r from "react";
 //#region src/components/notification-badge/NotificationBadge.tsx
-var i = e("div", { base: ["relative"] }), a = e(n, { base: [
+var i = e(n, { base: [
 	"font-body",
 	"text-sm",
 	"flex-row",
@@ -17,16 +17,16 @@ var i = e("div", { base: ["relative"] }), a = e(n, { base: [
 	"h-6",
 	"min-w-6",
 	"text-center"
-] }), o = ({ value: e, emphasis: n = "bold", theme: o = "primary", icon: s, children: c }) => /* @__PURE__ */ r.createElement(i, null, !!e && /* @__PURE__ */ r.createElement(a, {
+] }), a = ({ value: e, emphasis: n = "bold", theme: a = "primary", icon: o, children: s }) => /* @__PURE__ */ r.createElement("div", { className: "relative" }, !!e && /* @__PURE__ */ r.createElement(i, {
 	role: "status",
 	emphasis: n,
-	theme: o
-}, s && /* @__PURE__ */ r.createElement(t, {
-	is: s,
+	theme: a
+}, o && /* @__PURE__ */ r.createElement(t, {
+	is: o,
 	role: "img",
 	"aria-hidden": "false"
-}), e), c);
+}), e), s);
 //#endregion
-export { o as NotificationBadge };
+export { a as NotificationBadge };
 
 //# sourceMappingURL=NotificationBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledWrapper = styled('div', {\n  base: ['relative']\n})\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-full',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <StyledWrapper>\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </StyledWrapper>\n)\n"],"mappings":";;;;;AAOA,IAAM,IAAgB,EAAO,OAAO,EAClC,MAAM,CAAC,WAAW,EACnB,CAAC,EAEI,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAWW,KAAqB,EAChC,UACA,cAAW,QACX,WAAQ,WACR,SACA,kBAEA,kBAAA,cAAC,GAAA,MACE,CAAC,CAAC,KACD,kBAAA,cAAC,GAAD;CAAa,MAAK;CAAmB;CAAiB;CAGxC,EAFX,KAAQ,kBAAA,cAAC,GAAD;CAAM,IAAI;CAAM,MAAK;CAAM,eAAY;CAAU,CAAA,EACzD,EACW,EAEf,EACa"}
+{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-full',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <div className=\"relative\">\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </div>\n)\n"],"mappings":";;;;;AAOA,IAAM,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAWW,KAAqB,EAChC,UACA,cAAW,QACX,WAAQ,WACR,SACA,kBAEA,kBAAA,cAAC,OAAD,EAAK,WAAU,YAQT,EAPH,CAAC,CAAC,KACD,kBAAA,cAAC,GAAD;CAAa,MAAK;CAAmB;CAAiB;CAGxC,EAFX,KAAQ,kBAAA,cAAC,GAAD;CAAM,IAAI;CAAM,MAAK;CAAM,eAAY;CAAU,CAAA,EACzD,EACW,EAEf,EACG"}

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

@@ -4,7 +4,7 @@ import { Tooltip as n } from "../tooltip/Tooltip.js";
 import { ActionIcon as r } from "../action-icon/ActionIcon.js";
 import * as i from "react";
 //#region src/components/number-input/NumberInputStepper.tsx
-var a = e("span", { base: ["z-1"] }), o = e(r, {
+var a = e(r, {
 	base: [
 		"rounded-md",
 		"z-1",
@@ -43,18 +43,21 @@ var a = e("span", { base: ["z-1"] }), o = e(r, {
 		emphasis: "bold",
 		class: ["bg-white!", "hover:bg-primary-100!"]
 	}]
-}), s = i.forwardRef((e, r) => {
-	let { icon: s, disabledTooltipContent: c, showTooltip: l, fieldAppearance: u = "standard", ...d } = e;
-	return /* @__PURE__ */ i.createElement(n, null, /* @__PURE__ */ i.createElement(n.Trigger, { asChild: !0 }, /* @__PURE__ */ i.createElement(a, { tabIndex: -1 }, /* @__PURE__ */ i.createElement(o, {
+}), o = i.forwardRef((e, r) => {
+	let { icon: o, disabledTooltipContent: s, showTooltip: c, fieldAppearance: l = "standard", ...u } = e;
+	return /* @__PURE__ */ i.createElement(n, null, /* @__PURE__ */ i.createElement(n.Trigger, { asChild: !0 }, /* @__PURE__ */ i.createElement("span", {
+		className: "z-1",
+		tabIndex: -1
+	}, /* @__PURE__ */ i.createElement(a, {
 		hasTooltip: !1,
 		tabIndex: -1,
 		appearance: "outline",
-		fieldAppearance: u,
+		fieldAppearance: l,
 		ref: r,
-		...d
-	}, /* @__PURE__ */ i.createElement(t, { is: s })))), l && /* @__PURE__ */ i.createElement(n.Content, null, c));
+		...u
+	}, /* @__PURE__ */ i.createElement(t, { is: o })))), c && /* @__PURE__ */ i.createElement(n.Content, null, s));
 });
 //#endregion
-export { s as NumberInputStepper };
+export { o as NumberInputStepper };
 
 //# sourceMappingURL=NumberInputStepper.js.map

package/dist/components/number-input/NumberInputStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledSpan = styled('span', {\n  base: ['z-1']\n})\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <StyledSpan tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </StyledSpan>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAM,IAAa,EAAO,QAAQ,EAChC,MAAM,CAAC,MAAM,EACd,CAAC,EAEI,IAAsB,EAAO,GAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,YAAY,sBAAsB;EAC3C,EACD;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,aAAa,wBAAwB;EAC9C,CACF;CACF,CAAC,EAYW,IAAqB,EAAM,YAGrC,GAAO,MAAiB;CACzB,IAAM,EACJ,SACA,2BACA,gBACA,qBAAkB,YAClB,GAAG,MACD;AAOJ,QACE,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,EAAQ,SAAT,EAAiB,SAAA,IAaC,EAZhB,kBAAA,cAAC,GAAD,EAAY,UAAU,IAWT,EAVX,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACjB,KAAK;EACL,GAAI;EAGgB,EADpB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAQ,CAAA,CACE,CACX,CACG,EACjB,KACC,kBAAA,cAAC,EAAQ,SAAA,MAAS,EAAyC,CAErD;EAEZ"}
+{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"mappings":";;;;;;AASA,IAAM,IAAsB,EAAO,GAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,YAAY,sBAAsB;EAC3C,EACD;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,aAAa,wBAAwB;EAC9C,CACF;CACF,CAAC,EAYW,IAAqB,EAAM,YAGrC,GAAO,MAAiB;CACzB,IAAM,EACJ,SACA,2BACA,gBACA,qBAAkB,YAClB,GAAG,MACD;AAOJ,QACE,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,EAAQ,SAAT,EAAiB,SAAA,IAaC,EAZhB,kBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAWzB,EAVL,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACjB,KAAK;EACL,GAAI;EAGgB,EADpB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAQ,CAAA,CACE,CACjB,CACS,EACjB,KACC,kBAAA,cAAC,EAAQ,SAAA,MAAS,EAAyC,CAErD;EAEZ"}

package/dist/components/slider/SliderSteps.js

@@ -1,25 +1,19 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import * as n from "react";
+import { Text as e } from "../text/Text.js";
+import * as t from "react";
 //#region src/components/slider/SliderSteps.tsx
-var r = e("div", { base: [
-	"h-3",
-	"mt-3",
-	"relative",
-	"w-full"
-] }), i = (e, t, n) => (e - t) / (n - t) * 100, a = (e, t, n) => {
-	let r = i(e, t, n);
-	return r <= 10 ? 0 : r >= 90 ? 100 : 50;
-}, o = ({ min: e, max: o, steps: s = [] }) => s.length === 0 ? null : /* @__PURE__ */ n.createElement(r, null, s.map((r) => /* @__PURE__ */ n.createElement(t, {
+var n = (e, t, n) => (e - t) / (n - t) * 100, r = (e, t, r) => {
+	let i = n(e, t, r);
+	return i <= 10 ? 0 : i >= 90 ? 100 : 50;
+}, i = ({ min: i, max: a, steps: o = [] }) => o.length === 0 ? null : /* @__PURE__ */ t.createElement("div", { className: "h-3 mt-3 relative w-full" }, o.map((o) => /* @__PURE__ */ t.createElement(e, {
 	as: "span",
-	key: r.value,
+	key: o.value,
 	style: {
-		"--left": `${i(r.value, e, o)}%`,
-		"--translate-x": `-${a(r.value, e, o)}%`
+		"--left": `${n(o.value, i, a)}%`,
+		"--translate-x": `-${r(o.value, i, a)}%`
 	},
 	className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)"
-}, r.label)));
+}, o.label)));
 //#endregion
-export { o as SliderSteps };
+export { i as SliderSteps };
 
 //# sourceMappingURL=SliderSteps.js.map

package/dist/components/slider/SliderSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst SliderStepsContainer = styled('div', {\n  base: ['h-3', 'mt-3', 'relative', 'w-full']\n})\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <SliderStepsContainer>\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </SliderStepsContainer>\n  )\n}\n"],"mappings":";;;;AAeA,IAAM,IAAuB,EAAO,OAAO,EACzC,MAAM;CAAC;CAAO;CAAQ;CAAY;CAAS,EAC5C,CAAC,EAEI,KAAmB,GAAe,GAAa,OAC1C,IAAQ,MAAQ,IAAM,KAAQ,KAGnC,KAAqB,GAAe,GAAa,MAAwB;CAC7E,IAAM,IAAa,EAAgB,GAAO,GAAK,EAAI;AAInD,QAFI,KAAc,KAAW,IACzB,KAAc,KAAW,MACtB;GAGI,KAAe,EAAE,QAAK,QAAK,WAAQ,EAAE,OAC5C,EAAM,WAAW,IAAU,OAG7B,kBAAA,cAAC,GAAA,MACE,EAAM,KAAK,MACV,kBAAA,cAAC,GAAD;CACE,IAAG;CACH,KAAK,EAAK;CACV,OAAO;EACL,UAAU,GAAG,EAAgB,EAAK,OAAO,GAAK,EAAI,CAAC;EACnD,iBAAiB,IAAI,EAAkB,EAAK,OAAO,GAAK,EAAI,CAAC;EAC9D;CACD,WAAU;CAGL,EADJ,EAAK,MACD,CACP,CACmB"}
+{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"h-3 mt-3 relative w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;AAaA,IAAM,KAAmB,GAAe,GAAa,OAC1C,IAAQ,MAAQ,IAAM,KAAQ,KAGnC,KAAqB,GAAe,GAAa,MAAwB;CAC7E,IAAM,IAAa,EAAgB,GAAO,GAAK,EAAI;AAInD,QAFI,KAAc,KAAW,IACzB,KAAc,KAAW,MACtB;GAGI,KAAe,EAAE,QAAK,QAAK,WAAQ,EAAE,OAC5C,EAAM,WAAW,IAAU,OAG7B,kBAAA,cAAC,OAAD,EAAK,WAAU,4BAcT,EAbH,EAAM,KAAK,MACV,kBAAA,cAAC,GAAD;CACE,IAAG;CACH,KAAK,EAAK;CACV,OAAO;EACL,UAAU,GAAG,EAAgB,EAAK,OAAO,GAAK,EAAI,CAAC;EACnD,iBAAiB,IAAI,EAAkB,EAAK,OAAO,GAAK,EAAI,CAAC;EAC9D;CACD,WAAU;CAGL,EADJ,EAAK,MACD,CACP,CACE"}

package/dist/components/tree/Tree.d.ts

@@ -12,12 +12,12 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
     Collapsible: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement>, never> & {
         as?: React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLLIElement>>;
-    CollapsibleContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, never> & {
-        as?: React.ElementType;
-    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    CollapsibleContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
         ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
-    }, never>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-    CollapsibleTrigger: ({ children, label, ...rest }: Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    }, never> & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    CollapsibleTrigger: ({ children, label, className, ...rest }: Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     }, never> & {
         as?: React.ElementType;
@@ -29,18 +29,7 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
     }, never> & {
         as?: React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
-    Icon: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
-        ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-    }, "size"> & {
-        size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
-    } & {
-        as?: React.ElementType;
-    }, "is" | "as"> & {
-        is: React.FC<React.SVGProps<SVGSVGElement>>;
-        as?: never;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>, never> & {
-        as?: React.ElementType;
-    }>>) => JSX.Element;
+    Icon: ({ className, ...props }: React.ComponentProps<typeof import("..").Icon>) => JSX.Element;
     Text: (props: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "noCapsize" | "weight" | "family"> & {

package/dist/components/tree/TreeCollapsibleContent.d.ts

@@ -1,8 +1,6 @@
+import { Content } from '@radix-ui/react-collapsible';
 import React from 'react';
 import { TreeList } from './TreeList';
-declare const StyledTreeCollapsibleContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}>;
-type TreeCollapsibleContentProps = React.ComponentProps<typeof StyledTreeCollapsibleContent> & React.ComponentProps<typeof TreeList>;
+type TreeCollapsibleContentProps = React.ComponentProps<typeof Content> & React.ComponentProps<typeof TreeList>;
 export declare const TreeCollapsibleContent: React.ForwardRefExoticComponent<Omit<TreeCollapsibleContentProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export {};

package/dist/components/tree/TreeCollapsibleContent.js

@@ -1,23 +1,24 @@
-import { styled as e } from "../../styled.js";
-import { TreeCollapsibleContext as t } from "./TreeCollapsible.js";
-import { TreeList as n } from "./TreeList.js";
+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";
 //#region src/components/tree/TreeCollapsibleContent.tsx
-var a = e(i, { base: ["data-[state=closed]:hidden"] }), o = r.forwardRef(({ children: e, ...i }, o) => {
-	let { triggerRef: s } = r.useContext(t);
-	return /* @__PURE__ */ r.createElement(a, {
+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) => {
-			s?.current && e.key === "Escape" && (e.stopPropagation(), e.preventDefault(), s.current.focus(), s.current.click());
+			l?.current && e.key === "Escape" && (e.stopPropagation(), e.preventDefault(), l.current.focus(), l.current.click());
 		},
-		...i,
+		...s,
 		asChild: !0
-	}, /* @__PURE__ */ r.createElement(n, {
-		ref: o,
+	}, /* @__PURE__ */ r.createElement(t, {
+		ref: c,
 		role: "group"
-	}, e));
+	}, a));
 });
 //#endregion
-export { o as TreeCollapsibleContent };
+export { a as 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 React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\nconst StyledTreeCollapsibleContent = styled(Content, {\n  base: ['data-[state=closed]:hidden']\n})\n\ntype TreeCollapsibleContentProps = React.ComponentProps<\n  typeof StyledTreeCollapsibleContent\n> &\n  React.ComponentProps<typeof TreeList>\n\nexport const TreeCollapsibleContent = React.forwardRef<\n  HTMLUListElement,\n  TreeCollapsibleContentProps\n>(({ children, ...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    <StyledTreeCollapsibleContent onKeyDown={handleOnKeydown} {...rest} asChild>\n      <TreeList ref={ref} role=\"group\">\n        {children}\n      </TreeList>\n    </StyledTreeCollapsibleContent>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAM,IAA+B,EAAO,GAAS,EACnD,MAAM,CAAC,6BAA6B,EACrC,CAAC,EAOW,IAAyB,EAAM,YAGzC,EAAE,aAAU,GAAG,KAAQ,MAAqB;CAC7C,IAAM,EAAE,kBAAe,EAAM,WAAW,EAAuB;AAY/D,QACE,kBAAA,cAAC,GAAD;EAA8B,YAXP,MAAM;AACxB,MAAY,WACb,EAAE,QAAQ,aACZ,EAAE,iBAAiB,EACnB,EAAE,gBAAgB,EAClB,EAAW,QAAQ,OAAO,EAC1B,EAAW,QAAQ,OAAO;;EAK8B,GAAI;EAAM,SAAA;EAIrC,EAH7B,kBAAA,cAAC,GAAD;EAAe;EAAK,MAAK;EAEd,EADR,EACQ,CACkB;EAEjC"}
+{"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"}

package/dist/components/tree/TreeCollapsibleTrigger.d.ts

@@ -3,5 +3,5 @@ import { TreeItemContent } from './TreeItemContent';
 type TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<typeof TreeItemContent> & {
     label: string;
 };
-export declare const TreeCollapsibleTrigger: ({ children, label, ...rest }: TNavigationMenuCollapsibleTriggerProps) => React.JSX.Element;
+export declare const TreeCollapsibleTrigger: ({ children, label, className, ...rest }: TNavigationMenuCollapsibleTriggerProps) => React.JSX.Element;
 export {};

package/dist/components/tree/TreeCollapsibleTrigger.js

@@ -3,11 +3,12 @@ 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 "react";
-import { ChevronDown as o } from "@atom-learning/icons";
-import { Trigger as s } from "@radix-ui/react-collapsible";
+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";
 //#region src/components/tree/TreeCollapsibleTrigger.tsx
-var c = e(i, { base: ["cursor-pointer"] }), l = e(n, { base: [
+var l = e(n, { base: [
 	"absolute",
 	"left-0",
 	"top-0",
@@ -16,21 +17,22 @@ var c = e(i, { base: ["cursor-pointer"] }), l = e(n, { base: [
 	"[&_svg]:transition-transform",
 	"[&[data-state=closed]>svg]:-rotate-90",
 	"[&[data-state=open]>svg]:rotate-0"
-] }), u = ({ children: e, label: n, ...i }) => {
-	let { setTriggerRef: u, triggerRef: d } = a.useContext(r);
-	return /* @__PURE__ */ a.createElement(c, {
-		...i,
+] }), 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) => {
-			i.onClick?.(e), d?.current?.click();
+			d.onClick?.(e), p?.current?.click();
 		}
-	}, /* @__PURE__ */ a.createElement(s, { asChild: !0 }, /* @__PURE__ */ a.createElement(l, {
+	}, /* @__PURE__ */ o.createElement(c, { asChild: !0 }, /* @__PURE__ */ o.createElement(l, {
 		size: "sm",
-		ref: u,
+		ref: f,
 		label: n,
 		theme: "neutral",
 		hasTooltip: !1,
 		onClick: (e) => e.stopPropagation()
-	}, /* @__PURE__ */ a.createElement(t, { is: o }))), e);
+	}, /* @__PURE__ */ o.createElement(t, { is: s }))), e);
 };
 //#endregion
 export { u as TreeCollapsibleTrigger };

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 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 StyledTreeCollapsibleTrigger = styled(TreeItemContent, {\n  base: ['cursor-pointer']\n})\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  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <StyledTreeCollapsibleTrigger\n      {...rest}\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    </StyledTreeCollapsibleTrigger>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAA+B,EAAO,GAAiB,EAC3D,MAAM,CAAC,iBAAiB,EACzB,CAAC,EAEI,IAAmB,EAAO,GAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAQW,KAA0B,EACrC,aACA,UACA,GAAG,QACyC;CAC5C,IAAM,EAAE,kBAAe,kBAAe,EAAM,WAAW,EAAuB;AAE9E,QACE,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,UAAU,MAAU;AAElB,GADA,EAAK,UAAU,EAAM,EACrB,GAAY,SAAS,OAAO;;EAgBD,EAb7B,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,EAC4B"}
+{"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"}

package/dist/components/tree/TreeIcon.d.ts

@@ -1,15 +1,3 @@
 import * as React from 'react';
-declare const StyledTreeIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, "size"> & {
-    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
-} & {
-    as?: React.ElementType;
-}, "is" | "as"> & {
-    is: React.FC<React.SVGProps<SVGSVGElement>>;
-    as?: never;
-}, "ref"> & React.RefAttributes<SVGSVGElement>, never> & {
-    as?: React.ElementType;
-}>;
-export declare const TreeIcon: (props: React.ComponentProps<typeof StyledTreeIcon>) => JSX.Element;
-export {};
+import { Icon } from '../../components/icon/Icon';
+export declare const TreeIcon: ({ className, ...props }: React.ComponentProps<typeof Icon>) => JSX.Element;

package/dist/components/tree/TreeIcon.js

@@ -1,16 +1,13 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
+import { Icon as e } from "../icon/Icon.js";
+import t from "clsx";
 import * as n from "react";
 //#region src/components/tree/TreeIcon.tsx
-var r = e(t, { base: [
-	"shrink-0",
-	"self-start",
-	"my-1"
-] }), i = (e) => /* @__PURE__ */ n.createElement(r, {
+var r = ({ className: r, ...i }) => /* @__PURE__ */ n.createElement(e, {
 	size: "md",
-	...e
+	...i,
+	className: t("shrink-0 self-start my-1", r)
 });
 //#endregion
-export { i as TreeIcon };
+export { r as 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 * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst StyledTreeIcon = styled(Icon, {\n  base: ['shrink-0', 'self-start', 'my-1']\n})\n\nexport const TreeIcon = (\n  props: React.ComponentProps<typeof StyledTreeIcon>\n): JSX.Element => <StyledTreeIcon size=\"md\" {...props} />\n"],"mappings":";;;;AAKA,IAAM,IAAiB,EAAO,GAAM,EAClC,MAAM;CAAC;CAAY;CAAc;CAAO,EACzC,CAAC,EAEW,KACX,MACgB,kBAAA,cAAC,GAAD;CAAgB,MAAK;CAAK,GAAI;CAAS,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('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"}

package/dist/components/tree/TreeListItem.d.ts

@@ -1,6 +1,2 @@
 import * as React from 'react';
-export declare const TreeListItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, never> & {
-    as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export declare const TreeListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/components/tree/TreeListItem.js

@@ -1,17 +1,13 @@
-import { styled as e } from "../../styled.js";
+import e from "clsx";
 import * as t from "react";
 //#region src/components/tree/TreeListItem.tsx
-var n = e("li", { base: [
-	"not-first:mt-0.5",
-	"flex",
-	"items-center",
-	"gap-2"
-] }), r = t.forwardRef((e, r) => /* @__PURE__ */ t.createElement(n, {
-	...e,
-	ref: r,
-	role: "treeitem"
+var n = t.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t.createElement("li", {
+	...r,
+	ref: i,
+	role: "treeitem",
+	className: e("not-first:mt-0.5 flex items-center gap-2", n)
 }));
 //#endregion
-export { r as TreeListItem };
+export { n as 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 * as React from 'react'\n\nimport { styled } from '~/styled'\n\ntype TreeListItemProps = React.ComponentProps<typeof StyledTreeListItem>\n\nconst StyledTreeListItem = styled('li', {\n  base: ['not-first:mt-0.5', 'flex', 'items-center', 'gap-2']\n})\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  (props, ref) => <StyledTreeListItem {...props} ref={ref} role=\"treeitem\" />\n)\n"],"mappings":";;;AAMA,IAAM,IAAqB,EAAO,MAAM,EACtC,MAAM;CAAC;CAAoB;CAAQ;CAAgB;CAAQ,EAC5D,CAAC,EAEW,IAAe,EAAM,YAC/B,GAAO,MAAQ,kBAAA,cAAC,GAAD;CAAoB,GAAI;CAAY;CAAK,MAAK;CAAa,CAAA,CAC5E"}
+{"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"}