@atom-learning/components 2.4.1 → 2.5.1

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## [2.4.1](https://github.com/Atom-Learning/components/compare/v2.4.0...v2.4.1) (2022-09-21)
+## [2.5.1](https://github.com/Atom-Learning/components/compare/v2.5.0...v2.5.1) (2022-09-29)
 
 
 ### Bug Fixes
 
-* empty state image size ([08517df](https://github.com/Atom-Learning/components/commit/08517df0c233aedf89c169afbb5f5d39cbe33238))
+* **select-field:** adding hide label prop to select field ([aa41880](https://github.com/Atom-Learning/components/commit/aa41880d431f657b307a05edc41f615b74dc76b2))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/field-wrapper/FieldWrapper.d.ts

@@ -11,5 +11,6 @@ export declare type FieldWrapperProps = {
     };
     description?: string;
     required?: boolean;
+    hideLabel?: boolean;
 };
 export declare const FieldWrapper: React.FC<FieldWrapperProps>;

package/dist/components/field-wrapper/FieldWrapper.js

@@ -1 +1 @@
-import*as e from"react";import{Box as a}from"../box/Box.js";import{Flex as c}from"../flex/Flex.js";import{Label as f}from"../label/Label.js";import{Link as d}from"../link/Link.js";import{InlineMessage as b}from"../inline-message/InlineMessage.js";import{Description as E}from"./FieldDescription.js";const o=({css:i,children:l,error:t,fieldId:s,label:n,prompt:r,description:m,required:p})=>e.createElement(a,{css:i},e.createElement(c,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},e.createElement(f,{htmlFor:s,required:p},n),r&&e.createElement(d,{href:r.link,size:"sm"},r.label)),m&&e.createElement(E,{css:{mb:"$3"}},m),l,t&&e.createElement(b,{css:{mt:"$2"}},t));o.displayName="FieldWrapper";export{o as FieldWrapper};
+import*as e from"react";import{Box as f}from"../box/Box.js";import{Flex as d}from"../flex/Flex.js";import{Label as b}from"../label/Label.js";import{Link as E}from"../link/Link.js";import{InlineMessage as h}from"../inline-message/InlineMessage.js";import{Description as u}from"./FieldDescription.js";import*as F from"@radix-ui/react-visually-hidden";const o=({css:i,children:s,error:t,fieldId:l,label:n,prompt:r,description:m,required:a,hideLabel:p})=>{const c=p?F.Root:d;return e.createElement(f,{css:i},e.createElement(c,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},e.createElement(b,{htmlFor:l,required:a},n),r&&e.createElement(E,{href:r.link,size:"sm"},r.label)),m&&e.createElement(u,{css:{mb:"$3"}},m),s,t&&e.createElement(h,{css:{mt:"$2"}},t))};o.displayName="FieldWrapper";export{o as FieldWrapper};

package/dist/components/select-field/SelectField.js

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

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

@@ -10,7 +10,277 @@ interface TopBarSubComponents {
     Divider: typeof TopBarDivider;
 }
 declare const TopBarDivider: () => JSX.Element;
-interface TopBarProps {
+declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    hasScrolled?: boolean | "true" | undefined;
+    size?: "md" | "lg" | 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 StyledRootProps = React.ComponentProps<typeof StyledRoot>;
+interface TopBarProps extends StyledRootProps {
     css?: CSS;
 }
 export declare const TopBar: React.FC<TopBarProps> & TopBarSubComponents;

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

@@ -1 +1 @@
-import t from"react";import{styled as r}from"../../stitches.js";import{useScrollPosition as i}from"../../utilities/hooks/useScrollPosition.js";import{Divider as n}from"../divider/Divider.js";import{Flex as m}from"../flex/Flex.js";import{TopBarActionIcon as d}from"./TopBarActionIcon.js";import{TopBarBrand as p,TopBarBrandLogo as l,TopBarBrandName as s}from"./TopBarBrand.js";const c=()=>t.createElement(n,{orientation:"vertical",css:{minHeight:28,bg:"$tonal100"}}),x=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",height:"$6",zIndex:1,borderBottom:"1px solid $tonal100",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}}}}),B=r(m,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=e=>{const{y:a}=i();return t.createElement(x,{hasScrolled:!!a},t.createElement(B,{...e}))};o.Brand=p,o.BrandLogo=l,o.BrandName=s,o.ActionIcon=d,o.Divider=c,o.displayName="TopBar";export{o as TopBar};
+import t from"react";import{styled as r}from"../../stitches.js";import{useScrollPosition as s}from"../../utilities/hooks/useScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as d}from"../flex/Flex.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as p,TopBarBrandName as h}from"./TopBarBrand.js";const c=()=>t.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$tonal100"}}),g=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $tonal100",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6",[`& ${e}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${e}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),x=r(d,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",...a})=>{const{y:n}=s();return t.createElement(g,{hasScrolled:!!n,size:i},t.createElement(x,{...a}))};o.Brand=p,o.BrandLogo=e,o.BrandName=h,o.ActionIcon=l,o.Divider=c,o.displayName="TopBar";export{o as TopBar};

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

@@ -5,7 +5,10 @@ declare type TopBarBrandLogoProps = {
     alt?: string;
     css?: CSS;
 };
-export declare const TopBarBrandLogo: ({ src, alt, css }: TopBarBrandLogoProps) => JSX.Element;
+export declare const TopBarBrandLogo: {
+    ({ src, alt, css }: TopBarBrandLogoProps): JSX.Element;
+    toString(): string;
+};
 export declare const TopBarBrandName: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{

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

@@ -1 +1 @@
-import a from"react";import{styled as o}from"../../stitches.js";import{Image as n}from"../image/Image.js";import{Text as m}from"../text/Text.js";const c=({src:r,alt:t="Atom Learning logo",css:e})=>a.createElement(n,{src:r,alt:t,css:{mr:"$3",mb:"5px",'&[src$=".svg"]':{height:24,width:"auto"},...e}}),l=o(m,{color:"$tonal400"}),s=o("a",{display:"flex",alignItems:"center",textDecoration:"none",color:"$tonal400","&:hover, &:focus":{textDecoration:"none"}});export{s as TopBarBrand,c as TopBarBrandLogo,l as TopBarBrandName};
+import n from"react";import{styled as o}from"../../stitches.js";import{Image as l}from"../image/Image.js";import{Text as m}from"../text/Text.js";const r=({src:t,alt:a="Atom Learning logo",css:e})=>n.createElement(l,{className:"topbar-brand-logo",src:t,alt:a,css:{mr:"$3",mb:"5px",...e}});r.toString=()=>".topbar-brand-logo";const c=o(m,{color:"$tonal400"}),s=o("a",{display:"flex",alignItems:"center",textDecoration:"none",color:"$tonal400","&:hover, &:focus":{textDecoration:"none"}});export{s as TopBarBrand,r as TopBarBrandLogo,c as TopBarBrandName};