@doist/reactist 9.2.0-beta.8 → 10.0.0-beta.12

package/lib/new-components/button/button.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { BaseButtonProps } from '../base-button';
+declare type NativeButtonProps = Omit<React.AllHTMLAttributes<HTMLButtonElement>, 'aria-disabled' | 'className' | keyof BaseButtonProps>;
+export declare type ButtonProps = NativeButtonProps & BaseButtonProps & {
+    type?: 'button' | 'submit' | 'reset';
+    exceptionallySetClassName?: string;
+};
+/**
+ * A semantic button that also looks like a button, and provides all the necessary visual variants.
+ * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
+ *
+ * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see ButtonLink
+ */
+export declare const Button: React.ForwardRefExoticComponent<(Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    variant: "primary" | "secondary" | "tertiary" | "quaternary";
+    tone?: "normal" | "destructive" | undefined;
+    size?: "normal" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
+} & {
+    icon: React.ReactChild;
+    'aria-label': string;
+    children?: undefined;
+    startIcon?: undefined;
+    endIcon?: undefined;
+} & {
+    type?: "button" | "submit" | "reset" | undefined;
+    exceptionallySetClassName?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>) | (Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    variant: "primary" | "secondary" | "tertiary" | "quaternary";
+    tone?: "normal" | "destructive" | undefined;
+    size?: "normal" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
+} & {
+    children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal;
+    startIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    endIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    icon?: undefined;
+} & {
+    type?: "button" | "submit" | "reset" | undefined;
+    exceptionallySetClassName?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>)>;
+export {};

package/lib/new-components/button/button.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js"),o=["variant","tone","size","type","disabled","exceptionallySetClassName"];exports.Button=t.forwardRef((function(r,s){var i=r.variant,n=r.tone,l=void 0===n?"normal":n,u=r.size,b=void 0===u?"normal":u,d=r.type,p=void 0===d?"button":d,v=r.disabled,c=void 0!==v&&v,y=r.exceptionallySetClassName,m=e.objectWithoutPropertiesLoose(r,o);return t.createElement(a.BaseButton,Object.assign({},m,{as:"button",ref:s,variant:i,tone:l,size:b,type:p,disabled:c,exceptionallySetClassName:y}))}));
+//# sourceMappingURL=button.js.map

package/lib/new-components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"wRAuBsBA,cAAiD,WAUnEC,OARIC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,gBACAC,IAAAA,0BACGC,6CAKHR,gBAACS,8BACOD,GACJE,GAAG,SACHT,IAAKA,EACLC,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,KAAMA,EACNC,SAAUA,EACVC,0BAA2BA"}

package/lib/new-components/button/button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/lib/new-components/button-link/button-link-story-wrapper.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ButtonLinkProps } from './button-link';
+declare function ButtonLinkStoryWrapper(props: ButtonLinkProps): JSX.Element;
+declare namespace ButtonLinkStoryWrapper {
+    var displayName: string;
+}
+export { ButtonLinkStoryWrapper as ButtonLink };

package/lib/new-components/button-link/button-link.d.ts

@@ -1,9 +1,15 @@
-import * as React from 'react';
+/// <reference types="react" />
+import type { BaseButtonProps } from '../base-button';
 import type { OpenInNewTab } from '../common-types';
-interface ButtonLinkProps extends OpenInNewTab {
-    variant: 'primary' | 'secondary' | 'danger';
-    size?: 'default' | 'small' | 'large';
-}
-declare const ButtonLink: import("../type-helpers").ForwardRefComponentWithAs<ButtonLinkProps, React.ElementType<any>>;
-export { ButtonLink };
-export type { ButtonLinkProps };
+declare type NativeLinkProps = Omit<JSX.IntrinsicElements['a'], 'aria-disabled' | 'target' | 'rel' | 'className'>;
+export declare type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab;
+/**
+ * A semantic link that looks like a button, exactly matching the `Button` component in all visual
+ * aspects.
+ *
+ *🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see Button
+ */
+export declare const ButtonLink: import("../../utils/polymorphism").PolymorphicComponent<"a", ButtonLinkProps, "obfuscateClassName">;
+export {};

package/lib/new-components/button-link/button-link.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../type-helpers.js"),n=require("../box/box.js"),o=require("./button-link.module.css.js");exports.ButtonLink=r.forwardRefWithAs((function(r,i){var a=r.component,s=void 0===a?"a":a,l=r.variant,u=r.size,c=void 0===u?"default":u,p=r.openInNewTab,b=void 0!==p&&p,d=e.objectWithoutPropertiesLoose(r,["component","variant","size","openInNewTab"]);return t.createElement(n.Box,Object.assign({},d,{component:s,display:"inlineFlex",alignItems:"center",justifyContent:"center",className:[o.default.container,"reactist_button",l?"reactist_button--"+l:null,"default"!==c?"reactist_button--"+c:null],ref:i,target:b?"_blank":void 0,rel:b?"noopener noreferrer":void 0}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../utils/polymorphism.js"),r=require("../base-button/base-button.js"),a=["as","variant","tone","size","exceptionallySetClassName","openInNewTab"];exports.ButtonLink=o.polymorphicComponent((function(o,n){var i=o.as,s=void 0===i?"a":i,l=o.variant,u=o.tone,p=void 0===u?"normal":u,v=o.size,b=void 0===v?"normal":v,c=o.exceptionallySetClassName,m=o.openInNewTab,d=void 0!==m&&m,j=e.objectWithoutPropertiesLoose(o,a);return t.createElement(r.BaseButton,Object.assign({},j,{as:s,ref:n,variant:l,tone:p,size:b,exceptionallySetClassName:c,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0}))}));
 //# sourceMappingURL=button-link.js.map

package/lib/new-components/button-link/button-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { forwardRefWithAs } from '../type-helpers'\nimport type { OpenInNewTab } from '../common-types'\n\nimport styles from './button-link.module.css'\n\ninterface ButtonLinkProps extends OpenInNewTab {\n    variant: 'primary' | 'secondary' | 'danger'\n    size?: 'default' | 'small' | 'large'\n}\n\nconst ButtonLink = forwardRefWithAs<ButtonLinkProps>(function ButtonLink(\n    { component = 'a', variant, size = 'default', openInNewTab = false, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            component={component}\n            display=\"inlineFlex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={[\n                styles.container,\n                'reactist_button',\n                variant ? `reactist_button--${variant}` : null,\n                size !== 'default' ? `reactist_button--${size}` : null,\n            ]}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { ButtonLink }\nexport type { ButtonLinkProps }\n"],"names":["forwardRefWithAs","ref","component","variant","size","openInNewTab","props","React","Box","display","alignItems","justifyContent","className","styles","container","target","undefined","rel"],"mappings":"2QAYmBA,oBAAkC,WAEjDC,WADEC,UAAAA,aAAY,MAAKC,IAAAA,YAASC,KAAAA,aAAO,gBAAWC,aAAAA,gBAAyBC,yFAInEC,gBAACC,uBACOF,GACJJ,UAAWA,EACXO,QAAQ,aACRC,WAAW,SACXC,eAAe,SACfC,UAAW,CACPC,UAAOC,UACP,kBACAX,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,MAEtDH,IAAKA,EACLc,OAAQV,EAAe,cAAWW,EAClCC,IAAKZ,EAAe,2BAAwBW"}
+{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../common-types'\n\ntype NativeLinkProps = Omit<\n    JSX.IntrinsicElements['a'],\n    'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n *🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n    {\n        as = 'a',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        exceptionallySetClassName,\n        openInNewTab = false,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as={as}\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            exceptionallySetClassName={exceptionallySetClassName}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n"],"names":["polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":"uUAqB0BA,wBAA2C,WAUjEC,WARIC,GAAAA,aAAK,MACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,WACPC,IAAAA,8BACAC,aAAAA,gBACGC,6CAKHC,gBAACC,8BACOF,GACJN,GAAIA,EACJD,IAAKA,EACLE,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,0BAA2BA,EAC3BK,OAAQJ,EAAe,cAAWK,EAClCC,IAAKN,EAAe,2BAAwBK"}

package/lib/new-components/button-link/button-link.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-declare type CheckboxFieldProps = Omit<JSX.IntrinsicElements['input'], 'type'> & {
+import * as React from 'react';
+declare type CheckboxFieldProps = Omit<JSX.IntrinsicElements['input'], 'type' | 'className'> & {
     label?: string;
     indeterminate?: boolean;
 };
-declare function CheckboxField({ label, className, style, checked, indeterminate, ...props }: CheckboxFieldProps): JSX.Element;
+declare const CheckboxField: React.ForwardRefExoticComponent<Pick<CheckboxFieldProps, "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
 export { CheckboxField };
 export type { CheckboxFieldProps };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),r=require("../box/box.js"),a=require("reakit/VisuallyHidden"),t=require("./checkbox-icon.js"),c=require("./checkbox-field.module.css.js");exports.CheckboxField=function(n){var i,s=n.label,d=n.className,o=n.style,u=n.checked,b=n.indeterminate,m=void 0!==b&&b,h=e.objectWithoutPropertiesLoose(n,["label","className","style","checked","indeterminate"]);s||h["aria-label"]||h["aria-labelledby"]||console.warn("A Checkbox needs a label");var k=l.useRef(null);return l.useEffect((function(){k.current&&(k.current.indeterminate=m)}),[m]),l.createElement(r.Box,{component:"label",display:"flex",alignItems:"center",className:[d,c.default.container,(i={},i[c.default.checked]=u,i),"focus-marker-enabled-within"],style:o},l.createElement(a.VisuallyHidden,null,l.createElement("input",Object.assign({},h,{ref:k,type:"checkbox",checked:u}))),l.createElement(t.CheckboxIcon,{"aria-hidden":!0,checked:u,indeterminate:m,disabled:h.disabled}),s?l.createElement("span",null,s):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=require("../box/box.js"),t=require("../hidden-visually/hidden-visually.js"),a=require("../text/text.js"),r=require("reakit-utils"),i=require("./checkbox-icon.js"),c=require("./checkbox-field.module.css.js"),d=["label","disabled","indeterminate","defaultChecked","onChange"];exports.CheckboxField=l.forwardRef((function(o,u){var s,b,h,f=o.label,k=o.disabled,x=o.indeterminate,m=o.defaultChecked,p=o.onChange,v=e.objectWithoutPropertiesLoose(o,d);"boolean"!=typeof x||"boolean"==typeof v.checked||(console.warn("Cannot use indeterminate on an uncontrolled checkbox"),x=void 0),f||v["aria-label"]||v["aria-labelledby"]||console.warn("A Checkbox needs a label");var y=l.useState(null!==(s=null!==(b=v.checked)&&void 0!==b?b:m)&&void 0!==s&&s),j=y[1],C=null!==(h=v.checked)&&void 0!==h?h:y[0],q=l.useRef(null),g=r.useForkRef(q,u);return l.useEffect((function(){q.current&&"boolean"==typeof x&&(q.current.indeterminate=x)}),[x]),l.createElement(n.Box,{as:"label",display:"flex",alignItems:"center",className:[c.default.container,k?c.default.disabled:null,C?c.default.checked:null,"focus-marker-enabled-within"]},l.createElement(t.HiddenVisually,null,l.createElement("input",Object.assign({},v,{ref:g,type:"checkbox",checked:C,disabled:k,onChange:function(e){null==p||p(e),e.defaultPrevented||j(e.currentTarget.checked)}}))),l.createElement(i.CheckboxIcon,{"aria-hidden":!0,checked:C,indeterminate:x,disabled:k}),f?l.createElement(a.Text,null,f):null)}));
 //# sourceMappingURL=checkbox-field.js.map

package/lib/new-components/checkbox-field/checkbox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { VisuallyHidden } from 'reakit/VisuallyHidden'\nimport { Box } from '../box'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<JSX.IntrinsicElements['input'], 'type'> & {\n    label?: string\n    indeterminate?: boolean\n}\n\nfunction CheckboxField({\n    label,\n    className,\n    style,\n    checked,\n    indeterminate = false,\n    ...props\n}: CheckboxFieldProps) {\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null)\n    React.useEffect(\n        function setIndeterminate() {\n            if (checkboxRef.current) {\n                checkboxRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            component=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                className,\n                styles.container,\n                { [styles.checked]: checked },\n                'focus-marker-enabled-within',\n            ]}\n            style={style}\n        >\n            <VisuallyHidden>\n                <input {...props} ref={checkboxRef} type=\"checkbox\" checked={checked} />\n            </VisuallyHidden>\n            <CheckboxIcon\n                aria-hidden\n                checked={checked}\n                indeterminate={indeterminate}\n                disabled={props.disabled}\n            />\n            {label ? <span>{label}</span> : null}\n        </Box>\n    )\n}\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["label","className","style","checked","indeterminate","props","console","warn","checkboxRef","React","current","Box","component","display","alignItems","styles","container","VisuallyHidden","ref","type","CheckboxIcon","disabled"],"mappings":"oTAYA,kBACIA,IAAAA,MACAC,IAAAA,UACAC,IAAAA,MACAC,IAAAA,YACAC,cAAAA,gBACGC,4FAEEL,GAAUK,EAAM,eAAkBA,EAAM,oBAEzCC,QAAQC,KAAK,gCAGXC,EAAcC,SAA+B,aACnDA,aACI,WACQD,EAAYE,UACZF,EAAYE,QAAQN,cAAgBA,KAG5C,CAACA,IAIDK,gBAACE,OACGC,UAAU,QACVC,QAAQ,OACRC,WAAW,SACXb,UAAW,CACPA,EACAc,UAAOC,kBACJD,UAAOZ,SAAUA,KACpB,+BAEJD,MAAOA,GAEPO,gBAACQ,sBACGR,yCAAWJ,GAAOa,IAAKV,EAAaW,KAAK,WAAWhB,QAASA,MAEjEM,gBAACW,iCAEGjB,QAASA,EACTC,cAAeA,EACfiB,SAAUhB,EAAMgB,WAEnBrB,EAAQS,4BAAOT,GAAgB"}
+{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'reakit-utils'\nimport { HiddenVisually } from '../hidden-visually'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<JSX.IntrinsicElements['input'], 'type' | 'className'> & {\n    label?: string\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                'focus-marker-enabled-within',\n            ]}\n        >\n            <HiddenVisually>\n                <input\n                    {...props}\n                    ref={combinedRef}\n                    type=\"checkbox\"\n                    checked={isChecked}\n                    disabled={disabled}\n                    onChange={(event) => {\n                        onChange?.(event)\n                        if (!event.defaultPrevented) {\n                            setChecked(event.currentTarget.checked)\n                        }\n                    }}\n                />\n            </HiddenVisually>\n            <CheckboxIcon\n                aria-hidden\n                checked={isChecked}\n                indeterminate={indeterminate}\n                disabled={disabled}\n            />\n            {label ? <Text>{label}</Text> : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","HiddenVisually","type","event","defaultPrevented","currentTarget","CheckboxIcon","Text"],"mappings":"8bAcsBA,cAAuD,WAEzEC,aADEC,IAAAA,MAAOC,IAAAA,SAAUC,IAAAA,cAAeC,IAAAA,eAAgBC,IAAAA,SAAaC,sCAIlC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfT,GAAUK,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,kCAGkBV,+BAAeO,EAAMC,uBAAWH,mBAA9CO,OACfC,YAAYN,EAAMC,4BAElBM,EAAcd,SAA+B,MAC7Ce,EAAcC,aAAWF,EAAab,UAC5CD,aACI,WACQc,EAAYG,SAAoC,kBAAlBb,IAC9BU,EAAYG,QAAQb,cAAgBA,KAG5C,CAACA,IAIDJ,gBAACkB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPrB,EAAWoB,UAAOpB,SAAW,KAC7BU,EAAYU,UAAOf,QAAU,KAC7B,gCAGJR,gBAACyB,sBACGzB,yCACQO,GACJN,IAAKc,EACLW,KAAK,WACLlB,QAASK,EACTV,SAAUA,EACVG,SAAU,SAACqB,GACPrB,MAAAA,GAAAA,EAAWqB,GACNA,EAAMC,kBACPhB,EAAWe,EAAME,cAAcrB,cAK/CR,gBAAC8B,iCAEGtB,QAASK,EACTT,cAAeA,EACfD,SAAUA,IAEbD,EAAQF,gBAAC+B,YAAM7B,GAAgB"}

package/lib/new-components/checkbox-field/checkbox-field.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_6ba70fbf",checked:"_13189b71"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"f9e0a1b8",disabled:"_01411889",checked:"ffdfd8fb"};
 //# sourceMappingURL=checkbox-field.module.css.js.map

package/lib/new-components/checkbox-field/checkbox-field.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/checkbox-field/checkbox-icon.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t={checked:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z",unchecked:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z",mixed:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z",filled:"M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z"};exports.CheckboxIcon=function(i){var r,d=i.checked,l=i.indeterminate,c=i.disabled,n=e.objectWithoutPropertiesLoose(i,["checked","indeterminate","disabled"]),h=(r={checked:d,indeterminate:l,disabled:c}).indeterminate?"mixed":r.checked?"checked":r.disabled?"filled":"unchecked";return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},n),a.createElement("path",{fill:"currentColor",fillRule:"nonzero",d:t[h]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=["checked","indeterminate","disabled"],i={checked:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z",unchecked:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z",mixed:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z",filled:"M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z"};exports.CheckboxIcon=function(r){var d,l=r.checked,c=r.indeterminate,n=r.disabled,h=e.objectWithoutPropertiesLoose(r,t),o=(d={checked:l,indeterminate:c,disabled:n}).indeterminate?"mixed":d.checked?"checked":d.disabled?"filled":"unchecked";return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},h),a.createElement("path",{fill:"currentColor",fillRule:"nonzero",d:i[o]}))};
 //# sourceMappingURL=checkbox-icon.js.map

package/lib/new-components/checkbox-field/checkbox-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-icon.js","sources":["../../../src/new-components/checkbox-field/checkbox-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst svgPath = {\n    checked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',\n    unchecked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',\n    mixed:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',\n    filled:\n        'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',\n} as const\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n    checked?: boolean\n    indeterminate?: boolean\n    disabled?: boolean\n}\n\nfunction getPathKey({ checked, indeterminate, disabled }: Props): keyof typeof svgPath {\n    if (indeterminate) {\n        return 'mixed' // indeterminate, when true, overrides the checked state\n    }\n\n    if (checked) {\n        return 'checked'\n    }\n\n    // We only used 'filled' when unchecked AND disabled, because the default unchecked icon\n    // is not enough to convey the disabled state with opacity alone. For all other cases\n    // above, when disabled, we use the same icon the corresponds to that state, and the\n    // opacity conveys the fact that the checkbox is disabled.\n    // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390\n    if (disabled) {\n        return 'filled'\n    }\n\n    return 'unchecked'\n}\n\nfunction CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props) {\n    const pathKey = getPathKey({ checked, indeterminate, disabled })\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path fill=\"currentColor\" fillRule=\"nonzero\" d={svgPath[pathKey]} />\n        </svg>\n    )\n}\n\nexport { CheckboxIcon }\n"],"names":["svgPath","checked","unchecked","mixed","filled","indeterminate","disabled","props","pathKey","React","xmlns","width","height","viewBox","fill","fillRule","d"],"mappings":"oJAEMA,EAAU,CACZC,QACI,4LACJC,UACI,kJACJC,MACI,iHACJC,OACI,gJA8BR,kBAAwBH,IAAAA,QAASI,IAAAA,cAAeC,IAAAA,SAAaC,2EACnDC,KAAqB,CAAEP,QAAAA,EAASI,cAAAA,EAAeC,SAAAA,IAtB1BD,cAEhB,UAFOJ,QAMP,YAN+BK,SAe/B,SAGJ,mBAMHG,qCACIC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,aACJN,GAEJE,wBAAMK,KAAK,eAAeC,SAAS,UAAUC,EAAGhB,EAAQQ"}
+{"version":3,"file":"checkbox-icon.js","sources":["../../../src/new-components/checkbox-field/checkbox-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst svgPath = {\n    checked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',\n    unchecked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',\n    mixed:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',\n    filled:\n        'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',\n} as const\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n    checked?: boolean\n    indeterminate?: boolean\n    disabled?: boolean\n}\n\nfunction getPathKey({ checked, indeterminate, disabled }: Props): keyof typeof svgPath {\n    if (indeterminate) {\n        return 'mixed' // indeterminate, when true, overrides the checked state\n    }\n\n    if (checked) {\n        return 'checked'\n    }\n\n    // We only used 'filled' when unchecked AND disabled, because the default unchecked icon\n    // is not enough to convey the disabled state with opacity alone. For all other cases\n    // above, when disabled, we use the same icon the corresponds to that state, and the\n    // opacity conveys the fact that the checkbox is disabled.\n    // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390\n    if (disabled) {\n        return 'filled'\n    }\n\n    return 'unchecked'\n}\n\nfunction CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props) {\n    const pathKey = getPathKey({ checked, indeterminate, disabled })\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path fill=\"currentColor\" fillRule=\"nonzero\" d={svgPath[pathKey]} />\n        </svg>\n    )\n}\n\nexport { CheckboxIcon }\n"],"names":["svgPath","checked","unchecked","mixed","filled","indeterminate","disabled","props","pathKey","React","xmlns","width","height","viewBox","fill","fillRule","d"],"mappings":"6LAEMA,EAAU,CACZC,QACI,4LACJC,UACI,kJACJC,MACI,iHACJC,OACI,gJA8BR,kBAAwBH,IAAAA,QAASI,IAAAA,cAAeC,IAAAA,SAAaC,sCACnDC,KAAqB,CAAEP,QAAAA,EAASI,cAAAA,EAAeC,SAAAA,IAtB1BD,cAEhB,UAFOJ,QAMP,YAN+BK,SAe/B,SAGJ,mBAMHG,qCACIC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,aACJN,GAEJE,wBAAMK,KAAK,eAAeC,SAAS,UAAUC,EAAGhB,EAAQQ"}

package/lib/new-components/columns/columns.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props';
 import type { Space } from '../common-types';
 import type { ReusableBoxProps } from '../box';
@@ -6,16 +5,16 @@ declare type ColumnWidth = 'auto' | 'content' | '1/2' | '1/3' | '2/3' | '1/4' |
 interface ColumnProps {
     width?: ColumnWidth;
 }
-declare const Column: import("../type-helpers").ForwardRefComponentWithAs<ColumnProps, React.ElementType<any>>;
+declare const Column: import("../../utils/polymorphism").PolymorphicComponent<"div", ColumnProps, "obfuscateClassName">;
 declare type ColumnsHorizontalAlignment = 'left' | 'center' | 'right';
-declare type ColumnsVerticalAlignment = 'top' | 'center' | 'bottom';
-declare type ColumnsCollapseBelow = ResponsiveBreakpoints;
+declare type ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline';
+declare type ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>;
 interface ColumnsProps extends ReusableBoxProps {
     space?: ResponsiveProp<Space>;
     align?: ResponsiveProp<ColumnsHorizontalAlignment>;
     alignY?: ResponsiveProp<ColumnsVerticalAlignment>;
     collapseBelow?: ResponsiveBreakpoints;
 }
-declare const Columns: import("../type-helpers").ForwardRefComponentWithAs<ColumnsProps, React.ElementType<any>>;
+declare const Columns: import("../../utils/polymorphism").PolymorphicComponent<"div", ColumnsProps, "obfuscateClassName">;
 export type { ColumnProps, ColumnsProps, ColumnWidth, ColumnsCollapseBelow, ColumnsHorizontalAlignment, ColumnsVerticalAlignment, };
 export { Column, Columns };

package/lib/new-components/columns/columns.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../type-helpers.js"),o=require("../responsive-props.js"),l=require("../box/box.js"),n=require("./columns.module.css.js"),s=r.forwardRefWithAs((function(r,s){var i=r.width,a=void 0===i?"auto":i,c=r.children,u=e.objectWithoutPropertiesLoose(r,["component","width","children"]);return t.createElement(l.Box,Object.assign({className:[n.default.column,"content"!==a?o.getClassNames(n.default,"columnWidth",a.replace("/","-")):null],minWidth:0,width:"content"!==a?"full":void 0,flexShrink:"content"===a?0:void 0,ref:s},u),c)})),i=r.forwardRefWithAs((function(r,s){var i=r.space,a=r.align,c=r.alignY,u=r.collapseBelow,p=r.children,d=e.objectWithoutPropertiesLoose(r,["space","align","alignY","collapseBelow","children"]);return t.createElement(l.Box,Object.assign({},d,{className:o.getClassNames(n.default,"space",i),flexDirection:"desktop"===u?["column","column","row"]:"tablet"===u?["column","row"]:"row",display:"flex",alignItems:o.mapResponsiveProp(c,(function(e){return"top"===e?"flexStart":"bottom"===e?"flexEnd":"center"})),justifyContent:o.mapResponsiveProp(a,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":"center"})),ref:s}),p)}));exports.Column=s,exports.Columns=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../../utils/polymorphism.js"),o=require("../responsive-props.js"),r=require("../box/box.js"),s=require("./columns.module.css.js"),i=["width","children","exceptionallySetClassName"],n=["space","align","alignY","collapseBelow","children","exceptionallySetClassName"],a=l.polymorphicComponent((function(l,n){var a=l.width,c=void 0===a?"auto":a,p=l.children,u=l.exceptionallySetClassName,m=e.objectWithoutPropertiesLoose(l,i);return t.createElement(r.Box,Object.assign({},m,{className:[u,s.default.column,"content"!==c?o.getClassNames(s.default,"columnWidth",c.replace("/","-")):null],minWidth:0,width:"content"!==c?"full":void 0,height:"full",flexShrink:"content"===c?0:void 0,ref:n}),p)})),c=l.polymorphicComponent((function(l,i){var a=l.space,c=l.align,p=void 0===c?"left":c,u=l.alignY,m=void 0===u?"top":u,d=l.collapseBelow,f=l.children,h=l.exceptionallySetClassName,x=e.objectWithoutPropertiesLoose(l,n);return t.createElement(r.Box,Object.assign({},x,{className:[h,o.getClassNames(s.default,"space",a)],display:"flex",flexDirection:"desktop"===d?{mobile:"column",tablet:"column",desktop:"row"}:"tablet"===d?{mobile:"column",tablet:"row"}:"row",alignItems:o.mapResponsiveProp(m,(function(e){return"top"===e?"flexStart":"bottom"===e?"flexEnd":e})),justifyContent:o.mapResponsiveProp(p,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":e})),ref:i}),f)}));exports.Column=a,exports.Columns=c;
 //# sourceMappingURL=columns.js.map

package/lib/new-components/columns/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../src/new-components/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport { forwardRefWithAs } from '../type-helpers'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './columns.module.css'\n\ntype ColumnWidth =\n    | 'auto'\n    | 'content'\n    | '1/2'\n    | '1/3'\n    | '2/3'\n    | '1/4'\n    | '3/4'\n    | '1/5'\n    | '2/5'\n    | '3/5'\n    | '4/5'\n\ninterface ColumnProps {\n    width?: ColumnWidth\n}\n\nconst Column = forwardRefWithAs<ColumnProps>(function Column(\n    { component, width = 'auto', children, ...props },\n    ref,\n) {\n    return (\n        <Box\n            className={[\n                styles.column,\n                width !== 'content'\n                    ? getClassNames(styles, 'columnWidth', width.replace('/', '-'))\n                    : null,\n            ]}\n            minWidth={0}\n            width={width !== 'content' ? 'full' : undefined}\n            flexShrink={width === 'content' ? 0 : undefined}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </Box>\n    )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom'\ntype ColumnsCollapseBelow = ResponsiveBreakpoints\n\ninterface ColumnsProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<ColumnsHorizontalAlignment>\n    alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n    collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = forwardRefWithAs<ColumnsProps>(function Columns(\n    { space, align, alignY, collapseBelow, children, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={getClassNames(styles, 'space', space)}\n            flexDirection={\n                collapseBelow === 'desktop'\n                    ? ['column', 'column', 'row']\n                    : collapseBelow === 'tablet'\n                    ? ['column', 'row']\n                    : 'row'\n            }\n            display=\"flex\"\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',\n            )}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type {\n    ColumnProps,\n    ColumnsProps,\n    ColumnWidth,\n    ColumnsCollapseBelow,\n    ColumnsHorizontalAlignment,\n    ColumnsVerticalAlignment,\n}\n\nexport { Column, Columns }\n"],"names":["Column","forwardRefWithAs","ref","width","children","props","React","Box","className","styles","column","getClassNames","replace","minWidth","undefined","flexShrink","Columns","space","align","alignY","collapseBelow","flexDirection","display","alignItems","mapResponsiveProp","justifyContent"],"mappings":"wRA4BMA,EAASC,oBAA8B,WAEzCC,WADaC,MAAAA,aAAQ,SAAQC,IAAAA,SAAaC,4EAItCC,gBAACC,qBACGC,UAAW,CACPC,UAAOC,OACG,YAAVP,EACMQ,gBAAcF,UAAQ,cAAeN,EAAMS,QAAQ,IAAK,MACxD,MAEVC,SAAU,EACVV,MAAiB,YAAVA,EAAsB,YAASW,EACtCC,WAAsB,YAAVZ,EAAsB,OAAIW,EACtCZ,IAAKA,GACDG,GAEHD,MAgBPY,EAAUf,oBAA+B,WAE3CC,OADEe,IAAAA,MAAOC,IAAAA,MAAOC,IAAAA,OAAQC,IAAAA,cAAehB,IAAAA,SAAaC,iGAIhDC,gBAACC,uBACOF,GACJG,UAAWG,gBAAcF,UAAQ,QAASQ,GAC1CI,cACsB,YAAlBD,EACM,CAAC,SAAU,SAAU,OACH,WAAlBA,EACA,CAAC,SAAU,OACX,MAEVE,QAAQ,OACRC,WAAYC,oBAAkBL,GAAQ,SAACA,SACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAY,YAEvEM,eAAgBD,oBAAkBN,GAAO,SAACA,SAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAY,YAErEhB,IAAKA,IAEJE"}
+{"version":3,"file":"columns.js","sources":["../../../src/new-components/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './columns.module.css'\n\ntype ColumnWidth =\n    | 'auto'\n    | 'content'\n    | '1/2'\n    | '1/3'\n    | '2/3'\n    | '1/4'\n    | '3/4'\n    | '1/5'\n    | '2/5'\n    | '3/5'\n    | '4/5'\n\ninterface ColumnProps {\n    width?: ColumnWidth\n}\n\nconst Column = polymorphicComponent<'div', ColumnProps>(function Column(\n    { width = 'auto', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                styles.column,\n                width !== 'content'\n                    ? getClassNames(styles, 'columnWidth', width.replace('/', '-'))\n                    : null,\n            ]}\n            minWidth={0}\n            width={width !== 'content' ? 'full' : undefined}\n            height=\"full\"\n            flexShrink={width === 'content' ? 0 : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline'\ntype ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>\n\ninterface ColumnsProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<ColumnsHorizontalAlignment>\n    alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n    collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(\n    {\n        space,\n        align = 'left',\n        alignY = 'top',\n        collapseBelow,\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            display=\"flex\"\n            flexDirection={\n                collapseBelow === 'desktop'\n                    ? { mobile: 'column', tablet: 'column', desktop: 'row' }\n                    : collapseBelow === 'tablet'\n                    ? { mobile: 'column', tablet: 'row' }\n                    : 'row'\n            }\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY,\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align,\n            )}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type {\n    ColumnProps,\n    ColumnsProps,\n    ColumnWidth,\n    ColumnsCollapseBelow,\n    ColumnsHorizontalAlignment,\n    ColumnsVerticalAlignment,\n}\n\nexport { Column, Columns }\n"],"names":["Column","polymorphicComponent","ref","width","children","exceptionallySetClassName","props","React","Box","className","styles","column","getClassNames","replace","minWidth","undefined","height","flexShrink","Columns","space","align","alignY","collapseBelow","display","flexDirection","mobile","tablet","desktop","alignItems","mapResponsiveProp","justifyContent"],"mappings":"waA4BMA,EAASC,wBAAyC,WAEpDC,WADEC,MAAAA,aAAQ,SAAQC,IAAAA,SAAUC,IAAAA,0BAA8BC,6CAItDC,gBAACC,uBACOF,GACJG,UAAW,CACPJ,EACAK,UAAOC,OACG,YAAVR,EACMS,gBAAcF,UAAQ,cAAeP,EAAMU,QAAQ,IAAK,MACxD,MAEVC,SAAU,EACVX,MAAiB,YAAVA,EAAsB,YAASY,EACtCC,OAAO,OACPC,WAAsB,YAAVd,EAAsB,OAAIY,EACtCb,IAAKA,IAEJE,MAgBPc,EAAUjB,wBAA0C,WAUtDC,OARIiB,IAAAA,UACAC,MAAAA,aAAQ,aACRC,OAAAA,aAAS,QACTC,IAAAA,cACAlB,IAAAA,SACAC,IAAAA,0BACGC,6CAKHC,gBAACC,uBACOF,GACJG,UAAW,CAACJ,EAA2BO,gBAAcF,UAAQ,QAASS,IACtEI,QAAQ,OACRC,cACsB,YAAlBF,EACM,CAAEG,OAAQ,SAAUC,OAAQ,SAAUC,QAAS,OAC7B,WAAlBL,EACA,CAAEG,OAAQ,SAAUC,OAAQ,OAC5B,MAEVE,WAAYC,oBAAkBR,GAAQ,SAACA,SACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAYA,KAEvES,eAAgBD,oBAAkBT,GAAO,SAACA,SAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAYA,KAErElB,IAAKA,IAEJE"}

package/lib/new-components/columns/columns.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"space-xsmall":"_404dd1d2",column:"ba843812","space-small":"_68f43f2f","space-medium":"_56c030a5","space-large":"_68ba4cde","space-xlarge":"d0bbcce8","space-xxlarge":"cffd4d47","tablet-space-xsmall":"_9f5eab66","tablet-space-small":"_87cfd3ad","tablet-space-medium":"_77aa72c8","tablet-space-large":"_8c23eb98","tablet-space-xlarge":"_46a0eb6f","tablet-space-xxlarge":"_392aadd9","desktop-space-xsmall":"cb9101af","desktop-space-small":"fd2027f1","desktop-space-medium":"f2556874","desktop-space-large":"f384b196","desktop-space-xlarge":"_70eeac35","desktop-space-xxlarge":"_38ebe435","columnWidth-auto":"fb022b2e","columnWidth-1-2":"f80b1c59","columnWidth-1-3":"_29dbf9cb","columnWidth-2-3":"f928dd14","columnWidth-1-4":"dae94143","columnWidth-3-4":"_1896fe55","columnWidth-1-5":"a20fe1a9","columnWidth-2-5":"d8316fb5","columnWidth-3-5":"_2add1195","columnWidth-4-5":"_17e07039","tablet-tablet-space-xsmall":"c3b80a0f"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"space-xsmall":"_6f59c771",column:"_91e05f0f","space-small":"_5a55af26","space-medium":"fa261310","space-large":"_6ebd4e46","space-xlarge":"_55ce4aea","space-xxlarge":"_04c9c3ac","tablet-space-xsmall":"ab76d8cd","tablet-space-small":"_14629bfb","tablet-space-medium":"_5b4e39ea","tablet-space-large":"ba270182","tablet-space-xlarge":"b96e7ec7","tablet-space-xxlarge":"d276612c","desktop-space-xsmall":"d7a73106","desktop-space-small":"_8f5e0e9e","desktop-space-medium":"_3a168411","desktop-space-large":"_0abcc12e","desktop-space-xlarge":"e0bafc60","desktop-space-xxlarge":"d2df9afd","columnWidth-auto":"b18d0b47","columnWidth-1-2":"_102a6b27","columnWidth-1-3":"_829872fe","columnWidth-2-3":"cf5aef9a","columnWidth-1-4":"_931bf714","columnWidth-3-4":"b0303130","columnWidth-1-5":"f6589a6f","columnWidth-2-5":"_2823aed9","columnWidth-3-5":"d00ba3bb","columnWidth-4-5":"_338f2d7c","tablet-tablet-space-xsmall":"_06582234"};
 //# sourceMappingURL=columns.module.css.js.map

package/lib/new-components/columns/columns.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/common-types.d.ts

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 export declare type Space = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+export declare type SpaceWithNegatives = Space | '-xsmall' | '-small' | '-medium' | '-large' | '-xlarge' | '-xxlarge';
 export declare type Tone = 'normal' | 'secondary' | 'danger';
 export declare type AlertTone = 'info' | 'positive' | 'caution' | 'critical';
+export declare type DividerWeight = 'primary' | 'secondary' | 'tertiary' | 'none';
 declare type ClassValue = Parameters<typeof classNames>[number];
 export declare type WithEnhancedClassName<T = unknown> = T extends HTMLElement ? Omit<HTMLAttributes<T>, 'className'> & {
     className?: ClassValue;

package/lib/new-components/divider/divider.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-declare type DividerWeight = 'regular' | 'strong';
+import type { DividerWeight } from '../common-types';
 interface DividerProps {
-    weight?: DividerWeight;
+    weight?: Exclude<DividerWeight, 'none'>;
 }
 declare function Divider({ weight, ...props }: DividerProps): JSX.Element;
 export type { DividerProps, DividerWeight };

package/lib/new-components/divider/divider.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),i=require("../responsive-props.js"),s=require("../box/box.js"),t=require("./divider.module.css.js");exports.Divider=function(o){var u=o.weight,l=void 0===u?"regular":u,a=e.objectWithoutPropertiesLoose(o,["weight"]);return r.createElement(s.Box,Object.assign({component:"hr",className:[t.default.divider,"regular"!==l?i.getClassNames(t.default,"weight",l):null]},a))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),s=require("../responsive-props.js"),t=require("../box/box.js"),i=require("./divider.module.css.js"),o=["weight"];exports.Divider=function(u){var a=u.weight,l=void 0===a?"tertiary":a,c=e.objectWithoutPropertiesLoose(u,o);return r.createElement(t.Box,Object.assign({as:"hr",className:s.getClassNames(i.default,"weight",l)},c))};
 //# sourceMappingURL=divider.js.map

package/lib/new-components/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../../src/new-components/divider/divider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\n\nimport styles from './divider.module.css'\n\ntype DividerWeight = 'regular' | 'strong'\n\ninterface DividerProps {\n    weight?: DividerWeight\n}\n\nfunction Divider({ weight = 'regular', ...props }: DividerProps) {\n    return (\n        <Box\n            component=\"hr\"\n            className={[\n                styles.divider,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n            ]}\n            {...props}\n        />\n    )\n}\n\nexport type { DividerProps, DividerWeight }\nexport { Divider }\n"],"names":["weight","props","React","Box","component","className","styles","divider","getClassNames"],"mappings":"wQAYA,oBAAmBA,OAAAA,aAAS,YAAcC,sDAElCC,gBAACC,qBACGC,UAAU,KACVC,UAAW,CACPC,UAAOC,QACI,YAAXP,EAAuBQ,gBAAcF,UAAQ,SAAUN,GAAU,OAEjEC"}
+{"version":3,"file":"divider.js","sources":["../../../src/new-components/divider/divider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport type { DividerWeight } from '../common-types'\n\nimport styles from './divider.module.css'\n\ninterface DividerProps {\n    weight?: Exclude<DividerWeight, 'none'>\n}\n\nfunction Divider({ weight = 'tertiary', ...props }: DividerProps) {\n    return <Box as=\"hr\" className={getClassNames(styles, 'weight', weight)} {...props} />\n}\n\nexport type { DividerProps, DividerWeight }\nexport { Divider }\n"],"names":["weight","props","React","Box","as","className","getClassNames","styles"],"mappings":"qRAWA,oBAAmBA,OAAAA,aAAS,aAAeC,6CAChCC,gBAACC,qBAAIC,GAAG,KAAKC,UAAWC,gBAAcC,UAAQ,SAAUP,IAAaC"}

package/lib/new-components/divider/divider.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={divider:"_9b6c04bf","weight-strong":"_6354eb7c"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"weight-primary":"_3f3a401c","weight-secondary":"_03b05b70","weight-tertiary":"b6f67ff8"};
 //# sourceMappingURL=divider.module.css.js.map

package/lib/new-components/heading/heading.d.ts

@@ -1,16 +1,115 @@
 import * as React from 'react';
+import type { ObfuscatedClassName } from '../../utils/polymorphism';
 import type { Tone } from '../common-types';
+import type { BoxProps } from '../box';
 declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6';
 declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 declare type SupportedHeadingElementProps = Omit<JSX.IntrinsicElements[HeadingElement], 'className' | 'children'>;
 declare type HeadingProps = SupportedHeadingElementProps & {
+    children: React.ReactNode;
+    /**
+     * The semantic level of the heading.
+     */
     level: HeadingLevel;
+    /**
+     * The weight of the heading. Used to de-emphasize the heading visually when using 'light'.
+     *
+     * @default 'regular'
+     */
     weight?: 'regular' | 'light';
+    /**
+     * Shifts the default heading visual text size up or down, depending on the original size
+     * imposed by the `level`. The heading continues to be semantically at the given level.
+     *
+     * By default, no value is applied, and the default size from the level is applied. The values
+     * have the following effect:
+     *
+     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
+     * level look visually as if it were of the immediately lower level).
+     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
+     * scale.
+     * - 'largest' can be thought of as applying 'larger' twice.
+     *
+     * @see level
+     * @default undefined
+     */
     size?: 'smaller' | 'larger' | 'largest';
+    /**
+     * The tone (semantic color) of the heading.
+     *
+     * @default 'normal'
+     */
     tone?: Tone;
-    children: React.ReactNode;
+    /**
+     * Used to truncate the heading to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
     lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
+    /**
+     * How to align the heading text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
 };
-declare const Heading: React.ForwardRefExoticComponent<Pick<HeadingProps, "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "level" | "weight" | "size" | "tone" | "lineClamp"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const Heading: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    children: React.ReactNode;
+    /**
+     * The semantic level of the heading.
+     */
+    level: HeadingLevel;
+    /**
+     * The weight of the heading. Used to de-emphasize the heading visually when using 'light'.
+     *
+     * @default 'regular'
+     */
+    weight?: "regular" | "light" | undefined;
+    /**
+     * Shifts the default heading visual text size up or down, depending on the original size
+     * imposed by the `level`. The heading continues to be semantically at the given level.
+     *
+     * By default, no value is applied, and the default size from the level is applied. The values
+     * have the following effect:
+     *
+     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
+     * level look visually as if it were of the immediately lower level).
+     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
+     * scale.
+     * - 'largest' can be thought of as applying 'larger' twice.
+     *
+     * @see level
+     * @default undefined
+     */
+    size?: "smaller" | "larger" | "largest" | undefined;
+    /**
+     * The tone (semantic color) of the heading.
+     *
+     * @default 'normal'
+     */
+    tone?: "normal" | "secondary" | "danger" | undefined;
+    /**
+     * Used to truncate the heading to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5" | undefined;
+    /**
+     * How to align the heading text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
+} & ObfuscatedClassName, "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "level" | "weight" | "size" | "tone" | "lineClamp" | "align" | "exceptionallySetClassName"> & React.RefAttributes<HTMLHeadingElement>>;
 export type { HeadingProps, HeadingLevel };
 export { Heading };