@atom-learning/components 3.12.4 → 3.12.7

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

@@ -1,2 +1,2 @@
-import r from"react";import{styled as e}from"../../stitches.js";import{useWindowScrollPosition as d}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as n}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 p}from"./TopBarActionIcon.js";import{TopBarBrandLogo as t,TopBarBrand as h,TopBarBrandName as g}from"./TopBarBrand.js";const B=()=>r.createElement(n,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),x=e("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $borderBottom",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6",[`& ${t}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${t}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),$=e(c,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",className:a=l.light,...m})=>{const{y:s}=d();return r.createElement(x,{className:a,hasScrolled:!!s,size:i},r.createElement($,{...m}))};o.Brand=h,o.BrandLogo=t,o.BrandName=g,o.ActionIcon=p,o.Divider=B,o.displayName="TopBar";export{o as TopBar};
+import o from"react";import{styled as t}from"../../stitches.js";import{useWindowScrollPosition as n}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as d}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 p}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as h,TopBarBrandName as g}from"./TopBarBrand.js";const B=()=>o.createElement(d,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),x=t("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $borderBottom",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"}}}}}}),$=t(c,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),r=({size:i="md",className:a=l.light,...s})=>{const{y:m}=n();return o.createElement(x,{className:a,hasScrolled:!!m,size:i},o.createElement($,{...s}))},f=Object.assign(r,{Brand:h,BrandLogo:e,BrandName:g,ActionIcon:p,Divider:B});r.displayName="TopBar";export{f 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 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\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: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n  bg: '$background',\n  position: 'sticky',\n  display: 'flex',\n  alignItems: 'center',\n  width: '100vw',\n  top: '0',\n  zIndex: 1,\n  borderBottom: '1px solid $borderBottom',\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  className?: string\n}\n\nexport const TopBar: React.FC<TopBarProps> & TopBarSubComponents = ({\n  size = 'md',\n  className = topBarColorSchemes['light'],\n  ...props\n}) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot\n      className={className}\n      hasScrolled={!!scrollPositionY}\n      size={size}\n    >\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","className","topBarColorSchemes","props","scrollPositionY","useWindowScrollPosition","TopBarBrand","TopBarBrandName","TopBarActionIcon"],"mappings":"2cAmBA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,EAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SACZ,MAAO,QACP,IAAK,IACL,OAAQ,EACR,aAAc,0BACd,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,EASYC,EAAsD,CAAC,CAClE,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,SAC5BC,CACL,IAAM,CACJ,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAE/B,EAAA,OACEb,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACG,EACf,KAAMJ,CAENR,EAAAA,EAAA,cAACK,EAAA,CAAW,GAAGM,CAAO,CAAA,CACxB,CAEJ,EAEAJ,EAAO,MAAQO,EACfP,EAAO,UAAYH,EACnBG,EAAO,UAAYQ,EACnBR,EAAO,WAAaS,EACpBT,EAAO,QAAUR,EAEjBQ,EAAO,YAAc"}
+{"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 { 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  width: '100vw',\n  top: '0',\n  zIndex: 1,\n  borderBottom: '1px solid $borderBottom',\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  className?: string\n}\n\nconst TopBarComponent = ({\n  size = 'md',\n  className = topBarColorSchemes['light'],\n  ...props\n}: TopBarProps) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot\n      className={className}\n      hasScrolled={!!scrollPositionY}\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","TopBarBrandLogo","Container","Flex","TopBarComponent","size","className","topBarColorSchemes","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandName","TopBarActionIcon"],"mappings":"2cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,EAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SACZ,MAAO,QACP,IAAK,IACL,OAAQ,EACR,aAAc,0BACd,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,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,SAC5BC,CACL,IAAmB,CACjB,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAwB,EAEvD,OACEb,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACG,EACf,KAAMJ,CAAAA,EAENR,EAAA,cAACK,EAAA,CAAW,GAAGM,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOP,EAAiB,CACnD,MAAOQ,EACP,UAAWX,EACX,UAAWY,EACX,WAAYC,EACZ,QAASlB,CACX,CAAC,EAEDQ,EAAgB,YAAc"}