@doist/reactist 9.2.0-beta.7 → 10.0.0-beta.10

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");exports.CheckboxField=l.forwardRef((function(d,o){var u,s,b,h=d.label,f=d.disabled,k=d.indeterminate,x=d.defaultChecked,m=d.onChange,p=e.objectWithoutPropertiesLoose(d,["label","disabled","indeterminate","defaultChecked","onChange"]);"boolean"!=typeof k||"boolean"==typeof p.checked||(console.warn("Cannot use indeterminate on an uncontrolled checkbox"),k=void 0),h||p["aria-label"]||p["aria-labelledby"]||console.warn("A Checkbox needs a label");var v=l.useState(null!==(u=null!==(s=p.checked)&&void 0!==s?s:x)&&void 0!==u&&u),y=v[1],j=null!==(b=p.checked)&&void 0!==b?b:v[0],C=l.useRef(null),q=r.useForkRef(C,o);return l.useEffect((function(){C.current&&"boolean"==typeof k&&(C.current.indeterminate=k)}),[k]),l.createElement(n.Box,{as:"label",display:"flex",alignItems:"center",className:[c.default.container,f?c.default.disabled:null,j?c.default.checked:null,"focus-marker-enabled-within"]},l.createElement(t.HiddenVisually,null,l.createElement("input",Object.assign({},p,{ref:q,type:"checkbox",checked:j,disabled:f,onChange:function(e){null==m||m(e),e.defaultPrevented||y(e.currentTarget.checked)}}))),l.createElement(i.CheckboxIcon,{"aria-hidden":!0,checked:j,indeterminate:k,disabled:f}),h?l.createElement(a.Text,null,h):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":"2XAcsBA,cAAuD,WAEzEC,aADEC,IAAAA,MAAOC,IAAAA,SAAUC,IAAAA,cAAeC,IAAAA,eAAgBC,IAAAA,SAAaC,qGAIlC,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/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"),s=require("../box/box.js"),l=require("./columns.module.css.js"),n=require("../stack/stack.module.css.js"),i=r.forwardRefWithAs((function(r,n){var i=r.width,a=void 0===i?"auto":i,c=r.children,u=e.objectWithoutPropertiesLoose(r,["component","width","children"]);return t.createElement(s.Box,Object.assign({className:[l.default.column,"content"!==a?o.getClassNames(l.default,"columnWidth",a.replace("/","-")):null],minWidth:0,width:"content"!==a?"full":void 0,flexShrink:"content"===a?0:void 0,ref:n},u),c)})),a=r.forwardRefWithAs((function(r,i){var a=r.space,c=r.align,u=r.alignY,p=r.collapseBelow,d=r.children,f=e.objectWithoutPropertiesLoose(r,["space","align","alignY","collapseBelow","children"]);return t.createElement(s.Box,Object.assign({className:[o.getClassNames(l.default,"space",a),o.getClassNames(n.default,"space",a)],flexDirection:"desktop"===p?["column","column","row"]:"tablet"===p?["column","row"]:"row",display:"flex",alignItems:o.mapResponsiveProp(u,(function(e){return"top"===e?"flexStart":"bottom"===e?"flexEnd":"center"})),justifyContent:o.mapResponsiveProp(c,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":"center"})),ref:i},f),d)}));exports.Column=i,exports.Columns=a;
+"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=l.polymorphicComponent((function(l,i){var n=l.width,a=void 0===n?"auto":n,c=l.children,p=l.exceptionallySetClassName,u=e.objectWithoutPropertiesLoose(l,["width","children","exceptionallySetClassName"]);return t.createElement(r.Box,Object.assign({},u,{className:[p,s.default.column,"content"!==a?o.getClassNames(s.default,"columnWidth",a.replace("/","-")):null],minWidth:0,width:"content"!==a?"full":void 0,height:"full",flexShrink:"content"===a?0:void 0,ref:i}),c)})),n=l.polymorphicComponent((function(l,i){var n=l.space,a=l.align,c=void 0===a?"left":a,p=l.alignY,u=void 0===p?"top":p,m=l.collapseBelow,d=l.children,f=l.exceptionallySetClassName,h=e.objectWithoutPropertiesLoose(l,["space","align","alignY","collapseBelow","children","exceptionallySetClassName"]);return t.createElement(r.Box,Object.assign({},h,{className:[f,o.getClassNames(s.default,"space",n)],display:"flex",flexDirection:"desktop"===m?{mobile:"column",tablet:"column",desktop:"row"}:"tablet"===m?{mobile:"column",tablet:"row"}:"row",alignItems:o.mapResponsiveProp(u,(function(e){return"top"===e?"flexStart":"bottom"===e?"flexEnd":e})),justifyContent:o.mapResponsiveProp(c,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":e})),ref:i}),d)}));exports.Column=i,exports.Columns=n;
 //# 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'\nimport stackStyles from '../stack/stack.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            className={[\n                getClassNames(styles, 'space', space),\n                getClassNames(stackStyles, 'space', space),\n            ]}\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            {...props}\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","stackStyles","flexDirection","display","alignItems","mapResponsiveProp","justifyContent"],"mappings":"kUA6BMA,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,qBACGC,UAAW,CACPG,gBAAcF,UAAQ,QAASQ,GAC/BN,gBAAcU,UAAa,QAASJ,IAExCK,cACsB,YAAlBF,EACM,CAAC,SAAU,SAAU,OACH,WAAlBA,EACA,CAAC,SAAU,OACX,MAEVG,QAAQ,OACRC,WAAYC,oBAAkBN,GAAQ,SAACA,SACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAY,YAEvEO,eAAgBD,oBAAkBP,GAAO,SAACA,SAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAY,YAErEhB,IAAKA,GACDG,GAEHD"}
+{"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":"iSA4BMA,EAASC,wBAAyC,WAEpDC,WADEC,MAAAA,aAAQ,SAAQC,IAAAA,SAAUC,IAAAA,0BAA8BC,4FAItDC,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,6HAKHC,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":"d3ea2e32",column:"_2c41e2e2","space-small":"a54f89c4","space-medium":"_621ee6ab","space-large":"ff213312","space-xlarge":"faec1923","space-xxlarge":"a2ba5afa","tablet-space-xsmall":"_689d0d7b","tablet-space-small":"_29378ee5","tablet-space-medium":"_89b5095d","tablet-space-large":"_816e1598","tablet-space-xlarge":"cada9458","tablet-space-xxlarge":"_77b032f7","desktop-space-xsmall":"dab649e7","desktop-space-small":"_4633217f","desktop-space-medium":"edd549c1","desktop-space-large":"_80d262e2","desktop-space-xlarge":"_76b375ca","desktop-space-xxlarge":"_003fb9cf","columnWidth-auto":"c46d4782","columnWidth-1-2":"_28af3e54","columnWidth-1-3":"_54564dd0","columnWidth-2-3":"_7c5429a5","columnWidth-1-4":"_39a5dfa0","columnWidth-3-4":"e84a9027","columnWidth-1-5":"ccb09205","columnWidth-2-5":"_65fa2c16","columnWidth-3-5":"_68494fd9","columnWidth-4-5":"a618a594"};
+"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");exports.Divider=function(o){var u=o.weight,a=void 0===u?"tertiary":u,l=e.objectWithoutPropertiesLoose(o,["weight"]);return r.createElement(t.Box,Object.assign({as:"hr",className:s.getClassNames(i.default,"weight",a)},l))};
 //# 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":"wQAWA,oBAAmBA,OAAAA,aAAS,aAAeC,sDAChCC,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 };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),r=require("../responsive-props.js"),t=require("../box/box.js"),s=require("./heading.module.css.js");exports.Heading=l.forwardRef((function(a,i){var n=a.level,o=a.weight,u=void 0===o?"regular":o,d=a.size,g=a.tone,p=void 0===g?"normal":g,m=a.children,c=a.lineClamp,f=e.objectWithoutPropertiesLoose(a,["level","weight","size","tone","children","lineClamp"]),h="h"+n,v="string"==typeof c?parseInt(c,10)>1:(c||0)>1;return l.createElement(t.Box,Object.assign({},f,{className:[s.default.heading,"regular"!==u?r.getClassNames(s.default,"weight",u):null,"normal"!==p?r.getClassNames(s.default,"tone",p):null,r.getClassNames(s.default,"size",d),v?s.default.lineClamp:null,c?r.getClassNames(s.default,"line-clamp",c.toString()):null],component:h,ref:i}),m)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../responsive-props.js"),t=require("../box/box.js"),s=require("./heading.module.css.js");exports.Heading=l.forwardRef((function(i,r){var n=i.level,o=i.weight,u=void 0===o?"regular":o,g=i.size,d=i.tone,p=void 0===d?"normal":d,m=i.children,c=i.lineClamp,f=i.align,h=i.exceptionallySetClassName,v=e.objectWithoutPropertiesLoose(i,["level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName"]),C="h"+n,x="string"==typeof c?parseInt(c,10)>1:(c||0)>1;return l.createElement(t.Box,Object.assign({},v,{className:[h,s.default.heading,"regular"!==u?a.getClassNames(s.default,"weight",u):null,"normal"!==p?a.getClassNames(s.default,"tone",p):null,a.getClassNames(s.default,"size",g),x?s.default.lineClampMultipleLines:null,c?a.getClassNames(s.default,"lineClamp",c.toString()):null],textAlign:f,paddingRight:c?"xsmall":void 0,as:C,ref:r}),m)}));
 //# sourceMappingURL=heading.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../../src/new-components/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { Tone } from '../common-types'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\ntype SupportedHeadingElementProps = Omit<\n    JSX.IntrinsicElements[HeadingElement],\n    'className' | 'children'\n>\n\ntype HeadingProps = SupportedHeadingElementProps & {\n    level: HeadingLevel\n    weight?: 'regular' | 'light'\n    size?: 'smaller' | 'larger' | 'largest'\n    tone?: Tone\n    children: React.ReactNode\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n    { level, weight = 'regular', size, tone = 'normal', children, lineClamp, ...props },\n    ref,\n) {\n    // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n    // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n    const headingElementName = `h${level}` as HeadingElement\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n    return (\n        <Box\n            {...props}\n            className={[\n                styles.heading,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                getClassNames(styles, 'size', size),\n                lineClampMultipleLines ? styles.lineClamp : null,\n                lineClamp ? getClassNames(styles, 'line-clamp', lineClamp.toString()) : null,\n            ]}\n            component={headingElementName}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["React","ref","level","weight","size","tone","children","lineClamp","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","component"],"mappings":"wQAuBgBA,cAAmD,WAE/DC,OADEC,IAAAA,UAAOC,OAAAA,aAAS,YAAWC,IAAAA,SAAMC,KAAAA,aAAO,WAAUC,IAAAA,SAAUC,IAAAA,UAAcC,4FAKtEC,MAAyBP,EACzBQ,EACmB,iBAAdH,EAAyBI,SAASJ,EAAW,IAAM,GAAKA,GAAa,GAAK,SAGjFP,gBAACY,uBACOJ,GACJK,UAAW,CACPC,UAAOC,QACI,YAAXZ,EAAuBa,gBAAcF,UAAQ,SAAUX,GAAU,KACxD,WAATE,EAAoBW,gBAAcF,UAAQ,OAAQT,GAAQ,KAC1DW,gBAAcF,UAAQ,OAAQV,GAC9BM,EAAyBI,UAAOP,UAAY,KAC5CA,EAAYS,gBAAcF,UAAQ,aAAcP,EAAUU,YAAc,MAE5EC,UAAWT,EACXR,IAAKA,IAEJK"}
+{"version":3,"file":"heading.js","sources":["../../../src/new-components/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName } from '../../utils/polymorphism'\nimport type { Tone } from '../common-types'\nimport type { BoxProps } from '../box'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\ntype SupportedHeadingElementProps = Omit<\n    JSX.IntrinsicElements[HeadingElement],\n    'className' | 'children'\n>\n\ntype HeadingProps = SupportedHeadingElementProps & {\n    children: React.ReactNode\n    /**\n     * The semantic level of the heading.\n     */\n    level: HeadingLevel\n    /**\n     * The weight of the heading. Used to de-emphasize the heading visually when using 'light'.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'light'\n    /**\n     * Shifts the default heading visual text size up or down, depending on the original size\n     * imposed by the `level`. The heading continues to be semantically at the given level.\n     *\n     * By default, no value is applied, and the default size from the level is applied. The values\n     * have the following effect:\n     *\n     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the\n     * level look visually as if it were of the immediately lower level).\n     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the\n     * scale.\n     * - 'largest' can be thought of as applying 'larger' twice.\n     *\n     * @see level\n     * @default undefined\n     */\n    size?: 'smaller' | 'larger' | 'largest'\n    /**\n     * The tone (semantic color) of the heading.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the heading to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the heading text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(\n    function Heading(\n        {\n            level,\n            weight = 'regular',\n            size,\n            tone = 'normal',\n            children,\n            lineClamp,\n            align,\n            exceptionallySetClassName,\n            ...props\n        },\n        ref,\n    ) {\n        // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n        // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n        const headingElementName = `h${level}` as HeadingElement\n        const lineClampMultipleLines =\n            typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n        return (\n            <Box\n                {...props}\n                className={[\n                    exceptionallySetClassName,\n                    styles.heading,\n                    weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                    tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                    getClassNames(styles, 'size', size),\n                    lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                    lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n                ]}\n                textAlign={align}\n                // Prevents emojis from being cut-off\n                // See https://github.com/Doist/reactist/pull/528\n                paddingRight={lineClamp ? 'xsmall' : undefined}\n                as={headingElementName}\n                ref={ref}\n            >\n                {children}\n            </Box>\n        )\n    },\n)\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["React","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":"wQAsEgBA,cACZ,WAYIC,OAVIC,IAAAA,UACAC,OAAAA,aAAS,YACTC,IAAAA,SACAC,KAAAA,aAAO,WACPC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,MACAC,IAAAA,0BACGC,gIAMDC,MAAyBT,EACzBU,EACmB,iBAAdL,EAAyBM,SAASN,EAAW,IAAM,GAAKA,GAAa,GAAK,SAGjFP,gBAACc,uBACOJ,GACJK,UAAW,CACPN,EACAO,UAAOC,QACI,YAAXd,EAAuBe,gBAAcF,UAAQ,SAAUb,GAAU,KACxD,WAATE,EAAoBa,gBAAcF,UAAQ,OAAQX,GAAQ,KAC1Da,gBAAcF,UAAQ,OAAQZ,GAC9BQ,EAAyBI,UAAOJ,uBAAyB,KACzDL,EAAYW,gBAAcF,UAAQ,YAAaT,EAAUY,YAAc,MAE3EC,UAAWZ,EAGXa,aAAcd,EAAY,cAAWe,EACrCC,GAAIZ,EACJV,IAAKA,IAEJK"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={heading:"_651c59b1","weight-light":"_2e864c80","tone-secondary":"aa91354d","tone-danger":"_7bd53203","size-largest":"_2c8398a3","size-larger":"e5a28b9c","size-smaller":"f33a726c","line-clamp-1":"_539acfae",lineClamp:"_8b287e55","line-clamp-2":"_90e5ba4e","line-clamp-3":"a8fde227","line-clamp-4":"_2a71623f","line-clamp-5":"e506bf70"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={heading:"_2f45487c","weight-light":"a20cbde9","tone-secondary":"_75f44518","tone-danger":"_3952cc59","size-largest":"b71d22ef","size-larger":"f15346e2","size-smaller":"_3cae1428",lineClampMultipleLines:"_347f6fcd","lineClamp-1":"_895c0b16","lineClamp-2":"_2e4808bd","lineClamp-3":"_1bdb7bdc","lineClamp-4":"_159943ea","lineClamp-5":"e44e008d"};
 //# sourceMappingURL=heading.module.css.js.map

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

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

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { ResponsiveBreakpoints } from '../responsive-props';
+declare type AboveProp = {
+    /**
+     * Hides the element on viewport sizes equal or larger to the one given.
+     *
+     * It is not supported to pass it alongside `below`, and the resulting behavior is undefined
+     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).
+     *
+     * @see below
+     */
+    above: Exclude<ResponsiveBreakpoints, 'desktop'>;
+    below?: never;
+};
+declare type BelowProp = {
+    /**
+     * Hides the element on viewport sizes equal or smaller to the one given.
+     *
+     * It is not supported to pass it alongside `above`, and the resulting behavior is undefined
+     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).
+     *
+     * @see above
+     */
+    below: Exclude<ResponsiveBreakpoints, 'mobile'>;
+    above?: never;
+};
+declare type CommonProps = {
+    children: React.ReactNode;
+    /**
+     * hides the element when on print media.
+     */
+    print?: boolean;
+    /**
+     * Useful if you want the element to be an inline element when it is visible.
+     */
+    display?: 'inline' | 'block';
+};
+declare type HiddenProps = CommonProps & (AboveProp | BelowProp | Required<Pick<CommonProps, 'print'>>);
+/**
+ * A component that allows to specify how to hide itself on certain responsive screen sizes, or on
+ * print media.
+ *
+ * @see HiddenProps
+ * @see HiddenVisually for hiding content only visually, while keeping it available for assistive
+ *   technologies.
+ */
+declare const Hidden: import("../../utils/polymorphism").PolymorphicComponent<"div", HiddenProps, "obfuscateClassName">;
+export { Hidden };
+export type { HiddenProps };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=require("../../utils/polymorphism.js"),n=require("../box/box.js"),l=require("./hidden.module.css.js");exports.Hidden=i.polymorphicComponent((function(i,r){var t=i.display,s=void 0===t?"block":t,a=i.children,d=i.exceptionallySetClassName,b=e.objectWithoutPropertiesLoose(i,["display","children","exceptionallySetClassName"]),p="print"in b&&b.print,c="above"in b,u="below"in b,v="below"in b&&"desktop"===b.below||"above"in b&&"mobile"===b.above;return c&&u&&console.warn('<Hidden /> should receive either above="…" or below="…" but not both'),c||u||p||console.warn("<Hidden /> did not receive any criteria to hide itself"),"above"in b&&delete b.above,"below"in b&&delete b.below,"print"in b&&delete b.print,o.createElement(n.Box,Object.assign({},b,{ref:r,className:[d,p?l.default.hiddenOnPrint:null],display:c&&u?"none":{mobile:u?"none":s,tablet:v?"none":s,desktop:c?"none":s}}),a)}));
+//# sourceMappingURL=hidden.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hidden.js","sources":["../../../src/new-components/hidden/hidden.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport styles from './hidden.module.css'\nimport type { ResponsiveBreakpoints } from '../responsive-props'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\ntype AboveProp = {\n    /**\n     * Hides the element on viewport sizes equal or larger to the one given.\n     *\n     * It is not supported to pass it alongside `below`, and the resulting behavior is undefined\n     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).\n     *\n     * @see below\n     */\n    above: Exclude<ResponsiveBreakpoints, 'desktop'>\n    below?: never\n}\n\ntype BelowProp = {\n    /**\n     * Hides the element on viewport sizes equal or smaller to the one given.\n     *\n     * It is not supported to pass it alongside `above`, and the resulting behavior is undefined\n     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).\n     *\n     * @see above\n     */\n    below: Exclude<ResponsiveBreakpoints, 'mobile'>\n    above?: never\n}\n\ntype CommonProps = {\n    children: React.ReactNode\n    /**\n     * hides the element when on print media.\n     */\n    print?: boolean\n    /**\n     * Useful if you want the element to be an inline element when it is visible.\n     */\n    display?: 'inline' | 'block'\n}\n\ntype HiddenProps = CommonProps & (AboveProp | BelowProp | Required<Pick<CommonProps, 'print'>>)\n\n/**\n * A component that allows to specify how to hide itself on certain responsive screen sizes, or on\n * print media.\n *\n * @see HiddenProps\n * @see HiddenVisually for hiding content only visually, while keeping it available for assistive\n *   technologies.\n */\nconst Hidden = polymorphicComponent<'div', HiddenProps>(function Hidden(\n    { display = 'block', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const hiddenOnPrint = 'print' in props && props.print\n\n    const hiddenOnDesktop = 'above' in props\n    const hiddenOnMobile = 'below' in props\n    const hiddenOnTablet =\n        ('below' in props && props.below === 'desktop') ||\n        ('above' in props && props.above === 'mobile')\n\n    if (hiddenOnDesktop && hiddenOnMobile) {\n        // eslint-disable-next-line no-console\n        console.warn('<Hidden /> should receive either above=\"…\" or below=\"…\" but not both')\n    }\n\n    if (!hiddenOnDesktop && !hiddenOnMobile && !hiddenOnPrint) {\n        // eslint-disable-next-line no-console\n        console.warn('<Hidden /> did not receive any criteria to hide itself')\n    }\n\n    // We need to delete these so they do not get forwarded to the Box\n    if ('above' in props) delete props['above']\n    if ('below' in props) delete props['below']\n    if ('print' in props) delete props['print']\n\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            className={[exceptionallySetClassName, hiddenOnPrint ? styles.hiddenOnPrint : null]}\n            display={\n                hiddenOnDesktop && hiddenOnMobile\n                    ? 'none'\n                    : {\n                          mobile: hiddenOnMobile ? 'none' : display,\n                          tablet: hiddenOnTablet ? 'none' : display,\n                          desktop: hiddenOnDesktop ? 'none' : display,\n                      }\n            }\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport { Hidden }\nexport type { HiddenProps }\n"],"names":["polymorphicComponent","ref","display","children","exceptionallySetClassName","props","hiddenOnPrint","print","hiddenOnDesktop","hiddenOnMobile","hiddenOnTablet","below","above","console","warn","React","Box","className","styles","mobile","tablet","desktop"],"mappings":"2QAsDeA,wBAAyC,WAEpDC,WADEC,QAAAA,aAAU,UAASC,IAAAA,SAAUC,IAAAA,0BAA8BC,uFAGvDC,EAAgB,UAAWD,GAASA,EAAME,MAE1CC,EAAkB,UAAWH,EAC7BI,EAAiB,UAAWJ,EAC5BK,EACD,UAAWL,GAAyB,YAAhBA,EAAMM,OAC1B,UAAWN,GAAyB,WAAhBA,EAAMO,aAE3BJ,GAAmBC,GAEnBI,QAAQC,KAAK,wEAGZN,GAAoBC,GAAmBH,GAExCO,QAAQC,KAAK,0DAIb,UAAWT,UAAcA,EAAK,MAC9B,UAAWA,UAAcA,EAAK,MAC9B,UAAWA,UAAcA,EAAK,MAG9BU,gBAACC,uBACOX,GACJJ,IAAKA,EACLgB,UAAW,CAACb,EAA2BE,EAAgBY,UAAOZ,cAAgB,MAC9EJ,QACIM,GAAmBC,EACb,OACA,CACIU,OAAQV,EAAiB,OAASP,EAClCkB,OAAQV,EAAiB,OAASR,EAClCmB,QAASb,EAAkB,OAASN,KAIjDC"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={hiddenOnPrint:"_0e595dea"};
+//# sourceMappingURL=hidden.module.css.js.map

package/lib/new-components/hidden/hidden.module.css.js.map

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

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

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

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

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

package/lib/new-components/hidden-visually/hidden-visually.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+};
+/**
+ * Provides content to assistive technologies while hiding it from the screen.
+ *
+ * @see Hidden for fully hiding content, and only under certain conditions.
+ */
+declare const HiddenVisually: import("../../utils/polymorphism").PolymorphicComponent<"div", Props, "omitClassName">;
+export { HiddenVisually };

package/lib/new-components/hidden-visually/hidden-visually.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("../../utils/polymorphism.js"),s=require("../box/box.js"),i=require("./hidden-visually.module.css.js");exports.HiddenVisually=r.polymorphicComponent((function(r,o){return e.createElement(s.Box,Object.assign({},r,{ref:o,position:"absolute",overflow:"hidden",className:i.default.hiddenVisually}))}));
+//# sourceMappingURL=hidden-visually.js.map

package/lib/new-components/hidden-visually/hidden-visually.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hidden-visually.js","sources":["../../../src/new-components/hidden-visually/hidden-visually.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport styles from './hidden-visually.module.css'\n\ntype Props = {\n    children: React.ReactNode\n}\n\n/**\n * Provides content to assistive technologies while hiding it from the screen.\n *\n * @see Hidden for fully hiding content, and only under certain conditions.\n */\nconst HiddenVisually = polymorphicComponent<'div', Props, 'omitClassName'>(function HiddenVisually(\n    props,\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            position=\"absolute\"\n            overflow=\"hidden\"\n            className={styles.hiddenVisually}\n        />\n    )\n})\n\nexport { HiddenVisually }\n"],"names":["polymorphicComponent","props","ref","React","Box","position","overflow","className","styles","hiddenVisually"],"mappings":"mOAcuBA,wBAAoD,SACvEC,EACAC,UAGIC,gBAACC,uBACOH,GACJC,IAAKA,EACLG,SAAS,WACTC,SAAS,SACTC,UAAWC,UAAOC"}

package/lib/new-components/hidden-visually/hidden-visually.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={hiddenVisually:"_618235b7"};
+//# sourceMappingURL=hidden-visually.module.css.js.map

package/lib/new-components/hidden-visually/hidden-visually.module.css.js.map

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

package/lib/new-components/hidden-visually/hidden-visually.test.d.ts

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

package/lib/new-components/hidden-visually/index.d.ts

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

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { ResponsiveProp } from '../responsive-props';
 import type { Space } from '../common-types';
 import type { ReusableBoxProps } from '../box';
@@ -8,6 +7,6 @@ interface InlineProps extends ReusableBoxProps {
     align?: ResponsiveProp<InlineAlign>;
     alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>;
 }
-declare const Inline: import("../type-helpers").ForwardRefComponentWithAs<InlineProps, React.ElementType<any>>;
+declare const Inline: import("../../utils/polymorphism").PolymorphicComponent<"div", InlineProps, "obfuscateClassName">;
 export type { InlineProps, InlineAlign };
 export { Inline };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../type-helpers.js"),n=require("../responsive-props.js"),o=require("../box/box.js"),s=require("./inline.module.css.js");exports.Inline=t.forwardRefWithAs((function(t,i){var l=t.component,a=t.space,p=t.align,c=void 0===p?"left":p,u=t.alignY,f=void 0===u?"center":u,d=t.children,m=e.objectWithoutPropertiesLoose(t,["component","space","align","alignY","children"]);return r.createElement(o.Box,null,r.createElement(o.Box,Object.assign({component:l,display:"flex",flexWrap:"wrap",className:n.getClassNames(s.default,"space",a),ref:i,alignItems:n.mapResponsiveProp(f,(function(e){return"top"===e?"flexStart":"bottom"===e?"flexEnd":"center"})),justifyContent:n.mapResponsiveProp(c,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":"center"}))},m),d))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../../utils/polymorphism.js"),s=require("../responsive-props.js"),l=require("../box/box.js"),n=require("./inline.module.css.js");exports.Inline=t.polymorphicComponent((function(t,i){var a=t.as,o=t.space,p=t.align,u=void 0===p?"left":p,c=t.alignY,f=void 0===c?"center":c,m=t.children,x=t.exceptionallySetClassName,d=e.objectWithoutPropertiesLoose(t,["as","space","align","alignY","children","exceptionallySetClassName"]);return r.createElement(l.Box,null,r.createElement(l.Box,Object.assign({},d,{as:a,display:"flex",flexWrap:"wrap",className:[x,s.getClassNames(n.default,"space",o)],ref:i,alignItems:s.mapResponsiveProp(f,(function(e){return"top"===e?"flexStart":"bottom"===e?"flexEnd":"center"})),justifyContent:s.mapResponsiveProp(u,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":"center"}))}),m))}));
 //# sourceMappingURL=inline.js.map