@atom-learning/components 6.0.0-beta.9 → 6.0.3

package/dist/components/top-bar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '~/styled'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled('div', {\n  base: [\n    'bg-(--background)',\n    'sticky',\n    'flex',\n    'items-center',\n    'z-1',\n    'transition-shadow',\n    'duration-200',\n    'ease-out'\n  ],\n  variants: {\n    hasScrolled: {\n      true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n    },\n    size: {\n      md: ['h-16'],\n      lg: ['h-24']\n    },\n    diffused: {\n      true: [\n        '[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n        '[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:backdrop-blur-sm]'\n      ]\n    },\n    appearance: {\n      standard: [\n        'w-screen',\n        'max-w-full',\n        'top-0',\n        'border-b',\n        'border-b-(--border-bottom)'\n      ],\n      rounded: [\n        'w-full',\n        'top-2',\n        'p-2',\n        'border',\n        'border-white',\n        'rounded-round'\n      ]\n    }\n  }\n})\n\nconst Container = styled(Flex, {\n  base: ['items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ntype TopBarProps = StyledRootProps & {\n  className?: string\n} & React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  theme,\n  className,\n  appearance = 'standard',\n  ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <Theme theme={theme || topBarColorSchemes['light']}>\n      <StyledRoot\n        className={className}\n        hasScrolled={!!scrollPositionY}\n        diffused={diffused}\n        appearance={appearance}\n        size={size}\n      >\n        <Container {...props} />\n      </StyledRoot>\n    </Theme>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","diffused","theme","className","appearance","props","scrollPositionY","useWindowScrollPosition","Theme","topBarColorSchemes","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,UAAU,gBAAA,CAAiB,EAGvDC,EAAaC,EAAO,MAAO,CAC/B,KAAM,CACJ,oBACA,SACA,OACA,eACA,MACA,oBACA,eACA,UACF,EACA,SAAU,CACR,YAAa,CACX,KAAM,CAAC,8CAA8C,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,SAAU,CACR,KAAM,CACJ,0HACA,yFACF,CACF,EACA,WAAY,CACV,SAAU,CACR,WACA,aACA,QACA,WACA,4BACF,EACA,QAAS,CACP,SACA,QACA,MACA,SACA,eACA,eACF,CACF,CACF,CACF,CAAC,EAEKC,EAAYD,EAAOE,EAAM,CAC7B,KAAM,CAAC,eAAgB,OAAQ,OAAQ,SAAU,SAAS,CAC5D,CAAC,EAQKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,SAAAC,EACA,MAAAC,EACA,UAAAC,EACA,WAAAC,EAAa,WACb,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAE/B,EAAA,OACEd,EAAA,cAACe,EAAA,CAAM,MAAON,GAASO,EAAmB,KAAA,EACxChB,EAAA,cAACE,EAAA,CACC,UAAWQ,EACX,YAAa,CAAC,CAACG,EACf,SAAUL,EACV,WAAYG,EACZ,KAAMJ,CAAAA,EAENP,EAAA,cAACI,EAAA,CAAW,GAAGQ,CAAO,CAAA,CACxB,CACF,CAEJ,EAEaK,EAAS,OAAO,OAAOX,EAAiB,CACnD,MAAOY,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAAStB,CACX,CAAC,EAEDO,EAAgB,YAAc"}
+{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '~/styled'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n  'header',\n  {\n    base: [\n      'bg-(--background)',\n      'sticky',\n      'flex',\n      'items-center',\n      'z-15',\n      'transition-shadow',\n      'duration-200',\n      'ease-out'\n    ],\n    variants: {\n      hasScrolled: {\n        true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n      },\n      size: {\n        md: ['h-16'],\n        lg: ['h-24']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      },\n      appearance: {\n        standard: [\n          'w-screen',\n          'max-w-full',\n          'top-0',\n          'border-b',\n          'border-b-(--border-bottom)'\n        ],\n        rounded: [\n          'w-full',\n          'top-2',\n          'p-2',\n          'border',\n          'border-white',\n          'rounded-full'\n        ]\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nconst Container = styled(Flex, {\n  base: ['items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n  React.ComponentProps<typeof Container> &\n  React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  theme,\n  appearance = 'standard',\n  ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <Theme theme={theme || topBarColorSchemes['light']}>\n      <StyledRoot\n        hasScrolled={!!scrollPositionY}\n        diffused={diffused}\n        appearance={appearance}\n        size={size}\n      >\n        <Container {...rest} />\n      </StyledRoot>\n    </Theme>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","diffused","theme","appearance","rest","scrollPositionY","useWindowScrollPosition","Theme","topBarColorSchemes","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,UAAU,gBAAA,CAAiB,EAGvDC,EAAaC,EACjB,SACA,CACE,KAAM,CACJ,oBACA,SACA,OACA,eACA,OACA,oBACA,eACA,UACF,EACA,SAAU,CACR,YAAa,CACX,KAAM,CAAC,8CAA8C,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,SAAU,CACR,KAAM,CACJ,uEACA,qCACF,CACF,EACA,WAAY,CACV,SAAU,CACR,WACA,aACA,QACA,WACA,4BACF,EACA,QAAS,CACP,SACA,QACA,MACA,SACA,eACA,cACF,CACF,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEMC,EAAYD,EAAOE,EAAM,CAC7B,KAAM,CAAC,eAAgB,OAAQ,OAAQ,SAAU,SAAS,CAC5D,CAAC,EAMKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,SAAAC,EACA,MAAAC,EACA,WAAAC,EAAa,WACb,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAE/B,EAAA,OACEb,EAAA,cAACc,EAAA,CAAM,MAAOL,GAASM,EAAmB,KACxCf,EAAAA,EAAA,cAACE,EAAA,CACC,YAAa,CAAC,CAACU,EACf,SAAUJ,EACV,WAAYE,EACZ,KAAMH,CAAAA,EAENP,EAAA,cAACI,EAAA,CAAW,GAAGO,CAAM,CAAA,CACvB,CACF,CAEJ,EAEaK,EAAS,OAAO,OAAOV,EAAiB,CACnD,MAAOW,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASrB,CACX,CAAC,EAEDO,EAAgB,YAAc"}

package/dist/components/top-bar/TopBarBrand.d.ts

@@ -5,20 +5,20 @@ export declare const TopBarBrandLogo: ({ src, alt, className }: Pick<React.Compo
 }) => JSX.Element;
 export declare const TopBarBrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-} & {
+}, "size" | "noCapsize" | "weight" | "family"> & {
+    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?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
-    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
-    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+}, "as"> & {
     as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+}>;
 export declare const TopBarBrand: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
-} & {
+}, never> & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+}>;

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

@@ -4,7 +4,7 @@ export declare const TreeRoot: React.ForwardRefExoticComponent<Omit<Omit<{
     slot?: string | undefined | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined | undefined;
-    ref?: React.Ref<HTMLDivElement> | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     className?: string | undefined | undefined;
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
@@ -274,7 +274,7 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<{
     slot?: string | undefined | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined | undefined;
-    ref?: React.Ref<HTMLDivElement> | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     className?: string | undefined | undefined;
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
@@ -539,17 +539,17 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<{
     justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
     gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
 }, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Collapsible: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
+    Collapsible: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement>, never> & {
         as?: React.ElementType;
-    }, "ref">, "ref"> & React.RefAttributes<HTMLLIElement>>;
-    CollapsibleContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & {
+    }, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    CollapsibleContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLDivElement> & Omit<{
+    } & Omit<{
         children?: React.ReactNode;
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
-        ref?: React.Ref<HTMLDivElement> | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         className?: string | undefined | undefined;
         color?: string | undefined | undefined;
         id?: string | undefined | undefined;
@@ -816,7 +816,7 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<{
     }, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
     CollapsibleTrigger: ({ children, label, ...rest }: Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
         direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
         wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
         justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
@@ -824,12 +824,12 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<{
         gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement> & {
+    }, "ref"> & React.RefAttributes<HTMLDivElement> & {
         label: string;
     }) => React.JSX.Element;
     Item: ({ children, ...rest }: Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
         direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
         wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
         justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
@@ -837,29 +837,29 @@ export declare const Tree: React.ForwardRefExoticComponent<Omit<Omit<{
         gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
     Icon: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
         ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-    } & {
+    }, "size"> & {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>, "is" | "as"> & {
+    }, "is" | "as"> & {
         is: React.FC<React.SVGProps<SVGSVGElement>>;
         as?: never;
-    }, "ref"> & React.RefAttributes<SVGSVGElement> & {
+    }, "ref"> & React.RefAttributes<SVGSVGElement>, never> & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>>>) => JSX.Element;
+    }>>) => JSX.Element;
     Text: (props: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-    } & {
+    }, "size" | "noCapsize" | "weight" | "family"> & {
+        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?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
-        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     } & {
         as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+    }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLParagraphElement>) => JSX.Element;
 };

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

@@ -4,7 +4,7 @@ type TreeCollapsibleContextValue = {
     setTriggerRef?: (HTMLElement: any) => void;
 };
 export declare const TreeCollapsibleContext: React.Context<TreeCollapsibleContextValue>;
-export declare const TreeCollapsible: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
+export declare const TreeCollapsible: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement>, never> & {
     as?: React.ElementType;
-}, "ref">, "ref"> & React.RefAttributes<HTMLLIElement>>;
+}, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export {};

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

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

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export declare const TreeItemContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
     direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
     wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
     justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
@@ -9,4 +9,4 @@ export declare const TreeItemContent: React.ForwardRefExoticComponent<Omit<Omit<
     gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tree/TreeList.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Flex as t}from"../flex/Flex.js";import{styled as l}from"../../styled.js";const m=l(t,{base:["w-full","p-0","m-0","list-none","in-[&]:pl-4"]}),s=e.forwardRef((o,r)=>e.createElement(m,{as:"ul",ref:r,...o,direction:"column"}));export{s as TreeList};
+import*as e from"react";import{Flex as t}from"../flex/Flex.js";import{styled as l}from"../../styled.js";const m=l(t,{base:["w-full","p-0","m-0","list-none","[&_&]:pl-4"]}),i=e.forwardRef((o,r)=>e.createElement(m,{as:"ul",ref:r,...o,direction:"column"}));export{i as TreeList};
 //# sourceMappingURL=TreeList.js.map

package/dist/components/tree/TreeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeList.js","sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/styled'\n\nconst StyledList = styled(Flex, {\n  base: ['w-full', 'p-0', 'm-0', 'list-none', 'in-[&]:pl-4']\n})\n\ntype TreeListProps = Omit<React.ComponentProps<typeof Flex>, 'direction'>\n\nexport const TreeList = React.forwardRef<HTMLElement, TreeListProps>(\n  (props, ref) => (\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore: Stitches polymorphic components issue due to `as=\"ul\"`\n    <StyledList as=\"ul\" ref={ref} {...props} direction=\"column\" />\n  )\n)\n"],"names":["StyledList","styled","Flex","TreeList","React","props","ref"],"mappings":"wGAKA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,SAAU,MAAO,MAAO,YAAa,aAAa,CAC3D,CAAC,EAIYC,EAAWC,EAAM,WAC5B,CAACC,EAAOC,IAGNF,EAAA,cAACJ,EAAA,CAAW,GAAG,KAAK,IAAKM,EAAM,GAAGD,EAAO,UAAU,SAAS,CAEhE"}
+{"version":3,"file":"TreeList.js","sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/styled'\n\nconst StyledList = styled(Flex, {\n  base: ['w-full', 'p-0', 'm-0', 'list-none', '[&_&]:pl-4']\n})\n\ntype TreeListProps = Omit<React.ComponentProps<typeof Flex>, 'direction'>\n\nexport const TreeList = React.forwardRef<HTMLElement, TreeListProps>(\n  (props, ref) => (\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore: Stitches polymorphic components issue due to `as=\"ul\"`\n    <StyledList as=\"ul\" ref={ref} {...props} direction=\"column\" />\n  )\n)\n"],"names":["StyledList","styled","Flex","TreeList","React","props","ref"],"mappings":"wGAKA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,SAAU,MAAO,MAAO,YAAa,YAAY,CAC1D,CAAC,EAIYC,EAAWC,EAAM,WAC5B,CAACC,EAAOC,IAGNF,EAAA,cAACJ,EAAA,CAAW,GAAG,KAAK,IAAKM,EAAM,GAAGD,EAAO,UAAU,SAAS,CAEhE"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export declare const TreeListItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
     direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
     wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
     justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
@@ -9,4 +9,4 @@ export declare const TreeListItem: React.ForwardRefExoticComponent<Omit<Omit<Omi
     gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
 } & {
     as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+}, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/components/tree/TreeText.js

@@ -1,2 +1,2 @@
-import t from"react";import{Text as o}from"../text/Text.js";import{styled as p}from"../../styled.js";const r=p(o,{base:["py-0.5","whitespace-nowrap","overflow-x-hidden","text-ellipsis"]}),s=e=>t.createElement(r,{size:"md",as:"span",...e,noCapsize:!0});export{s as TreeText};
+import t from"clsx";import o from"react";import{Text as r}from"../text/Text.js";const s=e=>o.createElement(r,{as:"span",className:t("py-0.5","whitespace-nowrap","overflow-x-hidden","text-ellipsis",e.className),size:"md",...e});export{s as TreeText};
 //# sourceMappingURL=TreeText.js.map

package/dist/components/tree/TreeText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeText.js","sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nconst StyledTreeText = styled(Text, {\n  base: ['py-0.5', 'whitespace-nowrap', 'overflow-x-hidden', 'text-ellipsis']\n})\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => {\n  return <StyledTreeText size=\"md\" as=\"span\" {...props} noCapsize />\n}\n"],"names":["StyledTreeText","styled","Text","TreeText","props","React"],"mappings":"qGAOA,MAAMA,EAAiBC,EAAOC,EAAM,CAClC,KAAM,CAAC,SAAU,oBAAqB,oBAAqB,eAAe,CAC5E,CAAC,EAEYC,EAAYC,GAChBC,EAAA,cAACL,EAAA,CAAe,KAAK,KAAK,GAAG,OAAQ,GAAGI,EAAO,UAAS,EAAC,CAAA"}
+{"version":3,"file":"TreeText.js","sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n  <Text\n    as=\"span\"\n    className={clsx(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      props.className\n    )}\n    size=\"md\"\n    {...props}\n  />\n)\n"],"names":["TreeText","props","React","Text","clsx"],"mappings":"gFAOO,MAAMA,EAAYC,GACvBC,EAAA,cAACC,EAAA,CACC,GAAG,OACH,UAAWC,EACT,SACA,oBACA,oBACA,gBACAH,EAAM,SACR,EACA,KAAK,KACJ,GAAGA,CACN,CAAA"}

package/dist/components/video/Video.js

@@ -1,2 +1,2 @@
-import*as e from"react";import m from"react-player/vimeo";import{CSSWrapper as s}from"../../utilities/css-wrapper/CSSWrapper.js";const t=e.forwardRef(({id:o,ratio:r=9/16,className:a,...i},l)=>e.createElement(s,{className:a},e.createElement("div",{style:{"--ratio":"".concat(r*100,"%")},className:"relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)"},e.createElement(m,{...i,role:"figure",url:"https://player.vimeo.com/video/".concat(o),height:"100%",width:"100%",ref:l,className:"absolute top-0 left-0"}))));t.displayName="Video";export{t as Video};
+import*as e from"react";import m from"react-player/vimeo";import{CSSWrapper as s}from"../../utilities/css-wrapper/CSSWrapper.js";const r=e.forwardRef(({id:t,ratio:o=9/16,className:a,...i},l)=>e.createElement(s,{className:a},e.createElement("div",{style:{"--ratio":`${o*100}%`},className:"relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)"},e.createElement(m,{...i,role:"figure",url:`https://player.vimeo.com/video/${t}`,height:"100%",width:"100%",ref:l,className:"absolute top-0 left-0"}))));r.displayName="Video";export{r as Video};
 //# sourceMappingURL=Video.js.map

package/dist/components/video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import * as React from 'react'\n// Note: Only loading vimeo to reduce the bundle size  https://www.npmjs.com/package/react-player\nimport ReactPlayer from 'react-player/vimeo'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper'\nimport { Override } from '~/utilities/types'\n\ntype VideoProps = Override<\n  React.ComponentProps<typeof ReactPlayer>,\n  {\n    id: string\n    ratio?: number\n    className?: string\n  }\n>\n\nexport const Video = React.forwardRef<any, VideoProps>(\n  ({ id, ratio = 9 / 16, className, ...remainingProps }, ref) => (\n    <CSSWrapper className={className}>\n      <div\n        style={{ '--ratio': `${ratio * 100}%` }}\n        className=\"relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)\"\n      >\n        <ReactPlayer\n          {...remainingProps}\n          role=\"figure\"\n          url={`https://player.vimeo.com/video/${id}`}\n          height=\"100%\"\n          width=\"100%\"\n          ref={ref}\n          className=\"absolute top-0 left-0\"\n        />\n      </div>\n    </CSSWrapper>\n  )\n)\n\nVideo.displayName = 'Video'\n"],"names":["Video","React","id","ratio","className","remainingProps","ref","CSSWrapper","ReactPlayer"],"mappings":"uIAgBaA,EAAQC,EAAM,WACzB,CAAC,CAAE,GAAAC,EAAI,MAAAC,EAAQ,EAAI,GAAI,UAAAC,EAAW,GAAGC,CAAe,EAAGC,IACrDL,EAAA,cAACM,EAAA,CAAW,UAAWH,CAAAA,EACrBH,EAAA,cAAC,MAAA,CACC,MAAO,CAAE,UAAW,GAAG,OAAAE,EAAQ,IAAG,GAAI,CAAA,EACtC,UAAU,6DAAA,EAEVF,EAAA,cAACO,EAAA,CACE,GAAGH,EACJ,KAAK,SACL,IAAK,kCAAkC,OAAAH,CAAAA,EACvC,OAAO,OACP,MAAM,OACN,IAAKI,EACL,UAAU,wBACZ,CACF,CACF,CAEJ,EAEAN,EAAM,YAAc"}
+{"version":3,"file":"Video.js","sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import * as React from 'react'\n// Note: Only loading vimeo to reduce the bundle size  https://www.npmjs.com/package/react-player\nimport ReactPlayer from 'react-player/vimeo'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper'\nimport { Override } from '~/utilities/types'\n\ntype VideoProps = Override<\n  React.ComponentProps<typeof ReactPlayer>,\n  {\n    id: string\n    ratio?: number\n    className?: string\n  }\n>\n\nexport const Video = React.forwardRef<any, VideoProps>(\n  ({ id, ratio = 9 / 16, className, ...remainingProps }, ref) => (\n    <CSSWrapper className={className}>\n      <div\n        style={{ '--ratio': `${ratio * 100}%` }}\n        className=\"relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)\"\n      >\n        <ReactPlayer\n          {...remainingProps}\n          role=\"figure\"\n          url={`https://player.vimeo.com/video/${id}`}\n          height=\"100%\"\n          width=\"100%\"\n          ref={ref}\n          className=\"absolute top-0 left-0\"\n        />\n      </div>\n    </CSSWrapper>\n  )\n)\n\nVideo.displayName = 'Video'\n"],"names":["Video","React","id","ratio","className","remainingProps","ref","CSSWrapper","ReactPlayer"],"mappings":"iIAgBa,MAAAA,EAAQC,EAAM,WACzB,CAAC,CAAE,GAAAC,EAAI,MAAAC,EAAQ,EAAI,GAAI,UAAAC,EAAW,GAAGC,CAAe,EAAGC,IACrDL,EAAA,cAACM,EAAA,CAAW,UAAWH,GACrBH,EAAA,cAAC,MACC,CAAA,MAAO,CAAE,UAAW,GAAGE,EAAQ,GAAG,GAAI,EACtC,UAAU,6DAAA,EAEVF,EAAA,cAACO,EAAA,CACE,GAAGH,EACJ,KAAK,SACL,IAAK,kCAAkCH,CAAE,GACzC,OAAO,OACP,MAAM,OACN,IAAKI,EACL,UAAU,wBACZ,CACF,CACF,CAEJ,EAEAN,EAAM,YAAc"}