npm - @atom-learning/components - Versions diffs - 5.11.0 → 5.12.0 - Mend

@atom-learning/components 5.11.0 → 5.12.0

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 (127) hide show

package/dist/components/combobox/ComboboxInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n boxShadow: 'none', // prevent default iOS default styling\n appearance: 'none',\n backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundRepeat: 'no-repeat, repeat',\n backgroundSize: '20px auto, 100%',\n border: '1px solid $grey700',\n borderRadius: '$0',\n boxSizing: 'border-box',\n color: '$grey1000',\n cursor: 'text',\n display: 'block',\n fontFamily: '$body',\n height: '$4',\n pl: '$3',\n pr: '$6',\n transition: 'all 100ms ease-out',\n width: '100%',\n '&::placeholder': {\n color: '$grey700',\n opacity: 1\n },\n '&:focus-within': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '&[disabled]': {\n backgroundColor: '$grey200',\n color: '$grey800',\n cursor: 'not-allowed'\n },\n variants: {\n size: {\n sm: {\n height: '$3',\n fontSize: '$sm',\n lineHeight: 1.7\n },\n md: {\n height: '$4',\n fontSize: '$md',\n lineHeight: 2\n },\n lg: {\n height: '$5',\n fontSize: '$md',\n lineHeight: 2\n }\n },\n state: {\n error: {\n border: '1px solid $danger'\n }\n }\n }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n typeof StyledComboboxInput\n>\n\nexport const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps> =\n React.forwardRef(({ size = 'md', ...rest }, ref) => (\n <StyledComboboxInput size={size} {...rest} ref={ref} />\n ))\n"],"names":["StyledComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme","ComboboxInput","React","size","rest","ref"],"mappings":"6XAOO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,UAAW,OACX,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,qBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,EAAGC,IAC1CH,EAAA,cAACN,EAAA,CAAoB,KAAMO,EAAO,GAAGC,EAAM,IAAKC,EAAK,CACtD"}
1	+ {"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n boxShadow: 'none', // prevent default iOS default styling\n appearance: 'none',\n backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundRepeat: 'no-repeat, repeat',\n backgroundSize: '20px auto, 100%',\n border: '1px solid $grey700',\n borderRadius: '$1',\n boxSizing: 'border-box',\n color: '$grey1000',\n cursor: 'text',\n display: 'block',\n fontFamily: '$body',\n height: '$4',\n pl: '$3',\n pr: '$6',\n transition: 'all 100ms ease-out',\n width: '100%',\n '&::placeholder': {\n color: '$grey700',\n opacity: 1\n },\n '&:focus-within': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '&[disabled]': {\n backgroundColor: '$grey200',\n color: '$grey800',\n cursor: 'not-allowed'\n },\n variants: {\n size: {\n sm: {\n height: '$3',\n fontSize: '$sm',\n lineHeight: 1.7\n },\n md: {\n height: '$4',\n fontSize: '$md',\n lineHeight: 2\n },\n lg: {\n height: '$5',\n fontSize: '$md',\n lineHeight: 2\n }\n },\n state: {\n error: {\n border: '1px solid $danger'\n }\n }\n }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n typeof StyledComboboxInput\n>\n\nexport const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps> =\n React.forwardRef(({ size = 'md', ...rest }, ref) => (\n <StyledComboboxInput size={size} {...rest} ref={ref} />\n ))\n"],"names":["StyledComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme","ComboboxInput","React","size","rest","ref"],"mappings":"6XAOO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,UAAW,OACX,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,qBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,EAAGC,IAC1CH,EAAA,cAACN,EAAA,CAAoB,KAAMO,EAAO,GAAGC,EAAM,IAAKC,EAAK,CACtD"}

package/dist/components/combobox/ComboboxPopover.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{bg:"white",border:"solid 1px $grey200",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{e as ComboboxPopover};
+import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{bg:"white",border:"solid 1px $grey200",borderRadius:"$1",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{e as ComboboxPopover};
 //# sourceMappingURL=ComboboxPopover.js.map

package/dist/components/combobox/ComboboxPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n bg: 'white',\n border: 'solid 1px $grey200',\n borderRadius: '$0',\n boxShadow: '$1',\n boxSizing: 'border-box',\n fontFamily: '$body',\n fontSize: '$md',\n outline: 'none',\n p: '$1',\n transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}
1	+ {"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n bg: 'white',\n border: 'solid 1px $grey200',\n borderRadius: '$1',\n boxShadow: '$1',\n boxSizing: 'border-box',\n fontFamily: '$body',\n fontSize: '$md',\n outline: 'none',\n p: '$1',\n transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}

package/dist/components/create-password-field/CreatePasswordField.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ type CreatePasswordFieldProps = Override<React.ComponentProps<typeof PasswordInp
     messageDirection?: CSS['flexDirection'];
 }>;
 export declare const CreatePasswordField: {
-    ({ validate, defaultValidation, messageDirection, label, name, css, validation, ...remainingProps }: CreatePasswordFieldProps): React.JSX.Element;
+    ({ validate, defaultValidation, messageDirection, label, name, css, validation, appearance, ...remainingProps }: CreatePasswordFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/create-password-field/CreatePasswordField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import j from"invariant";import*as a from"react";import{useFormContext as E}from"react-hook-form";import{throttle as k}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as S}from"../flex/Flex.js";import{InlineMessage as B}from"../inline-message/InlineMessage.js";import{PasswordField as D}from"../password-field/PasswordField.js";const c=({validate:d,defaultValidation:u,messageDirection:p="row",label:f="Create a password",name:r="password",css:v,validation:b,...w})=>{var s;const{formState:l}=E(),[i,n]=a.useState(!1),[C,m]=a.useState(u),F=l.touched[r],g=((s=l.errors[r])==null?void 0:s.type)==="validate",o=a.useCallback(async e=>{const t=await d(e);return t?(j(typeof t=="object","The validate function must return an object"),m(t),Object.values(t).every(h=>h)):!1},[m]),x=a.useCallback(k(500,o),[o]),y=(e,t)=>e?"success":t?"neutral":"error";return a.createElement(P,{css:v},a.createElement(D,{label:f,name:r,onChange:e=>x(e.target.value),onBlur:()=>n(!1),onFocus:()=>n(!0),validation:{...b,validate:o},...w}),(F||i||g)&&a.createElement(S,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:p}},Object.entries(C).map(([e,t])=>a.createElement(B,{key:e,theme:y(t,i)},e))))};c.displayName="CreatePasswordField";export{c as CreatePasswordField};
+import E from"invariant";import*as a from"react";import{useFormContext as k}from"react-hook-form";import{throttle as B}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as D}from"../flex/Flex.js";import{InlineMessage as $}from"../inline-message/InlineMessage.js";import{PasswordField as I}from"../password-field/PasswordField.js";const p=({validate:u,defaultValidation:f,messageDirection:v="row",label:b="Create a password",name:r="password",css:w,validation:y,appearance:C,...x})=>{var i;const{formState:o,control:n}=k(),[s,m]=a.useState(!1),[c,d]=a.useState(f),F=o.touched[r],h=((i=o.errors[r])==null?void 0:i.type)==="validate"||Object.values(c).every(e=>!e),l=a.useCallback(async e=>{const t=await u(e);return t?(E(typeof t=="object","The validate function must return an object"),d(t),Object.values(t).every(S=>S)):!1},[d]),g=a.useCallback(B(500,l),[l]),j=(e,t)=>e?"success":t?"neutral":"error",O=n.mode.isOnBlur&&(s||F)||n.mode.isOnSubmit&&(s||o.isSubmitted&&h);return a.createElement(P,{css:w},a.createElement(I,{label:b,name:r,onChange:e=>g(e.target.value),onBlur:()=>m(!1),onFocus:()=>m(!0),validation:{...y,validate:l},appearance:C,...x}),O&&a.createElement(D,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:v}},Object.entries(c).map(([e,t])=>a.createElement($,{key:e,theme:j(t,s)},e))))};p.displayName="CreatePasswordField";export{p as CreatePasswordField};
 //# sourceMappingURL=CreatePasswordField.js.map

package/dist/components/create-password-field/CreatePasswordField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n {\n label?: string\n name?: string\n validate: (\n password: string\n ) => Promise<ValidationResult \| undefined> \| ValidationResult\n defaultValidation: ValidationResult\n messageDirection?: CSS['flexDirection']\n }\n>\n\nexport const CreatePasswordField = ({\n validate,\n defaultValidation,\n messageDirection = 'row',\n label = 'Create a password',\n name = 'password',\n css,\n validation,\n ...remainingProps\n}: CreatePasswordFieldProps) => {\n const { formState } = useFormContext()\n const [isFocused, setIsFocused] = React.useState<boolean>(false)\n const [validationResult, setValidationResult] =\n React.useState<ValidationResult>(defaultValidation)\n\n const touched = formState.touched[name]\n const error = formState.errors[name]?.type === 'validate'\n\n const validatePassword = React.useCallback(\n async (password: string) => {\n const result = await validate(password)\n\n if (result) {\n invariant(\n typeof result === 'object',\n 'The validate function must return an object'\n )\n\n setValidationResult(result)\n return Object.values(result).every((isValid) => isValid)\n }\n\n return false\n },\n [setValidationResult]\n )\n\n const handleChange = React.useCallback(throttle(500, validatePassword), [\n validatePassword\n ])\n\n const getMessageTheme = (result: boolean, isFocused: boolean) => {\n if (result) return 'success'\n\n return isFocused ? 'neutral' : 'error'\n }\n\n return (\n <Box css={css}>\n <PasswordField\n label={label}\n name={name}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={() => setIsFocused(false)}\n onFocus={() => setIsFocused(true)}\n validation={{ ...validation, validate: validatePassword }}\n {...remainingProps}\n />\n {~~(touched~~ ~~\|\| isFocused \|\| error)~~ && (\n <Flex\n css={{\n mt: '$2',\n gap: '$2',\n flexWrap: 'wrap',\n flexDirection: messageDirection\n }}\n >\n {Object.entries(validationResult).map(([message, result]) => (\n <InlineMessage\n key={message}\n theme={getMessageTheme(result, isFocused)}\n >\n {message}\n </InlineMessage>\n ))}\n </Flex>\n )}\n </Box>\n )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"names":["CreatePasswordField","validate","defaultValidation","messageDirection","label","name","css","validation","remainingProps","_a","formState","useFormContext","isFocused","setIsFocused","React","validationResult","setValidationResult","touched","error","validatePassword","password","result","invariant","~~isValid","~~handleChange","throttle","getMessageTheme","Box","PasswordField","Flex","message","InlineMessage"],"mappings":"gWA8Ba,MAAAA,EAAsB,CAAC,CAClC,SAAAC,EACA,kBAAAC,EACA,iBAAAC,EAAmB,MACnB,MAAAC,EAAQ,oBACR,KAAAC,EAAO,WACP,IAAAC,EACA,WAAAC,KACGC,CACL,IAAgC,~~CAvChC~~,IAAAC,~~EAwCE~~,KAAM,CAAE,UAAAC,~~CAAU~~,EAAIC,~~EAAAA~~,~~EAChB~~,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzD,CAACC,EAAkBC,CAAmB,EAC1CF,EAAM,~~SAA2BZ~~,CAAiB,~~EAE9Ce~~,~~EAAUP~~,EAAU,~~QAAQL~~,~~GAC5Ba~~,~~IAAQT~~,EAAAC,EAAU,~~OAAOL~~,KAAjB,KAAA,~~OAAAI~~,EAAwB,QAAS,~~WAEzCU~~,~~EAAmBL~~,EAAM,YAC7B,~~MAAOM~~,GAAqB,CAC1B,MAAMC,EAAS,~~MAAMpB~~,~~EAASmB~~,CAAQ,EAEtC,OAAIC,GACFC,EACE,OAAOD,GAAW,SAClB,6CACF,~~EAEAL~~,~~EAAoBK~~,CAAM,EACnB,OAAO,OAAOA,CAAM,EAAE,~~MAAOE~~,GAAYA,CAAO,GAGlD,EACT,EACA,~~CAACP~~,CAAmB,CACtB,EAEMQ,EAAeV,EAAM,YAAYW,EAAS,~~IAAKN~~,CAAgB,EAAG,CACtEA,CACF,CAAC,~~EAEKO~~,EAAkB,~~CAACL~~,~~EAAiBT~~,~~IACpCS~~,EAAe,~~UAEZT~~,EAAY,UAAY,~~QAGjC~~,~~OACEE~~,EAAA,~~cAACa~~,EAAA,CAAI,~~IAAKrB~~,~~CAAAA~~,~~EACRQ~~,EAAA,~~cAACc~~,EAAA,CACC,~~MAAOxB~~,EACP,KAAMC,EACN,SAAW,~~GAAMmB~~,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,IAAMX,EAAa,EAAK,EAChC,QAAS,IAAMA,EAAa,EAAI,EAChC,WAAY,CAAE,~~GAAGN~~,EAAY,~~SAAUY~~,CAAiB,~~EACvD~~,~~GAAGX~~,CAAAA,CACN,~~GACES~~,~~GAAWL~~,~~GAAaM,IACxBJ,~~EAAA,~~cAACe~~,EAAA,CACC,IAAK,CACH,GAAI,KACJ,IAAK,KACL,SAAU,OACV,~~cAAe1B~~,CACjB,CAAA,EAEC,OAAO,~~QAAQY~~,CAAgB,EAAE,IAAI,CAAC,~~CAACe~~,EAAST,CAAM,~~IACrDP~~,EAAA,~~cAACiB~~,EAAA,CACC,IAAKD,EACL,~~MAAOJ~~,~~EAAgBL~~,~~EAAQT~~,CAAS,~~CAEvCkB~~,~~EAAAA~~,CACH,CACD,CACH,CAEJ,CAEJ,~~EAEA9B~~,EAAoB,YAAc"}
1	+ {"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n {\n label?: string\n name?: string\n validate: (\n password: string\n ) => Promise<ValidationResult \| undefined> \| ValidationResult\n defaultValidation: ValidationResult\n messageDirection?: CSS['flexDirection']\n }\n>\n\nexport const CreatePasswordField = ({\n validate,\n defaultValidation,\n messageDirection = 'row',\n label = 'Create a password',\n name = 'password',\n css,\n validation,\n appearance,\n ...remainingProps\n}: CreatePasswordFieldProps) => {\n const { formState, control } = useFormContext()\n const [isFocused, setIsFocused] = React.useState<boolean>(false)\n const [validationResult, setValidationResult] =\n React.useState<ValidationResult>(defaultValidation)\n\n const touched: boolean = formState.touched[name]\n const error =\n formState.errors[name]?.type === 'validate' \|\|\n Object.values(validationResult).every((isValid) => !isValid)\n\n const validatePassword = React.useCallback(\n async (password: string) => {\n const result = await validate(password)\n\n if (result) {\n invariant(\n typeof result === 'object',\n 'The validate function must return an object'\n )\n\n setValidationResult(result)\n return Object.values(result).every((isValid) => isValid)\n }\n\n return false\n },\n [setValidationResult]\n )\n\n const handleChange = React.useCallback(throttle(500, validatePassword), [\n validatePassword\n ])\n\n const getMessageTheme = (result: boolean, isFocused: boolean) => {\n if (result) return 'success'\n\n return isFocused ? 'neutral' : 'error'\n }\n\n const showValidation: boolean =\n (control.mode.isOnBlur && (isFocused \|\| touched)) \|\|\n (control.mode.isOnSubmit && (isFocused \|\| (formState.isSubmitted && error)))\n\n return (\n <Box css={css}>\n <PasswordField\n label={label}\n name={name}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={() => setIsFocused(false)}\n onFocus={() => setIsFocused(true)}\n validation={{ ...validation, validate: validatePassword }}\n appearance={appearance}\n {...remainingProps}\n />\n {showValidation && (\n <Flex\n css={{\n mt: '$2',\n gap: '$2',\n flexWrap: 'wrap',\n flexDirection: messageDirection\n }}\n >\n {Object.entries(validationResult).map(([message, result]) => (\n <InlineMessage\n key={message}\n theme={getMessageTheme(result, isFocused)}\n >\n {message}\n </InlineMessage>\n ))}\n </Flex>\n )}\n </Box>\n )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"names":["CreatePasswordField","validate","defaultValidation","messageDirection","label","name","css","validation","appearance","remainingProps","_a","formState","control","useFormContext","isFocused","setIsFocused","React","validationResult","setValidationResult","touched","error","isValid","validatePassword","password","result","invariant","handleChange","throttle","getMessageTheme","showValidation","Box","PasswordField","Flex","message","InlineMessage"],"mappings":"gWA8Ba,MAAAA,EAAsB,CAAC,CAClC,SAAAC,EACA,kBAAAC,EACA,iBAAAC,EAAmB,MACnB,MAAAC,EAAQ,oBACR,KAAAC,EAAO,WACP,IAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAAgC,CAxChC,IAAAC,EAyCE,KAAM,CAAE,UAAAC,EAAW,QAAAC,CAAQ,EAAIC,EAAe,EACxC,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzD,CAACC,EAAkBC,CAAmB,EAC1CF,EAAM,SAA2Bd,CAAiB,EAE9CiB,EAAmBR,EAAU,QAAQN,GACrCe,IACJV,EAAAC,EAAU,OAAON,KAAjB,KAAA,OAAAK,EAAwB,QAAS,YACjC,OAAO,OAAOO,CAAgB,EAAE,MAAOI,GAAY,CAACA,CAAO,EAEvDC,EAAmBN,EAAM,YAC7B,MAAOO,GAAqB,CAC1B,MAAMC,EAAS,MAAMvB,EAASsB,CAAQ,EAEtC,OAAIC,GACFC,EACE,OAAOD,GAAW,SAClB,6CACF,EAEAN,EAAoBM,CAAM,EACnB,OAAO,OAAOA,CAAM,EAAE,MAAOH,GAAYA,CAAO,GAGlD,EACT,EACA,CAACH,CAAmB,CACtB,EAEMQ,EAAeV,EAAM,YAAYW,EAAS,IAAKL,CAAgB,EAAG,CACtEA,CACF,CAAC,EAEKM,EAAkB,CAACJ,EAAiBV,IACpCU,EAAe,UAEZV,EAAY,UAAY,QAG3Be,EACHjB,EAAQ,KAAK,WAAaE,GAAaK,IACvCP,EAAQ,KAAK,aAAeE,GAAcH,EAAU,aAAeS,GAEtE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAKxB,CACRU,EAAAA,EAAA,cAACe,EAAA,CACC,MAAO3B,EACP,KAAMC,EACN,SAAW,GAAMqB,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,IAAMX,EAAa,EAAK,EAChC,QAAS,IAAMA,EAAa,EAAI,EAChC,WAAY,CAAE,GAAGR,EAAY,SAAUe,CAAiB,EACxD,WAAYd,EACX,GAAGC,CAAAA,CACN,EACCoB,GACCb,EAAA,cAACgB,EAAA,CACC,IAAK,CACH,GAAI,KACJ,IAAK,KACL,SAAU,OACV,cAAe7B,CACjB,CAAA,EAEC,OAAO,QAAQc,CAAgB,EAAE,IAAI,CAAC,CAACgB,EAAST,CAAM,IACrDR,EAAA,cAACkB,EAAA,CACC,IAAKD,EACL,MAAOL,EAAgBJ,EAAQV,CAAS,CAAA,EAEvCmB,CACH,CACD,CACH,CAEJ,CAEJ,EAEAjC,EAAoB,YAAc"}

package/dist/components/data-table/DataTable.d.ts CHANGED Viewed

@@ -1941,7 +1941,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         size: import("react").ComponentProps<typeof import("..").Text>["size"];
         type?: "text" | "number" | "email" | "password" | "tel" | "url" | "search";
         as?: never;
-    }, "size" | "state"> & {
+    }, "appearance" | "size" | "state"> & {
         size?: "sm" | "md" | "lg" | "xl" | ({
             "@sm"?: "sm" | "md" | "lg" | "xl" | undefined;
             "@md"?: "sm" | "md" | "lg" | "xl" | undefined;
@@ -1966,6 +1966,18 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         } & {
             [x: string]: "error" | undefined;
         }) | undefined;
+        appearance?: "standard" | "modern" | ({
+            "@sm"?: "standard" | "modern" | undefined;
+            "@md"?: "standard" | "modern" | undefined;
+            "@lg"?: "standard" | "modern" | undefined;
+            "@xl"?: "standard" | "modern" | undefined;
+            "@reducedMotion"?: "standard" | "modern" | undefined;
+            "@allowMotion"?: "standard" | "modern" | undefined;
+            "@hover"?: "standard" | "modern" | undefined;
+            "@initial"?: "standard" | "modern" | undefined;
+        } & {
+            [x: string]: "standard" | "modern" | undefined;
+        }) | undefined;
     } & {
         size?: "sm" | "md" | "lg";
         css?: import("../..").CSS;

package/dist/components/data-table/DataTableTable.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as A}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as B}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const _=({sortable:k,striped:E,theme:S="white",css:h,scrollOptions:t={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1},rowAction:v,...C})=>{const{asyncDataState:O,getTotalRows:w,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:H,setTablePosition:i}=B(),r=e.useRef(null),R=e.useRef(!1),l=e.useRef(!1),n=e.useMemo(()=>typeof document>"u"?null:document.body,[]);e.useEffect(()=>{if(!n||typeof IntersectionObserver>"u")return;const o=()=>{if(r.current){const s=r.current.getBoundingClientRect().top,c=r.current.getBoundingClientRect().bottom;i(u=>({...u,top:s,bottom:c}))}l.current=!1},a=()=>{l.current||(requestAnimationFrame(o),l.current=!0)};if(!r.current)return;const p=(t==null?void 0:t.stickyHeaderOffset)||0,T={rootMargin:`-${p}px 0px -${p}px 0px`,threshold:0},x=s=>{if(!s||s.length===0)return;const c=s[0];R.current=c.isIntersecting,c.isIntersecting?n==null||n.addEventListener("scroll",a):n==null||n.removeEventListener("scroll",a),i(u=>({...u,isVisible:c.isIntersecting}))},b=new IntersectionObserver(x,T);return r.current&&(t.hasStickyHeader||Object.keys(f||{}).length>0)&&b.observe(r.current),()=>{b.disconnect(),n==null||n.removeEventListener("scroll",a)}},[f,t.hasStickyHeader,t==null?void 0:t.stickyHeaderOffset,n,i]);const y=O===L.PENDING,D=!y&&w()===0,I=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${H}_${o}_control_columns`};return D?null:e.createElement(e.Fragment,null,e.createElement(P,null),e.createElement("div",{style:{display:"contents"}},e.createElement(A,{...C,ref:r,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:{...t.scrollContainerCss},scrollContainerkey:I(),css:{...h,...y&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(g.Head,{theme:S,sortable:k,isSticky:t.hasStickyHeader,stickyOffset:t.stickyHeaderOffset,css:t.headerCss}),e.createElement(g.Body,{striped:E,rowAction:v}))))};export{_ as DataTableTable};
+import*as e from"react";import{Table as A}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as B}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const _=({sortable:k,striped:E,theme:S="white",css:h,scrollOptions:t={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1},rowAction:v,...C})=>{const{asyncDataState:O,getTotalRows:w,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:H,setTablePosition:i}=B(),r=e.useRef(null),R=e.useRef(!1),l=e.useRef(!1),n=e.useMemo(()=>typeof document>"u"?null:document.body,[]);e.useEffect(()=>{if(!n||typeof IntersectionObserver>"u")return;const o=()=>{if(r.current){const s=r.current.getBoundingClientRect().top,c=r.current.getBoundingClientRect().bottom;i(u=>({...u,top:s,bottom:c}))}l.current=!1},a=()=>{l.current||(requestAnimationFrame(o),l.current=!0)};if(!r.current)return;const p=(t==null?void 0:t.stickyHeaderOffset)||0,T={rootMargin:`-${p}px 0px -${p}px 0px`,threshold:0},x=s=>{if(!s||s.length===0)return;const c=s[0];R.current=c.isIntersecting,n&&(c.isIntersecting?n==null||n.addEventListener("scroll",a):n==null||n.removeEventListener("scroll",a)),i(u=>({...u,isVisible:c.isIntersecting}))},b=new IntersectionObserver(x,T);return r.current&&(t.hasStickyHeader||Object.keys(f||{}).length>0)&&b.observe(r.current),()=>{b.disconnect(),n&&(n==null||n.removeEventListener("scroll",a))}},[f,t.hasStickyHeader,t==null?void 0:t.stickyHeaderOffset,n,i]);const y=O===L.PENDING,D=!y&&w()===0,I=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${H}_${o}_control_columns`};return D?null:e.createElement(e.Fragment,null,e.createElement(P,null),e.createElement("div",{style:{display:"contents"}},e.createElement(A,{...C,ref:r,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:{...t.scrollContainerCss},scrollContainerkey:I(),css:{...h,...y&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(g.Head,{theme:S,sortable:k,isSticky:t.hasStickyHeader,stickyOffset:t.stickyHeaderOffset,css:t.headerCss}),e.createElement(g.Body,{striped:E,rowAction:v}))))};export{_ as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

package/dist/components/data-table/DataTableTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' \| 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' \| 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false\n },\n rowAction,\n ...props\n}: DataTableTableProps): JSX.Element \| null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof document === 'undefined') return null\n return document.body\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget \|\| typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset \|\| 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries \|\| entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (entry.isIntersecting) {\n //add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n //remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader \|\|\n Object.keys(rowSelection \|\| {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() \|\| !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n <div style={{ display: 'contents' }}>\n <Table\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={{\n ...scrollOptions.scrollContainerCss\n }}\n scrollContainerkey={buildScrollContainerKey()}\n css={{\n ...css,\n ...(isPending && {\n opacity: 0.5,\n pointerEvents: 'none',\n transition: 'opacity 250ms linear 150ms'\n })\n }}\n >\n <DataTable.Head\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n css={scrollOptions.headerCss}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n </div>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","DataTableLoading","Table","DataTable"],"mappings":"uRA8BaA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,QACR,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,EACnB,EACA,UAAAC,KACGC,CACL,IAA+C,CAC7C,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,QAAAC,EACA,iBAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAWC,EAAM,OAAgC,IAAI,EACrDC,EAAiBD,EAAM,OAAO,EAAK,EACnCE,EAAcF,EAAM,OAAgB,EAAK,EAEzCG,EAAeH,EAAM,QAAQ,IAC7B,OAAO,SAAa,IAAoB,KACrC,SAAS,KACf,EAAE,EAELA,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,GAAgB,OAAO,qBAAyB,IACnD,OAGF,MAAMC,EAAiB,IAAM,CAC3B,GAAIL,EAAS,QAAS,CACpB,MAAMM,EAAWN,EAAS,QAAQ,wBAAwB,IACpDO,EAAcP,EAAS,QAAQ,~~sBAAA~~,~~EAAwB~~,OAE7DF,EAAkBU,IAAkB,CAClC,GAAGA,EACH,IAAKF,EACL,OAAQC,CACV,EAAE,CACJ,CACAJ,EAAY,QAAU,EACxB,EAEMM,EAAe,IAAM,CACpBN,EAAY,UACf,sBAAsBE,CAAc,EACpCF,EAAY,QAAU,GAE1B,EAEA,GAAI,CAACH,EAAS,QAAS,OAEvB,MAAMU,GAAiBrB,GAAA,~~KAAAA~~,~~OAAAA,~~EAAe,qBAAsB,EAEtDsB,EAAkB,CACtB,WAAY,IAAID,YAAyBA,UACzC,UAAW,CACb,EAEME,EAA2BC,GAAyC,CACxE,GAAI,CAACA,GAAWA,EAAQ,SAAW,EAAG,OACtC,MAAMC,EAAQD,EAAQ,GAEtBX,EAAe,QAAUY,EAAM,~~eAE3BA~~,EAAM,eAERV,GAAA,MAAAA,EAAc,iBAAiB,SAAUK,CAGzCL,EAAAA,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,~~CAG9CX~~,~~EAAAA~~,EAAkBU,IAAkB,CAClC,GAAGA,EACH,UAAWM,EAAM,cACnB,EAAE,CACJ,EAEMC,EAAgB,IAAI,qBACxBH,EACAD,CACF,EAGA,OACEX,EAAS,UACRX,EAAc,iBACb,OAAO,KAAKM,GAAgB,CAAE,CAAA,EAAE,OAAS,IAE3CoB,EAAc,QAAQf,EAAS,OAAO,EAGjC,IAAM,CACXe,EAAc,~~aACdX~~,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,~~CAC9C~~,~~CAAA~~,CACF,EAAG,CACDd,EACAN,EAAc,gBACdA,GAAA,~~YAAAA~~,EAAe,mBACfe,EACAN,CACF,CAAC,EAED,MAAMkB,EAAYxB,IAAmByB,EAAe,QAC9CC,EAAU,CAACF,GAAavB,~~MAAmB~~,EAE3C0B,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAI1B,~~KAA0B~~,CAAC,CAACE,EAC9BwB,EAAqB,GACZ1B,~~EAA0B~~,~~GAAA~~,CAAC,CAACE,KACrCwB,EAAqB,GAGhB,GAAGvB,KAAWuB,mBACvB,EAEA,OAAIF,EAAgB,KAGlBjB,EAAA,cAAAA,EAAA,~~SAAA~~,~~KACEA,~~EAAA,cAACoB,EAAA,IAAiB,EAClBpB,EAAA,cAAC,MAAI,CAAA,MAAO,CAAE,QAAS,UAAW,GAChCA,EAAA,cAACqB,EAAA,CACE,GAAG/B,EACJ,IAAKS,EACL,sBAAuBX,EAAc,sBACrC,mBAAoB,CAClB,GAAGA,EAAc,kBACnB,EACA,mBAAoB8B,~~EACpB~~,~~EAAA,~~IAAK,CACH,GAAG/B,EACH,GAAI4B,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAf,EAAAA,EAAA,cAACsB,EAAU,KAAV,CACC,MAAOpC,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,aAAcA,EAAc,mBAC5B,IAAKA,EAAc,UACrB,EACAY,EAAA,cAACsB,EAAU,KAAV,CAAe,QAASrC,EAAS,UAAWI,CAAW,CAAA,CAC1D,CACF,CACF,CAEJ"}
1	+ {"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' \| 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' \| 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false\n },\n rowAction,\n ...props\n}: DataTableTableProps): JSX.Element \| null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement \| null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof document === 'undefined') return null\n return document.body\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget \|\| typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset \|\| 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries \|\| entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (scrollTarget) {\n if (entry.isIntersecting) {\n // add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n // remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader \|\|\n Object.keys(rowSelection \|\| {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() \|\| !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n <div style={{ display: 'contents' }}>\n <Table\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={{\n ...scrollOptions.scrollContainerCss\n }}\n scrollContainerkey={buildScrollContainerKey()}\n css={{\n ...css,\n ...(isPending && {\n opacity: 0.5,\n pointerEvents: 'none',\n transition: 'opacity 250ms linear 150ms'\n })\n }}\n >\n <DataTable.Head\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n css={scrollOptions.headerCss}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n </div>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","DataTableLoading","Table","DataTable"],"mappings":"uRA8BaA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,QACR,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,EACnB,EACA,UAAAC,KACGC,CACL,IAA+C,CAC7C,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,QAAAC,EACA,iBAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAWC,EAAM,OAAgC,IAAI,EACrDC,EAAiBD,EAAM,OAAO,EAAK,EACnCE,EAAcF,EAAM,OAAgB,EAAK,EAEzCG,EAAeH,EAAM,QAAQ,IAC7B,OAAO,SAAa,IAAoB,KACrC,SAAS,KACf,EAAE,EAELA,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,GAAgB,OAAO,qBAAyB,IACnD,OAGF,MAAMC,EAAiB,IAAM,CAC3B,GAAIL,EAAS,QAAS,CACpB,MAAMM,EAAWN,EAAS,QAAQ,wBAAwB,IACpDO,EAAcP,EAAS,QAAQ,sBAAsB,EAAE,OAE7DF,EAAkBU,IAAkB,CAClC,GAAGA,EACH,IAAKF,EACL,OAAQC,CACV,EAAE,CACJ,CACAJ,EAAY,QAAU,EACxB,EAEMM,EAAe,IAAM,CACpBN,EAAY,UACf,sBAAsBE,CAAc,EACpCF,EAAY,QAAU,GAE1B,EAEA,GAAI,CAACH,EAAS,QAAS,OAEvB,MAAMU,GAAiBrB,GAAA,YAAAA,EAAe,qBAAsB,EAEtDsB,EAAkB,CACtB,WAAY,IAAID,YAAyBA,UACzC,UAAW,CACb,EAEME,EAA2BC,GAAyC,CACxE,GAAI,CAACA,GAAWA,EAAQ,SAAW,EAAG,OACtC,MAAMC,EAAQD,EAAQ,GAEtBX,EAAe,QAAUY,EAAM,eAE3BV,IACEU,EAAM,eAERV,GAAA,MAAAA,EAAc,iBAAiB,SAAUK,CAGzCL,EAAAA,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,CAIhDX,GAAAA,EAAkBU,IAAkB,CAClC,GAAGA,EACH,UAAWM,EAAM,cACnB,EAAE,CACJ,EAEMC,EAAgB,IAAI,qBACxBH,EACAD,CACF,EAGA,OACEX,EAAS,UACRX,EAAc,iBACb,OAAO,KAAKM,GAAgB,CAAE,CAAA,EAAE,OAAS,IAE3CoB,EAAc,QAAQf,EAAS,OAAO,EAGjC,IAAM,CACXe,EAAc,aACVX,IACFA,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,CAAAA,EAEhD,CACF,EAAG,CACDd,EACAN,EAAc,gBACdA,GAAA,KAAAA,OAAAA,EAAe,mBACfe,EACAN,CACF,CAAC,EAED,MAAMkB,EAAYxB,IAAmByB,EAAe,QAC9CC,EAAU,CAACF,GAAavB,EAAmB,IAAA,EAE3C0B,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAI1B,EAAqB,GAAK,CAAC,CAACE,EAC9BwB,EAAqB,GACZ1B,EAAqB,GAAK,CAAC,CAACE,KACrCwB,EAAqB,GAGhB,GAAGvB,KAAWuB,mBACvB,EAEA,OAAIF,EAAgB,KAGlBjB,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACoB,EAAA,IAAiB,EAClBpB,EAAA,cAAC,MAAI,CAAA,MAAO,CAAE,QAAS,UAAW,GAChCA,EAAA,cAACqB,EAAA,CACE,GAAG/B,EACJ,IAAKS,EACL,sBAAuBX,EAAc,sBACrC,mBAAoB,CAClB,GAAGA,EAAc,kBACnB,EACA,mBAAoB8B,IACpB,IAAK,CACH,GAAG/B,EACH,GAAI4B,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAf,EAAAA,EAAA,cAACsB,EAAU,KAAV,CACC,MAAOpC,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,aAAcA,EAAc,mBAC5B,IAAKA,EAAc,UACrB,EACAY,EAAA,cAACsB,EAAU,KAAV,CAAe,QAASrC,EAAS,UAAWI,CAAW,CAAA,CAC1D,CACF,CACF,CAEJ"}

package/dist/components/date-field/DateField.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { DateInputProps } from '../../components/date-input';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
 export declare const DateField: {
-    ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: DateFieldProps): React.JSX.Element;
+    ({ css, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/date-field/DateField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as i from"react";import{useFormContext as u}from"react-hook-form";import{DateInput as F}from"../date-input/DateInput.js";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as g}from"../form/useFieldError.js";const a=({css:m,hideLabel:l,label:p,name:e,validation:r,prompt:d,description:n,...s})=>{const{register:t,trigger:c}=u(),{error:o}=g(e),f=r?t(r):t;return i.createElement(b,{css:m,description:n,error:o,fieldId:e,hideLabel:l,label:p,prompt:d,required:Boolean(r==null?void 0:r.required)},i.createElement(F,{id:e,name:e,ref:f,...o&&{state:"error"},...s,revalidate:c}))};a.displayName="DateField";export{a as DateField};
+import*as i from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";const p=({css:m,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:t,...c})=>{const{register:o,trigger:f}=F(),{error:a}=v(e),u=r?o(r):o;return i.createElement(g,{css:m,description:s,error:a,fieldId:e,hideLabel:l,label:d,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:t},i.createElement(b,{id:e,name:e,ref:u,appearance:t,...a&&{state:"error"},...c,revalidate:f}))};p.displayName="DateField";export{p as DateField};
 //# sourceMappingURL=DateField.js.map

package/dist/components/date-field/DateField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = 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 <DateInput\n id={name}\n name={name}\n ref={ref}\n {...(error && { state: 'error' })}\n {...remainingProps}\n revalidate={trigger}\n />\n </FieldWrapper>\n )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"~~gUAYO~~,~~MAAMA~~,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,~~EACxB~~,~~EAAA~~,CAAE,MAAAC,CAAM,EAAIC,~~EAAcT~~,CAAI,~~EAC9BU~~,~~EAAMT~~,~~EAAaI~~,~~EAASJ~~,CAAU,~~EAAII~~,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,~~IAAKf~~,EACL,YAAaM,EACb,~~MAAOK~~,EACP,~~QAASR~~,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,~~CAAA~~,~~EAEtCU~~,EAAA,cAACE,EAAA,CACC,~~GAAIb~~,EACJ,KAAMA,EACN,~~IAAKU~~,~~EACJ~~,~~GAAIF~~,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,~~EAEAV~~,EAAU,YAAc"}
1	+ {"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = 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 appearance={appearance}\n >\n <DateInput\n id={name}\n name={name}\n ref={ref}\n appearance={appearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n revalidate={trigger}\n />\n </FieldWrapper>\n )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"wWAYa,MAAAA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAe,EACvC,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKhB,EACL,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ValidationOptions } from '../../components/form';
 import type { CSS } from '../../stitches';
+import { type LabelProps } from '../label/Label';
 export type FieldWrapperProps = {
     css?: CSS;
     error?: string;
@@ -14,12 +15,13 @@ export type FieldWrapperProps = {
     description?: string;
     required?: boolean;
     hideLabel?: boolean;
+    appearance?: LabelProps['appearance'];
 };
 export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
     name: string;
     validation?: ValidationOptions;
 };
 export declare const FieldWrapper: {
-    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
+    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel, appearance }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
     displayName: string;
 };

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

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

package/dist/components/field-wrapper/FieldWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n css?: CSS\n error?: string\n fieldId: string\n label: string\n prompt?: { link?: string; label: string; onClick?: () => void }\n description?: string\n required?: boolean\n hideLabel?: boolean\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n name: string\n validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n css,\n children,\n error,\n fieldId,\n label,\n prompt,\n description,\n required,\n hideLabel\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n return (\n <Box css={css}>\n <LabelContainer\n css={{\n justifyContent: 'space-between',\n alignItems: 'center',\n mb: '$3'\n }}\n >\n <Label htmlFor={fieldId} required={required}>\n {label}\n </Label>\n {prompt && (\n <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n {prompt.label}\n </Link>\n )}\n </LabelContainer>\n {description && (\n <Description css={{ mb: '$3' }}>{description}</Description>\n )}\n {children}\n {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n </Box>\n )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"~~6VA6BO~~,~~MAAMA~~,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAkD,CAChD,MAAMC,~~EAAiBD~~,~~EAAYE~~,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,~~IAAKb~~,CAAAA,~~EACRY~~,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,~~CAAA~~,~~EAEAG~~,EAAA,cAACE,EAAA,CAAM,~~QAASX~~,EAAS,SAAUI,~~CAChCH~~,~~EAAAA~~,CACH,EACCC,~~GACCO~~,EAAA,cAACG,EAAA,CAAK,~~KAAMV~~,GAAA,~~KAAA~~,OAAAA,EAAQ,KAAM,QAASA,GAAA,~~YAAAA~~,EAAQ,QAAS,KAAK,~~IAAA~~,~~EACtDA~~,EAAO,KACV,CAEJ,EACCC,~~GACCM~~,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,~~GAAIV~~,CAAY,EAE9CL,EACAC,~~GAASU~~,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,~~CAAA~~,~~EAAIf,~~CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}
1	+ {"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\nimport type { CSS } from '~/stitches'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n css?: CSS\n error?: string\n fieldId: string\n label: string\n prompt?: { link?: string; label: string; onClick?: () => void }\n description?: string\n required?: boolean\n hideLabel?: boolean\n appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n name: string\n validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n css,\n children,\n error,\n fieldId,\n label,\n prompt,\n description,\n required,\n hideLabel,\n appearance\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n return (\n <Box css={css}>\n <LabelContainer\n css={{\n justifyContent: 'space-between',\n alignItems: 'center',\n mb: '$3'\n }}\n >\n <Label htmlFor={fieldId} required={required} appearance={appearance}>\n {label}\n </Label>\n {prompt && (\n <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n {prompt.label}\n </Link>\n )}\n </LabelContainer>\n {description && (\n <Description css={{ mb: '$3' }}>{description}</Description>\n )}\n {children}\n {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n </Box>\n )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"6VA+Ba,MAAAA,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,CACF,IAAkD,CAChD,MAAMC,EAAiBF,EAAYG,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,IAAKd,CAAAA,EACRa,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,CAEAG,EAAAA,EAAA,cAACE,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CAAAA,EACtDL,CACH,EACCC,GACCQ,EAAA,cAACG,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAAA,OAAAA,EAAQ,QAAS,KAAK,IACtDA,EAAAA,EAAO,KACV,CAEJ,EACCC,GACCO,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,CAAIX,EAAAA,CAAY,EAE9CL,EACAC,GAASW,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,GAAIhB,CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}

package/dist/components/flex/Flex.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst createVariants = <T extends GlobalValue[]>(\n variants: T,\n fn: (string: T[number]) => CSS\n) => {\n return variants.reduce(\n (prev, variant) => ({ ...prev, [variant]: fn(variant) }),\n {} as Record<T[number], CSS>\n )\n}\n\nconst globalValues = [\n 'inherit',\n 'initial',\n 'revert',\n 'revert-layer',\n 'unset'\n] as const\n\n/\n The following type is partially a hack to get the rest of the createVariants array parameter to be recognised as const.\n * Thus giving is the correct types generated for these generated variant props.\n * No clue how we can do it cleaner.\n * Mad props to: Elliot for getting this to working as is.\n \n /\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype GlobalValue = typeof globalValues[number] \| (string & {})\n\nexport const Flex = styled('div', {\n display: 'flex',\n variants: {\n direction: createVariants(\n [...globalValues, 'row', 'row-reverse', 'column', 'column-reverse'],\n (v) => {\n return { flexDirection: v }\n }\n ),\n wrap: createVariants(\n [...globalValues, 'nowrap', 'wrap', 'wrap-reverse'],\n (v) => {\n return { flexWrap: v }\n }\n ),\n // Why is both `start` and `flex-start` valid values? Answer: https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/\n justify: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'start',\n 'center',\n 'end',\n 'flex-start',\n 'flex-end',\n 'left',\n 'right',\n 'space-between',\n 'space-around',\n 'space-evenly',\n 'stretch'\n ],\n (v) => {\n return { justifyContent: v }\n }\n ),\n align: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'center',\n 'start',\n 'end',\n 'self-start',\n 'self-end',\n 'flex-start',\n 'flex-end',\n 'baseline',\n 'first baseline',\n 'last baseline',\n 'stretch'\n ],\n (v) => {\n return { alignItems: v }\n }\n ),\n gap: createThemeVariants('space', { gap: '$key' })\n }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["createVariants","variants","fn","prev","variant","globalValues","Flex","styled","v","createThemeVariants"],"mappings":"sUAGA,MAAMA,EAAiB,CACrBC,EACAC,IAEOD,EAAS,OACd,CAACE,EAAMC,KAAa,CAAE,GAAGD,EAAM,CAACC,GAAUF,EAAGE,CAAO,CAAE,GACtD,CAAA,CACF,EAGIC,EAAe,CACnB,UACA,UACA,SACA,eACA,OACF,EAYaC,EAAOC,EAAO,MAAO,CAChC,QAAS,OACT,SAAU,CACR,UAAWP,EACT,CAAC,GAAGK,EAAc,MAAO,cAAe,SAAU,gBAAgB,EACjEG,IACQ,CAAE,cAAeA,CAAE,EAE9B,EACA,KAAMR,EACJ,CAAC,GAAGK,EAAc,SAAU,OAAQ,cAAc,EACjDG,IACQ,CAAE,SAAUA,CAAE,EAEzB,EAEA,QAASR,EACP,CACE,GAAGK,EACH,SACA,SACA,OACA,QACA,SACA,MACA,aACA,WACA,OACA,QACA,gBACA,eACA,eACA,SACF,EACCG,IACQ,CAAE,eAAgBA,CAAE,EAE/B,EACA,MAAOR,EACL,CACE,GAAGK,EACH,SACA,SACA,OACA,SACA,QACA,MACA,aACA,WACA,aACA,WACA,WACA,iBACA,gBACA,SACF,EACCG,IACQ,CAAE,WAAYA,CAAE,EAE3B,EACA,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAEDH,EAAK,YAAc"}
1	+ {"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst createVariants = <T extends GlobalValue[]>(\n variants: T,\n fn: (string: T[number]) => CSS\n) => {\n return variants.reduce(\n (prev, variant) => ({ ...prev, [variant]: fn(variant) }),\n {} as Record<T[number], CSS>\n )\n}\n\nconst globalValues = [\n 'inherit',\n 'initial',\n 'revert',\n 'revert-layer',\n 'unset'\n] as const\n\n/\n The following type is partially a hack to get the rest of the createVariants array parameter to be recognised as const.\n * Thus giving is the correct types generated for these generated variant props.\n * No clue how we can do it cleaner.\n * Mad props to: Elliot for getting this to working as is.\n \n /\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype GlobalValue = (typeof globalValues)[number] \| (string & {})\n\nexport const Flex = styled('div', {\n display: 'flex',\n variants: {\n direction: createVariants(\n [...globalValues, 'row', 'row-reverse', 'column', 'column-reverse'],\n (v) => {\n return { flexDirection: v }\n }\n ),\n wrap: createVariants(\n [...globalValues, 'nowrap', 'wrap', 'wrap-reverse'],\n (v) => {\n return { flexWrap: v }\n }\n ),\n // Why is both `start` and `flex-start` valid values? Answer: https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/\n justify: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'start',\n 'center',\n 'end',\n 'flex-start',\n 'flex-end',\n 'left',\n 'right',\n 'space-between',\n 'space-around',\n 'space-evenly',\n 'stretch'\n ],\n (v) => {\n return { justifyContent: v }\n }\n ),\n align: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'center',\n 'start',\n 'end',\n 'self-start',\n 'self-end',\n 'flex-start',\n 'flex-end',\n 'baseline',\n 'first baseline',\n 'last baseline',\n 'stretch'\n ],\n (v) => {\n return { alignItems: v }\n }\n ),\n gap: createThemeVariants('space', { gap: '$key' })\n }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["createVariants","variants","fn","prev","variant","globalValues","Flex","styled","v","createThemeVariants"],"mappings":"sUAGA,MAAMA,EAAiB,CACrBC,EACAC,IAEOD,EAAS,OACd,CAACE,EAAMC,KAAa,CAAE,GAAGD,EAAM,CAACC,GAAUF,EAAGE,CAAO,CAAE,GACtD,CAAA,CACF,EAGIC,EAAe,CACnB,UACA,UACA,SACA,eACA,OACF,EAYaC,EAAOC,EAAO,MAAO,CAChC,QAAS,OACT,SAAU,CACR,UAAWP,EACT,CAAC,GAAGK,EAAc,MAAO,cAAe,SAAU,gBAAgB,EACjEG,IACQ,CAAE,cAAeA,CAAE,EAE9B,EACA,KAAMR,EACJ,CAAC,GAAGK,EAAc,SAAU,OAAQ,cAAc,EACjDG,IACQ,CAAE,SAAUA,CAAE,EAEzB,EAEA,QAASR,EACP,CACE,GAAGK,EACH,SACA,SACA,OACA,QACA,SACA,MACA,aACA,WACA,OACA,QACA,gBACA,eACA,eACA,SACF,EACCG,IACQ,CAAE,eAAgBA,CAAE,EAE/B,EACA,MAAOR,EACL,CACE,GAAGK,EACH,SACA,SACA,OACA,SACA,QACA,MACA,aACA,WACA,aACA,WACA,WACA,iBACA,gBACA,SACF,EACCG,IACQ,CAAE,WAAYA,CAAE,EAE3B,EACA,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAEDH,EAAK,YAAc"}

package/dist/components/form/Form.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import type { DefaultValues, FieldValues, Mode, SubmitErrorHandler, SubmitHandler, UseFormMethods } from 'react-hook-form';
+import { type FormCustomContextType } from './useFormCustomContext';
 declare const StyledForm: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"form", {}, {
     sm: string;
     md: string;
@@ -378,7 +379,7 @@ interface FormProps<TFormData extends FieldValues> extends StyledFormProps {
     children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
 }
 export declare const Form: {
-    <TFormData extends FieldValues>(props: FormProps<TFormData>): React.JSX.Element;
+    <TFormData extends FieldValues>(props: FormProps<TFormData> & FormCustomContextType): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/form/Form.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import r from"react";import{useForm as u,FormProvider as f}from"react-hook-form";import{styled as s}from"../../stitches.js";const c=s("form",{}),t=m=>{const{children:o,defaultValues:a,validationMode:l="onBlur",onSubmit:n,onError:i,...d}=m,e=u({defaultValues:a,mode:l});return r.createElement(f,{...e},r.createElement(c,{"aria-label":"form",onSubmit:e.handleSubmit(n,i),...d},typeof o=="function"?o(e):o))};t.displayName="Form";export{t as Form};
+import*as r from"react";import{useForm as f,FormProvider as p}from"react-hook-form";import{styled as s}from"../../stitches.js";import{FormCustomContext as c}from"./useFormCustomContext.js";const F=s("form",{}),t=m=>{const{children:e,defaultValues:a,validationMode:n="onBlur",onSubmit:l,onError:i,appearance:u,...d}=m,o=f({defaultValues:a,mode:n});return r.createElement(p,{...o},r.createElement(c.Provider,{value:{appearance:u}},r.createElement(F,{"aria-label":"form",onSubmit:o.handleSubmit(l,i),...d},typeof e=="function"?e(o):e)))};t.displayName="Form";export{t as Form};
 //# sourceMappingURL=Form.js.map

package/dist/components/form/Form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport { styled } from '~/stitches'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n React.ComponentPropsWithoutRef<typeof StyledForm>,\n 'onSubmit' \| 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData>\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <StyledForm\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </StyledForm>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","rest","methods","useForm","React","FormProvider"],"mappings":"~~4HAaA~~,MAAMA,EAAaC,EAAO,OAAQ,CAAA,~~CAAE,~~EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,KACGC,CACL,~~EAAIN~~,~~EAEEO~~,EAAUC,EAAmB,CACjC,~~cAAAN~~,EACA,KAAMC,CACR,CAAC,EAED,~~OACEM~~,EAAA,cAACC,EAAA,CAAc,GAAGH,~~CAAAA~~,~~EAChBE~~,EAAA,~~cAACZ~~,EAAA,CACC,aAAW,OACX,~~SAAUU~~,EAAQ,~~aAAaH~~,EAAUC,CAAO,EAC/C,~~GAAGC~~,~~GAEH~~,~~OAAOL~~,GAAa,WAAaA,~~EAASM~~,CAAO,~~EAAIN~~,CACxD,CACF,CAEJ,EAEAF,EAAK,YAAc"}
1	+ {"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport { styled } from '~/stitches'\n\nimport {\n FormCustomContext,\n type FormCustomContextType\n} from './useFormCustomContext'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n React.ComponentPropsWithoutRef<typeof StyledForm>,\n 'onSubmit' \| 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance }}>\n <StyledForm\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </StyledForm>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"6LAkBA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,CAAA,EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,EACA,WAAAC,KACGC,CACL,EAAIP,EAEEQ,EAAUC,EAAmB,CACjC,cAAAP,EACA,KAAMC,CACR,CAAC,EAED,OACEO,EAAA,cAACC,EAAA,CAAc,GAAGH,GAChBE,EAAA,cAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,WAAAN,CAAW,CAAA,EAC9CI,EAAA,cAACb,EAAA,CACC,aAAW,OACX,SAAUW,EAAQ,aAAaJ,EAAUC,CAAO,EAC/C,GAAGE,CAEH,EAAA,OAAON,GAAa,WAAaA,EAASO,CAAO,EAAIP,CACxD,CACF,CACF,CAEJ,EAEAF,EAAK,YAAc"}

package/dist/components/form/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export { Form } from './Form';
 export type { ValidationOptions } from './validation';
 export { useFieldError } from './useFieldError';
+export { useFormCustomContext } from './useFormCustomContext';

package/dist/components/form/useFormCustomContext.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { InputField } from '../input-field';
+export type FormCustomContextType = {
+    appearance?: React.ComponentProps<typeof InputField>['appearance'];
+} | undefined;
+export declare const FormCustomContext: React.Context<FormCustomContextType>;
+export declare const useFormCustomContext: () => FormCustomContextType;

package/dist/components/form/useFormCustomContext.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import*as t from"react";const e=t.createContext({appearance:"standard"}),o=()=>t.useContext(e);export{e as FormCustomContext,o as useFormCustomContext};
2	+ //# sourceMappingURL=useFormCustomContext.js.map

package/dist/components/form/useFormCustomContext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useFormCustomContext.js","sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { InputField } from '../input-field'\n\nexport type FormCustomContextType =\n | {\n appearance?: React.ComponentProps<typeof InputField>['appearance']\n }\n | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"names":["FormCustomContext","React","useFormCustomContext"],"mappings":"wBAUa,MAAAA,EAAoBC,EAAM,cAAqC,CAC1E,WAAY,UACd,CAAC,EAEYC,EAAuB,IAAMD,EAAM,WAAWD,CAAiB"}

package/dist/components/heading/Heading.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type { Override } from '../../utilities';
 export declare const StyledHeading: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"h2", {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
     noCapsize?: boolean | "true" | undefined;
+    weight?: "bold" | "medium" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/heading/Heading.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as i}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t=m("h2",{fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontSize:"$md",lineHeight:1.5,...i(.3864)},sm:{fontFamily:"$body",fontSize:"$lg",lineHeight:1.14,...i(.2078)},md:{fontFamily:"$body",fontSize:"$xl",lineHeight:1.14,...i(.2078)},lg:{fontFamily:"$display",fontSize:"$2xl",lineHeight:1.08,letterSpacing:"0.01em",...i(.1405,.2405)},xl:{fontFamily:"$display",fontSize:"$3xl",lineHeight:1.12,...i(.16,.26)},xxl:{fontFamily:"$display",fontSize:"$4xl",lineHeight:1,...i(.1,.2)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}}}),o=e.forwardRef(({size:n="md",...l},a)=>e.createElement(t,{ref:a,size:n,...l}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
+import*as e from"react";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as i}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t=f("h2",{m:0,variants:{size:{xs:{fontFamily:"$body",fontSize:"$md",lineHeight:1.5,...i(.3864)},sm:{fontFamily:"$body",fontSize:"$lg",lineHeight:1.14,...i(.2078)},md:{fontFamily:"$display",fontSize:"$xl",lineHeight:1.14,letterSpacing:"0.01em",...i(.2114,.2634)},lg:{fontFamily:"$display",fontSize:"$2xl",lineHeight:1.08,letterSpacing:"0.01em",...i(.1405,.2405)},xl:{fontFamily:"$display",fontSize:"$3xl",lineHeight:1.12,...i(.16,.26)},xxl:{fontFamily:"$display",fontSize:"$4xl",lineHeight:1,...i(.1,.2)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}},weight:{medium:{fontWeight:500},bold:{fontWeight:700}}}}),o=e.forwardRef(({size:l="md",weight:n="bold",...m},a)=>e.createElement(t,{ref:a,size:l,weight:n,...m}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
 //# sourceMappingURL=Heading.js.map

package/dist/components/heading/Heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n ~~fontWeight: 700,\n~~ m: 0,\n variants: {\n size: {\n xs: {\n fontFamily: '$body',\n fontSize: '$md',\n lineHeight: 1.5,\n ...capsize(0.3864)\n },\n sm: {\n fontFamily: '$body',\n fontSize: '$lg',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n md: {\n fontFamily: '$~~body~~',\n fontSize: '$xl',\n lineHeight: 1.14,\n ...capsize(0.~~2078~~)\n },\n lg: {\n fontFamily: '$display',\n fontSize: '$2xl',\n lineHeight: 1.08,\n letterSpacing: '0.01em',\n ...capsize(0.1405, 0.2405)\n },\n xl: {\n fontFamily: '$display',\n fontSize: '$3xl',\n lineHeight: 1.12,\n ...capsize(0.16, 0.26)\n },\n xxl: {\n fontFamily: '$display',\n fontSize: '$4xl',\n lineHeight: 1,\n ...capsize(0.1, 0.2)\n }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n }\n }\n})\n\nexport type HeadingProps = Override<\n React.ComponentProps<typeof StyledHeading>,\n {\n as?:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| React.ComponentType\n \| React.ElementType\n }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n <StyledHeading ref={ref} size={size} {...remainingProps} />\n ))\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","remainingProps","ref"],"mappings":"~~sTAMO~~,~~MAAMA,~~EAAgBC,EAAO,KAAM,CACxC,~~WAAY,IACZ,~~EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,~~QACZ~~,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,~~CACnB~~,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,IAAM,GAAI,CACvB,EACA,IAAK,CACH,WAAY,WACZ,SAAU,OACV,WAAY,EACZ,GAAGA,EAAQ,GAAK,EAAG,CACrB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,~~WAAW~~,CAAC,CAAE,KAAAC,EAAO,~~QAASC~~,CAAe,EAAGC,~~IACpDH~~,EAAA,cAACJ,~~EAAc~~,~~CAAA~~,~~IAAKO~~,~~EAAK~~,~~KAAMF~~,~~EAAO~~,GAAGC,~~CAAAA~~,~~CAAgB~~,~~CAC1D~~,~~EAEHH,~~EAAQ,YAAc"}
1	+ {"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n m: 0,\n variants: {\n size: {\n xs: {\n fontFamily: '$body',\n fontSize: '$md',\n lineHeight: 1.5,\n ...capsize(0.3864)\n },\n sm: {\n fontFamily: '$body',\n fontSize: '$lg',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n md: {\n fontFamily: '$display',\n fontSize: '$xl',\n lineHeight: 1.14,\n letterSpacing: '0.01em',\n ...capsize(0.2114, 0.2634)\n },\n lg: {\n fontFamily: '$display',\n fontSize: '$2xl',\n lineHeight: 1.08,\n letterSpacing: '0.01em',\n ...capsize(0.1405, 0.2405)\n },\n xl: {\n fontFamily: '$display',\n fontSize: '$3xl',\n lineHeight: 1.12,\n ...capsize(0.16, 0.26)\n },\n xxl: {\n fontFamily: '$display',\n fontSize: '$4xl',\n lineHeight: 1,\n ...capsize(0.1, 0.2)\n }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n },\n weight: {\n medium: { fontWeight: 500 },\n bold: { fontWeight: 700 }\n }\n }\n})\n\nexport type HeadingProps = Override<\n React.ComponentProps<typeof StyledHeading>,\n {\n as?:\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n \| 'h5'\n \| 'h6'\n \| React.ComponentType\n \| React.ElementType\n }\n>\n\nexport const Heading: React.ForwardRefExoticComponent<HeadingProps> =\n React.forwardRef(\n ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n <StyledHeading\n ref={ref}\n size={size}\n weight={weight}\n {...remainingProps}\n />\n )\n )\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","weight","remainingProps","ref"],"mappings":"4TAMaA,EAAgBC,EAAO,KAAM,CACxC,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,WACZ,SAAU,MACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,IAAM,GAAI,CACvB,EACA,IAAK,CACH,WAAY,WACZ,SAAU,OACV,WAAY,EACZ,GAAGA,EAAQ,GAAK,EAAG,CACrB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,EACA,OAAQ,CACN,OAAQ,CAAE,WAAY,GAAI,EAC1B,KAAM,CAAE,WAAY,GAAI,CAC1B,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,UAAWC,CAAe,EAAGC,IACpDJ,EAAA,cAACJ,GACC,IAAKQ,EACL,KAAMH,EACN,OAAQC,EACP,GAAGC,EACN,CAEJ,EAEFJ,EAAQ,YAAc"}

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

@@ -375,6 +375,7 @@ export declare const InputBackground: import("@atom-learning/stitches-react/type
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>, {
+    appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
     disabled?: boolean | "true" | undefined;
     state?: "error" | undefined;
@@ -1123,9 +1124,10 @@ export type InputTextProps = Omit<React.ComponentProps<typeof StyledInputText>,
 };
 export declare const InputText: React.ForwardRefExoticComponent<InputTextProps>;
 type InputBackgroundProps = React.ComponentProps<typeof InputBackground>;
-export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | 'state'> & {
+export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | 'state' | 'appearance'> & {
     size?: InputBackgroundProps['size'];
     state?: InputBackgroundProps['state'];
+    appearance?: InputBackgroundProps['appearance'];
 };
 export declare const Input: React.ForwardRefExoticComponent<InputProps>;
 export {};

package/dist/components/input/Input.js CHANGED Viewed

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

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

	@@ -1 +1 @@
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(\n ({ className, size = 'md', state, disabled, css, ...rest }, ref) => {\n return (\n <InputBackground\n size={size}\n disabled={disabled}\n state={state}\n css={css}\n className={className}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\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","className","state","disabled"],"mappings":"+~~gBASa~~,~~MAAAA~~,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,CACN,~~CAAA,~~CAEJ,CAAC,EAEHL,EAAU,YAAc,~~YAWjB~~,MAAMU,EACXT,EAAM,WACJ,~~CAAC~~,~~CAAE~~,UAAAU,~~EAAW~~,KAAAP,EAAO,~~KAAM~~,~~MAAAQ~~,~~EAAO~~,SAAAC,~~EAAU~~,~~IAAAV~~,~~KAAQE~~,~~CAAK~~,~~EAAGC~~,~~IAExDL~~,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,~~SAAUS~~,EACV,MAAOD,EACP,~~IAAKT~~,EACL,UAAWQ,~~CAAAA~~,~~EAEXV~~,EAAA,cAACD,~~EAAU~~,~~CAAA~~,KAAMI,EAAM,IAAKE,EAAK,~~SAAUO~~,EAAW,~~GAAGR~~,CAAM,~~CAAA,~~CACjE,CAGN,EAEFK,EAAM,YAAc"}
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 color: '$grey1000',\n transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n width: '100%',\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: '$1',\n '&:focus-within': {\n borderColor: '$blue800'\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 size: {\n sm: { height: '$3' },\n md: { height: '$4' },\n lg: { height: '$5' },\n xl: { height: '$6' }\n },\n disabled: {\n true: disabledStyle\n },\n state: {\n error: {}\n }\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\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' \| 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n React.forwardRef(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n css,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n css={css}\n className={className}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\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","className","appearance","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,MAAO,YACP,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,OAAQ,qBACR,aAAc,KACd,iBAAkB,CAChB,YAAa,UACf,CACF,EACA,OAAQ,CACN,WAAY,WACZ,OAAQ,OACR,aAAc,KACd,iBAAkB,CAChB,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,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,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,YAYjB,MAAMU,EACXT,EAAM,WACJ,CACE,CACE,UAAAU,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,IAAAX,KACGE,CACL,EACAC,IAGEL,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,IAAKV,EACL,UAAWQ,CAEXV,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAAA,CAAM,CACjE,CAGN,EAEFK,EAAM,YAAc"}

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

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

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

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

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

	@@ -1 +1 @@
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"}
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, useFormCustomContext } 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 appearance,\n ...remainingProps\n}: InputFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\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 <Input\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\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","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Input"],"mappings":"0XAYa,MAAAA,EAAa,CAAC,CACzB,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,UAAAC,EACA,WAAAC,KACGC,CACL,IAAuB,CACrB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EACV,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAE9Ba,EAAMZ,EAAaM,EAASN,CAAU,EAAIM,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKlB,EACL,YAAaK,EACb,MAAOQ,EACP,QAASX,EACT,UAAWI,EACX,MAAOL,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYa,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,GAAIjB,EACJ,KAAMA,EACN,IAAKa,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CAAAA,CACN,CACF,CAEJ,EAEAT,EAAW,YAAc"}

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

@@ -5,6 +5,7 @@ declare const StyledLabel: import("@atom-learning/stitches-react/types/styled-co
     type?: "inline" | "block" | undefined;
     align?: "center" | "start" | undefined;
     direction?: "row" | "reverse" | undefined;
+    appearance?: "standard" | "modern" | undefined;
 }, {
     sm: string;
     md: string;
@@ -374,7 +375,7 @@ declare const StyledLabel: import("@atom-learning/stitches-react/types/styled-co
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-type LabelProps = Override<React.ComponentPropsWithoutRef<typeof StyledLabel>, {
+export type LabelProps = Override<React.ComponentPropsWithoutRef<typeof StyledLabel>, {
     as?: 'label' | 'legend';
     required?: boolean;
 }>;

package/dist/components/label/Label.js CHANGED Viewed

@@ -1,2 +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:"$grey900",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};
+import*as e from"react";import{styled as t}from"../../stitches.js";import{getTextVariant as i}from"../text/Text.js";const p=t("label",{color:"$grey900",fontFamily:"$body",m:0,variants:{size:{sm:i({size:"sm"}),md:i({size:"md"})},type:{block:{display:"block",fontWeight:600},inline:{display:"flex",fontWeight:400,maxWidth:"max-content"}},align:{start:{},center:{}},direction:{reverse:{},row:{}},appearance:{standard:{},modern:{}}},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"}},{type:"block",appearance:"modern",css:{fontWeight:400}}]}),y=t("span",{color:"$danger",ml:"$1",fontWeight:400}),n=({align:r="start",as:a="label",direction:o="row",size:s="md",type:l="block",children:c,required:m,...d})=>e.createElement(p,{as:a,size:s,type:l,align:r,direction:o,...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 CHANGED Viewed

	@@ -1 +1 @@
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: '$grey900',\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,WACP,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"}
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: '$grey900',\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 appearance: { standard: {}, modern: {} }\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 type: 'block',\n appearance: 'modern',\n css: { fontWeight: 400 }\n }\n ]\n})\n\nconst StyledAsterisk = styled('span', {\n color: '$danger',\n ml: '$1',\n fontWeight: 400\n})\n\nexport type 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,WACP,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,GAAI,OAAQ,CAAA,CAAG,EAC/B,UAAW,CAAE,QAAS,CAAA,EAAI,IAAK,EAAG,EAClC,WAAY,CAAE,SAAU,CAAC,EAAG,OAAQ,CAAA,CAAG,CACzC,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,EACA,CACE,KAAM,QACN,WAAY,SACZ,IAAK,CAAE,WAAY,GAAI,CACzB,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,CAAAA,EAEHF,EACAC,GAAYE,EAAA,cAACV,EAAA,CAAe,cAAW,IAAC,GAAC,CAC5C,EAGFC,EAAM,YAAc"}