@atom-learning/components 4.0.0-beta.5 → 4.0.0-beta.6

package/dist/components/input/Input.js

@@ -0,0 +1,2 @@
+import*as r from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as l}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as c}from"../../utilities/style/disabledStyle.js";import{Flex as b}from"../flex/Flex.js";import{Text as g}from"../text/Text.js";const s=m(b,{background:"white",color:"$grey1000",border:"1px solid $grey800",borderRadius:"$0",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&:focus-within":{borderColor:"$blue800"},variants:{size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:c},state:{error:{borderColor:"$danger"}}}});s.displayName="InputBackground";const h=m.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(g,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),f={sm:"sm",md:"md",lg:"md",xl:"lg"},a=r.forwardRef(({type:e="text",css:d,size:o,...t},n)=>{const i=r.useMemo(()=>l(o,u=>f[u]),[o]);return r.createElement(h,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:i,...t})});a.displayName="InputText";const p=r.forwardRef(({size:e="md",state:d,disabled:o,css:t,...n},i)=>r.createElement(s,{size:e,disabled:o,state:d,css:t},r.createElement(a,{size:e,ref:i,disabled:o,...n})));p.displayName="Input";export{p as Input,s as InputBackground,a as InputText};
+//# sourceMappingURL=Input.js.map

package/dist/components/input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n  background: 'white',\n  color: '$grey1000',\n  border: '1px solid $grey800',\n  borderRadius: '$0',\n  transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n  width: '100%',\n  '&:focus-within': {\n    borderColor: '$blue800'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3'\n      },\n      md: {\n        height: '$4'\n      },\n      lg: {\n        height: '$5'\n      },\n      xl: {\n        height: '$6'\n      }\n    },\n    disabled: {\n      true: disabledStyle\n    },\n    state: {\n      error: {\n        borderColor: '$danger'\n      }\n    }\n  }\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n  // unsets\n  appearance: 'none',\n  border: 'none',\n  background: 'none',\n  backgroundImage: 'none',\n  backgroundColor: 'transparent',\n  boxShadow: 'none', // prevent default iOS default styling\n  boxSizing: 'border-box',\n  '&:focus': {\n    outline: 'none'\n  },\n  //\n  px: '$3',\n  size: '100%'\n})\n\nexport type InputTextProps = Omit<\n  React.ComponentProps<typeof StyledInputText>,\n  'size' | 'type' | 'as'\n> & {\n  size: React.ComponentProps<typeof Text>['size']\n  // override default 'type' property to prevent Input from being used to render\n  // checkboxes, radios etc — we have dedicated components for them\n  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n  as?: never\n}\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n  React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n    const textSize = React.useMemo(\n      () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n      [size]\n    )\n\n    return (\n      <StyledInputText\n        ref={ref}\n        as=\"input\"\n        type={type === 'number' ? 'text' : type}\n        inputMode={type === 'number' ? 'numeric' : undefined}\n        pattern={type === 'number' ? '[0-9]*' : undefined}\n        size={textSize}\n        {...rest}\n      />\n    )\n  })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n  React.forwardRef(({ size = 'md', state, disabled, css, ...rest }, ref) => {\n    return (\n      <InputBackground size={size} disabled={disabled} state={state} css={css}>\n        <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n      </InputBackground>\n    )\n  })\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,WAAY,QACZ,MAAO,YACP,OAAQ,qBACR,aAAc,KACd,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,YAAa,UACf,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAWX,MAAAU,EACXT,EAAM,WAAW,CAAC,CAAE,KAAAG,EAAO,KAAM,MAAAO,EAAO,SAAAC,EAAU,IAAAT,KAAQE,CAAK,EAAGC,IAE9DL,EAAA,cAACT,EAAgB,CAAA,KAAMY,EAAM,SAAUQ,EAAU,MAAOD,EAAO,IAAKR,CAClEF,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUM,EAAW,GAAGP,CAAAA,CAAM,CACjE,CAEH,EAEHK,EAAM,YAAc"}

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

@@ -0,0 +1,2 @@
+export type { InputProps } from './Input';
+export { Input, InputBackground, InputText } from './Input';

package/dist/components/input-field/InputField.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { InputProps } from '../../components/input';
+declare type InputFieldProps = InputProps & FieldElementWrapperProps;
+export declare const InputField: {
+    ({ css, label, name, validation, prompt, description, hideLabel, ...remainingProps }: InputFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/input-field/InputField.js

@@ -0,0 +1,2 @@
+import*as i from"react";import{useFormContext as c}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 F}from"../form/useFieldError.js";import{Input as b}from"../input/Input.js";const p=({css:m,label:l,name:e,validation:r,prompt:a,description:d,hideLabel:n,...s})=>{const{register:o}=c(),{error:t}=F(e),u=r?o(r):o;return i.createElement(f,{css:m,description:d,error:t,fieldId:e,hideLabel:n,label:l,prompt:a,required:Boolean(r==null?void 0:r.required)},i.createElement(b,{id:e,name:e,ref:u,...t&&{state:"error"},...s}))};p.displayName="InputField";export{p as InputField};
+//# sourceMappingURL=InputField.js.map

package/dist/components/input-field/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sources":["../../../src/components/input-field/InputField.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 { Input, InputProps } from '~/components/input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n  css,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  hideLabel,\n  ...remainingProps\n}: InputFieldProps) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\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      <Input\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nInputField.displayName = 'InputField'\n"],"names":["InputField","css","label","name","validation","prompt","description","hideLabel","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Input"],"mappings":"yTAYaA,EAAa,CAAC,CACzB,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,UAAAC,KACGC,CACL,IAAuB,CACrB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaK,EACb,MAAOK,EACP,QAASR,EACT,UAAWI,EACX,MAAOL,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCU,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAW,YAAc"}

package/dist/components/input-field/index.d.ts

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

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

@@ -0,0 +1,395 @@
+import * as React from 'react';
+import type { Override } from '../../utilities/types';
+declare const StyledLabel: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"label", {
+    size?: "sm" | "md" | undefined;
+    type?: "inline" | "block" | undefined;
+    align?: "center" | "start" | undefined;
+    direction?: "row" | "reverse" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textBold: any;
+        textRegular: any;
+        textSubtle: any;
+        textMinimal: any;
+        background: any;
+        backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        pink100: any;
+        pink200: any;
+        pink300: any;
+        pink400: any;
+        pink500: any;
+        pink600: any;
+        pink700: any;
+        pink800: any;
+        pink900: any;
+        pink1000: any;
+        pink1100: any;
+        pink1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
+        cyan100: any;
+        cyan200: any;
+        cyan300: any;
+        cyan400: any;
+        cyan500: any;
+        cyan600: any;
+        cyan700: any;
+        cyan800: any;
+        cyan900: any;
+        cyan1000: any;
+        cyan1100: any;
+        cyan1200: any;
+        green100: any;
+        green200: any;
+        green300: any;
+        green400: any;
+        green500: any;
+        green600: any;
+        green700: any;
+        green800: any;
+        green900: any;
+        green1000: any;
+        green1100: any;
+        green1200: any;
+        magenta100: any;
+        magenta200: any;
+        magenta300: any;
+        magenta400: any;
+        magenta500: any;
+        magenta600: any;
+        magenta700: any;
+        magenta800: any;
+        magenta900: any;
+        magenta1000: any;
+        magenta1100: any;
+        magenta1200: any;
+        red100: any;
+        red200: any;
+        red300: any;
+        red400: any;
+        red500: any;
+        red600: any;
+        red700: any;
+        red800: any;
+        red900: any;
+        red1000: any;
+        red1100: any;
+        red1200: any;
+        teal100: any;
+        teal200: any;
+        teal300: any;
+        teal400: any;
+        teal500: any;
+        teal600: any;
+        teal700: any;
+        teal800: any;
+        teal900: any;
+        teal1000: any;
+        teal1100: any;
+        teal1200: any;
+        orange100: any;
+        orange200: any;
+        orange300: any;
+        orange400: any;
+        orange500: any;
+        orange600: any;
+        orange700: any;
+        orange800: any;
+        orange900: any;
+        orange1000: any;
+        orange1100: any;
+        orange1200: any;
+        yellow100: any;
+        yellow200: any;
+        yellow300: any;
+        yellow400: any;
+        yellow500: any;
+        yellow600: any;
+        yellow700: any;
+        yellow800: any;
+        yellow900: any;
+        yellow1000: any;
+        yellow1100: any;
+        yellow1200: any;
+        lime100: any;
+        lime200: any;
+        lime300: any;
+        lime400: any;
+        lime500: any;
+        lime600: any;
+        lime700: any;
+        lime800: any;
+        lime900: any;
+        lime1000: any;
+        lime1100: any;
+        lime1200: any;
+        lapis100: any;
+        lapis200: any;
+        lapis300: any;
+        lapis400: any;
+        lapis500: any;
+        lapis600: any;
+        lapis700: any;
+        lapis800: any;
+        lapis900: any;
+        lapis1000: any;
+        lapis1100: any;
+        lapis1200: any;
+        maroon100: any;
+        maroon200: any;
+        maroon300: any;
+        maroon400: any;
+        maroon500: any;
+        maroon600: any;
+        maroon700: any;
+        maroon800: any;
+        maroon900: any;
+        maroon1000: any;
+        maroon1100: any;
+        maroon1200: any;
+        marsh100: any;
+        marsh200: any;
+        marsh300: any;
+        marsh400: any;
+        marsh500: any;
+        marsh600: any;
+        marsh700: any;
+        marsh800: any;
+        marsh900: any;
+        marsh1000: any;
+        marsh1100: any;
+        marsh1200: 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;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: 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;
+        glBlueLight: any;
+        glBluePrimary: any;
+        glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+        "24": 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;
+    };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
+    };
+    size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+    };
+    p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mr: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mb: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+}>>;
+declare type LabelProps = Override<React.ComponentPropsWithoutRef<typeof StyledLabel>, {
+    as?: 'label' | 'legend';
+    required?: boolean;
+}>;
+export declare const Label: {
+    ({ align, as, direction, size, type, children, required, ...rest }: LabelProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/label/Label.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{styled as i}from"../../stitches.js";import{getTextVariant as t}from"../text/Text.js";const p=i("label",{color:"$tonal500",fontFamily:"$body",m:0,variants:{size:{sm:t({size:"sm"}),md:t({size:"md"})},type:{block:{display:"block",fontWeight:600},inline:{display:"flex",fontWeight:400,maxWidth:"max-content"}},align:{start:{},center:{}},direction:{reverse:{},row:{}}},compoundVariants:[{type:"inline",align:"start",css:{alignItems:"flex-start"}},{type:"inline",align:"center",css:{alignItems:"center"}},{type:"inline",direction:"reverse",css:{flexDirection:"row-reverse"}},{type:"inline",direction:"row",css:{flexDirection:"row"}}]}),y=i("span",{color:"$danger",ml:"$1",fontWeight:400}),n=({align:r="start",as:a="label",direction:l="row",size:o="md",type:s="block",children:c,required:m,...d})=>e.createElement(p,{as:a,size:o,type:s,align:r,direction:l,...d},c,m&&e.createElement(y,{"aria-hidden":!0},"*"));n.displayName="Label";export{n as Label};
+//# sourceMappingURL=Label.js.map

package/dist/components/label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities/types'\n\nimport { getTextVariant } from '../text'\n\nconst StyledLabel = styled('label', {\n  color: '$tonal500',\n  fontFamily: '$body',\n  m: 0,\n  variants: {\n    size: {\n      sm: getTextVariant({ size: 'sm' }),\n      md: getTextVariant({ size: 'md' })\n    },\n    type: {\n      block: {\n        display: 'block',\n        fontWeight: 600\n      },\n      inline: {\n        display: 'flex',\n        fontWeight: 400,\n        maxWidth: 'max-content'\n      }\n    },\n    align: { start: {}, center: {} },\n    direction: { reverse: {}, row: {} }\n  },\n  compoundVariants: [\n    {\n      type: 'inline',\n      align: 'start',\n      css: { alignItems: 'flex-start' }\n    },\n    {\n      type: 'inline',\n      align: 'center',\n      css: { alignItems: 'center' }\n    },\n    {\n      type: 'inline',\n      direction: 'reverse',\n      css: { flexDirection: 'row-reverse' }\n    },\n    {\n      type: 'inline',\n      direction: 'row',\n      css: { flexDirection: 'row' }\n    }\n  ]\n})\n\nconst StyledAsterisk = styled('span', {\n  color: '$danger',\n  ml: '$1',\n  fontWeight: 400\n})\n\ntype LabelProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledLabel>,\n  {\n    as?: 'label' | 'legend'\n    required?: boolean\n  }\n>\n\nexport const Label = ({\n  align = 'start',\n  as = 'label',\n  direction = 'row',\n  size = 'md',\n  type = 'block',\n  children,\n  required,\n  ...rest\n}: LabelProps) => (\n  <StyledLabel\n    as={as}\n    size={size}\n    type={type}\n    align={align}\n    direction={direction}\n    {...rest}\n  >\n    {children}\n    {required && <StyledAsterisk aria-hidden>*</StyledAsterisk>}\n  </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"names":["StyledLabel","styled","getTextVariant","StyledAsterisk","Label","align","as","direction","size","type","children","required","rest","React"],"mappings":"oHAOA,MAAMA,EAAcC,EAAO,QAAS,CAClC,MAAO,YACP,WAAY,QACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAIC,EAAe,CAAE,KAAM,IAAK,CAAC,EACjC,GAAIA,EAAe,CAAE,KAAM,IAAK,CAAC,CACnC,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,WAAY,GACd,EACA,OAAQ,CACN,QAAS,OACT,WAAY,IACZ,SAAU,aACZ,CACF,EACA,MAAO,CAAE,MAAO,CAAA,EAAI,OAAQ,CAAG,CAAA,EAC/B,UAAW,CAAE,QAAS,CAAI,EAAA,IAAK,EAAG,CACpC,EACA,iBAAkB,CAChB,CACE,KAAM,SACN,MAAO,QACP,IAAK,CAAE,WAAY,YAAa,CAClC,EACA,CACE,KAAM,SACN,MAAO,SACP,IAAK,CAAE,WAAY,QAAS,CAC9B,EACA,CACE,KAAM,SACN,UAAW,UACX,IAAK,CAAE,cAAe,aAAc,CACtC,EACA,CACE,KAAM,SACN,UAAW,MACX,IAAK,CAAE,cAAe,KAAM,CAC9B,CACF,CACF,CAAC,EAEKC,EAAiBF,EAAO,OAAQ,CACpC,MAAO,UACP,GAAI,KACJ,WAAY,GACd,CAAC,EAUYG,EAAQ,CAAC,CACpB,MAAAC,EAAQ,QACR,GAAAC,EAAK,QACL,UAAAC,EAAY,MACZ,KAAAC,EAAO,KACP,KAAAC,EAAO,QACP,SAAAC,EACA,SAAAC,KACGC,CACL,IACEC,EAAA,cAACb,EAAA,CACC,GAAIM,EACJ,KAAME,EACN,KAAMC,EACN,MAAOJ,EACP,UAAWE,EACV,GAAGK,CAEHF,EAAAA,EACAC,GAAYE,EAAA,cAACV,EAAA,CAAe,cAAW,IAAC,GAAC,CAC5C,EAGFC,EAAM,YAAc"}

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

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