@atom-learning/components 5.4.3 → 5.5.0-beta.0

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTextarea = styled('textarea', {\n  boxShadow: 'none', // remove iOS default styling\n  fontSize: '$md', // prevent iOS zooming on focus\n  appearance: 'none',\n  border: '1px solid $grey800',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$grey1000',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  minHeight: '$7',\n  px: '$3',\n  py: 'calc($2 + $1)', // offset the line height of the text\n  resize: 'vertical',\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$grey200',\n    color: '$grey800',\n    cursor: 'not-allowed'\n  },\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  variants: {\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.ForwardRefExoticComponent<TextareaProps> =\n  React.forwardRef((props, ref) => <StyledTextarea {...props} ref={ref} />)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"mEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,UAAW,OACX,SAAU,MACV,WAAY,OACZ,OAAQ,qBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAIYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CAAE,EAE1EH,EAAS,YAAc"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTextarea = styled('textarea', {\n  boxShadow: 'none', // remove iOS default styling\n  fontSize: '$md', // prevent iOS zooming on focus\n  appearance: 'none',\n  border: '1px solid',\n  boxSizing: 'border-box',\n  color: '$grey1000',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  minHeight: '$7',\n  px: '$3',\n  py: 'calc($2 + $1)', // offset the line height of the text\n  resize: 'vertical',\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$grey200',\n    color: '$grey800',\n    cursor: 'not-allowed'\n  },\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  variants: {\n    appearance: {\n      standard: {\n        background: 'white',\n        borderColor: '$grey800',\n        borderRadius: '$0'\n      },\n      modern: {\n        background: '$grey100',\n        borderColor: '$grey100',\n        borderRadius: '$1'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  }\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.ForwardRefExoticComponent<TextareaProps> =\n  React.forwardRef((props, ref) => <StyledTextarea {...props} ref={ref} />)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"mEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,UAAW,OACX,SAAU,MACV,WAAY,OACZ,OAAQ,YACR,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,YAAa,WACb,aAAc,IAChB,EACA,OAAQ,CACN,WAAY,WACZ,YAAa,WACb,aAAc,IAChB,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,EACA,gBAAiB,CACf,WAAY,UACd,CACF,CAAC,EAIYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CAAE,EAE1EH,EAAS,YAAc"}

package/dist/components/textarea-field/TextareaField.d.ts

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { TextareaProps } from '../../components/textarea';
 type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
 export declare const TextareaField: {
-    ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
+    ({ css, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/textarea-field/TextareaField.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{useFormContext as f}from"react-hook-form";import{FieldWrapper as u}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as F}from"../form/useFieldError.js";import{Textarea as x}from"../textarea/Textarea.js";const a=({css:m=void 0,hideLabel:l,label:p,name:e,validation:r,prompt:d,description:s,...n})=>{const{register:o}=f(),{error:t}=F(e),c=r?o(r):o;return i.createElement(u,{css:m,description:s,error:t,fieldId:e,hideLabel:l,label:p,prompt:d,required:Boolean(r==null?void 0:r.required)},i.createElement(x,{id:e,name:e,ref:c,...t&&{state:"error"},...n}))};a.displayName="TextareaField";export{a as TextareaField};
+import*as i from"react";import{useFormContext as u}from"react-hook-form";import{FieldWrapper as x}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as F}from"../form/useFieldError.js";import{Textarea as b}from"../textarea/Textarea.js";const p=({css:m=void 0,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:a,...c})=>{const{register:o}=u(),{error:t}=F(e),f=r?o(r):o;return i.createElement(x,{css:m,description:s,error:t,fieldId:e,hideLabel:l,label:d,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:a},i.createElement(b,{id:e,name:e,ref:f,appearance:a,...t&&{state:"error"},...c}))};p.displayName="TextareaField";export{p as TextareaField};
 //# sourceMappingURL=TextareaField.js.map

package/dist/components/textarea-field/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  css = undefined,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Textarea"],"mappings":"4TAYO,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,OACN,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcR,CAAI,EAE9BS,EAAMR,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaM,EACb,MAAOI,EACP,QAASP,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCS,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIZ,EACJ,KAAMA,EACN,IAAKS,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAc,YAAc"}
+{"version":3,"file":"TextareaField.js","sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  css = undefined,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={appearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Textarea"],"mappings":"4TAYO,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,OACN,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAE9BU,EAAMT,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKf,EACL,YAAaM,EACb,MAAOK,EACP,QAASR,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAEZO,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACL,WAAYN,EACX,GAAII,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,CAAAA,CACN,CACF,CAEJ,EAEAT,EAAc,YAAc"}

package/dist/components/tile/Tile.d.ts

@@ -3,6 +3,7 @@ import { TcolorScheme } from '../../experiments/color-scheme';
 export declare const StyledTile: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
     borderRadius?: "sm" | "md" | "lg" | undefined;
     border?: boolean | "true" | undefined;
+    diffused?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/tile/Tile.js

@@ -1,2 +1,2 @@
-import e from"react";import{ColorScheme as t}from"../../experiments/color-scheme/ColorScheme.js";import{styled as s}from"../../stitches.js";const r=s("div",{all:"unset",boxSizing:"border-box",display:"flex",flexDirection:"column",position:"relative",border:"1px solid",bg:"$base1",color:"$foreground",borderColor:"transparent",variants:{borderRadius:{sm:{borderRadius:"$0"},md:{borderRadius:"$1"},lg:{borderRadius:"$3"}},border:{true:{borderColor:"$base3"}}}}),o=e.forwardRef(({children:i,colorScheme:l={},...a},d)=>e.createElement(t,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...l},e.createElement(r,{ref:d,...a},i)));o.displayName="Tile";export{r as StyledTile,o as Tile};
+import r from"react";import{ColorScheme as d}from"../../experiments/color-scheme/ColorScheme.js";import{styled as s}from"../../stitches.js";const e=s("div",{all:"unset",boxSizing:"border-box",display:"flex",flexDirection:"column",position:"relative",border:"1px solid",bg:"$base1",color:"$foreground",borderColor:"transparent",variants:{borderRadius:{sm:{borderRadius:"$0"},md:{borderRadius:"$1"},lg:{borderRadius:"$3"}},border:{true:{borderColor:"$base3"}},diffused:{true:{"@supports (background-color: color-mix(in hsl, white 50%, transparent))":{bg:"color-mix(in hsl, $base1 70%, transparent)",backdropFilter:"blur(8px)"}}}}}),o=r.forwardRef(({children:i,colorScheme:l={},...t},a)=>r.createElement(d,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...l},r.createElement(e,{ref:a,...t},i)));o.displayName="Tile";export{e as StyledTile,o as Tile};
 //# sourceMappingURL=Tile.js.map

package/dist/components/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n  all: 'unset', // important for buttons etc\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative', // for pseudo-elements\n  border: '1px solid',\n  bg: '$base1',\n  color: '$foreground',\n  borderColor: 'transparent',\n  variants: {\n    borderRadius: {\n      sm: { borderRadius: '$0' },\n      md: { borderRadius: '$1' },\n      lg: { borderRadius: '$3' }\n    },\n    border: {\n      true: { borderColor: '$base3' }\n    }\n  }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps> =\n  React.forwardRef(({ children, colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  ))\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","colorScheme","rest","ref","ColorScheme"],"mappings":"4IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,IAAK,QACL,UAAW,aACX,QAAS,OACT,cAAe,SACf,SAAU,WACV,OAAQ,YACR,GAAI,SACJ,MAAO,cACP,YAAa,cACb,SAAU,CACR,aAAc,CACZ,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,CAC3B,EACA,OAAQ,CACN,KAAM,CAAE,YAAa,QAAS,CAChC,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,MAAOC,CAAK,EAAGC,IACzDJ,EAAA,cAACK,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJF,EAAA,cAACH,EAAA,CAAW,IAAKO,EAAM,GAAGD,CAAAA,EACvBF,CACH,CACF,CACD,EAEHF,EAAK,YAAc"}
+{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n  all: 'unset', // important for buttons etc\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative', // for pseudo-elements\n  border: '1px solid',\n  bg: '$base1',\n  color: '$foreground',\n  borderColor: 'transparent',\n  variants: {\n    borderRadius: {\n      sm: { borderRadius: '$0' },\n      md: { borderRadius: '$1' },\n      lg: { borderRadius: '$3' }\n    },\n    border: {\n      true: { borderColor: '$base3' }\n    },\n    diffused: {\n      true: {\n        '@supports (background-color: color-mix(in hsl, white 50%, transparent))':\n          {\n            bg: 'color-mix(in hsl, $base1 70%, transparent)',\n            backdropFilter: 'blur(8px)'\n          }\n      }\n    }\n  }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps> =\n  React.forwardRef(({ children, colorScheme = {}, ...rest }, ref) => (\n    <ColorScheme\n      asChild\n      base=\"grey1\"\n      accent=\"primary2\"\n      interactive=\"loContrast\"\n      {...colorScheme}\n    >\n      <StyledTile ref={ref} {...rest}>\n        {children}\n      </StyledTile>\n    </ColorScheme>\n  ))\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","colorScheme","rest","ref","ColorScheme"],"mappings":"4IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,IAAK,QACL,UAAW,aACX,QAAS,OACT,cAAe,SACf,SAAU,WACV,OAAQ,YACR,GAAI,SACJ,MAAO,cACP,YAAa,cACb,SAAU,CACR,aAAc,CACZ,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,CAC3B,EACA,OAAQ,CACN,KAAM,CAAE,YAAa,QAAS,CAChC,EACA,SAAU,CACR,KAAM,CACJ,0EACE,CACE,GAAI,6CACJ,eAAgB,WAClB,CACJ,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,CAAC,KAAMC,CAAK,EAAGC,IACzDJ,EAAA,cAACK,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJF,EAAA,cAACH,EAAW,CAAA,IAAKO,EAAM,GAAGD,CACvBF,EAAAA,CACH,CACF,CACD,EAEHF,EAAK,YAAc"}

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 import { NavigatorActions } from '../../types';
 declare const StyledTileInteractive: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "border" | "borderRadius" | "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+}, "border" | "borderRadius" | "css" | "diffused"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
     borderRadius?: "sm" | "md" | "lg" | undefined;
     border?: boolean | "true" | undefined;
+    diffused?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -2,9 +2,10 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
 declare const StyledTileToggleGroupItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "border" | "borderRadius" | "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+}, "border" | "borderRadius" | "css" | "diffused"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
     borderRadius?: "sm" | "md" | "lg" | undefined;
     border?: boolean | "true" | undefined;
+    diffused?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/toggle-group/index.d.ts

@@ -1470,7 +1470,7 @@ export declare const ToggleGroup: {
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "gap" | "wrap"> & ((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
+    }, "gap" | "wrap"> & (((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
         disableDeselect?: boolean;
     }, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         isFullWidth?: boolean | "true" | undefined;
@@ -2215,5 +2215,5 @@ export declare const ToggleGroup: {
     })) & {
         orientation?: "horizontal" | "vertical";
         isFullWidth?: boolean;
-    }>;
+    })>;
 };

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

@@ -3,6 +3,7 @@ import { CSS } from '../../stitches';
 declare const StyledRoot: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
     hasScrolled?: boolean | "true" | undefined;
     size?: "md" | "lg" | undefined;
+    diffused?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;
@@ -373,7 +374,7 @@ interface TopBarProps extends StyledRootProps {
     className?: string;
 }
 export declare const TopBar: {
-    ({ size, className, ...props }: TopBarProps): React.JSX.Element;
+    ({ size, diffused, className, ...props }: TopBarProps): React.JSX.Element;
     displayName: string;
 } & {
     Brand: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"a", {}, {

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

@@ -1,2 +1,2 @@
-import o from"react";import{styled as e}from"../../stitches.js";import{useWindowScrollPosition as n}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as s}from"../divider/Divider.js";import{Flex as d}from"../flex/Flex.js";import{colorSchemes as c}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrand as p,TopBarBrandLogo as g,TopBarBrandName as h}from"./TopBarBrand.js";const x=()=>o.createElement(s,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),B=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"},lg:{height:"$7"}}}}),f=e(d,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),r=({size:t="md",className:i=c.light,...a})=>{const{y:m}=n();return o.createElement(B,{className:i,hasScrolled:!!m,size:t},o.createElement(f,{...a}))},b=Object.assign(r,{Brand:p,BrandLogo:g,BrandName:h,ActionIcon:l,Divider:x});r.displayName="TopBar";export{b as TopBar};
+import o from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as d}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as l}from"../flex/Flex.js";import{colorSchemes as c}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as p}from"./TopBarActionIcon.js";import{TopBarBrand as h,TopBarBrandLogo as g,TopBarBrandName as f}from"./TopBarBrand.js";const x=()=>o.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),b=r("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"},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)"}}}}}),u=r(l,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",diffused:i,className:a=c.light,...n})=>{const{y:s}=d();return o.createElement(b,{className:a,hasScrolled:!!s,diffused:i,size:t},o.createElement(u,{...n}))},B=Object.assign(e,{Brand:h,BrandLogo:g,BrandName:f,ActionIcon:p,Divider:x});e.displayName="TopBar";export{B 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\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: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1);' }\n    },\n    size: {\n      md: { height: '$6' },\n      lg: { height: '$7' }\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","Container","Flex","TopBarComponent","size","className","topBarColorSchemes","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"2cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,CAAG,CAAA,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,CAAE,UAAW,yCAA0C,CAC/D,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,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,UAAAC,EAAYC,EAAmB,SAC5BC,CACL,IAAmB,CACjB,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAAA,EAE/B,OACEZ,EAAA,cAACE,EAAA,CACC,UAAWM,EACX,YAAa,CAAC,CAACG,EACf,KAAMJ,CAENP,EAAAA,EAAA,cAACI,EAAA,CAAW,GAAGM,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOP,EAAiB,CACnD,MAAOQ,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASlB,CACX,CAAC,EAEDO,EAAgB,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: { 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  }\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  diffused,\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      diffused={diffused}\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","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"2cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,CAAG,CAAA,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,CAAE,UAAW,yCAA0C,CAC/D,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,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,SAC5BC,CACL,IAAmB,CACjB,KAAM,CAAE,EAAGC,CAAgB,EAAIC,IAE/B,OACEb,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACG,EACf,SAAUJ,EACV,KAAMD,CAENP,EAAAA,EAAA,cAACI,EAAA,CAAW,GAAGO,EAAO,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOR,EAAiB,CACnD,MAAOS,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASnB,CACX,CAAC,EAEDO,EAAgB,YAAc"}