@atom-learning/components 1.0.0-rc.3 → 1.0.1

package/dist/components/tooltip/Tooltip.js

@@ -1 +1 @@
-const t=["children","delayDuration"];import{Root as r,Trigger as o}from"@radix-ui/react-tooltip";import{createElement as e}from"react";import{TooltipContent as n}from"./TooltipContent.js";const i=o=>{let{children:n,delayDuration:i=100}=o,a=function(t,r){if(null==t)return{};var o,e,n={},i=Object.keys(t);for(e=0;e<i.length;e++)o=i[e],r.indexOf(o)>=0||(n[o]=t[o]);return n}(o,t);return e(r,Object.assign({delayDuration:i},a),n)};i.Content=n,i.Trigger=o,i.displayName="Tooltip";export{i as Tooltip};
+const t=["children","delayDuration"];import{Root as r,Trigger as o}from"@radix-ui/react-tooltip";import{createElement as e}from"react";import{styled as i}from"../../stitches.js";import{TooltipContent as n}from"./TooltipContent.js";const a=o=>{let{children:i,delayDuration:n=350}=o,a=function(t,r){if(null==t)return{};var o,e,i={},n=Object.keys(t);for(e=0;e<n.length;e++)o=n[e],r.indexOf(o)>=0||(i[o]=t[o]);return i}(o,t);return e(r,Object.assign({delayDuration:n},a),i)};a.Content=n,a.Trigger=i(o,{}),a.displayName="Tooltip";export{a as Tooltip};

package/dist/components/tooltip/TooltipContent.d.ts

@@ -8,6 +8,7 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -15,6 +16,7 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -121,64 +123,148 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
         "3": any;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react").PropertyValue<"background">) => {
-        background: import("@stitches/react").PropertyValue<"background">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
-    inset: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        top: string | number | import("@stitches/react").ScaleValue<"space">;
-        right: string | number | import("@stitches/react").ScaleValue<"space">;
-        bottom: string | number | import("@stitches/react").ScaleValue<"space">;
-        left: string | number | import("@stitches/react").ScaleValue<"space">;
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    size: (value: string | number | import("@stitches/react").ScaleValue<"size">) => {
-        height: string | number | import("@stitches/react").ScaleValue<"size">;
-        width: string | number | import("@stitches/react").ScaleValue<"size">;
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
-    p: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react").ScaleValue<"space">;
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pl: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    px: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    py: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    m: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react").ScaleValue<"space">;
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    ml: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mx: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    my: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare type TooltipContentProps = React.ComponentProps<typeof StyledContent> & React.ComponentProps<typeof Content>;

package/dist/components/tooltip/TooltipContent.js

@@ -1 +1 @@
-const t=["children","side","sideOffset","size"];import{Content as i,Arrow as r}from"@radix-ui/react-tooltip";import{createElement as e}from"react";import{keyframes as o,styled as a}from"../../stitches.js";const n=a(i,{animation:`${o({"0%":{opacity:0,transform:"scale(0.8)"},"100%":{opacity:1,transform:"scale(1)"}})} 75ms ease-out`,backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.2,px:"$3",py:"$2",transformOrigin:"var(--radix-tooltip-content-transform-origin)",variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),s=a(r,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),d=i=>{let{children:r,side:o="top",sideOffset:a=4,size:d="md"}=i,l=function(t,i){if(null==t)return{};var r,e,o={},a=Object.keys(t);for(e=0;e<a.length;e++)r=a[e],i.indexOf(r)>=0||(o[r]=t[r]);return o}(i,t);return e(n,Object.assign({side:o,sideOffset:a,size:d},l),r,e(s,null))};export{d as TooltipContent};
+const i=["children","side","sideOffset","size"];import{Content as t,Arrow as a}from"@radix-ui/react-tooltip";import{createElement as e}from"react";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{slideDownAndFade as n,slideLeftAndFade as r,slideUpAndFade as s,slideRightAndFade as m}from"../../utilities/style/keyframe-animations.js";const d=o(t,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,px:"$3",py:"$2","@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:n},'&[data-side="right"]':{animationName:r},'&[data-side="bottom"]':{animationName:s},'&[data-side="left"]':{animationName:m}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),l=o(a,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),p=t=>{let{children:a,side:o="top",sideOffset:n=4,size:r="md"}=t,s=function(i,t){if(null==i)return{};var a,e,o={},n=Object.keys(i);for(e=0;e<n.length;e++)a=n[e],t.indexOf(a)>=0||(o[a]=i[a]);return o}(t,i);return e(d,Object.assign({side:o,sideOffset:n,size:r},s),a,e(l,null))};export{p as TooltipContent};

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

@@ -8,6 +8,7 @@ declare const StyledVideo: import("@stitches/react/types/styled-component").Styl
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, import("@stitches/react/types/css-util").CSS<{
     sm: string;
@@ -15,6 +16,7 @@ declare const StyledVideo: import("@stitches/react/types/styled-component").Styl
     lg: string;
     xl: string;
     reducedMotion: string;
+    allowMotion: string;
     hover: string;
 }, {
     colors: {
@@ -121,64 +123,148 @@ declare const StyledVideo: import("@stitches/react/types/styled-component").Styl
         "3": any;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react").PropertyValue<"background">) => {
-        background: import("@stitches/react").PropertyValue<"background">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
     };
-    inset: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        top: string | number | import("@stitches/react").ScaleValue<"space">;
-        right: string | number | import("@stitches/react").ScaleValue<"space">;
-        bottom: string | number | import("@stitches/react").ScaleValue<"space">;
-        left: string | number | import("@stitches/react").ScaleValue<"space">;
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    size: (value: string | number | import("@stitches/react").ScaleValue<"size">) => {
-        height: string | number | import("@stitches/react").ScaleValue<"size">;
-        width: string | number | import("@stitches/react").ScaleValue<"size">;
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
     };
-    p: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react").ScaleValue<"space">;
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    pl: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    px: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    py: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    m: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react").ScaleValue<"space">;
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mt: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mr: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mb: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    ml: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    mx: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react").ScaleValue<"space">;
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
-    my: (value: string | number | import("@stitches/react").ScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react").ScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react").ScaleValue<"space">;
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare type VideoProps = Override<React.ComponentPropsWithoutRef<typeof StyledVideo>, {