@doist/reactist 12.0.4 → 12.1.0

package/es/new-components/base-field/base-field.js

@@ -2,6 +2,7 @@ import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBab
 import { createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
+import { Spinner } from '../spinner/spinner.js';
 import { Text } from '../text/text.js';
 import { useId } from '../common-helpers.js';
 import styles from './base-field.module.css.js';
@@ -14,11 +15,52 @@ function FieldHint(props) {
   }, props));
 }
 
+function MessageIcon(props) {
+  return /*#__PURE__*/createElement("svg", _objectSpread2({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",
+    fill: "currentColor"
+  }));
+}
+
+function FieldMessage({
+  id,
+  children,
+  tone
+}) {
+  const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal';
+  return /*#__PURE__*/createElement(Text, {
+    as: "p",
+    tone: textTone,
+    size: "copy",
+    id: id
+  }, /*#__PURE__*/createElement(Box, {
+    as: "span",
+    marginRight: "xsmall",
+    display: "inlineFlex",
+    className: styles.messageIcon
+  }, tone === 'loading' ? /*#__PURE__*/createElement(Spinner, {
+    size: 16
+  }) : /*#__PURE__*/createElement(MessageIcon, {
+    "aria-hidden": true
+  })), children);
+}
+
 function BaseField({
+  variant = 'default',
   label,
   secondaryLabel,
   auxiliaryLabel,
   hint,
+  message,
+  tone = 'neutral',
   className,
   children,
   maxWidth,
@@ -28,21 +70,26 @@ function BaseField({
 }) {
   const id = useId(originalId);
   const hintId = useId();
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
+  const messageId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : [message ? messageId : null, hintId].filter(Boolean).join(' ');
+  const childrenProps = {
+    id,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': tone === 'error' ? true : undefined
+  };
   return /*#__PURE__*/createElement(Stack, {
-    space: "small"
-  }, /*#__PURE__*/createElement(Box, {
-    className: [className, styles.container],
-    maxWidth: maxWidth,
+    space: "small",
     hidden: hidden
+  }, /*#__PURE__*/createElement(Box, {
+    className: [className, styles.container, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
+    maxWidth: maxWidth
   }, /*#__PURE__*/createElement(Box, {
     as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
-    alignItems: "flexEnd",
-    paddingBottom: "small"
+    alignItems: "flexEnd"
   }, /*#__PURE__*/createElement(Text, {
-    size: "body",
+    size: variant === 'bordered' ? 'caption' : 'body',
     as: "label",
     htmlFor: id
   }, label ? /*#__PURE__*/createElement("span", {
@@ -52,16 +99,13 @@ function BaseField({
   }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/createElement(Box, {
     className: styles.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null), children(ariaDescribedBy ? {
-    id,
-    'aria-describedby': ariaDescribedBy
-  } : {
-    id
-  })), hint ? /*#__PURE__*/createElement(FieldHint, {
-    hidden: hidden,
+  }, auxiliaryLabel) : null), children(childrenProps)), message ? /*#__PURE__*/createElement(FieldMessage, {
+    id: messageId,
+    tone: tone
+  }, message) : null, hint ? /*#__PURE__*/createElement(FieldHint, {
     id: hintId
   }, hint) : null);
 }
 
-export { BaseField, FieldHint };
+export { BaseField, FieldHint, FieldMessage };
 //# sourceMappingURL=base-field.js.map

package/es/new-components/base-field/base-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../common-types'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n    hidden?: boolean\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         */\n        hint?: React.ReactNode\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n\n    return (\n        <Stack space=\"small\">\n            <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n                <Box\n                    as=\"span\"\n                    display=\"flex\"\n                    justifyContent=\"spaceBetween\"\n                    alignItems=\"flexEnd\"\n                    paddingBottom=\"small\"\n                >\n                    <Text size=\"body\" as=\"label\" htmlFor={id}>\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            </Box>\n            {hint ? (\n                <FieldHint hidden={hidden} id={hintId}>\n                    {hint}\n                </FieldHint>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport type { FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","BaseField","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","id","originalId","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":";;;;;;;;AAeA,SAASA,SAAT,CAAmBC,KAAnB;EACI,oBAAOC,aAAA,CAACC,IAAD;IAAMC,EAAE,EAAC,GAAT;IAAaC,IAAI,EAAC,WAAlB;IAA8BC,IAAI,EAAC;KAAWL,KAA9C,EAAP;AACH;;AA+DD,SAASM,SAAT,CAAmB;EACfC,KADe;EAEfC,cAFe;EAGfC,cAHe;EAIfC,IAJe;EAKfC,SALe;EAMfC,QANe;EAOfC,QAPe;EAQfC,MARe;EASf,oBAAoBC,uBATL;EAUfC,EAAE,EAAEC;AAVW,CAAnB;EAYI,MAAMD,EAAE,GAAGE,KAAK,CAACD,UAAD,CAAhB;EACA,MAAME,MAAM,GAAGD,KAAK,EAApB;EAEA,MAAME,eAAe,GAAGL,uBAAH,WAAGA,uBAAH,GAA+BL,IAAI,GAAGS,MAAH,GAAYE,SAApE;EAEA,oBACIpB,aAAA,CAACqB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACItB,aAAA,CAACuB,GAAD;IAAKb,SAAS,EAAE,CAACA,SAAD,EAAYc,MAAM,CAACC,SAAnB;IAA+Bb,QAAQ,EAAEA;IAAUC,MAAM,EAAEA;GAA3E,eACIb,aAAA,CAACuB,GAAD;IACIrB,EAAE,EAAC;IACHwB,OAAO,EAAC;IACRC,cAAc,EAAC;IACfC,UAAU,EAAC;IACXC,aAAa,EAAC;GALlB,eAOI7B,aAAA,CAACC,IAAD;IAAMG,IAAI,EAAC;IAAOF,EAAE,EAAC;IAAQ4B,OAAO,EAAEf;GAAtC,EACKT,KAAK,gBAAGN,aAAA,OAAA;IAAMU,SAAS,EAAEc,MAAM,CAACO;GAAxB,EAAuCzB,KAAvC,CAAH,GAA0D,IADpE,EAEKC,cAAc,gBACXP,aAAA,OAAA;IAAMU,SAAS,EAAEc,MAAM,CAACjB;GAAxB,WAAA,EAAgDA,cAAhD,KAAA,CADW,GAEX,IAJR,CAPJ,EAaKC,cAAc,gBACXR,aAAA,CAACuB,GAAD;IAAKb,SAAS,EAAEc,MAAM,CAAChB;IAAgBwB,WAAW,EAAC;GAAnD,EACKxB,cADL,CADW,GAIX,IAjBR,CADJ,EAoBKG,QAAQ,CAACQ,eAAe,GAAG;IAAEJ,EAAF;IAAM,oBAAoBI;GAA7B,GAAiD;IAAEJ;GAAnE,CApBb,CADJ,EAuBKN,IAAI,gBACDT,aAAA,CAACF,SAAD;IAAWe,MAAM,EAAEA;IAAQE,EAAE,EAAEG;GAA/B,EACKT,IADL,CADC,GAID,IA3BR,CADJ;AA+BH;;;;"}
+{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see tone\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see message\n         * @see hint\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                <Box as=\"span\" display=\"flex\" justifyContent=\"spaceBetween\" alignItems=\"flexEnd\">\n                    <Text\n                        size={variant === 'bordered' ? 'caption' : 'body'}\n                        as=\"label\"\n                        htmlFor={id}\n                    >\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","FieldMessage","id","children","textTone","Box","marginRight","display","className","styles","messageIcon","Spinner","BaseField","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","originalAriaDescribedBy","originalId","useId","hintId","messageId","ariaDescribedBy","filter","Boolean","join","childrenProps","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":";;;;;;;;;AAeA,SAASA,SAAT,CAAmBC,KAAnB;EACI,oBAAOC,aAAA,CAACC,IAAD;IAAMC,EAAE,EAAC,GAAT;IAAaC,IAAI,EAAC,WAAlB;IAA8BC,IAAI,EAAC;KAAWL,KAA9C,EAAP;AACH;;AAED,SAASM,WAAT,CAAqBN,KAArB;EACI,oBACIC,aAAA,MAAA;IACIM,KAAK,EAAC,IADV;IAEIC,MAAM,EAAC,IAFX;IAGIC,OAAO,EAAC,WAHZ;IAIIC,IAAI,EAAC,MAJT;IAKIC,KAAK,EAAC;KACFX,KANR,gBAQIC,aAAA,OAAA;IACIW,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,CAAC,EAAC;IACFJ,IAAI,EAAC;GAJT,CARJ,CADJ;AAiBH;;AAQD,SAASK,YAAT,CAAsB;EAAEC,EAAF;EAAMC,QAAN;EAAgBb;AAAhB,CAAtB;EACI,MAAMc,QAAQ,GAAGd,IAAI,KAAK,OAAT,GAAmB,QAAnB,GAA8BA,IAAI,KAAK,SAAT,GAAqB,UAArB,GAAkC,QAAjF;EACA,oBACIH,aAAA,CAACC,IAAD;IAAMC,EAAE,EAAC;IAAIC,IAAI,EAAEc;IAAUb,IAAI,EAAC;IAAOW,EAAE,EAAEA;GAA7C,eACIf,aAAA,CAACkB,GAAD;IAAKhB,EAAE,EAAC;IAAOiB,WAAW,EAAC;IAASC,OAAO,EAAC;IAAaC,SAAS,EAAEC,MAAM,CAACC;GAA3E,EACKpB,IAAI,KAAK,SAAT,gBAAqBH,aAAA,CAACwB,OAAD;IAASpB,IAAI,EAAE;GAAf,CAArB,gBAA6CJ,aAAA,CAACK,WAAD;;GAAA,CADlD,CADJ,EAIKW,QAJL,CADJ;AAQH;;AAmID,SAASS,SAAT,CAAmB;EACfC,OAAO,GAAG,SADK;EAEfC,KAFe;EAGfC,cAHe;EAIfC,cAJe;EAKfC,IALe;EAMfC,OANe;EAOf5B,IAAI,GAAG,SAPQ;EAQfkB,SARe;EASfL,QATe;EAUfgB,QAVe;EAWfC,MAXe;EAYf,oBAAoBC,uBAZL;EAafnB,EAAE,EAAEoB;AAbW,CAAnB;EAeI,MAAMpB,EAAE,GAAGqB,KAAK,CAACD,UAAD,CAAhB;EACA,MAAME,MAAM,GAAGD,KAAK,EAApB;EACA,MAAME,SAAS,GAAGF,KAAK,EAAvB;EAEA,MAAMG,eAAe,GACjBL,uBADiB,WACjBA,uBADiB,GACU,CAACH,OAAO,GAAGO,SAAH,GAAe,IAAvB,EAA6BD,MAA7B,EAAqCG,MAArC,CAA4CC,OAA5C,EAAqDC,IAArD,CAA0D,GAA1D,CAD/B;EAGA,MAAMC,aAAa,GAAwB;IACvC5B,EADuC;IAEvC,oBAAoBwB,eAFmB;IAGvC,gBAAgBpC,IAAI,KAAK,OAAT,GAAmB,IAAnB,GAA0ByC;GAH9C;EAMA,oBACI5C,aAAA,CAAC6C,KAAD;IAAOC,KAAK,EAAC;IAAQb,MAAM,EAAEA;GAA7B,eACIjC,aAAA,CAACkB,GAAD;IACIG,SAAS,EAAE,CACPA,SADO,EAEPC,MAAM,CAACyB,SAFA,EAGP5C,IAAI,KAAK,OAAT,GAAmBmB,MAAM,CAAC0B,KAA1B,GAAkC,IAH3B,EAIPtB,OAAO,KAAK,UAAZ,GAAyBJ,MAAM,CAAC2B,QAAhC,GAA2C,IAJpC;IAMXjB,QAAQ,EAAEA;GAPd,eASIhC,aAAA,CAACkB,GAAD;IAAKhB,EAAE,EAAC;IAAOkB,OAAO,EAAC;IAAO8B,cAAc,EAAC;IAAeC,UAAU,EAAC;GAAvE,eACInD,aAAA,CAACC,IAAD;IACIG,IAAI,EAAEsB,OAAO,KAAK,UAAZ,GAAyB,SAAzB,GAAqC;IAC3CxB,EAAE,EAAC;IACHkD,OAAO,EAAErC;GAHb,EAKKY,KAAK,gBAAG3B,aAAA,OAAA;IAAMqB,SAAS,EAAEC,MAAM,CAAC+B;GAAxB,EAAuC1B,KAAvC,CAAH,GAA0D,IALpE,EAMKC,cAAc,gBACX5B,aAAA,OAAA;IAAMqB,SAAS,EAAEC,MAAM,CAACM;GAAxB,WAAA,EAAgDA,cAAhD,KAAA,CADW,GAEX,IARR,CADJ,EAWKC,cAAc,gBACX7B,aAAA,CAACkB,GAAD;IAAKG,SAAS,EAAEC,MAAM,CAACO;IAAgByB,WAAW,EAAC;GAAnD,EACKzB,cADL,CADW,GAIX,IAfR,CATJ,EA0BKb,QAAQ,CAAC2B,aAAD,CA1Bb,CADJ,EA6BKZ,OAAO,gBACJ/B,aAAA,CAACc,YAAD;IAAcC,EAAE,EAAEuB;IAAWnC,IAAI,EAAEA;GAAnC,EACK4B,OADL,CADI,GAIJ,IAjCR,EAkCKD,IAAI,gBAAG9B,aAAA,CAACF,SAAD;IAAWiB,EAAE,EAAEsB;GAAf,EAAwBP,IAAxB,CAAH,GAA+C,IAlCxD,CADJ;AAsCH;;;;"}

package/es/new-components/base-field/base-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_540a88ff = {"container":"ed7d894c","primaryLabel":"_22213081","secondaryLabel":"be8637dd","auxiliaryLabel":"_72b46ad5"};
+var modules_540a88ff = {"container":"_2e189908","auxiliaryLabel":"_83051e0a","bordered":"fd20ef50","error":"d1a17d92","primaryLabel":"_75e0afa0","secondaryLabel":"d04a867d","messageIcon":"_77b2107e"};
 
 export default modules_540a88ff;
 //# sourceMappingURL=base-field.module.css.js.map

package/es/new-components/password-field/password-field.js

@@ -10,13 +10,16 @@ import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
 import styles from './password-field.module.css.js';
 import styles$1 from '../text-field/text-field.module.css.js';
 
-const _excluded = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const _excluded = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
 const PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
   let {
+    variant = 'default',
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth,
     togglePasswordLabel = 'Toggle password visibility',
     hidden,
@@ -37,18 +40,21 @@ const PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref)
   }
 
   return /*#__PURE__*/createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/createElement(Box, {
     display: "flex",
     alignItems: "center",
-    className: [styles.inputWrapper, styles$1.inputWrapper]
+    className: [styles.inputWrapper, styles$1.inputWrapper, tone === 'error' ? styles$1.error : null, variant === 'bordered' ? styles$1.bordered : null]
   }, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: inputRef,
     type: isPasswordVisible ? 'text' : 'password'

package/es/new-components/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Tooltip } from '../../components/tooltip'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> & {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[styles.inputWrapper, textFieldStyles.inputWrapper]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;;MAmBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAYzEE,GAZyE;MACzE;IACIC,KADJ;IAEIC,cAFJ;IAGIC,cAHJ;IAIIC,IAJJ;IAKIC,QALJ;IAMIC,mBAAmB,GAAG,4BAN1B;IAOIC,MAPJ;IAQI,oBAAoBC;;MACjBC;;EAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;EACA,MAAME,WAAW,GAAGb,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMc,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcZ,GAAd,CAA3B;EAEA,MAAM,CAACe,iBAAD,EAAoBC,kBAApB,IAA0CjB,QAAA,CAAe,KAAf,CAAhD;;EAEA,SAASkB,wBAAT;;;IACID,kBAAkB,CAAEE,CAAD,IAAO,CAACA,CAAT,CAAlB;IACA,wBAAAN,WAAW,CAACO,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIrB,aAAA,CAACsB,SAAD;IACIX,EAAE,EAAEA;IACJT,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GARtB,EAUMc,UAAD,iBACGvB,aAAA,CAACwB,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CAACC,MAAM,CAACC,YAAR,EAAsBC,QAAe,CAACD,YAAtC;GAHf,eAKI7B,aAAA,QAAA,mDACQU,KADR,GAEQa,UAFR;IAGItB,GAAG,EAAEa,QAHT;IAIIiB,IAAI,EAAEf,iBAAiB,GAAG,MAAH,GAAY;KAT3C,eAWIhB,aAAA,CAACgC,OAAD;IAASC,OAAO,EAAE1B;GAAlB,eACIP,aAAA,SAAA;IACI+B,IAAI,EAAC;IACLG,OAAO,EAAEhB;kBACGX;IACZ4B,QAAQ,EAAE,CAAC;GAJf,EAMKnB,iBAAiB,gBACdhB,aAAA,CAACoC,mBAAD;;GAAA,CADc,gBAGdpC,aAAA,CAACqC,kBAAD;;GAAA,CATR,CADJ,CAXJ,CAXR,CADJ;AAyCH,CAlEqB;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Tooltip } from '../../components/tooltip'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        variant = 'default',\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        textFieldStyles.inputWrapper,\n                        tone === 'error' ? textFieldStyles.error : null,\n                        variant === 'bordered' ? textFieldStyles.bordered : null,\n                    ]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","error","bordered","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;;MAoBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAezEE,GAfyE;MACzE;IACIC,OAAO,GAAG,SADd;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,mBAAmB,GAAG,4BAT1B;IAUIC,MAVJ;IAWI,oBAAoBC;;MACjBC;;EAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;EACA,MAAME,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMiB,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcf,GAAd,CAA3B;EAEA,MAAM,CAACkB,iBAAD,EAAoBC,kBAApB,IAA0CpB,QAAA,CAAe,KAAf,CAAhD;;EAEA,SAASqB,wBAAT;;;IACID,kBAAkB,CAAEE,CAAD,IAAO,CAACA,CAAT,CAAlB;IACA,wBAAAN,WAAW,CAACO,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIxB,aAAA,CAACyB,SAAD;IACIvB,OAAO,EAAEA;IACTY,EAAE,EAAEA;IACJX,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAXtB,EAaMc,UAAD,iBACG1B,aAAA,CAAC2B,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPC,QAAe,CAACD,YAFT,EAGPxB,IAAI,KAAK,OAAT,GAAmByB,QAAe,CAACC,KAAnC,GAA2C,IAHpC,EAIPhC,OAAO,KAAK,UAAZ,GAAyB+B,QAAe,CAACE,QAAzC,GAAoD,IAJ7C;GAHf,eAUInC,aAAA,QAAA,mDACQa,KADR,GAEQa,UAFR;IAGIzB,GAAG,EAAEgB,QAHT;IAIImB,IAAI,EAAEjB,iBAAiB,GAAG,MAAH,GAAY;KAd3C,eAgBInB,aAAA,CAACqC,OAAD;IAASC,OAAO,EAAE5B;GAAlB,eACIV,aAAA,SAAA;IACIoC,IAAI,EAAC;IACLG,OAAO,EAAElB;kBACGX;IACZ8B,QAAQ,EAAE,CAAC;GAJf,EAMKrB,iBAAiB,gBACdnB,aAAA,CAACyC,mBAAD;;GAAA,CADc,gBAGdzC,aAAA,CAAC0C,kBAAD;;GAAA,CATR,CADJ,CAhBJ,CAdR,CADJ;AAiDH,CA7EqB;;;;"}

package/es/new-components/password-field/password-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
+var modules_3f03ead6 = {"inputWrapper":"_66b448b3"};
 
 export default modules_3f03ead6;
 //# sourceMappingURL=password-field.module.css.js.map

package/es/new-components/select-field/select-field.js

@@ -4,7 +4,7 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './select-field.module.css.js';
 
-const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
   let {
     id,
@@ -12,6 +12,8 @@ const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth,
     children,
     hidden,
@@ -25,11 +27,13 @@ const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/createElement(Box, {
-    className: styles.selectWrapper
+    className: [styles.selectWrapper, tone === 'error' ? styles.error : null]
   }, /*#__PURE__*/createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: ref
   }), children), /*#__PURE__*/createElement(SelectChevron, {

package/es/new-components/select-field/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.selectWrapper}>\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;MAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAatEE,GAbsE;MACtE;IACIC,EADJ;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,QANJ;IAOIC,QAPJ;IAQIC,MARJ;IASI,oBAAoBC;;MACjBC;;EAIP,oBACIX,aAAA,CAACY,SAAD;IACIV,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GARtB,EAUMG,UAAD,iBACGb,aAAA,CAACc,GAAD;IAAKC,SAAS,EAAEC,MAAM,CAACC;GAAvB,eACIjB,aAAA,SAAA,mDAAYW,KAAZ,GAAuBE,UAAvB;IAAmCZ,GAAG,EAAEA;MACnCO,QADL,CADJ,eAIIR,aAAA,CAACkB,aAAD;;GAAA,CAJJ,CAXR,CADJ;AAqBH,CApCmB;;AAsCpB,SAASA,aAAT,CAAuBP,KAAvB;EACI,oBACIX,aAAA,MAAA;IAAKmB,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCX,KAA/E,gBACIX,aAAA,OAAA;IACIuB,CAAC,EAAC;IACFF,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}
+{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={[styles.selectWrapper, tone === 'error' ? styles.error : null]}>\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","error","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;MAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAetEE,GAfsE;MACtE;IACIC,EADJ;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,QATJ;IAUIC,MAVJ;IAWI,oBAAoBC;;MACjBC;;EAIP,oBACIb,aAAA,CAACc,SAAD;IACIZ,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAVtB,EAYMG,UAAD,iBACGf,aAAA,CAACgB,GAAD;IAAKC,SAAS,EAAE,CAACC,MAAM,CAACC,aAAR,EAAuBX,IAAI,KAAK,OAAT,GAAmBU,MAAM,CAACE,KAA1B,GAAkC,IAAzD;GAAhB,eACIpB,aAAA,SAAA,mDAAYa,KAAZ,GAAuBE,UAAvB;IAAmCd,GAAG,EAAEA;MACnCS,QADL,CADJ,eAIIV,aAAA,CAACqB,aAAD;;GAAA,CAJJ,CAbR,CADJ;AAuBH,CAxCmB;;AA0CpB,SAASA,aAAT,CAAuBR,KAAvB;EACI,oBACIb,aAAA,MAAA;IAAKsB,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCZ,KAA/E,gBACIb,aAAA,OAAA;IACI0B,CAAC,EAAC;IACFF,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}

package/es/new-components/select-field/select-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
+var modules_1fa9b208 = {"selectWrapper":"_07e75293","error":"f147bcea"};
 
 export default modules_1fa9b208;
 //# sourceMappingURL=select-field.module.css.js.map

package/es/new-components/text/text.module.css.js

@@ -1,4 +1,4 @@
-var modules_a9637dd3 = {"text":"_2282cb83","size-caption":"_087a8179","size-copy":"a4423c2a","size-subtitle":"_03365a63","weight-semibold":"_5213e4ab","weight-bold":"_3d58c8f2","tone-secondary":"_892a359a","tone-danger":"f9cb5d8a","tone-positive":"fcedb234","lineClampMultipleLines":"_765949c1","lineClamp-1":"c3e4800e","lineClamp-2":"b25b652b","lineClamp-3":"bb13d214","lineClamp-4":"_6db1928e","lineClamp-5":"e9944c1d"};
+var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
 export default modules_a9637dd3;
 //# sourceMappingURL=text.module.css.js.map

package/es/new-components/text-area/text-area.js

@@ -4,29 +4,36 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './text-area.module.css.js';
 
-const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth"];
+const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth"];
 
 function TextArea(_ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
-    className: styles.container,
+    message: message,
+    tone: tone,
+    className: [styles.container, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
     maxWidth: maxWidth
   }, extraProps => /*#__PURE__*/createElement(Box, {
-    width: "full"
+    width: "full",
+    display: "flex"
   }, /*#__PURE__*/createElement("textarea", _objectSpread2(_objectSpread2({}, props), extraProps))));
 }
 

package/es/new-components/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> & {\n    rows?: number\n}\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":";;;;;;;;AASA,SAASA,QAAT;MAAkB;IACdC,EADc;IAEdC,KAFc;IAGdC,cAHc;IAIdC,cAJc;IAKdC,IALc;IAMdC;;MACGC;;EAEH,oBACIC,aAAA,CAACC,SAAD;IACIR,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNK,SAAS,EAAEC,MAAM,CAACC;IAClBN,QAAQ,EAAEA;GAPd,EASMO,UAAD,iBACGL,aAAA,CAACM,GAAD;IAAKC,KAAK,EAAC;GAAX,eACIP,aAAA,WAAA,oCAAcD,KAAd,GAAyBM,UAAzB,EADJ,CAVR,CADJ;AAiBH;;;;"}
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        rows?: number\n    }\n\nfunction TextArea({\n    variant = 'default',\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            className={[\n                styles.container,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\" display=\"flex\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","props","React","BaseField","className","styles","container","error","bordered","extraProps","Box","width","display"],"mappings":";;;;;;;;AAUA,SAASA,QAAT;MAAkB;IACdC,OAAO,GAAG,SADI;IAEdC,EAFc;IAGdC,KAHc;IAIdC,cAJc;IAKdC,cALc;IAMdC,IANc;IAOdC,OAPc;IAQdC,IARc;IASdC;;MACGC;;EAEH,oBACIC,aAAA,CAACC,SAAD;IACIX,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNK,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEPP,IAAI,KAAK,OAAT,GAAmBM,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPf,OAAO,KAAK,UAAZ,GAAyBa,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKXR,QAAQ,EAAEA;GAdd,EAgBMS,UAAD,iBACGP,aAAA,CAACQ,GAAD;IAAKC,KAAK,EAAC;IAAOC,OAAO,EAAC;GAA1B,eACIV,aAAA,WAAA,oCAAcD,KAAd,GAAyBQ,UAAzB,EADJ,CAjBR,CADJ;AAwBH;;;;"}

package/es/new-components/text-area/text-area.module.css.js

@@ -1,4 +1,4 @@
-var modules_2728c236 = {"container":"_5a579f96"};
+var modules_2728c236 = {"container":"d6ec37c5","bordered":"a60d6043","error":"bef49c61"};
 
 export default modules_2728c236;
 //# sourceMappingURL=text-area.module.css.js.map

package/es/new-components/text-field/text-field.js

@@ -4,14 +4,17 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './text-field.module.css.js';
 
-const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"];
+const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby"];
 const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     type = 'text',
     maxWidth,
     hidden,
@@ -20,16 +23,19 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/createElement(Box, {
-    className: styles.inputWrapper
+    className: [styles.inputWrapper, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null]
   }, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     type: type,
     ref: ref

package/es/new-components/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> & {\n    type?: TextFieldType\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.inputWrapper}>\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","inputWrapper"],"mappings":";;;;;;;MAYMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAajEE,GAbiE;MACjE;IACIC,EADJ;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,IAAI,GAAG,MANX;IAOIC,QAPJ;IAQIC,MARJ;IASI,oBAAoBC;;MACjBC;;EAIP,oBACIX,aAAA,CAACY,SAAD;IACIV,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNE,QAAQ,EAAEA;IACVC,MAAM,EAAEA;wBACUC;GARtB,EAUMG,UAAD,iBACGb,aAAA,CAACc,GAAD;IAAKC,SAAS,EAAEC,MAAM,CAACC;GAAvB,eACIjB,aAAA,QAAA,mDAAWW,KAAX,GAAsBE,UAAtB;IAAkCN,IAAI,EAAEA,IAAxC;IAA8CN,GAAG,EAAEA;KADvD,CAXR,CADJ;AAkBH,CAjCiB;;;;"}
+{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> &\n    BaseFieldVariantProps & {\n        type?: TextFieldType\n    }\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","inputWrapper","error","bordered"],"mappings":";;;;;;;MAaMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAgBjEE,GAhBiE;MACjE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,IAAI,GAAG,MATX;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,oBAAoBC;;MACjBC;;EAIP,oBACId,aAAA,CAACe,SAAD;IACIb,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,QAAQ,EAAEA;IACVC,MAAM,EAAEA;wBACUC;GAXtB,EAaMG,UAAD,iBACGhB,aAAA,CAACiB,GAAD;IACIC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPX,IAAI,KAAK,OAAT,GAAmBU,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPnB,OAAO,KAAK,UAAZ,GAAyBiB,MAAM,CAACG,QAAhC,GAA2C,IAHpC;GADf,eAOItB,aAAA,QAAA,mDAAWc,KAAX,GAAsBE,UAAtB;IAAkCN,IAAI,EAAEA,IAAxC;IAA8CT,GAAG,EAAEA;KAPvD,CAdR,CADJ;AA2BH,CA7CiB;;;;"}

package/es/new-components/text-field/text-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
+var modules_aaf25250 = {"inputWrapper":"a3ecd1c5","bordered":"_5e6ce80b","error":"_1d92e043"};
 
 export default modules_aaf25250;
 //# sourceMappingURL=text-field.module.css.js.map

package/lib/new-components/base-field/base-field.d.ts

@@ -4,10 +4,35 @@ import type { WithEnhancedClassName } from '../common-types';
 declare type FieldHintProps = {
     id: string;
     children: React.ReactNode;
-    hidden?: boolean;
 };
 declare function FieldHint(props: FieldHintProps): JSX.Element;
+declare type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
+declare type FieldMessageProps = FieldHintProps & {
+    tone: FieldTone;
+};
+declare function FieldMessage({ id, children, tone }: FieldMessageProps): JSX.Element;
+declare type ChildrenRenderProps = {
+    id: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+};
 declare type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
+declare type BaseFieldVariant = 'default' | 'bordered';
+declare type BaseFieldVariantProps = {
+    /**
+     * Provides alternative visual layouts or modes that the field can be rendered in.
+     *
+     * Namely, there are two variants supported:
+     *
+     * - the default one
+     * - a "bordered" variant, where the border of the field surrounds also the labels, instead
+     *   of just surrounding the actual field element
+     *
+     * In both cases, the message and description texts for the field lie outside the bordered
+     * area.
+     */
+    variant?: BaseFieldVariant;
+};
 declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {
     /**
      * The main label for this field element.
@@ -39,10 +64,45 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      * @see secondaryLabel
      */
     auxiliaryLabel?: React.ReactNode;
+    /**
+     * A message associated with the field. It is rendered below the field, and with an
+     * appearance that conveys the tone of the field (e.g. coloured red for errors, green for
+     * success, etc).
+     *
+     * The message element is associated to the field via the `aria-describedby` attribute. If a
+     * `hint` is provided, both the hint and the message are associated as the field accessible
+     * description.
+     *
+     * In the future, when `aria-errormessage` gets better user agent support, we should use it
+     * to associate the filed with a message when tone is `"error"`.
+     *
+     * @see tone
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid
+     */
+    message?: React.ReactNode;
+    /**
+     * The tone with which the message, if any, is presented.
+     *
+     * If the tone is `"error"`, the field border turns red, and the message, if any, is also
+     * red.
+     *
+     * When the tone is `"loading"`, it is recommended that you also disable the field. However,
+     * this is not enforced by the component. It is only a recommendation.
+     *
+     * @see message
+     * @see hint
+     */
+    tone?: FieldTone;
     /**
      * A hint or help-like content associated as the accessible description of the field. It is
      * generally rendered below it, and with a visual style that reduces its prominence (i.e.
      * as secondary text).
+     *
+     * It sets the `aria-describedby` attribute pointing to the element that holds the hint
+     * content.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
      */
     hint?: React.ReactNode;
     /**
@@ -53,12 +113,9 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      * Used internally by components composed using `BaseField`. It is not exposed as part of
      * the public props of such components.
      */
-    children: (props: {
-        id: string;
-        'aria-describedby'?: string;
-    }) => React.ReactNode;
+    children: (props: ChildrenRenderProps) => React.ReactNode;
 };
-declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
-declare function BaseField({ label, secondaryLabel, auxiliaryLabel, hint, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & WithEnhancedClassName): JSX.Element;
-export { BaseField, FieldHint };
-export type { FieldComponentProps };
+declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
+declare function BaseField({ variant, label, secondaryLabel, auxiliaryLabel, hint, message, tone, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): JSX.Element;
+export { BaseField, FieldHint, FieldMessage };
+export type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps };

package/lib/new-components/base-field/base-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),s=require("../common-helpers.js"),i=require("./base-field.module.css.js");function n(l){return a.createElement(r.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},l))}exports.BaseField=function({label:e,secondaryLabel:d,auxiliaryLabel:c,hint:u,className:o,children:m,maxWidth:p,hidden:b,"aria-describedby":x,id:y}){const f=s.useId(y),E=s.useId(),h=null!=x?x:u?E:void 0;return a.createElement(t.Stack,{space:"small"},a.createElement(l.Box,{className:[o,i.default.container],maxWidth:p,hidden:b},a.createElement(l.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},a.createElement(r.Text,{size:"body",as:"label",htmlFor:f},e?a.createElement("span",{className:i.default.primaryLabel},e):null,d?a.createElement("span",{className:i.default.secondaryLabel}," (",d,")"):null),c?a.createElement(l.Box,{className:i.default.auxiliaryLabel,paddingLeft:"small"},c):null),m(h?{id:f,"aria-describedby":h}:{id:f})),u?a.createElement(n,{hidden:b,id:E},u):null)},exports.FieldHint=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../text/text.js"),i=require("../common-helpers.js"),s=require("./base-field.module.css.js");function d(l){return a.createElement(n.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},l))}function o(l){return a.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l),a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function c({id:e,children:r,tone:i}){return a.createElement(n.Text,{as:"p",tone:"error"===i?"danger":"success"===i?"positive":"normal",size:"copy",id:e},a.createElement(l.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:s.default.messageIcon},"loading"===i?a.createElement(t.Spinner,{size:16}):a.createElement(o,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:t,secondaryLabel:o,auxiliaryLabel:u,hint:m,message:p,tone:x="neutral",className:b,children:f,maxWidth:C,hidden:E,"aria-describedby":h,id:y}){const g=i.useId(y),j=i.useId(),v=i.useId(),B={id:g,"aria-describedby":null!=h?h:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===x||void 0};return a.createElement(r.Stack,{space:"small",hidden:E},a.createElement(l.Box,{className:[b,s.default.container,"error"===x?s.default.error:null,"bordered"===e?s.default.bordered:null],maxWidth:C},a.createElement(l.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},a.createElement(n.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:g},t?a.createElement("span",{className:s.default.primaryLabel},t):null,o?a.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?a.createElement(l.Box,{className:s.default.auxiliaryLabel,paddingLeft:"small"},u):null),f(B)),p?a.createElement(c,{id:v,tone:x},p):null,m?a.createElement(d,{id:j},m):null)},exports.FieldHint=d,exports.FieldMessage=c;
 //# sourceMappingURL=base-field.js.map