@atom-learning/components 2.28.3-beta.1 → 2.28.3

package/dist/experiments/color-scheme/stitches.colorscheme.config.d.ts

@@ -1,452 +0,0 @@
-/// <reference types="react" />
-export declare const colorSchemes: {};
-export declare const styled: <Type extends import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements | import("react").ComponentType<any>, Composers extends (string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> | {
-    [name: string]: unknown;
-})[], CSS = import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        slate1: any;
-        slate2: any;
-        slate3: any;
-        slate4: any;
-        slate5: any;
-        slate6: any;
-        slate7: any;
-        slate8: any;
-        slate9: any;
-        slate10: any;
-        blue1: any;
-        blue2: any;
-        blue3: any;
-        blue4: any;
-        blue5: any;
-        blue6: any;
-        blue7: any;
-        blue8: any;
-        blue9: any;
-        blue10: any;
-        background: any;
-        foreground: any;
-        foreground6plus: any;
-    };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: {
-        readonly [$$PropertyValue]: "background";
-    }) => {
-        background: {
-            readonly [$$PropertyValue]: "background";
-        };
-    };
-    inset: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        top: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        right: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        bottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        left: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    size: (value: string | number | {
-        readonly [$$ScaleValue]: "size";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-    };
-    p: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pl: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    px: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    py: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    m: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    ml: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mx: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    my: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-}>>(type: Type, ...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("@stitches/react/types/util").Function | import("react").ComponentType<any> ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
-    variants?: {
-        [x: string]: {
-            [x: string]: CSS;
-            [x: number]: CSS;
-        };
-    } | undefined;
-    compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
-        css: CSS;
-    })[] | undefined;
-    defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
-} & CSS & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        slate1: any;
-        slate2: any;
-        slate3: any;
-        slate4: any;
-        slate5: any;
-        slate6: any;
-        slate7: any;
-        slate8: any;
-        slate9: any;
-        slate10: any;
-        blue1: any;
-        blue2: any;
-        blue3: any;
-        blue4: any;
-        blue5: any;
-        blue6: any;
-        blue7: any;
-        blue8: any;
-        blue9: any;
-        blue10: any;
-        background: any;
-        foreground: any;
-        foreground6plus: any;
-    };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: {
-        readonly [$$PropertyValue]: "background";
-    }) => {
-        background: {
-            readonly [$$PropertyValue]: "background";
-        };
-    };
-    inset: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        top: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        right: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        bottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        left: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    size: (value: string | number | {
-        readonly [$$ScaleValue]: "size";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-    };
-    p: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pl: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    px: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    py: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    m: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    ml: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mx: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    my: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-}>>, createTheme: <Argument0 extends string | ({
-    colors?: {
-        slate1?: string | number | boolean | undefined;
-        slate2?: string | number | boolean | undefined;
-        slate3?: string | number | boolean | undefined;
-        slate4?: string | number | boolean | undefined;
-        slate5?: string | number | boolean | undefined;
-        slate6?: string | number | boolean | undefined;
-        slate7?: string | number | boolean | undefined;
-        slate8?: string | number | boolean | undefined;
-        slate9?: string | number | boolean | undefined;
-        slate10?: string | number | boolean | undefined;
-        blue1?: string | number | boolean | undefined;
-        blue2?: string | number | boolean | undefined;
-        blue3?: string | number | boolean | undefined;
-        blue4?: string | number | boolean | undefined;
-        blue5?: string | number | boolean | undefined;
-        blue6?: string | number | boolean | undefined;
-        blue7?: string | number | boolean | undefined;
-        blue8?: string | number | boolean | undefined;
-        blue9?: string | number | boolean | undefined;
-        blue10?: string | number | boolean | undefined;
-        background?: string | number | boolean | undefined;
-        foreground?: string | number | boolean | undefined;
-        foreground6plus?: string | number | boolean | undefined;
-    } | undefined;
-} & {
-    [x: string]: {
-        [x: string]: string | number | boolean;
-        [x: number]: string | number | boolean;
-    };
-}), Argument1 extends string | ({
-    colors?: {
-        slate1?: string | number | boolean | undefined;
-        slate2?: string | number | boolean | undefined;
-        slate3?: string | number | boolean | undefined;
-        slate4?: string | number | boolean | undefined;
-        slate5?: string | number | boolean | undefined;
-        slate6?: string | number | boolean | undefined;
-        slate7?: string | number | boolean | undefined;
-        slate8?: string | number | boolean | undefined;
-        slate9?: string | number | boolean | undefined;
-        slate10?: string | number | boolean | undefined;
-        blue1?: string | number | boolean | undefined;
-        blue2?: string | number | boolean | undefined;
-        blue3?: string | number | boolean | undefined;
-        blue4?: string | number | boolean | undefined;
-        blue5?: string | number | boolean | undefined;
-        blue6?: string | number | boolean | undefined;
-        blue7?: string | number | boolean | undefined;
-        blue8?: string | number | boolean | undefined;
-        blue9?: string | number | boolean | undefined;
-        blue10?: string | number | boolean | undefined;
-        background?: string | number | boolean | undefined;
-        foreground?: string | number | boolean | undefined;
-        foreground6plus?: string | number | boolean | undefined;
-    } | undefined;
-} & {
-    [x: string]: {
-        [x: string]: string | number | boolean;
-        [x: number]: string | number | boolean;
-    };
-})>(nameOrScalesArg0: Argument0, nameOrScalesArg1?: Argument1 | undefined) => string & {
-    className: string;
-    selector: string;
-} & (Argument0 extends string ? import("@stitches/react/types/stitches").ThemeTokens<Argument1, ""> : import("@stitches/react/types/stitches").ThemeTokens<Argument0, "">);
-export declare const bases: {
-    slate: string;
-};
-export declare const accents: {
-    slate: string;
-    blue: string;
-};

package/dist/experiments/color-scheme/stitches.colorscheme.config.js

@@ -1 +0,0 @@
-import{createStitches as u}from"@stitches/react";import a from"./blue.json.js";import i from"./slate.json.js";import{generateAlphaColors as s}from"./generateAlphaColors.js";import{utils as m,media as d}from"../../stitches.js";const e={},l=(c,o)=>{const t={};for(let n=1;n<=10;n++)t[`${c}${n}`]=`$${o}${n}`,t[`${c}A${n}`]=`$${o}A${n}`;return t},{styled:f,createTheme:r}=u({theme:{colors:{background:"white",foreground:i.slate9,foreground6plus:"white",...a,...s("blue",a),...i,...s("slate",i)}},utils:m,media:d});e["interactive-loContrast1"]=r("interactive-loContrast1",{colors:{interactiveForeground:"$foreground",interactive1:"white",interactive2:"$accent1",interactive3:"$accent2"}}),e["interactive-loContrast2"]=r("interactive-loContrast2",{colors:{interactiveForeground:"$foreground",interactive1:"$accent1",interactive2:"$accent2",interactive3:"$accent3"}}),e["interactive-hiContrast1"]=r("interactive-hiContrast1",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent7",interactive2:"$accent8",interactive3:"$accent9"}}),e["interactive-hiContrast2"]=r("interactive-hiContrast2",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent8",interactive2:"$accent9",interactive3:"$accent10"}});const $={slate:"slate"},h=()=>{Object.entries($).forEach(([c,o])=>{const t=`base-${c}`;e[t]=r(t,{colors:l("base",o)})})},v={slate:"slate",blue:"blue"},g=()=>{Object.entries(v).forEach(([c,o])=>{const t=`accent-${c}`;e[t]=r(t,{colors:l("accent",o)})})};h(),g();export{v as accents,$ as bases,e as colorSchemes,r as createTheme,f as styled};

package/dist/utilities/hooks/useWindowScrollPosition.d.ts

@@ -1,6 +0,0 @@
-export declare const useWindowScrollPosition: ({ delay }?: {
-    delay?: number | undefined;
-}) => {
-    x: number;
-    y: number;
-};

package/dist/utilities/hooks/useWindowScrollPosition.js

@@ -1 +0,0 @@
-import{useState as t,useEffect as s}from"react";import{debounce as i}from"throttle-debounce";const l=({delay:e=500}={})=>{const[r,n]=t({x:0,y:0});return s(()=>{const o=i(e,()=>{n({x:window.scrollX,y:window.scrollY})});return window.addEventListener("scroll",o),()=>{window.removeEventListener("scroll",o)}},[]),r};export{l as useWindowScrollPosition};

package/dist/utilities/hooks/useWindowSize.d.ts

@@ -1,8 +0,0 @@
-interface Size {
-    width: number | undefined;
-    height: number | undefined;
-}
-export declare const useWindowSize: ({ delay }?: {
-    delay?: number | undefined;
-}) => Size;
-export {};

package/dist/utilities/hooks/useWindowSize.js

@@ -1 +0,0 @@
-import{useState as o,useEffect as r}from"react";import{debounce as d}from"throttle-debounce";const w=({delay:t=500}={})=>{const[i,n]=o({width:void 0,height:void 0});return r(()=>{const e=d(t,()=>{n({width:window.innerWidth,height:window.innerHeight})});return window.addEventListener("resize",e),e(),()=>window.removeEventListener("resize",e)},[t]),i};export{w as useWindowSize};