@atom-learning/components 6.14.4 → 6.15.0

package/dist/components/password-input/PasswordInput.js

@@ -1,8 +1,8 @@
+import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 import { useState } from "react";
 import { Eye, EyeCrossed } from "@atom-learning/icons";
@@ -11,7 +11,7 @@ var PasswordInput = React$1.forwardRef(({ className, hidePasswordText = "Hide pa
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
 	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
-	return /* @__PURE__ */ React$1.createElement("div", { className: clsx("relative", className) }, /* @__PURE__ */ React$1.createElement(Input, {
+	return /* @__PURE__ */ React$1.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React$1.createElement(Input, {
 		...restProps,
 		size,
 		type: isPasswordVisible ? "text" : "password",
@@ -24,7 +24,7 @@ var PasswordInput = React$1.forwardRef(({ className, hidePasswordText = "Hide pa
 		onClick: togglePasswordVisibility,
 		onMouseDown: (e) => e.preventDefault(),
 		size: iconSize,
-		className: clsx(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
+		className: cn(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
 	}, /* @__PURE__ */ React$1.createElement(Icon, { is: isPasswordVisible ? Eye : EyeCrossed })));
 });
 PasswordInput.displayName = "PasswordInput";

package/dist/components/password-input/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={clsx('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={clsx(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"mappings":";;;;;;;;;AAgBA,IAAa,gBAAgB,QAAM,YAK/B,EACE,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,aAEL,QACG;CACH,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,MAAM;CAC1E,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,aAAa;CAEvD,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,wBAAA,cAAC,OAAD,EAAK,WAAW,KAAK,YAAY,UAAU,EAuBrC,EAtBJ,wBAAA,cAAC,OAAD;EACE,GAAI;EACE;EACN,MAAM,oBAAoB,SAAS;EAC9B;EACL,WAAU;EACV,CAAA,EACF,wBAAA,cAAC,YAAD;EACE,YAAW;EACX,OAAM;EACN,OAAO,oBAAoB,mBAAmB;EAC9C,SAAS;EACT,cAAc,MAAM,EAAE,gBAAgB;EACtC,MAAM;EACN,WAAW,KACT,SAAS,OAAO,aAAa,YAC7B,YACA,UACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,YAAc,CAAA,CACvC,CACT;EAGX;AAED,cAAc,cAAc"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={cn('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={cn(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"mappings":";;;;;;;;;AAgBA,IAAa,gBAAgB,QAAM,YAK/B,EACE,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,aAEL,QACG;CACH,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,MAAM;CAC1E,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,aAAa;CAEvD,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,wBAAA,cAAC,OAAD,EAAK,WAAW,GAAG,YAAY,UAAU,EAuBnC,EAtBJ,wBAAA,cAAC,OAAD;EACE,GAAI;EACE;EACN,MAAM,oBAAoB,SAAS;EAC9B;EACL,WAAU;EACV,CAAA,EACF,wBAAA,cAAC,YAAD;EACE,YAAW;EACX,OAAM;EACN,OAAO,oBAAoB,mBAAmB;EAC9C,SAAS;EACT,cAAc,MAAM,EAAE,gBAAgB;EACtC,MAAM;EACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,UACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,YAAc,CAAA,CACvC,CACT;EAGX;AAED,cAAc,cAAc"}

package/dist/components/radio-card/RadioCardGroup.js

@@ -1,9 +1,9 @@
+import { cn } from "../../styled.js";
 import { RadioCard } from "./RadioCard.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 //#region src/components/radio-card/RadioCardGroup.tsx
-var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ React$1.createElement(RadioGroup.Root, rest, /* @__PURE__ */ React$1.createElement("div", { className: clsx("flex", "flex-row", "flex-wrap", "gap-3", className) }, React$1.Children.map(children, (child) => {
+var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }) => /* @__PURE__ */ React$1.createElement(RadioGroup.Root, rest, /* @__PURE__ */ React$1.createElement("div", { className: cn("flex", "flex-row", "flex-wrap", "gap-3", className) }, React$1.Children.map(children, (child) => {
 	if (React$1.isValidElement(child) && child?.type === RadioCard) return React$1.cloneElement(child, {
 		size,
 		isFullWidth,

package/dist/components/radio-card/RadioCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities/types'\n\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={clsx('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;AAaA,IAAa,kBAAkB,EAC7B,WACA,UACA,MACA,aACA,OACA,GAAG,WAEH,wBAAA,cAAC,WAAW,MAAS,MACnB,wBAAA,cAAC,OAAD,EAAK,WAAW,KAAK,QAAQ,YAAY,aAAa,SAAS,UAAU,EAUnE,EATH,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,KAAI,QAAM,eAAe,MAAM,IAAI,OAAO,SAAS,UACjD,QAAO,QAAM,aACX,OACA;EAAE;EAAM;EAAa;EAAO,CAC7B;AAEH,QAAO;EACP,CACE,CACU"}
+{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nimport { RadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  React.ComponentProps<typeof RadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  className,\n  children,\n  size,\n  isFullWidth,\n  align,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <div className={cn('flex', 'flex-row', 'flex-wrap', 'gap-3', className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </div>\n  </RadioGroup.Root>\n)\n"],"mappings":";;;;;AAaA,IAAa,kBAAkB,EAC7B,WACA,UACA,MACA,aACA,OACA,GAAG,WAEH,wBAAA,cAAC,WAAW,MAAS,MACnB,wBAAA,cAAC,OAAD,EAAK,WAAW,GAAG,QAAQ,YAAY,aAAa,SAAS,UAAU,EAUjE,EATH,QAAM,SAAS,IAAI,WAAW,UAAU;AACvC,KAAI,QAAM,eAAe,MAAM,IAAI,OAAO,SAAS,UACjD,QAAO,QAAM,aACX,OACA;EAAE;EAAM;EAAa;EAAO,CAC7B;AAEH,QAAO;EACP,CACE,CACU"}

package/dist/components/search-input/SearchInput.js

@@ -1,10 +1,9 @@
-import { styled } from "../../styled.js";
+import { cn, styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
 import { InputBackground, InputText } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 import { Close, Search } from "@atom-learning/icons";
 //#region src/components/search-input/SearchInput.tsx
@@ -56,7 +55,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ React$1.createElement(StyledIcon, {
 			is: Search,
 			size,
-			className: clsx(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
+			className: cn(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
 		});
 		return /* @__PURE__ */ React$1.createElement(ActionIcon, {
 			label: clearText,
@@ -70,7 +69,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 		size,
 		appearance,
 		theme,
-		className: clsx("relative", "w-auto", className)
+		className: cn("relative", "w-auto", className)
 	}, /* @__PURE__ */ React$1.createElement(InputText, {
 		ref: setInputElRef,
 		size,
@@ -78,7 +77,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", th
 		...remainingProps,
 		value: innerValue,
 		onChange: handleOnChange,
-		className: clsx(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
+		className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 	}), getIcon());
 });
 SearchInput.displayName = "SearchInput";

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [inputElRef, setInputElRef] = useCallbackRef()\n    const [innerValue, setInnerValue] = React.useState(defaultValue)\n    const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n      defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n    )\n    React.useEffect(() => {\n      if (typeof value === 'undefined') return\n      setInnerValue(value)\n      setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }, [value])\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            className={clsx(\n              size == 'sm' ? 'size-4' : 'size-5',\n              'top-1/2',\n              '-translate-y-1/2'\n            )}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={iconSize}\n          onClick={handleClear}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        className={clsx('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={clsx(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[&::-webkit-search-decoration]:appearance-none',\n            '[&::-webkit-search-cancel-button]:appearance-none',\n            '[&::-webkit-search-results-button]:appearance-none'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  (\n    {\n      size = 'md',\n      appearance = 'standard',\n      theme,\n      className,\n      value,\n      defaultValue = '',\n      onValueChange,\n      clearText = 'Clear',\n      onChange,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [inputElRef, setInputElRef] = useCallbackRef()\n    const [innerValue, setInnerValue] = React.useState(defaultValue)\n    const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n      defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n    )\n    React.useEffect(() => {\n      if (typeof value === 'undefined') return\n      setInnerValue(value)\n      setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }, [value])\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            className={cn(\n              size == 'sm' ? 'size-4' : 'size-5',\n              'top-1/2',\n              '-translate-y-1/2'\n            )}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={iconSize}\n          onClick={handleClear}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <InputBackground\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        className={cn('relative', 'w-auto', className)}\n      >\n        <InputText\n          ref={setInputElRef}\n          size={size}\n          type=\"search\"\n          {...remainingProps}\n          value={innerValue}\n          onChange={handleOnChange}\n          className={cn(\n            size === 'sm' ? 'pr-8' : 'pr-10',\n            '[&::-webkit-search-decoration]:appearance-none',\n            '[&::-webkit-search-cancel-button]:appearance-none',\n            '[&::-webkit-search-results-button]:appearance-none'\n          )}\n        />\n        {getIcon()}\n      </InputBackground>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,UAAU;EAiB9B,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}

package/dist/components/section-message/SectionMessageDescription.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/section-message/SectionMessageDescription.tsx
 var SectionMessageDescription = ({ className, ...rest }) => /* @__PURE__ */ React.createElement(Text, {
 	size: "sm",
 	...rest,
-	className: clsx("text-grey-900", className)
+	className: cn("text-grey-900", className)
 });
 //#endregion
 export { SectionMessageDescription };

package/dist/components/section-message/SectionMessageDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDescription.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text size=\"sm\" {...rest} className={clsx('text-grey-900', className)} />\n)\n"],"mappings":";;;;AAKA,IAAa,6BAA6B,EACxC,WACA,GAAG,WAEH,sBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,KAAK,iBAAiB,UAAU;CAAI,CAAA"}
+{"version":3,"file":"SectionMessageDescription.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDescription.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const SectionMessageDescription = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Text>): JSX.Element => (\n  <Text size=\"sm\" {...rest} className={cn('text-grey-900', className)} />\n)\n"],"mappings":";;;;AAMA,IAAa,6BAA6B,EACxC,WACA,GAAG,WAEH,sBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAM,WAAW,GAAG,iBAAiB,UAAU;CAAI,CAAA"}

package/dist/components/section-message/SectionMessageDismiss.js

@@ -1,8 +1,8 @@
+import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Dismissible } from "../dismissible/index.js";
 import { useSectionMessageContext } from "./SectionMessageContext.js";
-import clsx from "clsx";
 import React, { useEffect } from "react";
 import { Close } from "@atom-learning/icons";
 //#region src/components/section-message/SectionMessageDismiss.tsx
@@ -18,7 +18,7 @@ var SectionMessageDismiss = ({ label = "Dismiss", className, ...rest }) => {
 		appearance: "simple",
 		theme: "neutral",
 		...rest,
-		className: clsx("m-auto", "absolute", "top-2", "right-2", className)
+		className: cn("m-auto", "absolute", "top-2", "right-2", className)
 	}, /* @__PURE__ */ React.createElement(Icon, { is: Close })));
 };
 //#endregion

package/dist/components/section-message/SectionMessageDismiss.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageDismiss.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n        className={clsx('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,yBAAyB,EACpC,QAAQ,WACR,WACA,GAAG,WACuD;CAC1D,MAAM,EAAE,kBAAkB,0BAA0B;AAEpD,iBAAgB;AACd,gBAAc,KAAK;AACnB,eAAa,cAAc,MAAM;IAChC,CAAC,cAAc,CAAC;AAEnB,QACE,sBAAA,cAAC,YAAY,SAAb,EAAqB,SAAA,MAWC,EAVpB,sBAAA,cAAC,YAAD;EACS;EACP,MAAK;EACL,YAAW;EACX,OAAM;EACN,GAAI;EACJ,WAAW,KAAK,UAAU,YAAY,SAAS,WAAW,UAAU;EAGzD,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR,CACO"}
+{"version":3,"file":"SectionMessageDismiss.js","names":[],"sources":["../../../src/components/section-message/SectionMessageDismiss.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { cn } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Dismissible } from '../dismissible'\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nexport const SectionMessageDismiss = ({\n  label = 'Dismiss',\n  className,\n  ...rest\n}: React.ComponentProps<typeof ActionIcon>): JSX.Element => {\n  const { setHasDismiss } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasDismiss(true)\n    return () => setHasDismiss(false)\n  }, [setHasDismiss])\n\n  return (\n    <Dismissible.Trigger asChild>\n      <ActionIcon\n        label={label}\n        size=\"sm\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        {...rest}\n        className={cn('m-auto', 'absolute', 'top-2', 'right-2', className)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </Dismissible.Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,yBAAyB,EACpC,QAAQ,WACR,WACA,GAAG,WACuD;CAC1D,MAAM,EAAE,kBAAkB,0BAA0B;AAEpD,iBAAgB;AACd,gBAAc,KAAK;AACnB,eAAa,cAAc,MAAM;IAChC,CAAC,cAAc,CAAC;AAEnB,QACE,sBAAA,cAAC,YAAY,SAAb,EAAqB,SAAA,MAWC,EAVpB,sBAAA,cAAC,YAAD;EACS;EACP,MAAK;EACL,YAAW;EACX,OAAM;EACN,GAAI;EACJ,WAAW,GAAG,UAAU,YAAY,SAAS,WAAW,UAAU;EAGvD,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR,CACO"}

package/dist/components/section-message/SectionMessageIcon.js

@@ -1,6 +1,6 @@
+import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { useSectionMessageContext } from "./SectionMessageContext.js";
-import clsx from "clsx";
 import React, { useEffect } from "react";
 import { Danger, Error, Info, OkCircle } from "@atom-learning/icons";
 //#region src/components/section-message/SectionMessageIcon.tsx
@@ -21,7 +21,7 @@ var SectionMessageIcon = ({ className, is, ...rest }) => {
 		is: is || themeIcons[theme],
 		size: "sm",
 		...rest,
-		className: clsx("m-auto", "absolute", "left-4", "top-4", "text-current", className)
+		className: cn("m-auto", "absolute", "left-4", "top-4", "text-current", className)
 	});
 };
 //#endregion

package/dist/components/section-message/SectionMessageIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageIcon.js","names":[],"sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport React, { useEffect } from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nconst themeIcons = {\n  success: OkCircle,\n  warning: Danger,\n  error: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  className,\n  is,\n  ...rest\n}: SectionMessageIconProps): JSX.Element => {\n  const { theme, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      is={is || themeIcons[theme]}\n      size=\"sm\"\n      {...rest}\n      className={clsx(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,aAAa;CACjB,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAID,IAAa,sBAAsB,EACjC,WACA,IACA,GAAG,WACuC;CAC1C,MAAM,EAAE,OAAO,eAAe,0BAA0B;AAExD,iBAAgB;AACd,aAAW,KAAK;AAChB,eAAa,WAAW,MAAM;IAC7B,CAAC,WAAW,CAAC;AAEhB,QACE,sBAAA,cAAC,MAAD;EACE,IAAI,MAAM,WAAW;EACrB,MAAK;EACL,GAAI;EACJ,WAAW,KACT,UACA,YACA,UACA,SACA,gBACA,UACD;EACD,CAAA"}
+{"version":3,"file":"SectionMessageIcon.js","names":[],"sources":["../../../src/components/section-message/SectionMessageIcon.tsx"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport React, { useEffect } from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { useSectionMessageContext } from './SectionMessageContext'\n\nconst themeIcons = {\n  success: OkCircle,\n  warning: Danger,\n  error: Error,\n  neutral: Info,\n  info: Info\n}\n\ntype SectionMessageIconProps = Partial<React.ComponentProps<typeof Icon>>\n\nexport const SectionMessageIcon = ({\n  className,\n  is,\n  ...rest\n}: SectionMessageIconProps): JSX.Element => {\n  const { theme, setHasIcon } = useSectionMessageContext()\n\n  useEffect(() => {\n    setHasIcon(true)\n    return () => setHasIcon(false)\n  }, [setHasIcon])\n\n  return (\n    <Icon\n      is={is || themeIcons[theme]}\n      size=\"sm\"\n      {...rest}\n      className={cn(\n        'm-auto',\n        'absolute',\n        'left-4',\n        'top-4',\n        'text-current',\n        className\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;AAQA,IAAM,aAAa;CACjB,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAID,IAAa,sBAAsB,EACjC,WACA,IACA,GAAG,WACuC;CAC1C,MAAM,EAAE,OAAO,eAAe,0BAA0B;AAExD,iBAAgB;AACd,aAAW,KAAK;AAChB,eAAa,WAAW,MAAM;IAC7B,CAAC,WAAW,CAAC;AAEhB,QACE,sBAAA,cAAC,MAAD;EACE,IAAI,MAAM,WAAW;EACrB,MAAK;EACL,GAAI;EACJ,WAAW,GACT,UACA,YACA,UACA,SACA,gBACA,UACD;EACD,CAAA"}

package/dist/components/section-message/SectionMessageLayout.js

@@ -1,5 +1,4 @@
-import { styled } from "../../styled.js";
-import clsx from "clsx";
+import { cn, styled } from "../../styled.js";
 import React from "react";
 //#region src/components/section-message/SectionMessageLayout.tsx
 var SectionMessageContent = styled("div", { base: [
@@ -8,7 +7,7 @@ var SectionMessageContent = styled("div", { base: [
 	"pt-0.5",
 	"*:not-last:mb-2"
 ] });
-var SectionMessageActions = ({ className, ...rest }) => /* @__PURE__ */ React.createElement("div", { className: clsx("max-w-full", "shrink-0", className) }, /* @__PURE__ */ React.createElement("div", {
+var SectionMessageActions = ({ className, ...rest }) => /* @__PURE__ */ React.createElement("div", { className: cn("max-w-full", "shrink-0", className) }, /* @__PURE__ */ React.createElement("div", {
 	className: "flex flex-wrap gap-3",
 	...rest
 }));

package/dist/components/section-message/SectionMessageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const SectionMessageContent = styled('div', {\n  base: ['max-w-full', 'shrink-0', 'pt-0.5', '*:not-last:mb-2']\n})\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={clsx('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"mappings":";;;;AAKA,IAAa,wBAAwB,OAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;CAAkB,EAC9D,CAAC;AAEF,IAAa,yBAAyB,EACpC,WACA,GAAG,WAEH,sBAAA,cAAC,OAAD,EAAK,WAAW,KAAK,cAAc,YAAY,UAAU,EAEnD,EADJ,sBAAA,cAAC,OAAD;CAAK,WAAU;CAAuB,GAAI;CAAQ,CAAA,CAC9C"}
+{"version":3,"file":"SectionMessageLayout.js","names":[],"sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nexport const SectionMessageContent = styled('div', {\n  base: ['max-w-full', 'shrink-0', 'pt-0.5', '*:not-last:mb-2']\n})\n\nexport const SectionMessageActions = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('max-w-full', 'shrink-0', className)}>\n    <div className=\"flex flex-wrap gap-3\" {...rest} />\n  </div>\n)\n"],"mappings":";;;AAKA,IAAa,wBAAwB,OAAO,OAAO,EACjD,MAAM;CAAC;CAAc;CAAY;CAAU;CAAkB,EAC9D,CAAC;AAEF,IAAa,yBAAyB,EACpC,WACA,GAAG,WAEH,sBAAA,cAAC,OAAD,EAAK,WAAW,GAAG,cAAc,YAAY,UAAU,EAEjD,EADJ,sBAAA,cAAC,OAAD;CAAK,WAAU;CAAuB,GAAI;CAAQ,CAAA,CAC9C"}

package/dist/components/segmented-control/SegmentedControlBadge.js

@@ -1,6 +1,6 @@
+import { cn } from "../../styled.js";
 import { Badge } from "../badge/Badge.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
-import clsx from "clsx";
 import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlBadge.tsx
 var badgeSizeMap = {
@@ -13,7 +13,7 @@ var SegmentedControlBadge = ({ className, ...props }) => {
 	return /* @__PURE__ */ React$1.createElement(Badge, {
 		...props,
 		size: badgeSizeMap[size],
-		className: clsx("border-none", className, "font-normal")
+		className: cn("border-none", className, "font-normal")
 	});
 };
 //#endregion

package/dist/components/segmented-control/SegmentedControlBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      size={badgeSizeMap[size as string]}\n      className={clsx('border-none', className, 'font-normal')}\n    />\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,YACgE;CACnE,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QACE,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,KAAK,eAAe,WAAW,cAAc;EACxD,CAAA"}
+{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', className, 'font-normal')}\n    />\n  )\n}\n"],"mappings":";;;;;AAOA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,yBAAyB,EACpC,WACA,GAAG,YACgE;CACnE,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QACE,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,WAAW,cAAc;EACtD,CAAA"}

package/dist/components/side-bar/SideBar.js

@@ -1,7 +1,6 @@
-import { Theme, styled } from "../../styled.js";
+import { Theme, cn, styled } from "../../styled.js";
 import { SideBarContext } from "./SideBarContext.js";
 import { SideBarBody, SideBarBrand, SideBarBrandLogo, SideBarBrandName, SideBarFooter, SideBarHeader } from "./SideBarComponents.js";
-import clsx from "clsx";
 import React from "react";
 import { useFocusWithin, useHover, useInteractOutside } from "react-aria";
 //#region src/components/side-bar/SideBar.tsx
@@ -91,7 +90,7 @@ var SideBar = ({ theme, className, children, type = "expandable", offset = "0px"
 			"--offset": offset
 		},
 		type,
-		className: clsx("h-[calc(100svh-var(--offset))]", "top-(--offset)", className)
+		className: cn("h-[calc(100svh-var(--offset))]", "top-(--offset)", className)
 	}, /* @__PURE__ */ React.createElement(Content, {
 		...expandableProps,
 		isExpanded,

package/dist/components/side-bar/SideBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={clsx(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"mappings":";;;;;;;AAgBA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;CACb;AAED,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,MAAM;CACvB,UAAU,EACR,MAAM;EACJ,QAAQ,EAAE;EACV,YAAY,CAAC,OAAO;EACrB,EACF;CACF,CAAC;AAEF,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,QAAQ,EAAE;GACV,YAAY,EAAE;GACf;EACD,YAAY;GACV,MAAM,CAAC,YAAY;GACnB,OAAO,CAAC,OAAO;GAChB;EACF;CACD,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,6CAA6C;EACtD,CACF;CACF,CAAC;AAEF,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,UAAU;EAC5B,OAAO,CAAC,YAAY,YAAY;EACjC,EACF;CACF,CAAC;AAOF,IAAa,WAAW,EACtB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,SAAS,SAAS;CACrE,MAAM,MAAM,MAAM,OAAuB,KAAK;AAE9C,oBAAmB;EACjB;EACA,yBAAyB,cAAc,MAAM;EAC9C,CAAC;CACF,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,KAAK;EACxC,oBAAoB,cAAc,MAAM;EACzC,CAAC;CACF,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,KAAK;EACvC,kBAAkB,cAAc,MAAM;EACvC,CAAC;CACF,MAAM,aAAa,EACjB,kBAAkB,cAAc,KAAK,EACtC;CAED,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACD,GACD,EAAE;AAER,QACE,sBAAA,cAAC,eAAe,UAAhB,EAAyB,OAAO,EAAE,YAAY,EAwBpB,EAvBxB,sBAAA,cAAC,OAAD,EAAO,OAAO,SAAS,OAsBf,EArBN,sBAAA,cAAC,MAAD;EACE,GAAI;EACJ,OAAO;GAAE,GAAG;GAAO,YAAY;GAAQ;EACjC;EACN,WAAW,KACT,kCACA,kBACA,UACD;EAYI,EAVL,sBAAA,cAAC,SAAD;EAAS,GAAI;EAA6B;EAAkB;EASlD,EARP,UAKA,SAAS,gBACR,sBAAA,cAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,YAAc,CAAA,CAElD,CACL,CACD,CACgB;;AAI9B,QAAQ,QAAQ;AAChB,QAAQ,YAAY;AACpB,QAAQ,YAAY;AACpB,QAAQ,SAAS;AACjB,QAAQ,OAAO;AACf,QAAQ,SAAS;AAEjB,QAAQ,cAAc"}
+{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\nimport { cn } from '~/styled'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"mappings":";;;;;;AAgBA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;CACb;AAED,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,MAAM;CACvB,UAAU,EACR,MAAM;EACJ,QAAQ,EAAE;EACV,YAAY,CAAC,OAAO;EACrB,EACF;CACF,CAAC;AAEF,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,QAAQ,EAAE;GACV,YAAY,EAAE;GACf;EACD,YAAY;GACV,MAAM,CAAC,YAAY;GACnB,OAAO,CAAC,OAAO;GAChB;EACF;CACD,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,6CAA6C;EACtD,CACF;CACF,CAAC;AAEF,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,UAAU;EAC5B,OAAO,CAAC,YAAY,YAAY;EACjC,EACF;CACF,CAAC;AAOF,IAAa,WAAW,EACtB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,SAAS,SAAS;CACrE,MAAM,MAAM,MAAM,OAAuB,KAAK;AAE9C,oBAAmB;EACjB;EACA,yBAAyB,cAAc,MAAM;EAC9C,CAAC;CACF,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,KAAK;EACxC,oBAAoB,cAAc,MAAM;EACzC,CAAC;CACF,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,KAAK;EACvC,kBAAkB,cAAc,MAAM;EACvC,CAAC;CACF,MAAM,aAAa,EACjB,kBAAkB,cAAc,KAAK,EACtC;CAED,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACD,GACD,EAAE;AAER,QACE,sBAAA,cAAC,eAAe,UAAhB,EAAyB,OAAO,EAAE,YAAY,EAwBpB,EAvBxB,sBAAA,cAAC,OAAD,EAAO,OAAO,SAAS,OAsBf,EArBN,sBAAA,cAAC,MAAD;EACE,GAAI;EACJ,OAAO;GAAE,GAAG;GAAO,YAAY;GAAQ;EACjC;EACN,WAAW,GACT,kCACA,kBACA,UACD;EAYI,EAVL,sBAAA,cAAC,SAAD;EAAS,GAAI;EAA6B;EAAkB;EASlD,EARP,UAKA,SAAS,gBACR,sBAAA,cAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,YAAc,CAAA,CAElD,CACL,CACD,CACgB;;AAI9B,QAAQ,QAAQ;AAChB,QAAQ,YAAY;AACpB,QAAQ,YAAY;AACpB,QAAQ,SAAS;AACjB,QAAQ,OAAO;AACf,QAAQ,SAAS;AAEjB,QAAQ,cAAc"}

package/dist/components/skeleton-loader/SkeletonBarChart.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonBarChart.tsx
 var getBarWidth = (rowIndex) => Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55);
 var LegendItem = () => /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
-var SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ React.createElement(LegendItem, { key: i }))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-between gap-4" }, Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ React.createElement("div", {
+var SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ React.createElement(LegendItem, { key: i }))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-between gap-4" }, Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ React.createElement("div", {
 	key: i,
 	className: "flex items-center gap-5"
 }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-20 shrink-0 rounded-full" }), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement(SkeletonLoader, {

package/dist/components/skeleton-loader/SkeletonBarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarWidth = (rowIndex: number) =>\n  Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55)\n\nconst LegendItem = () => (\n  <div className=\"flex items-center gap-2\">\n    <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n    <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n  </div>\n)\n\nexport const SkeletonBarChart = ({\n  numberOfLabels = 3,\n  numberOfRows = 4,\n  numberOfTicks = 4,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfRows?: number\n  numberOfTicks?: number\n  className?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex items-center gap-4\">\n      {Array.from({ length: numberOfLabels }, (_, i) => (\n        <LegendItem key={i} />\n      ))}\n    </div>\n    <div className=\"flex flex-col justify-between gap-4\">\n      {Array.from({ length: numberOfRows }, (_, i) => (\n        <div key={i} className=\"flex items-center gap-5\">\n          <SkeletonLoader className=\"h-3 w-20 shrink-0 rounded-full\" />\n          <div className=\"grow\">\n            <SkeletonLoader\n              className=\"h-5 w-(--width) rounded-full\"\n              style={{\n                '--width': `${getBarWidth(i)}%`\n              }}\n            />\n          </div>\n        </div>\n      ))}\n      <div className=\"flex justify-between pl-24\">\n        {Array.from({ length: numberOfTicks }, (_, i) => (\n          <SkeletonLoader key={i} className=\"h-2 w-8 rounded-full\" />\n        ))}\n      </div>\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAM,eAAe,aACnB,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC,GAAG,GAAG;AAExD,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAGT,EAFJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAa,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,UAAU,UAAU,EA0B/D,EAzBL,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,GAAK,CAAA,CACtB,CACE,EACN,sBAAA,cAAC,OAAD,EAAK,WAAU,uCAmBT,EAlBH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,MACxC,sBAAA,cAAC,OAAD;CAAK,KAAK;CAAG,WAAU;CAUjB,EATJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,kCAAmC,CAAA,EAC7D,sBAAA,cAAC,OAAD,EAAK,WAAU,QAOT,EANJ,sBAAA,cAAC,gBAAD;CACE,WAAU;CACV,OAAO,EACL,WAAW,GAAG,YAAY,EAAE,CAAC,IAC9B;CACD,CAAA,CACE,CACF,CACN,EACF,sBAAA,cAAC,OAAD,EAAK,WAAU,8BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,eAAe,GAAG,GAAG,MACzC,sBAAA,cAAC,gBAAD;CAAgB,KAAK;CAAG,WAAU;CAAyB,CAAA,CAC3D,CACE,CACF,CACD"}
+{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarWidth = (rowIndex: number) =>\n  Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55)\n\nconst LegendItem = () => (\n  <div className=\"flex items-center gap-2\">\n    <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n    <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n  </div>\n)\n\nexport const SkeletonBarChart = ({\n  numberOfLabels = 3,\n  numberOfRows = 4,\n  numberOfTicks = 4,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfRows?: number\n  numberOfTicks?: number\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex items-center gap-4\">\n      {Array.from({ length: numberOfLabels }, (_, i) => (\n        <LegendItem key={i} />\n      ))}\n    </div>\n    <div className=\"flex flex-col justify-between gap-4\">\n      {Array.from({ length: numberOfRows }, (_, i) => (\n        <div key={i} className=\"flex items-center gap-5\">\n          <SkeletonLoader className=\"h-3 w-20 shrink-0 rounded-full\" />\n          <div className=\"grow\">\n            <SkeletonLoader\n              className=\"h-5 w-(--width) rounded-full\"\n              style={{\n                '--width': `${getBarWidth(i)}%`\n              }}\n            />\n          </div>\n        </div>\n      ))}\n      <div className=\"flex justify-between pl-24\">\n        {Array.from({ length: numberOfTicks }, (_, i) => (\n          <SkeletonLoader key={i} className=\"h-2 w-8 rounded-full\" />\n        ))}\n      </div>\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,eAAe,aACnB,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC,GAAG,GAAG;AAExD,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAGT,EAFJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAa,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU,EA0B7D,EAzBL,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,GAAK,CAAA,CACtB,CACE,EACN,sBAAA,cAAC,OAAD,EAAK,WAAU,uCAmBT,EAlBH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,MACxC,sBAAA,cAAC,OAAD;CAAK,KAAK;CAAG,WAAU;CAUjB,EATJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,kCAAmC,CAAA,EAC7D,sBAAA,cAAC,OAAD,EAAK,WAAU,QAOT,EANJ,sBAAA,cAAC,gBAAD;CACE,WAAU;CACV,OAAO,EACL,WAAW,GAAG,YAAY,EAAE,CAAC,IAC9B;CACD,CAAA,CACE,CACF,CACN,EACF,sBAAA,cAAC,OAAD,EAAK,WAAU,8BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,eAAe,GAAG,GAAG,MACzC,sBAAA,cAAC,gBAAD;CAAgB,KAAK;CAAG,WAAU;CAAyB,CAAA,CAC3D,CACE,CACF,CACD"}

package/dist/components/skeleton-loader/SkeletonButton.js

@@ -1,8 +1,8 @@
+import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonButton.tsx
-var SkeletonButton = ({ className }) => /* @__PURE__ */ React.createElement(SkeletonLoader, { className: clsx("w-[10rem]", "h-8", "rounded-sm", className) });
+var SkeletonButton = ({ className }) => /* @__PURE__ */ React.createElement(SkeletonLoader, { className: cn("w-[10rem]", "h-8", "rounded-sm", className) });
 //#endregion
 export { SkeletonButton };
 

package/dist/components/skeleton-loader/SkeletonButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonButton.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonButton = ({\n  className\n}: {\n  className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => (\n  <SkeletonLoader\n    className={clsx('w-[10rem]', 'h-8', 'rounded-sm', className)}\n  />\n)\n"],"mappings":";;;;AAKA,IAAa,kBAAkB,EAC7B,gBAIA,sBAAA,cAAC,gBAAD,EACE,WAAW,KAAK,aAAa,OAAO,cAAc,UAAU,EAC5D,CAAA"}
+{"version":3,"file":"SkeletonButton.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonButton = ({\n  className\n}: {\n  className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => (\n  <SkeletonLoader className={cn('w-[10rem]', 'h-8', 'rounded-sm', className)} />\n)\n"],"mappings":";;;;AAMA,IAAa,kBAAkB,EAC7B,gBAIA,sBAAA,cAAC,gBAAD,EAAgB,WAAW,GAAG,aAAa,OAAO,cAAc,UAAU,EAAI,CAAA"}

package/dist/components/skeleton-loader/SkeletonCard.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { SkeletonButton } from "./SkeletonButton.js";
 import { Tile } from "../tile/Tile.js";
 import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ React.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ React.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ React.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ React.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ React.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ React.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ React.createElement(SkeletonLoader, {
 	key: rowNumber,
 	className: "bg-grey-200 h-10 w-full min-w-25 rounded-md"
 })))), /* @__PURE__ */ React.createElement(SkeletonButton, null));

package/dist/components/skeleton-loader/SkeletonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={clsx(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6 p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AASA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,KACT,YACA,UACA,YACA,gBACA,aACA,UACD,EAgBI,EAdL,sBAAA,cAAC,OAAD,EAAK,WAAU,kCAYT,EAXH,aAAa,sBAAA,cAAC,uBAAA,KAAwB,EACvC,sBAAA,cAAC,OAAD,EAAK,WAAU,4BAST,EARH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACG,CACF,EACN,sBAAA,cAAC,gBAAA,KAAiB,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6 p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AAUA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,YACA,UACA,YACA,gBACA,aACA,UACD,EAgBI,EAdL,sBAAA,cAAC,OAAD,EAAK,WAAU,kCAYT,EAXH,aAAa,sBAAA,cAAC,uBAAA,KAAwB,EACvC,sBAAA,cAAC,OAAD,EAAK,WAAU,4BAST,EARH,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACG,CACF,EACN,sBAAA,cAAC,gBAAA,KAAiB,CACb"}

package/dist/components/skeleton-loader/SkeletonColumnChart.js

@@ -1,6 +1,6 @@
+import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonColumnChart.tsx
 var getBarHeight = (groupIndex, columnIndex) => Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30);
@@ -10,7 +10,7 @@ var ColumnGroup = ({ numberOfColumns, groupIndex }) => /* @__PURE__ */ React.cre
 	style: { "--height": `${getBarHeight(groupIndex, i)}px` }
 }))), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-2 w-14 rounded-full" }));
 var LegendItem = () => /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
-var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ React.createElement(LegendItem, { key: i })))), /* @__PURE__ */ React.createElement("div", { className: "flex items-end justify-between gap-2" }, Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ React.createElement(ColumnGroup, {
+var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ React.createElement(LegendItem, { key: i })))), /* @__PURE__ */ React.createElement("div", { className: "flex items-end justify-between gap-2" }, Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ React.createElement(ColumnGroup, {
 	key: i,
 	numberOfColumns,
 	groupIndex: i

package/dist/components/skeleton-loader/SkeletonColumnChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarHeight = (groupIndex: number, columnIndex: number) =>\n  Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30)\n\nconst ColumnGroup = ({\n  numberOfColumns,\n  groupIndex\n}: {\n  numberOfColumns: number\n  groupIndex: number\n}) => (\n  <div className=\"flex flex-col items-center gap-4\">\n    <div className=\"flex items-end gap-2\">\n      {Array.from({ length: numberOfColumns }, (_, i) => (\n        <SkeletonLoader\n          key={i}\n          className=\"h-(--height) w-5 rounded-t-full rounded-b-none\"\n          style={{\n            '--height': `${getBarHeight(groupIndex, i)}px`\n          }}\n        />\n      ))}\n    </div>\n    <SkeletonLoader className=\"h-2 w-14 rounded-full\" />\n  </div>\n)\n\nconst LegendItem = () => (\n  <div className=\"flex items-center gap-2\">\n    <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n    <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n  </div>\n)\n\nexport const SkeletonColumnChart = ({\n  numberOfLabels = 2,\n  numberOfGroups = 7,\n  numberOfColumns = 1,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfGroups?: number\n  numberOfColumns?: number\n  className?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center gap-4\">\n        {Array.from({ length: numberOfLabels }, (_, i) => (\n          <LegendItem key={i} />\n        ))}\n      </div>\n    </div>\n    <div className=\"flex items-end justify-between gap-2\">\n      {Array.from({ length: numberOfGroups }, (_, i) => (\n        <ColumnGroup key={i} numberOfColumns={numberOfColumns} groupIndex={i} />\n      ))}\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAM,gBAAgB,YAAoB,gBACxC,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,aAAa,cAAc,EAAE,CAAC,GAAG,GAAG;AAExE,IAAM,eAAe,EACnB,iBACA,iBAKA,sBAAA,cAAC,OAAD,EAAK,WAAU,oCAaT,EAZJ,sBAAA,cAAC,OAAD,EAAK,WAAU,wBAUT,EATH,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,MAC3C,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,EAAE,CAAC,KAC5C;CACD,CAAA,CACF,CACE,EACN,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAGT,EAFJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,UAAU,UAAU,EAa/D,EAZL,sBAAA,cAAC,OAAD,EAAK,WAAU,uBAMT,EALJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,GAAK,CAAA,CACtB,CACE,CACF,EACN,sBAAA,cAAC,OAAD,EAAK,WAAU,wCAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,aAAD;CAAa,KAAK;CAAoB;CAAiB,YAAY;CAAK,CAAA,CACxE,CACE,CACD"}
+{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarHeight = (groupIndex: number, columnIndex: number) =>\n  Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30)\n\nconst ColumnGroup = ({\n  numberOfColumns,\n  groupIndex\n}: {\n  numberOfColumns: number\n  groupIndex: number\n}) => (\n  <div className=\"flex flex-col items-center gap-4\">\n    <div className=\"flex items-end gap-2\">\n      {Array.from({ length: numberOfColumns }, (_, i) => (\n        <SkeletonLoader\n          key={i}\n          className=\"h-(--height) w-5 rounded-t-full rounded-b-none\"\n          style={{\n            '--height': `${getBarHeight(groupIndex, i)}px`\n          }}\n        />\n      ))}\n    </div>\n    <SkeletonLoader className=\"h-2 w-14 rounded-full\" />\n  </div>\n)\n\nconst LegendItem = () => (\n  <div className=\"flex items-center gap-2\">\n    <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n    <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n  </div>\n)\n\nexport const SkeletonColumnChart = ({\n  numberOfLabels = 2,\n  numberOfGroups = 7,\n  numberOfColumns = 1,\n  className\n}: {\n  numberOfLabels?: number\n  numberOfGroups?: number\n  numberOfColumns?: number\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-center gap-4\">\n        {Array.from({ length: numberOfLabels }, (_, i) => (\n          <LegendItem key={i} />\n        ))}\n      </div>\n    </div>\n    <div className=\"flex items-end justify-between gap-2\">\n      {Array.from({ length: numberOfGroups }, (_, i) => (\n        <ColumnGroup key={i} numberOfColumns={numberOfColumns} groupIndex={i} />\n      ))}\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,YAAoB,gBACxC,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,aAAa,cAAc,EAAE,CAAC,GAAG,GAAG;AAExE,IAAM,eAAe,EACnB,iBACA,iBAKA,sBAAA,cAAC,OAAD,EAAK,WAAU,oCAaT,EAZJ,sBAAA,cAAC,OAAD,EAAK,WAAU,wBAUT,EATH,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,MAC3C,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,EAAE,CAAC,KAC5C;CACD,CAAA,CACF,CACE,EACN,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAGT,EAFJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;AAGR,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU,EAa7D,EAZL,sBAAA,cAAC,OAAD,EAAK,WAAU,uBAMT,EALJ,sBAAA,cAAC,OAAD,EAAK,WAAU,2BAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,GAAK,CAAA,CACtB,CACE,CACF,EACN,sBAAA,cAAC,OAAD,EAAK,WAAU,wCAIT,EAHH,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,sBAAA,cAAC,aAAD;CAAa,KAAK;CAAoB;CAAiB,YAAY;CAAK,CAAA,CACxE,CACE,CACD"}

package/dist/components/skeleton-loader/SkeletonDoughnutChart.js

@@ -1,5 +1,5 @@
+import { cn } from "../../styled.js";
 import { Tile } from "../tile/Tile.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonDoughnutChart.tsx
 var buildConicGradient = () => {
@@ -16,7 +16,7 @@ var buildConicGradient = () => {
 	});
 	return `conic-gradient(${stops.join(", ")})`;
 };
-var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "size-60", className) }, /* @__PURE__ */ React.createElement("div", {
+var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "size-60", className) }, /* @__PURE__ */ React.createElement("div", {
 	className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
 	style: { "--gradient": buildConicGradient() }
 }, /* @__PURE__ */ React.createElement("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })));

package/dist/components/skeleton-loader/SkeletonDoughnutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={clsx('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;AAKA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,EAAE;CAC1B,IAAI,UAAU;AAEd,OAAM,KAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,cAAc;AACrD,QAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,KAC/D;AACD,aAAW;AACX,QAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,KAAK;AACrD,aAAW;GACX;AAEF,QAAO,kBAAkB,MAAM,KAAK,KAAK,CAAC;;AAG5C,IAAa,yBAAyB,EACpC,gBAIA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,WAAW,UAAU,EAO3C,EANL,sBAAA,cAAC,OAAD;CACE,WAAU;CACV,OAAO,EAAE,cAAc,oBAAoB,EAAE;CAGzC,EADJ,sBAAA,cAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA,CAClE,CACD"}
+{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;AAMA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,EAAE;CAC1B,IAAI,UAAU;AAEd,OAAM,KAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,cAAc;AACrD,QAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,KAC/D;AACD,aAAW;AACX,QAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,KAAK;AACrD,aAAW;GACX;AAEF,QAAO,kBAAkB,MAAM,KAAK,KAAK,CAAC;;AAG5C,IAAa,yBAAyB,EACpC,gBAIA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,WAAW,UAAU,EAOzC,EANL,sBAAA,cAAC,OAAD;CACE,WAAU;CACV,OAAO,EAAE,cAAc,oBAAoB,EAAE;CAGzC,EADJ,sBAAA,cAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA,CAClE,CACD"}

package/dist/components/skeleton-loader/SkeletonHeading.js

@@ -1,8 +1,8 @@
+import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonHeading.tsx
-var SkeletonHeading = ({ className }) => /* @__PURE__ */ React.createElement(SkeletonLoader, { className: clsx("w-64", "h-6", "rounded-xl", className) });
+var SkeletonHeading = ({ className }) => /* @__PURE__ */ React.createElement(SkeletonLoader, { className: cn("w-64", "h-6", "rounded-xl", className) });
 //#endregion
 export { SkeletonHeading };
 

package/dist/components/skeleton-loader/SkeletonHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonHeading.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({\n  className\n}: {\n  className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => (\n  <SkeletonLoader className={clsx('w-64', 'h-6', 'rounded-xl', className)} />\n)\n"],"mappings":";;;;AAKA,IAAa,mBAAmB,EAC9B,gBAIA,sBAAA,cAAC,gBAAD,EAAgB,WAAW,KAAK,QAAQ,OAAO,cAAc,UAAU,EAAI,CAAA"}
+{"version":3,"file":"SkeletonHeading.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({\n  className\n}: {\n  className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => <SkeletonLoader className={cn('w-64', 'h-6', 'rounded-xl', className)} />\n"],"mappings":";;;;AAMA,IAAa,mBAAmB,EAC9B,gBAGI,sBAAA,cAAC,gBAAD,EAAgB,WAAW,GAAG,QAAQ,OAAO,cAAc,UAAU,EAAI,CAAA"}

package/dist/components/skeleton-loader/SkeletonPanelList.js

@@ -1,9 +1,9 @@
+import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonPanelList.tsx
-var SkeletonPanelList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("px-6", "flex-col", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "size-10 rounded-full" }), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-8 w-28 rounded-md" })));
+var SkeletonPanelList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("px-6", "flex-col", "w-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "size-10 rounded-full" }), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-8 w-28 rounded-md" })));
 //#endregion
 export { SkeletonPanelList };
 

package/dist/components/skeleton-loader/SkeletonPanelList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={clsx('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,qBAAqB,EAAE,gBAClC,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,QAAQ,YAAY,UAAU,UAAU,EAQvD,EAPL,sBAAA,cAAC,OAAD,EAAK,WAAU,mFAMT,EALJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,OAAD,EAAK,WAAU,QAET,EADJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,0BAA2B,CAAA,CACjD,EACN,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,CAC9C,CACD"}
+{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,qBAAqB,EAAE,gBAClC,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,UAAU,EAQrD,EAPL,sBAAA,cAAC,OAAD,EAAK,WAAU,mFAMT,EALJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,sBAAA,cAAC,OAAD,EAAK,WAAU,QAET,EADJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,0BAA2B,CAAA,CACjD,EACN,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,CAC9C,CACD"}

package/dist/components/skeleton-loader/SkeletonSubjectList.js

@@ -1,9 +1,9 @@
+import { cn } from "../../styled.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonSubjectList.tsx
-var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className) }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" }));
+var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ React.createElement(Tile, { className: cn("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className) }, /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ React.createElement(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" }));
 //#endregion
 export { SkeletonSubjectList };
 

package/dist/components/skeleton-loader/SkeletonSubjectList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonSubjectList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonSubjectList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonSubjectList = ({ className }: { className?: string }) => (\n  <Tile\n    className={clsx(\n      'p-2',\n      'flex-row',\n      'flex-wrap',\n      'items-center',\n      'justify-between',\n      'gap-4',\n      'w-full',\n      className\n    )}\n  >\n    <SkeletonLoader className=\"h-22 max-w-xl grow rounded-xl\" />\n    <SkeletonLoader className=\"size-10 shrink-0 rounded-md\" />\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,uBAAuB,EAAE,gBACpC,sBAAA,cAAC,MAAD,EACE,WAAW,KACT,OACA,YACA,aACA,gBACA,mBACA,SACA,UACA,UACD,EAII,EAFL,sBAAA,cAAC,gBAAD,EAAgB,WAAU,iCAAkC,CAAA,EAC5D,sBAAA,cAAC,gBAAD,EAAgB,WAAU,+BAAgC,CAAA,CACrD"}
+{"version":3,"file":"SkeletonSubjectList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonSubjectList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonSubjectList = ({ className }: { className?: string }) => (\n  <Tile\n    className={cn(\n      'p-2',\n      'flex-row',\n      'flex-wrap',\n      'items-center',\n      'justify-between',\n      'gap-4',\n      'w-full',\n      className\n    )}\n  >\n    <SkeletonLoader className=\"h-22 max-w-xl grow rounded-xl\" />\n    <SkeletonLoader className=\"size-10 shrink-0 rounded-md\" />\n  </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,uBAAuB,EAAE,gBACpC,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,OACA,YACA,aACA,gBACA,mBACA,SACA,UACA,UACD,EAII,EAFL,sBAAA,cAAC,gBAAD,EAAgB,WAAU,iCAAkC,CAAA,EAC5D,sBAAA,cAAC,gBAAD,EAAgB,WAAU,+BAAgC,CAAA,CACrD"}

package/dist/components/skeleton-loader/SkeletonTable.js

@@ -1,11 +1,11 @@
+import { cn } from "../../styled.js";
 import { Table } from "../table/Table.js";
 import { SkeletonLoader } from "./Skeleton.js";
 import { Tile } from "../tile/Tile.js";
-import clsx from "clsx";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonTable.tsx
 var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => {
-	return /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", "relative", className) }, /* @__PURE__ */ React.createElement(Table, { size: "md" }, /* @__PURE__ */ React.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ React.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ React.createElement(SkeletonLoader, {
+	return /* @__PURE__ */ React.createElement(Tile, { className: cn("p-6", "flex-row", "gap-4", "relative", className) }, /* @__PURE__ */ React.createElement(Table, { size: "md" }, /* @__PURE__ */ React.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ React.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ React.createElement(SkeletonLoader, {
 		style: { "--width": columnWidth?.[columnIndex] || "100px" },
 		className: "h-4 w-(--width) rounded-xl"
 	})))), /* @__PURE__ */ React.createElement(Table.Body, { striped: false }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ React.createElement(Table.Row, { key: rowIndex }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ React.createElement(Table.Cell, {