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

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

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

package/dist/components/tooltip/TooltipContent.js

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

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

@@ -1 +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: '$grey900',\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: '$grey900',\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 = ({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  size = 'md',\n  ...remainingProps\n}: TooltipContentProps) => (\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":"kdAYA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,gBAAiB,WACjB,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,WACN,uBAAwB,CAAE,GAAI,IAAK,EACnC,yBAA0B,CAAE,GAAI,IAAK,CACvC,CAAC,EAKYC,EAAiB,CAAC,CAC7B,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"}
+{"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 { styled } from '~/stitches'\nimport {\n  slideDownAndFade,\n  slideLeftAndFade,\n  slideRightAndFade,\n  slideUpAndFade\n} from '~/utilities'\n\nconst StyledContent = styled(Content, {\n  backgroundColor: '$grey900',\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: 10,\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: '$grey900',\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 = ({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  size = 'md',\n  ...remainingProps\n}: TooltipContentProps) => (\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","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","TooltipContent","children","side","sideOffset","size","remainingProps","React"],"mappings":"oZAWA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,gBAAiB,WACjB,aAAc,KACd,UAAW,KACX,MAAO,QACP,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,WAAY,SACZ,GAAI,KACJ,GAAI,KACJ,OAAQ,GACR,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,EAAcN,EAAOO,EAAO,CAChC,KAAM,WACN,uBAAwB,CAAE,GAAI,IAAK,EACnC,yBAA0B,CAAE,GAAI,IAAK,CACvC,CAAC,EAKYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACf,EAAA,CACC,KAAMW,EACN,WAAYC,EACZ,KAAMC,EACL,GAAGC,GAEHJ,EACDK,EAAA,cAACR,EAAA,IAAY,CACf"}

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

@@ -29,6 +29,8 @@ declare const StyledRoot: import("@atom-learning/stitches-react/types/styled-com
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -407,6 +409,8 @@ export declare const TopBar: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -785,6 +789,8 @@ export declare const TopBar: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1156,6 +1162,8 @@ export declare const TopBar: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1504,7 +1512,7 @@ export declare const TopBar: {
     ActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+        theme?: "white" | "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         isRounded?: boolean | "true" | undefined;
@@ -1533,6 +1541,8 @@ export declare const TopBar: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1879,7 +1889,7 @@ export declare const TopBar: {
             };
         }> | undefined;
     }, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
+        theme?: "white" | "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         isRounded?: boolean | "true" | undefined;

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

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as o}from"../../stitches.js";import{useWindowScrollPosition as p}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as c}from"../flex/Flex.js";import{colorSchemes as l}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as f}from"./TopBarActionIcon.js";import{TopBarBrand as h,TopBarBrandLogo as x,TopBarBrandName as g}from"./TopBarBrand.js";const b=()=>r.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),u=o("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",zIndex:1,transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1)"}},size:{md:{height:"$6"},lg:{height:"$7"}},diffused:{true:{"@supports (background-color: color-mix(in hsl, white 50%, transparent))":{bg:"color-mix(in hsl, $background 70%, transparent)",backdropFilter:"blur(8px)"}}},appearance:{standard:{width:"100vw",maxWidth:"100%",top:"0",borderBottom:"1px solid $borderBottom"},rounded:{width:"100%",top:"$2",p:"$2",border:"1px solid #ffffff",borderRadius:"$round"}}}}),B=o(c,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",diffused:a,className:i=l.light,appearance:d="standard",...n})=>{const{y:s}=p();return r.createElement(u,{className:i,hasScrolled:!!s,diffused:a,appearance:d,size:t},r.createElement(B,{...n}))},$=Object.assign(e,{Brand:h,BrandLogo:x,BrandName:g,ActionIcon:f,Divider:b});e.displayName="TopBar";export{$ as TopBar};
+import*as r from"react";import{styled as o}from"../../stitches.js";import{useWindowScrollPosition as p}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as c}from"../flex/Flex.js";import{colorSchemes as l}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as f}from"./TopBarActionIcon.js";import{TopBarBrand as h,TopBarBrandLogo as x,TopBarBrandName as g}from"./TopBarBrand.js";const b=()=>r.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),u=o("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",zIndex:1,transition:"box-shadow 200ms ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1)"}},size:{md:{height:"$6"},lg:{height:"$7"}},diffused:{true:{"@supports (background-color: color-mix(in hsl, white 50%, transparent))":{bg:"color-mix(in hsl, $background 70%, transparent)",backdropFilter:"blur(8px)"}}},appearance:{standard:{width:"100vw",maxWidth:"100%",top:"0",borderBottom:"1px solid $borderBottom"},rounded:{width:"100%",top:"$2",p:"$2",border:"1px solid #ffffff",borderRadius:"$round"}}}}),B=o(c,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",diffused:a,className:i=l.light,appearance:d="standard",...n})=>{const{y:s}=p();return r.createElement(u,{className:i,hasScrolled:!!s,diffused:a,appearance:d,size:t},r.createElement(B,{...n}))},$=Object.assign(e,{Brand:h,BrandLogo:x,BrandName:g,ActionIcon:f,Divider:b});e.displayName="TopBar";export{$ as TopBar};
 //# sourceMappingURL=TopBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as 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 { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n  bg: '$background',\n  position: 'sticky',\n  display: 'flex',\n  alignItems: 'center',\n\n  zIndex: 1,\n  transition: 'box-shadow .2s ease-out',\n  variants: {\n    hasScrolled: {\n      true: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1)' }\n    },\n    size: {\n      md: { height: '$6' },\n      lg: { height: '$7' }\n    },\n    diffused: {\n      true: {\n        '@supports (background-color: color-mix(in hsl, white 50%, transparent))':\n          {\n            bg: 'color-mix(in hsl, $background 70%, transparent)',\n            backdropFilter: 'blur(8px)'\n          }\n      }\n    },\n    appearance: {\n      standard: {\n        width: '100vw',\n        maxWidth: '100%',\n        top: '0',\n        borderBottom: '1px solid $borderBottom'\n      },\n      rounded: {\n        width: '100%',\n        top: '$2',\n        p: '$2',\n        border: '1px solid #ffffff',\n        borderRadius: '$round'\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\ntype TopBarProps = StyledRootProps & {\n  css?: CSS\n  className?: string\n}\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  className = topBarColorSchemes['light'],\n  appearance = 'standard',\n  ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot\n      className={className}\n      hasScrolled={!!scrollPositionY}\n      diffused={diffused}\n      appearance={appearance}\n      size={size}\n    >\n      <Container {...props} />\n    </StyledRoot>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","diffused","className","topBarColorSchemes","appearance","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,CAAA,CAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SAEZ,OAAQ,EACR,WAAY,0BACZ,SAAU,CACR,YAAa,CACX,KAAM,CAAE,UAAW,wCAAyC,CAC9D,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,SAAU,CACR,KAAM,CACJ,0EACE,CACE,GAAI,kDACJ,eAAgB,WAClB,CACJ,CACF,EACA,WAAY,CACV,SAAU,CACR,MAAO,QACP,SAAU,OACV,IAAK,IACL,aAAc,yBAChB,EACA,QAAS,CACP,MAAO,OACP,IAAK,KACL,EAAG,KACH,OAAQ,oBACR,aAAc,QAChB,CACF,CACF,CACF,CAAC,EAEKC,EAAYD,EAAOE,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,SAAAC,EACA,UAAAC,EAAYC,EAAmB,MAC/B,WAAAC,EAAa,cACVC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAwB,EAEvD,OACEd,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACI,EACf,SAAUL,EACV,WAAYG,EACZ,KAAMJ,CAENP,EAAAA,EAAA,cAACI,EAAA,CAAW,GAAGQ,CAAAA,CAAO,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOT,EAAiB,CACnD,MAAOU,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASpB,CACX,CAAC,EAEDO,EAAgB,YAAc"}
+{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as 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 { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n  bg: '$background',\n  position: 'sticky',\n  display: 'flex',\n  alignItems: 'center',\n\n  zIndex: 1,\n  transition: 'box-shadow 200ms ease-out',\n  variants: {\n    hasScrolled: {\n      true: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1)' }\n    },\n    size: {\n      md: { height: '$6' },\n      lg: { height: '$7' }\n    },\n    diffused: {\n      true: {\n        '@supports (background-color: color-mix(in hsl, white 50%, transparent))':\n          {\n            bg: 'color-mix(in hsl, $background 70%, transparent)',\n            backdropFilter: 'blur(8px)'\n          }\n      }\n    },\n    appearance: {\n      standard: {\n        width: '100vw',\n        maxWidth: '100%',\n        top: '0',\n        borderBottom: '1px solid $borderBottom'\n      },\n      rounded: {\n        width: '100%',\n        top: '$2',\n        p: '$2',\n        border: '1px solid #ffffff',\n        borderRadius: '$round'\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\ntype TopBarProps = StyledRootProps & {\n  css?: CSS\n  className?: string\n}\n\nconst TopBarComponent = ({\n  size = 'md',\n  diffused,\n  className = topBarColorSchemes['light'],\n  appearance = 'standard',\n  ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot\n      className={className}\n      hasScrolled={!!scrollPositionY}\n      diffused={diffused}\n      appearance={appearance}\n      size={size}\n    >\n      <Container {...props} />\n    </StyledRoot>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","diffused","className","topBarColorSchemes","appearance","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,CAAA,CAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SAEZ,OAAQ,EACR,WAAY,4BACZ,SAAU,CACR,YAAa,CACX,KAAM,CAAE,UAAW,wCAAyC,CAC9D,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,SAAU,CACR,KAAM,CACJ,0EACE,CACE,GAAI,kDACJ,eAAgB,WAClB,CACJ,CACF,EACA,WAAY,CACV,SAAU,CACR,MAAO,QACP,SAAU,OACV,IAAK,IACL,aAAc,yBAChB,EACA,QAAS,CACP,MAAO,OACP,IAAK,KACL,EAAG,KACH,OAAQ,oBACR,aAAc,QAChB,CACF,CACF,CACF,CAAC,EAEKC,EAAYD,EAAOE,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,SAAAC,EACA,UAAAC,EAAYC,EAAmB,MAC/B,WAAAC,EAAa,cACVC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAwB,EAEvD,OACEd,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACI,EACf,SAAUL,EACV,WAAYG,EACZ,KAAMJ,CAENP,EAAAA,EAAA,cAACI,EAAA,CAAW,GAAGQ,CAAAA,CAAO,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOT,EAAiB,CACnD,MAAOU,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASpB,CACX,CAAC,EAEDO,EAAgB,YAAc"}

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

@@ -33,6 +33,8 @@ export declare const TopBarBrandName: import("@atom-learning/stitches-react/type
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -404,6 +406,8 @@ export declare const TopBarBrandName: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -773,6 +777,8 @@ export declare const TopBarBrand: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;