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

package/dist/components/side-bar/SideBarComponents.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare const SideBarHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: string;
     md: string;
@@ -1100,7 +1100,7 @@ export declare const SideBarFooter: import("@stitches/react/types/styled-compone
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const SideBarBrand: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {
+declare const StyledSideBarBrand: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {
     sm: string;
     md: string;
     lg: string;
@@ -1467,9 +1467,10 @@ export declare const SideBarBrand: import("@stitches/react/types/styled-componen
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
+export declare const SideBarBrand: ({ href, ...props }: React.ComponentProps<typeof StyledSideBarBrand>) => JSX.Element;
 export declare const SideBarBrandLogo: {
-    (props: Omit<Pick<Omit<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement>> & {
-        ref?: ((instance: HTMLImageElement | null) => void) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    (props: Omit<Pick<Omit<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & {
+        ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
     }, "css" | "fluid"> & import("@stitches/react/types/styled-component").TransformProps<{
         fluid?: boolean | "true" | undefined;
     }, {
@@ -1840,13 +1841,13 @@ export declare const SideBarBrandLogo: {
                 marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "css" | "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "fluid">, "as"> & {
+    }, "css" | "key" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "fluid">, "as"> & {
         as?: undefined;
     }): JSX.Element;
     displayName: string;
 };
-export declare const SideBarBrandName: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof import("react").HTMLAttributes<HTMLParagraphElement>> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+export declare const SideBarBrandName: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
     size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
     noCapsize?: boolean | "true" | undefined;
@@ -2219,7 +2220,7 @@ export declare const SideBarBrandName: import("@stitches/react/types/styled-comp
         };
     }> | undefined;
 }, "as"> & {
-    as?: import("react").ElementType<any> | import("react").ComponentType<{}> | undefined;
+    as?: React.ElementType<any> | React.ComponentType<{}> | undefined;
 }>, {}, {
     sm: string;
     md: string;
@@ -2587,3 +2588,4 @@ export declare const SideBarBrandName: import("@stitches/react/types/styled-comp
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
+export {};

package/dist/components/side-bar/SideBarComponents.js

@@ -1,2 +1,2 @@
-import{styled as o}from"../../stitches.js";import{Image as e}from"../image/Image.js";import{Text as r}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"flex-end",color:"$text",display:"flex",gap:"$4",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),n=e,p=o(r,{color:"$text",whiteSpace:"nowrap"});export{t as SideBarBody,a as SideBarBrand,n as SideBarBrandLogo,p as SideBarBrandName,i as SideBarFooter,d as SideBarHeader};
+import*as d from"react";import{useRouter as i}from"../../context/router/index.js";import{styled as o}from"../../stitches.js";import{Image as a}from"../image/Image.js";import{Text as n}from"../text/Text.js";const p=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),m=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),f=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),l=o("a",{alignItems:"flex-end",color:"$text",display:"flex",gap:"$4",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),s=({href:e,...r})=>{const{RouterLink:t}=i({href:e});return d.createElement(l,{as:t,href:e,...r})},c=a,x=o(n,{color:"$text",whiteSpace:"nowrap"});export{m as SideBarBody,s as SideBarBrand,c as SideBarBrandLogo,x as SideBarBrandName,f as SideBarFooter,p as SideBarHeader};
 //# sourceMappingURL=SideBarComponents.js.map

package/dist/components/side-bar/SideBarComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n  borderBottom: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n  flexGrow: 1,\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n  borderTop: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n  alignItems: 'flex-end',\n  color: '$text',\n  display: 'flex',\n  gap: '$4',\n  textDecoration: 'none',\n  '&:hover, &:focus': {\n    textDecoration: 'none'\n  }\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  color: '$text',\n  whiteSpace: 'nowrap'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"4HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,WAAY,WACZ,MAAO,QACP,QAAS,OACT,IAAK,KACL,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,MAAO,QACP,WAAY,QACd,CAAC"}
+{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useRouter } from '~/context/router'\nimport { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n  borderBottom: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n  flexGrow: 1,\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n  borderTop: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nconst StyledSideBarBrand = styled('a', {\n  alignItems: 'flex-end',\n  color: '$text',\n  display: 'flex',\n  gap: '$4',\n  textDecoration: 'none',\n  '&:hover, &:focus': {\n    textDecoration: 'none'\n  }\n})\nexport const SideBarBrand = ({\n  href,\n  ...props\n}: React.ComponentProps<typeof StyledSideBarBrand>) => {\n  const { RouterLink } = useRouter({ href })\n  return <StyledSideBarBrand as={RouterLink} href={href} {...props} />\n}\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  color: '$text',\n  whiteSpace: 'nowrap'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","StyledSideBarBrand","SideBarBrand","href","props","RouterLink","useRouter","React","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"8MAQa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEKG,EAAqBH,EAAO,IAAK,CACrC,WAAY,WACZ,MAAO,QACP,QAAS,OACT,IAAK,KACL,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EACYI,EAAe,CAAC,CAC3B,KAAAC,KACGC,CACL,IAAuD,CACrD,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAU,CAAE,KAAAH,CAAK,CAAC,EACzC,OAAOI,EAAA,cAACN,EAAA,CAAmB,GAAII,EAAY,KAAMF,EAAO,GAAGC,CAAAA,CAAO,CACpE,EAEaI,EAAmBC,EAEnBC,EAAmBZ,EAAOa,EAAM,CAC3C,MAAO,QACP,WAAY,QACd,CAAC"}

package/dist/components/tile-interactive/TileInteractive.js

@@ -1,2 +1,2 @@
-import e from"react";import{Tile as n}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const p=l.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(n,{"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit",pointerEvents:"none"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...c()}}}),r=e.forwardRef(({onClick:t,href:o,type:i="button",...a},s)=>e.createElement(p,{...a,...o?{as:"a",href:o,onClick:void 0}:{as:"button",type:i,onClick:t},ref:s}));r.displayName="TileInteractive";export{r as TileInteractive};
+import e from"react";import{Tile as c}from"../tile/Tile.js";import"../flex/Flex.js";import{useRouter as l}from"../../context/router/index.js";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const f=m.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(c,{"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit",pointerEvents:"none"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...p()}}}),r=e.forwardRef(({onClick:t,href:o,type:i="button",...a},s)=>{const{RouterLink:n}=l({href:o});return e.createElement(f,{...a,...o?{as:n,href:o,onClick:void 0}:{as:"button",type:i,onClick:t},ref:s})});r.displayName="TileInteractive";export{r as TileInteractive};
 //# sourceMappingURL=TileInteractive.js.map

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    transform: 'translateY(0)',\n    transition: 'transform 250ms ease',\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      boxShadow: '$2',\n      opacity: 0,\n      transition: 'opacity 250ms ease-out',\n      borderRadius: 'inherit',\n      pointerEvents: 'none'\n    },\n    '&:hover': {\n      transform: 'translateY(-$space$0)',\n      '&::after': {\n        opacity: 1\n      }\n    },\n    '&:active': {\n      bg: '$base2'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n  React.forwardRef(({ onClick, href, type = 'button', ...rest }, ref) => {\n    const isLink = !!href\n    const elementSpecificProps = isLink\n      ? {\n          as: 'a' as React.ElementType,\n          href,\n          onClick: undefined\n        }\n      : { as: 'button' as React.ElementType, type, onClick }\n\n    return (\n      <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n    )\n  })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref"],"mappings":"mZAOA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,YAAaC,CAAK,EAAGC,IAW3DL,EAAA,cAACN,EAAA,CAAuB,GAAGU,EAAO,GAVnBF,EAEb,CACE,GAAI,IACJ,KAAAA,EACA,QAAS,MACX,EACA,CAAE,GAAI,SAA+B,KAAAC,EAAM,QAAAF,CAAQ,EAGM,IAAKI,CAAAA,CAAK,CAExE,EAEHN,EAAgB,YAAc"}
+{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { useRouter } from '~/context/router'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    transform: 'translateY(0)',\n    transition: 'transform 250ms ease',\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      boxShadow: '$2',\n      opacity: 0,\n      transition: 'opacity 250ms ease-out',\n      borderRadius: 'inherit',\n      pointerEvents: 'none'\n    },\n    '&:hover': {\n      transform: 'translateY(-$space$0)',\n      '&::after': {\n        opacity: 1\n      }\n    },\n    '&:active': {\n      bg: '$base2'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> &\n  React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n  React.forwardRef(({ onClick, href, type = 'button', ...rest }, ref) => {\n    const { RouterLink } = useRouter({ href })\n\n    const elementSpecificProps = href\n      ? {\n          as: RouterLink,\n          href,\n          onClick: undefined\n        }\n      : {\n          as: 'button' as React.ElementType,\n          type,\n          onClick\n        }\n\n    return (\n      <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n    )\n  })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref","RouterLink","useRouter"],"mappings":"6cAQA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,GACL,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,YAAaC,CAAK,EAAGC,IAAQ,CACrE,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAU,CAAE,KAAAL,CAAK,CAAC,EAczC,OACEF,EAAA,cAACN,EAAA,CAAuB,GAAGU,EAAO,GAbPF,EACzB,CACE,GAAII,EACJ,KAAAJ,EACA,QAAS,MACX,EACA,CACE,GAAI,SACJ,KAAAC,EACA,QAAAF,CACF,EAGyD,IAAKI,CAAK,CAAA,CAEzE,CAAC,EAEHN,EAAgB,YAAc"}