@atom-learning/components - npm Package Compare versions

Comparing version 0.1.0-alpha.2 to 0.1.0-alpha.3

dist/components/box/Box.d.ts

@@ -1,3 +0,2 @@
-import * as React from 'react';
-export declare const StyledBox: import("@stitches/react").StitchesComponent<"div", {}, {
+export declare const Box: import("@stitches/react").StitchesComponent<"div", {}, {
     sm: string;
@@ -29,2 +28,1 @@ md: string;
 }, {}>;
-export declare const Box: React.FC<React.ComponentPropsWithoutRef<typeof StyledBox>>;

dist/components/button/Button.d.ts

 import { StitchesVariants } from '@stitches/react';
 import * as React from 'react';
+import { Override } from '~/utilities';
 declare const StyledButton: import("@stitches/react").StitchesComponent<"button", {
@@ -16,2 +17,5 @@ theme: {
     };
+    isLoading: {
+        true: any;
+    };
 }, {
@@ -44,7 +48,8 @@ sm: string;
 }, {}>;
-declare type ButtonProps = React.ComponentPropsWithoutRef<typeof StyledButton> & StitchesVariants<typeof StyledButton> & {
+declare type ButtonProps = Override<React.ComponentPropsWithoutRef<typeof StyledButton>, StitchesVariants<typeof StyledButton> & {
     isLoading?: boolean;
-    onClick: () => void;
-};
+    onClick?: () => void;
+    as?: React.ComponentType | React.ElementType;
+}>;
 export declare const Button: React.FC<ButtonProps>;
 export {};

dist/components/flex/Flex.d.ts

@@ -1,3 +0,2 @@
-import * as React from 'react';
-declare const StyledFlex: import("@stitches/react").StitchesComponent<"div", {}, {
+export declare const Flex: import("@stitches/react").StitchesComponent<"div", {}, {
     sm: string;
@@ -29,3 +28,1 @@ md: string;
 }, {}>;
-export declare const Flex: React.FC<React.ComponentPropsWithoutRef<typeof StyledFlex>>;
-export {};

dist/components/index.d.ts

@@ -14,2 +14,3 @@ export { Box } from './box';
 export { Link } from './link';
+export { List } from './list';
 export { Loader } from './loader';
@@ -16,0 +17,0 @@ export { PasswordField } from './password-field';

dist/components/label/Label.d.ts

@@ -37,4 +37,5 @@ import * as React from 'react';
     as?: never;
+    required?: boolean;
 }>;
 export declare const Label: React.FC<LabelProps>;
 export {};

dist/components/link/Link.d.ts

 import * as React from 'react';
+import { Override } from '~/utilities';
 declare const StyledLink: import("@stitches/react").StitchesComponent<"a", {
@@ -35,4 +36,6 @@ size: {
 }, {}>;
-declare type LinkProps = React.ComponentProps<typeof StyledLink>;
+declare type LinkProps = Override<React.ComponentProps<typeof StyledLink>, {
+    as?: React.ComponentType | React.ElementType;
+}>;
 export declare const Link: React.FC<LinkProps>;
 export {};

dist/docs/CONTRIBUTING.md

@@ -98,3 +98,3 @@ ---
 ````md
-```jsx preview center
+```jsx preview
 <Button />
@@ -101,0 +101,0 @@ ```

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@atom-learning/theme"),r=require("@stitches/react"),o=require("@radix-ui/react-visually-hidden"),a=require("@radix-ui/react-checkbox"),n=require("@radix-ui/react-icons"),i=require("react-hook-form"),s=require("@radix-ui/react-progress"),l=require("@radix-ui/react-radio-group"),c=require("react-player/vimeo");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(t),m=d(c);const h={p:()=>e=>({padding:e}),pt:()=>e=>({paddingTop:e}),pr:()=>e=>({paddingRight:e}),pb:()=>e=>({paddingBottom:e}),pl:()=>e=>({paddingLeft:e}),px:()=>e=>({paddingLeft:e,paddingRight:e}),py:()=>e=>({paddingTop:e,paddingBottom:e}),m:()=>e=>({margin:e}),mt:()=>e=>({marginTop:e}),mr:()=>e=>({marginRight:e}),mb:()=>e=>({marginBottom:e}),ml:()=>e=>({marginLeft:e}),mx:()=>e=>({marginLeft:e,marginRight:e}),my:()=>e=>({marginTop:e,marginBottom:e}),bg:()=>e=>({background:e}),size:()=>e=>{if(Array.isArray(e)){const[t,r]=e;return{height:t,width:r}}return{height:e,width:e}}},u={sm:"@media (min-width: 550px)",md:"@media (min-width: 800px)",lg:"@media (min-width: 1100px)",xl:"@media (min-width: 1350px)",motion:"@media (prefers-reduced-motion)",hover:"@media (hover: hover)"},g=r.createCss({theme:p.default,utils:h,conditions:u}),{css:b,getCssString:y,global:$,keyframes:f,styled:x,theme:w}=g,v=x("div",{}),k=t=>e.createElement(v,Object.assign({},t));k.displayName="Box";const C=x("div",{display:"flex"}),E=t=>e.createElement(C,Object.assign({},t));E.displayName="Flex";const S=x("div",{animationName:`${f({"0%":{opacity:0},"30%":{opacity:1},"50%":{opacity:1},"80%":{opacity:0},"100%":{opacity:0}})}`,animationDuration:"1s",animationFillMode:"both",animationIterationCount:"infinite",animationTimingFunction:"linear",backgroundColor:"currentColor",borderRadius:"100%","&:nth-child(1)":{animationDelay:"-300ms"},"&:nth-child(2)":{animationDelay:"-150ms"},"&:nth-child(3)":{animationDelay:0},variants:{size:{sm:{size:"4px",mx:"2px"},md:{size:"6px",mx:"2px"},lg:{size:"8px",mx:"3px"}}}}),z=({css:t={},message:r="Loading",size:a="md"})=>e.createElement(E,{css:{justifyContent:"center",...t},role:"alert"},e.createElement(o.Root,null,r),e.createElement(S,{size:a}),e.createElement(S,{size:a}),e.createElement(S,{size:a})),j=(e,t)=>({boxShadow:"inset 0 0 0 2px",color:e,backgroundColor:"white","&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:t,backgroundColor:"white"},"&:active":{color:e},"&[disabled]":{backgroundColor:"white",color:t}}),O=(e,t)=>({backgroundColor:e,color:"white","&:not([disabled]):hover, &:not([disabled]):focus":{backgroundColor:t},"&:active":{backgroundColor:e},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal600"}}),R=x("button",{background:"unset",border:"none",borderRadius:"$0",cursor:"pointer",display:"flex",justifyContent:"center",alignItems:"center",fontFamily:"$sans",fontSize:"$md",fontWeight:500,height:"$2",letterSpacing:"0.02em",lineHeight:1.4,transition:"all 125ms ease-out",textDecoration:"none",px:"$4",py:"$2",whiteSpace:"nowrap",width:"max-content","&[disabled]":{opacity:.35,cursor:"not-allowed"},"&.isLoading":{cursor:"not-allowed",opacity:.5},"&:not(.isLoading) span":{opacity:0,transition:"opacity 100ms ease-out"},"&.isLoading span":{opacity:1},variants:{theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}},appearance:{solid:{},outline:{}}},compoundVariants:[{theme:"primary",appearance:"solid",css:O("$primary500","$primary900")},{theme:"secondary",appearance:"solid",css:O("$secondary500","$secondary700")},{theme:"tertiary",appearance:"solid",css:O("$tertiary500","$tertiary700")},{theme:"success",appearance:"solid",css:O("$success","$successDark")},{theme:"warning",appearance:"solid",css:O("$warning","$warningDark")},{theme:"danger",appearance:"solid",css:O("$danger","$dangerDark")},{theme:"primary",appearance:"outline",css:j("$primary500","$primary900")},{theme:"secondary",appearance:"outline",css:j("$secondary500","$secondary900")},{theme:"tertiary",appearance:"outline",css:j("$tertiary500","$tertiary700")}]}),N=({theme:t="primary",appearance:r="solid",isLoading:o=!1,type:a="button",children:n,onClick:i,...s})=>e.createElement(R,Object.assign({className:o?"isLoading":"",theme:t,appearance:r,onClick:()=>{return e=i,void(o||e());var e},type:a},s),o?e.createElement(z,null):n);N.displayName="Button";const _=x(a.Root,{appearance:"none",backgroundColor:"transparent",border:"none",borderRadius:"$0",boxShadow:"inset 0 0 0 2px $colors$secondary300",color:"white",cursor:"pointer",height:"$0",width:"$0",padding:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 100ms ease-out",'&[data-state="unchecked"]:focus, &[data-state="unchecked"]:hover':{backgroundColor:"$tonal300",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},'&[data-state="checked"]':{backgroundColor:"$secondary300"},'&[data-state="checked"]:hover, &[data-state="unchecked"]:focus':{backgroundColor:"$secondary700",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},"&:focus-within":{outline:"none"}}),L=t=>e.createElement(_,Object.assign({},t),e.createElement(a.Indicator,{as:n.CheckIcon}));L.displayName="Checkbox";const I=x("form",{}),F=({children:t,defaultValues:r={},onSubmit:o,validationMode:a="onBlur",...n})=>{const{errors:s,handleSubmit:l,register:c}=i.useForm({defaultValues:r,mode:a});return e.createElement(I,Object.assign({},n,{onSubmit:l(o),"aria-label":"form"}),e.Children.map(t,(t=>{const{validation:r,...o}=t.props;if(!o.name)return t;const a=s[o.name];return e.createElement(t.type,{...{...t.props,error:a?a.message:void 0,register:r?c(r):c,key:name,required:!!r&&!!r.required}})})))};F.displayName="Form";const W=x("div",{display:"grid"});W.displayName="Grid";const B=x("h1",{color:"$tonal-900",fontFamily:"$sans",fontWeight:"700",margin:0,lineHeight:"1.4",variants:{size:{sm:{fontSize:"$lg",letterSpacing:"0.01em"},md:{fontSize:"$xl",letterSpacing:"0.02em"},lg:{fontSize:"$xxl",letterSpacing:"0.02em"}}}}),H=({as:t="h2",size:r="md",...o})=>e.createElement(B,Object.assign({as:t,size:r},o));H.displayName="Heading";const P=x("svg",{color:"currentcolor",display:"inline-block",verticalAlign:"middle",variants:{size:{sm:{height:16,width:16},md:{height:24,width:24},lg:{height:32,width:32}}}}),q=({is:t,size:r="sm",...o})=>e.createElement(P,Object.assign({size:r,viewBox:"0 0 24 24","aria-hidden":"true"},o,{as:t}));function T(){return(T=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var M=e.createElement("path",{d:"M20 6L9 17l-5-5"});function D(){return(D=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var A=e.createElement("path",{d:"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22"});function V(t){return e.createElement("svg",D({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye_svg__feather eye_svg__feather-eye-off"},t),A)}function G(){return(G=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var U=e.createElement("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),K=e.createElement("circle",{cx:12,cy:12,r:3});function J(t){return e.createElement("svg",G({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye-off_svg__feather eye-off_svg__feather-eye"},t),U,K)}function Q(){return(Q=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var X=e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"});const Y=x("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}});Y.displayName="Image";const Z=x("input",{appearance:"none",border:"1px solid $tonal500",borderRadius:"$0",boxShadow:"none",boxSizing:"border-box",color:"$tonal900",cursor:"text",display:"block",fontFamily:"$sans",fontSize:"$md",height:"$2",width:"100%",p:"$3",transition:"all 100ms ease-out","&:focus":{borderColor:"$primary900",boxShadow:"inset 0 0 0 1px $colors$primary900",outline:"none"},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal700",cursor:"not-allowed"},variants:{state:{error:{border:"1px solid $danger"}}}}),ee=e.forwardRef((({type:t="text",...r},o)=>"number"===t?e.createElement(Z,Object.assign({type:"text",inputMode:"numeric",pattern:"[0-9]*",ref:o},r)):e.createElement(Z,Object.assign({type:t},r,{ref:o}))));ee.displayName="Input";const te=x("label",{color:"$secondary300",display:"block",fontFamily:"$sans",fontWeight:500,letterSpacing:"0.02em",lineHeight:"1.4",variants:{size:{sm:{fontSize:"$sm"},md:{fontSize:"$md"}}}}),re=({size:t="md",children:r,...o})=>e.createElement(te,Object.assign({size:t},o),r);re.displayName="Label";const oe=x("p",{color:"$tonal900",fontFamily:"$sans",fontWeight:400,margin:0,maxWidth:"60ch",variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),ae=({as:t="p",size:r="md",...o})=>e.createElement(oe,Object.assign({as:t,size:r},o));ae.displayName="Text";const ne=x(ae,{color:"$danger"}),ie=x("span",{color:"$danger"}),se=()=>e.createElement(ie,null,"*"),le=({css:t,label:r,name:o,error:a,required:n=!1,register:i=null,...s})=>e.createElement(k,{css:t},e.createElement(re,{css:{mb:"$1"},htmlFor:o},r,n&&e.createElement(se,null)),e.createElement(ee,Object.assign({css:{mb:"$1"},id:o,name:o,ref:i},a&&{state:"error"},s)),a&&e.createElement(ne,null,a));le.displayName="InputField";const ce=x("a",{color:"$primary500",fontFamily:"$sans",textDecoration:"none",cursor:"pointer","&:visited":{color:"$primary500"},"&:focus, &:hover":{color:"$primary900",textDecoration:"underline"},"&:active":{color:"$primary500"},variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),de=e.forwardRef((({size:t="md",...r},o)=>e.createElement(ce,Object.assign({size:t},r,{ref:o}))));de.displayName="Link";const pe=({css:t={},error:r="",label:o="Password",name:a="password",hidePasswordText:n="Hide password",showPasswordText:i="Show password",prompt:s,required:l=!1,register:c,...d})=>{const[p,m]=e.useState(!1);return e.createElement(k,{css:{position:"relative",...t}},e.createElement(E,{css:{justifyContent:"space-between",alignItems:"center",mb:"$1"}},e.createElement(re,{htmlFor:a},`${o} ${l?"*":""}`),s&&e.createElement(de,{href:s.link,size:"sm"},s.label)),e.createElement(ee,Object.assign({type:p?"text":"password",css:{mb:"$1",pr:"$sizes$2"},autoComplete:"current-password",name:a,id:a,required:l,ref:c},d)),e.createElement(me,{"aria-label":p?n:i,onClick:()=>m((e=>!e)),onMouseDown:e=>e.preventDefault(),type:"button"},e.createElement(q,{css:{color:"$tonal700"},is:p?V:J})),r&&e.createElement(ne,null,r))};pe.displayName="PasswordField";const me=x("button",{border:"none",padding:0,background:"none",cursor:"pointer",position:"absolute",bottom:0,right:0,size:"$2"}),he=e=>({"&::after":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"white",borderWidth:8,ml:-8,...e},"&::before":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"$tonal400",borderWidth:9,ml:-9,...e}}),ue=x("span",{position:"relative"}),ge=x("div",{boxShadow:"$0",borderRadius:"$1",backgroundColor:"white",border:"1px solid $tonal400",bottom:"calc(100%  + $3)",listStyleType:"none",minWidth:140,maxWidth:354,p:"$3",position:"absolute",transition:"all 150ms ease-in-out",width:"max-content",opacity:0,visibility:"hidden",variants:{align:{left:{...he({left:40}),left:0,transformOrigin:"60px bottom",transform:"translate(-20px, $2) scale(0.9)"},center:{...he({left:"50%"}),transformOrigin:"center bottom",transform:"translate(-50%, $2) scale(0.9)"},right:{...he({right:31}),right:0,transformOrigin:"calc(100% - 51px) bottom",transform:"translate(0, $2) scale(0.9)"}},visibility:{true:{opacity:1,visibility:"visible"}}}}),be=({id:t,children:r,content:o,align:a="center",defaultOpen:n=!1,...i})=>{const s=e.useRef(null),[l,c]=e.useState(n),d=`popover-trigger-${t||Math.random().toString(36).substr(2,9)}`,p=()=>{c(!l)},m=e=>{void 0===e.keyCode||32!==e.keyCode&&13!==e.keyCode||c(!l)},h=e.forwardRef(((t,r)=>e.createElement("span",Object.assign({id:d,"aria-expanded":l,role:"button",tabIndex:0,"aria-label":"popover trigger",onClick:p,onKeyPress:m,ref:r},t))));return e.createElement(ue,Object.assign({},i),e.createElement(h,{ref:s},r),e.createElement(ge,{role:"tooltip",align:a,"aria-labelledby":d,"aria-hidden":!l,visibility:l},o))};be.displayName="Popover";const ye=e=>({background:"$tonal300",color:e}),$e=e=>({border:"1px solid $tonal400",background:"white",color:e}),fe=x(s.Root,{borderRadius:25,height:12,position:"relative",overflow:"hidden",width:"100%",variants:{appearance:{outline:{},solid:{}},theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}}},compoundVariants:[{theme:"primary",appearance:"solid",css:ye("$primary500")},{theme:"secondary",appearance:"solid",css:ye("$secondary500")},{theme:"tertiary",appearance:"solid",css:ye("$tertiary500")},{theme:"success",appearance:"solid",css:ye("$success")},{theme:"warning",appearance:"solid",css:ye("$warning")},{theme:"danger",appearance:"solid",css:ye("$danger")},{theme:"primary",appearance:"outline",css:$e("$primary500")},{theme:"secondary",appearance:"outline",css:$e("$secondary500")},{theme:"tertiary",appearance:"outline",css:$e("$tertiary500")},{theme:"success",appearance:"outline",css:$e("$success")},{theme:"warning",appearance:"outline",css:$e("$warning")},{theme:"danger",appearance:"outline",css:$e("$danger")}]}),xe=x(s.Indicator,{boxSizing:"border-box",position:"absolute",backgroundColor:"currentcolor",height:"100%"}),we=({value:t,appearance:r="outline",theme:o="primary",...a})=>e.createElement(fe,Object.assign({appearance:r,theme:o},a),e.createElement(xe,{style:{width:`${t}%`}}));we.displayName="ProgressBar";const ve=x(l.Item,{appearance:"none",backgroundColor:"transparent",padding:0,borderRadius:"50%",borderColor:"$secondary300",borderWidth:2,borderStyle:"solid",width:"$0",height:"$0",display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle","&:focus":{outline:"none"},":checked + &":{backgroundColor:"$secondary300"},"[disabled] + &":{backgroundColor:"$tonal600",border:"2px solid $tonal600"}}),ke=x(l.Indicator,{width:8,height:8,borderRadius:"50%",backgroundColor:"white"}),Ce=t=>e.createElement(ve,Object.assign({},t),e.createElement(ke,null));Ce.displayName="RadioButton";const Ee=x(l.Root,{}),Se=t=>e.createElement(Ee,Object.assign({},t));Se.displayName="RadioButtonGroup";const ze=x("select",{appearance:"none",backgroundColor:"white",backgroundImage:`url(data:image/svg+xml;charset=US-ASCII,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4"><path fill="#1066b2" d="M287 69a18 18 0 00-13-5H18c-5 0-9 2-12 5a18 18 0 00-6 13c0 5 2 10 5 13l128 128c4 4 8 5 13 5s9-1 13-5L287 95c4-3 5-8 5-13s-2-9-5-13z"/></svg>')})`,backgroundPosition:"right 16px top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"0.65em auto, 100%",borderRadius:"$0",border:"1px solid $tonal500",display:"block",fontFamily:"$sans",fontSize:"$md",fontWeight:400,height:"$2",letterSpacing:"0.01em",lineHeight:"1.4",px:"$3",py:"$2",transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{boxShadow:"inset 0 0 0 1px $colors$primary900",borderColor:"$primary900",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{opacity:"0.7",backgroundColor:"$tonal300",cursor:"not-allowed"}}),je=({options:t,defaultOption:r,...o})=>e.createElement(ze,Object.assign({},o),r&&e.createElement("option",null," ",r),t&&t.map((t=>e.createElement("option",{key:t.value,value:t.value,disabled:t.disabled},t.label))));je.displayName="Select";const Oe=x("textarea",{appearance:"none",borderRadius:"$0",border:"1px solid $tonal500",boxShadow:"none",fontFamily:"$sans",fontSize:"$md",fontWeight:400,letterSpacing:"0.01em",lineHeight:1.4,minHeight:100,resize:"vertical",width:"100%",color:"$tonal900",py:"$3",px:"$2",transition:"all 75ms ease-out","&:focus":{boxShadow:"inset 0 0 0 1px $color$primary900",borderColor:"$primary900",outline:"none"},"&[disabled]":{opacity:.7,backgroundColor:"$tonal300"}});Oe.displayName="Textarea";const Re=x(m.default,{}),Ne=({externalId:t,ratio:r=9/16,...o})=>e.createElement(k,{css:{position:"relative",paddingTop:100*r+"%",overflow:"hidden",height:0}},e.createElement(Re,Object.assign({role:"figure",url:`https://player.vimeo.com/video/${t}`},o,{height:"100%",width:"100%",css:{position:"absolute",top:0,left:0}})));Ne.displayName="Video",exports.Box=k,exports.Button=N,exports.Check=function(t){return e.createElement("svg",T({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:"check_svg__feather check_svg__feather-check"},t),M)},exports.Checkbox=L,exports.Flex=E,exports.Form=F,exports.Grid=W,exports.Heading=H,exports.Home=function(t){return e.createElement("svg",Q({className:"home_svg__w-6 home_svg__h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},t),X)},exports.Icon=q,exports.Image=Y,exports.Input=ee,exports.InputField=le,exports.Label=re,exports.Link=de,exports.Loader=z,exports.PasswordField=pe,exports.Popover=be,exports.ProgressBar=we,exports.RadioButton=Ce,exports.RadioButtonGroup=Se,exports.Select=je,exports.Text=ae,exports.Textarea=Oe,exports.ValidationError=ne,exports.Video=Ne,exports.conditions=u,exports.css=b,exports.getCssString=y,exports.globalCss=$,exports.keyframes=f,exports.styled=x,exports.theme=w,exports.utils=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@atom-learning/theme"),t=require("@stitches/react"),r=require("react"),o=require("@radix-ui/react-visually-hidden"),a=require("@radix-ui/react-checkbox"),n=require("@radix-ui/react-icons"),i=require("react-hook-form"),s=require("@radix-ui/react-progress"),l=require("@radix-ui/react-radio-group"),c=require("react-player/vimeo");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e),m=d(c);const h={p:()=>e=>({padding:e}),pt:()=>e=>({paddingTop:e}),pr:()=>e=>({paddingRight:e}),pb:()=>e=>({paddingBottom:e}),pl:()=>e=>({paddingLeft:e}),px:()=>e=>({paddingLeft:e,paddingRight:e}),py:()=>e=>({paddingTop:e,paddingBottom:e}),m:()=>e=>({margin:e}),mt:()=>e=>({marginTop:e}),mr:()=>e=>({marginRight:e}),mb:()=>e=>({marginBottom:e}),ml:()=>e=>({marginLeft:e}),mx:()=>e=>({marginLeft:e,marginRight:e}),my:()=>e=>({marginTop:e,marginBottom:e}),bg:()=>e=>({background:e}),size:()=>e=>{if(Array.isArray(e)){const[t,r]=e;return{height:t,width:r}}return{height:e,width:e}}},g={sm:"@media (min-width: 550px)",md:"@media (min-width: 800px)",lg:"@media (min-width: 1100px)",xl:"@media (min-width: 1350px)",motion:"@media (prefers-reduced-motion)",hover:"@media (hover: hover)"},u=t.createCss({theme:p.default,utils:h,conditions:g}),{css:b,getCssString:y,global:$,keyframes:f,styled:x,theme:v}=u,w=x("div",{});w.displayName="Box";const k=x("div",{display:"flex"});k.displayName="Flex";const S=x("div",{animationName:`${f({"0%":{opacity:0},"30%":{opacity:1},"50%":{opacity:1},"80%":{opacity:0},"100%":{opacity:0}})}`,animationDuration:"1s",animationFillMode:"both",animationIterationCount:"infinite",animationTimingFunction:"linear",backgroundColor:"currentColor",borderRadius:"100%","&:nth-child(1)":{animationDelay:"-300ms"},"&:nth-child(2)":{animationDelay:"-150ms"},"&:nth-child(3)":{animationDelay:0},variants:{size:{sm:{size:"4px",mx:"2px"},md:{size:"6px",mx:"2px"},lg:{size:"8px",mx:"3px"}}}}),C=({css:e={},message:t="Loading",size:a="md"})=>r.createElement(k,{css:{justifyContent:"center",...e},role:"alert"},r.createElement(o.Root,null,t),r.createElement(S,{size:a}),r.createElement(S,{size:a}),r.createElement(S,{size:a})),E=(e,t)=>({boxShadow:"inset 0 0 0 2px",color:e,backgroundColor:"white","&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:t,backgroundColor:"white"},"&:active":{color:e},"&[disabled]":{backgroundColor:"white",color:t}}),z=(e,t)=>({backgroundColor:e,color:"white","&:not([disabled]):hover, &:not([disabled]):focus":{backgroundColor:t},"&:active":{backgroundColor:e},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal600"}}),j=x("button",{background:"unset",border:"none",borderRadius:"$0",cursor:"pointer",display:"flex",justifyContent:"center",alignItems:"center",fontFamily:"$sans",fontSize:"$md",fontWeight:500,height:"$2",letterSpacing:"0.02em",lineHeight:1.4,transition:"all 125ms ease-out",textDecoration:"none",px:"$4",py:"$2",whiteSpace:"nowrap",width:"max-content","&[disabled]":{opacity:.35,cursor:"not-allowed"},variants:{theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}},appearance:{solid:{},outline:{}},isLoading:{true:{cursor:"not-allowed",opacity:.5}}},compoundVariants:[{theme:"primary",appearance:"solid",css:z("$primary500","$primary900")},{theme:"secondary",appearance:"solid",css:z("$secondary500","$secondary700")},{theme:"tertiary",appearance:"solid",css:z("$tertiary500","$tertiary700")},{theme:"success",appearance:"solid",css:z("$success","$successDark")},{theme:"warning",appearance:"solid",css:z("$warning","$warningDark")},{theme:"danger",appearance:"solid",css:z("$danger","$dangerDark")},{theme:"primary",appearance:"outline",css:E("$primary500","$primary900")},{theme:"secondary",appearance:"outline",css:E("$secondary500","$secondary900")},{theme:"tertiary",appearance:"outline",css:E("$tertiary500","$tertiary700")}]}),O=({theme:e="primary",appearance:t="solid",isLoading:o,type:a="button",children:n,onClick:i,...s})=>r.createElement(j,Object.assign({theme:e,appearance:t,isLoading:o||!1,onClick:i?()=>{return e=i,void(o||e());var e}:void 0,type:a},s),"boolean"==typeof o?r.createElement(r.Fragment,null,r.createElement(C,{css:{opacity:o?1:0,position:"absolute",transition:"opacity 150ms ease-out"}}),r.createElement(w,{as:"span",css:o?{opacity:0,transition:"opacity 150ms ease-out"}:{}},n)):n);O.displayName="Button";const R=x(a.Root,{appearance:"none",backgroundColor:"transparent",border:"none",borderRadius:"$0",boxShadow:"inset 0 0 0 2px $colors$secondary300",color:"white",cursor:"pointer",height:"$0",width:"$0",padding:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 100ms ease-out",'&[data-state="unchecked"]:focus, &[data-state="unchecked"]:hover':{backgroundColor:"$tonal300",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},'&[data-state="checked"]':{backgroundColor:"$secondary300"},'&[data-state="checked"]:hover, &[data-state="unchecked"]:focus':{backgroundColor:"$secondary700",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},"&:focus-within":{outline:"none"}}),N=e=>r.createElement(R,Object.assign({},e),r.createElement(a.Indicator,{as:n.CheckIcon}));N.displayName="Checkbox";const _=x("form",{}),I=({children:e,defaultValues:t={},onSubmit:o,validationMode:a="onBlur",...n})=>{const{errors:s,handleSubmit:l,register:c}=i.useForm({defaultValues:t,mode:a});return r.createElement(_,Object.assign({"aria-label":"form"},n,{onSubmit:l(o)}),r.Children.map(e,(e=>{const{validation:t,...o}=e.props;if(!o.name)return e;const a=s[o.name];return r.createElement(e.type,{...o,error:a?a.message:void 0,register:t?c(t):c,key:o.name,required:!!t&&!!t.required})})))};I.displayName="Form";const L=x("div",{display:"grid"});L.displayName="Grid";const F=x("h1",{color:"$tonal-900",fontFamily:"$sans",fontWeight:"700",margin:0,lineHeight:"1.4",variants:{size:{sm:{fontSize:"$lg",letterSpacing:"0.01em"},md:{fontSize:"$xl",letterSpacing:"0.02em"},lg:{fontSize:"$xxl",letterSpacing:"0.02em"}}}}),H=({as:e="h2",size:t="md",...o})=>r.createElement(F,Object.assign({as:e,size:t},o));H.displayName="Heading";const W=x("svg",{color:"currentcolor",display:"inline-block",verticalAlign:"middle",variants:{size:{sm:{height:16,width:16},md:{height:24,width:24},lg:{height:32,width:32}}}}),q=({is:e,size:t="sm",...o})=>r.createElement(W,Object.assign({size:t,viewBox:"0 0 24 24","aria-hidden":"true"},o,{as:e}));function B(){return(B=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var P=r.createElement("path",{d:"M20 6L9 17l-5-5"});function T(){return(T=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var M=r.createElement("path",{d:"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22"});function D(e){return r.createElement("svg",T({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye_svg__feather eye_svg__feather-eye-off"},e),M)}function A(){return(A=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var V=r.createElement("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),G=r.createElement("circle",{cx:12,cy:12,r:3});function U(e){return r.createElement("svg",A({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye-off_svg__feather eye-off_svg__feather-eye"},e),V,G)}function K(){return(K=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var J=r.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"});const Q=x("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}});Q.displayName="Image";const X=x("input",{appearance:"none",border:"1px solid $tonal500",borderRadius:"$0",boxShadow:"none",boxSizing:"border-box",color:"$tonal900",cursor:"text",display:"block",fontFamily:"$sans",fontSize:"$md",height:"$2",width:"100%",p:"$3",transition:"all 100ms ease-out","&:focus":{borderColor:"$primary900",boxShadow:"inset 0 0 0 1px $colors$primary900",outline:"none"},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal700",cursor:"not-allowed"},variants:{state:{error:{border:"1px solid $danger"}}}}),Y=r.forwardRef((({type:e="text",...t},o)=>"number"===e?r.createElement(X,Object.assign({type:"text",inputMode:"numeric",pattern:"[0-9]*",ref:o},t)):r.createElement(X,Object.assign({type:e},t,{ref:o}))));Y.displayName="Input";const Z=x("label",{color:"$secondary300",display:"block",fontFamily:"$sans",fontWeight:500,letterSpacing:"0.02em",lineHeight:"1.4",margin:0,variants:{size:{sm:{fontSize:"$sm"},md:{fontSize:"$md"}}}}),ee=x("span",{color:"$danger",ml:"$1"}),te=({size:e="md",children:t,required:o,...a})=>r.createElement(Z,Object.assign({size:e},a),t,o&&r.createElement(ee,null,"*"));te.displayName="Label";const re=x("p",{color:"$tonal900",fontFamily:"$sans",fontWeight:400,margin:0,maxWidth:"60ch",variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),oe=({as:e="p",size:t="md",...o})=>r.createElement(re,Object.assign({as:e,size:t},o));oe.displayName="Text";const ae=x(oe,{color:"$danger"}),ne=({css:e,label:t,name:o,error:a,required:n=!1,register:i=null,...s})=>r.createElement(w,{css:e},r.createElement(te,{css:{mb:"$2"},htmlFor:o,required:n},t),r.createElement(Y,Object.assign({id:o,name:o,ref:i},a&&{state:"error"},s)),a&&r.createElement(ae,{css:{mt:"$1"}},a));ne.displayName="InputField";const ie=x("a",{color:"$primary500",fontFamily:"$sans",textDecoration:"none",cursor:"pointer","&:visited":{color:"$primary500"},"&:focus, &:hover":{color:"$primary900",textDecoration:"underline"},"&:active":{color:"$primary500"},variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),se=r.forwardRef((({size:e="md",...t},o)=>r.createElement(ie,Object.assign({size:e},t,{ref:o}))));se.displayName="Link";const le=x("li",{}),ce=x("ul",{fontFamily:"$sans",pl:"$2",[`& ${le}`]:{pl:"$1","&::marker":{content:'"•"',fontWeight:"bold"}},variants:{theme:{primary:{[`& ${le}`]:{"&::marker":{color:"$primary500"}}},secondary:{[`& ${le}`]:{"&::marker":{color:"$secondary500"}}}},size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),de=({theme:e="primary",size:t="md",...o})=>r.createElement(ce,Object.assign({theme:e,size:t},o));de.Item=le;const pe=({css:e={},error:t="",label:o="Password",name:a="password",hidePasswordText:n="Hide password",showPasswordText:i="Show password",prompt:s,required:l=!1,register:c,...d})=>{const[p,m]=r.useState(!1);return r.createElement(w,{css:{position:"relative",...e}},r.createElement(k,{css:{justifyContent:"space-between",alignItems:"center",mb:"$1"}},r.createElement(te,{htmlFor:a,css:{mb:"$2"},required:l},o),s&&r.createElement(se,{href:s.link,size:"sm"},s.label)),r.createElement(Y,Object.assign({type:p?"text":"password",css:{pr:"$sizes$2"},autoComplete:"current-password",name:a,id:a,required:l,ref:c},d)),r.createElement(me,{"aria-label":p?n:i,onClick:()=>m((e=>!e)),onMouseDown:e=>e.preventDefault(),type:"button"},r.createElement(q,{css:{color:"$tonal700"},is:p?D:U})),t&&r.createElement(ae,{css:{mt:"$1"}},t))};pe.displayName="PasswordField";const me=x("button",{border:"none",padding:0,background:"none",cursor:"pointer",position:"absolute",bottom:0,right:0,size:"$2"}),he=e=>({"&::after":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"white",borderWidth:8,ml:-8,...e},"&::before":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"$tonal400",borderWidth:9,ml:-9,...e}}),ge=x("span",{position:"relative"}),ue=x("div",{boxShadow:"$0",borderRadius:"$1",backgroundColor:"white",border:"1px solid $tonal400",bottom:"calc(100%  + $3)",listStyleType:"none",minWidth:140,maxWidth:354,p:"$3",position:"absolute",transition:"all 150ms ease-in-out",width:"max-content",opacity:0,visibility:"hidden",variants:{align:{left:{...he({left:40}),left:0,transformOrigin:"60px bottom",transform:"translate(-20px, $2) scale(0.9)"},center:{...he({left:"50%"}),transformOrigin:"center bottom",transform:"translate(-50%, $2) scale(0.9)"},right:{...he({right:31}),right:0,transformOrigin:"calc(100% - 51px) bottom",transform:"translate(0, $2) scale(0.9)"}},visibility:{true:{opacity:1,visibility:"visible"}}}}),be=({id:e,children:t,content:o,align:a="center",defaultOpen:n=!1,...i})=>{const s=r.useRef(null),[l,c]=r.useState(n),d=`popover-trigger-${e||Math.random().toString(36).substr(2,9)}`,p=()=>{c(!l)},m=e=>{void 0===e.keyCode||32!==e.keyCode&&13!==e.keyCode||c(!l)},h=r.forwardRef(((e,t)=>r.createElement("span",Object.assign({id:d,"aria-expanded":l,role:"button",tabIndex:0,"aria-label":"popover trigger",onClick:p,onKeyPress:m,ref:t},e))));return r.createElement(ge,Object.assign({},i),r.createElement(h,{ref:s},t),r.createElement(ue,{role:"tooltip",align:a,"aria-labelledby":d,"aria-hidden":!l,visibility:l},o))};be.displayName="Popover";const ye=e=>({background:"$tonal300",color:e}),$e=e=>({border:"1px solid $tonal400",background:"white",color:e}),fe=x(s.Root,{borderRadius:25,height:12,position:"relative",overflow:"hidden",width:"100%",variants:{appearance:{outline:{},solid:{}},theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}}},compoundVariants:[{theme:"primary",appearance:"solid",css:ye("$primary500")},{theme:"secondary",appearance:"solid",css:ye("$secondary500")},{theme:"tertiary",appearance:"solid",css:ye("$tertiary500")},{theme:"success",appearance:"solid",css:ye("$success")},{theme:"warning",appearance:"solid",css:ye("$warning")},{theme:"danger",appearance:"solid",css:ye("$danger")},{theme:"primary",appearance:"outline",css:$e("$primary500")},{theme:"secondary",appearance:"outline",css:$e("$secondary500")},{theme:"tertiary",appearance:"outline",css:$e("$tertiary500")},{theme:"success",appearance:"outline",css:$e("$success")},{theme:"warning",appearance:"outline",css:$e("$warning")},{theme:"danger",appearance:"outline",css:$e("$danger")}]}),xe=x(s.Indicator,{boxSizing:"border-box",position:"absolute",backgroundColor:"currentcolor",height:"100%"}),ve=({value:e,appearance:t="outline",theme:o="primary",...a})=>r.createElement(fe,Object.assign({appearance:t,theme:o},a),r.createElement(xe,{style:{width:`${e}%`}}));ve.displayName="ProgressBar";const we=x(l.Item,{appearance:"none",backgroundColor:"transparent",padding:0,borderRadius:"50%",borderColor:"$secondary300",borderWidth:2,borderStyle:"solid",width:"$0",height:"$0",display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle","&:focus":{outline:"none"},":checked + &":{backgroundColor:"$secondary300"},"[disabled] + &":{backgroundColor:"$tonal600",border:"2px solid $tonal600"}}),ke=x(l.Indicator,{width:8,height:8,borderRadius:"50%",backgroundColor:"white"}),Se=e=>r.createElement(we,Object.assign({},e),r.createElement(ke,null));Se.displayName="RadioButton";const Ce=x(l.Root,{}),Ee=e=>r.createElement(Ce,Object.assign({},e));Ee.displayName="RadioButtonGroup";const ze=x("select",{appearance:"none",backgroundColor:"white",backgroundImage:`url(data:image/svg+xml;charset=US-ASCII,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4"><path fill="#1066b2" d="M287 69a18 18 0 00-13-5H18c-5 0-9 2-12 5a18 18 0 00-6 13c0 5 2 10 5 13l128 128c4 4 8 5 13 5s9-1 13-5L287 95c4-3 5-8 5-13s-2-9-5-13z"/></svg>')})`,backgroundPosition:"right 16px top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"0.65em auto, 100%",borderRadius:"$0",border:"1px solid $tonal500",display:"block",fontFamily:"$sans",fontSize:"$md",fontWeight:400,height:"$2",letterSpacing:"0.01em",lineHeight:"1.4",px:"$3",py:"$2",transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{boxShadow:"inset 0 0 0 1px $colors$primary900",borderColor:"$primary900",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{opacity:"0.7",backgroundColor:"$tonal300",cursor:"not-allowed"}}),je=({options:e,defaultOption:t,...o})=>r.createElement(ze,Object.assign({},o),t&&r.createElement("option",null," ",t),e&&e.map((e=>r.createElement("option",{key:e.value,value:e.value,disabled:e.disabled},e.label))));je.displayName="Select";const Oe=x("textarea",{appearance:"none",borderRadius:"$0",border:"1px solid $tonal500",boxShadow:"none",fontFamily:"$sans",fontSize:"$md",fontWeight:400,letterSpacing:"0.01em",lineHeight:1.4,minHeight:100,resize:"vertical",width:"100%",color:"$tonal900",py:"$3",px:"$2",transition:"all 75ms ease-out","&:focus":{boxShadow:"inset 0 0 0 1px $color$primary900",borderColor:"$primary900",outline:"none"},"&[disabled]":{opacity:.7,backgroundColor:"$tonal300"}});Oe.displayName="Textarea";const Re=x(m.default,{}),Ne=({externalId:e,ratio:t=9/16,...o})=>r.createElement(w,{css:{position:"relative",paddingTop:100*t+"%",overflow:"hidden",height:0,width:"100%"}},r.createElement(Re,Object.assign({role:"figure",url:`https://player.vimeo.com/video/${e}`},o,{height:"100%",width:"100%",css:{position:"absolute",top:0,left:0}})));Ne.displayName="Video",exports.Box=w,exports.Button=O,exports.Check=function(e){return r.createElement("svg",B({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:"check_svg__feather check_svg__feather-check"},e),P)},exports.Checkbox=N,exports.Flex=k,exports.Form=I,exports.Grid=L,exports.Heading=H,exports.Home=function(e){return r.createElement("svg",K({className:"home_svg__w-6 home_svg__h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},e),J)},exports.Icon=q,exports.Image=Q,exports.Input=Y,exports.InputField=ne,exports.Label=te,exports.Link=se,exports.List=de,exports.Loader=C,exports.PasswordField=pe,exports.Popover=be,exports.ProgressBar=ve,exports.RadioButton=Se,exports.RadioButtonGroup=Ee,exports.Select=je,exports.Text=oe,exports.Textarea=Oe,exports.ValidationError=ae,exports.Video=Ne,exports.conditions=g,exports.css=b,exports.getCssString=y,exports.globalCss=$,exports.keyframes=f,exports.styled=x,exports.theme=v,exports.utils=h;

dist/index.modern.js

@@ -1,1 +0,1 @@
-import{createElement as e,Children as o,forwardRef as t,useState as a,useRef as r}from"react";import i from"@atom-learning/theme";import{createCss as n}from"@stitches/react";import{Root as s}from"@radix-ui/react-visually-hidden";import{Root as l,Indicator as d}from"@radix-ui/react-checkbox";import{CheckIcon as c}from"@radix-ui/react-icons";import{useForm as p}from"react-hook-form";import{Root as m,Indicator as h}from"@radix-ui/react-progress";import{Item as g,Indicator as u,Root as b}from"@radix-ui/react-radio-group";import y from"react-player/vimeo";const $={p:()=>e=>({padding:e}),pt:()=>e=>({paddingTop:e}),pr:()=>e=>({paddingRight:e}),pb:()=>e=>({paddingBottom:e}),pl:()=>e=>({paddingLeft:e}),px:()=>e=>({paddingLeft:e,paddingRight:e}),py:()=>e=>({paddingTop:e,paddingBottom:e}),m:()=>e=>({margin:e}),mt:()=>e=>({marginTop:e}),mr:()=>e=>({marginRight:e}),mb:()=>e=>({marginBottom:e}),ml:()=>e=>({marginLeft:e}),mx:()=>e=>({marginLeft:e,marginRight:e}),my:()=>e=>({marginTop:e,marginBottom:e}),bg:()=>e=>({background:e}),size:()=>e=>{if(Array.isArray(e)){const[o,t]=e;return{height:o,width:t}}return{height:e,width:e}}},f={sm:"@media (min-width: 550px)",md:"@media (min-width: 800px)",lg:"@media (min-width: 1100px)",xl:"@media (min-width: 1350px)",motion:"@media (prefers-reduced-motion)",hover:"@media (hover: hover)"},w=n({theme:i,utils:$,conditions:f}),{css:v,getCssString:x,global:k,keyframes:S,styled:C,theme:z}=w,j=C("div",{}),O=o=>e(j,Object.assign({},o));O.displayName="Box";const N=C("div",{display:"flex"}),_=o=>e(N,Object.assign({},o));_.displayName="Flex";const L=C("div",{animationName:`${S({"0%":{opacity:0},"30%":{opacity:1},"50%":{opacity:1},"80%":{opacity:0},"100%":{opacity:0}})}`,animationDuration:"1s",animationFillMode:"both",animationIterationCount:"infinite",animationTimingFunction:"linear",backgroundColor:"currentColor",borderRadius:"100%","&:nth-child(1)":{animationDelay:"-300ms"},"&:nth-child(2)":{animationDelay:"-150ms"},"&:nth-child(3)":{animationDelay:0},variants:{size:{sm:{size:"4px",mx:"2px"},md:{size:"6px",mx:"2px"},lg:{size:"8px",mx:"3px"}}}}),R=({css:o={},message:t="Loading",size:a="md"})=>e(_,{css:{justifyContent:"center",...o},role:"alert"},e(s,null,t),e(L,{size:a}),e(L,{size:a}),e(L,{size:a})),W=(e,o)=>({boxShadow:"inset 0 0 0 2px",color:e,backgroundColor:"white","&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:o,backgroundColor:"white"},"&:active":{color:e},"&[disabled]":{backgroundColor:"white",color:o}}),F=(e,o)=>({backgroundColor:e,color:"white","&:not([disabled]):hover, &:not([disabled]):focus":{backgroundColor:o},"&:active":{backgroundColor:e},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal600"}}),H=C("button",{background:"unset",border:"none",borderRadius:"$0",cursor:"pointer",display:"flex",justifyContent:"center",alignItems:"center",fontFamily:"$sans",fontSize:"$md",fontWeight:500,height:"$2",letterSpacing:"0.02em",lineHeight:1.4,transition:"all 125ms ease-out",textDecoration:"none",px:"$4",py:"$2",whiteSpace:"nowrap",width:"max-content","&[disabled]":{opacity:.35,cursor:"not-allowed"},"&.isLoading":{cursor:"not-allowed",opacity:.5},"&:not(.isLoading) span":{opacity:0,transition:"opacity 100ms ease-out"},"&.isLoading span":{opacity:1},variants:{theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}},appearance:{solid:{},outline:{}}},compoundVariants:[{theme:"primary",appearance:"solid",css:F("$primary500","$primary900")},{theme:"secondary",appearance:"solid",css:F("$secondary500","$secondary700")},{theme:"tertiary",appearance:"solid",css:F("$tertiary500","$tertiary700")},{theme:"success",appearance:"solid",css:F("$success","$successDark")},{theme:"warning",appearance:"solid",css:F("$warning","$warningDark")},{theme:"danger",appearance:"solid",css:F("$danger","$dangerDark")},{theme:"primary",appearance:"outline",css:W("$primary500","$primary900")},{theme:"secondary",appearance:"outline",css:W("$secondary500","$secondary900")},{theme:"tertiary",appearance:"outline",css:W("$tertiary500","$tertiary700")}]}),I=({theme:o="primary",appearance:t="solid",isLoading:a=!1,type:r="button",children:i,onClick:n,...s})=>e(H,Object.assign({className:a?"isLoading":"",theme:o,appearance:t,onClick:()=>{return e=n,void(a||e());var e},type:r},s),a?e(R,null):i);I.displayName="Button";const D=C(l,{appearance:"none",backgroundColor:"transparent",border:"none",borderRadius:"$0",boxShadow:"inset 0 0 0 2px $colors$secondary300",color:"white",cursor:"pointer",height:"$0",width:"$0",padding:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 100ms ease-out",'&[data-state="unchecked"]:focus, &[data-state="unchecked"]:hover':{backgroundColor:"$tonal300",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},'&[data-state="checked"]':{backgroundColor:"$secondary300"},'&[data-state="checked"]:hover, &[data-state="unchecked"]:focus':{backgroundColor:"$secondary700",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},"&:focus-within":{outline:"none"}}),M=o=>e(D,Object.assign({},o),e(d,{as:c}));M.displayName="Checkbox";const T=C("form",{}),B=({children:t,defaultValues:a={},onSubmit:r,validationMode:i="onBlur",...n})=>{const{errors:s,handleSubmit:l,register:d}=p({defaultValues:a,mode:i});return e(T,Object.assign({},n,{onSubmit:l(r),"aria-label":"form"}),o.map(t,(o=>{const{validation:t,...a}=o.props;if(!a.name)return o;const r=s[a.name];return e(o.type,{...{...o.props,error:r?r.message:void 0,register:t?d(t):d,key:name,required:!!t&&!!t.required}})})))};B.displayName="Form";const P=C("div",{display:"grid"});P.displayName="Grid";const A=C("h1",{color:"$tonal-900",fontFamily:"$sans",fontWeight:"700",margin:0,lineHeight:"1.4",variants:{size:{sm:{fontSize:"$lg",letterSpacing:"0.01em"},md:{fontSize:"$xl",letterSpacing:"0.02em"},lg:{fontSize:"$xxl",letterSpacing:"0.02em"}}}}),q=({as:o="h2",size:t="md",...a})=>e(A,Object.assign({as:o,size:t},a));q.displayName="Heading";const V=C("svg",{color:"currentcolor",display:"inline-block",verticalAlign:"middle",variants:{size:{sm:{height:16,width:16},md:{height:24,width:24},lg:{height:32,width:32}}}}),E=({is:o,size:t="sm",...a})=>e(V,Object.assign({size:t,viewBox:"0 0 24 24","aria-hidden":"true"},a,{as:o}));function G(){return(G=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}var U=e("path",{d:"M20 6L9 17l-5-5"});function K(o){return e("svg",G({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:"check_svg__feather check_svg__feather-check"},o),U)}function J(){return(J=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}var Q=e("path",{d:"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22"});function X(o){return e("svg",J({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye_svg__feather eye_svg__feather-eye-off"},o),Q)}function Y(){return(Y=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}var Z=e("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),ee=e("circle",{cx:12,cy:12,r:3});function oe(o){return e("svg",Y({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye-off_svg__feather eye-off_svg__feather-eye"},o),Z,ee)}function te(){return(te=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}var ae=e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"});function re(o){return e("svg",te({className:"home_svg__w-6 home_svg__h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},o),ae)}const ie=C("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}});ie.displayName="Image";const ne=C("input",{appearance:"none",border:"1px solid $tonal500",borderRadius:"$0",boxShadow:"none",boxSizing:"border-box",color:"$tonal900",cursor:"text",display:"block",fontFamily:"$sans",fontSize:"$md",height:"$2",width:"100%",p:"$3",transition:"all 100ms ease-out","&:focus":{borderColor:"$primary900",boxShadow:"inset 0 0 0 1px $colors$primary900",outline:"none"},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal700",cursor:"not-allowed"},variants:{state:{error:{border:"1px solid $danger"}}}}),se=t((({type:o="text",...t},a)=>e(ne,"number"===o?Object.assign({type:"text",inputMode:"numeric",pattern:"[0-9]*",ref:a},t):Object.assign({type:o},t,{ref:a}))));se.displayName="Input";const le=C("label",{color:"$secondary300",display:"block",fontFamily:"$sans",fontWeight:500,letterSpacing:"0.02em",lineHeight:"1.4",variants:{size:{sm:{fontSize:"$sm"},md:{fontSize:"$md"}}}}),de=({size:o="md",children:t,...a})=>e(le,Object.assign({size:o},a),t);de.displayName="Label";const ce=C("p",{color:"$tonal900",fontFamily:"$sans",fontWeight:400,margin:0,maxWidth:"60ch",variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),pe=({as:o="p",size:t="md",...a})=>e(ce,Object.assign({as:o,size:t},a));pe.displayName="Text";const me=C(pe,{color:"$danger"}),he=C("span",{color:"$danger"}),ge=()=>e(he,null,"*"),ue=({css:o,label:t,name:a,error:r,required:i=!1,register:n=null,...s})=>e(O,{css:o},e(de,{css:{mb:"$1"},htmlFor:a},t,i&&e(ge,null)),e(se,Object.assign({css:{mb:"$1"},id:a,name:a,ref:n},r&&{state:"error"},s)),r&&e(me,null,r));ue.displayName="InputField";const be=C("a",{color:"$primary500",fontFamily:"$sans",textDecoration:"none",cursor:"pointer","&:visited":{color:"$primary500"},"&:focus, &:hover":{color:"$primary900",textDecoration:"underline"},"&:active":{color:"$primary500"},variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),ye=t((({size:o="md",...t},a)=>e(be,Object.assign({size:o},t,{ref:a}))));ye.displayName="Link";const $e=({css:o={},error:t="",label:r="Password",name:i="password",hidePasswordText:n="Hide password",showPasswordText:s="Show password",prompt:l,required:d=!1,register:c,...p})=>{const[m,h]=a(!1);return e(O,{css:{position:"relative",...o}},e(_,{css:{justifyContent:"space-between",alignItems:"center",mb:"$1"}},e(de,{htmlFor:i},`${r} ${d?"*":""}`),l&&e(ye,{href:l.link,size:"sm"},l.label)),e(se,Object.assign({type:m?"text":"password",css:{mb:"$1",pr:"$sizes$2"},autoComplete:"current-password",name:i,id:i,required:d,ref:c},p)),e(fe,{"aria-label":m?n:s,onClick:()=>h((e=>!e)),onMouseDown:e=>e.preventDefault(),type:"button"},e(E,{css:{color:"$tonal700"},is:m?X:oe})),t&&e(me,null,t))};$e.displayName="PasswordField";const fe=C("button",{border:"none",padding:0,background:"none",cursor:"pointer",position:"absolute",bottom:0,right:0,size:"$2"}),we=e=>({"&::after":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"white",borderWidth:8,ml:-8,...e},"&::before":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"$tonal400",borderWidth:9,ml:-9,...e}}),ve=C("span",{position:"relative"}),xe=C("div",{boxShadow:"$0",borderRadius:"$1",backgroundColor:"white",border:"1px solid $tonal400",bottom:"calc(100%  + $3)",listStyleType:"none",minWidth:140,maxWidth:354,p:"$3",position:"absolute",transition:"all 150ms ease-in-out",width:"max-content",opacity:0,visibility:"hidden",variants:{align:{left:{...we({left:40}),left:0,transformOrigin:"60px bottom",transform:"translate(-20px, $2) scale(0.9)"},center:{...we({left:"50%"}),transformOrigin:"center bottom",transform:"translate(-50%, $2) scale(0.9)"},right:{...we({right:31}),right:0,transformOrigin:"calc(100% - 51px) bottom",transform:"translate(0, $2) scale(0.9)"}},visibility:{true:{opacity:1,visibility:"visible"}}}}),ke=({id:o,children:i,content:n,align:s="center",defaultOpen:l=!1,...d})=>{const c=r(null),[p,m]=a(l),h=`popover-trigger-${o||Math.random().toString(36).substr(2,9)}`,g=()=>{m(!p)},u=e=>{void 0===e.keyCode||32!==e.keyCode&&13!==e.keyCode||m(!p)},b=t(((o,t)=>e("span",Object.assign({id:h,"aria-expanded":p,role:"button",tabIndex:0,"aria-label":"popover trigger",onClick:g,onKeyPress:u,ref:t},o))));return e(ve,Object.assign({},d),e(b,{ref:c},i),e(xe,{role:"tooltip",align:s,"aria-labelledby":h,"aria-hidden":!p,visibility:p},n))};ke.displayName="Popover";const Se=e=>({background:"$tonal300",color:e}),Ce=e=>({border:"1px solid $tonal400",background:"white",color:e}),ze=C(m,{borderRadius:25,height:12,position:"relative",overflow:"hidden",width:"100%",variants:{appearance:{outline:{},solid:{}},theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}}},compoundVariants:[{theme:"primary",appearance:"solid",css:Se("$primary500")},{theme:"secondary",appearance:"solid",css:Se("$secondary500")},{theme:"tertiary",appearance:"solid",css:Se("$tertiary500")},{theme:"success",appearance:"solid",css:Se("$success")},{theme:"warning",appearance:"solid",css:Se("$warning")},{theme:"danger",appearance:"solid",css:Se("$danger")},{theme:"primary",appearance:"outline",css:Ce("$primary500")},{theme:"secondary",appearance:"outline",css:Ce("$secondary500")},{theme:"tertiary",appearance:"outline",css:Ce("$tertiary500")},{theme:"success",appearance:"outline",css:Ce("$success")},{theme:"warning",appearance:"outline",css:Ce("$warning")},{theme:"danger",appearance:"outline",css:Ce("$danger")}]}),je=C(h,{boxSizing:"border-box",position:"absolute",backgroundColor:"currentcolor",height:"100%"}),Oe=({value:o,appearance:t="outline",theme:a="primary",...r})=>e(ze,Object.assign({appearance:t,theme:a},r),e(je,{style:{width:`${o}%`}}));Oe.displayName="ProgressBar";const Ne=C(g,{appearance:"none",backgroundColor:"transparent",padding:0,borderRadius:"50%",borderColor:"$secondary300",borderWidth:2,borderStyle:"solid",width:"$0",height:"$0",display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle","&:focus":{outline:"none"},":checked + &":{backgroundColor:"$secondary300"},"[disabled] + &":{backgroundColor:"$tonal600",border:"2px solid $tonal600"}}),_e=C(u,{width:8,height:8,borderRadius:"50%",backgroundColor:"white"}),Le=o=>e(Ne,Object.assign({},o),e(_e,null));Le.displayName="RadioButton";const Re=C(b,{}),We=o=>e(Re,Object.assign({},o));We.displayName="RadioButtonGroup";const Fe=C("select",{appearance:"none",backgroundColor:"white",backgroundImage:`url(data:image/svg+xml;charset=US-ASCII,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4"><path fill="#1066b2" d="M287 69a18 18 0 00-13-5H18c-5 0-9 2-12 5a18 18 0 00-6 13c0 5 2 10 5 13l128 128c4 4 8 5 13 5s9-1 13-5L287 95c4-3 5-8 5-13s-2-9-5-13z"/></svg>')})`,backgroundPosition:"right 16px top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"0.65em auto, 100%",borderRadius:"$0",border:"1px solid $tonal500",display:"block",fontFamily:"$sans",fontSize:"$md",fontWeight:400,height:"$2",letterSpacing:"0.01em",lineHeight:"1.4",px:"$3",py:"$2",transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{boxShadow:"inset 0 0 0 1px $colors$primary900",borderColor:"$primary900",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{opacity:"0.7",backgroundColor:"$tonal300",cursor:"not-allowed"}}),He=({options:o,defaultOption:t,...a})=>e(Fe,Object.assign({},a),t&&e("option",null," ",t),o&&o.map((o=>e("option",{key:o.value,value:o.value,disabled:o.disabled},o.label))));He.displayName="Select";const Ie=C("textarea",{appearance:"none",borderRadius:"$0",border:"1px solid $tonal500",boxShadow:"none",fontFamily:"$sans",fontSize:"$md",fontWeight:400,letterSpacing:"0.01em",lineHeight:1.4,minHeight:100,resize:"vertical",width:"100%",color:"$tonal900",py:"$3",px:"$2",transition:"all 75ms ease-out","&:focus":{boxShadow:"inset 0 0 0 1px $color$primary900",borderColor:"$primary900",outline:"none"},"&[disabled]":{opacity:.7,backgroundColor:"$tonal300"}});Ie.displayName="Textarea";const De=C(y,{}),Me=({externalId:o,ratio:t=9/16,...a})=>e(O,{css:{position:"relative",paddingTop:100*t+"%",overflow:"hidden",height:0}},e(De,Object.assign({role:"figure",url:`https://player.vimeo.com/video/${o}`},a,{height:"100%",width:"100%",css:{position:"absolute",top:0,left:0}})));Me.displayName="Video";export{O as Box,I as Button,K as Check,M as Checkbox,_ as Flex,B as Form,P as Grid,q as Heading,re as Home,E as Icon,ie as Image,se as Input,ue as InputField,de as Label,ye as Link,R as Loader,$e as PasswordField,ke as Popover,Oe as ProgressBar,Le as RadioButton,We as RadioButtonGroup,He as Select,pe as Text,Ie as Textarea,me as ValidationError,Me as Video,f as conditions,v as css,x as getCssString,k as globalCss,S as keyframes,C as styled,z as theme,$ as utils};
+import e from"@atom-learning/theme";import{createCss as t}from"@stitches/react";import{createElement as o,Fragment as r,Children as a,forwardRef as i,useState as n,useRef as s}from"react";import{Root as l}from"@radix-ui/react-visually-hidden";import{Root as d,Indicator as c}from"@radix-ui/react-checkbox";import{CheckIcon as p}from"@radix-ui/react-icons";import{useForm as m}from"react-hook-form";import{Root as h,Indicator as g}from"@radix-ui/react-progress";import{Item as u,Indicator as b,Root as y}from"@radix-ui/react-radio-group";import $ from"react-player/vimeo";const f={p:()=>e=>({padding:e}),pt:()=>e=>({paddingTop:e}),pr:()=>e=>({paddingRight:e}),pb:()=>e=>({paddingBottom:e}),pl:()=>e=>({paddingLeft:e}),px:()=>e=>({paddingLeft:e,paddingRight:e}),py:()=>e=>({paddingTop:e,paddingBottom:e}),m:()=>e=>({margin:e}),mt:()=>e=>({marginTop:e}),mr:()=>e=>({marginRight:e}),mb:()=>e=>({marginBottom:e}),ml:()=>e=>({marginLeft:e}),mx:()=>e=>({marginLeft:e,marginRight:e}),my:()=>e=>({marginTop:e,marginBottom:e}),bg:()=>e=>({background:e}),size:()=>e=>{if(Array.isArray(e)){const[t,o]=e;return{height:t,width:o}}return{height:e,width:e}}},v={sm:"@media (min-width: 550px)",md:"@media (min-width: 800px)",lg:"@media (min-width: 1100px)",xl:"@media (min-width: 1350px)",motion:"@media (prefers-reduced-motion)",hover:"@media (hover: hover)"},w=t({theme:e,utils:f,conditions:v}),{css:x,getCssString:k,global:S,keyframes:z,styled:C,theme:j}=w,O=C("div",{});O.displayName="Box";const N=C("div",{display:"flex"});N.displayName="Flex";const _=C("div",{animationName:`${z({"0%":{opacity:0},"30%":{opacity:1},"50%":{opacity:1},"80%":{opacity:0},"100%":{opacity:0}})}`,animationDuration:"1s",animationFillMode:"both",animationIterationCount:"infinite",animationTimingFunction:"linear",backgroundColor:"currentColor",borderRadius:"100%","&:nth-child(1)":{animationDelay:"-300ms"},"&:nth-child(2)":{animationDelay:"-150ms"},"&:nth-child(3)":{animationDelay:0},variants:{size:{sm:{size:"4px",mx:"2px"},md:{size:"6px",mx:"2px"},lg:{size:"8px",mx:"3px"}}}}),R=({css:e={},message:t="Loading",size:r="md"})=>o(N,{css:{justifyContent:"center",...e},role:"alert"},o(l,null,t),o(_,{size:r}),o(_,{size:r}),o(_,{size:r})),L=(e,t)=>({boxShadow:"inset 0 0 0 2px",color:e,backgroundColor:"white","&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:t,backgroundColor:"white"},"&:active":{color:e},"&[disabled]":{backgroundColor:"white",color:t}}),H=(e,t)=>({backgroundColor:e,color:"white","&:not([disabled]):hover, &:not([disabled]):focus":{backgroundColor:t},"&:active":{backgroundColor:e},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal600"}}),W=C("button",{background:"unset",border:"none",borderRadius:"$0",cursor:"pointer",display:"flex",justifyContent:"center",alignItems:"center",fontFamily:"$sans",fontSize:"$md",fontWeight:500,height:"$2",letterSpacing:"0.02em",lineHeight:1.4,transition:"all 125ms ease-out",textDecoration:"none",px:"$4",py:"$2",whiteSpace:"nowrap",width:"max-content","&[disabled]":{opacity:.35,cursor:"not-allowed"},variants:{theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}},appearance:{solid:{},outline:{}},isLoading:{true:{cursor:"not-allowed",opacity:.5}}},compoundVariants:[{theme:"primary",appearance:"solid",css:H("$primary500","$primary900")},{theme:"secondary",appearance:"solid",css:H("$secondary500","$secondary700")},{theme:"tertiary",appearance:"solid",css:H("$tertiary500","$tertiary700")},{theme:"success",appearance:"solid",css:H("$success","$successDark")},{theme:"warning",appearance:"solid",css:H("$warning","$warningDark")},{theme:"danger",appearance:"solid",css:H("$danger","$dangerDark")},{theme:"primary",appearance:"outline",css:L("$primary500","$primary900")},{theme:"secondary",appearance:"outline",css:L("$secondary500","$secondary900")},{theme:"tertiary",appearance:"outline",css:L("$tertiary500","$tertiary700")}]}),F=({theme:e="primary",appearance:t="solid",isLoading:a,type:i="button",children:n,onClick:s,...l})=>o(W,Object.assign({theme:e,appearance:t,isLoading:a||!1,onClick:s?()=>{return e=s,void(a||e());var e}:void 0,type:i},l),"boolean"==typeof a?o(r,null,o(R,{css:{opacity:a?1:0,position:"absolute",transition:"opacity 150ms ease-out"}}),o(O,{as:"span",css:a?{opacity:0,transition:"opacity 150ms ease-out"}:{}},n)):n);F.displayName="Button";const I=C(d,{appearance:"none",backgroundColor:"transparent",border:"none",borderRadius:"$0",boxShadow:"inset 0 0 0 2px $colors$secondary300",color:"white",cursor:"pointer",height:"$0",width:"$0",padding:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 100ms ease-out",'&[data-state="unchecked"]:focus, &[data-state="unchecked"]:hover':{backgroundColor:"$tonal300",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},'&[data-state="checked"]':{backgroundColor:"$secondary300"},'&[data-state="checked"]:hover, &[data-state="unchecked"]:focus':{backgroundColor:"$secondary700",boxShadow:"inset 0 0 0 2px $colors$secondary700",outline:"none"},"&:focus-within":{outline:"none"}}),D=e=>o(I,Object.assign({},e),o(c,{as:p}));D.displayName="Checkbox";const M=C("form",{}),T=({children:e,defaultValues:t={},onSubmit:r,validationMode:i="onBlur",...n})=>{const{errors:s,handleSubmit:l,register:d}=m({defaultValues:t,mode:i});return o(M,Object.assign({"aria-label":"form"},n,{onSubmit:l(r)}),a.map(e,(e=>{const{validation:t,...r}=e.props;if(!r.name)return e;const a=s[r.name];return o(e.type,{...r,error:a?a.message:void 0,register:t?d(t):d,key:r.name,required:!!t&&!!t.required})})))};T.displayName="Form";const B=C("div",{display:"grid"});B.displayName="Grid";const P=C("h1",{color:"$tonal-900",fontFamily:"$sans",fontWeight:"700",margin:0,lineHeight:"1.4",variants:{size:{sm:{fontSize:"$lg",letterSpacing:"0.01em"},md:{fontSize:"$xl",letterSpacing:"0.02em"},lg:{fontSize:"$xxl",letterSpacing:"0.02em"}}}}),q=({as:e="h2",size:t="md",...r})=>o(P,Object.assign({as:e,size:t},r));q.displayName="Heading";const A=C("svg",{color:"currentcolor",display:"inline-block",verticalAlign:"middle",variants:{size:{sm:{height:16,width:16},md:{height:24,width:24},lg:{height:32,width:32}}}}),V=({is:e,size:t="sm",...r})=>o(A,Object.assign({size:t,viewBox:"0 0 24 24","aria-hidden":"true"},r,{as:e}));function E(){return(E=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}var G=o("path",{d:"M20 6L9 17l-5-5"});function U(e){return o("svg",E({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:"check_svg__feather check_svg__feather-check"},e),G)}function K(){return(K=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}var J=o("path",{d:"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22"});function Q(e){return o("svg",K({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye_svg__feather eye_svg__feather-eye-off"},e),J)}function X(){return(X=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}var Y=o("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),Z=o("circle",{cx:12,cy:12,r:3});function ee(e){return o("svg",X({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"eye-off_svg__feather eye-off_svg__feather-eye"},e),Y,Z)}function te(){return(te=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}var oe=o("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"});function re(e){return o("svg",te({className:"home_svg__w-6 home_svg__h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},e),oe)}const ae=C("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}});ae.displayName="Image";const ie=C("input",{appearance:"none",border:"1px solid $tonal500",borderRadius:"$0",boxShadow:"none",boxSizing:"border-box",color:"$tonal900",cursor:"text",display:"block",fontFamily:"$sans",fontSize:"$md",height:"$2",width:"100%",p:"$3",transition:"all 100ms ease-out","&:focus":{borderColor:"$primary900",boxShadow:"inset 0 0 0 1px $colors$primary900",outline:"none"},"&[disabled]":{backgroundColor:"$tonal300",color:"$tonal700",cursor:"not-allowed"},variants:{state:{error:{border:"1px solid $danger"}}}}),ne=i((({type:e="text",...t},r)=>o(ie,"number"===e?Object.assign({type:"text",inputMode:"numeric",pattern:"[0-9]*",ref:r},t):Object.assign({type:e},t,{ref:r}))));ne.displayName="Input";const se=C("label",{color:"$secondary300",display:"block",fontFamily:"$sans",fontWeight:500,letterSpacing:"0.02em",lineHeight:"1.4",margin:0,variants:{size:{sm:{fontSize:"$sm"},md:{fontSize:"$md"}}}}),le=C("span",{color:"$danger",ml:"$1"}),de=({size:e="md",children:t,required:r,...a})=>o(se,Object.assign({size:e},a),t,r&&o(le,null,"*"));de.displayName="Label";const ce=C("p",{color:"$tonal900",fontFamily:"$sans",fontWeight:400,margin:0,maxWidth:"60ch",variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),pe=({as:e="p",size:t="md",...r})=>o(ce,Object.assign({as:e,size:t},r));pe.displayName="Text";const me=C(pe,{color:"$danger"}),he=({css:e,label:t,name:r,error:a,required:i=!1,register:n=null,...s})=>o(O,{css:e},o(de,{css:{mb:"$2"},htmlFor:r,required:i},t),o(ne,Object.assign({id:r,name:r,ref:n},a&&{state:"error"},s)),a&&o(me,{css:{mt:"$1"}},a));he.displayName="InputField";const ge=C("a",{color:"$primary500",fontFamily:"$sans",textDecoration:"none",cursor:"pointer","&:visited":{color:"$primary500"},"&:focus, &:hover":{color:"$primary900",textDecoration:"underline"},"&:active":{color:"$primary500"},variants:{size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),ue=i((({size:e="md",...t},r)=>o(ge,Object.assign({size:e},t,{ref:r}))));ue.displayName="Link";const be=C("li",{}),ye=C("ul",{fontFamily:"$sans",pl:"$2",[`& ${be}`]:{pl:"$1","&::marker":{content:'"•"',fontWeight:"bold"}},variants:{theme:{primary:{[`& ${be}`]:{"&::marker":{color:"$primary500"}}},secondary:{[`& ${be}`]:{"&::marker":{color:"$secondary500"}}}},size:{sm:{fontSize:"$sm",letterSpacing:"0.01em",lineHeight:1.6},md:{fontSize:"$md",letterSpacing:"0.02em",lineHeight:1.4},lg:{fontSize:"$lg",letterSpacing:"0.02em",lineHeight:1.4}}}}),$e=({theme:e="primary",size:t="md",...r})=>o(ye,Object.assign({theme:e,size:t},r));$e.Item=be;const fe=({css:e={},error:t="",label:r="Password",name:a="password",hidePasswordText:i="Hide password",showPasswordText:s="Show password",prompt:l,required:d=!1,register:c,...p})=>{const[m,h]=n(!1);return o(O,{css:{position:"relative",...e}},o(N,{css:{justifyContent:"space-between",alignItems:"center",mb:"$1"}},o(de,{htmlFor:a,css:{mb:"$2"},required:d},r),l&&o(ue,{href:l.link,size:"sm"},l.label)),o(ne,Object.assign({type:m?"text":"password",css:{pr:"$sizes$2"},autoComplete:"current-password",name:a,id:a,required:d,ref:c},p)),o(ve,{"aria-label":m?i:s,onClick:()=>h((e=>!e)),onMouseDown:e=>e.preventDefault(),type:"button"},o(V,{css:{color:"$tonal700"},is:m?Q:ee})),t&&o(me,{css:{mt:"$1"}},t))};fe.displayName="PasswordField";const ve=C("button",{border:"none",padding:0,background:"none",cursor:"pointer",position:"absolute",bottom:0,right:0,size:"$2"}),we=e=>({"&::after":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"white",borderWidth:8,ml:-8,...e},"&::before":{borderStyle:"solid",borderColor:"transparent",content:"''",height:0,pointerEvents:"none",position:"absolute",top:"100%",width:0,borderTopColor:"$tonal400",borderWidth:9,ml:-9,...e}}),xe=C("span",{position:"relative"}),ke=C("div",{boxShadow:"$0",borderRadius:"$1",backgroundColor:"white",border:"1px solid $tonal400",bottom:"calc(100%  + $3)",listStyleType:"none",minWidth:140,maxWidth:354,p:"$3",position:"absolute",transition:"all 150ms ease-in-out",width:"max-content",opacity:0,visibility:"hidden",variants:{align:{left:{...we({left:40}),left:0,transformOrigin:"60px bottom",transform:"translate(-20px, $2) scale(0.9)"},center:{...we({left:"50%"}),transformOrigin:"center bottom",transform:"translate(-50%, $2) scale(0.9)"},right:{...we({right:31}),right:0,transformOrigin:"calc(100% - 51px) bottom",transform:"translate(0, $2) scale(0.9)"}},visibility:{true:{opacity:1,visibility:"visible"}}}}),Se=({id:e,children:t,content:r,align:a="center",defaultOpen:l=!1,...d})=>{const c=s(null),[p,m]=n(l),h=`popover-trigger-${e||Math.random().toString(36).substr(2,9)}`,g=()=>{m(!p)},u=e=>{void 0===e.keyCode||32!==e.keyCode&&13!==e.keyCode||m(!p)},b=i(((e,t)=>o("span",Object.assign({id:h,"aria-expanded":p,role:"button",tabIndex:0,"aria-label":"popover trigger",onClick:g,onKeyPress:u,ref:t},e))));return o(xe,Object.assign({},d),o(b,{ref:c},t),o(ke,{role:"tooltip",align:a,"aria-labelledby":h,"aria-hidden":!p,visibility:p},r))};Se.displayName="Popover";const ze=e=>({background:"$tonal300",color:e}),Ce=e=>({border:"1px solid $tonal400",background:"white",color:e}),je=C(h,{borderRadius:25,height:12,position:"relative",overflow:"hidden",width:"100%",variants:{appearance:{outline:{},solid:{}},theme:{primary:{},secondary:{},tertiary:{},success:{},warning:{},danger:{}}},compoundVariants:[{theme:"primary",appearance:"solid",css:ze("$primary500")},{theme:"secondary",appearance:"solid",css:ze("$secondary500")},{theme:"tertiary",appearance:"solid",css:ze("$tertiary500")},{theme:"success",appearance:"solid",css:ze("$success")},{theme:"warning",appearance:"solid",css:ze("$warning")},{theme:"danger",appearance:"solid",css:ze("$danger")},{theme:"primary",appearance:"outline",css:Ce("$primary500")},{theme:"secondary",appearance:"outline",css:Ce("$secondary500")},{theme:"tertiary",appearance:"outline",css:Ce("$tertiary500")},{theme:"success",appearance:"outline",css:Ce("$success")},{theme:"warning",appearance:"outline",css:Ce("$warning")},{theme:"danger",appearance:"outline",css:Ce("$danger")}]}),Oe=C(g,{boxSizing:"border-box",position:"absolute",backgroundColor:"currentcolor",height:"100%"}),Ne=({value:e,appearance:t="outline",theme:r="primary",...a})=>o(je,Object.assign({appearance:t,theme:r},a),o(Oe,{style:{width:`${e}%`}}));Ne.displayName="ProgressBar";const _e=C(u,{appearance:"none",backgroundColor:"transparent",padding:0,borderRadius:"50%",borderColor:"$secondary300",borderWidth:2,borderStyle:"solid",width:"$0",height:"$0",display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle","&:focus":{outline:"none"},":checked + &":{backgroundColor:"$secondary300"},"[disabled] + &":{backgroundColor:"$tonal600",border:"2px solid $tonal600"}}),Re=C(b,{width:8,height:8,borderRadius:"50%",backgroundColor:"white"}),Le=e=>o(_e,Object.assign({},e),o(Re,null));Le.displayName="RadioButton";const He=C(y,{}),We=e=>o(He,Object.assign({},e));We.displayName="RadioButtonGroup";const Fe=C("select",{appearance:"none",backgroundColor:"white",backgroundImage:`url(data:image/svg+xml;charset=US-ASCII,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4"><path fill="#1066b2" d="M287 69a18 18 0 00-13-5H18c-5 0-9 2-12 5a18 18 0 00-6 13c0 5 2 10 5 13l128 128c4 4 8 5 13 5s9-1 13-5L287 95c4-3 5-8 5-13s-2-9-5-13z"/></svg>')})`,backgroundPosition:"right 16px top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"0.65em auto, 100%",borderRadius:"$0",border:"1px solid $tonal500",display:"block",fontFamily:"$sans",fontSize:"$md",fontWeight:400,height:"$2",letterSpacing:"0.01em",lineHeight:"1.4",px:"$3",py:"$2",transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{boxShadow:"inset 0 0 0 1px $colors$primary900",borderColor:"$primary900",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{opacity:"0.7",backgroundColor:"$tonal300",cursor:"not-allowed"}}),Ie=({options:e,defaultOption:t,...r})=>o(Fe,Object.assign({},r),t&&o("option",null," ",t),e&&e.map((e=>o("option",{key:e.value,value:e.value,disabled:e.disabled},e.label))));Ie.displayName="Select";const De=C("textarea",{appearance:"none",borderRadius:"$0",border:"1px solid $tonal500",boxShadow:"none",fontFamily:"$sans",fontSize:"$md",fontWeight:400,letterSpacing:"0.01em",lineHeight:1.4,minHeight:100,resize:"vertical",width:"100%",color:"$tonal900",py:"$3",px:"$2",transition:"all 75ms ease-out","&:focus":{boxShadow:"inset 0 0 0 1px $color$primary900",borderColor:"$primary900",outline:"none"},"&[disabled]":{opacity:.7,backgroundColor:"$tonal300"}});De.displayName="Textarea";const Me=C($,{}),Te=({externalId:e,ratio:t=9/16,...r})=>o(O,{css:{position:"relative",paddingTop:100*t+"%",overflow:"hidden",height:0,width:"100%"}},o(Me,Object.assign({role:"figure",url:`https://player.vimeo.com/video/${e}`},r,{height:"100%",width:"100%",css:{position:"absolute",top:0,left:0}})));Te.displayName="Video";export{O as Box,F as Button,U as Check,D as Checkbox,N as Flex,T as Form,B as Grid,q as Heading,re as Home,V as Icon,ae as Image,ne as Input,he as InputField,de as Label,ue as Link,$e as List,R as Loader,fe as PasswordField,Se as Popover,Ne as ProgressBar,Le as RadioButton,We as RadioButtonGroup,Ie as Select,pe as Text,De as Textarea,me as ValidationError,Te as Video,v as conditions,x as css,k as getCssString,S as globalCss,z as keyframes,C as styled,j as theme,f as utils};

package.json

@@ -6,3 +6,3 @@ {
   "module": "dist/index.modern.js",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "",
@@ -9,0 +9,0 @@ "files": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

260873

increased by7.11%

Number of package files

93

increased by3.33%

Lines of code

2361

increased by3.64%

No dependency changes