@atom-learning/components 3.26.1 → 3.27.0-beta.1

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

@@ -751,7 +751,7 @@ export declare const TopBarBrandName: import("@stitches/react/types/styled-compo
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const TopBarBrand: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {
+declare const StyledTopBarBrand: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {
     sm: string;
     md: string;
     lg: string;
@@ -1118,4 +1118,5 @@ export declare const TopBarBrand: import("@stitches/react/types/styled-component
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
+export declare const TopBarBrand: ({ href, ...props }: React.ComponentProps<typeof StyledTopBarBrand>) => JSX.Element;
 export {};

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

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

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

@@ -1 +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"}
+{"version":3,"file":"TopBarBrand.js","sources":["../../../src/components/top-bar/TopBarBrand.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useRouter } from '~/context/router'\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  <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\nTopBarBrandLogo.toString = () => '.topbar-brand-logo'\n\nexport const TopBarBrandName = styled(Text, {\n  color: '$tonal400'\n})\n\nconst StyledTopBarBrand = styled('a', {\n  display: 'flex',\n  alignItems: 'center',\n  textDecoration: 'none',\n  color: '$tonal400',\n  '&:hover, &:focus': { textDecoration: 'none' }\n})\n\nexport const TopBarBrand = ({\n  href,\n  ...props\n}: React.ComponentProps<typeof StyledTopBarBrand>) => {\n  const { RouterLink } = useRouter({ href })\n  return <StyledTopBarBrand as={RouterLink} href={href} {...props} />\n}\n"],"names":["TopBarBrandLogo","src","alt","css","React","Image","TopBarBrandName","styled","Text","StyledTopBarBrand","TopBarBrand","href","props","RouterLink","useRouter"],"mappings":"2MAcO,MAAMA,EAAkB,CAAC,CAC9B,IAAAC,EACA,IAAAC,EAAM,qBACN,IAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CACC,UAAU,oBACV,IAAKJ,EACL,IAAKC,EACL,IAAK,CACH,GAAI,KACJ,GAAI,MACJ,GAAGC,CACL,CAAA,CACF,EAGFH,EAAgB,SAAW,IAAM,qBAE1B,MAAMM,EAAkBC,EAAOC,EAAM,CAC1C,MAAO,WACT,CAAC,EAEKC,EAAoBF,EAAO,IAAK,CACpC,QAAS,OACT,WAAY,SACZ,eAAgB,OAChB,MAAO,YACP,mBAAoB,CAAE,eAAgB,MAAO,CAC/C,CAAC,EAEYG,EAAc,CAAC,CAC1B,KAAAC,KACGC,CACL,IAAsD,CACpD,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAU,CAAE,KAAAH,CAAK,CAAC,EACzC,OAAOP,EAAA,cAACK,EAAA,CAAkB,GAAII,EAAY,KAAMF,EAAO,GAAGC,CAAAA,CAAO,CACnE"}

package/dist/context/router/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const RouterProvider: ({ children, Link }: {
+    children: any;
+    Link: any;
+}) => JSX.Element;
+export declare const useRouter: ({ href }: {
+    href?: string | undefined;
+}) => {
+    RouterLink: string | ((props: any) => JSX.Element);
+};

package/dist/context/router/index.js

@@ -0,0 +1,2 @@
+import*as r from"react";import{isExternalUrl as n}from"../../utilities/uri/index.js";const o=r.createContext({Link:e=>r.createElement("a",{...e})}),i=({children:e,Link:t})=>r.createElement(o.Provider,{value:{Link:t}},e),a=({href:e})=>{const{Link:t}=r.useContext(o);return{RouterLink:n(e)?"a":t}};export{i as RouterProvider,a as useRouter};
+//# sourceMappingURL=index.js.map

package/dist/context/router/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/context/router/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { isExternalUrl } from '~/utilities/uri'\n\nconst RouterContext = React.createContext({\n  // eslint-disable-next-line jsx-a11y/anchor-has-content\n  Link: (props) => <a {...props} />\n})\n\nexport const RouterProvider = ({ children, Link }) => (\n  <RouterContext.Provider value={{ Link }}>{children}</RouterContext.Provider>\n)\n\nexport const useRouter = ({ href }: { href?: string }) => {\n  const { Link: RouterLink } = React.useContext(RouterContext)\n\n  return {\n    RouterLink: isExternalUrl(href) ? 'a' : RouterLink\n  }\n}\n"],"names":["RouterContext","React","props","RouterProvider","children","Link","useRouter","href","RouterLink","isExternalUrl"],"mappings":"qFAGA,MAAMA,EAAgBC,EAAM,cAAc,CAExC,KAAOC,GAAUD,EAAA,cAAC,IAAG,CAAA,GAAGC,CAAO,CAAA,CACjC,CAAC,EAEYC,EAAiB,CAAC,CAAE,SAAAC,EAAU,KAAAC,CAAK,IAC9CJ,EAAA,cAACD,EAAc,SAAd,CAAuB,MAAO,CAAE,KAAAK,CAAK,CAAID,EAAAA,CAAS,EAGxCE,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAyB,CACxD,KAAM,CAAE,KAAMC,CAAW,EAAIP,EAAM,WAAWD,CAAa,EAE3D,MAAO,CACL,WAAYS,EAAcF,CAAI,EAAI,IAAMC,CAC1C,CACF"}