@atom-learning/components 6.16.0-beta.3 → 6.16.0

package/dist/components/select-menu/SelectMenu.d.ts

@@ -0,0 +1,23 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+type SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {
+    size?: 'sm' | 'md' | 'lg';
+    theme?: 'white' | 'grey';
+    state?: 'error';
+};
+export declare const SelectMenu: (({ size, theme, state, children, ...props }: SelectMenuProps) => React.JSX.Element) & {
+    Trigger: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectTriggerProps & React.RefAttributes<HTMLButtonElement> & {
+        placeholder?: string;
+    }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Label: {
+        ({ className, ...props }: RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Separator: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, never> & {
+        as?: React.ElementType;
+    }>;
+};
+export {};

package/dist/components/select-menu/SelectMenu.js

@@ -0,0 +1,26 @@
+import { SelectMenuContent } from "./SelectMenuContent.js";
+import { SelectMenuContext } from "./SelectMenuContext.js";
+import { SelectMenuItem } from "./SelectMenuItem.js";
+import { SelectMenuLabel } from "./SelectMenuLabel.js";
+import { SelectMenuSeparator } from "./SelectMenuSeparator.js";
+import { SelectMenuTrigger } from "./SelectMenuTrigger.js";
+import * as React$1 from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenu.tsx
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...props }) => /* @__PURE__ */ React$1.createElement(SelectMenuContext.Provider, { value: {
+	size,
+	theme,
+	state
+} }, /* @__PURE__ */ React$1.createElement(RadixSelect.Root, props, children));
+var SelectMenu = Object.assign(SelectMenuRoot, {
+	Trigger: SelectMenuTrigger,
+	Content: SelectMenuContent,
+	Item: SelectMenuItem,
+	Group: RadixSelect.Group,
+	Label: SelectMenuLabel,
+	Separator: SelectMenuSeparator
+});
+//#endregion
+export { SelectMenu };
+
+//# sourceMappingURL=SelectMenu.js.map

package/dist/components/select-menu/SelectMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuContext } from './SelectMenuContext'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...props\n}: SelectMenuProps) => (\n  <SelectMenuContext.Provider value={{ size, theme, state }}>\n    <RadixSelect.Root {...props}>{children}</RadixSelect.Root>\n  </SelectMenuContext.Provider>\n)\n\nexport const SelectMenu = Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,YAEH,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO;CAAE;CAAM;CAAO;CAAO,EAE5B,EAD3B,wBAAA,cAAC,YAAY,MAAS,OAAQ,SAA4B,CAC/B;AAG/B,IAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;CACZ,CAAC"}

package/dist/components/select-menu/SelectMenuContent.d.ts

@@ -0,0 +1,3 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+export declare const SelectMenuContent: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/select-menu/SelectMenuContent.js

@@ -0,0 +1,66 @@
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import * as React$1 from "react";
+import { ChevronDown, ChevronUp } from "@atom-learning/icons";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuContent.tsx
+var Content = styled(RadixSelect.Content, {
+	base: [
+		"bg-white",
+		"rounded-md",
+		"shadow-lg",
+		"z-10",
+		"overflow-hidden",
+		"will-change-transform",
+		"will-change-opacity",
+		"[--slide-opacity-out:0]",
+		"data-[side=top]:[--slide-direction-out-y:-4px]",
+		"data-[side=right]:[--slide-direction-out-x:4px]",
+		"data-[side=bottom]:[--slide-direction-out-y:4px]",
+		"data-[side=left]:[--slide-direction-out-x:-4px]",
+		"motion-safe:data-[state=open]:animate-slide-direction-in",
+		"motion-safe:data-[state=closed]:animate-slide-direction-out"
+	],
+	variants: { position: {
+		popper: ["max-h-(--radix-select-content-available-height)", "min-w-(--radix-select-trigger-width)"],
+		"item-aligned": []
+	} }
+});
+var Viewport = styled(RadixSelect.Viewport, {
+	base: ["p-1", "w-full"],
+	variants: { position: {
+		popper: ["h-(--radix-select-content-available-height)"],
+		"item-aligned": []
+	} }
+});
+var ScrollUpButton = styled(RadixSelect.ScrollUpButton, { base: [
+	"flex",
+	"items-center",
+	"justify-center",
+	"h-6",
+	"cursor-default"
+] });
+var ScrollDownButton = styled(RadixSelect.ScrollDownButton, { base: [
+	"flex",
+	"items-center",
+	"justify-center",
+	"h-6",
+	"cursor-default"
+] });
+var SelectMenuContent = React$1.forwardRef(({ children, position = "popper", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React$1.createElement(RadixSelect.Portal, null, /* @__PURE__ */ React$1.createElement(Content, {
+	ref,
+	position,
+	sideOffset,
+	...props
+}, /* @__PURE__ */ React$1.createElement(ScrollUpButton, null, /* @__PURE__ */ React$1.createElement(Icon, {
+	is: ChevronUp,
+	className: "text-grey-700 size-4"
+})), /* @__PURE__ */ React$1.createElement(Viewport, { position }, children), /* @__PURE__ */ React$1.createElement(ScrollDownButton, null, /* @__PURE__ */ React$1.createElement(Icon, {
+	is: ChevronDown,
+	className: "text-grey-700 size-4"
+})))));
+SelectMenuContent.displayName = "SelectMenuContent";
+//#endregion
+export { SelectMenuContent };
+
+//# sourceMappingURL=SelectMenuContent.js.map

package/dist/components/select-menu/SelectMenuContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\n\nconst Content = styled(RadixSelect.Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'z-10',\n    'overflow-hidden',\n    'will-change-transform',\n    'will-change-opacity',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      popper: [\n        'max-h-(--radix-select-content-available-height)',\n        'min-w-(--radix-select-trigger-width)'\n      ],\n      'item-aligned': []\n    }\n  }\n})\n\nconst Viewport = styled(RadixSelect.Viewport, {\n  base: ['p-1', 'w-full'],\n  variants: {\n    position: {\n      popper: ['h-(--radix-select-content-available-height)'],\n      'item-aligned': []\n    }\n  }\n})\n\nconst ScrollUpButton = styled(RadixSelect.ScrollUpButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\nconst ScrollDownButton = styled(RadixSelect.ScrollDownButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\ntype SelectMenuContentProps = React.ComponentPropsWithRef<\n  typeof RadixSelect.Content\n>\n\nexport const SelectMenuContent = React.forwardRef<\n  HTMLDivElement,\n  SelectMenuContentProps\n>(({ children, position = 'popper', sideOffset = 4, ...props }, ref) => (\n  <RadixSelect.Portal>\n    <Content ref={ref} position={position} sideOffset={sideOffset} {...props}>\n      <ScrollUpButton>\n        <Icon is={ChevronUp} className=\"text-grey-700 size-4\" />\n      </ScrollUpButton>\n      <Viewport position={position}>{children}</Viewport>\n      <ScrollDownButton>\n        <Icon is={ChevronDown} className=\"text-grey-700 size-4\" />\n      </ScrollDownButton>\n    </Content>\n  </RadixSelect.Portal>\n))\n\nSelectMenuContent.displayName = 'SelectMenuContent'\n"],"mappings":";;;;;;AAQA,IAAM,UAAU,OAAO,YAAY,SAAS;CAC1C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,UAAU;EACR,QAAQ,CACN,mDACA,uCACD;EACD,gBAAgB,EAAE;EACnB,EACF;CACF,CAAC;AAEF,IAAM,WAAW,OAAO,YAAY,UAAU;CAC5C,MAAM,CAAC,OAAO,SAAS;CACvB,UAAU,EACR,UAAU;EACR,QAAQ,CAAC,8CAA8C;EACvD,gBAAgB,EAAE;EACnB,EACF;CACF,CAAC;AAEF,IAAM,iBAAiB,OAAO,YAAY,gBAAgB,EACxD,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;CAAiB,EAC1E,CAAC;AAEF,IAAM,mBAAmB,OAAO,YAAY,kBAAkB,EAC5D,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;CAAiB,EAC1E,CAAC;AAMF,IAAa,oBAAoB,QAAM,YAGpC,EAAE,UAAU,WAAW,UAAU,aAAa,GAAG,GAAG,SAAS,QAC9D,wBAAA,cAAC,YAAY,QAAA,MACX,wBAAA,cAAC,SAAD;CAAc;CAAe;CAAsB;CAAY,GAAI;CAQzD,EAPR,wBAAA,cAAC,gBAAA,MACC,wBAAA,cAAC,MAAD;CAAM,IAAI;CAAW,WAAU;CAAyB,CAAA,CACzC,EACjB,wBAAA,cAAC,UAAD,EAAoB,UAA+B,EAApB,SAAoB,EACnD,wBAAA,cAAC,kBAAA,MACC,wBAAA,cAAC,MAAD;CAAM,IAAI;CAAa,WAAU;CAAyB,CAAA,CACzC,CACX,CACS,CACrB;AAEF,kBAAkB,cAAc"}

package/dist/components/select-menu/SelectMenuContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type SelectMenuContextValue = {
+    size: 'sm' | 'md' | 'lg';
+    theme: 'white' | 'grey';
+    state?: 'error';
+};
+export declare const SelectMenuContext: React.Context<SelectMenuContextValue>;
+export declare const useSelectMenuContext: () => SelectMenuContextValue;
+export {};

package/dist/components/select-menu/SelectMenuContext.js

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+//#region src/components/select-menu/SelectMenuContext.tsx
+var SelectMenuContext = React$1.createContext({
+	size: "md",
+	theme: "grey"
+});
+var useSelectMenuContext = () => React$1.useContext(SelectMenuContext);
+//#endregion
+export { SelectMenuContext, useSelectMenuContext };
+
+//# sourceMappingURL=SelectMenuContext.js.map

package/dist/components/select-menu/SelectMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuContext.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContext.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.useContext(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;CACR,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}

package/dist/components/select-menu/SelectMenuItem.d.ts

@@ -0,0 +1,3 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+export declare const SelectMenuItem: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/select-menu/SelectMenuItem.js

@@ -0,0 +1,59 @@
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { useSelectMenuContext } from "./SelectMenuContext.js";
+import * as React$1 from "react";
+import { Ok } from "@atom-learning/icons";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuItem.tsx
+var Item = styled(RadixSelect.Item, {
+	base: [
+		"relative",
+		"flex",
+		"items-center",
+		"text-grey-1000",
+		"font-body",
+		"font-normal",
+		"cursor-pointer",
+		"rounded-sm",
+		"outline-none",
+		"data-disabled:cursor-not-allowed",
+		"data-disabled:opacity-30",
+		"data-disabled:pointer-events-none",
+		"data-highlighted:bg-grey-100",
+		"data-highlighted:outline-none"
+	],
+	variants: { size: {
+		sm: [
+			"py-1.5",
+			"pl-7",
+			"pr-4",
+			"text-sm"
+		],
+		md: [
+			"py-2",
+			"pl-8",
+			"pr-6"
+		],
+		lg: [
+			"py-2",
+			"pl-8",
+			"pr-6"
+		]
+	} }
+});
+var SelectMenuItem = React$1.forwardRef(({ children, ...props }, ref) => {
+	const { size } = useSelectMenuContext();
+	return /* @__PURE__ */ React$1.createElement(Item, {
+		ref,
+		size,
+		...props
+	}, /* @__PURE__ */ React$1.createElement(RadixSelect.ItemIndicator, { className: "absolute left-2 inline-flex items-center" }, /* @__PURE__ */ React$1.createElement(Icon, {
+		is: Ok,
+		className: size === "sm" ? "size-3" : "size-4"
+	})), /* @__PURE__ */ React$1.createElement(RadixSelect.ItemText, null, children));
+});
+SelectMenuItem.displayName = "SelectMenuItem";
+//#endregion
+export { SelectMenuItem };
+
+//# sourceMappingURL=SelectMenuItem.js.map

package/dist/components/select-menu/SelectMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenuContext'\n\nconst Item = styled(RadixSelect.Item, {\n  base: [\n    'relative',\n    'flex',\n    'items-center',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'cursor-pointer',\n    'rounded-sm',\n    'outline-none',\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-30',\n    'data-disabled:pointer-events-none',\n    'data-highlighted:bg-grey-100',\n    'data-highlighted:outline-none'\n  ],\n  variants: {\n    size: {\n      sm: ['py-1.5', 'pl-7', 'pr-4', 'text-sm'],\n      md: ['py-2', 'pl-8', 'pr-6'],\n      lg: ['py-2', 'pl-8', 'pr-6']\n    }\n  }\n})\n\ntype SelectMenuItemProps = React.ComponentPropsWithRef<typeof RadixSelect.Item>\n\nexport const SelectMenuItem = React.forwardRef<\n  HTMLDivElement,\n  SelectMenuItemProps\n>(({ children, ...props }, ref) => {\n  const { size } = useSelectMenuContext()\n\n  return (\n    <Item ref={ref} size={size} {...props}>\n      <RadixSelect.ItemIndicator className=\"absolute left-2 inline-flex items-center\">\n        <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n      </RadixSelect.ItemIndicator>\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n    </Item>\n  )\n})\n\nSelectMenuItem.displayName = 'SelectMenuItem'\n"],"mappings":";;;;;;;AASA,IAAM,OAAO,OAAO,YAAY,MAAM;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAU;GAAQ;GAAQ;GAAU;EACzC,IAAI;GAAC;GAAQ;GAAQ;GAAO;EAC5B,IAAI;GAAC;GAAQ;GAAQ;GAAO;EAC7B,EACF;CACF,CAAC;AAIF,IAAa,iBAAiB,QAAM,YAGjC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,SAAS,sBAAsB;AAEvC,QACE,wBAAA,cAAC,MAAD;EAAW;EAAW;EAAM,GAAI;EAKzB,EAJL,wBAAA,cAAC,YAAY,eAAb,EAA2B,WAAU,4CAET,EAD1B,wBAAA,cAAC,MAAD;EAAM,IAAI;EAAI,WAAW,SAAS,OAAO,WAAW;EAAY,CAAA,CACtC,EAC5B,wBAAA,cAAC,YAAY,UAAA,MAAU,SAAgC,CAClD;EAET;AAEF,eAAe,cAAc"}

package/dist/components/select-menu/SelectMenuLabel.d.ts

@@ -0,0 +1,8 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+type SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>;
+export declare const SelectMenuLabel: {
+    ({ className, ...props }: SelectMenuLabelProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/select-menu/SelectMenuLabel.js

@@ -0,0 +1,16 @@
+import { cn } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import * as React$1 from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuLabel.tsx
+var SelectMenuLabel = ({ className, ...props }) => /* @__PURE__ */ React$1.createElement(Text, {
+	as: RadixSelect.Label,
+	size: "sm",
+	className: cn("p-2", "mb-1", "text-text-subtle", className),
+	...props
+});
+SelectMenuLabel.displayName = "SelectMenuLabel";
+//#endregion
+export { SelectMenuLabel };
+
+//# sourceMappingURL=SelectMenuLabel.js.map

package/dist/components/select-menu/SelectMenuLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...props\n}: SelectMenuLabelProps) => (\n  <Text\n    as={RadixSelect.Label}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-text-subtle', className)}\n    {...props}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;AASA,IAAa,mBAAmB,EAC9B,WACA,GAAG,YAEH,wBAAA,cAAC,MAAD;CACE,IAAI,YAAY;CAChB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,oBAAoB,UAAU;CAC3D,GAAI;CACJ,CAAA;AAGJ,gBAAgB,cAAc"}

package/dist/components/select-menu/SelectMenuSeparator.d.ts

@@ -0,0 +1,4 @@
+import * as RadixSelect from '@radix-ui/react-select';
+export declare const SelectMenuSeparator: import("react").ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>, never> & {
+    as?: import("react").ElementType;
+}>;

package/dist/components/select-menu/SelectMenuSeparator.js

@@ -0,0 +1,13 @@
+import { styled } from "../../styled.js";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuSeparator.tsx
+var SelectMenuSeparator = styled(RadixSelect.Separator, { base: [
+	"h-px",
+	"bg-grey-200",
+	"my-2",
+	"mx-1"
+] });
+//#endregion
+export { SelectMenuSeparator };
+
+//# sourceMappingURL=SelectMenuSeparator.js.map

package/dist/components/select-menu/SelectMenuSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\n\nimport { styled } from '~/styled'\n\nexport const SelectMenuSeparator = styled(RadixSelect.Separator, {\n  base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1']\n})\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OAAO,YAAY,WAAW,EAC/D,MAAM;CAAC;CAAQ;CAAe;CAAQ;CAAO,EAC9C,CAAC"}

package/dist/components/select-menu/SelectMenuTrigger.d.ts

@@ -0,0 +1,7 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+type SelectMenuTriggerProps = React.ComponentPropsWithRef<typeof RadixSelect.Trigger> & {
+    placeholder?: string;
+};
+export declare const SelectMenuTrigger: React.ForwardRefExoticComponent<Omit<SelectMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/select-menu/SelectMenuTrigger.js

@@ -0,0 +1,91 @@
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { useSelectMenuContext } from "./SelectMenuContext.js";
+import * as React$1 from "react";
+import { ChevronDown } from "@atom-learning/icons";
+import * as RadixSelect from "@radix-ui/react-select";
+//#region src/components/select-menu/SelectMenuTrigger.tsx
+var Trigger = styled(RadixSelect.Trigger, {
+	base: [
+		"appearance-none",
+		"rounded-md",
+		"block",
+		"w-full",
+		"font-body",
+		"font-normal",
+		"leading-[1.4]",
+		"text-grey-1000",
+		"text-left",
+		"relative",
+		"inline-flex",
+		"items-center",
+		"border-none",
+		"hover:cursor-pointer",
+		"disabled:opacity-30",
+		"disabled:cursor-not-allowed",
+		"focus:outline-2",
+		"focus:outline-blue-800",
+		"focus:outline-offset-1",
+		"focus:outline-solid",
+		"focus:z-1"
+	],
+	variants: {
+		size: {
+			sm: [
+				"h-8",
+				"pl-2",
+				"pr-8",
+				"text-sm"
+			],
+			md: [
+				"h-10",
+				"pl-3",
+				"pr-10",
+				"text-md"
+			],
+			lg: [
+				"h-12",
+				"pl-3",
+				"pr-10",
+				"text-md"
+			]
+		},
+		theme: {
+			white: ["bg-white"],
+			grey: ["bg-grey-100"]
+		},
+		state: { error: ["bg-danger-light", "focus:outline-danger"] }
+	}
+});
+var TriggerIcon = styled(Icon, {
+	base: [
+		"absolute",
+		"top-1/2",
+		"-translate-y-1/2",
+		"pointer-events-none",
+		"text-grey-700"
+	],
+	variants: { size: {
+		sm: ["right-2", "size-4"],
+		md: ["right-3", "size-5"],
+		lg: ["right-3", "size-5"]
+	} }
+});
+var SelectMenuTrigger = React$1.forwardRef(({ placeholder, children, ...props }, ref) => {
+	const { size, theme, state } = useSelectMenuContext();
+	return /* @__PURE__ */ React$1.createElement(Trigger, {
+		ref,
+		size,
+		theme,
+		state,
+		...props
+	}, /* @__PURE__ */ React$1.createElement(RadixSelect.Value, { placeholder }, children), /* @__PURE__ */ React$1.createElement(TriggerIcon, {
+		is: ChevronDown,
+		size
+	}));
+});
+SelectMenuTrigger.displayName = "SelectMenuTrigger";
+//#endregion
+export { SelectMenuTrigger };
+
+//# sourceMappingURL=SelectMenuTrigger.js.map

package/dist/components/select-menu/SelectMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenuContext'\n\nconst Trigger = styled(RadixSelect.Trigger, {\n  base: [\n    'appearance-none',\n    'rounded-md',\n    'block',\n    'w-full',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'text-grey-1000',\n    'text-left',\n    'relative',\n    'inline-flex',\n    'items-center',\n    'border-none',\n    'hover:cursor-pointer',\n    'disabled:opacity-30',\n    'disabled:cursor-not-allowed',\n    'focus:outline-2',\n    'focus:outline-blue-800',\n    'focus:outline-offset-1',\n    'focus:outline-solid',\n    'focus:z-1'\n  ],\n  variants: {\n    size: {\n      sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n      md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n      lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n    },\n    theme: {\n      white: ['bg-white'],\n      grey: ['bg-grey-100']\n    },\n    state: {\n      error: ['bg-danger-light', 'focus:outline-danger']\n    }\n  }\n})\n\nconst TriggerIcon = styled(Icon, {\n  base: [\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'pointer-events-none',\n    'text-grey-700'\n  ],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-3', 'size-5'],\n      lg: ['right-3', 'size-5']\n    }\n  }\n})\n\ntype SelectMenuTriggerProps = React.ComponentPropsWithRef<\n  typeof RadixSelect.Trigger\n> & {\n  placeholder?: string\n}\n\nexport const SelectMenuTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SelectMenuTriggerProps\n>(({ placeholder, children, ...props }, ref) => {\n  const { size, theme, state } = useSelectMenuContext()\n\n  return (\n    <Trigger ref={ref} size={size} theme={theme} state={state} {...props}>\n      <RadixSelect.Value placeholder={placeholder}>\n        {children}\n      </RadixSelect.Value>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n})\n\nSelectMenuTrigger.displayName = 'SelectMenuTrigger'\n"],"mappings":";;;;;;;AASA,IAAM,UAAU,OAAO,YAAY,SAAS;CAC1C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;IAAU;GACtC,IAAI;IAAC;IAAQ;IAAQ;IAAS;IAAU;GACxC,IAAI;IAAC;IAAQ;IAAQ;IAAS;IAAU;GACzC;EACD,OAAO;GACL,OAAO,CAAC,WAAW;GACnB,MAAM,CAAC,cAAc;GACtB;EACD,OAAO,EACL,OAAO,CAAC,mBAAmB,uBAAuB,EACnD;EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,WAAW,SAAS;EAC1B,EACF;CACF,CAAC;AAQF,IAAa,oBAAoB,QAAM,YAGpC,EAAE,aAAa,UAAU,GAAG,SAAS,QAAQ;CAC9C,MAAM,EAAE,MAAM,OAAO,UAAU,sBAAsB;AAErD,QACE,wBAAA,cAAC,SAAD;EAAc;EAAW;EAAa;EAAc;EAAO,GAAI;EAKrD,EAJR,wBAAA,cAAC,YAAY,OAAb,EAAgC,aAEZ,EADjB,SACiB,EACpB,wBAAA,cAAC,aAAD;EAAa,IAAI;EAAmB;EAAQ,CAAA,CACpC;EAEZ;AAEF,kBAAkB,cAAc"}

package/dist/components/select-menu-field/SelectMenuField.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
+type SelectMenuFieldProps = React.PropsWithChildren<FieldElementWrapperProps & {
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    theme?: 'white' | 'grey';
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare const SelectMenuField: {
+    ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...remainingProps }: SelectMenuFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/select-menu-field/SelectMenuField.js

@@ -0,0 +1,46 @@
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
+import { SelectMenu } from "../select-menu/SelectMenu.js";
+import * as React$1 from "react";
+import { useController, useFormContext } from "react-hook-form";
+//#region src/components/select-menu-field/SelectMenuField.tsx
+var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...remainingProps }) => {
+	const { control } = useFormContext();
+	const context = useFormCustomContext();
+	const { error } = useFieldError(name);
+	const formTheme = context?.theme ?? theme;
+	const { field: { ref, onChange, value } } = useController({
+		name,
+		control,
+		rules: validation,
+		defaultValue: ""
+	});
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required)
+	}, /* @__PURE__ */ React$1.createElement(SelectMenu, {
+		value,
+		onValueChange: onChange,
+		size,
+		theme: formTheme,
+		disabled,
+		...error && { state: "error" },
+		...remainingProps
+	}, /* @__PURE__ */ React$1.createElement(SelectMenu.Trigger, {
+		ref,
+		placeholder,
+		"aria-label": label
+	}), /* @__PURE__ */ React$1.createElement(SelectMenu.Content, null, children)));
+};
+SelectMenuField.displayName = "SelectMenuField";
+//#endregion
+export { SelectMenuField };
+
+//# sourceMappingURL=SelectMenuField.js.map

package/dist/components/select-menu-field/SelectMenuField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuField.js","names":[],"sources":["../../../src/components/select-menu-field/SelectMenuField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, 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 { SelectMenu } from '~/components/select-menu/SelectMenu'\n\ntype SelectMenuFieldProps = React.PropsWithChildren<\n  FieldElementWrapperProps & {\n    placeholder?: string\n    size?: 'sm' | 'md' | 'lg'\n    theme?: 'white' | 'grey'\n    disabled?: boolean\n    className?: string\n  }\n>\n\nexport const SelectMenuField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  theme,\n  size,\n  placeholder,\n  disabled,\n  ...remainingProps\n}: SelectMenuFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const formTheme = context?.theme ?? theme\n\n  const {\n    field: { ref, onChange, value }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: ''\n  })\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    >\n      <SelectMenu\n        value={value}\n        onValueChange={onChange}\n        size={size}\n        theme={formTheme}\n        disabled={disabled}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      >\n        <SelectMenu.Trigger\n          ref={ref}\n          placeholder={placeholder}\n          aria-label={label}\n        />\n        <SelectMenu.Content>{children}</SelectMenu.Content>\n      </SelectMenu>\n    </FieldWrapper>\n  )\n}\n\nSelectMenuField.displayName = 'SelectMenuField'\n"],"mappings":";;;;;;;AAqBA,IAAa,mBAAmB,EAC9B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,OACA,MACA,aACA,UACA,GAAG,qBACuB;CAC1B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,YAAY,SAAS,SAAS;CAEpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,YACtB,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;EACf,CAAC;AAEF,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EAkB1B,EAhBb,wBAAA,cAAC,YAAD;EACS;EACP,eAAe;EACT;EACN,OAAO;EACG;EACV,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EAQO,EANX,wBAAA,cAAC,WAAW,SAAZ;EACO;EACQ;EACb,cAAY;EACZ,CAAA,EACF,wBAAA,cAAC,WAAW,SAAA,MAAS,SAA8B,CACxC,CACA;;AAInB,gBAAgB,cAAc"}

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 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;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAa,WAAW,EACtB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,MAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAEP,OACE,sBAAA,cAAC,eAAe,UAAhB,EAAyB,OAAO,EAAE,WAAW,EAwBpB,GAvBvB,sBAAA,cAAC,OAAD,EAAO,OAAO,SAAS,MAsBhB,GArBL,sBAAA,cAAC,MAAD;EACE,GAAI;EACJ,OAAO;GAAE,GAAG;GAAO,YAAY;EAAO;EAChC;EACN,WAAW,GACT,kCACA,kBACA,SACF;CAYI,GAVJ,sBAAA,cAAC,SAAD;EAAS,GAAI;EAA6B;EAAkB;CASnD,GARN,UAKA,SAAS,gBACR,sBAAA,cAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD,CACL,CACD,CACgB;AAE7B;AAEA,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/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,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAED,IAAa,cAAc,OAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;AAAQ,EACxE,CAAC;AAED,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAcD,IAAa,eAZc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAGE;AAIF,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,aAAa,mBAAmB,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.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,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,EACd,CAAC;AAED,IAAa,wBAAwB,QAAM,WAAW,cAAc"}
+{"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.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,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAe;CAAW;AAAiB,EACpD,CAAC;AAED,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/SkeletonBarChart.js.map

@@ -1 +1 @@
-{"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,CAAC,CAAC,IAAI,EAAE;AAEvD,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAGV,GAFH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,GAClD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;AAGP,IAAa,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,SAAS,EA0B7D,GAzBJ,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,EAAI,CAAA,CACtB,CACE,GACL,sBAAA,cAAC,OAAD,EAAK,WAAU,sCAmBV,GAlBF,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,MACxC,sBAAA,cAAC,OAAD;CAAK,KAAK;CAAG,WAAU;AAUlB,GATH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,iCAAkC,CAAA,GAC5D,sBAAA,cAAC,OAAD,EAAK,WAAU,OAOV,GANH,sBAAA,cAAC,gBAAD;CACE,WAAU;CACV,OAAO,EACL,WAAW,GAAG,YAAY,CAAC,EAAE,GAC/B;AACD,CAAA,CACE,CACF,CACN,GACD,sBAAA,cAAC,OAAD,EAAK,WAAU,6BAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,cAAc,IAAI,GAAG,MACzC,sBAAA,cAAC,gBAAD;CAAgB,KAAK;CAAG,WAAU;AAAwB,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.map

@@ -1 +1 @@
-{"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,SAAS,EAAI,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

@@ -5,7 +5,7 @@ import { Tile } from "../tile/Tile.js";
 import { SkeletonDoughnutChart } from "./SkeletonDoughnutChart.js";
 import React from "react";
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-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, {
+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 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,SACF,EAgBI,GAdJ,sBAAA,cAAC,OAAD,EAAK,WAAU,iCAYV,GAXF,aAAa,sBAAA,cAAC,uBAAA,IAAuB,GACtC,sBAAA,cAAC,OAAD,EAAK,WAAU,2BASV,GARF,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,EAAE,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;AACX,CAAA,CAEL,CACG,CACF,GACL,sBAAA,cAAC,gBAAA,IAAgB,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',\n      '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,SACA,OACA,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.map

@@ -1 +1 @@
-{"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,CAAC,CAAC,IAAI,EAAE;AAEvE,IAAM,eAAe,EACnB,iBACA,iBAKA,sBAAA,cAAC,OAAD,EAAK,WAAU,mCAaV,GAZH,sBAAA,cAAC,OAAD,EAAK,WAAU,uBAUV,GATF,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,MAC3C,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,CAAC,EAAE,IAC7C;AACD,CAAA,CACF,CACE,GACL,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;AAGP,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAGV,GAFH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,GAClD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;AAGP,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,SAAS,EAa7D,GAZJ,sBAAA,cAAC,OAAD,EAAK,WAAU,sBAMV,GALH,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,EAAI,CAAA,CACtB,CACE,CACF,GACL,sBAAA,cAAC,OAAD,EAAK,WAAU,uCAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,sBAAA,cAAC,aAAD;CAAa,KAAK;CAAoB;CAAiB,YAAY;AAAI,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"}