@doist/reactist 28.7.0 → 28.7.3

package/lib/banner/banner.d.ts

@@ -1,87 +1,87 @@
-import * as React from 'react';
-import { ButtonProps } from '../button';
-import { TextLink } from '../text-link';
-/**
- * Represents the type of a banner.
- * 'neutral' accepts a custom icon, the rest do not.
- * @default 'neutral'
- */
-export type BannerType = 'neutral' | SystemBannerType;
-/**
- * Predefined system types for banners.
- * Each type has its own preset icon.
- */
-export type SystemBannerType = 'info' | 'upgrade' | 'experiment' | 'warning' | 'error' | 'success';
-type BaseAction = {
-    variant: 'primary' | 'tertiary';
-    label: string;
-} & Pick<ButtonProps, 'loading' | 'disabled'>;
-type ActionButton = BaseAction & {
-    type: 'button';
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
-type ActionLink = BaseAction & {
-    type: 'link';
-} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'>;
-/**
- * Represents an action that can be taken from the banner.
- * Can be either a button or a link, sharing common properties from BaseAction.
- */
-type Action = ActionButton | ActionLink;
-/**
- * Configuration for inline links within the banner description.
- * Extends TextLink component props with a required label.
- */
-type InlineLink = {
-    label: string;
-} & React.ComponentProps<typeof TextLink>;
-type WithCloseButton = {
-    closeLabel?: string;
-    onClose: () => void;
-};
-type WithoutCloseButton = {
-    closeLabel?: never;
-    onClose?: never;
-};
-/**
- * Controls the close button behavior.
- * If none is provided, the banner will not have a close button.
- */
-type CloseButton = WithCloseButton | WithoutCloseButton;
-type BaseBanner = {
-    id?: string;
-    title?: React.ReactNode;
-    description: Exclude<React.ReactNode, null | undefined | boolean>;
-    action?: Action | React.ReactNode;
-    inlineLinks?: InlineLink[];
-} & CloseButton;
-/**
- * Configuration for neutral banners.
- * Can include either an image, an icon, or neither, but never both.
- */
-type NeutralBanner = BaseBanner & {
-    type: Extract<BannerType, 'neutral'>;
-} & ({
-    image: React.ReactElement;
-    icon?: never;
-} | {
-    icon: React.ReactElement;
-    image?: never;
-} | {
-    image?: never;
-    icon?: never;
-});
-/**
- * Configuration for system banners.
- * Cannot include custom images or icons as they use preset ones.
- */
-type SystemBanner = BaseBanner & {
-    type: SystemBannerType;
-    image?: never;
-    icon?: never;
-};
-type BannerProps = NeutralBanner | SystemBanner;
-declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
-declare function ActionButton({ type, label, ...props }: ActionButton): React.JSX.Element;
-declare function ActionLink({ type, label, variant, ...props }: ActionLink): React.JSX.Element;
-export { Banner };
-export type { BannerProps };
+import * as React from 'react';
+import { ButtonProps } from '../button';
+import { TextLink } from '../text-link';
+/**
+ * Represents the type of a banner.
+ * 'neutral' accepts a custom icon, the rest do not.
+ * @default 'neutral'
+ */
+export type BannerType = 'neutral' | SystemBannerType;
+/**
+ * Predefined system types for banners.
+ * Each type has its own preset icon.
+ */
+export type SystemBannerType = 'info' | 'upgrade' | 'experiment' | 'warning' | 'error' | 'success';
+type BaseAction = {
+    variant: 'primary' | 'tertiary';
+    label: string;
+} & Pick<ButtonProps, 'loading' | 'disabled'>;
+type ActionButton = BaseAction & {
+    type: 'button';
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
+type ActionLink = BaseAction & {
+    type: 'link';
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'>;
+/**
+ * Represents an action that can be taken from the banner.
+ * Can be either a button or a link, sharing common properties from BaseAction.
+ */
+type Action = ActionButton | ActionLink;
+/**
+ * Configuration for inline links within the banner description.
+ * Extends TextLink component props with a required label.
+ */
+type InlineLink = {
+    label: string;
+} & React.ComponentProps<typeof TextLink>;
+type WithCloseButton = {
+    closeLabel?: string;
+    onClose: () => void;
+};
+type WithoutCloseButton = {
+    closeLabel?: never;
+    onClose?: never;
+};
+/**
+ * Controls the close button behavior.
+ * If none is provided, the banner will not have a close button.
+ */
+type CloseButton = WithCloseButton | WithoutCloseButton;
+type BaseBanner = {
+    id?: string;
+    title?: React.ReactNode;
+    description: Exclude<React.ReactNode, null | undefined | boolean>;
+    action?: Action | React.ReactNode;
+    inlineLinks?: InlineLink[];
+} & CloseButton;
+/**
+ * Configuration for neutral banners.
+ * Can include either an image, an icon, or neither, but never both.
+ */
+type NeutralBanner = BaseBanner & {
+    type: Extract<BannerType, 'neutral'>;
+} & ({
+    image: React.ReactElement;
+    icon?: never;
+} | {
+    icon: React.ReactElement;
+    image?: never;
+} | {
+    image?: never;
+    icon?: never;
+});
+/**
+ * Configuration for system banners.
+ * Cannot include custom images or icons as they use preset ones.
+ */
+type SystemBanner = BaseBanner & {
+    type: SystemBannerType;
+    image?: never;
+    icon?: never;
+};
+type BannerProps = NeutralBanner | SystemBanner;
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+declare function ActionButton({ type, label, ...props }: ActionButton): React.JSX.Element;
+declare function ActionLink({ type, label, variant, ...props }: ActionLink): React.JSX.Element;
+export { Banner };
+export type { BannerProps };

package/lib/banner/banner.js

@@ -1,2 +1,80 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js"),r=require("../button/button.js"),o=require("../icons/close-icon.js"),i=require("../icons/banner-icon.js"),c=require("../text-link/text-link.js");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var u=s(t);const d=["id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose"],p=["label"],b=["type","label"],m=["type","label","variant"];function f(t){let{label:l}=t,n=e.objectWithoutProperties(t,b);return u.createElement(r.Button,e.objectSpread2({},n),l)}function y(t){let{label:l,variant:n}=t,a=e.objectWithoutProperties(t,m);return u.createElement(r.Button,{variant:n,render:u.createElement("a",e.objectSpread2({rel:"noopener noreferrer",target:"_blank"},a))},l)}exports.Banner=u.forwardRef((function(t,s){let{id:b,type:m,title:x,description:j,action:E,icon:B,image:g,inlineLinks:v,closeLabel:k,onClose:N}=t,q=e.objectWithoutProperties(t,d);const C=n.useId(),S=n.useId(),P=N?u.createElement(r.IconButton,{exceptionallySetClassName:a.default.closeButton,variant:"quaternary",onClick:N,icon:u.createElement(o.CloseIcon,null),"aria-label":null!=k?k:"Close banner"}):null;return u.createElement(l.Box,e.objectSpread2(e.objectSpread2({},q),{},{ref:s,id:b,display:"flex",flexDirection:"column",justifyContent:"center",role:"status","aria-labelledby":x?C:S,"aria-describedby":x?S:void 0,"aria-live":"polite",tabIndex:0,borderRadius:"full",className:a.default.banner}),g?u.createElement(l.Box,{className:a.default.image},g):null,u.createElement(l.Box,{className:a.default.content,display:"flex",gap:"small",alignItems:"center"},u.createElement(l.Box,{className:a.default.staticContent,display:"flex",gap:"small",flexGrow:1},u.createElement(l.Box,{className:a.default.icon},"neutral"===m?B:u.createElement(i.BannerIcon,{type:m}),P),u.createElement(l.Box,{className:a.default.copy,display:"flex",flexDirection:"column"},x?u.createElement(l.Box,{id:C,className:a.default.title},x):null,u.createElement(l.Box,{id:S,className:[a.default.description,x?a.default.secondary:null]},j,null==v?void 0:v.map((t,l)=>{let{label:n}=t,r=e.objectWithoutProperties(t,p);return u.createElement(u.Fragment,{key:l},u.createElement(c.TextLink,e.objectSpread2(e.objectSpread2({},r),{},{exceptionallySetClassName:a.default.inlineLink}),n),l<v.length-1?u.createElement("span",null," · "):"")})))),E||P?u.createElement(l.Box,{className:a.default.actions,display:"flex",gap:"small"},E?function(e){return"object"==typeof e&&null!==e&&"type"in e&&("button"===e.type||"link"===e.type)}(E)?u.createElement("button"===E.type?f:y,e.objectSpread2({},E)):E:null,P):null))}));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var box = require('../box/box.js');
+var commonHelpers = require('../utils/common-helpers.js');
+var banner_module = require('./banner.module.css.js');
+var button = require('../button/button.js');
+var closeIcon = require('../icons/close-icon.js');
+var bannerIcon = require('../icons/banner-icon.js');
+var textLink = require('../text-link/text-link.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * Type guard to check if the action is an Action object (button or link)
+ */
+function isActionObject(action) {
+    return (typeof action === 'object' &&
+        action !== null &&
+        'type' in action &&
+        (action.type === 'button' || action.type === 'link'));
+}
+var Banner = React__namespace.forwardRef(function Banner(_a, ref) {
+    var id = _a.id, type = _a.type, title = _a.title, description = _a.description, action = _a.action, icon = _a.icon, image = _a.image, inlineLinks = _a.inlineLinks, closeLabel = _a.closeLabel, onClose = _a.onClose, props = tslib.__rest(_a, ["id", "type", "title", "description", "action", "icon", "image", "inlineLinks", "closeLabel", "onClose"]);
+    var titleId = commonHelpers.useId();
+    var descriptionId = commonHelpers.useId();
+    var closeButton = onClose ? (React__namespace.createElement(button.IconButton, { exceptionallySetClassName: banner_module["default"].closeButton, variant: "quaternary", onClick: onClose, icon: React__namespace.createElement(closeIcon.CloseIcon, null), "aria-label": closeLabel !== null && closeLabel !== void 0 ? closeLabel : 'Close banner' })) : null;
+    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { ref: ref, id: id, display: "flex", flexDirection: "column", justifyContent: "center", role: "status", "aria-labelledby": title ? titleId : descriptionId, "aria-describedby": title ? descriptionId : undefined, "aria-live": "polite", tabIndex: 0, borderRadius: "full", className: banner_module["default"].banner }),
+        image ? React__namespace.createElement(box.Box, { className: banner_module["default"].image }, image) : null,
+        React__namespace.createElement(box.Box, { className: banner_module["default"].content, display: "flex", gap: "small", alignItems: "center" },
+            React__namespace.createElement(box.Box, { className: banner_module["default"].staticContent, display: "flex", gap: "small", flexGrow: 1 },
+                React__namespace.createElement(box.Box, { className: banner_module["default"].icon },
+                    type === 'neutral' ? icon : React__namespace.createElement(bannerIcon.BannerIcon, { type: type }),
+                    closeButton),
+                React__namespace.createElement(box.Box, { className: banner_module["default"].copy, display: "flex", flexDirection: "column" },
+                    title ? (React__namespace.createElement(box.Box, { id: titleId, className: banner_module["default"].title }, title)) : null,
+                    React__namespace.createElement(box.Box, { id: descriptionId, className: [banner_module["default"].description, title ? banner_module["default"].secondary : null] },
+                        description, inlineLinks === null || inlineLinks === void 0 ? void 0 :
+                        inlineLinks.map(function (_a, index) {
+                            var label = _a.label, props = tslib.__rest(_a, ["label"]);
+                            return (React__namespace.createElement(React__namespace.Fragment, { key: index },
+                                React__namespace.createElement(textLink.TextLink, tslib.__assign({}, props, { exceptionallySetClassName: banner_module["default"].inlineLink }), label),
+                                index < inlineLinks.length - 1 ? React__namespace.createElement("span", null, " \u00B7 ") : ''));
+                        })))),
+            action || closeButton ? (React__namespace.createElement(box.Box, { className: banner_module["default"].actions, display: "flex", gap: "small" },
+                action ? (isActionObject(action) ? (action.type === 'button' ? (React__namespace.createElement(ActionButton, tslib.__assign({}, action))) : (React__namespace.createElement(ActionLink, tslib.__assign({}, action)))) : (action)) : null,
+                closeButton)) : null)));
+});
+function ActionButton(_a) {
+    _a.type; var label = _a.label, props = tslib.__rest(_a, ["type", "label"]);
+    return React__namespace.createElement(button.Button, tslib.__assign({}, props), label);
+}
+function ActionLink(_a) {
+    _a.type; var label = _a.label, variant = _a.variant, props = tslib.__rest(_a, ["type", "label", "variant"]);
+    return (React__namespace.createElement(button.Button, { variant: variant, render: React__namespace.createElement("a", tslib.__assign({ rel: "noopener noreferrer", target: "_blank" }, props)) }, label));
+}
+
+exports.Banner = Banner;
 //# sourceMappingURL=banner.js.map

package/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\nimport { Button, ButtonProps, IconButton } from '../button'\nimport { CloseIcon } from '../icons/close-icon'\nimport { BannerIcon } from '../icons/banner-icon'\nimport { TextLink } from '../text-link'\n\n/**\n * Represents the type of a banner.\n * 'neutral' accepts a custom icon, the rest do not.\n * @default 'neutral'\n */\nexport type BannerType = 'neutral' | SystemBannerType\n\n/**\n * Predefined system types for banners.\n * Each type has its own preset icon.\n */\nexport type SystemBannerType = 'info' | 'upgrade' | 'experiment' | 'warning' | 'error' | 'success'\n\ntype BaseAction = {\n    variant: 'primary' | 'tertiary'\n    label: string\n} & Pick<ButtonProps, 'loading' | 'disabled'>\ntype ActionButton = BaseAction & { type: 'button' } & Omit<\n        React.ButtonHTMLAttributes<HTMLButtonElement>,\n        'className'\n    >\ntype ActionLink = BaseAction & { type: 'link' } & Omit<\n        React.AnchorHTMLAttributes<HTMLAnchorElement>,\n        'className'\n    >\n/**\n * Represents an action that can be taken from the banner.\n * Can be either a button or a link, sharing common properties from BaseAction.\n */\ntype Action = ActionButton | ActionLink\n\n/**\n * Configuration for inline links within the banner description.\n * Extends TextLink component props with a required label.\n */\ntype InlineLink = { label: string } & React.ComponentProps<typeof TextLink>\n\ntype WithCloseButton = {\n    closeLabel?: string\n    onClose: () => void\n}\ntype WithoutCloseButton = {\n    closeLabel?: never\n    onClose?: never\n}\n/**\n * Controls the close button behavior.\n * If none is provided, the banner will not have a close button.\n */\ntype CloseButton = WithCloseButton | WithoutCloseButton\n\ntype BaseBanner = {\n    id?: string\n    title?: React.ReactNode\n    description: Exclude<React.ReactNode, null | undefined | boolean>\n    action?: Action | React.ReactNode\n    inlineLinks?: InlineLink[]\n} & CloseButton\n\n/**\n * Configuration for neutral banners.\n * Can include either an image, an icon, or neither, but never both.\n */\ntype NeutralBanner = BaseBanner & {\n    type: Extract<BannerType, 'neutral'>\n} & (\n        | { image: React.ReactElement; icon?: never }\n        | { icon: React.ReactElement; image?: never }\n        | { image?: never; icon?: never }\n    )\n\n/**\n * Configuration for system banners.\n * Cannot include custom images or icons as they use preset ones.\n */\ntype SystemBanner = BaseBanner & {\n    type: SystemBannerType\n    image?: never\n    icon?: never\n}\n\ntype BannerProps = NeutralBanner | SystemBanner\n\n/**\n * Type guard to check if the action is an Action object (button or link)\n */\nfunction isActionObject(action: Action | React.ReactNode): action is Action {\n    return (\n        typeof action === 'object' &&\n        action !== null &&\n        'type' in action &&\n        (action.type === 'button' || action.type === 'link')\n    )\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    {\n        id,\n        type,\n        title,\n        description,\n        action,\n        icon,\n        image,\n        inlineLinks,\n        closeLabel,\n        onClose,\n        ...props\n    }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n\n    const closeButton = onClose ? (\n        <IconButton\n            exceptionallySetClassName={styles.closeButton}\n            variant=\"quaternary\"\n            onClick={onClose}\n            icon={<CloseIcon />}\n            aria-label={closeLabel ?? 'Close banner'}\n        />\n    ) : null\n\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            display=\"flex\"\n            flexDirection=\"column\"\n            justifyContent=\"center\"\n            role=\"status\"\n            aria-labelledby={title ? titleId : descriptionId}\n            aria-describedby={title ? descriptionId : undefined}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"full\"\n            className={styles.banner}\n        >\n            {image ? <Box className={styles.image}>{image}</Box> : null}\n\n            <Box className={styles.content} display=\"flex\" gap=\"small\" alignItems=\"center\">\n                <Box className={styles.staticContent} display=\"flex\" gap=\"small\" flexGrow={1}>\n                    <Box className={styles.icon}>\n                        {type === 'neutral' ? icon : <BannerIcon type={type} />}\n                        {closeButton}\n                    </Box>\n\n                    <Box className={styles.copy} display=\"flex\" flexDirection=\"column\">\n                        {title ? (\n                            <Box id={titleId} className={styles.title}>\n                                {title}\n                            </Box>\n                        ) : null}\n                        <Box\n                            id={descriptionId}\n                            className={[styles.description, title ? styles.secondary : null]}\n                        >\n                            {description}\n                            {inlineLinks?.map(({ label, ...props }, index) => {\n                                return (\n                                    <React.Fragment key={index}>\n                                        <TextLink\n                                            {...props}\n                                            exceptionallySetClassName={styles.inlineLink}\n                                        >\n                                            {label}\n                                        </TextLink>\n                                        {index < inlineLinks.length - 1 ? <span> · </span> : ''}\n                                    </React.Fragment>\n                                )\n                            })}\n                        </Box>\n                    </Box>\n                </Box>\n\n                {action || closeButton ? (\n                    <Box className={styles.actions} display=\"flex\" gap=\"small\">\n                        {action ? (\n                            isActionObject(action) ? (\n                                action.type === 'button' ? (\n                                    <ActionButton {...action} />\n                                ) : (\n                                    <ActionLink {...action} />\n                                )\n                            ) : (\n                                action\n                            )\n                        ) : null}\n                        {closeButton}\n                    </Box>\n                ) : null}\n            </Box>\n        </Box>\n    )\n})\n\nfunction ActionButton({ type, label, ...props }: ActionButton) {\n    return <Button {...props}>{label}</Button>\n}\n\nfunction ActionLink({ type, label, variant, ...props }: ActionLink) {\n    return (\n        <Button\n            variant={variant}\n            render={<a rel=\"noopener noreferrer\" target=\"_blank\" {...props} />}\n        >\n            {label}\n        </Button>\n    )\n}\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["ActionButton","_ref3","label","props","_objectWithoutProperties","objectWithoutProperties","_excluded3","React","Button","ActionLink","_ref4","variant","_excluded4","createElement","render","_objectSpread","rel","target","forwardRef","ref","id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose","_ref","_excluded","titleId","useId","descriptionId","closeButton","IconButton","exceptionallySetClassName","styles","onClick","CloseIcon","aria-label","Box","display","flexDirection","justifyContent","role","aria-describedby","undefined","aria-live","tabIndex","borderRadius","className","banner","content","gap","alignItems","staticContent","flexGrow","BannerIcon","copy","secondary","map","index","_ref2","_excluded2","Fragment","key","TextLink","inlineLink","length","actions","isActionObject","objectSpread2"],"mappings":"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"}
+{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":[null],"names":["React","__rest","useId","IconButton","styles","CloseIcon","Box","__assign","BannerIcon","TextLink","Button"],"mappings":"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"}

package/lib/banner/banner.module.css.js

@@ -1,2 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={banner:"e1b2ef74",image:"_8d3ff024",content:"_1705b6ee",description:"_99daf106",title:"_9ad57971",secondary:"_59ea31f7",icon:"b1ae548b",closeButton:"c2e4ec08",copy:"cd270dad",inlineLink:"cbbd2929",staticContent:"d3bd2674",actions:"_1a63a5e1"};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_afa80466 = {"banner":"e1b2ef74","image":"_8d3ff024","title":"_9ad57971","description":"_99daf106","secondary":"_59ea31f7","icon":"b1ae548b","closeButton":"c2e4ec08","copy":"cd270dad","inlineLink":"cbbd2929","staticContent":"d3bd2674","actions":"_1a63a5e1","content":"_1705b6ee"};
+
+exports["default"] = modules_afa80466;
 //# sourceMappingURL=banner.module.css.js.map

package/lib/banner/banner.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"banner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/banner/index.d.ts

@@ -1,2 +1,2 @@
-export { Banner } from './banner';
-export type { BannerProps } from './banner';
+export { Banner } from './banner';
+export type { BannerProps } from './banner';

package/lib/banner/story-promo-image.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-export declare function PromoImage({ theme }: {
-    theme?: 'light' | 'dark';
-}): React.JSX.Element;
+import * as React from 'react';
+export declare function PromoImage({ theme }: {
+    theme?: 'light' | 'dark';
+}): React.JSX.Element;

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

@@ -1,139 +1,139 @@
-import * as React from 'react';
-import { BoxProps } from '../box';
-import type { WithEnhancedClassName } from '../utils/common-types';
-type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
-type FieldMessageProps = {
-    id: string;
-    children: React.ReactNode;
-    tone: FieldTone;
-};
-declare function FieldMessage({ id, children, tone }: FieldMessageProps): React.JSX.Element;
-type ChildrenRenderProps = {
-    id: string;
-    value?: React.InputHTMLAttributes<unknown>['value'];
-    'aria-describedby'?: string;
-    'aria-invalid'?: true;
-    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-    characterCountElement?: React.ReactNode | null;
-};
-type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
-type BaseFieldVariant = 'default' | 'bordered';
-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;
-};
-export type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {
-    /**
-     * The main label for this field element.
-     *
-     * This prop is not optional. Consumers of field components must be explicit about not
-     * wanting a label by passing `label=""` or `label={null}`. In those situations, consumers
-     * should make sure that fields are properly labelled semantically by other means (e.g using
-     * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).
-     *
-     * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
-     *
-     * @see BaseFieldProps['auxiliaryLabel']
-     */
-    label: React.ReactNode;
-    /**
-     * The initial value for this field element.
-     *
-     * This prop is used to calculate the character count for the initial value, and is then
-     * passed to the underlying child element.
-     */
-    value?: React.InputHTMLAttributes<unknown>['value'];
-    /**
-     * An optional extra element to be placed to the right of the main label.
-     *
-     * This extra element is not included in the accessible name of the field element. Its only
-     * purpose is either visual, or functional (if you include interactive elements in it).
-     *
-     * @see BaseFieldProps['label']
-     *
-     * @deprecated The usage of this element is discouraged given that it was removed from the
-     * latest form field spec revision.
-     */
-    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.
-     *
-     * 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 BaseFieldProps['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 BaseFieldProps['message']
-     * @see BaseFieldProps['hint']
-     */
-    tone?: FieldTone;
-    /**
-     * The maximum width that the input field can expand to.
-     */
-    maxWidth?: BoxProps['maxWidth'];
-    /**
-     * The maximum number of characters that the input field can accept.
-     * When this limit is reached, the input field will not accept any more characters.
-     * The counter element will turn red when the number of characters is within 10 of the maximum limit.
-     */
-    maxLength?: number;
-    /**
-     * Used internally by components composed using `BaseField`. It is not exposed as part of
-     * the public props of such components.
-     */
-    children: (props: ChildrenRenderProps) => React.ReactNode;
-    /**
-     * The position of the character count element.
-     * It can be shown below the field or inline with the field.
-     *
-     * @default 'below'
-     */
-    characterCountPosition?: 'below' | 'inline' | 'hidden';
-} & ({
-    supportsStartAndEndSlots?: false;
-    endSlot?: never;
-    endSlotPosition?: never;
-} | {
-    supportsStartAndEndSlots: true;
-    endSlot?: React.ReactElement | string | number;
-    /**
-     * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),
-     * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot
-     * will be placed to the side of both the input field and the label.
-     */
-    endSlotPosition?: 'bottom' | 'fullHeight';
-});
-type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'fieldRef' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
-/**
- * BaseField is a base component that provides a consistent structure for form fields.
- */
-declare function BaseField({ variant, label, value, auxiliaryLabel, message, tone, className, children, maxWidth, maxLength, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, characterCountPosition, endSlot, endSlotPosition, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
-export { BaseField, FieldMessage };
-export type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps };
+import * as React from 'react';
+import { BoxProps } from '../box';
+import type { WithEnhancedClassName } from '../utils/common-types';
+type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
+type FieldMessageProps = {
+    id: string;
+    children: React.ReactNode;
+    tone: FieldTone;
+};
+declare function FieldMessage({ id, children, tone }: FieldMessageProps): React.JSX.Element;
+type ChildrenRenderProps = {
+    id: string;
+    value?: React.InputHTMLAttributes<unknown>['value'];
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    characterCountElement?: React.ReactNode | null;
+};
+type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
+type BaseFieldVariant = 'default' | 'bordered';
+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;
+};
+export type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {
+    /**
+     * The main label for this field element.
+     *
+     * This prop is not optional. Consumers of field components must be explicit about not
+     * wanting a label by passing `label=""` or `label={null}`. In those situations, consumers
+     * should make sure that fields are properly labelled semantically by other means (e.g using
+     * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).
+     *
+     * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
+     *
+     * @see BaseFieldProps['auxiliaryLabel']
+     */
+    label: React.ReactNode;
+    /**
+     * The initial value for this field element.
+     *
+     * This prop is used to calculate the character count for the initial value, and is then
+     * passed to the underlying child element.
+     */
+    value?: React.InputHTMLAttributes<unknown>['value'];
+    /**
+     * An optional extra element to be placed to the right of the main label.
+     *
+     * This extra element is not included in the accessible name of the field element. Its only
+     * purpose is either visual, or functional (if you include interactive elements in it).
+     *
+     * @see BaseFieldProps['label']
+     *
+     * @deprecated The usage of this element is discouraged given that it was removed from the
+     * latest form field spec revision.
+     */
+    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.
+     *
+     * 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 BaseFieldProps['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 BaseFieldProps['message']
+     * @see BaseFieldProps['hint']
+     */
+    tone?: FieldTone;
+    /**
+     * The maximum width that the input field can expand to.
+     */
+    maxWidth?: BoxProps['maxWidth'];
+    /**
+     * The maximum number of characters that the input field can accept.
+     * When this limit is reached, the input field will not accept any more characters.
+     * The counter element will turn red when the number of characters is within 10 of the maximum limit.
+     */
+    maxLength?: number;
+    /**
+     * Used internally by components composed using `BaseField`. It is not exposed as part of
+     * the public props of such components.
+     */
+    children: (props: ChildrenRenderProps) => React.ReactNode;
+    /**
+     * The position of the character count element.
+     * It can be shown below the field or inline with the field.
+     *
+     * @default 'below'
+     */
+    characterCountPosition?: 'below' | 'inline' | 'hidden';
+} & ({
+    supportsStartAndEndSlots?: false;
+    endSlot?: never;
+    endSlotPosition?: never;
+} | {
+    supportsStartAndEndSlots: true;
+    endSlot?: React.ReactElement | string | number;
+    /**
+     * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),
+     * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot
+     * will be placed to the side of both the input field and the label.
+     */
+    endSlotPosition?: 'bottom' | 'fullHeight';
+});
+type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'fieldRef' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
+/**
+ * BaseField is a base component that provides a consistent structure for form fields.
+ */
+declare function BaseField({ variant, label, value, auxiliaryLabel, message, tone, className, children, maxWidth, maxLength, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, characterCountPosition, endSlot, endSlotPosition, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
+export { BaseField, FieldMessage };
+export type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps };