@atom-learning/components 3.10.1 → 3.11.0

package/dist/components/divider/Divider.d.ts

@@ -19,9 +19,10 @@ export declare const StyledDivider: import("@stitches/react/types/styled-compone
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -168,11 +169,6 @@ export declare const StyledDivider: import("@stitches/react/types/styled-compone
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -181,6 +177,10 @@ export declare const StyledDivider: import("@stitches/react/types/styled-compone
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -204,6 +204,18 @@ export declare const StyledDivider: import("@stitches/react/types/styled-compone
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/drawer/Drawer.d.ts

@@ -7,7 +7,7 @@ export declare const Drawer: {
     Close: (props: Omit<Pick<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@stitches/react/types/styled-component").TransformProps<{
-        theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+        theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         isRounded?: boolean | "true" | undefined;
@@ -30,9 +30,10 @@ export declare const Drawer: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -179,11 +180,6 @@ export declare const Drawer: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -192,6 +188,10 @@ export declare const Drawer: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -215,6 +215,18 @@ export declare const Drawer: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -332,7 +344,7 @@ export declare const Drawer: {
             };
         }> | undefined;
     }, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@stitches/react/types/styled-component").TransformProps<{
-        theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+        theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         isRounded?: boolean | "true" | undefined;
@@ -371,9 +383,10 @@ export declare const Drawer: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -520,11 +533,6 @@ export declare const Drawer: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -533,6 +541,10 @@ export declare const Drawer: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -556,6 +568,18 @@ export declare const Drawer: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -691,9 +715,10 @@ export declare const Drawer: {
         hover: string;
     }, {
         colors: {
-            textForeground: any;
+            textBold: any;
+            textRegular: any;
             textSubtle: any;
-            textPlaceholder: any;
+            textMinimal: any;
             background: any;
             backgroundAccent: any;
             grey100: any;
@@ -840,11 +865,6 @@ export declare const Drawer: {
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            primaryLight: any;
-            primary: any;
-            primaryMid: any;
-            primaryDark: any;
-            secondary: any;
             brandRed: any;
             brandRedAccent: any;
             brandGreen: any;
@@ -853,6 +873,10 @@ export declare const Drawer: {
             brandPurpleAccent: any;
             brandYellow: any;
             brandYellowAccent: any;
+            infoLight: any;
+            info: any;
+            infoMid: any;
+            infoDark: any;
             successLight: any;
             success: any;
             successMid: any;
@@ -876,6 +900,18 @@ export declare const Drawer: {
             glBlueLight: any;
             glBluePrimary: any;
             glBlueDark: any;
+            primary100: any;
+            primary200: any;
+            primary300: any;
+            primary400: any;
+            primary500: any;
+            primary600: any;
+            primary700: any;
+            primary800: any;
+            primary900: any;
+            primary1000: any;
+            primary1100: any;
+            primary1200: any;
         };
         space: {
             "0": any;
@@ -1010,9 +1046,10 @@ export declare const Drawer: {
         hover: string;
     }, {
         colors: {
-            textForeground: any;
+            textBold: any;
+            textRegular: any;
             textSubtle: any;
-            textPlaceholder: any;
+            textMinimal: any;
             background: any;
             backgroundAccent: any;
             grey100: any;
@@ -1159,11 +1196,6 @@ export declare const Drawer: {
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            primaryLight: any;
-            primary: any;
-            primaryMid: any;
-            primaryDark: any;
-            secondary: any;
             brandRed: any;
             brandRedAccent: any;
             brandGreen: any;
@@ -1172,6 +1204,10 @@ export declare const Drawer: {
             brandPurpleAccent: any;
             brandYellow: any;
             brandYellowAccent: any;
+            infoLight: any;
+            info: any;
+            infoMid: any;
+            infoDark: any;
             successLight: any;
             success: any;
             successMid: any;
@@ -1195,6 +1231,18 @@ export declare const Drawer: {
             glBlueLight: any;
             glBluePrimary: any;
             glBlueDark: any;
+            primary100: any;
+            primary200: any;
+            primary300: any;
+            primary400: any;
+            primary500: any;
+            primary600: any;
+            primary700: any;
+            primary800: any;
+            primary900: any;
+            primary1000: any;
+            primary1100: any;
+            primary1200: any;
         };
         space: {
             "0": any;
@@ -1329,9 +1377,10 @@ export declare const Drawer: {
         hover: string;
     }, {
         colors: {
-            textForeground: any;
+            textBold: any;
+            textRegular: any;
             textSubtle: any;
-            textPlaceholder: any;
+            textMinimal: any;
             background: any;
             backgroundAccent: any;
             grey100: any;
@@ -1478,11 +1527,6 @@ export declare const Drawer: {
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            primaryLight: any;
-            primary: any;
-            primaryMid: any;
-            primaryDark: any;
-            secondary: any;
             brandRed: any;
             brandRedAccent: any;
             brandGreen: any;
@@ -1491,6 +1535,10 @@ export declare const Drawer: {
             brandPurpleAccent: any;
             brandYellow: any;
             brandYellowAccent: any;
+            infoLight: any;
+            info: any;
+            infoMid: any;
+            infoDark: any;
             successLight: any;
             success: any;
             successMid: any;
@@ -1514,6 +1562,18 @@ export declare const Drawer: {
             glBlueLight: any;
             glBluePrimary: any;
             glBlueDark: any;
+            primary100: any;
+            primary200: any;
+            primary300: any;
+            primary400: any;
+            primary500: any;
+            primary600: any;
+            primary700: any;
+            primary800: any;
+            primary900: any;
+            primary1000: any;
+            primary1100: any;
+            primary1200: any;
         };
         space: {
             "0": any;
@@ -1648,9 +1708,10 @@ export declare const Drawer: {
         hover: string;
     }, {
         colors: {
-            textForeground: any;
+            textBold: any;
+            textRegular: any;
             textSubtle: any;
-            textPlaceholder: any;
+            textMinimal: any;
             background: any;
             backgroundAccent: any;
             grey100: any;
@@ -1797,11 +1858,6 @@ export declare const Drawer: {
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            primaryLight: any;
-            primary: any;
-            primaryMid: any;
-            primaryDark: any;
-            secondary: any;
             brandRed: any;
             brandRedAccent: any;
             brandGreen: any;
@@ -1810,6 +1866,10 @@ export declare const Drawer: {
             brandPurpleAccent: any;
             brandYellow: any;
             brandYellowAccent: any;
+            infoLight: any;
+            info: any;
+            infoMid: any;
+            infoDark: any;
             successLight: any;
             success: any;
             successMid: any;
@@ -1833,6 +1893,18 @@ export declare const Drawer: {
             glBlueLight: any;
             glBluePrimary: any;
             glBlueDark: any;
+            primary100: any;
+            primary200: any;
+            primary300: any;
+            primary400: any;
+            primary500: any;
+            primary600: any;
+            primary700: any;
+            primary800: any;
+            primary900: any;
+            primary1000: any;
+            primary1100: any;
+            primary1200: any;
         };
         space: {
             "0": any;

package/dist/components/drawer/DrawerContent.d.ts

@@ -20,9 +20,10 @@ export declare const StyledContent: import("@stitches/react/types/styled-compone
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -169,11 +170,6 @@ export declare const StyledContent: import("@stitches/react/types/styled-compone
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -182,6 +178,10 @@ export declare const StyledContent: import("@stitches/react/types/styled-compone
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -205,6 +205,18 @@ export declare const StyledContent: import("@stitches/react/types/styled-compone
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/drawer/DrawerContent.js

@@ -1,2 +1,2 @@
-import{Content as d,Portal as s}from"@radix-ui/react-dialog";import t from"react";import{Flex as p}from"../flex/Flex.js";import{DIALOG_Z_INDEX as c}from"../../constants/zIndices.js";import{ColorScheme as x}from"../../experiments/color-scheme/ColorScheme.js";import{styled as h}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideInOut as e}from"../../utilities/style/keyframe-animations.js";import{DrawerContext as w}from"./Drawer.context.js";import{DrawerOverlay as u}from"./DrawerOverlay.js";const f=e({outPosition:{x:0,y:"-100%"}}),g=e({outPosition:{x:"100%",y:0}}),y=e({outPosition:{x:0,y:"100%"}}),C=e({outPosition:{x:"-100%",y:0}}),i=o=>({'&[data-state="open"]':{animationName:o.in},'&[data-state="closed"]':{animationName:o.out}}),n={left:0,width:"100%",maxHeight:"85%"},r={top:0,height:"100%",width:"var(--drawer-content-width, 100%)",maxWidth:"100%"},a=h(d,{bg:"$base1",boxShadow:"$2",position:"fixed",zIndex:c,"@allowMotion":{animationTimingFunction:"ease-out",animationDuration:"250ms"},variants:{position:{top:{top:0,...n,...i(f)},right:{right:0,...r,...i(g)},bottom:{bottom:0,...n,...i(y)},left:{left:0,...r,...i(C)}},size:{xs:{"--drawer-content-width":"240px"},sm:{"--drawer-content-width":"256px"},md:{"--drawer-content-width":"288px"},lg:{"--drawer-content-width":"304px"},xl:{"--drawer-content-width":"320px"}}}}),b=({children:o,...m})=>{const{position:l}=t.useContext(w);return t.createElement(s,null,t.createElement(u,null),t.createElement(x,{base:"grey1",accent:"blue1",asChild:!0},t.createElement(a,{size:"lg",position:l,...m,asChild:!0},t.createElement(p,{direction:"column"},o))))};export{b as DrawerContent,a as StyledContent};
+import{Content as l,Portal as s}from"@radix-ui/react-dialog";import t from"react";import{Flex as p}from"../flex/Flex.js";import{DIALOG_Z_INDEX as c}from"../../constants/zIndices.js";import{ColorScheme as x}from"../../experiments/color-scheme/ColorScheme.js";import{styled as h}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideInOut as e}from"../../utilities/style/keyframe-animations.js";import{DrawerContext as w}from"./Drawer.context.js";import{DrawerOverlay as u}from"./DrawerOverlay.js";const f=e({outPosition:{x:0,y:"-100%"}}),y=e({outPosition:{x:"100%",y:0}}),g=e({outPosition:{x:0,y:"100%"}}),C=e({outPosition:{x:"-100%",y:0}}),i=o=>({'&[data-state="open"]':{animationName:o.in},'&[data-state="closed"]':{animationName:o.out}}),n={left:0,width:"100%",maxHeight:"85%"},r={top:0,height:"100%",width:"var(--drawer-content-width, 100%)",maxWidth:"100%"},a=h(l,{bg:"$base1",boxShadow:"$2",position:"fixed",zIndex:c,"@allowMotion":{animationTimingFunction:"ease-out",animationDuration:"250ms"},variants:{position:{top:{top:0,...n,...i(f)},right:{right:0,...r,...i(y)},bottom:{bottom:0,...n,...i(g)},left:{left:0,...r,...i(C)}},size:{xs:{"--drawer-content-width":"240px"},sm:{"--drawer-content-width":"256px"},md:{"--drawer-content-width":"288px"},lg:{"--drawer-content-width":"304px"},xl:{"--drawer-content-width":"320px"}}}}),D=({children:o,...m})=>{const{position:d}=t.useContext(w);return t.createElement(s,null,t.createElement(u,null),t.createElement(x,{base:"grey1",accent:"primary1",asChild:!0},t.createElement(a,{size:"lg",position:d,...m,asChild:!0},t.createElement(p,{direction:"column"},o))))};export{D as DrawerContent,a as StyledContent};
 //# sourceMappingURL=DrawerContent.js.map

package/dist/components/drawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.js","sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { ColorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { slideInOut } from '~/utilities'\n\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nconst animationTop = slideInOut({ outPosition: { x: 0, y: '-100%' } })\nconst animationRight = slideInOut({ outPosition: { x: '100%', y: 0 } })\nconst animationBottom = slideInOut({ outPosition: { x: 0, y: '100%' } })\nconst animationLeft = slideInOut({ outPosition: { x: '-100%', y: 0 } })\nconst setupAnimation = (animation: ReturnType<typeof slideInOut>) => {\n  return {\n    '&[data-state=\"open\"]': {\n      animationName: animation.in\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animation.out\n    }\n  }\n}\n\nconst positionY = {\n  left: 0,\n  width: '100%',\n  maxHeight: '85%'\n}\n\nconst positionX = {\n  top: 0,\n  height: '100%',\n  width: 'var(--drawer-content-width, 100%)',\n  maxWidth: '100%'\n}\n\nexport const StyledContent = styled(Content, {\n  bg: '$base1',\n  boxShadow: '$2',\n  position: 'fixed',\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    animationTimingFunction: 'ease-out',\n    animationDuration: '250ms'\n  },\n  variants: {\n    position: {\n      top: {\n        top: 0,\n        ...positionY,\n        ...setupAnimation(animationTop)\n      },\n      right: {\n        right: 0,\n        ...positionX,\n        ...setupAnimation(animationRight)\n      },\n      bottom: {\n        bottom: 0,\n        ...positionY,\n        ...setupAnimation(animationBottom)\n      },\n      left: {\n        left: 0,\n        ...positionX,\n        ...setupAnimation(animationLeft)\n      }\n    },\n    size: {\n      xs: {\n        '--drawer-content-width': '240px'\n      },\n      sm: {\n        '--drawer-content-width': '256px'\n      },\n      md: {\n        '--drawer-content-width': '288px'\n      },\n      lg: {\n        '--drawer-content-width': '304px'\n      },\n      xl: {\n        '--drawer-content-width': '320px'\n      }\n    }\n  }\n})\n\nexport const DrawerContent: React.FC<\n  React.ComponentProps<typeof StyledContent>\n> = ({ children, ...rest }) => {\n  const { position } = React.useContext(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ColorScheme base=\"grey1\" accent=\"blue1\" asChild>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <Flex direction=\"column\">{children}</Flex>\n        </StyledContent>\n      </ColorScheme>\n    </Portal>\n  )\n}\n"],"names":["animationTop","slideInOut","animationRight","animationBottom","animationLeft","setupAnimation","animation","positionY","positionX","StyledContent","styled","Content","DIALOG_Z_INDEX","DrawerContent","children","rest","position","React","DrawerContext","Portal","DrawerOverlay","ColorScheme","Flex"],"mappings":"imBAYA,MAAMA,EAAeC,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,OAAQ,CAAE,CAAC,EAC/DC,EAAiBD,EAAW,CAAE,YAAa,CAAE,EAAG,OAAQ,EAAG,CAAE,CAAE,CAAC,EAChEE,EAAkBF,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,MAAO,CAAE,CAAC,EACjEG,EAAgBH,EAAW,CAAE,YAAa,CAAE,EAAG,QAAS,EAAG,CAAE,CAAE,CAAC,EAChEI,EAAkBC,IACf,CACL,uBAAwB,CACtB,cAAeA,EAAU,EAC3B,EACA,yBAA0B,CACxB,cAAeA,EAAU,GAC3B,CACF,GAGIC,EAAY,CAChB,KAAM,EACN,MAAO,OACP,UAAW,KACb,EAEMC,EAAY,CAChB,IAAK,EACL,OAAQ,OACR,MAAO,oCACP,SAAU,MACZ,EAEaC,EAAgBC,EAAOC,EAAS,CAC3C,GAAI,SACJ,UAAW,KACX,SAAU,QACV,OAAQC,EACR,eAAgB,CACd,wBAAyB,WACzB,kBAAmB,OACrB,EACA,SAAU,CACR,SAAU,CACR,IAAK,CACH,IAAK,EACL,GAAGL,EACH,GAAGF,EAAeL,CAAY,CAChC,EACA,MAAO,CACL,MAAO,EACP,GAAGQ,EACH,GAAGH,EAAeH,CAAc,CAClC,EACA,OAAQ,CACN,OAAQ,EACR,GAAGK,EACH,GAAGF,EAAeF,CAAe,CACnC,EACA,KAAM,CACJ,KAAM,EACN,GAAGK,EACH,GAAGH,EAAeD,CAAa,CACjC,CACF,EACA,KAAM,CACJ,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,CACF,CACF,CACF,CAAC,EAEYS,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7B,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAM,WAAWC,CAAa,EAEnD,OACED,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,IAAc,EACfH,EAAA,cAACI,EAAA,CAAY,KAAK,QAAQ,OAAO,QAAQ,QAAO,EAAA,EAC9CJ,EAAA,cAACR,GAAc,KAAK,KAAK,SAAUO,EAAW,GAAGD,EAAM,QAAO,EAAA,EAC5DE,EAAA,cAACK,EAAA,CAAK,UAAU,QAAUR,EAAAA,CAAS,CACrC,CACF,CACF,CAEJ"}
+{"version":3,"file":"DrawerContent.js","sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { ColorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { slideInOut } from '~/utilities'\n\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nconst animationTop = slideInOut({ outPosition: { x: 0, y: '-100%' } })\nconst animationRight = slideInOut({ outPosition: { x: '100%', y: 0 } })\nconst animationBottom = slideInOut({ outPosition: { x: 0, y: '100%' } })\nconst animationLeft = slideInOut({ outPosition: { x: '-100%', y: 0 } })\nconst setupAnimation = (animation: ReturnType<typeof slideInOut>) => {\n  return {\n    '&[data-state=\"open\"]': {\n      animationName: animation.in\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animation.out\n    }\n  }\n}\n\nconst positionY = {\n  left: 0,\n  width: '100%',\n  maxHeight: '85%'\n}\n\nconst positionX = {\n  top: 0,\n  height: '100%',\n  width: 'var(--drawer-content-width, 100%)',\n  maxWidth: '100%'\n}\n\nexport const StyledContent = styled(Content, {\n  bg: '$base1',\n  boxShadow: '$2',\n  position: 'fixed',\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    animationTimingFunction: 'ease-out',\n    animationDuration: '250ms'\n  },\n  variants: {\n    position: {\n      top: {\n        top: 0,\n        ...positionY,\n        ...setupAnimation(animationTop)\n      },\n      right: {\n        right: 0,\n        ...positionX,\n        ...setupAnimation(animationRight)\n      },\n      bottom: {\n        bottom: 0,\n        ...positionY,\n        ...setupAnimation(animationBottom)\n      },\n      left: {\n        left: 0,\n        ...positionX,\n        ...setupAnimation(animationLeft)\n      }\n    },\n    size: {\n      xs: {\n        '--drawer-content-width': '240px'\n      },\n      sm: {\n        '--drawer-content-width': '256px'\n      },\n      md: {\n        '--drawer-content-width': '288px'\n      },\n      lg: {\n        '--drawer-content-width': '304px'\n      },\n      xl: {\n        '--drawer-content-width': '320px'\n      }\n    }\n  }\n})\n\nexport const DrawerContent: React.FC<\n  React.ComponentProps<typeof StyledContent>\n> = ({ children, ...rest }) => {\n  const { position } = React.useContext(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ColorScheme base=\"grey1\" accent=\"primary1\" asChild>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <Flex direction=\"column\">{children}</Flex>\n        </StyledContent>\n      </ColorScheme>\n    </Portal>\n  )\n}\n"],"names":["animationTop","slideInOut","animationRight","animationBottom","animationLeft","setupAnimation","animation","positionY","positionX","StyledContent","styled","Content","DIALOG_Z_INDEX","DrawerContent","children","rest","position","React","DrawerContext","Portal","DrawerOverlay","ColorScheme","Flex"],"mappings":"imBAYA,MAAMA,EAAeC,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,OAAQ,CAAE,CAAC,EAC/DC,EAAiBD,EAAW,CAAE,YAAa,CAAE,EAAG,OAAQ,EAAG,CAAE,CAAE,CAAC,EAChEE,EAAkBF,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,MAAO,CAAE,CAAC,EACjEG,EAAgBH,EAAW,CAAE,YAAa,CAAE,EAAG,QAAS,EAAG,CAAE,CAAE,CAAC,EAChEI,EAAkBC,IACf,CACL,uBAAwB,CACtB,cAAeA,EAAU,EAC3B,EACA,yBAA0B,CACxB,cAAeA,EAAU,GAC3B,CACF,GAGIC,EAAY,CAChB,KAAM,EACN,MAAO,OACP,UAAW,KACb,EAEMC,EAAY,CAChB,IAAK,EACL,OAAQ,OACR,MAAO,oCACP,SAAU,MACZ,EAEaC,EAAgBC,EAAOC,EAAS,CAC3C,GAAI,SACJ,UAAW,KACX,SAAU,QACV,OAAQC,EACR,eAAgB,CACd,wBAAyB,WACzB,kBAAmB,OACrB,EACA,SAAU,CACR,SAAU,CACR,IAAK,CACH,IAAK,EACL,GAAGL,EACH,GAAGF,EAAeL,CAAY,CAChC,EACA,MAAO,CACL,MAAO,EACP,GAAGQ,EACH,GAAGH,EAAeH,CAAc,CAClC,EACA,OAAQ,CACN,OAAQ,EACR,GAAGK,EACH,GAAGF,EAAeF,CAAe,CACnC,EACA,KAAM,CACJ,KAAM,EACN,GAAGK,EACH,GAAGH,EAAeD,CAAa,CACjC,CACF,EACA,KAAM,CACJ,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,CACF,CACF,CACF,CAAC,EAEYS,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7B,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAM,WAAWC,CAAa,EAEnD,OACED,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,IAAc,EACfH,EAAA,cAACI,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAW,QAAO,EAAA,EACjDJ,EAAA,cAACR,GAAc,KAAK,KAAK,SAAUO,EAAW,GAAGD,EAAM,QAAO,EAAA,EAC5DE,EAAA,cAACK,EAAA,CAAK,UAAU,QAAUR,EAAAA,CAAS,CACrC,CACF,CACF,CAEJ"}

package/dist/components/drawer/DrawerFooter.d.ts

@@ -16,9 +16,10 @@ export declare const DrawerFooter: import("@stitches/react/types/styled-componen
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -165,11 +166,6 @@ export declare const DrawerFooter: import("@stitches/react/types/styled-componen
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -178,6 +174,10 @@ export declare const DrawerFooter: import("@stitches/react/types/styled-componen
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -201,6 +201,18 @@ export declare const DrawerFooter: import("@stitches/react/types/styled-componen
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/drawer/DrawerHeader.d.ts

@@ -16,9 +16,10 @@ export declare const DrawerHeader: import("@stitches/react/types/styled-componen
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -165,11 +166,6 @@ export declare const DrawerHeader: import("@stitches/react/types/styled-componen
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -178,6 +174,10 @@ export declare const DrawerHeader: import("@stitches/react/types/styled-componen
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -201,6 +201,18 @@ export declare const DrawerHeader: import("@stitches/react/types/styled-componen
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/drawer/DrawerMain.d.ts

@@ -16,9 +16,10 @@ export declare const DrawerMain: import("@stitches/react/types/styled-component"
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -165,11 +166,6 @@ export declare const DrawerMain: import("@stitches/react/types/styled-component"
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -178,6 +174,10 @@ export declare const DrawerMain: import("@stitches/react/types/styled-component"
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -201,6 +201,18 @@ export declare const DrawerMain: import("@stitches/react/types/styled-component"
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;