@atom-learning/components 5.12.0 → 5.13.0-beta.0

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

@@ -29,6 +29,8 @@ export declare const TreeCollapsible: React.ForwardRefExoticComponent<Omit<impor
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

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

@@ -24,6 +24,8 @@ declare const StyledTreeCollapsibleContent: import("@atom-learning/stitches-reac
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/tree/TreeCollapsibleTrigger.js

@@ -1,2 +1,2 @@
-import{ChevronDown as p}from"@atom-learning/icons";import{Trigger as f}from"@radix-ui/react-collapsible";import e from"react";import{ActionIcon as d}from"../action-icon/ActionIcon.js";import{StyledIcon as r,Icon as g}from"../icon/Icon.js";import{styled as a}from"../../stitches.js";import{TreeCollapsibleContext as u}from"./TreeCollapsible.js";import{TreeItemContent as C}from"./TreeItemContent.js";const T=a(C,{cursor:"pointer"}),b=a(d,{position:"absolute",left:0,top:0,pointerEvents:"none",[`${r}`]:{transition:"transform 300ms"},[`&[data-state="closed"] > ${r}`]:{transform:"rotate(-90deg)"},[`&[data-state="open"] > ${r}`]:{transform:"rotate(0deg)"}}),h=({children:m,label:s,...t})=>{const{setTriggerRef:c,triggerRef:n}=e.useContext(u);return e.createElement(T,{...t,onClick:o=>{var l,i;(l=t.onClick)==null||l.call(t,o),(i=n==null?void 0:n.current)==null||i.click()}},e.createElement(f,{asChild:!0},e.createElement(b,{size:"sm",ref:c,label:s,theme:"neutral",hasTooltip:!1,onClick:o=>o.stopPropagation()},e.createElement(g,{is:p}))),m)};export{h as TreeCollapsibleTrigger};
+import{ChevronDown as c}from"@atom-learning/icons";import{Trigger as p}from"@radix-ui/react-collapsible";import e from"react";import{ActionIcon as f}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{styled as i}from"../../stitches.js";import{TreeCollapsibleContext as d}from"./TreeCollapsible.js";import{TreeItemContent as u}from"./TreeItemContent.js";const C=i(u,{cursor:"pointer"}),v=i(f,{position:"absolute",left:0,top:0,pointerEvents:"none","& svg":{transition:"transform 300ms"},'&[data-state="closed"] > svg':{transform:"rotate(-90deg)"},'&[data-state="open"] > svg':{transform:"rotate(0deg)"}}),T=({children:a,label:s,...t})=>{const{setTriggerRef:m,triggerRef:r}=e.useContext(d);return e.createElement(C,{...t,onClick:o=>{var n,l;(n=t.onClick)==null||n.call(t,o),(l=r==null?void 0:r.current)==null||l.click()}},e.createElement(p,{asChild:!0},e.createElement(v,{size:"sm",ref:m,label:s,theme:"neutral",hasTooltip:!1,onClick:o=>o.stopPropagation()},e.createElement(g,{is:c}))),a)};export{T as TreeCollapsibleTrigger};
 //# sourceMappingURL=TreeCollapsibleTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeCollapsibleTrigger.js","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'\nimport { Icon, StyledIcon } from '~/components/icon'\nimport { styled } from '~/stitches'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledTreeCollapsibleTrigger = styled(TreeItemContent, {\n  cursor: 'pointer'\n})\n\nconst StyledActionIcon = styled(ActionIcon, {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  pointerEvents: 'none',\n  [`${StyledIcon}`]: {\n    transition: 'transform 300ms'\n  },\n  [`&[data-state=\"closed\"] > ${StyledIcon}`]: {\n    transform: 'rotate(-90deg)'\n  },\n  [`&[data-state=\"open\"] > ${StyledIcon}`]: {\n    transform: 'rotate(0deg)'\n  }\n})\n\ntype TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <StyledTreeCollapsibleTrigger\n      {...rest}\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: PointerEvent) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </StyledTreeCollapsibleTrigger>\n  )\n}\n"],"names":["StyledTreeCollapsibleTrigger","styled","TreeItemContent","StyledActionIcon","ActionIcon","StyledIcon","TreeCollapsibleTrigger","children","label","rest","setTriggerRef","triggerRef","React","TreeCollapsibleContext","event","_a","_b","Trigger","e","Icon","ChevronDown"],"mappings":"+YAWA,MAAMA,EAA+BC,EAAOC,EAAiB,CAC3D,OAAQ,SACV,CAAC,EAEKC,EAAmBF,EAAOG,EAAY,CAC1C,SAAU,WACV,KAAM,EACN,IAAK,EACL,cAAe,OACf,CAAC,GAAGC,KAAe,CACjB,WAAY,iBACd,EACA,CAAC,4BAA4BA,KAAe,CAC1C,UAAW,gBACb,EACA,CAAC,0BAA0BA,KAAe,CACxC,UAAW,cACb,CACF,CAAC,EAQYC,EAAyB,CAAC,CACrC,SAAAC,EACA,MAAAC,KACGC,CACL,IAA8C,CAC5C,KAAM,CAAE,cAAAC,EAAe,WAAAC,CAAW,EAAIC,EAAM,WAAWC,CAAsB,EAE7E,OACED,EAAA,cAACZ,EAAA,CACE,GAAGS,EACJ,QAAUK,GAAU,CA/C1B,IAAAC,EAAAC,GAgDQD,EAAAN,EAAK,UAAL,MAAAM,EAAA,KAAAN,EAAeK,CACfE,GAAAA,EAAAL,GAAA,KAAAA,OAAAA,EAAY,UAAZ,MAAAK,EAAqB,MACvB,CAAA,CAAA,EAEAJ,EAAA,cAACK,EAAA,CAAQ,QAAO,EACdL,EAAAA,EAAA,cAACT,EAAA,CACC,KAAK,KACL,IAAKO,EACL,MAAOF,EACP,MAAM,UACN,WAAY,GACZ,QAAUU,GAAoBA,EAAE,iBAEhCN,EAAAA,EAAA,cAACO,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,CACF,EACCb,CACH,CAEJ"}
+{"version":3,"file":"TreeCollapsibleTrigger.js","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'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledTreeCollapsibleTrigger = styled(TreeItemContent, {\n  cursor: 'pointer'\n})\n\nconst StyledActionIcon = styled(ActionIcon, {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  pointerEvents: 'none',\n  '& svg': {\n    transition: 'transform 300ms'\n  },\n  '&[data-state=\"closed\"] > svg': {\n    transform: 'rotate(-90deg)'\n  },\n  '&[data-state=\"open\"] > svg': {\n    transform: 'rotate(0deg)'\n  }\n})\n\ntype TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <StyledTreeCollapsibleTrigger\n      {...rest}\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: PointerEvent) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </StyledTreeCollapsibleTrigger>\n  )\n}\n"],"names":["StyledTreeCollapsibleTrigger","styled","TreeItemContent","StyledActionIcon","ActionIcon","TreeCollapsibleTrigger","children","label","rest","setTriggerRef","triggerRef","React","TreeCollapsibleContext","event","_a","_b","Trigger","e","Icon","ChevronDown"],"mappings":"+XAWA,MAAMA,EAA+BC,EAAOC,EAAiB,CAC3D,OAAQ,SACV,CAAC,EAEKC,EAAmBF,EAAOG,EAAY,CAC1C,SAAU,WACV,KAAM,EACN,IAAK,EACL,cAAe,OACf,QAAS,CACP,WAAY,iBACd,EACA,+BAAgC,CAC9B,UAAW,gBACb,EACA,6BAA8B,CAC5B,UAAW,cACb,CACF,CAAC,EAQYC,EAAyB,CAAC,CACrC,SAAAC,EACA,MAAAC,KACGC,CACL,IAA8C,CAC5C,KAAM,CAAE,cAAAC,EAAe,WAAAC,CAAW,EAAIC,EAAM,WAAWC,CAAsB,EAE7E,OACED,EAAA,cAACX,EAAA,CACE,GAAGQ,EACJ,QAAUK,GAAU,CA/C1B,IAAAC,EAAAC,GAgDQD,EAAAN,EAAK,UAAL,MAAAM,EAAA,KAAAN,EAAeK,CACfE,GAAAA,EAAAL,GAAA,KAAA,OAAAA,EAAY,UAAZ,MAAAK,EAAqB,OACvB,GAEAJ,EAAA,cAACK,EAAA,CAAQ,QAAO,EACdL,EAAAA,EAAA,cAACR,EAAA,CACC,KAAK,KACL,IAAKM,EACL,MAAOF,EACP,MAAM,UACN,WAAY,GACZ,QAAUU,GAAoBA,EAAE,mBAEhCN,EAAA,cAACO,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,CACF,EACCb,CACH,CAEJ"}

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

@@ -28,6 +28,8 @@ declare const StyledTreeIcon: import("@atom-learning/stitches-react/types/styled
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -400,6 +402,8 @@ declare const StyledTreeIcon: import("@atom-learning/stitches-react/types/styled
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -1,11 +1,11 @@
 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" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+}, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -32,6 +32,8 @@ export declare const TreeItemContent: React.ForwardRefExoticComponent<Omit<Omit<
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

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

@@ -1,11 +1,11 @@
 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" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+}, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -32,6 +32,8 @@ export declare const TreeListItem: React.ForwardRefExoticComponent<Omit<Omit<Omi
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

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

@@ -26,6 +26,8 @@ declare const StyledVideo: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/video/Video.js

@@ -1,2 +1,2 @@
-import*as e from"react";import m from"react-player/vimeo";import{Box as p}from"../box/Box.js";import{styled as a}from"../../stitches.js";import{CSSWrapper as f}from"../../utilities/css-wrapper/CSSWrapper.js";const l=a(m,{}),o=e.forwardRef(({id:r,ratio:t=9/16,css:i,...s},d)=>e.createElement(f,{css:i},e.createElement(p,{css:{borderRadius:"$0",position:"relative",paddingTop:`${t*100}%`,overflow:"hidden",height:0,width:"100%"}},e.createElement(l,{...s,role:"figure",url:`https://player.vimeo.com/video/${r}`,height:"100%",width:"100%",css:{position:"absolute",top:0,left:0},ref:d}))));o.displayName="Video";export{o as Video};
+import*as e from"react";import d from"react-player/vimeo";import{Box as m}from"../box/Box.js";import{styled as p}from"../../stitches.js";import{CSSWrapper as l}from"../../utilities/css-wrapper/CSSWrapper.js";const f=p(d,{}),o=e.forwardRef(({id:r,ratio:t=9/16,css:i,...s},a)=>e.createElement(l,{css:i},e.createElement(m,{style:{"--ratio":`${t*100}%`},css:{borderRadius:"$0",position:"relative",paddingTop:"var(--ratio)",overflow:"hidden",height:0,width:"100%"}},e.createElement(f,{...s,role:"figure",url:`https://player.vimeo.com/video/${r}`,height:"100%",width:"100%",css:{position:"absolute",top:0,left:0},ref:a}))));o.displayName="Video";export{o 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 { Box } from '~/components/box'\nimport { CSS, styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\nimport { Override } from '~/utilities/types'\n\nconst StyledVideo = styled(ReactPlayer, {})\n\ntype VideoProps = Override<\n  React.ComponentProps<typeof StyledVideo>,\n  {\n    id: string\n    ratio?: number\n    css?: CSS\n  }\n>\n\nexport const Video: React.ForwardRefExoticComponent<VideoProps> =\n  React.forwardRef(({ id, ratio = 9 / 16, css, ...remainingProps }, ref) => (\n    <CSSWrapper css={css}>\n      <Box\n        css={{\n          borderRadius: '$0',\n          position: 'relative',\n          paddingTop: `${ratio * 100}%`,\n          overflow: 'hidden',\n          height: 0,\n          width: '100%'\n        }}\n      >\n        <StyledVideo\n          {...remainingProps}\n          role=\"figure\"\n          url={`https://player.vimeo.com/video/${id}`}\n          height=\"100%\"\n          width=\"100%\"\n          css={{ position: 'absolute', top: 0, left: 0 }}\n          ref={ref}\n        />\n      </Box>\n    </CSSWrapper>\n  ))\n\nVideo.displayName = 'Video'\n"],"names":["StyledVideo","styled","ReactPlayer","Video","React","id","ratio","css","remainingProps","ref","CSSWrapper","Box"],"mappings":"gNASA,MAAMA,EAAcC,EAAOC,EAAa,CAAA,CAAE,EAW7BC,EACXC,EAAM,WAAW,CAAC,CAAE,GAAAC,EAAI,MAAAC,EAAQ,EAAI,GAAI,IAAAC,KAAQC,CAAe,EAAGC,IAChEL,EAAA,cAACM,EAAA,CAAW,IAAKH,CAAAA,EACfH,EAAA,cAACO,EAAA,CACC,IAAK,CACH,aAAc,KACd,SAAU,WACV,WAAY,GAAGL,EAAQ,OACvB,SAAU,SACV,OAAQ,EACR,MAAO,MACT,CAAA,EAEAF,EAAA,cAACJ,EAAA,CACE,GAAGQ,EACJ,KAAK,SACL,IAAK,kCAAkCH,IACvC,OAAO,OACP,MAAM,OACN,IAAK,CAAE,SAAU,WAAY,IAAK,EAAG,KAAM,CAAE,EAC7C,IAAKI,CAAAA,CACP,CACF,CACF,CACD,EAEHN,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 { Box } from '~/components/box'\nimport { CSS, styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\nimport { Override } from '~/utilities/types'\n\nconst StyledVideo = styled(ReactPlayer, {})\n\ntype VideoProps = Override<\n  React.ComponentProps<typeof StyledVideo>,\n  {\n    id: string\n    ratio?: number\n    css?: CSS\n  }\n>\n\nexport const Video: React.ForwardRefExoticComponent<VideoProps> =\n  React.forwardRef(({ id, ratio = 9 / 16, css, ...remainingProps }, ref) => (\n    <CSSWrapper css={css}>\n      <Box\n        style={{ '--ratio': `${ratio * 100}%` }}\n        css={{\n          borderRadius: '$0',\n          position: 'relative',\n          paddingTop: 'var(--ratio)',\n          overflow: 'hidden',\n          height: 0,\n          width: '100%'\n        }}\n      >\n        <StyledVideo\n          {...remainingProps}\n          role=\"figure\"\n          url={`https://player.vimeo.com/video/${id}`}\n          height=\"100%\"\n          width=\"100%\"\n          css={{ position: 'absolute', top: 0, left: 0 }}\n          ref={ref}\n        />\n      </Box>\n    </CSSWrapper>\n  ))\n\nVideo.displayName = 'Video'\n"],"names":["StyledVideo","styled","ReactPlayer","Video","React","id","ratio","css","remainingProps","ref","CSSWrapper","Box"],"mappings":"gNASA,MAAMA,EAAcC,EAAOC,EAAa,CAAE,CAAA,EAW7BC,EACXC,EAAM,WAAW,CAAC,CAAE,GAAAC,EAAI,MAAAC,EAAQ,EAAI,GAAI,IAAAC,KAAQC,CAAe,EAAGC,IAChEL,EAAA,cAACM,EAAA,CAAW,IAAKH,CACfH,EAAAA,EAAA,cAACO,EAAA,CACC,MAAO,CAAE,UAAW,GAAGL,EAAQ,MAAO,EACtC,IAAK,CACH,aAAc,KACd,SAAU,WACV,WAAY,eACZ,SAAU,SACV,OAAQ,EACR,MAAO,MACT,GAEAF,EAAA,cAACJ,EAAA,CACE,GAAGQ,EACJ,KAAK,SACL,IAAK,kCAAkCH,IACvC,OAAO,OACP,MAAM,OACN,IAAK,CAAE,SAAU,WAAY,IAAK,EAAG,KAAM,CAAE,EAC7C,IAAKI,CAAAA,CACP,CACF,CACF,CACD,EAEHN,EAAM,YAAc"}