@atom-learning/components 2.0.0 → 2.1.0

package/dist/components/inline-message/InlineMessage.d.ts

@@ -0,0 +1,541 @@
+import * as React from 'react';
+import { InlineMessageTheme } from './InlineMessage.types';
+declare const InlineMessageContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    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: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": 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";
+        };
+    };
+}>>, {
+    theme?: InlineMessageTheme | undefined;
+}, {
+    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: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": 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";
+        };
+    };
+}>>;
+declare type TInlineMessageProps = React.ComponentProps<typeof InlineMessageContainer> & {
+    showIcon?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+};
+export declare const InlineMessage: React.FC<TInlineMessageProps>;
+export {};

package/dist/components/inline-message/InlineMessage.js

@@ -0,0 +1 @@
+import*as e from"react";import{INLINE_MESSAGE_THEMES as c,INLINE_MESSAGE_ICONS as a}from"./InlineMessage.config.js";import{Flex as E}from"../flex/Flex.js";import{Text as l}from"../text/Text.js";import{Icon as f}from"../icon/Icon.js";import{styled as t}from"../../stitches.js";const p=t(E,{variants:{theme:c}}),I=t(f,{flexShrink:"0",mr:"$2"}),h=({css:s,showIcon:m=!0,theme:r="error",size:o="sm",children:i,...n})=>e.createElement(p,{theme:r,css:s,...n},m&&e.createElement(I,{size:"sm",is:a[r]}),e.createElement(l,{as:"span",size:o,css:{color:"inherit",transform:"translateY($space$0)"}},i));export{h as InlineMessage};

package/dist/components/inline-message/InlineMessage.types.d.ts

@@ -0,0 +1 @@
+export declare type InlineMessageTheme = 'warning' | 'error' | 'success' | 'info' | 'neutral';

package/dist/components/inline-message/index.d.ts

@@ -0,0 +1 @@
+export { InlineMessage } from './InlineMessage';

package/dist/components/input/Input.d.ts

@@ -63,6 +63,7 @@ declare const StyledInput: import("@stitches/react/types/styled-component").Styl
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/label/Label.d.ts

@@ -65,6 +65,7 @@ declare const StyledLabel: import("@stitches/react/types/styled-component").Styl
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

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

@@ -63,6 +63,7 @@ export declare const StyledLink: import("@stitches/react/types/styled-component"
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/list/List.d.ts

@@ -59,6 +59,7 @@ export declare const StyledLi: import("@stitches/react/types/styled-component").
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;
@@ -327,6 +328,7 @@ export declare const StyledList: import("@stitches/react/types/styled-component"
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/notification-badge/NotificationBadge.d.ts

@@ -59,6 +59,7 @@ declare const StyledBadge: import("@stitches/react/types/styled-component").Styl
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;
@@ -323,6 +324,7 @@ declare const StyledBadge: import("@stitches/react/types/styled-component").Styl
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/popover/Popover.d.ts

@@ -61,6 +61,7 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/popover/PopoverContent.d.ts

@@ -62,6 +62,7 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -62,6 +62,7 @@ declare const StyledProgressBar: import("@stitches/react/types/styled-component"
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/radio-button/RadioButton.d.ts

@@ -61,6 +61,7 @@ declare const StyledRadioButton: import("@stitches/react/types/styled-component"
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/radio-button/RadioButtonGroup.d.ts

@@ -62,6 +62,7 @@ export declare const RadioButtonGroup: import("@stitches/react/types/styled-comp
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/radio-button-field/RadioButtonField.js

@@ -1 +1 @@
-import*as e from"react";import{useFormContext as V,Controller as C}from"react-hook-form";import{Description as F}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{Label as g}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as h}from"../radio-button/RadioButtonGroup.js";import{ValidationError as v}from"../validation-error/ValidationError.js";import{styled as B}from"../../stitches.js";import{RadioField as R}from"./RadioField.js";const q=B("fieldset",{all:"unset"}),r=({children:d,css:u,direction:s="column",defaultValue:t,description:l,label:c,name:n,validation:o,onValueChange:a})=>{const{control:p}=V(),{error:i}=b(n);return e.createElement(q,{css:u},e.createElement(g,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(o==null?void 0:o.required)},c),l&&e.createElement(F,{css:{mb:"$3"}},l),e.createElement(C,{control:p,name:n,rules:o,defaultValue:t,render:({onChange:f,value:E})=>e.createElement(h,{direction:s,defaultValue:t,onValueChange:m=>{f(m),a==null||a(m)},value:E},d)}),i&&e.createElement(v,{css:{mt:"$2"}},i))};r.Item=R,r.displayName="RadioButtonField";export{r as RadioButtonField};
+import*as e from"react";import{useFormContext as g,Controller as C}from"react-hook-form";import{Description as F}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import{Label as b}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as h}from"../radio-button/RadioButtonGroup.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{styled as B}from"../../stitches.js";import{RadioField as R}from"./RadioField.js";const q=B("fieldset",{all:"unset"}),r=({children:s,css:d,direction:u="column",defaultValue:t,description:l,label:c,name:n,validation:o,onValueChange:a})=>{const{control:p}=g(),{error:i}=V(n);return e.createElement(q,{css:d},e.createElement(b,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(o==null?void 0:o.required)},c),l&&e.createElement(F,{css:{mb:"$3"}},l),e.createElement(C,{control:p,name:n,rules:o,defaultValue:t,render:({onChange:f,value:E})=>e.createElement(h,{direction:u,defaultValue:t,onValueChange:m=>{f(m),a==null||a(m)},value:E},s)}),i&&e.createElement(v,{css:{mt:"$2"}},i))};r.Item=R,r.displayName="RadioButtonField";export{r as RadioButtonField};

package/dist/components/radio-card/RadioCard.d.ts

@@ -64,6 +64,7 @@ export declare const StyledRadioCard: import("@stitches/react/types/styled-compo
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/select/Select.d.ts

@@ -63,6 +63,7 @@ declare const StyledSelect: import("@stitches/react/types/styled-component").Sty
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;

package/dist/components/slider/Slider.d.ts

@@ -63,6 +63,7 @@ declare const StyledSlider: import("@stitches/react/types/styled-component").Sty
         warning: any;
         warningMid: any;
         warningDark: any;
+        warningText: any;
         subjectEnglish: any;
         subjectMaths: any;
         subjectScience: any;