@atom-learning/components 2.33.0 → 2.35.0

package/dist/components/toggle-group/index.d.ts

@@ -23,6 +23,42 @@ export declare const ToggleGroup: {
             textPlaceholder: any;
             background: any;
             backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
             tonal50: any;
             tonal100: any;
             tonal200: any;
@@ -80,6 +116,7 @@ export declare const ToggleGroup: {
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -200,6 +237,42 @@ export declare const ToggleGroup: {
                 textPlaceholder: any;
                 background: any;
                 backgroundAccent: any;
+                grey100: any;
+                grey200: any;
+                grey300: any;
+                grey400: any;
+                grey500: any;
+                grey600: any;
+                grey700: any;
+                grey800: any;
+                grey900: any;
+                grey1000: any;
+                grey1100: any;
+                grey1200: any;
+                blue100: any;
+                blue200: any;
+                blue300: any;
+                blue400: any;
+                blue500: any;
+                blue600: any;
+                blue700: any;
+                blue800: any;
+                blue900: any;
+                blue1000: any;
+                blue1100: any;
+                blue1200: any;
+                purple100: any;
+                purple200: any;
+                purple300: any;
+                purple400: any;
+                purple500: any;
+                purple600: any;
+                purple700: any;
+                purple800: any;
+                purple900: any;
+                purple1000: any;
+                purple1100: any;
+                purple1200: any;
                 tonal50: any;
                 tonal100: any;
                 tonal200: any;
@@ -257,6 +330,7 @@ export declare const ToggleGroup: {
                 "7": any;
                 "8": any;
                 "9": any;
+                "24": any;
             };
             fontSizes: {
                 xs: any;
@@ -380,6 +454,42 @@ export declare const ToggleGroup: {
                 textPlaceholder: any;
                 background: any;
                 backgroundAccent: any;
+                grey100: any;
+                grey200: any;
+                grey300: any;
+                grey400: any;
+                grey500: any;
+                grey600: any;
+                grey700: any;
+                grey800: any;
+                grey900: any;
+                grey1000: any;
+                grey1100: any;
+                grey1200: any;
+                blue100: any;
+                blue200: any;
+                blue300: any;
+                blue400: any;
+                blue500: any;
+                blue600: any;
+                blue700: any;
+                blue800: any;
+                blue900: any;
+                blue1000: any;
+                blue1100: any;
+                blue1200: any;
+                purple100: any;
+                purple200: any;
+                purple300: any;
+                purple400: any;
+                purple500: any;
+                purple600: any;
+                purple700: any;
+                purple800: any;
+                purple900: any;
+                purple1000: any;
+                purple1100: any;
+                purple1200: any;
                 tonal50: any;
                 tonal100: any;
                 tonal200: any;
@@ -437,6 +547,7 @@ export declare const ToggleGroup: {
                 "7": any;
                 "8": any;
                 "9": any;
+                "24": any;
             };
             fontSizes: {
                 xs: any;
@@ -562,6 +673,42 @@ export declare const ToggleGroup: {
                 textPlaceholder: any;
                 background: any;
                 backgroundAccent: any;
+                grey100: any;
+                grey200: any;
+                grey300: any;
+                grey400: any;
+                grey500: any;
+                grey600: any;
+                grey700: any;
+                grey800: any;
+                grey900: any;
+                grey1000: any;
+                grey1100: any;
+                grey1200: any;
+                blue100: any;
+                blue200: any;
+                blue300: any;
+                blue400: any;
+                blue500: any;
+                blue600: any;
+                blue700: any;
+                blue800: any;
+                blue900: any;
+                blue1000: any;
+                blue1100: any;
+                blue1200: any;
+                purple100: any;
+                purple200: any;
+                purple300: any;
+                purple400: any;
+                purple500: any;
+                purple600: any;
+                purple700: any;
+                purple800: any;
+                purple900: any;
+                purple1000: any;
+                purple1100: any;
+                purple1200: any;
                 tonal50: any;
                 tonal100: any;
                 tonal200: any;
@@ -619,6 +766,7 @@ export declare const ToggleGroup: {
                 "7": any;
                 "8": any;
                 "9": any;
+                "24": any;
             };
             fontSizes: {
                 xs: any;
@@ -743,6 +891,42 @@ export declare const ToggleGroup: {
                 textPlaceholder: any;
                 background: any;
                 backgroundAccent: any;
+                grey100: any;
+                grey200: any;
+                grey300: any;
+                grey400: any;
+                grey500: any;
+                grey600: any;
+                grey700: any;
+                grey800: any;
+                grey900: any;
+                grey1000: any;
+                grey1100: any;
+                grey1200: any;
+                blue100: any;
+                blue200: any;
+                blue300: any;
+                blue400: any;
+                blue500: any;
+                blue600: any;
+                blue700: any;
+                blue800: any;
+                blue900: any;
+                blue1000: any;
+                blue1100: any;
+                blue1200: any;
+                purple100: any;
+                purple200: any;
+                purple300: any;
+                purple400: any;
+                purple500: any;
+                purple600: any;
+                purple700: any;
+                purple800: any;
+                purple900: any;
+                purple1000: any;
+                purple1100: any;
+                purple1200: any;
                 tonal50: any;
                 tonal100: any;
                 tonal200: any;
@@ -800,6 +984,7 @@ export declare const ToggleGroup: {
                 "7": any;
                 "8": any;
                 "9": any;
+                "24": any;
             };
             fontSizes: {
                 xs: any;

package/dist/components/toggle-group/index.js

@@ -1 +1,2 @@
 import{ToggleGroupButton as o}from"./ToggleGroupButton.js";import{ToggleGroupItem as t}from"./ToggleGroupItem.js";import{ToggleGroupRoot as r}from"./ToggleGroupRoot.js";const g={Item:t,Button:o,Root:r};export{g as ToggleGroup};
+//# sourceMappingURL=index.js.map

package/dist/components/toggle-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/toggle-group/index.ts"],"sourcesContent":["import { ToggleGroupButton as Button } from './ToggleGroupButton'\nimport { ToggleGroupItem as Item } from './ToggleGroupItem'\nimport { ToggleGroupRoot as Root } from './ToggleGroupRoot'\nexport const ToggleGroup = { Item, Button, Root }\n"],"names":["ToggleGroup","Item","Button","Root"],"mappings":"yKAGO,MAAMA,EAAc,CAAE,KAAAC,EAAM,OAAAC,EAAQ,KAAAC,CAAK"}

package/dist/components/tooltip/Tooltip.js

@@ -1 +1,2 @@
 import{Trigger as i,Root as l,Portal as a,Provider as m}from"@radix-ui/react-tooltip";import*as n from"react";import{styled as p}from"../../stitches.js";import{TooltipContent as d}from"./TooltipContent.js";const o=({children:r,delayDuration:t=350,...e})=>n.createElement(l,{delayDuration:t,...e},r);o.Content=d,o.Trigger=p(i,{}),o.Portal=a,o.Provider=m,o.displayName="Tooltip";export{o as Tooltip};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { Portal, Provider, Root, Trigger } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TooltipContent } from './TooltipContent'\n\ntype TooltipProps = React.ComponentProps<typeof Root>\n\nexport const Tooltip: React.FC<TooltipProps> & {\n  Content: typeof TooltipContent\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n  Provider: typeof Provider\n} = ({ children, delayDuration = 350, ...remainingProps }) => (\n  <Root delayDuration={delayDuration} {...remainingProps}>\n    {children}\n  </Root>\n)\n\nTooltip.Content = TooltipContent\nTooltip.Trigger = styled(Trigger, {})\nTooltip.Portal = Portal\nTooltip.Provider = Provider\n\nTooltip.displayName = 'Tooltip'\n"],"names":["Tooltip","children","delayDuration","remainingProps","React","Root","TooltipContent","styled","Trigger","Portal","Provider"],"mappings":"8MASO,MAAMA,EAKT,CAAC,CAAE,SAAAC,EAAU,cAAAC,EAAgB,OAAQC,CAAe,IACtDC,EAAA,cAACC,EAAA,CAAK,cAAeH,EAAgB,GAAGC,CACrCF,EAAAA,CACH,EAGFD,EAAQ,QAAUM,EAClBN,EAAQ,QAAUO,EAAOC,EAAS,EAAE,EACpCR,EAAQ,OAASS,EACjBT,EAAQ,SAAWU,EAEnBV,EAAQ,YAAc"}

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

@@ -25,6 +25,42 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -82,6 +118,7 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/tooltip/TooltipContent.js

@@ -1 +1,2 @@
 import{Content as m,Arrow as l}from"@radix-ui/react-tooltip";import*as t from"react";import{TOOLTIP_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import{slideDownAndFade as s,slideLeftAndFade as p,slideUpAndFade as f,slideRightAndFade as c}from"../../utilities/style/keyframe-animations.js";const h=a(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,whiteSpace:"normal",px:"$3",py:"$2",zIndex:r,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:s},'&[data-side="right"]':{animationName:p},'&[data-side="bottom"]':{animationName:f},'&[data-side="left"]':{animationName:c}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),x=a(l,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),$=({children:i,side:e="top",sideOffset:o=4,size:n="md",...d})=>t.createElement(h,{side:e,sideOffset:o,size:n,...d},i,t.createElement(x,null));export{$ as TooltipContent};
+//# sourceMappingURL=TooltipContent.js.map

package/dist/components/tooltip/TooltipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.js","sources":["../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { Arrow, Content } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { TOOLTIP_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n  slideDownAndFade,\n  slideLeftAndFade,\n  slideRightAndFade,\n  slideUpAndFade\n} from '~/utilities'\n\nconst StyledContent = styled(Content, {\n  backgroundColor: '$tonal500',\n  borderRadius: '$0',\n  boxShadow: '$0',\n  color: 'white',\n  fontFamily: '$body',\n  fontSize: '$sm',\n  lineHeight: 1.5,\n  whiteSpace: 'normal',\n  px: '$3',\n  py: '$2',\n  zIndex: TOOLTIP_Z_INDEX,\n  '@allowMotion': {\n    animationDuration: '75ms',\n    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n    willChange: 'transform, opacity',\n    '&[data-state=\"delayed-open\"]': {\n      '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n      '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n      '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n      '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n    }\n  },\n  variants: {\n    size: {\n      sm: { maxWidth: '100px' },\n      md: { maxWidth: '250px' },\n      lg: { maxWidth: '400px' }\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  fill: '$tonal500',\n  '[data-align=\"end\"] &': { mr: '$2' },\n  '[data-align=\"start\"] &': { ml: '$2' }\n})\n\ntype TooltipContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content>\n\nexport const TooltipContent: React.FC<TooltipContentProps> = ({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  size = 'md',\n  ...remainingProps\n}) => (\n  <StyledContent\n    side={side}\n    sideOffset={sideOffset}\n    size={size}\n    {...remainingProps}\n  >\n    {children}\n    <StyledArrow />\n  </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","TOOLTIP_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","TooltipContent","children","side","sideOffset","size","remainingProps","React"],"mappings":"+UAYA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,gBAAiB,YACjB,aAAc,KACd,UAAW,KACX,MAAO,QACP,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,WAAY,SACZ,GAAI,KACJ,GAAI,KACJ,OAAQC,EACR,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,+BAAgC,CAC9B,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcP,EAAOQ,EAAO,CAChC,KAAM,YACN,uBAAwB,CAAE,GAAI,IAAK,EACnC,yBAA0B,CAAE,GAAI,IAAK,CACvC,CAAC,EAKYC,EAAgD,CAAC,CAC5D,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAAChB,EAAA,CACC,KAAMY,EACN,WAAYC,EACZ,KAAMC,EACL,GAAGC,CAEHJ,EAAAA,EACDK,EAAA,cAACR,EAAA,IAAY,CACf"}

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

@@ -36,6 +36,42 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -93,6 +129,7 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

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

@@ -1 +1,2 @@
 import t from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as s}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as d}from"../divider/Divider.js";import{Flex as m}from"../flex/Flex.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as p,TopBarBrandName as h}from"./TopBarBrand.js";const c=()=>t.createElement(d,{orientation:"vertical",css:{height:"$2",bg:"$tonal100"}}),g=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $tonal100",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6",[`& ${e}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${e}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),x=r(m,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",...a})=>{const{y:n}=s();return t.createElement(g,{hasScrolled:!!n,size:i},t.createElement(x,{...a}))};o.Brand=p,o.BrandLogo=e,o.BrandName=h,o.ActionIcon=l,o.Divider=c,o.displayName="TopBar";export{o as TopBar};
+//# sourceMappingURL=TopBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\ninterface TopBarSubComponents {\n  Brand: typeof TopBarBrand\n  BrandLogo: typeof TopBarBrandLogo\n  BrandName: typeof TopBarBrandName\n  ActionIcon: typeof TopBarActionIcon\n  Divider: typeof TopBarDivider\n}\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$tonal100' }} />\n)\n\nconst StyledRoot = styled('div', {\n  bg: 'white',\n  position: 'sticky',\n  display: 'flex',\n  alignItems: 'center',\n  width: '100vw',\n  top: '0',\n  zIndex: 1,\n  borderBottom: '1px solid $tonal100',\n  transition: 'box-shadow .2s ease-out',\n  variants: {\n    hasScrolled: {\n      true: {\n        boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1);'\n      }\n    },\n    size: {\n      md: {\n        height: '$6',\n        [`& ${TopBarBrandLogo}`]: {\n          '&[src$=\".svg\"]': {\n            height: 24,\n            width: 'auto'\n          }\n        }\n      },\n      lg: {\n        height: '$7',\n        [`& ${TopBarBrandLogo}`]: {\n          '&[src$=\".svg\"]': {\n            height: 32,\n            width: 'auto'\n          }\n        }\n      }\n    }\n  }\n})\n\nconst Container = styled(Flex, {\n  alignItems: 'center',\n  height: '$4',\n  mx: '$4',\n  width: '100%',\n  '@md': {\n    mx: '$5'\n  }\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ninterface TopBarProps extends StyledRootProps {\n  css?: CSS\n}\n\nexport const TopBar: React.FC<TopBarProps> & TopBarSubComponents = ({\n  size = 'md',\n  ...props\n}) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot hasScrolled={!!scrollPositionY} size={size}>\n      <Container {...props} />\n    </StyledRoot>\n  )\n}\n\nTopBar.Brand = TopBarBrand\nTopBar.BrandLogo = TopBarBrandLogo\nTopBar.BrandName = TopBarBrandName\nTopBar.ActionIcon = TopBarActionIcon\nTopBar.Divider = TopBarDivider\n\nTopBar.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","TopBarBrandLogo","Container","Flex","TopBar","size","props","scrollPositionY","useWindowScrollPosition","TopBarBrand","TopBarBrandName","TopBarActionIcon"],"mappings":"oYAkBA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,WAAY,CAAA,CAAG,EAGpEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,QACJ,SAAU,SACV,QAAS,OACT,WAAY,SACZ,MAAO,QACP,IAAK,IACL,OAAQ,EACR,aAAc,sBACd,WAAY,0BACZ,SAAU,CACR,YAAa,CACX,KAAM,CACJ,UAAW,yCACb,CACF,EACA,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,CAAC,KAAKC,KAAoB,CACxB,iBAAkB,CAChB,OAAQ,GACR,MAAO,MACT,CACF,CACF,EACA,GAAI,CACF,OAAQ,KACR,CAAC,KAAKA,KAAoB,CACxB,iBAAkB,CAChB,OAAQ,GACR,MAAO,MACT,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAYF,EAAOG,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EAQYC,EAAsD,CAAC,CAClE,KAAAC,EAAO,QACJC,CACL,IAAM,CACJ,KAAM,CAAE,EAAGC,CAAgB,EAAIC,IAE/B,OACEX,EAAA,cAACE,EAAA,CAAW,YAAa,CAAC,CAACQ,EAAiB,KAAMF,GAChDR,EAAA,cAACK,EAAA,CAAW,GAAGI,EAAO,CACxB,CAEJ,EAEAF,EAAO,MAAQK,EACfL,EAAO,UAAYH,EACnBG,EAAO,UAAYM,EACnBN,EAAO,WAAaO,EACpBP,EAAO,QAAUR,EAEjBQ,EAAO,YAAc"}

package/dist/components/top-bar/TopBarActionIcon.js

@@ -1 +1,2 @@
 import e from"react";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as n}from"../icon/Icon.js";const c=e.forwardRef(({icon:o,...r},t)=>e.createElement(m,{size:"md",appearance:"simple",theme:"neutral",ref:t,...r},e.createElement(n,{is:o})));export{c as TopBarActionIcon};
+//# sourceMappingURL=TopBarActionIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopBarActionIcon.js","sources":["../../../src/components/top-bar/TopBarActionIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\ntype TopBarActionIconProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'size' | 'children'\n> & { icon: React.FC<React.SVGProps<SVGSVGElement>>; label: string }\n\nexport const TopBarActionIcon: React.ForwardRefExoticComponent<TopBarActionIconProps> =\n  React.forwardRef(({ icon, ...rest }, forwardedRef) => {\n    return (\n      <ActionIcon\n        size=\"md\"\n        appearance=\"simple\"\n        theme=\"neutral\"\n        ref={forwardedRef}\n        {...rest}\n      >\n        <Icon is={icon} />\n      </ActionIcon>\n    )\n  })\n"],"names":["TopBarActionIcon","React","icon","rest","forwardedRef","ActionIcon","Icon"],"mappings":"sHAUa,MAAAA,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,KAASC,CAAK,EAAGC,IAEjCH,EAAA,cAACI,EAAA,CACC,KAAK,KACL,WAAW,SACX,MAAM,UACN,IAAKD,EACJ,GAAGD,CAAAA,EAEJF,EAAA,cAACK,EAAA,CAAK,GAAIJ,CAAAA,CAAM,CAClB,CAEH"}

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

@@ -38,6 +38,42 @@ export declare const TopBarBrandName: import("@stitches/react/types/styled-compo
             textPlaceholder: any;
             background: any;
             backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
             tonal50: any;
             tonal100: any;
             tonal200: any;
@@ -95,6 +131,7 @@ export declare const TopBarBrandName: import("@stitches/react/types/styled-compo
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -216,6 +253,42 @@ export declare const TopBarBrandName: import("@stitches/react/types/styled-compo
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -273,6 +346,7 @@ export declare const TopBarBrandName: import("@stitches/react/types/styled-compo
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -392,6 +466,42 @@ export declare const TopBarBrand: import("@stitches/react/types/styled-component
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -449,6 +559,7 @@ export declare const TopBarBrand: import("@stitches/react/types/styled-component
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/top-bar/TopBarBrand.js

@@ -1 +1,2 @@
 import n from"react";import{styled as o}from"../../stitches.js";import{Image as l}from"../image/Image.js";import{Text as m}from"../text/Text.js";const r=({src:t,alt:a="Atom Learning logo",css:e})=>n.createElement(l,{className:"topbar-brand-logo",src:t,alt:a,css:{mr:"$3",mb:"5px",...e}});r.toString=()=>".topbar-brand-logo";const c=o(m,{color:"$tonal400"}),s=o("a",{display:"flex",alignItems:"center",textDecoration:"none",color:"$tonal400","&:hover, &:focus":{textDecoration:"none"}});export{s as TopBarBrand,r as TopBarBrandLogo,c as TopBarBrandName};
+//# sourceMappingURL=TopBarBrand.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopBarBrand.js","sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\ntype TopBarBrandLogoProps = {\n  src: string\n  alt?: string\n  css?: CSS\n}\n\nexport const TopBarBrandLogo = ({\n  src,\n  alt = 'Atom Learning logo',\n  css\n}: TopBarBrandLogoProps): JSX.Element => {\n  return (\n    <Image\n      className=\"topbar-brand-logo\"\n      src={src}\n      alt={alt}\n      css={{\n        mr: '$3',\n        mb: '5px',\n        ...css\n      }}\n    />\n  )\n}\n\nTopBarBrandLogo.toString = () => '.topbar-brand-logo'\n\nexport const TopBarBrandName = styled(Text, {\n  color: '$tonal400'\n})\n\nexport const TopBarBrand = styled('a', {\n  display: 'flex',\n  alignItems: 'center',\n  textDecoration: 'none',\n  color: '$tonal400',\n  '&:hover, &:focus': { textDecoration: 'none' }\n})\n"],"names":["TopBarBrandLogo","src","alt","css","React","Image","TopBarBrandName","styled","Text","TopBarBrand"],"mappings":"iJAaO,MAAMA,EAAkB,CAAC,CAC9B,IAAAC,EACA,IAAAC,EAAM,qBACN,IAAAC,CACF,IAEIC,EAAA,cAACC,EAAA,CACC,UAAU,oBACV,IAAKJ,EACL,IAAKC,EACL,IAAK,CACH,GAAI,KACJ,GAAI,MACJ,GAAGC,CACL,CAAA,CACF,EAIJH,EAAgB,SAAW,IAAM,2BAEpBM,EAAkBC,EAAOC,EAAM,CAC1C,MAAO,WACT,CAAC,EAEYC,EAAcF,EAAO,IAAK,CACrC,QAAS,OACT,WAAY,SACZ,eAAgB,OAChB,MAAO,YACP,mBAAoB,CAAE,eAAgB,MAAO,CAC/C,CAAC"}

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

@@ -25,6 +25,42 @@ declare const StyledVideo: import("@stitches/react/types/styled-component").Styl
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -82,6 +118,7 @@ declare const StyledVideo: import("@stitches/react/types/styled-component").Styl
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -206,6 +243,42 @@ export declare const Video: React.ForwardRefExoticComponent<Pick<VideoProps, str
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -263,6 +336,7 @@ export declare const Video: React.ForwardRefExoticComponent<Pick<VideoProps, str
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/video/Video.js

@@ -1 +1,2 @@
 import*as e from"react";import m from"react-player/vimeo";import{Box as p}from"../box/Box.js";import{styled as a}from"../../stitches.js";import{CSSWrapper as l}from"../../utilities/css-wrapper/CSSWrapper.js";const f=a(m,{}),o=e.forwardRef(({id:t,ratio:r=9/16,css:i,...s},d)=>e.createElement(l,{css:i},e.createElement(p,{css:{borderRadius:"$0",position:"relative",paddingTop:`${r*100}%`,overflow:"hidden",height:0,width:"100%"}},e.createElement(f,{...s,role:"figure",url:`https://player.vimeo.com/video/${t}`,height:"100%",width:"100%",css:{position:"absolute",top:0,left:0},ref:d}))));o.displayName="Video";export{o as Video};
+//# sourceMappingURL=Video.js.map