npm - @atom-learning/components - Versions diffs - 5.8.0 → 6.0.0-beta.2 - Mend

@atom-learning/components 5.8.0 → 6.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

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

	@@ -1 +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"}
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 boxSizing: 'border-box',\n color: '$grey1000',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n m: 0,\n minHeight: '$7',\n px: '$3',\n py: 'calc($2 + $1)', // offset the line height of the text\n resize: 'vertical',\n width: '100%',\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 border: '1px solid $grey800',\n borderRadius: '$0',\n '&:focus-within': {\n borderColor: '$primary800',\n outline: 'none'\n }\n },\n modern: {\n background: '$grey100',\n border: 'none',\n borderRadius: '$1',\n '&:focus-within': {\n outline: '2px solid $blue800',\n outlineOffset: 1,\n zIndex: 1\n }\n }\n },\n state: {\n error: {}\n }\n },\n defaultVariants: {\n appearance: 'standard'\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n css: { borderColor: '$danger' }\n },\n {\n state: 'error',\n appearance: 'modern',\n css: {\n bg: '$dangerLight',\n '&:focus-within': {\n outlineColor: '$danger'\n }\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,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,EAAG,EACH,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,MAAO,OACP,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,OAAQ,qBACR,aAAc,KACd,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,CACF,EACA,OAAQ,CACN,WAAY,WACZ,OAAQ,OACR,aAAc,KACd,iBAAkB,CAChB,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,gBAAiB,CACf,WAAY,UACd,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,GAAI,eACJ,iBAAkB,CAChB,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAIYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAAA,CAAK,CAAE,EAE1EH,EAAS,YAAc"}

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

@@ -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 CHANGED Viewed

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

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

	@@ -1 +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"}
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, useFormCustomContext } 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 context = useFormCustomContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\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={formAppearance}\n >\n <Textarea\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\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","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Textarea"],"mappings":"mYAYa,MAAAA,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,EACfC,EAAAA,EAAUC,IACV,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAC9BY,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKlB,EACL,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYY,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMA,EACN,IAAKY,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}

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

@@ -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 CHANGED Viewed

@@ -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 s}from"../../experiments/color-scheme/ColorScheme.js";import{styled as n}from"../../stitches.js";const e=n("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,borderRadius:a="lg",colorScheme:l={},...d},t)=>r.createElement(s,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...l},r.createElement(e,{ref:t,borderRadius:a,...d},i)));o.displayName="Tile";export{e as StyledTile,o as Tile};
 //# sourceMappingURL=Tile.js.map

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

	@@ -1 +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"}
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 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(\n ({ children, borderRadius = 'lg', colorScheme = {}, ...rest }, ref) => (\n <ColorScheme\n asChild\n base=\"grey1\"\n accent=\"primary2\"\n interactive=\"loContrast\"\n {...colorScheme}\n >\n <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n {children}\n </StyledTile>\n </ColorScheme>\n )\n )\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","borderRadius","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,WACJ,CAAC,CAAE,SAAAC,EAAU,aAAAC,EAAe,KAAM,YAAAC,EAAc,CAAOC,KAAAA,CAAK,EAAGC,IAC7DL,EAAA,cAACM,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJH,EAAA,cAACH,EAAW,CAAA,IAAKQ,EAAK,aAAcH,EAAe,GAAGE,CACnDH,EAAAA,CACH,CACF,CAEJ,EAEFF,EAAK,YAAc"}

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

@@ -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 CHANGED Viewed

@@ -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/toast/Toast.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as n}from"../../stitches.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as c}from"./ToastProvider.js";const p={loading:{bg:"$info"},blank:{bg:"$info"},success:{bg:"$success"},error:{bg:"$danger"}},e=n(a,{pointerEvents:"auto",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",minHeight:"$5",position:"relative",px:"$4",py:"$1",transition:"background-color 50ms ease-out","@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{type:p}}),o=t=>{const{type:r}=c();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
+import*as s from"react";import{styled as n}from"../../stitches.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as c}from"./ToastProvider.js";const p={loading:{bg:"$info"},blank:{bg:"$info"},success:{bg:"$success"},error:{bg:"$danger"}},e=n(a,{pointerEvents:"auto",borderRadius:"$3",boxShadow:"$1",boxSizing:"border-box",color:"white",minHeight:"$5",position:"relative",px:"$4",py:"$1",transition:"background-color 50ms ease-out","@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{type:p}}),o=t=>{const{type:r}=c();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
 //# sourceMappingURL=Toast.js.map

package/dist/components/toast/Toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nconst toastVariants = {\n loading: { bg: '$info' },\n blank: { bg: '$info' },\n success: { bg: '$success' },\n error: { bg: '$danger' }\n} as const\n\nexport const StyledToast = styled(Flex, {\n pointerEvents: 'auto',\n borderRadius: '$0',\n boxShadow: '$1',\n boxSizing: 'border-box',\n color: 'white',\n minHeight: '$5',\n position: 'relative',\n px: '$4',\n py: '$1',\n transition: 'background-color 50ms ease-out',\n '@allowMotion': {\n transition: 'background-color 50ms ease-out, transform 150ms ease-out'\n },\n variants: {\n type: toastVariants\n }\n})\n\ntype ToastProps = Omit<React.ComponentProps<typeof StyledToast>, 'type'> & {\n type?: keyof typeof toastVariants\n}\n\nexport const Toast = (props: ToastProps): JSX.Element => {\n const { type } = useToastContext()\n return <StyledToast align=\"center\" type={props.type \|\| type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["toastVariants","StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"mQASA,MAAMA,EAAgB,CACpB,QAAS,CAAE,GAAI,OAAQ,EACvB,MAAO,CAAE,GAAI,OAAQ,EACrB,QAAS,CAAE,GAAI,UAAW,EAC1B,MAAO,CAAE,GAAI,SAAU,CACzB,EAEaC,EAAcC,EAAOC,EAAM,CACtC,cAAe,OACf,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,UAAW,KACX,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,iCACZ,eAAgB,CACd,WAAY,0DACd,EACA,SAAU,CACR,KAAMH,CACR,CACF,CAAC,EAMYI,EAASC,GAAmC,CACvD,KAAM,CAAE,KAAAC,CAAK,EAAIC,EACjB,EAAA,OAAOC,EAAA,cAACP,EAAY,CAAA,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAAA,CAAO,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}
1	+ {"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nconst toastVariants = {\n loading: { bg: '$info' },\n blank: { bg: '$info' },\n success: { bg: '$success' },\n error: { bg: '$danger' }\n} as const\n\nexport const StyledToast = styled(Flex, {\n pointerEvents: 'auto',\n borderRadius: '$3',\n boxShadow: '$1',\n boxSizing: 'border-box',\n color: 'white',\n minHeight: '$5',\n position: 'relative',\n px: '$4',\n py: '$1',\n transition: 'background-color 50ms ease-out',\n '@allowMotion': {\n transition: 'background-color 50ms ease-out, transform 150ms ease-out'\n },\n variants: {\n type: toastVariants\n }\n})\n\ntype ToastProps = Omit<React.ComponentProps<typeof StyledToast>, 'type'> & {\n type?: keyof typeof toastVariants\n}\n\nexport const Toast = (props: ToastProps): JSX.Element => {\n const { type } = useToastContext()\n return <StyledToast align=\"center\" type={props.type \|\| type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["toastVariants","StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"mQASA,MAAMA,EAAgB,CACpB,QAAS,CAAE,GAAI,OAAQ,EACvB,MAAO,CAAE,GAAI,OAAQ,EACrB,QAAS,CAAE,GAAI,UAAW,EAC1B,MAAO,CAAE,GAAI,SAAU,CACzB,EAEaC,EAAcC,EAAOC,EAAM,CACtC,cAAe,OACf,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,UAAW,KACX,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,iCACZ,eAAgB,CACd,WAAY,0DACd,EACA,SAAU,CACR,KAAMH,CACR,CACF,CAAC,EAMYI,EAASC,GAAmC,CACvD,KAAM,CAAE,KAAAC,CAAK,EAAIC,EACjB,EAAA,OAAOC,EAAA,cAACP,EAAY,CAAA,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAAA,CAAO,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}

package/dist/components/toggle-group/ToggleGroupButton.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {}, {
+export declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
+    theme?: "standard" | "modern" | undefined;
+}, {
     sm: string;
     md: string;
     lg: string;
@@ -370,6 +372,7 @@ export declare const StyledButton: import("@atom-learning/stitches-react/types/s
 }>>, {
     size?: "sm" | "md" | "lg" | undefined;
     isIconOnly?: boolean | "true" | undefined;
+    theme?: "standard" | "modern" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/toggle-group/ToggleGroupButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as g}from"../../stitches.js";import{Icon as r}from"../icon/Icon.js";import{StyledItem as f}from"./ToggleGroupItem.js";const t={sm:"32px",md:"40px",lg:"48px"},u={sm:"$4",md:"$5",lg:"$5"},h={sm:"$2",md:"$3",lg:"$3"},m=i=>({fontSize:`$${i}`,px:u[i],minHeight:t[i],"& > *:not(:last-child)":{mr:h[i]}}),d=g(f,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",variants:{size:{sm:m("sm"),md:m("md"),lg:m("lg")},isIconOnly:{true:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:t.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:t.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:t.lg,p:0}}]}),$=n.forwardRef(({size:i="md",children:p,...c},a)=>{var l;const s=n.Children.toArray(p),o=s.length<=1,y=o&&n.isValidElement(s[0])&&((l=s[0])==null?void 0:l.type)===r;return n.createElement(d,{ref:a,size:i,isIconOnly:y,...c},s.map(e=>!o&&(typeof e=="string"||typeof e=="number")?n.createElement("span",{key:e},e):n.isValidElement(e)&&(e==null?void 0:e.type)===r?n.cloneElement(e,{...e.props,size:i}):e))});export{d as StyledButton,$ as ToggleGroupButton};
+import*as t from"react";import{styled as f}from"../../stitches.js";import{Icon as r}from"../icon/Icon.js";import{StyledItem as h}from"./ToggleGroupItem.js";const s={sm:"32px",md:"40px",lg:"48px"},u={sm:"$4",md:"$5",lg:"$5"},x={sm:"$2",md:"$3",lg:"$3"},m=n=>({fontSize:`$${n}`,px:u[n],minHeight:s[n],"& > *:not(:last-child)":{mr:x[n]}}),d=f(h,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",variants:{size:{sm:m("sm"),md:m("md"),lg:m("lg")},isIconOnly:{true:{}},theme:{standard:{},modern:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:s.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:s.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:s.lg,p:0}}]}),z=t.forwardRef(({size:n="md",theme:p="standard",children:a,...c},y)=>{var o;const i=t.Children.toArray(a),l=i.length<=1,g=l&&t.isValidElement(i[0])&&((o=i[0])==null?void 0:o.type)===r;return t.createElement(d,{ref:y,size:n,isIconOnly:g,theme:p,...c},i.map(e=>!l&&(typeof e=="string"||typeof e=="number")?t.createElement("span",{key:e},e):t.isValidElement(e)&&(e==null?void 0:e.type)===r?t.cloneElement(e,{...e.props,size:n}):e))});export{d as StyledButton,z as ToggleGroupButton};
 //# sourceMappingURL=ToggleGroupButton.js.map

package/dist/components/toggle-group/ToggleGroupButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon, ~~StyledIcon~~ } from '../icon'\nimport { StyledItem } from './ToggleGroupItem'\n\nconst minHeight = {\n sm: '32px',\n md: '40px',\n lg: '48px'\n}\n\nconst px = {\n sm: '$4',\n md: '$5',\n lg: '$5'\n}\n\nconst spacingBetweenElements = {\n sm: '$2',\n md: '$3',\n lg: '$3'\n}\n\nconst getSizeVariant = (size) => ({\n fontSize: `$${size}`,\n px: px[size],\n minHeight: minHeight[size],\n '& > *:not(:last-child)': {\n mr: spacingBetweenElements[size]\n }\n})\n\nexport const StyledButton = styled(StyledItem, {\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: 600,\n lineHeight: 1,\n py: '$1',\n variants: {\n size: {\n sm: getSizeVariant('sm'),\n md: getSizeVariant('md'),\n lg: getSizeVariant('lg')\n },\n isIconOnly: {\n true: {}\n }\n },\n compoundVariants: [\n {\n isIconOnly: true,\n size: 'sm',\n css: {\n minWidth: minHeight.sm,\n p: 0\n }\n },\n {\n isIconOnly: true,\n size: 'md',\n css: {\n minWidth: minHeight.md,\n p: 0\n }\n },\n {\n isIconOnly: true,\n size: 'lg',\n css: {\n minWidth: minHeight.lg,\n p: 0\n }\n }\n ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(({ size = 'md', children, ...rest }, ref) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n const isIconOnly =\n isSingleChild &&\n React.isValidElement(childrenArray[0]) &&\n childrenArray[0]?.type === Icon\n\n return (\n <StyledButton ref={ref} size={size} isIconOnly={isIconOnly} {...rest}>\n {\n childrenArray.map((child) => {\n if (\n !isSingleChild &&\n (typeof child === 'string' \|\| typeof child === 'number')\n )\n return <span key={child}>{child}</span>\n if (React.isValidElement(child)) {\n if (child?.type === Icon)\n return React.cloneElement(child, { ...child.props, size })\n }\n return child\n }) as React.ReactElement[]\n }\n </StyledButton>\n )\n})\n"],"names":["minHeight","px","spacingBetweenElements","getSizeVariant","size","StyledButton","styled","StyledItem","ToggleGroupButton","React","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"4JAOA,MAAMA,EAAY,CAChB,GAAI,OACJ,GAAI,OACJ,GAAI,MACN,EAEMC,EAAK,CACT,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAyB,CAC7B,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAkBC,~~IAAU~~,~~CAChC~~,SAAU,IAAIA,IACd,GAAIH,EAAGG,GACP,UAAWJ,EAAUI,GACrB,yBAA0B,CACxB,GAAIF,EAAuBE,EAC7B,CACF,GAEaC,EAAeC,EAAOC,EAAY,CAC7C,SAAU,EACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,EACZ,GAAI,KACJ,SAAU,CACR,KAAM,CACJ,GAAIJ,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,CACzB,EACA,WAAY,CACV,KAAM,CAAA,~~CACR~~,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUH,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,CACF,CACF,CAAC,EAEYQ,EAETC,EAAM,~~WAAW~~,CAAC,CAAE,KAAAL,EAAO,KAAM,~~SAAAM~~,KAAaC,CAAK,EAAGC,IAAQ,~~CAlFlE~~,IAAAC,~~EAmFE~~,MAAMC,~~EAAgBL~~,EAAM,SAAS,~~QAAQC~~,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,~~GACAN~~,EAAM,~~eAAeK~~,EAAc,EAAE,KACrCD,EAAAC,EAAc,KAAd,KAAA,OAAAD,EAAkB,QAASI,EAE7B,~~OACER~~,EAAA,cAACJ,~~EAAa~~,CAAA,~~IAAKO~~,~~EAAK~~,~~KAAMR~~,~~EAAM~~,~~WAAYY~~,~~EAAa~~,~~GAAGL~~,~~CAE5DG~~,EAAAA,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,~~UAExCT~~,EAAA,cAAC,~~OAAK~~,~~CAAA~~,~~IAAKS~~,~~CAAQA~~,~~EAAAA~~,CAAM,~~EAC9BT~~,EAAM,~~eAAeS~~,CAAK,IACxBA,GAAA,~~KAAAA~~,OAAAA,EAAO,QAASD,~~EACXR~~,EAAM,~~aAAaS~~,EAAO,CAAE,GAAGA,EAAM,MAAO,~~KAAAd~~,CAAK,CAAC,~~EAEtDc~~,CACR,CAEL,CAEJ,~~CAAC~~"}
1	+ {"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { StyledItem } from './ToggleGroupItem'\n\nconst minHeight = {\n sm: '32px',\n md: '40px',\n lg: '48px'\n}\n\nconst px = {\n sm: '$4',\n md: '$5',\n lg: '$5'\n}\n\nconst spacingBetweenElements = {\n sm: '$2',\n md: '$3',\n lg: '$3'\n}\n\nconst getSizeVariant = (size: string) => ({\n fontSize: `$${size}`,\n px: px[size],\n minHeight: minHeight[size],\n '& > *:not(:last-child)': {\n mr: spacingBetweenElements[size]\n }\n})\n\nexport const StyledButton = styled(StyledItem, {\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: 600,\n lineHeight: 1,\n py: '$1',\n variants: {\n size: {\n sm: getSizeVariant('sm'),\n md: getSizeVariant('md'),\n lg: getSizeVariant('lg')\n },\n isIconOnly: {\n true: {}\n },\n theme: {\n standard: {},\n modern: {}\n }\n },\n compoundVariants: [\n {\n isIconOnly: true,\n size: 'sm',\n css: {\n minWidth: minHeight.sm,\n p: 0\n }\n },\n {\n isIconOnly: true,\n size: 'md',\n css: {\n minWidth: minHeight.md,\n p: 0\n }\n },\n {\n isIconOnly: true,\n size: 'lg',\n css: {\n minWidth: minHeight.lg,\n p: 0\n }\n }\n ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(\n ({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n const isIconOnly =\n isSingleChild &&\n React.isValidElement(childrenArray[0]) &&\n childrenArray[0]?.type === Icon\n\n return (\n <StyledButton\n ref={ref}\n size={size}\n isIconOnly={isIconOnly}\n theme={theme}\n {...rest}\n >\n {\n childrenArray.map((child) => {\n if (\n !isSingleChild &&\n (typeof child === 'string' \|\| typeof child === 'number')\n )\n return <span key={child}>{child}</span>\n if (React.isValidElement(child)) {\n if (child?.type === Icon)\n return React.cloneElement(child, { ...child.props, size })\n }\n return child\n }) as React.ReactElement[]\n }\n </StyledButton>\n )\n }\n)\n"],"names":["minHeight","px","spacingBetweenElements","getSizeVariant","size","StyledButton","styled","StyledItem","ToggleGroupButton","React","theme","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"4JAOA,MAAMA,EAAY,CAChB,GAAI,OACJ,GAAI,OACJ,GAAI,MACN,EAEMC,EAAK,CACT,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAyB,CAC7B,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAkBC,IAAkB,CACxC,SAAU,IAAIA,IACd,GAAIH,EAAGG,GACP,UAAWJ,EAAUI,GACrB,yBAA0B,CACxB,GAAIF,EAAuBE,EAC7B,CACF,GAEaC,EAAeC,EAAOC,EAAY,CAC7C,SAAU,EACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,EACZ,GAAI,KACJ,SAAU,CACR,KAAM,CACJ,GAAIJ,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,CACzB,EACA,WAAY,CACV,KAAM,CACR,CAAA,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CACV,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUH,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,CACF,CACF,CAAC,EAEYQ,EAETC,EAAM,WACR,CAAC,CAAE,KAAAL,EAAO,KAAM,MAAAM,EAAQ,WAAY,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CAvFnE,IAAAC,EAwFI,MAAMC,EAAgBN,EAAM,SAAS,QAAQE,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAP,EAAM,eAAeM,EAAc,EAAE,KACrCD,EAAAC,EAAc,KAAd,KAAA,OAAAD,EAAkB,QAASI,EAE7B,OACET,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,KAAMT,EACN,WAAYa,EACZ,MAAOP,EACN,GAAGE,CAGFG,EAAAA,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCV,EAAA,cAAC,OAAA,CAAK,IAAKU,CAAAA,EAAQA,CAAM,EAC9BV,EAAM,eAAeU,CAAK,IACxBA,GAAA,KAAA,OAAAA,EAAO,QAASD,EACXT,EAAM,aAAaU,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAf,CAAK,CAAC,EAEtDe,CACR,CAEL,CAEJ,CACF"}

package/dist/components/toggle-group/ToggleGroupItem.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
-export declare const StyledItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {}, {
+export declare const StyledItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
+    theme?: "standard" | "modern" | undefined;
+}, {
     sm: string;
     md: string;
     lg: string;
@@ -368,7 +370,9 @@ export declare const StyledItem: import("@atom-learning/stitches-react/types/sty
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const ToggleGroupItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {}, {
+export declare const ToggleGroupItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
+    theme?: "standard" | "modern" | undefined;
+}, {
     sm: string;
     md: string;
     lg: string;

package/dist/components/toggle-group/ToggleGroupItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as t from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as o}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const r=e(t.Item,{bg:"white",color:"$grey800",border:"1px solid $grey600",cursor:"pointer","&::before":{background:"$grey600"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},"&[disabled]":{opacity:.3,cursor:"not-allowed"},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}}),a=r;export{r as StyledItem,a as ToggleGroupItem};
+import*as t from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as o}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const r=e(t.Item,{cursor:"pointer","&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{theme:{standard:{bg:"white",color:"$grey800",border:"1px solid $grey600","&::before":{background:"$grey600"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}},modern:{bg:"$grey200",borderRadius:"$1",overflow:"hidden",border:"0","&:not([disabled])":{"&:hover":{color:"$primary900"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px ${o().boxShadow}`}}},'&[data-state="on"]':{color:"$grey800",border:"1px solid $grey200 !important",bg:"white",boxShadow:"none !important"}}}}}),a=r;export{r as StyledItem,a as ToggleGroupItem};
 //# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/toggle-group/ToggleGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n bg: 'white',\n color: '$grey800',\n border: '1px solid $grey600',\n ~~cursor:~~ '~~pointer',\n '~~&::before': {\n background: '$grey600'\n },\n '&:not([disabled])': {\n '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n '&::before': {\n background: 'none'\n }\n },\n '&:hover': {\n borderColor: 'currentColor !important',\n color: '$primary900'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock(),\n '&[data-state=\"off\"]': {\n borderColor: '$grey600 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n focusVisibleStyleBlock().boxShadow\n }`\n }\n }\n },\n '&[~~disabled~~]': {\n ~~opacity~~: ~~0.3~~,\n ~~cursor~~: 'not~~-allowed~~'\n },\n '&[data-state=\"on\"]': {\n ~~color~~: '$~~primary800',\n borderColor:~~ ~~'currentColor~~ !important',\n boxShadow: 'inset currentColor 0px 0px 0px 1px'\n }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"8WAKO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,GAAI,QACJ,MAAO,WACP,OAAQ,qBACR,~~OAAQ,UACR,~~YAAa,CACX,WAAY,UACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,GAAGC,EAAAA,EACH,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,uCACTA,~~IAAyB~~,WAE7B,CACF,CACF,EACA,~~cAAe~~,~~CACb~~,~~QAAS~~,~~GACT~~,OAAQ,~~aACV~~,EACA,qBAAsB,CACpB,MAAO,~~cACP~~,~~YAAa~~,~~0BACb~~,UAAW,~~oCACb~~,CACF,CAAC,EAEYC,EAAkBJ"}
1	+ {"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n cursor: 'pointer',\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n variants: {\n theme: {\n standard: {\n bg: 'white',\n color: '$grey800',\n border: '1px solid $grey600',\n '&::before': {\n background: '$grey600'\n },\n '&:not([disabled])': {\n '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n '&::before': {\n background: 'none'\n }\n },\n '&:hover': {\n borderColor: 'currentColor !important',\n color: '$primary900'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock(),\n '&[data-state=\"off\"]': {\n borderColor: '$grey600 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n focusVisibleStyleBlock().boxShadow\n }`\n }\n }\n },\n '&[data-state=\"on\"]': {\n color: '$primary800',\n borderColor: 'currentColor !important',\n boxShadow: 'inset currentColor 0px 0px 0px 1px'\n }\n },\n modern: {\n bg: '$grey200',\n borderRadius: '$1',\n overflow: 'hidden',\n border: '0',\n '&:not([disabled])': {\n '&:hover': {\n color: '$primary900'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock(),\n '&[data-state=\"off\"]': {\n borderColor: '$grey600 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px ${\n focusVisibleStyleBlock().boxShadow\n }`\n }\n }\n },\n '&[data-state=\"on\"]': {\n color: '$grey800',\n border: '1px solid $grey200 !important',\n bg: 'white',\n boxShadow: 'none !important'\n }\n }\n }\n }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"8WAKO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,OAAQ,UACR,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,SAAU,CACR,GAAI,QACJ,MAAO,WACP,OAAQ,qBACR,YAAa,CACX,WAAY,UACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,GAAGC,EAAAA,EACH,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,uCACTA,EAAuB,EAAE,WAE7B,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,cACP,YAAa,0BACb,UAAW,oCACb,CACF,EACA,OAAQ,CACN,GAAI,WACJ,aAAc,KACd,SAAU,SACV,OAAQ,IACR,oBAAqB,CACnB,UAAW,CACT,MAAO,aACT,EACA,kBAAmB,CACjB,GAAGA,IACH,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,sCACTA,EAAuB,EAAE,WAE7B,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,WACP,OAAQ,gCACR,GAAI,QACJ,UAAW,iBACb,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAkBJ"}

package/dist/components/toggle-group/ToggleGroupRoot.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
     isFullWidth?: boolean | "true" | undefined;
     hasGap?: boolean | "true" | "false" | undefined;
     direction?: "row" | "column" | undefined;
+    theme?: "standard" | "modern" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/toggle-group/ToggleGroupRoot.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as r from"react";import{Flex as c}from"../flex/Flex.js";import{styled as f}from"../../stitches.js";import{ToggleGroup as m}from"../../utilities/radix-overrides/toggle-group/index.js";import{StyledItem as t}from"./ToggleGroupItem.js";const d=f(m.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${t}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${t}`]:{borderRadius:"$0"}},false:{borderRadius:"$0",bg:"white",[`& ${t}`]:{bg:"transparent",borderRadius:0,position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}}},compoundVariants:[{hasGap:!1,direction:"row",css:{[`& ${t}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$0",borderBottomLeftRadius:"$0"},"&:last-child":{borderTopRightRadius:"$0",borderBottomRightRadius:"$0"}}}},{hasGap:!1,direction:"column",css:{[`& ${t}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}}]}),u=o=>o==="horizontal"?"row":"column",b=r.forwardRef(({orientation:o="horizontal",gap:i,isFullWidth:s,children:n,wrap:l,...p},h)=>{const e=typeof i=="number",a=u(o);return r.createElement(d,{ref:h,direction:a,hasGap:e,isFullWidth:s,orientation:o,...p},r.createElement(c,{direction:a,gap:e?i:void 0,wrap:l||"nowrap"},n))});export{d as StyledRoot,b as ToggleGroupRoot};
+import*as t from"react";import{Flex as f}from"../flex/Flex.js";import{styled as u}from"../../stitches.js";import{ToggleGroup as b}from"../../utilities/radix-overrides/toggle-group/index.js";import{StyledItem as o}from"./ToggleGroupItem.js";const n=u(b.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${o}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${o}`]:{borderRadius:"$0"}},false:{borderRadius:"$1",[`& ${o}`]:{position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}},theme:{standard:{},modern:{bg:"$grey200"}}},compoundVariants:[{hasGap:!1,direction:"row",theme:"standard",css:{[`& ${o}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$1",borderBottomLeftRadius:"$1"},"&:last-child":{borderTopRightRadius:"$1",borderBottomRightRadius:"$1"}}}},{hasGap:!1,direction:"column",theme:"standard",css:{[`& ${o}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}},{hasGap:!1,theme:"modern",css:{}},{hasGap:!1,theme:"standard",css:{bg:"white",[`& ${o}`]:{bg:"transparent",borderRadius:0}}}]}),R=r=>r==="horizontal"?"row":"column",g=t.forwardRef(({orientation:r="horizontal",gap:a,isFullWidth:l,children:h,theme:i="standard",wrap:p,...m},c)=>{const d=typeof a=="number",s=R(r);return t.createElement(n,{ref:c,direction:s,hasGap:d,isFullWidth:l,orientation:r,theme:i,...m},t.createElement(f,{direction:s,gap:d?a:void 0,wrap:p||"nowrap"},t.Children.toArray(h).map(e=>t.isValidElement(e)?t.cloneElement(e,{...e.props,theme:i}):e)))});export{n as StyledRoot,g as ToggleGroupRoot};
 //# sourceMappingURL=ToggleGroupRoot.js.map

package/dist/components/toggle-group/ToggleGroupRoot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n orientation?: 'horizontal' \| 'vertical'\n isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n width: 'fit-content',\n variants: {\n isFullWidth: {\n true: {\n width: '100%',\n [`& ${StyledItem}`]: {\n flexBasis: 0,\n flexGrow: 1\n }\n }\n },\n hasGap: {\n true: {\n [`& ${StyledItem}`]: { borderRadius: '$0' }\n },\n false: {\n borderRadius: '$0',\n ~~bg: 'white',\n~~ [`& ${StyledItem}`]: {\n ~~bg: 'transparent',\n borderRadius: 0,\n~~ position: 'relative',\n '&:not(:last-child)::before': {\n content: '',\n position: 'absolute'\n }\n }\n }\n },\n direction: {\n column: {},\n row: {}\n }\n },\n compoundVariants: [\n {\n hasGap: false,\n direction: 'row',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n top: '-1px',\n height: 'calc(100% + 2px)',\n width: '1px',\n right: '0',\n transform: 'translateX(150%)'\n },\n '&:not(:first-child)': {\n borderLeftColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderRightColor: 'transparent'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderBottomLeftRadius: '$0'\n },\n '&:last-child': {\n borderTopRightRadius: '$0',\n borderBottomRightRadius: '$0'\n }\n }\n }\n },\n {\n hasGap: false,\n direction: 'column',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n bottom: 0,\n left: '-1px',\n height: '1px',\n width: 'calc(100% + 2px)',\n transform: 'translateY(150%)'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0'\n },\n '&:last-child': {\n borderBottomLeftRadius: '$0',\n borderBottomRightRadius: '$0'\n },\n '&:not(:first-child)': {\n borderTopColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderBottomColor: 'transparent'\n }\n }\n }\n }\n ]\n})\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n Pick<React.ComponentProps<typeof Flex>, 'gap' \| 'wrap'> &\n React.ComponentProps<typeof StyledRoot> &\n RootType\n> = React.forwardRef(\n (\n { orientation = 'horizontal', gap, isFullWidth, children, wrap, ...rest },\n ref\n ) => {\n const hasGap = typeof gap === 'number'\n const direction = orientationToDirection(orientation)\n return (\n <StyledRoot\n ref={ref}\n direction={direction}\n hasGap={hasGap}\n isFullWidth={isFullWidth}\n orientation={orientation}\n {...rest}\n >\n <Flex\n direction={direction}\n gap={hasGap ? gap : undefined}\n wrap={wrap \|\| 'nowrap'}\n >\n {children}\n </Flex>\n </StyledRoot>\n )\n }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","StyledItem","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","wrap","rest","ref","hasGap","direction","Flex"],"mappings":"gPAaO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,CAAC,KAAKC,KAAe,CACnB,UAAW,EACX,SAAU,CACZ,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,CAAC,KAAKA,KAAe,~~CAAE~~,aAAc,~~IAAK~~,~~CAC5C~~,EACA,MAAO,CACL,aAAc,KACd,~~GAAI,QACJ,~~CAAC,KAAKA,KAAe,CACnB,~~GAAI,cACJ,aAAc,EACd,~~SAAU,WACV,6BAA8B,CAC5B,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,~~CACR~~,~~EAAA~~,IAAK,CAAA,~~CACP~~,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,~~CAAE~~,YAAAF,EAAc,~~aAAc~~,IAAAG,~~EAAK~~,YAAAC,~~EAAa~~,SAAAC,~~EAAU~~,KAAAC,~~KAASC~~,~~CAAK~~,~~EACxEC~~,IACG,CACH,MAAMC,EAAS,~~OAAON~~,GAAQ,~~SACxBO~~,~~EAAYX~~,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACP,EACC,CAAA,~~IAAKa~~,EACL,UAAWE,EACX,OAAQD,EACR,~~YAAaL~~,EACb,YAAaJ,~~EACZ~~,~~GAAGO~~,CAAAA,~~EAEJL~~,EAAA,~~cAACS~~,EAAA,CACC,UAAWD,EACX,IAAKD,~~EAASN~~,EAAM,OACpB,~~KAAMG~~,GAAQ,QAAA,~~EAEbD~~,~~CACH~~,CACF,CAEJ,CACF"}
1	+ {"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n orientation?: 'horizontal' \| 'vertical'\n isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n width: 'fit-content',\n variants: {\n isFullWidth: {\n true: {\n width: '100%',\n [`& ${StyledItem}`]: {\n flexBasis: 0,\n flexGrow: 1\n }\n }\n },\n hasGap: {\n true: {\n [`& ${StyledItem}`]: {\n borderRadius: '$0'\n }\n },\n false: {\n borderRadius: '$1',\n [`& ${StyledItem}`]: {\n position: 'relative',\n '&:not(:last-child)::before': {\n content: '',\n position: 'absolute'\n }\n }\n }\n },\n direction: {\n column: {},\n row: {}\n },\n theme: {\n standard: {},\n modern: { bg: '$grey200' }\n }\n },\n compoundVariants: [\n {\n hasGap: false,\n direction: 'row',\n theme: 'standard',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n top: '-1px',\n height: 'calc(100% + 2px)',\n width: '1px',\n right: '0',\n transform: 'translateX(150%)'\n },\n '&:not(:first-child)': {\n borderLeftColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderRightColor: 'transparent'\n },\n '&:first-child': {\n borderTopLeftRadius: '$1',\n borderBottomLeftRadius: '$1'\n },\n '&:last-child': {\n borderTopRightRadius: '$1',\n borderBottomRightRadius: '$1'\n }\n }\n }\n },\n {\n hasGap: false,\n direction: 'column',\n theme: 'standard',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n bottom: 0,\n left: '-1px',\n height: '1px',\n width: 'calc(100% + 2px)',\n transform: 'translateY(150%)'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0'\n },\n '&:last-child': {\n borderBottomLeftRadius: '$0',\n borderBottomRightRadius: '$0'\n },\n '&:not(:first-child)': {\n borderTopColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderBottomColor: 'transparent'\n }\n }\n }\n },\n {\n hasGap: false,\n theme: 'modern',\n css: {}\n },\n {\n hasGap: false,\n theme: 'standard',\n css: {\n bg: 'white',\n [`& ${StyledItem}`]: {\n bg: 'transparent',\n borderRadius: 0\n }\n }\n }\n ]\n})\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n Pick<React.ComponentProps<typeof Flex>, 'gap' \| 'wrap'> &\n React.ComponentProps<typeof StyledRoot> &\n RootType\n> = React.forwardRef(\n (\n {\n orientation = 'horizontal',\n gap,\n isFullWidth,\n children,\n theme = 'standard',\n wrap,\n ...rest\n },\n ref\n ) => {\n const hasGap = typeof gap === 'number'\n const direction = orientationToDirection(orientation)\n return (\n <StyledRoot\n ref={ref}\n direction={direction}\n hasGap={hasGap}\n isFullWidth={isFullWidth}\n orientation={orientation}\n theme={theme}\n {...rest}\n >\n <Flex\n direction={direction}\n gap={hasGap ? gap : undefined}\n wrap={wrap \|\| 'nowrap'}\n >\n {\n React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, { ...child.props, theme })\n }\n return child\n }) as React.ReactElement[]\n }\n </Flex>\n </StyledRoot>\n )\n }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","StyledItem","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","theme","wrap","rest","ref","hasGap","direction","Flex","child"],"mappings":"gPAaO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,CAAC,KAAKC,KAAe,CACnB,UAAW,EACX,SAAU,CACZ,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,CAAC,KAAKA,KAAe,CACnB,aAAc,IAChB,CACF,EACA,MAAO,CACL,aAAc,KACd,CAAC,KAAKA,KAAe,CACnB,SAAU,WACV,6BAA8B,CAC5B,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CAAC,EACT,IAAK,CACP,CAAA,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CAAE,GAAI,UAAW,CAC3B,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,MAAO,WACP,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,MAAO,WACP,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,MAAO,SACP,IAAK,EACP,EACA,CACE,OAAQ,GACR,MAAO,WACP,IAAK,CACH,GAAI,QACJ,CAAC,KAAKA,KAAe,CACnB,GAAI,cACJ,aAAc,CAChB,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CACE,YAAAF,EAAc,aACd,IAAAG,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAS,OAAOP,GAAQ,SACxBQ,EAAYZ,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACP,EACC,CAAA,IAAKc,EACL,UAAWE,EACX,OAAQD,EACR,YAAaN,EACb,YAAaJ,EACb,MAAOM,EACN,GAAGE,CAAAA,EAEJN,EAAA,cAACU,EAAA,CACC,UAAWD,EACX,IAAKD,EAASP,EAAM,OACpB,KAAMI,GAAQ,QAAA,EAGZL,EAAM,SAAS,QAAQG,CAAQ,EAAE,IAAKQ,GAChCX,EAAM,eAAeW,CAAK,EACrBX,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,MAAAP,CAAM,CAAC,EAErDO,CACR,CAEL,CACF,CAEJ,CACF"}

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

@@ -1,5 +1,7 @@
 export declare const ToggleGroup: {
-    Item: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {}, {
+    Item: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
+        theme?: "standard" | "modern" | undefined;
+    }, {
         sm: string;
         md: string;
         lg: string;
@@ -368,7 +370,9 @@ export declare const ToggleGroup: {
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }>>;
-    Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
+    Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "css" | "theme"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+        theme?: "standard" | "modern" | undefined;
+    }, {
         sm: string;
         md: string;
         lg: string;
@@ -738,9 +742,10 @@ export declare const ToggleGroup: {
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "size" | "css" | "isIconOnly"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    }, "size" | "css" | "theme" | "isIconOnly"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         size?: "sm" | "md" | "lg" | undefined;
         isIconOnly?: boolean | "true" | undefined;
+        theme?: "standard" | "modern" | undefined;
     }, {
         sm: string;
         md: string;
@@ -1492,10 +1497,11 @@ export declare const ToggleGroup: {
         }> | undefined;
     }, "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<{
+    }, "direction" | "css" | "theme" | "isFullWidth" | "hasGap"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         isFullWidth?: boolean | "true" | undefined;
         hasGap?: boolean | "true" | "false" | undefined;
         direction?: "row" | "column" | undefined;
+        theme?: "standard" | "modern" | undefined;
     }, {
         sm: string;
         md: string;
@@ -1868,10 +1874,11 @@ export declare const ToggleGroup: {
         }> | undefined;
     }) | (Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
         disableDeselect?: boolean;
-    }, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    }, "direction" | "css" | "theme" | "isFullWidth" | "hasGap"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         isFullWidth?: boolean | "true" | undefined;
         hasGap?: boolean | "true" | "false" | undefined;
         direction?: "row" | "column" | undefined;
+        theme?: "standard" | "modern" | undefined;
     }, {
         sm: string;
         md: string;

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

@@ -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;
     appearance?: "standard" | "rounded" | undefined;
 }, {
     sm: string;
@@ -379,7 +380,7 @@ type TopBarProps = StyledRootProps & {
     className?: string;
 };
 export declare const TopBar: {
-    ({ size, className, appearance, ...props }: React.PropsWithChildren<TopBarProps>): React.JSX.Element;
+    ({ size, diffused, className, appearance, ...props }: React.PropsWithChildren<TopBarProps>): React.JSX.Element;
     displayName: string;
 } & {
     Brand: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"a", {}, {
@@ -1503,7 +1504,7 @@ export declare const TopBar: {
     ActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+        theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         isRounded?: boolean | "true" | undefined;
@@ -1877,8 +1878,8 @@ export declare const TopBar: {
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+    }, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+        theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
         appearance?: "outline" | "solid" | "simple" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         isRounded?: boolean | "true" | undefined;

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as s}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as p}from"../flex/Flex.js";import{colorSchemes as c}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as l}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",zIndex:1,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"}},appearance:{standard:{width:"100vw",top:"0",borderBottom:"1px solid $borderBottom"},rounded:{width:"100%",top:"$2",p:"$2",border:"1px solid #ffffff",borderRadius:"$round"}}}}),$=r(p,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",className:a=c.light,appearance:i="standard",...d})=>{const{y:n}=s();return o.createElement(B,{className:a,hasScrolled:!!n,appearance:i,size:t},o.createElement($,{...d}))},b=Object.assign(e,{Brand:h,BrandLogo:g,BrandName:f,ActionIcon:l,Divider:x});e.displayName="TopBar";export{b as TopBar};
+import*as r from"react";import{styled as o}from"../../stitches.js";import{useWindowScrollPosition as p}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as c}from"../flex/Flex.js";import{colorSchemes as l}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as f}from"./TopBarActionIcon.js";import{TopBarBrand as h,TopBarBrandLogo as g,TopBarBrandName as x}from"./TopBarBrand.js";const b=()=>r.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),u=o("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",zIndex:1,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)"}}},appearance:{standard:{width:"100vw",top:"0",borderBottom:"1px solid $borderBottom"},rounded:{width:"100%",top:"$2",p:"$2",border:"1px solid #ffffff",borderRadius:"$round"}}}}),B=o(c,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",diffused:a,className:i=l.light,appearance:d="standard",...n})=>{const{y:s}=p();return r.createElement(u,{className:i,hasScrolled:!!s,diffused:a,appearance:d,size:t},r.createElement(B,{...n}))},$=Object.assign(e,{Brand:h,BrandLogo:g,BrandName:x,ActionIcon:f,Divider:b});e.displayName="TopBar";export{$ as TopBar};
 //# sourceMappingURL=TopBar.js.map

package/dist/components/top-bar/TopBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as 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\n zIndex: 1,\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 appearance: {\n standard: {\n width: '100vw',\n top: '0',\n borderBottom: '1px solid $borderBottom'\n },\n rounded: {\n width: '100%',\n top: '$2',\n p: '$2',\n border: '1px solid #ffffff',\n borderRadius: '$round'\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\ntype TopBarProps = StyledRootProps & {\n css?: CSS\n className?: string\n}\n\nconst TopBarComponent = ({\n size = 'md',\n className = topBarColorSchemes['light'],\n appearance = 'standard',\n ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <StyledRoot\n className={className}\n hasScrolled={!!scrollPositionY}\n appearance={appearance}\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","appearance","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,~~EAAG~~,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SAEZ,OAAQ,EACR,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,WAAY,CACV,SAAU,CACR,MAAO,QACP,IAAK,IACL,aAAc,yBAChB,EACA,QAAS,CACP,MAAO,OACP,IAAK,KACL,EAAG,KACH,OAAQ,oBACR,aAAc,QAChB,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,UAAAC,EAAYC,EAAmB,MAC/B,WAAAC,EAAa,cACVC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,~~EAAAA,EAE~~/B,~~OACEb~~,EAAA,cAACE,EAAA,CACC,~~UAAWM~~,EACX,YAAa,CAAC,CAACI,EACf,~~WAAYF~~,EACZ,~~KAAMH~~,CAAAA,EAENP,EAAA,cAACI,EAAA,CAAW,~~GAAGO~~,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,~~OAAOR~~,EAAiB,CACnD,~~MAAOS~~,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,~~QAASnB~~,CACX,CAAC,EAEDO,EAAgB,YAAc"}
1	+ {"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as 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\n zIndex: 1,\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 appearance: {\n standard: {\n width: '100vw',\n top: '0',\n borderBottom: '1px solid $borderBottom'\n },\n rounded: {\n width: '100%',\n top: '$2',\n p: '$2',\n border: '1px solid #ffffff',\n borderRadius: '$round'\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\ntype TopBarProps = StyledRootProps & {\n css?: CSS\n className?: string\n}\n\nconst TopBarComponent = ({\n size = 'md',\n diffused,\n className = topBarColorSchemes['light'],\n appearance = 'standard',\n ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <StyledRoot\n className={className}\n hasScrolled={!!scrollPositionY}\n diffused={diffused}\n appearance={appearance}\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","appearance","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,CAAA,CAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SAEZ,OAAQ,EACR,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,EACA,WAAY,CACV,SAAU,CACR,MAAO,QACP,IAAK,IACL,aAAc,yBAChB,EACA,QAAS,CACP,MAAO,OACP,IAAK,KACL,EAAG,KACH,OAAQ,oBACR,aAAc,QAChB,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,MAC/B,WAAAC,EAAa,cACVC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,IAE/B,OACEd,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACI,EACf,SAAUL,EACV,WAAYG,EACZ,KAAMJ,CAAAA,EAENP,EAAA,cAACI,EAAA,CAAW,GAAGQ,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOT,EAAiB,CACnD,MAAOU,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASpB,CACX,CAAC,EAEDO,EAAgB,YAAc"}