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

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","names":[],"sources":["../../../src/components/tree/Tree.tsx"],"sourcesContent":["import React from 'react'\n\nimport { TreeCollapsible } from './TreeCollapsible'\nimport { TreeCollapsibleContent } from './TreeCollapsibleContent'\nimport { TreeCollapsibleTrigger } from './TreeCollapsibleTrigger'\nimport { TreeIcon } from './TreeIcon'\nimport { TreeItem } from './TreeItem'\nimport { TreeList } from './TreeList'\nimport { TreeText } from './TreeText'\n\ntype TreeProps = React.ComponentProps<typeof TreeList>\n\nexport const TreeRoot = React.forwardRef<HTMLUListElement, TreeProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <TreeList {...rest} ref={ref} role=\"tree\">\n        {children}\n      </TreeList>\n    )\n  }\n)\n\nexport const Tree = Object.assign(TreeRoot, {\n  Collapsible: TreeCollapsible,\n  CollapsibleContent: TreeCollapsibleContent,\n  CollapsibleTrigger: TreeCollapsibleTrigger,\n  Item: TreeItem,\n  Icon: TreeIcon,\n  Text: TreeText\n})\n"],"mappings":";;;;;;;;;;AAYA,IAAa,WAAW,MAAM,YAC3B,EAAE,UAAU,GAAG,QAAQ,QAAQ;AAC9B,QACE,oBAAC,UAAD;EAAU,GAAI;EAAW;EAAK,MAAK;EAChC;EACQ,CAAA;EAGhB;AAED,IAAa,OAAO,OAAO,OAAO,UAAU;CAC1C,aAAa;CACb,oBAAoB;CACpB,oBAAoB;CACpB,MAAM;CACN,MAAM;CACN,MAAM;CACP,CAAC"}
+{"version":3,"file":"Tree.js","names":[],"sources":["../../../src/components/tree/Tree.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TreeCollapsible } from './TreeCollapsible'\nimport { TreeCollapsibleContent } from './TreeCollapsibleContent'\nimport { TreeCollapsibleTrigger } from './TreeCollapsibleTrigger'\nimport { TreeIcon } from './TreeIcon'\nimport { TreeItem } from './TreeItem'\nimport { TreeList } from './TreeList'\nimport { TreeText } from './TreeText'\n\ntype TreeProps = React.ComponentProps<typeof TreeList>\n\nexport const TreeRoot = ({ ref, children, ...rest }: TreeProps) => (\n  <TreeList {...rest} ref={ref} role=\"tree\">\n    {children}\n  </TreeList>\n)\n\nexport const Tree = /* @__PURE__ */ Object.assign(TreeRoot, {\n  Collapsible: TreeCollapsible,\n  CollapsibleContent: TreeCollapsibleContent,\n  CollapsibleTrigger: TreeCollapsibleTrigger,\n  Item: TreeItem,\n  Icon: TreeIcon,\n  Text: TreeText\n})\n"],"mappings":";;;;;;;;;;AAYA,IAAa,YAAY,EAAE,KAAK,UAAU,GAAG,WAC3C,oBAAC,UAAD;CAAU,GAAI;CAAW;CAAK,MAAK;CAChC;AACO,CAAA;AAGZ,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,aAAa;CACb,oBAAoB;CACpB,oBAAoB;CACpB,MAAM;CACN,MAAM;CACN,MAAM;AACR,CAAC"}

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

@@ -5,9 +5,9 @@ type TreeCollapsibleContextValue = {
     setTriggerRef?: (HTMLElement: any) => void;
 };
 export declare const TreeCollapsibleContext: React.Context<TreeCollapsibleContextValue>;
-declare const StyledCollapsibleTreeItemRoot: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}>;
+declare const StyledCollapsibleTreeItemRoot: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement>>, unknown>;
 type TreeCollapsibleProps = React.ComponentProps<typeof Root> & React.ComponentProps<typeof StyledCollapsibleTreeItemRoot>;
-export declare const TreeCollapsible: React.ForwardRefExoticComponent<Omit<TreeCollapsibleProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export declare const TreeCollapsible: ({ ref, ...props }: TreeCollapsibleProps & {
+    ref?: React.Ref<HTMLLIElement>;
+}) => React.JSX.Element;
 export {};

package/dist/components/tree/TreeCollapsible.js

@@ -16,12 +16,10 @@ var TreeCollapsibleProvider = ({ children }) => {
 		children
 	});
 };
-var StyledCollapsibleTreeItemRoot = styled(Root, { base: ["w-full"] });
-var TreeCollapsible = React$1.forwardRef((props, ref) => {
-	return /* @__PURE__ */ jsx(TreeListItem, {
-		ref,
-		children: /* @__PURE__ */ jsx(TreeCollapsibleProvider, { children: /* @__PURE__ */ jsx(StyledCollapsibleTreeItemRoot, { ...props }) })
-	});
+var StyledCollapsibleTreeItemRoot = /* @__PURE__ */ styled(Root, { base: ["w-full"] });
+var TreeCollapsible = ({ ref, ...props }) => /* @__PURE__ */ jsx(TreeListItem, {
+	ref,
+	children: /* @__PURE__ */ jsx(TreeCollapsibleProvider, { children: /* @__PURE__ */ jsx(StyledCollapsibleTreeItemRoot, { ...props }) })
 });
 //#endregion
 export { TreeCollapsible, TreeCollapsibleContext };

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

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsible.js","names":[],"sources":["../../../src/components/tree/TreeCollapsible.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeCollapsibleContextValue = {\n  triggerRef?: React.MutableRefObject<HTMLElement | null>\n  setTriggerRef?: (HTMLElement) => void\n}\nexport const TreeCollapsibleContext =\n  React.createContext<TreeCollapsibleContextValue>({})\nconst TreeCollapsibleProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  return (\n    <TreeCollapsibleContext.Provider value={{ triggerRef, setTriggerRef }}>\n      {children}\n    </TreeCollapsibleContext.Provider>\n  )\n}\n\nconst StyledCollapsibleTreeItemRoot = styled(Root, {\n  base: ['w-full']\n})\n\ntype TreeCollapsibleProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof StyledCollapsibleTreeItemRoot>\nexport const TreeCollapsible = React.forwardRef(\n  (\n    props: TreeCollapsibleProps,\n    ref: React.ForwardedRef<HTMLLIElement>\n  ): React.JSX.Element => {\n    return (\n      <TreeListItem ref={ref}>\n        <TreeCollapsibleProvider>\n          <StyledCollapsibleTreeItemRoot {...props} />\n        </TreeCollapsibleProvider>\n      </TreeListItem>\n    )\n  }\n)\n"],"mappings":";;;;;;;AAYA,IAAa,yBACX,QAAM,cAA2C,EAAE,CAAC;AACtD,IAAM,2BAA2B,EAAE,eAAe;CAChD,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;AACpD,QACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;GAAE;GAAY;GAAe;EAClE;EAC+B,CAAA;;AAItC,IAAM,gCAAgC,OAAO,MAAM,EACjD,MAAM,CAAC,SAAS,EACjB,CAAC;AAIF,IAAa,kBAAkB,QAAM,YAEjC,OACA,QACsB;AACtB,QACE,oBAAC,cAAD;EAAmB;YACjB,oBAAC,yBAAD,EAAA,UACE,oBAAC,+BAAD,EAA+B,GAAI,OAAS,CAAA,EACpB,CAAA;EACb,CAAA;EAGpB"}
+{"version":3,"file":"TreeCollapsible.js","names":[],"sources":["../../../src/components/tree/TreeCollapsible.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeCollapsibleContextValue = {\n  triggerRef?: React.MutableRefObject<HTMLElement | null>\n  setTriggerRef?: (HTMLElement) => void\n}\nexport const TreeCollapsibleContext =\n  React.createContext<TreeCollapsibleContextValue>({})\nconst TreeCollapsibleProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  return (\n    <TreeCollapsibleContext.Provider value={{ triggerRef, setTriggerRef }}>\n      {children}\n    </TreeCollapsibleContext.Provider>\n  )\n}\n\nconst StyledCollapsibleTreeItemRoot = /* @__PURE__ */ styled(Root, {\n  base: ['w-full']\n})\n\ntype TreeCollapsibleProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof StyledCollapsibleTreeItemRoot>\nexport const TreeCollapsible = ({\n  ref,\n  ...props\n}: TreeCollapsibleProps & {\n  ref?: React.Ref<HTMLLIElement>\n}) => (\n  <TreeListItem ref={ref}>\n    <TreeCollapsibleProvider>\n      <StyledCollapsibleTreeItemRoot {...props} />\n    </TreeCollapsibleProvider>\n  </TreeListItem>\n)\n"],"mappings":";;;;;;;AAWA,IAAa,yBACX,QAAM,cAA2C,CAAC,CAAC;AACrD,IAAM,2BAA2B,EAAE,eAAe;CAChD,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,OACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;GAAE;GAAY;EAAc;EACjE;CAC8B,CAAA;AAErC;AAEA,IAAM,gCAAgD,uBAAO,MAAM,EACjE,MAAM,CAAC,QAAQ,EACjB,CAAC;AAID,IAAa,mBAAmB,EAC9B,KACA,GAAG,YAIH,oBAAC,cAAD;CAAmB;WACjB,oBAAC,yBAAD,EAAA,UACE,oBAAC,+BAAD,EAA+B,GAAI,MAAQ,CAAA,EACpB,CAAA;AACb,CAAA"}

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

@@ -1,6 +1,8 @@
 import { Content } from '@radix-ui/react-collapsible';
-import React from 'react';
+import * as React from 'react';
 import { TreeList } from './TreeList';
-type TreeCollapsibleContentProps = React.ComponentProps<typeof Content> & React.ComponentProps<typeof TreeList>;
-export declare const TreeCollapsibleContent: React.ForwardRefExoticComponent<Omit<TreeCollapsibleContentProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+type TreeCollapsibleContentProps = React.ComponentProps<typeof Content> & React.ComponentProps<typeof TreeList> & {
+    ref?: React.Ref<HTMLUListElement>;
+};
+export declare const TreeCollapsibleContent: ({ ref, children, className, ...rest }: TreeCollapsibleContentProps) => React.JSX.Element;
 export {};

package/dist/components/tree/TreeCollapsibleContent.js

@@ -1,12 +1,12 @@
 import { cn } from "../../styled.js";
 import { TreeCollapsibleContext } from "./TreeCollapsible.js";
 import { TreeList } from "./TreeList.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Content } from "@radix-ui/react-collapsible";
 //#region src/components/tree/TreeCollapsibleContent.tsx
-var TreeCollapsibleContent = React.forwardRef(({ children, className, ...rest }, ref) => {
-	const { triggerRef } = React.useContext(TreeCollapsibleContext);
+var TreeCollapsibleContent = ({ ref, children, className, ...rest }) => {
+	const { triggerRef } = React$1.useContext(TreeCollapsibleContext);
 	const handleOnKeydown = (e) => {
 		if (!triggerRef?.current) return;
 		if (e.key === "Escape") {
@@ -27,7 +27,7 @@ var TreeCollapsibleContent = React.forwardRef(({ children, className, ...rest },
 			children
 		})
 	});
-});
+};
 //#endregion
 export { TreeCollapsibleContent };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsibleContent.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\ntype TreeCollapsibleContentProps = React.ComponentProps<typeof Content> &\n  React.ComponentProps<typeof TreeList>\n\nexport const TreeCollapsibleContent = React.forwardRef<\n  HTMLUListElement,\n  TreeCollapsibleContentProps\n>(({ children, className, ...rest }, ref): React.JSX.Element => {\n  const { triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <Content\n      className={cn('data-[state=closed]:hidden', className)}\n      onKeyDown={handleOnKeydown}\n      {...rest}\n      asChild\n    >\n      <TreeList ref={ref} role=\"group\">\n        {children}\n      </TreeList>\n    </Content>\n  )\n})\n"],"mappings":";;;;;;;AAWA,IAAa,yBAAyB,MAAM,YAGzC,EAAE,UAAU,WAAW,GAAG,QAAQ,QAA2B;CAC9D,MAAM,EAAE,eAAe,MAAM,WAAW,uBAAuB;CAE/D,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,oBAAC,SAAD;EACE,WAAW,GAAG,8BAA8B,UAAU;EACtD,WAAW;EACX,GAAI;EACJ,SAAA;YAEA,oBAAC,UAAD;GAAe;GAAK,MAAK;GACtB;GACQ,CAAA;EACH,CAAA;EAEZ"}
+{"version":3,"file":"TreeCollapsibleContent.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\ntype TreeCollapsibleContentProps = React.ComponentProps<typeof Content> &\n  React.ComponentProps<typeof TreeList> & {\n    ref?: React.Ref<HTMLUListElement>\n  }\n\nexport const TreeCollapsibleContent = ({\n  ref,\n  children,\n  className,\n  ...rest\n}: TreeCollapsibleContentProps) => {\n  const { triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <Content\n      className={cn('data-[state=closed]:hidden', className)}\n      onKeyDown={handleOnKeydown}\n      {...rest}\n      asChild\n    >\n      <TreeList ref={ref} role=\"group\">\n        {children}\n      </TreeList>\n    </Content>\n  )\n}\n"],"mappings":";;;;;;;AAYA,IAAa,0BAA0B,EACrC,KACA,UACA,WACA,GAAG,WAC8B;CACjC,MAAM,EAAE,eAAe,QAAM,WAAW,sBAAsB;CAE9D,MAAM,mBAAmB,MAAM;EAC7B,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,EAAE,QAAQ,UAAU;GACtB,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,WAAW,QAAQ,MAAM;GACzB,WAAW,QAAQ,MAAM;EAC3B;CACF;CAEA,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,8BAA8B,SAAS;EACrD,WAAW;EACX,GAAI;EACJ,SAAA;YAEA,oBAAC,UAAD;GAAe;GAAK,MAAK;GACtB;EACO,CAAA;CACH,CAAA;AAEb"}

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import { TreeItemContent } from './TreeItemContent';
-type TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<typeof TreeItemContent> & {
+type NavigationMenuCollapsibleTriggerProps = React.ComponentProps<typeof TreeItemContent> & {
     label: string;
 };
-export declare const TreeCollapsibleTrigger: ({ children, label, className, ...rest }: TNavigationMenuCollapsibleTriggerProps) => React.JSX.Element;
+export declare const TreeCollapsibleTrigger: ({ children, label, className, onClick, ...rest }: NavigationMenuCollapsibleTriggerProps) => React.JSX.Element;
 export {};

package/dist/components/tree/TreeCollapsibleTrigger.js

@@ -3,7 +3,7 @@ import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { TreeCollapsibleContext } from "./TreeCollapsible.js";
 import { TreeItemContent } from "./TreeItemContent.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
 import { Trigger } from "@radix-ui/react-collapsible";
@@ -18,13 +18,13 @@ var StyledActionIcon = styled(ActionIcon, { base: [
 	"[&[data-state=closed]>svg]:-rotate-90",
 	"[&[data-state=open]>svg]:rotate-0"
 ] });
-var TreeCollapsibleTrigger = ({ children, label, className, ...rest }) => {
-	const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext);
+var TreeCollapsibleTrigger = ({ children, label, className, onClick, ...rest }) => {
+	const { setTriggerRef, triggerRef } = React$1.useContext(TreeCollapsibleContext);
 	return /* @__PURE__ */ jsxs(TreeItemContent, {
 		...rest,
 		className: cn("cursor-pointer", className),
 		onClick: (event) => {
-			rest.onClick?.(event);
+			onClick?.(event);
 			triggerRef?.current?.click();
 		},
 		children: [/* @__PURE__ */ jsx(Trigger, {

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

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsibleTrigger.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: [\n    'absolute',\n    'left-0',\n    'top-0',\n    'pointer-events-none',\n    '[&_svg]:duration-300',\n    '[&_svg]:transition-transform',\n    '[&[data-state=closed]>svg]:-rotate-90',\n    '[&[data-state=open]>svg]:rotate-0'\n  ]\n})\n\ntype TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={cn('cursor-pointer', className)}\n      onClick={(event) => {\n        rest.onClick?.(event)\n        triggerRef?.current?.click()\n      }}\n    >\n      <Trigger asChild>\n        <StyledActionIcon\n          size=\"sm\"\n          ref={setTriggerRef}\n          label={label}\n          theme=\"neutral\"\n          hasTooltip={false}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAQF,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,GAAG,WACyC;CAC5C,MAAM,EAAE,eAAe,eAAe,MAAM,WAAW,uBAAuB;AAE9E,QACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,UAAU;EAC1C,UAAU,UAAU;AAClB,QAAK,UAAU,MAAM;AACrB,eAAY,SAAS,OAAO;;YALhC,CAQE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,kBAAD;IACE,MAAK;IACL,KAAK;IACE;IACP,OAAM;IACN,YAAY;IACZ,UAAU,MAAM,EAAE,iBAAiB;cAEnC,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;IACR,CAAA;GACX,CAAA,EACT,SACe"}
+{"version":3,"file":"TreeCollapsibleTrigger.js","names":[],"sources":["../../../src/components/tree/TreeCollapsibleTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: [\n    'absolute',\n    'left-0',\n    'top-0',\n    'pointer-events-none',\n    '[&_svg]:duration-300',\n    '[&_svg]:transition-transform',\n    '[&[data-state=closed]>svg]:-rotate-90',\n    '[&[data-state=open]>svg]:rotate-0'\n  ]\n})\n\ntype NavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  className,\n  onClick,\n  ...rest\n}: NavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <TreeItemContent\n      {...rest}\n      className={cn('cursor-pointer', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        triggerRef?.current?.click()\n      }}\n    >\n      <Trigger asChild>\n        <StyledActionIcon\n          size=\"sm\"\n          ref={setTriggerRef}\n          label={label}\n          theme=\"neutral\"\n          hasTooltip={false}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </TreeItemContent>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAQD,IAAa,0BAA0B,EACrC,UACA,OACA,WACA,SACA,GAAG,WACwC;CAC3C,MAAM,EAAE,eAAe,eAAe,QAAM,WAAW,sBAAsB;CAE7E,OACE,qBAAC,iBAAD;EACE,GAAI;EACJ,WAAW,GAAG,kBAAkB,SAAS;EACzC,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,YAAY,SAAS,MAAM;EAC7B;YANF,CAQE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,kBAAD;IACE,MAAK;IACL,KAAK;IACE;IACP,OAAM;IACN,YAAY;IACZ,UAAU,MAAM,EAAE,gBAAgB;cAElC,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACR,CAAA;EACX,CAAA,GACR,QACc;;AAErB"}

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { Icon } from '../../components/icon/Icon';
-export declare const TreeIcon: ({ className, ...props }: React.ComponentProps<typeof Icon>) => React.JSX.Element;
+import { Icon } from '../icon/Icon';
+export declare const TreeIcon: ({ className, ...rest }: React.ComponentProps<typeof Icon>) => React.JSX.Element;

package/dist/components/tree/TreeIcon.js

@@ -3,9 +3,9 @@ import { Icon } from "../icon/Icon.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tree/TreeIcon.tsx
-var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(Icon, {
+var TreeIcon = ({ className, ...rest }) => /* @__PURE__ */ jsx(Icon, {
 	size: "md",
-	...props,
+	...rest,
 	className: cn("my-1", "shrink-0", "self-start", className)
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { cn } from '~/styled'\n\nexport const TreeIcon = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Icon>): React.JSX.Element => (\n  <Icon\n    size=\"md\"\n    {...props}\n    className={cn('my-1', 'shrink-0', 'self-start', className)}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,YAAY,EACvB,WACA,GAAG,YAEH,oBAAC,MAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GAAG,QAAQ,YAAY,cAAc,UAAU;CAC1D,CAAA"}
+{"version":3,"file":"TreeIcon.js","names":[],"sources":["../../../src/components/tree/TreeIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\n\nexport const TreeIcon = ({\n  className,\n  ...rest\n}: React.ComponentProps<typeof Icon>) => (\n  <Icon\n    size=\"md\"\n    {...rest}\n    className={cn('my-1', 'shrink-0', 'self-start', className)}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,YAAY,EACvB,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GAAG,QAAQ,YAAY,cAAc,SAAS;AAC1D,CAAA"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { TreeItemContent } from './TreeItemContent';
 type TreeItemProps = React.ComponentProps<typeof TreeItemContent>;
 export declare const TreeItem: ({ children, ...rest }: TreeItemProps) => React.JSX.Element;

package/dist/components/tree/TreeItem.js

@@ -3,12 +3,10 @@ import { TreeItemContent } from "./TreeItemContent.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tree/TreeItem.tsx
-var TreeItem = ({ children, ...rest }) => {
-	return /* @__PURE__ */ jsx(TreeListItem, { children: /* @__PURE__ */ jsx(TreeItemContent, {
-		...rest,
-		children
-	}) });
-};
+var TreeItem = ({ children, ...rest }) => /* @__PURE__ */ jsx(TreeListItem, { children: /* @__PURE__ */ jsx(TreeItemContent, {
+	...rest,
+	children
+}) });
 //#endregion
 export { TreeItem };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.js","names":[],"sources":["../../../src/components/tree/TreeItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { TreeItemContent } from './TreeItemContent'\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeItemProps = React.ComponentProps<typeof TreeItemContent>\n\nexport const TreeItem = ({\n  children,\n  ...rest\n}: TreeItemProps): React.JSX.Element => {\n  return (\n    <TreeListItem>\n      <TreeItemContent {...rest}>{children}</TreeItemContent>\n    </TreeListItem>\n  )\n}\n"],"mappings":";;;;;AAOA,IAAa,YAAY,EACvB,UACA,GAAG,WACmC;AACtC,QACE,oBAAC,cAAD,EAAA,UACE,oBAAC,iBAAD;EAAiB,GAAI;EAAO;EAA2B,CAAA,EAC1C,CAAA"}
+{"version":3,"file":"TreeItem.js","names":[],"sources":["../../../src/components/tree/TreeItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TreeItemContent } from './TreeItemContent'\nimport { TreeListItem } from './TreeListItem'\n\ntype TreeItemProps = React.ComponentProps<typeof TreeItemContent>\n\nexport const TreeItem = ({ children, ...rest }: TreeItemProps) => (\n  <TreeListItem>\n    <TreeItemContent {...rest}>{children}</TreeItemContent>\n  </TreeListItem>\n)\n"],"mappings":";;;;;AAOA,IAAa,YAAY,EAAE,UAAU,GAAG,WACtC,oBAAC,cAAD,EAAA,UACE,oBAAC,iBAAD;CAAiB,GAAI;CAAO;AAA0B,CAAA,EAC1C,CAAA"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
-export declare const TreeItemContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const StyledItemContent: import("../..").PolymorphicComponent<"div", unknown>;
+type TreeItemContentProps = React.ComponentProps<typeof StyledItemContent>;
+export declare const TreeItemContent: ({ ref, children, ...rest }: TreeItemContentProps) => React.JSX.Element;
+export {};

package/dist/components/tree/TreeItemContent.js

@@ -14,15 +14,18 @@ var StyledItemContent = styled("div", { base: [
 	"items-center",
 	"gap-2"
 ] });
-var TreeItemContent = React$1.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx(StyledItemContent, {
+var TreeItemContent = ({ ref, children, ...rest }) => /* @__PURE__ */ jsx(StyledItemContent, {
 	ref,
 	...rest,
 	children: React$1.Children.map(children, (child) => {
 		if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx(TreeText, { children: child });
-		if (React$1.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ jsx(TreeIcon, { ...child.props });
+		if (React$1.isValidElement(child) && child.type === Icon) {
+			const iconProps = child.props;
+			return /* @__PURE__ */ jsx(TreeIcon, { ...iconProps });
+		}
 		return child;
 	})
-}));
+});
 //#endregion
 export { TreeItemContent };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItemContent.js","names":[],"sources":["../../../src/components/tree/TreeItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { TreeIcon } from './TreeIcon'\nimport { TreeText } from './TreeText'\n\nconst StyledItemContent = styled('div', {\n  base: [\n    'w-full',\n    'relative',\n    'min-h-8',\n    'pl-10',\n    'flex',\n    'items-center',\n    'gap-2'\n  ]\n})\n\ntype TreeItemContentProps = React.ComponentProps<typeof StyledItemContent>\n\nexport const TreeItemContent = React.forwardRef<\n  HTMLDivElement,\n  TreeItemContentProps\n>(({ children, ...rest }, ref) => (\n  <StyledItemContent ref={ref} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return <TreeText>{child}</TreeText>\n        }\n        if (\n          React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n            child\n          ) &&\n          child.type === Icon\n        ) {\n          return <TreeIcon {...child.props} />\n        }\n        return child\n      }) as React.ReactElement<unknown>[]\n    }\n  </StyledItemContent>\n))\n"],"mappings":";;;;;;;AAQA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAIF,IAAa,kBAAkB,QAAM,YAGlC,EAAE,UAAU,GAAG,QAAQ,QACxB,oBAAC,mBAAD;CAAwB;CAAK,GAAI;WAE7B,QAAM,SAAS,IAAI,WAAW,UAAU;AACtC,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO,oBAAC,UAAD,EAAA,UAAW,OAAiB,CAAA;AAErC,MACE,QAAM,eACJ,MACD,IACD,MAAM,SAAS,KAEf,QAAO,oBAAC,UAAD,EAAU,GAAI,MAAM,OAAS,CAAA;AAEtC,SAAO;GACP;CAEc,CAAA,CACpB"}
+{"version":3,"file":"TreeItemContent.js","names":[],"sources":["../../../src/components/tree/TreeItemContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { TreeIcon } from './TreeIcon'\nimport { TreeText } from './TreeText'\n\nconst StyledItemContent = styled('div', {\n  base: [\n    'w-full',\n    'relative',\n    'min-h-8',\n    'pl-10',\n    'flex',\n    'items-center',\n    'gap-2'\n  ]\n})\n\ntype TreeItemContentProps = React.ComponentProps<typeof StyledItemContent>\n\nexport const TreeItemContent = ({\n  ref,\n  children,\n  ...rest\n}: TreeItemContentProps) => (\n  <StyledItemContent ref={ref} {...rest}>\n    {\n      React.Children.map(children, (child) => {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return <TreeText>{child}</TreeText>\n        }\n        if (React.isValidElement(child) && child.type === Icon) {\n          const iconProps = child.props as React.ComponentProps<typeof Icon>\n          return <TreeIcon {...iconProps} />\n        }\n        return child\n      }) as React.ReactElement<unknown>[]\n    }\n  </StyledItemContent>\n)\n"],"mappings":";;;;;;;AAOA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAID,IAAa,mBAAmB,EAC9B,KACA,UACA,GAAG,WAEH,oBAAC,mBAAD;CAAwB;CAAK,GAAI;WAE7B,QAAM,SAAS,IAAI,WAAW,UAAU;EACtC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,oBAAC,UAAD,EAAA,UAAW,MAAgB,CAAA;EAEpC,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;GACtD,MAAM,YAAY,MAAM;GACxB,OAAO,oBAAC,UAAD,EAAU,GAAI,UAAY,CAAA;EACnC;EACA,OAAO;CACT,CAAC;AAEc,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TreeList.js","names":[],"sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TreeList = styled('ul', {\n  base: ['flex', 'flex-col', 'p-0', 'm-0', 'list-none', 'w-full', '[&_&]:pl-4']\n})\n"],"mappings":";;AAEA,IAAa,WAAW,OAAO,MAAM,EACnC,MAAM;CAAC;CAAQ;CAAY;CAAO;CAAO;CAAa;CAAU;CAAa,EAC9E,CAAC"}
+{"version":3,"file":"TreeList.js","names":[],"sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TreeList = styled('ul', {\n  base: ['flex', 'flex-col', 'p-0', 'm-0', 'list-none', 'w-full', '[&_&]:pl-4']\n})\n"],"mappings":";;AAEA,IAAa,WAAW,OAAO,MAAM,EACnC,MAAM;CAAC;CAAQ;CAAY;CAAO;CAAO;CAAa;CAAU;AAAY,EAC9E,CAAC"}

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

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare const TreeListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+type TreeListItemProps = React.ComponentProps<'li'>;
+export declare const TreeListItem: ({ ref, className, ...rest }: TreeListItemProps) => React.JSX.Element;
+export {};

package/dist/components/tree/TreeListItem.js

@@ -1,13 +1,13 @@
 import { cn } from "../../styled.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tree/TreeListItem.tsx
-var TreeListItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
-	...props,
+var TreeListItem = ({ ref, className, ...rest }) => /* @__PURE__ */ jsx("li", {
+	...rest,
 	ref,
 	role: "treeitem",
 	className: cn("flex", "items-center", "gap-2", "not-first:mt-0.5", className)
-}));
+});
 //#endregion
 export { TreeListItem };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = React.forwardRef<HTMLLIElement, TreeListItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      role=\"treeitem\"\n      className={cn(\n        'flex',\n        'items-center',\n        'gap-2',\n        'not-first:mt-0.5',\n        className\n      )}\n    />\n  )\n)\n"],"mappings":";;;;AAMA,IAAa,eAAe,QAAM,YAC/B,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,GACT,QACA,gBACA,SACA,oBACA,UACD;CACD,CAAA,CAEL"}
+{"version":3,"file":"TreeListItem.js","names":[],"sources":["../../../src/components/tree/TreeListItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\n\ntype TreeListItemProps = React.ComponentProps<'li'>\n\nexport const TreeListItem = ({\n  ref,\n  className,\n  ...rest\n}: TreeListItemProps) => (\n  <li\n    {...rest}\n    ref={ref}\n    role=\"treeitem\"\n    className={cn(\n      'flex',\n      'items-center',\n      'gap-2',\n      'not-first:mt-0.5',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;AAMA,IAAa,gBAAgB,EAC3B,KACA,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,GACT,QACA,gBACA,SACA,oBACA,SACF;AACD,CAAA"}

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Text } from '../../components/text/Text';
-type TStyledTreeTextProps = React.ComponentProps<typeof Text>;
-export declare const TreeText: ({ className, ...rest }: TStyledTreeTextProps) => React.JSX.Element;
+import * as React from 'react';
+import { Text } from '../text/Text';
+type StyledTreeTextProps = React.ComponentProps<typeof Text>;
+export declare const TreeText: ({ className, ...rest }: StyledTreeTextProps) => React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { cn } from '~/styled'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = ({\n  className,\n  ...rest\n}: TStyledTreeTextProps): React.JSX.Element => (\n  <Text\n    as=\"span\"\n    {...rest}\n    className={cn(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      className\n    )}\n    size=\"md\"\n  />\n)\n"],"mappings":";;;;;AAOA,IAAa,YAAY,EACvB,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,GACT,UACA,qBACA,qBACA,iBACA,UACD;CACD,MAAK;CACL,CAAA"}
+{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype StyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = ({ className, ...rest }: StyledTreeTextProps) => (\n  <Text\n    as=\"span\"\n    {...rest}\n    className={cn(\n      'py-0.5',\n      'whitespace-nowrap',\n      'overflow-x-hidden',\n      'text-ellipsis',\n      className\n    )}\n    size=\"md\"\n  />\n)\n"],"mappings":";;;;;AAOA,IAAa,YAAY,EAAE,WAAW,GAAG,WACvC,oBAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,GACT,UACA,qBACA,qBACA,iBACA,SACF;CACA,MAAK;AACN,CAAA"}

package/dist/components/video/Video.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import ReactPlayer from 'react-player/vimeo.js';
-import { Override } from '../../utilities/types';
+import type { Override } from '../../utilities/types';
 type VideoProps = Override<React.ComponentProps<typeof ReactPlayer>, {
     id: string;
     ratio?: number;
     className?: string;
+    ref?: React.Ref<ReactPlayer>;
 }>;
-export declare const Video: React.ForwardRefExoticComponent<Omit<VideoProps, "ref"> & React.RefAttributes<any>>;
+export declare const Video: ({ ref, id, ratio, className, ...rest }: VideoProps) => React.JSX.Element;
 export {};

package/dist/components/video/Video.js

@@ -1,15 +1,15 @@
 import { CSSWrapper } from "../../utilities/css-wrapper/CSSWrapper.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import ReactPlayer from "react-player/vimeo.js";
 //#region src/components/video/Video.tsx
-var Video = React$1.forwardRef(({ id, ratio = 9 / 16, className, ...remainingProps }, ref) => /* @__PURE__ */ jsx(CSSWrapper, {
+var Video = ({ ref, id, ratio = 9 / 16, className, ...rest }) => /* @__PURE__ */ jsx(CSSWrapper, {
 	className,
 	children: /* @__PURE__ */ jsx("div", {
 		style: { "--ratio": `${ratio * 100}%` },
 		className: "relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)",
 		children: /* @__PURE__ */ jsx(ReactPlayer, {
-			...remainingProps,
+			...rest,
 			role: "figure",
 			url: `https://player.vimeo.com/video/${id}`,
 			height: "100%",
@@ -18,8 +18,7 @@ var Video = React$1.forwardRef(({ id, ratio = 9 / 16, className, ...remainingPro
 			className: "absolute top-0 left-0"
 		})
 	})
-}));
-Video.displayName = "Video";
+});
 //#endregion
 export { Video };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Video.js","names":[],"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.js'\n\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\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"],"mappings":";;;;;AAgBA,IAAa,QAAQ,QAAM,YACxB,EAAE,IAAI,QAAQ,IAAI,IAAI,WAAW,GAAG,kBAAkB,QACrD,oBAAC,YAAD;CAAuB;WACrB,oBAAC,OAAD;EACE,OAAO,EAAE,WAAW,GAAG,QAAQ,IAAI,IAAI;EACvC,WAAU;YAEV,oBAAC,aAAD;GACE,GAAI;GACJ,MAAK;GACL,KAAK,kCAAkC;GACvC,QAAO;GACP,OAAM;GACD;GACL,WAAU;GACV,CAAA;EACE,CAAA;CACK,CAAA,CAEhB;AAED,MAAM,cAAc"}
+{"version":3,"file":"Video.js","names":[],"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.js'\n\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport type { Override } from '../../utilities/types'\n\ntype VideoProps = Override<\n  React.ComponentProps<typeof ReactPlayer>,\n  {\n    id: string\n    ratio?: number\n    className?: string\n    ref?: React.Ref<ReactPlayer>\n  }\n>\n\nexport const Video = ({\n  ref,\n  id,\n  ratio = 9 / 16,\n  className,\n  ...rest\n}: VideoProps) => (\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        {...rest}\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"],"mappings":";;;;;AAiBA,IAAa,SAAS,EACpB,KACA,IACA,QAAQ,IAAI,IACZ,WACA,GAAG,WAEH,oBAAC,YAAD;CAAuB;WACrB,oBAAC,OAAD;EACE,OAAO,EAAE,WAAW,GAAG,QAAQ,IAAI,GAAG;EACtC,WAAU;YAEV,oBAAC,aAAD;GACE,GAAI;GACJ,MAAK;GACL,KAAK,kCAAkC;GACvC,QAAO;GACP,OAAM;GACD;GACL,WAAU;EACX,CAAA;CACE,CAAA;AACK,CAAA"}