@atom-learning/components 2.66.9 → 2.66.11

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## [2.66.9](https://github.com/Atom-Learning/components/compare/v2.66.8...v2.66.9) (2023-09-01)
+## [2.66.11](https://github.com/Atom-Learning/components/compare/v2.66.10...v2.66.11) (2023-09-01)
 
 
 ### Bug Fixes
 
-* truncation issue with higher pagesCount relative to visibleElementsCount ([7623ea6](https://github.com/Atom-Learning/components/commit/7623ea63ce69337a352ad072fdf8a46ded08936e))
+* allow null or undefined as children for BannerRegularActions ([ff9c435](https://github.com/Atom-Learning/components/commit/ff9c435796043ea7e301797fcc40886c8a6e9580))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/banner/banner-regular/BannerRegularActions.js

@@ -1,2 +1,2 @@
-import i from"invariant";import*as n from"react";import{overrideStitchesVariantValue as c}from"../../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{Stack as u}from"../../stack/Stack.js";import{useBannerContext as y}from"../BannerContext.js";import{BannerRegularButton as r}from"./BannerRegularButton.js";const m=2,f={sm:2,md:4},t=({children:o,...l})=>{const{size:a}=y(),p=n.useMemo(()=>c(a,e=>f[e]),[a]);return i(n.Children.count(o)<=m,`A maximum of ${m} ${r.displayName} component(s) are permitted as children of ${t.displayName}`),n.createElement(u,{gap:p,...l},n.Children.map(o,(e,s)=>{if(!n.isValidElement(e))throw new Error(`Child passed to ${t.displayName} is not a valid element`);i(e.type===r,`Children of type ${e==null?void 0:e.type} aren't permitted. Only an ${r.displayName} component is allowed in ${t.displayName}`);const d={appearance:s>0?"outline":void 0};return n.cloneElement(e,d)}))};t.displayName="BannerRegularActions";export{t as BannerRegularActions};
+import i from"invariant";import*as n from"react";import{overrideStitchesVariantValue as c}from"../../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{Stack as u}from"../../stack/Stack.js";import{useBannerContext as y}from"../BannerContext.js";import{BannerRegularButton as t}from"./BannerRegularButton.js";const m=2,f={sm:2,md:4},r=({children:o,...l})=>{const{size:a}=y(),p=n.useMemo(()=>c(a,e=>f[e]),[a]);return i(n.Children.count(o)<=m,`A maximum of ${m} ${t.displayName} component(s) are permitted as children of ${r.displayName}`),n.createElement(u,{gap:p,...l},n.Children.map(o,(e,s)=>{if(e==null)return e;if(!n.isValidElement(e))throw new Error(`Child passed to ${r.displayName} is not a valid element`);i(e.type===t,`Children of type ${e==null?void 0:e.type} aren't permitted. Only an ${t.displayName} component is allowed in ${r.displayName}`);const d={appearance:s>0?"outline":void 0};return n.cloneElement(e,d)}))};r.displayName="BannerRegularActions";export{r as BannerRegularActions};
 //# sourceMappingURL=BannerRegularActions.js.map

package/dist/components/banner/banner-regular/BannerRegularActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Stack } from '../../stack'\nimport { useBannerContext } from '../BannerContext'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n  sm: 2,\n  md: 4\n}\n\nexport const BannerRegularActions: React.FC<\n  React.ComponentProps<typeof Stack>\n> = ({ children, ...props }) => {\n  const { size } = useBannerContext()\n\n  const gap = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toGap[s]),\n    [size]\n  )\n\n  invariant(\n    React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n    `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n  )\n\n  return (\n    <Stack gap={gap} {...props}>\n      {React.Children.map(children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n          )\n        }\n\n        invariant(\n          child.type === BannerRegularButton,\n          `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n        )\n\n        const propsToInject: Partial<\n          React.ComponentProps<typeof BannerRegularButton>\n        > = {\n          // Override button appearance - make the second button outlined\n          appearance: index > 0 ? 'outline' : undefined\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof BannerRegularButton>\n          >,\n          propsToInject\n        )\n      })}\n    </Stack>\n  )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"names":["MAX_ALLOWED_CHILDREN","toGap","BannerRegularActions","children","props","size","useBannerContext","gap","React","overrideStitchesVariantValue","s","invariant","BannerRegularButton","Stack","child","index","propsToInject"],"mappings":"sVASA,MAAMA,EAAuB,EAEvBC,EAAQ,CACZ,GAAI,EACJ,GAAI,CACN,EAEaC,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAM,IAAM,CAC9B,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAEXC,EAAAA,EAAMC,EAAM,QAChB,IAAMC,EAA6BJ,EAAOK,GAAMT,EAAMS,EAAE,EACxD,CAACL,CAAI,CACP,EAEA,OAAAM,EACEH,EAAM,SAAS,MAAML,CAAQ,GAAKH,EAClC,gBAAgBA,KAAwBY,EAAoB,yDAAyDV,EAAqB,aAC5I,EAGEM,EAAA,cAACK,EAAA,CAAM,IAAKN,EAAM,GAAGH,CAAAA,EAClBI,EAAM,SAAS,IAAIL,EAAU,CAACW,EAAOC,IAAU,CAC9C,GAAI,CAACP,EAAM,eAAeM,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBZ,EAAqB,oCAC1C,EAGFS,EACEG,EAAM,OAASF,EACf,oBAAoBE,GAAA,YAAAA,EAAO,kCAAkCF,EAAoB,uCAAuCV,EAAqB,aAC/I,EAEA,MAAMc,EAEF,CAEF,WAAYD,EAAQ,EAAI,UAAY,MACtC,EAEA,OAAOP,EAAM,aACXM,EAGAE,CACF,CACF,CAAC,CACH,CAEJ,EAEAd,EAAqB,YAAc"}
+{"version":3,"file":"BannerRegularActions.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Stack } from '../../stack'\nimport { useBannerContext } from '../BannerContext'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n  sm: 2,\n  md: 4\n}\n\nexport const BannerRegularActions: React.FC<\n  React.ComponentProps<typeof Stack>\n> = ({ children, ...props }) => {\n  const { size } = useBannerContext()\n\n  const gap = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toGap[s]),\n    [size]\n  )\n\n  invariant(\n    React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n    `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n  )\n\n  return (\n    <Stack gap={gap} {...props}>\n      {React.Children.map(children, (child, index) => {\n        // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n        // This line will prevent that from happening\n        if (child == null) return child\n\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n          )\n        }\n\n        invariant(\n          child.type === BannerRegularButton,\n          `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n        )\n\n        const propsToInject: Partial<\n          React.ComponentProps<typeof BannerRegularButton>\n        > = {\n          // Override button appearance - make the second button outlined\n          appearance: index > 0 ? 'outline' : undefined\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof BannerRegularButton>\n          >,\n          propsToInject\n        )\n      })}\n    </Stack>\n  )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"names":["MAX_ALLOWED_CHILDREN","toGap","BannerRegularActions","children","props","size","useBannerContext","gap","React","overrideStitchesVariantValue","s","invariant","BannerRegularButton","Stack","child","index","propsToInject"],"mappings":"sVASA,MAAMA,EAAuB,EAEvBC,EAAQ,CACZ,GAAI,EACJ,GAAI,CACN,EAEaC,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAM,IAAM,CAC9B,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAAA,EAEXC,EAAMC,EAAM,QAChB,IAAMC,EAA6BJ,EAAOK,GAAMT,EAAMS,EAAE,EACxD,CAACL,CAAI,CACP,EAEA,OAAAM,EACEH,EAAM,SAAS,MAAML,CAAQ,GAAKH,EAClC,gBAAgBA,KAAwBY,EAAoB,yDAAyDV,EAAqB,aAC5I,EAGEM,EAAA,cAACK,EAAA,CAAM,IAAKN,EAAM,GAAGH,CAClBI,EAAAA,EAAM,SAAS,IAAIL,EAAU,CAACW,EAAOC,IAAU,CAG9C,GAAID,GAAS,KAAM,OAAOA,EAE1B,GAAI,CAACN,EAAM,eAAeM,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBZ,EAAqB,oCAC1C,EAGFS,EACEG,EAAM,OAASF,EACf,oBAAoBE,GAAA,KAAAA,OAAAA,EAAO,kCAAkCF,EAAoB,uCAAuCV,EAAqB,aAC/I,EAEA,MAAMc,EAEF,CAEF,WAAYD,EAAQ,EAAI,UAAY,MACtC,EAEA,OAAOP,EAAM,aACXM,EAGAE,CACF,CACF,CAAC,CACH,CAEJ,EAEAd,EAAqB,YAAc"}

package/dist/components/button/Button.d.ts

@@ -1,6 +1,7 @@
-import type { CSS, VariantProps } from '@stitches/react';
+import type { VariantProps } from '@stitches/react';
 import * as React from 'react';
-import { PolymorphicComponentPropWithRef } from '../../types';
+import { NavigatorActions } from '../../types';
+import { Override } from '../../utilities';
 export declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
     theme?: "primary" | "secondary" | "success" | "danger" | "warning" | "neutral" | undefined;
     appearance?: "outline" | "solid" | undefined;
@@ -326,10 +327,11 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type ButtonProps<H extends string | undefined, C extends React.ElementType> = PolymorphicComponentPropWithRef<C, VariantProps<typeof StyledButton> & {
-    css?: CSS;
-    href?: H;
+declare type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, VariantProps<typeof StyledButton> & {
+    as?: React.ComponentType | React.ElementType;
+    children: React.ReactNode;
+    href?: string;
     isLoading?: boolean;
-}>;
-export declare const Button: <H extends string | undefined = undefined, C extends React.ElementType = H extends string ? 'a' : typeof StyledButton>(props: ButtonProps<H, C>) => React.ReactElement | null;
+} & NavigatorActions>;
+export declare const Button: React.FC<ButtonProps>;
 export {};

package/dist/components/button/Button.js

@@ -1,2 +1,2 @@
-import{darken as n,opacify as s}from"color2k";import*as t from"react";import{StyledIcon as c}from"../icon/Icon.js";import{Loader as y}from"../loader/Loader.js";import{styled as m,theme as l}from"../../stitches.js";import{isExternalLink as f}from"../../utilities/uri/index.js";const d=(e,a,r)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:a},"&:not([disabled]):active":{color:r}}),i=(e,a,r,o="white")=>({bg:e,color:o,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:a,color:o},"&:not([disabled]):active":{bg:r}}),u=m("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${c}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${c}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${c}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:i("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:i("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:i("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:i("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:i("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:i("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:d("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:d("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:d("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))}],defaultVariants:{appearance:"solid",size:"md",theme:"primary"}}),b=m("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"}}},defaultVariants:{size:"md"}}),w=({size:e,children:a})=>t.createElement(t.Fragment,null,t.createElement(y,{css:{position:"absolute"}}),t.createElement(b,{size:e},a)),k=t.forwardRef(({children:e,as:a,href:r,isLoading:o=!1,onClick:h,...p},$)=>{const g=f(r)?{target:"_blank",rel:"noopener noreferrer"}:{};return t.createElement(u,{as:a||(r?"a":void 0),href:r,isLoading:o,onClick:o?void 0:h,type:r?void 0:"button",...p,...g,ref:$},o?t.createElement(w,{size:p.size},e):e)});export{k as Button,u as StyledButton};
+import{darken as n,opacify as s}from"color2k";import*as t from"react";import{StyledIcon as c}from"../icon/Icon.js";import{Loader as f}from"../loader/Loader.js";import{styled as m,theme as l}from"../../stitches.js";import{isExternalLink as b}from"../../utilities/uri/index.js";const d=(e,a,r)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:a},"&:not([disabled]):active":{color:r}}),i=(e,a,r,o="white")=>({bg:e,color:o,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:a,color:o},"&:not([disabled]):active":{bg:r}}),u=m("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${c}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${c}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${c}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:i("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:i("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:i("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:i("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:i("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:i("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:d("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:d("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:d("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))}],defaultVariants:{appearance:"solid",size:"md",theme:"primary"}}),w=m("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"}}},defaultVariants:{size:"md"}}),k=({size:e,children:a})=>t.createElement(t.Fragment,null,t.createElement(f,{css:{position:"absolute"}}),t.createElement(w,{size:e},a)),$=t.forwardRef(({children:e,as:a,href:r,isLoading:o=!1,onClick:h,...p},g)=>{const y=b(r)?{target:"_blank",rel:"noopener noreferrer"}:{};return t.createElement(u,{as:a||(r?"a":void 0),href:r,isLoading:o,onClick:o?void 0:h,type:r?void 0:"button",...p,...y,ref:g},o?t.createElement(k,{size:p.size},e):e)});$.displayName="Button";export{$ as Button,u as StyledButton};
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { CSS, VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled, theme } from '~/stitches'\nimport { PolymorphicComponentPropWithRef } from '~/types'\nimport { isExternalLink } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  border: '1px solid',\n  borderColor: 'currentColor',\n  color: base,\n  '&[disabled]': {\n    borderColor: '$tonal400',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled]):hover, &:not([disabled]):focus': {\n    textDecoration: 'none',\n    color: interact\n  },\n  '&:not([disabled]):active': {\n    color: active\n  }\n})\n\nconst getButtonSolidVariant = (\n  base: string,\n  interact: string,\n  active: string,\n  text = 'white'\n) => ({\n  bg: base,\n  color: text,\n  '&[disabled]': {\n    bg: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled]):hover, &:not([disabled]):focus': {\n    bg: interact,\n    color: text\n  },\n  '&:not([disabled]):active': {\n    bg: active\n  }\n})\n\nexport const StyledButton = styled('button', {\n  alignItems: 'center',\n  bg: 'unset',\n  border: 'unset',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  fontFamily: '$body',\n  fontWeight: 600,\n  justifyContent: 'center',\n  p: 'unset',\n  textDecoration: 'none',\n  transition: 'all 100ms ease-out',\n  whiteSpace: 'nowrap',\n  width: 'max-content',\n  variants: {\n    theme: {\n      primary: {},\n      secondary: {},\n      success: {},\n      warning: {},\n      danger: {},\n      neutral: {}\n    },\n    appearance: {\n      solid: {},\n      outline: {}\n    },\n    size: {\n      sm: {\n        fontSize: '$sm',\n        lineHeight: 1.53,\n        height: '$3',\n        px: '$4',\n        gap: '$2',\n        [`& ${StyledIcon}`]: { size: 16 }\n      },\n      md: {\n        fontSize: '$md',\n        lineHeight: 1.5,\n        height: '$4',\n        px: '$5',\n        gap: '$3',\n        [`& ${StyledIcon}`]: { size: 20 }\n      },\n      lg: {\n        fontSize: '$lg',\n        lineHeight: 1.5,\n        height: '$5',\n        px: '$5',\n        gap: '$3',\n        [`& ${StyledIcon}`]: { size: 22 }\n      }\n    },\n    isLoading: {\n      true: {\n        cursor: 'not-allowed',\n        opacity: 0.6,\n        pointerEvents: 'none'\n      }\n    },\n    fullWidth: {\n      false: {\n        width: 'max-content'\n      },\n      true: {\n        width: '100%'\n      }\n    }\n  },\n\n  compoundVariants: [\n    {\n      theme: 'primary',\n      appearance: 'solid',\n      css: getButtonSolidVariant('$primary', '$primaryMid', '$primaryDark')\n    },\n    {\n      theme: 'secondary',\n      appearance: 'solid',\n      css: getButtonSolidVariant(\n        '$primaryDark',\n        darken(theme.colors.primaryDark.value, 0.1),\n        darken(theme.colors.primaryDark.value, 0.15)\n      )\n    },\n    {\n      theme: 'success',\n      appearance: 'solid',\n      css: getButtonSolidVariant('$success', '$successMid', '$successDark')\n    },\n    {\n      theme: 'warning',\n      appearance: 'solid',\n      css: getButtonSolidVariant(\n        '$warning',\n        '$warningMid',\n        '$warningDark',\n        '$tonal500'\n      )\n    },\n    {\n      theme: 'danger',\n      appearance: 'solid',\n      css: getButtonSolidVariant('$danger', '$dangerMid', '$dangerDark')\n    },\n    {\n      theme: 'neutral',\n      appearance: 'solid',\n      css: getButtonSolidVariant(\n        'white',\n        opacify('white', -0.1),\n        opacify('white', -0.25),\n        '$primary'\n      )\n    },\n    {\n      theme: 'primary',\n      appearance: 'outline',\n      css: getButtonOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n    },\n    {\n      theme: 'neutral',\n      appearance: 'outline',\n      css: getButtonOutlineVariant(\n        'white',\n        opacify('white', -0.2),\n        opacify('white', -0.35)\n      )\n    },\n    {\n      theme: 'secondary',\n      appearance: 'outline',\n      css: getButtonOutlineVariant(\n        '$primaryDark',\n        darken(theme.colors.primaryDark.value, 0.1),\n        darken(theme.colors.primaryDark.value, 0.15)\n      )\n    }\n  ],\n\n  defaultVariants: {\n    appearance: 'solid',\n    size: 'md',\n    theme: 'primary'\n  }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n  visibility: 'hidden',\n  variants: {\n    size: {\n      sm: { gap: '$2' },\n      md: { gap: '$3' },\n      lg: { gap: '$3' }\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader css={{ position: 'absolute' }} />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonProps<\n  H extends string | undefined,\n  C extends React.ElementType\n> = PolymorphicComponentPropWithRef<\n  C,\n  VariantProps<typeof StyledButton> & {\n    css?: CSS\n    href?: H\n    isLoading?: boolean\n  }\n>\n\nexport const Button: <\n  H extends string | undefined = undefined,\n  C extends React.ElementType = H extends string ? 'a' : typeof StyledButton\n>(\n  props: ButtonProps<H, C>\n) => React.ReactElement | null = React.forwardRef(\n  <\n    H extends string | undefined = undefined,\n    C extends React.ElementType = H extends string ? 'a' : typeof StyledButton\n  >(\n    {\n      children,\n      as,\n      href,\n      isLoading = false,\n      onClick,\n      ...rest\n    }: ButtonProps<H, C>,\n    ref?: ButtonProps<H, C>['ref']\n  ) => {\n    const externalLinkProps = isExternalLink(href)\n      ? { target: '_blank', rel: 'noopener noreferrer' }\n      : {}\n\n    return (\n      <StyledButton\n        as={as || (href ? 'a' : undefined)}\n        href={href}\n        isLoading={isLoading}\n        onClick={!isLoading ? onClick : undefined}\n        type={!href ? 'button' : undefined}\n        {...rest}\n        {...externalLinkProps}\n        ref={ref}\n      >\n        {isLoading ? (\n          <WithLoader size={rest.size}>{children}</WithLoader>\n        ) : (\n          children\n        )}\n      </StyledButton>\n    )\n  }\n)\n"],"names":["getButtonOutlineVariant","base","interact","active","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","darken","theme","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","rest","ref","externalLinkProps","isExternalLink"],"mappings":"oRAUA,MAAMA,EAA0B,CAC9BC,EACAC,EACAC,KACI,CACJ,OAAQ,YACR,YAAa,eACb,MAAOF,EACP,cAAe,CACb,YAAa,YACb,MAAO,YACP,OAAQ,aACV,EACA,mDAAoD,CAClD,eAAgB,OAChB,MAAOC,CACT,EACA,2BAA4B,CAC1B,MAAOC,CACT,CACF,GAEMC,EAAwB,CAC5BH,EACAC,EACAC,EACAE,EAAO,WACH,CACJ,GAAIJ,EACJ,MAAOI,EACP,cAAe,CACb,GAAI,YACJ,MAAO,YACP,OAAQ,aACV,EACA,mDAAoD,CAClD,GAAIH,EACJ,MAAOG,CACT,EACA,2BAA4B,CAC1B,GAAIF,CACN,CACF,GAEaG,EAAeC,EAAO,SAAU,CAC3C,WAAY,SACZ,GAAI,QACJ,OAAQ,QACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,WAAY,QACZ,WAAY,IACZ,eAAgB,SAChB,EAAG,QACH,eAAgB,OAChB,WAAY,qBACZ,WAAY,SACZ,MAAO,cACP,SAAU,CACR,MAAO,CACL,QAAS,CAAA,EACT,UAAW,CAAA,EACX,QAAS,CAAA,EACT,QAAS,CACT,EAAA,OAAQ,GACR,QAAS,CAAA,CACX,EACA,WAAY,CACV,MAAO,CAAC,EACR,QAAS,CACX,CAAA,EACA,KAAM,CACJ,GAAI,CACF,SAAU,MACV,WAAY,KACZ,OAAQ,KACR,GAAI,KACJ,IAAK,KACL,CAAC,KAAKC,KAAe,CAAE,KAAM,EAAG,CAClC,EACA,GAAI,CACF,SAAU,MACV,WAAY,IACZ,OAAQ,KACR,GAAI,KACJ,IAAK,KACL,CAAC,KAAKA,KAAe,CAAE,KAAM,EAAG,CAClC,EACA,GAAI,CACF,SAAU,MACV,WAAY,IACZ,OAAQ,KACR,GAAI,KACJ,IAAK,KACL,CAAC,KAAKA,KAAe,CAAE,KAAM,EAAG,CAClC,CACF,EACA,UAAW,CACT,KAAM,CACJ,OAAQ,cACR,QAAS,GACT,cAAe,MACjB,CACF,EACA,UAAW,CACT,MAAO,CACL,MAAO,aACT,EACA,KAAM,CACJ,MAAO,MACT,CACF,CACF,EAEA,iBAAkB,CAChB,CACE,MAAO,UACP,WAAY,QACZ,IAAKJ,EAAsB,WAAY,cAAe,cAAc,CACtE,EACA,CACE,MAAO,YACP,WAAY,QACZ,IAAKA,EACH,eACAK,EAAOC,EAAM,OAAO,YAAY,MAAO,EAAG,EAC1CD,EAAOC,EAAM,OAAO,YAAY,MAAO,GAAI,CAC7C,CACF,EACA,CACE,MAAO,UACP,WAAY,QACZ,IAAKN,EAAsB,WAAY,cAAe,cAAc,CACtE,EACA,CACE,MAAO,UACP,WAAY,QACZ,IAAKA,EACH,WACA,cACA,eACA,WACF,CACF,EACA,CACE,MAAO,SACP,WAAY,QACZ,IAAKA,EAAsB,UAAW,aAAc,aAAa,CACnE,EACA,CACE,MAAO,UACP,WAAY,QACZ,IAAKA,EACH,QACAO,EAAQ,QAAS,GAAI,EACrBA,EAAQ,QAAS,IAAK,EACtB,UACF,CACF,EACA,CACE,MAAO,UACP,WAAY,UACZ,IAAKX,EAAwB,WAAY,cAAe,cAAc,CACxE,EACA,CACE,MAAO,UACP,WAAY,UACZ,IAAKA,EACH,QACAW,EAAQ,QAAS,GAAI,EACrBA,EAAQ,QAAS,IAAK,CACxB,CACF,EACA,CACE,MAAO,YACP,WAAY,UACZ,IAAKX,EACH,eACAS,EAAOC,EAAM,OAAO,YAAY,MAAO,EAAG,EAC1CD,EAAOC,EAAM,OAAO,YAAY,MAAO,GAAI,CAC7C,CACF,CACF,EAEA,gBAAiB,CACf,WAAY,QACZ,KAAM,KACN,MAAO,SACT,CACF,CAAC,EAEKE,EAAwBL,EAAO,OAAQ,CAC3C,WAAY,SACZ,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,IAAK,IAAK,EAChB,GAAI,CAAE,IAAK,IAAK,EAChB,GAAI,CAAE,IAAK,IAAK,CAClB,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAEKM,EAAa,CAAC,CAClB,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,CAAO,IAAK,CAAE,SAAU,UAAW,CAAG,CAAA,EACvCD,EAAA,cAACJ,EAAA,CAAsB,KAAME,CAAOC,EAAAA,CAAS,CAC/C,EAeWG,EAKoBF,EAAM,WACrC,CAIE,CACE,SAAAD,EACA,GAAAI,EACA,KAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAoBC,EAAeN,CAAI,EACzC,CAAE,OAAQ,SAAU,IAAK,qBAAsB,EAC/C,CAAA,EAEJ,OACEJ,EAAA,cAACV,GACC,GAAIa,IAAOC,EAAO,IAAM,QACxB,KAAMA,EACN,UAAWC,EACX,QAAUA,EAAsB,OAAVC,EACtB,KAAOF,EAAkB,OAAX,SACb,GAAGG,EACH,GAAGE,EACJ,IAAKD,CAAAA,EAEJH,EACCL,EAAA,cAACH,EAAA,CAAW,KAAMU,EAAK,IAAOR,EAAAA,CAAS,EAEvCA,CAEJ,CAEJ,CACF"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { isExternalLink } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n  base: string,\n  interact: string,\n  active: string\n) => ({\n  border: '1px solid',\n  borderColor: 'currentColor',\n  color: base,\n  '&[disabled]': {\n    borderColor: '$tonal400',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled]):hover, &:not([disabled]):focus': {\n    textDecoration: 'none',\n    color: interact\n  },\n  '&:not([disabled]):active': {\n    color: active\n  }\n})\n\nconst getButtonSolidVariant = (\n  base: string,\n  interact: string,\n  active: string,\n  text = 'white'\n) => ({\n  bg: base,\n  color: text,\n  '&[disabled]': {\n    bg: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled]):hover, &:not([disabled]):focus': {\n    bg: interact,\n    color: text\n  },\n  '&:not([disabled]):active': {\n    bg: active\n  }\n})\n\nexport const StyledButton = styled('button', {\n  alignItems: 'center',\n  bg: 'unset',\n  border: 'unset',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  fontFamily: '$body',\n  fontWeight: 600,\n  justifyContent: 'center',\n  p: 'unset',\n  textDecoration: 'none',\n  transition: 'all 100ms ease-out',\n  whiteSpace: 'nowrap',\n  width: 'max-content',\n  variants: {\n    theme: {\n      primary: {},\n      secondary: {},\n      success: {},\n      warning: {},\n      danger: {},\n      neutral: {}\n    },\n    appearance: {\n      solid: {},\n      outline: {}\n    },\n    size: {\n      sm: {\n        fontSize: '$sm',\n        lineHeight: 1.53,\n        height: '$3',\n        px: '$4',\n        gap: '$2',\n        [`& ${StyledIcon}`]: { size: 16 }\n      },\n      md: {\n        fontSize: '$md',\n        lineHeight: 1.5,\n        height: '$4',\n        px: '$5',\n        gap: '$3',\n        [`& ${StyledIcon}`]: { size: 20 }\n      },\n      lg: {\n        fontSize: '$lg',\n        lineHeight: 1.5,\n        height: '$5',\n        px: '$5',\n        gap: '$3',\n        [`& ${StyledIcon}`]: { size: 22 }\n      }\n    },\n    isLoading: {\n      true: {\n        cursor: 'not-allowed',\n        opacity: 0.6,\n        pointerEvents: 'none'\n      }\n    },\n    fullWidth: {\n      false: {\n        width: 'max-content'\n      },\n      true: {\n        width: '100%'\n      }\n    }\n  },\n\n  compoundVariants: [\n    {\n      theme: 'primary',\n      appearance: 'solid',\n      css: getButtonSolidVariant('$primary', '$primaryMid', '$primaryDark')\n    },\n    {\n      theme: 'secondary',\n      appearance: 'solid',\n      css: getButtonSolidVariant(\n        '$primaryDark',\n        darken(theme.colors.primaryDark.value, 0.1),\n        darken(theme.colors.primaryDark.value, 0.15)\n      )\n    },\n    {\n      theme: 'success',\n      appearance: 'solid',\n      css: getButtonSolidVariant('$success', '$successMid', '$successDark')\n    },\n    {\n      theme: 'warning',\n      appearance: 'solid',\n      css: getButtonSolidVariant(\n        '$warning',\n        '$warningMid',\n        '$warningDark',\n        '$tonal500'\n      )\n    },\n    {\n      theme: 'danger',\n      appearance: 'solid',\n      css: getButtonSolidVariant('$danger', '$dangerMid', '$dangerDark')\n    },\n    {\n      theme: 'neutral',\n      appearance: 'solid',\n      css: getButtonSolidVariant(\n        'white',\n        opacify('white', -0.1),\n        opacify('white', -0.25),\n        '$primary'\n      )\n    },\n    {\n      theme: 'primary',\n      appearance: 'outline',\n      css: getButtonOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n    },\n    {\n      theme: 'neutral',\n      appearance: 'outline',\n      css: getButtonOutlineVariant(\n        'white',\n        opacify('white', -0.2),\n        opacify('white', -0.35)\n      )\n    },\n    {\n      theme: 'secondary',\n      appearance: 'outline',\n      css: getButtonOutlineVariant(\n        '$primaryDark',\n        darken(theme.colors.primaryDark.value, 0.1),\n        darken(theme.colors.primaryDark.value, 0.15)\n      )\n    }\n  ],\n\n  defaultVariants: {\n    appearance: 'solid',\n    size: 'md',\n    theme: 'primary'\n  }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n  visibility: 'hidden',\n  variants: {\n    size: {\n      sm: { gap: '$2' },\n      md: { gap: '$3' },\n      lg: { gap: '$3' }\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nconst WithLoader = ({\n  size,\n  children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n  <>\n    <Loader css={{ position: 'absolute' }} />\n    <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n  </>\n)\n\ntype ButtonProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  VariantProps<typeof StyledButton> & {\n    as?: React.ComponentType | React.ElementType\n    children: React.ReactNode\n    href?: string\n    isLoading?: boolean\n  } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, as, href, isLoading = false, onClick, ...rest }, ref) => {\n    const externalLinkProps = isExternalLink(href)\n      ? { target: '_blank', rel: 'noopener noreferrer' }\n      : {}\n\n    return (\n      <StyledButton\n        as={as || (href ? 'a' : undefined)}\n        href={href}\n        isLoading={isLoading}\n        onClick={!isLoading ? onClick : undefined}\n        type={!href ? 'button' : undefined}\n        {...rest}\n        {...externalLinkProps}\n        ref={ref}\n      >\n        {isLoading ? (\n          <WithLoader size={rest.size}>{children}</WithLoader>\n        ) : (\n          children\n        )}\n      </StyledButton>\n    )\n  }\n) as React.FC<ButtonProps>\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","base","interact","active","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","darken","theme","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","rest","ref","externalLinkProps","isExternalLink"],"mappings":"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"}

package/dist/components/link/Link.d.ts

@@ -1,6 +1,6 @@
-import type { CSS, VariantProps } from '@stitches/react';
 import * as React from 'react';
-import { PolymorphicComponentPropWithRef } from '../../types';
+import { NavigatorActions } from '../../types';
+import { Override } from '../../utilities';
 export declare const StyledLink: import("@stitches/react/types/styled-component").StyledComponent<"a", {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
     noCapsize?: boolean | "true" | undefined;
@@ -323,9 +323,8 @@ export declare const StyledLink: import("@stitches/react/types/styled-component"
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type LinkProps<H extends string | undefined, C extends React.ElementType> = PolymorphicComponentPropWithRef<C, VariantProps<typeof StyledLink> & {
-    css?: CSS;
-    href?: H;
-}>;
-export declare const Link: <H extends string | undefined = undefined, C extends React.ElementType = H extends string ? typeof StyledLink : 'button'>(props: LinkProps<H, C>) => React.ReactElement | null;
+declare type LinkProps = Override<React.ComponentProps<typeof StyledLink>, {
+    as?: React.ComponentType | React.ElementType;
+} & NavigatorActions>;
+export declare const Link: React.FC<LinkProps>;
 export {};

package/dist/components/link/Link.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as m}from"../../stitches.js";import{isExternalLink as p}from"../../utilities/uri/index.js";import{StyledHeading as f}from"../heading/Heading.js";import{StyledLi as s}from"../list/List.js";import"../markdown-content/components/MarkdownCode.js";import{StyledMarkdownEmphasis as d}from"../markdown-content/components/MarkdownEmphasis.js";import"../markdown-content/components/MarkdownInlineCode.js";import"../image/Image.js";import{StyledText as l,textVariants as c}from"../text/Text.js";import"../markdown-content/components/MarkdownStrong.js";import"../divider/Divider.js";const t=m("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${l} > &, ${f} > &, ${s} > &, ${d} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:c,defaultVariants:{size:"md"}}),y=o.forwardRef(({as:e,href:r,...i},n)=>{const a=p(r)?{target:"_blank",rel:"noopener noreferrer"}:{};return o.createElement(t,{as:e||(r?void 0:"button"),noCapsize:r?void 0:!0,href:r,...i,...a,ref:n})});export{y as Link,t as StyledLink};
+import*as o from"react";import{styled as p}from"../../stitches.js";import{isExternalLink as s}from"../../utilities/uri/index.js";import{StyledHeading as f}from"../heading/Heading.js";import{StyledLi as d}from"../list/List.js";import"../markdown-content/components/MarkdownCode.js";import{StyledMarkdownEmphasis as l}from"../markdown-content/components/MarkdownEmphasis.js";import"../markdown-content/components/MarkdownInlineCode.js";import"../image/Image.js";import{StyledText as c,textVariants as y}from"../text/Text.js";import"../markdown-content/components/MarkdownStrong.js";import"../divider/Divider.js";const t=p("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${c} > &, ${f} > &, ${d} > &, ${l} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:y,defaultVariants:{size:"md"}}),e=o.forwardRef(({as:i,href:r,...n},a)=>{const m=s(r)?{target:"_blank",rel:"noopener noreferrer"}:{};return o.createElement(t,{as:i||(r?void 0:"button"),noCapsize:r?void 0:!0,href:r,...n,...m,ref:a})});e.displayName="Link";export{e as Link,t as StyledLink};
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import type { CSS, VariantProps } from '@stitches/react'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { PolymorphicComponentPropWithRef } from '~/types'\nimport { isExternalLink } from '~/utilities/uri'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\n\nexport const StyledLink = styled('a', {\n  bg: 'unset',\n  border: 'unset',\n  p: 'unset',\n  color: '$primary',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  textDecoration: 'none',\n  '&:focus, &:hover': {\n    color: '$primaryMid',\n    textDecoration: 'underline'\n  },\n  '&:active': {\n    color: '$primaryDark'\n  },\n  [`${StyledText} > &, ${StyledHeading} > &, ${StyledLi} > &, ${StyledMarkdownEmphasis} > &`]:\n    {\n      fontSize: '100%',\n      lineHeight: 1,\n      '&::before, &::after': {\n        content: 'none'\n      }\n    },\n  variants: textVariants,\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\ntype LinkProps<\n  H extends string | undefined,\n  C extends React.ElementType\n> = PolymorphicComponentPropWithRef<\n  C,\n  VariantProps<typeof StyledLink> & {\n    css?: CSS\n    href?: H\n  }\n>\n\nexport const Link: <\n  H extends string | undefined = undefined,\n  C extends React.ElementType = H extends string ? typeof StyledLink : 'button'\n>(\n  props: LinkProps<H, C>\n) => React.ReactElement | null = React.forwardRef(\n  <\n    H extends string | undefined = undefined,\n    C extends React.ElementType = H extends string\n      ? typeof StyledLink\n      : 'button'\n  >(\n    { as, href, ...rest }: LinkProps<H, C>,\n    ref?: LinkProps<H, C>['ref']\n  ) => {\n    const externalLinkProps = isExternalLink(href)\n      ? { target: '_blank', rel: 'noopener noreferrer' }\n      : {}\n\n    return (\n      <StyledLink\n        as={as || (!href ? 'button' : undefined)}\n        noCapsize={!href ? true : undefined}\n        href={href}\n        {...rest}\n        {...externalLinkProps}\n        ref={ref}\n      />\n    )\n  }\n)\n"],"names":["StyledLink","styled","StyledText","StyledHeading","StyledLi","StyledMarkdownEmphasis","textVariants","Link","React","as","href","rest","ref","externalLinkProps","isExternalLink"],"mappings":"kmBAYO,MAAMA,EAAaC,EAAO,IAAK,CACpC,GAAI,QACJ,OAAQ,QACR,EAAG,QACH,MAAO,WACP,OAAQ,UACR,WAAY,QACZ,eAAgB,OAChB,mBAAoB,CAClB,MAAO,cACP,eAAgB,WAClB,EACA,WAAY,CACV,MAAO,cACT,EACA,CAAC,GAAGC,UAAmBC,UAAsBC,UAAiBC,SAC5D,CACE,SAAU,OACV,WAAY,EACZ,sBAAuB,CACrB,QAAS,MACX,CACF,EACF,SAAUC,EACV,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAaYC,EAKoBC,EAAM,WACrC,CAME,CAAE,GAAAC,EAAI,KAAAC,KAASC,CAAK,EACpBC,IACG,CACH,MAAMC,EAAoBC,EAAeJ,CAAI,EACzC,CAAE,OAAQ,SAAU,IAAK,qBAAsB,EAC/C,CAEJ,EAAA,OACEF,EAAA,cAACR,GACC,GAAIS,IAAQC,EAAkB,OAAX,UACnB,UAAYA,EAAc,OAAP,GACnB,KAAMA,EACL,GAAGC,EACH,GAAGE,EACJ,IAAKD,CAAAA,CACP,CAEJ,CACF"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { isExternalLink } from '~/utilities/uri'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\n\nexport const StyledLink = styled('a', {\n  bg: 'unset',\n  border: 'unset',\n  p: 'unset',\n  color: '$primary',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  textDecoration: 'none',\n  '&:focus, &:hover': {\n    color: '$primaryMid',\n    textDecoration: 'underline'\n  },\n  '&:active': {\n    color: '$primaryDark'\n  },\n  [`${StyledText} > &, ${StyledHeading} > &, ${StyledLi} > &, ${StyledMarkdownEmphasis} > &`]:\n    {\n      fontSize: '100%',\n      lineHeight: 1,\n      '&::before, &::after': {\n        content: 'none'\n      }\n    },\n  variants: textVariants,\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  {\n    as?: React.ComponentType | React.ElementType\n  } & NavigatorActions\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ as, href, ...rest }, ref) => {\n    const externalLinkProps = isExternalLink(href)\n      ? { target: '_blank', rel: 'noopener noreferrer' }\n      : {}\n\n    return (\n      <StyledLink\n        as={as || (!href ? 'button' : undefined)}\n        noCapsize={!href ? true : undefined}\n        href={href}\n        {...rest}\n        {...externalLinkProps}\n        ref={ref}\n      />\n    )\n  }\n) as React.FC<LinkProps>\n\nLink.displayName = 'Link'\n"],"names":["StyledLink","styled","StyledText","StyledHeading","StyledLi","StyledMarkdownEmphasis","textVariants","Link","React","as","href","rest","ref","externalLinkProps","isExternalLink"],"mappings":"kmBAYa,MAAAA,EAAaC,EAAO,IAAK,CACpC,GAAI,QACJ,OAAQ,QACR,EAAG,QACH,MAAO,WACP,OAAQ,UACR,WAAY,QACZ,eAAgB,OAChB,mBAAoB,CAClB,MAAO,cACP,eAAgB,WAClB,EACA,WAAY,CACV,MAAO,cACT,EACA,CAAC,GAAGC,UAAmBC,UAAsBC,UAAiBC,SAC5D,CACE,SAAU,OACV,WAAY,EACZ,sBAAuB,CACrB,QAAS,MACX,CACF,EACF,SAAUC,EACV,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EASYC,EAAOC,EAAM,WACxB,CAAC,CAAE,GAAAC,EAAI,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC9B,MAAMC,EAAoBC,EAAeJ,CAAI,EACzC,CAAE,OAAQ,SAAU,IAAK,qBAAsB,EAC/C,CAAA,EAEJ,OACEF,EAAA,cAACR,EAAA,CACC,GAAIS,IAAQC,EAAkB,OAAX,UACnB,UAAYA,EAAc,OAAP,GACnB,KAAMA,EACL,GAAGC,EACH,GAAGE,EACJ,IAAKD,CACP,CAAA,CAEJ,CACF,EAEAL,EAAK,YAAc"}