@atom-learning/components 8.0.2 → 9.0.0-beta.0

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

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
-import { useSelectMenuContext } from "./SelectMenuContext.js";
-import * as React$1 from "react";
+import { useSelectMenuContext } from "./SelectMenu.context.js";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
 import * as RadixSelect from "@radix-ui/react-select";
@@ -72,14 +72,14 @@ var TriggerIcon = styled(Icon, {
 		lg: ["right-3", "size-5"]
 	} }
 });
-var SelectMenuTrigger = React$1.forwardRef(({ placeholder, children, ...props }, ref) => {
+var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
 	const { size, theme, state } = useSelectMenuContext();
 	return /* @__PURE__ */ jsxs(Trigger, {
 		ref,
 		size,
 		theme,
 		state,
-		...props,
+		...rest,
 		children: [/* @__PURE__ */ jsx(RadixSelect.Value, {
 			placeholder,
 			children
@@ -88,8 +88,7 @@ var SelectMenuTrigger = React$1.forwardRef(({ placeholder, children, ...props },
 			size
 		})]
 	});
-});
-SelectMenuTrigger.displayName = "SelectMenuTrigger";
+};
 //#endregion
 export { SelectMenuTrigger };
 

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

@@ -1 +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,qBAAC,SAAD;EAAc;EAAW;EAAa;EAAc;EAAO,GAAI;YAA/D,CACE,oBAAC,YAAY,OAAb;GAAgC;GAC7B;GACiB,CAAA,EACpB,oBAAC,aAAD;GAAa,IAAI;GAAmB;GAAQ,CAAA,CACpC;;EAEZ;AAEF,kBAAkB,cAAc"}
+{"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'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\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 = ({\n  ref,\n  placeholder,\n  children,\n  ...rest\n}: SelectMenuTriggerProps) => {\n  const { size, theme, state } = useSelectMenuContext()\n\n  return (\n    <Trigger ref={ref} size={size} theme={theme} state={state} {...rest}>\n      <RadixSelect.Value placeholder={placeholder}>\n        {children}\n      </RadixSelect.Value>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,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;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;GAAS;GACrC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;GACvC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;EACzC;EACA,OAAO;GACL,OAAO,CAAC,UAAU;GAClB,MAAM,CAAC,aAAa;EACtB;EACA,OAAO,EACL,OAAO,CAAC,mBAAmB,sBAAsB,EACnD;CACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;CAC1B,EACF;AACF,CAAC;AAQD,IAAa,qBAAqB,EAChC,KACA,aACA,UACA,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,OAAO,UAAU,qBAAqB;CAEpD,OACE,qBAAC,SAAD;EAAc;EAAW;EAAa;EAAc;EAAO,GAAI;YAA/D,CACE,oBAAC,YAAY,OAAb;GAAgC;GAC7B;EACgB,CAAA,GACnB,oBAAC,aAAD;GAAa,IAAI;GAAmB;EAAO,CAAA,CACpC;;AAEb"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
 type SelectMenuFieldProps = React.PropsWithChildren<FieldElementWrapperProps & {
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
@@ -7,8 +7,8 @@ type SelectMenuFieldProps = React.PropsWithChildren<FieldElementWrapperProps & {
     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 declare function SelectMenuField({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...rest }: SelectMenuFieldProps): React.JSX.Element;
+export declare namespace SelectMenuField {
+    var displayName: string;
+}
 export {};

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

@@ -6,7 +6,7 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 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 }) => {
+var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...rest }) => {
 	const { control } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -33,7 +33,7 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 			theme: formTheme,
 			disabled,
 			...error && { state: "error" },
-			...remainingProps,
+			...rest,
 			children: [/* @__PURE__ */ jsx(SelectMenu.Trigger, {
 				ref,
 				placeholder,

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

@@ -1 +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,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;YAEvC,qBAAC,YAAD;GACS;GACP,eAAe;GACT;GACN,OAAO;GACG;GACV,GAAK,SAAS,EAAE,OAAO,SAAS;GAChC,GAAI;aAPN,CASE,oBAAC,WAAW,SAAZ;IACO;IACQ;IACb,cAAY;IACZ,CAAA,EACF,oBAAC,WAAW,SAAZ,EAAqB,UAA8B,CAAA,CACxC;;EACA,CAAA;;AAInB,gBAAgB,cAAc"}
+{"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  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { SelectMenu } from '../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  ...rest\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        {...rest}\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,WACuB;CAC1B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,YAAY,SAAS,SAAS;CAEpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,YACtB,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;YAEtC,qBAAC,YAAD;GACS;GACP,eAAe;GACT;GACN,OAAO;GACG;GACV,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;aAPN,CASE,oBAAC,WAAW,SAAZ;IACO;IACQ;IACb,cAAY;GACb,CAAA,GACD,oBAAC,WAAW,SAAZ,EAAqB,SAA6B,CAAA,CACxC;;CACA,CAAA;AAElB;AAEA,gBAAgB,cAAc"}

package/dist/components/side-bar/{SideBarContext.js → SideBar.context.js}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBar.context.js","names":[],"sources":["../../../src/components/side-bar/SideBar.context.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"}

package/dist/components/side-bar/SideBar.d.ts

@@ -1,47 +1,36 @@
-import React from 'react';
+import * as React from 'react';
 import { Theme } from '../../styled';
-declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "type"> & {
-    type?: "static" | "expandable" | undefined;
-} & {
-    as?: React.ElementType;
+declare const Root: import("../..").PolymorphicComponent<"div", {
+    type?: "expandable" | "static" | undefined;
 }>;
 type SideBarProps = React.ComponentProps<typeof Root> & {
     className?: string;
     offset?: number | string;
 } & React.ComponentProps<typeof Theme>;
-export declare const SideBar: {
-    ({ theme, className, children, type, offset, style, ...rest }: SideBarProps): React.JSX.Element;
-    Brand: React.ForwardRefExoticComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+export declare const SideBar: (({ theme, className, children, type, offset, style, ...rest }: SideBarProps) => React.JSX.Element) & {
+    Brand: React.FC<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
         as?: React.ElementType;
     }>;
-    BrandLogo: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "fluid"> & {
+    BrandLogo: (({ children, ref, ...props }: Omit<{
         fluid?: boolean | undefined;
-    } & {
-        as?: React.ElementType;
-    }, "as"> & {
-        as?: never;
-    }, "ref"> & React.RefAttributes<HTMLImageElement>>;
-    BrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-        family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
-    } & {
-        as?: React.ElementType;
-    }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-        as?: React.ElementType;
-    }>;
-    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-        as?: React.ElementType;
-    }>;
+    } & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children"> & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element) & {
+        Credit: {
+            ({ author, sourceUrl, licenseName, licenseUrl }: import("../image/ImageCredit").ImageCreditProps): React.JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
+    };
+    BrandName: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+    }>, unknown>;
+    Header: import("../..").PolymorphicComponent<"div", unknown>;
+    Body: import("../..").PolymorphicComponent<"div", unknown>;
+    Footer: import("../..").PolymorphicComponent<"div", unknown>;
     displayName: string;
 };
 export {};

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

@@ -1,7 +1,7 @@
 import { Theme, cn, styled } from "../../styled.js";
-import { SideBarContext } from "./SideBarContext.js";
+import { SideBarContext } from "./SideBar.context.js";
 import { SideBarBody, SideBarBrand, SideBarBrandLogo, SideBarBrandName, SideBarFooter, SideBarHeader } from "./SideBarComponents.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusWithin, useHover, useInteractOutside } from "react-aria";
 //#region src/components/side-bar/SideBar.tsx
@@ -62,9 +62,9 @@ var PointerBlocker = styled("div", {
 		false: ["delay-50", "invisible"]
 	} }
 });
-var SideBar = ({ theme, className, children, type = "expandable", offset = "0px", style, ...rest }) => {
-	const [isExpanded, setIsExpanded] = React.useState(type === "static");
-	const ref = React.useRef(null);
+var SideBarComponent = ({ theme, className, children, type = "expandable", offset = "0px", style, ...rest }) => {
+	const [isExpanded, setIsExpanded] = React$1.useState(type === "static");
+	const ref = React$1.useRef(null);
 	useInteractOutside({
 		ref,
 		onInteractOutside: () => setIsExpanded(false)
@@ -106,13 +106,15 @@ var SideBar = ({ theme, className, children, type = "expandable", offset = "0px"
 		})
 	});
 };
-SideBar.Brand = SideBarBrand;
-SideBar.BrandLogo = SideBarBrandLogo;
-SideBar.BrandName = SideBarBrandName;
-SideBar.Header = SideBarHeader;
-SideBar.Body = SideBarBody;
-SideBar.Footer = SideBarFooter;
-SideBar.displayName = "SideBar";
+var SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {
+	Brand: SideBarBrand,
+	BrandLogo: SideBarBrandLogo,
+	BrandName: SideBarBrandName,
+	Header: SideBarHeader,
+	Body: SideBarBody,
+	Footer: SideBarFooter,
+	displayName: "SideBar"
+});
 //#endregion
 export { SideBar };
 

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;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,oBAAC,eAAe,UAAhB;EAAyB,OAAO,EAAE,YAAY;YAC5C,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;KAAQ;IACjC;IACN,WAAW,GACT,kCACA,kBACA,UACD;cAED,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,YAAc,CAAA,CAElD;;IACL,CAAA;GACD,CAAA;EACgB,CAAA;;AAI9B,QAAQ,QAAQ;AAChB,QAAQ,YAAY;AACpB,QAAQ,YAAY;AACpB,QAAQ,SAAS;AACjB,QAAQ,OAAO;AACf,QAAQ,SAAS;AAEjB,QAAQ,cAAc"}
+{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\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\nconst SideBarComponent = ({\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\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;AAcA,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,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,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,oBAAC,eAAe,UAAhB;EAAyB,OAAO,EAAE,WAAW;YAC3C,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACgB,CAAA;AAE7B;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}

package/dist/components/side-bar/SideBarComponents.d.ts

@@ -1,32 +1,24 @@
 import * as React from 'react';
-export declare const SideBarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
+export declare const SideBarHeader: import("../..").PolymorphicComponent<"div", unknown>;
+export declare const SideBarBody: import("../..").PolymorphicComponent<"div", unknown>;
+export declare const SideBarFooter: import("../..").PolymorphicComponent<"div", unknown>;
+export declare const SideBarBrand: React.FC<React.ComponentPropsWithRef<'a'> & {
     as?: React.ElementType;
 }>;
-export declare const SideBarBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}>;
-export declare const SideBarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}>;
-export declare const SideBarBrand: React.ForwardRefExoticComponent<React.ComponentPropsWithRef<"a"> & {
-    as?: React.ElementType;
-}>;
-export declare const SideBarBrandLogo: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "fluid"> & {
+export declare const SideBarBrandLogo: (({ children, ref, ...props }: Omit<{
     fluid?: boolean | undefined;
-} & {
-    as?: React.ElementType;
-}, "as"> & {
-    as?: never;
-}, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export declare const SideBarBrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size" | "noCapsize" | "weight" | "family"> & {
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
-    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
-} & {
-    as?: React.ElementType;
-}, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
-    as?: React.ElementType;
-}>;
+} & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children"> & {
+    children?: React.ReactNode;
+}) => React.JSX.Element) & {
+    Credit: {
+        ({ author, sourceUrl, licenseName, licenseUrl }: import("../image/ImageCredit").ImageCreditProps): React.JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export declare const SideBarBrandName: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
+    size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+}>, unknown>;

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

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { Image } from "../image/Image.js";
+import "react";
 //#region src/components/side-bar/SideBarComponents.tsx
 var SideBarHeader = styled("div", { base: [
 	"border-b",
@@ -21,7 +22,7 @@ var SideBarFooter = styled("div", { base: [
 	"p-4",
 	"w-full"
 ] });
-var SideBarBrand = styled("a", { base: [
+var SideBarBrand = /* @__PURE__ */ styled("a", { base: [
 	"items-end",
 	"text-text",
 	"flex",

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;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"}
+{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\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 = /* @__PURE__ */ 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 = StyledSideBarBrand as React.FC<\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":";;;;;AAMA,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,eAAe,gBAZe,OAAO,KAAK,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAE4B;AAI5B,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,aAAa,mBAAmB,EACzC,CAAC"}

package/dist/components/skeleton-loader/Skeleton.d.ts

@@ -1,3 +1 @@
-export declare const SkeletonLoader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-    as?: import("react").ElementType;
-}>;
+export declare const SkeletonLoader: import("../..").PolymorphicComponent<"div", unknown>;

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;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;AAAiB,EACpD,CAAC;AAED,eAAe,cAAc"}

package/dist/components/skeleton-loader/SkeletonBarChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonBarChart: ({ numberOfLabels, numberOfRows, numberOfTicks, className }: {
     numberOfLabels?: number;
     numberOfRows?: number;

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,EAAE,CAAC,GAAG,GAAG;AAExD,IAAM,mBACJ,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;;AAGR,IAAa,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,qBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU;WAApE,CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,oBAAC,YAAD,EAAsB,EAAL,EAAK,CACtB;EACE,CAAA,EACN,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,MACxC,qBAAC,OAAD;GAAa,WAAU;aAAvB,CACE,oBAAC,gBAAD,EAAgB,WAAU,kCAAmC,CAAA,EAC7D,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD;KACE,WAAU;KACV,OAAO,EACL,WAAW,GAAG,YAAY,EAAE,CAAC,IAC9B;KACD,CAAA;IACE,CAAA,CACF;KAVI,EAUJ,CACN,EACF,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,eAAe,GAAG,GAAG,MACzC,oBAAC,gBAAD,EAAwB,WAAU,wBAAyB,EAAtC,EAAsC,CAC3D;GACE,CAAA,CACF;IACD"}
+{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\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":";;;;;;AAMA,IAAM,eAAe,aACnB,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,WAAW,CAAC,CAAC,IAAI,EAAE;AAEvD,IAAM,mBACJ,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,GAClD,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;;AAGP,IAAa,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,qBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,SAAS;WAAnE,CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,oBAAC,YAAD,CAAqB,GAAJ,CAAI,CACtB;CACE,CAAA,GACL,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,MACxC,qBAAC,OAAD;GAAa,WAAU;aAAvB,CACE,oBAAC,gBAAD,EAAgB,WAAU,iCAAkC,CAAA,GAC5D,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD;KACE,WAAU;KACV,OAAO,EACL,WAAW,GAAG,YAAY,CAAC,EAAE,GAC/B;IACD,CAAA;GACE,CAAA,CACF;KAVK,CAUL,CACN,GACD,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,cAAc,IAAI,GAAG,MACzC,oBAAC,gBAAD,EAAwB,WAAU,uBAAwB,GAArC,CAAqC,CAC3D;EACE,CAAA,CACF;GACD"}

package/dist/components/skeleton-loader/SkeletonButton.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import * as React from 'react';
 import { SkeletonLoader } from './Skeleton';
 export declare const SkeletonButton: ({ className }: {
-    className?: React.ComponentProps<typeof SkeletonLoader>["className"];
+    className?: React.ComponentProps<typeof SkeletonLoader>['className'];
 }) => React.JSX.Element;

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,oBAAC,gBAAD,EAAgB,WAAW,GAAG,aAAa,OAAO,cAAc,UAAU,EAAI,CAAA"}
+{"version":3,"file":"SkeletonButton.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\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":";;;;;AAKA,IAAa,kBAAkB,EAC7B,gBAIA,oBAAC,gBAAD,EAAgB,WAAW,GAAG,aAAa,OAAO,cAAc,SAAS,EAAI,CAAA"}

package/dist/components/skeleton-loader/SkeletonCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonCard: ({ numberOfRows, withChart, className }: {
     numberOfRows?: number;
     withChart?: boolean;

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',\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,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,UACD;WATH,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,EAAyB,CAAA,EACvC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,GAAG,UAAU,MAAM,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,+CACV,EAFK,UAEL,CAEL;GACG,CAAA,CACF;KACN,oBAAC,gBAAD,EAAkB,CAAA,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\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":";;;;;;;;AASA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,8CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}

package/dist/components/skeleton-loader/SkeletonColumnChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonColumnChart: ({ numberOfLabels, numberOfGroups, numberOfColumns, className }: {
     numberOfLabels?: number;
     numberOfGroups?: number;

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,EAAE,CAAC,GAAG,GAAG;AAExE,IAAM,eAAe,EACnB,iBACA,iBAKA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,iBAAiB,GAAG,GAAG,MAC3C,oBAAC,gBAAD;GAEE,WAAU;GACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,EAAE,CAAC,KAC5C;GACD,EALK,EAKL,CACF;EACE,CAAA,EACN,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;;AAGR,IAAM,mBACJ,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,EACnD,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CAChD;;AAGR,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,qBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,UAAU;WAApE,CACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,oBAAC,YAAD,EAAsB,EAAL,EAAK,CACtB;GACE,CAAA;EACF,CAAA,EACN,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,gBAAgB,GAAG,GAAG,MAC1C,oBAAC,aAAD;GAAsC;GAAiB,YAAY;GAAK,EAAtD,EAAsD,CACxE;EACE,CAAA,CACD"}
+{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\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":";;;;;;AAMA,IAAM,gBAAgB,YAAoB,gBACxC,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,aAAa,cAAc,CAAC,CAAC,IAAI,EAAE;AAEvE,IAAM,eAAe,EACnB,iBACA,iBAKA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,MAC3C,oBAAC,gBAAD;GAEE,WAAU;GACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,CAAC,EAAE,IAC7C;EACD,GALM,CAKN,CACF;CACE,CAAA,GACL,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;;AAGP,IAAM,mBACJ,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,GAClD,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;;AAGP,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,qBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,SAAS;WAAnE,CACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,oBAAC,YAAD,CAAqB,GAAJ,CAAI,CACtB;EACE,CAAA;CACF,CAAA,GACL,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,oBAAC,aAAD;GAAsC;GAAiB,YAAY;EAAI,GAArD,CAAqD,CACxE;CACE,CAAA,CACD"}

package/dist/components/skeleton-loader/SkeletonDoughnutChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonDoughnutChart: ({ className }: {
     className?: string;
 }) => React.JSX.Element;

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 React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,EAAE;CAC1B,IAAI,UAAU;AAEd,OAAM,KAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,cAAc;AACrD,QAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,KAC/D;AACD,aAAW;AACX,QAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,KAAK;AACrD,aAAW;GACX;AAEF,QAAO,kBAAkB,MAAM,KAAK,KAAK,CAAC;;AAG5C,IAAa,yBAAyB,EACpC,gBAIA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,WAAW,UAAU;WAC9C,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,cAAc,oBAAoB,EAAE;YAE7C,oBAAC,OAAD,EAAK,WAAU,sDAAuD,CAAA;EAClE,CAAA;CACD,CAAA"}
+{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,CAAC;CACzB,IAAI,UAAU;CAEd,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,CAAC,CAAC,cAAc;EACrD,MAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,IAChE;EACA,WAAW;EACX,MAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,IAAI;EACpD,WAAW;CACb,CAAC;CAED,OAAO,kBAAkB,MAAM,KAAK,IAAI,EAAE;AAC5C;AAEA,IAAa,yBAAyB,EACpC,gBAIA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;WAC7C,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,cAAc,mBAAmB,EAAE;YAE5C,oBAAC,OAAD,EAAK,WAAU,qDAAsD,CAAA;CAClE,CAAA;AACD,CAAA"}

package/dist/components/skeleton-loader/SkeletonHeading.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import * as React from 'react';
 import { SkeletonLoader } from './Skeleton';
 export declare const SkeletonHeading: ({ className }: {
-    className?: React.ComponentProps<typeof SkeletonLoader>["className"];
+    className?: React.ComponentProps<typeof SkeletonLoader>['className'];
 }) => React.JSX.Element;

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

package/dist/components/skeleton-loader/SkeletonPanelList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonPanelList: ({ className }: {
     className?: string;
 }) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAOA,IAAa,qBAAqB,EAAE,gBAClC,oBAAC,MAAD;CAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,UAAU;WAC1D,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA;GACnD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,EAAgB,WAAU,0BAA2B,CAAA;IACjD,CAAA;GACN,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA;GAC9C;;CACD,CAAA"}
+{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,EAAE,gBAClC,oBAAC,MAAD;CAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,SAAS;WACzD,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA;GAClD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA;GACjD,CAAA;GACL,oBAAC,gBAAD,EAAgB,WAAU,sBAAuB,CAAA;EAC9C;;AACD,CAAA"}

package/dist/components/skeleton-loader/SkeletonSubjectList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonSubjectList: ({ className }: {
     className?: string;
 }) => React.JSX.Element;

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

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

package/dist/components/skeleton-loader/SkeletonTable.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const SkeletonTable: ({ numberOfColumns, numberOfRows, columnWidth, className }: {
     numberOfColumns?: number;
     numberOfRows?: number;