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

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-grey-1000',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-700',\n          'focus:border-primary-800',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-blue-800',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-light', 'focus:outline-danger']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      ...remainingProps\n    }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,IAAe,EACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,uBAAuB;EACnD,CACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAgBY,IAAS,EAAM,YAExB,EACE,gBACA,aACA,UAAO,MACP,gBAAa,YACb,GAAG,KAEL,MACG;CAEH,IAAM,IAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAUD,QAPE,CAAC,EAAe,OAAO,EAAe,aAAa,CAAC,OACjD,MAAU,MAAU,KAAA,EACtB,KAED,EAAM,eAAe,KAIrB,kBAAA,cAAC,GAAiB,GACf,KACC,kBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,EACM,EAEV,EACY;EAGpB;AAED,EAAO,cAAc"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-grey-1000',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-700',\n          'focus:border-primary-800',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-blue-800',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-light', 'focus:outline-danger']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      ...remainingProps\n    }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,uBAAuB;EACnD,CACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAgBD,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAED,KACE,CAAC,eAAe,OAAO,eAAe,aAAa,CAAC,OACjD,UAAU,UAAU,KAAA,EACtB,CAED,OAAM,eAAe;AAGvB,QACE,wBAAA,cAAC,cAAiB,OACf,eACC,wBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,YACM,EAEV,SACY;EAGpB;AAED,OAAO,cAAc"}

package/dist/components/select-field/SelectField.js

@@ -1,33 +1,37 @@
-import { useFieldError as e } from "../form/useFieldError.js";
-import { FieldWrapper as t } from "../field-wrapper/FieldWrapper.js";
-import { useFormCustomContext as n } from "../form/useFormCustomContext.js";
-import { Select as r } from "../select/Select.js";
-import * as i from "react";
-import { useFormContext as a } from "react-hook-form";
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
+import { Select } from "../select/Select.js";
+import * as React$1 from "react";
+import { useFormContext } from "react-hook-form";
 //#region src/components/select-field/SelectField.tsx
-var o = ({ className: o, hideLabel: s, children: c, name: l, label: u, validation: d, prompt: f, description: p, appearance: m, ...h }) => {
-	let { register: g } = a(), _ = n(), { error: v } = e(l), y = d ? g(d) : g, b = _?.appearance || m;
-	return /* @__PURE__ */ i.createElement(t, {
-		className: o,
-		description: p,
-		error: v,
-		fieldId: l,
-		hideLabel: s,
-		label: u,
-		prompt: f,
-		required: !!d?.required,
-		appearance: b
-	}, /* @__PURE__ */ i.createElement(r, {
-		name: l,
-		id: l,
-		appearance: b,
-		...h,
-		ref: y,
-		...v && { state: "error" }
-	}, c));
+var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }) => {
+	const { register } = useFormContext();
+	const context = useFormCustomContext();
+	const { error } = useFieldError(name);
+	const ref = validation ? register(validation) : register;
+	const formAppearance = context?.appearance || appearance;
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required),
+		appearance: formAppearance
+	}, /* @__PURE__ */ React$1.createElement(Select, {
+		name,
+		id: name,
+		appearance: formAppearance,
+		...remainingProps,
+		ref,
+		...error && { state: "error" }
+	}, children));
 };
-o.displayName = "SelectField";
+SelectField.displayName = "SelectField";
 //#endregion
-export { o as SelectField };
+export { SelectField };
 
 //# sourceMappingURL=SelectField.js.map

package/dist/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,KAAe,EAC1B,cACA,cACA,aACA,SACA,UACA,eACA,WACA,gBACA,eACA,GAAG,QACmB;CACtB,IAAM,EAAE,gBAAa,GAAgB,EAC/B,IAAU,GAAsB,EAChC,EAAE,aAAU,EAAc,EAAK,EAC/B,IAAM,IAAa,EAAS,EAAW,GAAG,GAC1C,IAAiB,GAAS,cAAc;AAE9C,QACE,kBAAA,cAAC,GAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,EAAQ,GAAY;EAC9B,YAAY;EAYC,EAVb,kBAAA,cAAC,GAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,GAAI;EACC;EACL,GAAK,KAAS,EAAE,OAAO,SAAS;EAGzB,EADN,EACM,CACI;;AAInB,EAAY,cAAc"}
+{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAYC,EAVb,wBAAA,cAAC,QAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,GAAI;EACC;EACL,GAAK,SAAS,EAAE,OAAO,SAAS;EAGzB,EADN,SACM,CACI;;AAInB,YAAY,cAAc"}

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

@@ -1,21 +1,23 @@
-import { Theme as e, styled as t } from "../../styled.js";
-import { SideBarContext as n } from "./SideBarContext.js";
-import { SideBarBody as r, SideBarBrand as i, SideBarBrandLogo as a, SideBarBrandName as o, SideBarFooter as s, SideBarHeader as c } from "./SideBarComponents.js";
-import l from "clsx";
-import u from "react";
-import { useFocusWithin as d, useHover as f, useInteractOutside as p } from "react-aria";
+import { Theme, 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
-var m = {
+var light = {
 	"--background": "white",
 	"--text": "var(--color-grey-800)",
 	"--border": "var(--color-grey-200)"
-}, h = t("div", {
+};
+var Root = styled("div", {
 	base: ["sticky", "z-1"],
 	variants: { type: {
 		static: [],
 		expandable: ["w-22"]
 	} }
-}), g = t("div", {
+});
+var Content = styled("div", {
 	base: [
 		"bg-(--background)",
 		"border-r",
@@ -41,11 +43,12 @@ var m = {
 		}
 	},
 	compoundVariants: [{
-		isExpanded: !0,
+		isExpanded: true,
 		type: "expandable",
 		class: ["shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]"]
 	}]
-}), _ = t("div", {
+});
+var PointerBlocker = styled("div", {
 	base: [
 		"bottom-0",
 		"left-0",
@@ -58,40 +61,51 @@ var m = {
 		true: ["delay-0", "visible"],
 		false: ["delay-50", "invisible"]
 	} }
-}), v = ({ theme: t, className: r, children: i, type: a = "expandable", offset: o = "0px", style: s, ...c }) => {
-	let [v, y] = u.useState(a === "static"), b = u.useRef(null);
-	p({
-		ref: b,
-		onInteractOutside: () => y(!1)
+});
+var SideBar = ({ theme, className, children, type = "expandable", offset = "0px", style, ...rest }) => {
+	const [isExpanded, setIsExpanded] = React.useState(type === "static");
+	const ref = React.useRef(null);
+	useInteractOutside({
+		ref,
+		onInteractOutside: () => setIsExpanded(false)
+	});
+	const { focusWithinProps } = useFocusWithin({
+		onFocusWithin: () => setIsExpanded(true),
+		onBlurWithin: () => setIsExpanded(false)
+	});
+	const { hoverProps, isHovered } = useHover({
+		onHoverStart: () => setIsExpanded(true),
+		onHoverEnd: () => setIsExpanded(false)
 	});
-	let { focusWithinProps: x } = d({
-		onFocusWithin: () => y(!0),
-		onBlurWithin: () => y(!1)
-	}), { hoverProps: S, isHovered: C } = f({
-		onHoverStart: () => y(!0),
-		onHoverEnd: () => y(!1)
-	}), w = { onTouchEnd: () => y(!0) }, T = a === "expandable" ? {
-		...x,
-		...S,
-		...w,
-		ref: b
+	const touchProps = { onTouchEnd: () => setIsExpanded(true) };
+	const expandableProps = type === "expandable" ? {
+		...focusWithinProps,
+		...hoverProps,
+		...touchProps,
+		ref
 	} : {};
-	return /* @__PURE__ */ u.createElement(n.Provider, { value: { isExpanded: v } }, /* @__PURE__ */ u.createElement(e, { theme: t || m }, /* @__PURE__ */ u.createElement(h, {
-		...c,
+	return /* @__PURE__ */ React.createElement(SideBarContext.Provider, { value: { isExpanded } }, /* @__PURE__ */ React.createElement(Theme, { theme: theme || light }, /* @__PURE__ */ React.createElement(Root, {
+		...rest,
 		style: {
-			...s,
-			"--offset": o
+			...style,
+			"--offset": offset
 		},
-		type: a,
-		className: l("h-[calc(100svh-var(--offset))]", "top-(--offset)", r)
-	}, /* @__PURE__ */ u.createElement(g, {
-		...T,
-		isExpanded: v,
-		type: a
-	}, i, a === "expandable" && /* @__PURE__ */ u.createElement(_, { isVisible: !C && !v })))));
+		type,
+		className: clsx("h-[calc(100svh-var(--offset))]", "top-(--offset)", className)
+	}, /* @__PURE__ */ React.createElement(Content, {
+		...expandableProps,
+		isExpanded,
+		type
+	}, children, type === "expandable" && /* @__PURE__ */ React.createElement(PointerBlocker, { isVisible: !isHovered && !isExpanded })))));
 };
-v.Brand = i, v.BrandLogo = a, v.BrandName = o, v.Header = c, v.Body = r, v.Footer = s, v.displayName = "SideBar";
+SideBar.Brand = SideBarBrand;
+SideBar.BrandLogo = SideBarBrandLogo;
+SideBar.BrandName = SideBarBrandName;
+SideBar.Header = SideBarHeader;
+SideBar.Body = SideBarBody;
+SideBar.Footer = SideBarFooter;
+SideBar.displayName = "SideBar";
 //#endregion
-export { v as SideBar };
+export { SideBar };
 
 //# sourceMappingURL=SideBar.js.map

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,IAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;CACb,EAEK,IAAO,EAAO,OAAO;CACzB,MAAM,CAAC,UAAU,MAAM;CACvB,UAAU,EACR,MAAM;EACJ,QAAQ,EAAE;EACV,YAAY,CAAC,OAAO;EACrB,EACF;CACF,CAAC,EAEI,IAAU,EAAO,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,EAEI,IAAiB,EAAO,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,EAOW,KAAW,EACtB,UACA,cACA,aACA,UAAO,cACP,YAAS,OACT,UACA,GAAG,QACe;CAClB,IAAM,CAAC,GAAY,KAAiB,EAAM,SAAS,MAAS,SAAS,EAC/D,IAAM,EAAM,OAAuB,KAAK;AAE9C,GAAmB;EACjB;EACA,yBAAyB,EAAc,GAAM;EAC9C,CAAC;CACF,IAAM,EAAE,wBAAqB,EAAe;EAC1C,qBAAqB,EAAc,GAAK;EACxC,oBAAoB,EAAc,GAAM;EACzC,CAAC,EACI,EAAE,eAAY,iBAAc,EAAS;EACzC,oBAAoB,EAAc,GAAK;EACvC,kBAAkB,EAAc,GAAM;EACvC,CAAC,EACI,IAAa,EACjB,kBAAkB,EAAc,GAAK,EACtC,EAEK,IACJ,MAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACD,GACD,EAAE;AAER,QACE,kBAAA,cAAC,EAAe,UAAhB,EAAyB,OAAO,EAAE,eAAY,EAwBpB,EAvBxB,kBAAA,cAAC,GAAD,EAAO,OAAO,KAAS,GAsBf,EArBN,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,OAAO;GAAE,GAAG;GAAO,YAAY;GAAQ;EACjC;EACN,WAAW,EACT,kCACA,kBACA,EACD;EAYI,EAVL,kBAAA,cAAC,GAAD;EAAS,GAAI;EAA6B;EAAkB;EASlD,EARP,GAKA,MAAS,gBACR,kBAAA,cAAC,GAAD,EAAgB,WAAW,CAAC,KAAa,CAAC,GAAc,CAAA,CAElD,CACL,CACD,CACgB;;AAI9B,EAAQ,QAAQ,GAChB,EAAQ,YAAY,GACpB,EAAQ,YAAY,GACpB,EAAQ,SAAS,GACjB,EAAQ,OAAO,GACf,EAAQ,SAAS,GAEjB,EAAQ,cAAc"}
+{"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"}

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

@@ -1,24 +1,27 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import { Image as n } from "../image/Image.js";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import { Image } from "../image/Image.js";
 //#region src/components/side-bar/SideBarComponents.tsx
-var r = e("div", { base: [
+var SideBarHeader = styled("div", { base: [
 	"border-b",
 	"border-b-(--border)",
 	"p-4",
 	"w-full"
-] }), i = e("div", { base: [
+] });
+var SideBarBody = styled("div", { base: [
 	"grow",
 	"overflow-y-auto",
 	"overflow-x-hidden",
 	"p-4",
 	"w-full"
-] }), a = e("div", { base: [
+] });
+var SideBarFooter = styled("div", { base: [
 	"border-t",
 	"border-t-(--border)",
 	"p-4",
 	"w-full"
-] }), o = e("a", { base: [
+] });
+var SideBarBrand = styled("a", { base: [
 	"items-end",
 	"text-text",
 	"flex",
@@ -26,8 +29,10 @@ var r = e("div", { base: [
 	"no-underline",
 	"hover:no-underline",
 	"focus:no-underline"
-] }), s = n, c = e(t, { base: ["text-text", "whitespace-nowrap"] });
+] });
+var SideBarBrandLogo = Image;
+var SideBarBrandName = styled(Text, { base: ["text-text", "whitespace-nowrap"] });
 //#endregion
-export { i as SideBarBody, o as SideBarBrand, s as SideBarBrandLogo, c as SideBarBrandName, a as SideBarFooter, r as SideBarHeader };
+export { SideBarBody, SideBarBrand, SideBarBrandLogo, SideBarBrandName, SideBarFooter, SideBarHeader };
 
 //# sourceMappingURL=SideBarComponents.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n  base: ['border-b', 'border-b-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n  base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n  base: ['border-t', 'border-t-(--border)', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = styled('a', {\n  base: [\n    'items-end',\n    'text-text',\n    'flex',\n    'gap-4',\n    'no-underline',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n\nexport const SideBarBrand =\n  StyledSideBarBrand as React.ForwardRefExoticComponent<\n    React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n  >\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  base: ['text-text', 'whitespace-nowrap']\n})\n"],"mappings":";;;;AAOA,IAAa,IAAgB,EAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;CAAS,EAC3D,CAAC,EAEW,IAAc,EAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;CAAS,EACxE,CAAC,EAEW,IAAgB,EAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;CAAS,EAC3D,CAAC,EAcW,IAZc,EAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAOW,IAAmB,GAEnB,IAAmB,EAAO,GAAM,EAC3C,MAAM,CAAC,aAAa,oBAAoB,EACzC,CAAC"}
+{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n  base: ['border-b', 'border-b-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n  base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n  base: ['border-t', 'border-t-(--border)', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = styled('a', {\n  base: [\n    'items-end',\n    'text-text',\n    'flex',\n    'gap-4',\n    'no-underline',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n\nexport const SideBarBrand =\n  StyledSideBarBrand as React.ForwardRefExoticComponent<\n    React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n  >\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  base: ['text-text', 'whitespace-nowrap']\n})\n"],"mappings":";;;;AAOA,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;CAAS,EAC3D,CAAC;AAEF,IAAa,cAAc,OAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;CAAS,EACxE,CAAC;AAEF,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;CAAS,EAC3D,CAAC;AAcF,IAAa,eAZc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAOF,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,aAAa,oBAAoB,EACzC,CAAC"}

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

@@ -1,7 +1,8 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/side-bar/SideBarContext.tsx
-var t = e.createContext({ isExpanded: void 0 }), n = () => e.useContext(t);
+var SideBarContext = React$1.createContext({ isExpanded: void 0 });
+var useSidebarState = () => React$1.useContext(SideBarContext);
 //#endregion
-export { t as SideBarContext, n as useSidebarState };
+export { SideBarContext, useSidebarState };
 
 //# sourceMappingURL=SideBarContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SideBarContext.js","names":[],"sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"mappings":";;AAEA,IAAa,IAAiB,EAAM,cAEjC,EACD,YAAY,KAAA,GACb,CAAC,EAEW,UAAwB,EAAM,WAAW,EAAe"}
+{"version":3,"file":"SideBarContext.js","names":[],"sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"mappings":";;AAEA,IAAa,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,GACb,CAAC;AAEF,IAAa,wBAAwB,QAAM,WAAW,eAAe"}

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

@@ -1,12 +1,12 @@
-import { styled as e } from "../../styled.js";
+import { styled } from "../../styled.js";
 //#region src/components/skeleton-loader/Skeleton.tsx
-var t = e("div", { base: [
+var SkeletonLoader = styled("div", { base: [
 	"bg-grey-300",
 	"size-16",
 	"animate-shimmer"
 ] });
-t.displayName = "Skeleton";
+SkeletonLoader.displayName = "Skeleton";
 //#endregion
-export { t as SkeletonLoader };
+export { SkeletonLoader };
 
 //# sourceMappingURL=Skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const SkeletonLoader = styled('div', {\n  base: ['bg-grey-300', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,IAAiB,EAAO,OAAO,EAC1C,MAAM;CAAC;CAAe;CAAW;CAAkB,EACpD,CAAC;AAEF,EAAe,cAAc"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const SkeletonLoader = styled('div', {\n  base: ['bg-grey-300', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAe;CAAW;CAAkB,EACpD,CAAC;AAEF,eAAe,cAAc"}

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

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

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,KAAkB,EAC7B,mBAIA,kBAAA,cAAC,GAAD,EACE,WAAW,EAAK,aAAa,OAAO,cAAc,EAAU,EAC5D,CAAA"}
+{"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"}

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

@@ -1,23 +1,23 @@
-import { Flex as e } from "../flex/Flex.js";
-import { SkeletonLoader as t } from "./Skeleton.js";
-import { SkeletonButton as n } from "./SkeletonButton.js";
-import { Tile as r } from "../tile/Tile.js";
-import { SkeletonDoughnutChart as i } from "./SkeletonDoughnutChart.js";
-import a from "react";
+import { Flex } from "../flex/Flex.js";
+import { SkeletonLoader } from "./Skeleton.js";
+import { SkeletonButton } from "./SkeletonButton.js";
+import { Tile } from "../tile/Tile.js";
+import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
+import React from "react";
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var o = ({ numberOfRows: o = 3, withChart: s }) => /* @__PURE__ */ a.createElement(r, { className: "relative w-full flex-col items-center gap-6 p-6" }, /* @__PURE__ */ a.createElement(e, {
+var SkeletonCard = ({ numberOfRows = 3, withChart }) => /* @__PURE__ */ React.createElement(Tile, { className: "relative w-full flex-col items-center gap-6 p-6" }, /* @__PURE__ */ React.createElement(Flex, {
 	gap: "6",
 	align: "center",
 	className: "w-full"
-}, s && /* @__PURE__ */ a.createElement(i, null), /* @__PURE__ */ a.createElement(e, {
+}, withChart && /* @__PURE__ */ React.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ React.createElement(Flex, {
 	direction: "column",
 	gap: "24",
 	className: "grow"
-}, Array.from({ length: o }, (e, t) => t).map((e) => /* @__PURE__ */ a.createElement(t, {
-	key: e,
+}, 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__ */ a.createElement(n, null));
+})))), /* @__PURE__ */ React.createElement(SkeletonButton, null));
 //#endregion
-export { o as SkeletonCard };
+export { SkeletonCard };
 
 //# sourceMappingURL=SkeletonCard.js.map

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 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}: {\n  numberOfRows?: number\n  withChart?: boolean\n}) => (\n  <Tile className=\"relative w-full flex-col items-center gap-6 p-6\">\n    <Flex gap=\"6\" align=\"center\" className=\"w-full\">\n      {withChart && <SkeletonDoughnutChart />}\n      <Flex direction=\"column\" gap=\"24\" className=\"grow\">\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      </Flex>\n    </Flex>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AAQA,IAAa,KAAgB,EAC3B,kBAAe,GACf,mBAKA,kBAAA,cAAC,GAAD,EAAM,WAAU,mDAeT,EAdL,kBAAA,cAAC,GAAD;CAAM,KAAI;CAAI,OAAM;CAAS,WAAU;CAYhC,EAXJ,KAAa,kBAAA,cAAC,GAAA,KAAwB,EACvC,kBAAA,cAAC,GAAD;CAAM,WAAU;CAAS,KAAI;CAAK,WAAU;CASrC,EARJ,MAAM,KAAK,EAAE,QAAQ,GAAc,GAAG,GAAG,MAAU,EAAM,CAAC,KACxD,MACC,kBAAA,cAAC,GAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACI,CACF,EACP,kBAAA,cAAC,GAAA,KAAiB,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import 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}: {\n  numberOfRows?: number\n  withChart?: boolean\n}) => (\n  <Tile className=\"relative w-full flex-col items-center gap-6 p-6\">\n    <Flex gap=\"6\" align=\"center\" className=\"w-full\">\n      {withChart && <SkeletonDoughnutChart />}\n      <Flex direction=\"column\" gap=\"24\" className=\"grow\">\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      </Flex>\n    </Flex>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,gBAKA,sBAAA,cAAC,MAAD,EAAM,WAAU,mDAeT,EAdL,sBAAA,cAAC,MAAD;CAAM,KAAI;CAAI,OAAM;CAAS,WAAU;CAYhC,EAXJ,aAAa,sBAAA,cAAC,uBAAA,KAAwB,EACvC,sBAAA,cAAC,MAAD;CAAM,WAAU;CAAS,KAAI;CAAK,WAAU;CASrC,EARJ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,CAAA,CAEL,CACI,CACF,EACP,sBAAA,cAAC,gBAAA,KAAiB,CACb"}

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

@@ -1,60 +1,61 @@
-import { Tile as e } from "../tile/Tile.js";
-import t from "clsx";
-import n from "react";
+import { Tile } from "../tile/Tile.js";
+import clsx from "clsx";
+import React from "react";
 //#region src/components/skeleton-loader/SkeletonDoughnutChart.tsx
-var r = () => /* @__PURE__ */ n.createElement("svg", {
+var DoughnutSvg = () => /* @__PURE__ */ React.createElement("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 120,
 	height: 121,
 	fill: "none",
 	className: "animate-shimmer"
-}, /* @__PURE__ */ n.createElement("mask", {
+}, /* @__PURE__ */ React.createElement("mask", {
 	id: "a",
 	fill: "#fff"
-}, /* @__PURE__ */ n.createElement("path", { d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z" })), /* @__PURE__ */ n.createElement("path", {
+}, /* @__PURE__ */ React.createElement("path", { d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z" })), /* @__PURE__ */ React.createElement("path", {
 	className: "fill-grey-300",
 	stroke: "#fff",
 	strokeWidth: 1.6,
 	d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z",
 	mask: "url(#a)"
-}), /* @__PURE__ */ n.createElement("mask", {
+}), /* @__PURE__ */ React.createElement("mask", {
 	id: "b",
 	fill: "#fff"
-}, /* @__PURE__ */ n.createElement("path", { d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z" })), /* @__PURE__ */ n.createElement("path", {
+}, /* @__PURE__ */ React.createElement("path", { d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z" })), /* @__PURE__ */ React.createElement("path", {
 	className: "fill-grey-300",
 	stroke: "#fff",
 	strokeWidth: 1.6,
 	d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z",
 	mask: "url(#b)"
-}), /* @__PURE__ */ n.createElement("mask", {
+}), /* @__PURE__ */ React.createElement("mask", {
 	id: "c",
 	fill: "#fff"
-}, /* @__PURE__ */ n.createElement("path", { d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z" })), /* @__PURE__ */ n.createElement("path", {
+}, /* @__PURE__ */ React.createElement("path", { d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z" })), /* @__PURE__ */ React.createElement("path", {
 	className: "fill-grey-300",
 	stroke: "#fff",
 	strokeWidth: 1.6,
 	d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z",
 	mask: "url(#c)"
-}), /* @__PURE__ */ n.createElement("mask", {
+}), /* @__PURE__ */ React.createElement("mask", {
 	id: "d",
 	fill: "#fff"
-}, /* @__PURE__ */ n.createElement("path", { d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z" })), /* @__PURE__ */ n.createElement("path", {
+}, /* @__PURE__ */ React.createElement("path", { d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z" })), /* @__PURE__ */ React.createElement("path", {
 	className: "fill-grey-300",
 	stroke: "#fff",
 	strokeWidth: 1.6,
 	d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z",
 	mask: "url(#d)"
-}), /* @__PURE__ */ n.createElement("mask", {
+}), /* @__PURE__ */ React.createElement("mask", {
 	id: "e",
 	fill: "#fff"
-}, /* @__PURE__ */ n.createElement("path", { d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z" })), /* @__PURE__ */ n.createElement("path", {
+}, /* @__PURE__ */ React.createElement("path", { d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z" })), /* @__PURE__ */ React.createElement("path", {
 	className: "fill-grey-300",
 	stroke: "#fff",
 	strokeWidth: 1.6,
 	d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z",
 	mask: "url(#e)"
-})), i = ({ containerCss: i }) => /* @__PURE__ */ n.createElement(e, { className: t("p-6", "flex-row", "gap-4", "relative", i) }, /* @__PURE__ */ n.createElement(r, null));
+}));
+var SkeletonDoughnutChart = ({ containerCss }) => /* @__PURE__ */ React.createElement(Tile, { className: clsx("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__PURE__ */ React.createElement(DoughnutSvg, null));
 //#endregion
-export { i as SkeletonDoughnutChart };
+export { SkeletonDoughnutChart };
 
 //# sourceMappingURL=SkeletonDoughnutChart.js.map

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 DoughnutSvg = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={120}\n    height={121}\n    fill=\"none\"\n    className=\"animate-shimmer\"\n  >\n    <mask id=\"a\" fill=\"#fff\">\n      <path d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\"\n      mask=\"url(#a)\"\n    />\n    <mask id=\"b\" fill=\"#fff\">\n      <path d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\"\n      mask=\"url(#b)\"\n    />\n    <mask id=\"c\" fill=\"#fff\">\n      <path d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\"\n      mask=\"url(#c)\"\n    />\n    <mask id=\"d\" fill=\"#fff\">\n      <path d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\"\n      mask=\"url(#d)\"\n    />\n    <mask id=\"e\" fill=\"#fff\">\n      <path d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\"\n      mask=\"url(#e)\"\n    />\n  </svg>\n)\n\nexport const SkeletonDoughnutChart = ({\n  containerCss\n}: {\n  containerCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}>\n    <DoughnutSvg />\n  </Tile>\n)\n"],"mappings":";;;;AAKA,IAAM,UACJ,kBAAA,cAAC,OAAD;CACE,OAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAK;CACL,WAAU;CAoDN,EAlDJ,kBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,kBAAA,cAAC,QAAD,EAAM,GAAE,oFAAqF,CAAA,CACxF,EACP,kBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,kBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,kBAAA,cAAC,QAAD,EAAM,GAAE,kFAAmF,CAAA,CACtF,EACP,kBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,kBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,kBAAA,cAAC,QAAD,EAAM,GAAE,+EAAgF,CAAA,CACnF,EACP,kBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,kBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,kBAAA,cAAC,QAAD,EAAM,GAAE,8EAA+E,CAAA,CAClF,EACP,kBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,kBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,kBAAA,cAAC,QAAD,EAAM,GAAE,oFAAqF,CAAA,CACxF,EACP,kBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,CACE,EAGK,KAAyB,EACpC,sBAIA,kBAAA,cAAC,GAAD,EAAM,WAAW,EAAK,OAAO,YAAY,SAAS,YAAY,EAAa,EAEpE,EADL,kBAAA,cAAC,GAAA,KAAc,CACV"}
+{"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 DoughnutSvg = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={120}\n    height={121}\n    fill=\"none\"\n    className=\"animate-shimmer\"\n  >\n    <mask id=\"a\" fill=\"#fff\">\n      <path d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\"\n      mask=\"url(#a)\"\n    />\n    <mask id=\"b\" fill=\"#fff\">\n      <path d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\"\n      mask=\"url(#b)\"\n    />\n    <mask id=\"c\" fill=\"#fff\">\n      <path d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\"\n      mask=\"url(#c)\"\n    />\n    <mask id=\"d\" fill=\"#fff\">\n      <path d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\"\n      mask=\"url(#d)\"\n    />\n    <mask id=\"e\" fill=\"#fff\">\n      <path d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\" />\n    </mask>\n    <path\n      className=\"fill-grey-300\"\n      stroke=\"#fff\"\n      strokeWidth={1.6}\n      d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\"\n      mask=\"url(#e)\"\n    />\n  </svg>\n)\n\nexport const SkeletonDoughnutChart = ({\n  containerCss\n}: {\n  containerCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}>\n    <DoughnutSvg />\n  </Tile>\n)\n"],"mappings":";;;;AAKA,IAAM,oBACJ,sBAAA,cAAC,OAAD;CACE,OAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAK;CACL,WAAU;CAoDN,EAlDJ,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,oFAAqF,CAAA,CACxF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,kFAAmF,CAAA,CACtF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,+EAAgF,CAAA,CACnF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,8EAA+E,CAAA,CAClF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,EACF,sBAAA,cAAC,QAAD;CAAM,IAAG;CAAI,MAAK;CAEX,EADL,sBAAA,cAAC,QAAD,EAAM,GAAE,oFAAqF,CAAA,CACxF,EACP,sBAAA,cAAC,QAAD;CACE,WAAU;CACV,QAAO;CACP,aAAa;CACb,GAAE;CACF,MAAK;CACL,CAAA,CACE;AAGR,IAAa,yBAAyB,EACpC,mBAIA,sBAAA,cAAC,MAAD,EAAM,WAAW,KAAK,OAAO,YAAY,SAAS,YAAY,aAAa,EAEpE,EADL,sBAAA,cAAC,aAAA,KAAc,CACV"}

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

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

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,KAAmB,EAC9B,mBAIA,kBAAA,cAAC,GAAD,EAAgB,WAAW,EAAK,QAAQ,OAAO,cAAc,EAAU,EAAI,CAAA"}
+{"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"}