@doist/reactist 10.0.0-beta.1 → 10.0.0-beta.10

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

@@ -1,8 +1,15 @@
+/// <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("../../utils/polymorphism").PolymorphicComponent<"a", ButtonLinkProps, "obfuscateClassName">;
-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("../../utils/polymorphism.js"),o=require("../box/box.js"),n=require("./button-link.module.css.js");exports.ButtonLink=r.polymorphicComponent((function(r,i){var a=r.as,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=r.exceptionallySetClassName,v=e.objectWithoutPropertiesLoose(r,["as","variant","size","openInNewTab","exceptionallySetClassName"]);return t.createElement(o.Box,Object.assign({},v,{as:s,display:"inlineFlex",alignItems:"center",justifyContent:"center",className:[d,n.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");exports.ButtonLink=o.polymorphicComponent((function(o,a){var n=o.as,i=void 0===n?"a":n,s=o.variant,l=o.tone,u=void 0===l?"normal":l,p=o.size,v=void 0===p?"normal":p,b=o.exceptionallySetClassName,c=o.openInNewTab,m=void 0!==c&&c,d=e.objectWithoutPropertiesLoose(o,["as","variant","tone","size","exceptionallySetClassName","openInNewTab"]);return t.createElement(r.BaseButton,Object.assign({},d,{as:i,ref:a,variant:s,tone:u,size:v,exceptionallySetClassName:b,target:m?"_blank":void 0,rel:m?"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 { polymorphicComponent } from '../../utils/polymorphism'\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 = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n    {\n        as = 'a',\n        variant,\n        size = 'default',\n        openInNewTab = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            as={as}\n            display=\"inlineFlex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={[\n                exceptionallySetClassName,\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":["polymorphicComponent","ref","as","variant","size","openInNewTab","exceptionallySetClassName","props","React","Box","display","alignItems","justifyContent","className","styles","container","target","undefined","rel"],"mappings":"oRAYmBA,wBAA2C,WAS1DC,WAPIC,GAAAA,aAAK,MACLC,IAAAA,YACAC,KAAAA,aAAO,gBACPC,aAAAA,gBACAC,IAAAA,0BACGC,8GAKHC,gBAACC,uBACOF,GACJL,GAAIA,EACJQ,QAAQ,aACRC,WAAW,SACXC,eAAe,SACfC,UAAW,CACPP,EACAQ,UAAOC,UACP,kBACAZ,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,MAEtDH,IAAKA,EACLe,OAAQX,EAAe,cAAWY,EAClCC,IAAKb,EAAe,2BAAwBY"}
+{"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":"2PAqB0BA,wBAA2C,WAUjEC,WARIC,GAAAA,aAAK,MACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,WACPC,IAAAA,8BACAC,aAAAA,gBACGC,qHAKHC,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.js

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../utils/polymorphism.js"),l=require("../responsive-props.js"),r=require("../box/box.js"),s=require("./columns.module.css.js"),n=o.polymorphicComponent((function(o,n){var i=o.width,a=void 0===i?"auto":i,c=o.children,p=o.exceptionallySetClassName,u=e.objectWithoutPropertiesLoose(o,["width","children","exceptionallySetClassName"]);return t.createElement(r.Box,Object.assign({},u,{className:[p,s.default.column,"content"!==a?l.getClassNames(s.default,"columnWidth",a.replace("/","-")):null],minWidth:0,width:"content"!==a?"full":void 0,flexShrink:"content"===a?0:void 0,ref:n}),c)})),i=o.polymorphicComponent((function(o,n){var i=o.space,a=o.align,c=void 0===a?"left":a,p=o.alignY,u=void 0===p?"top":p,m=o.collapseBelow,d=o.children,f=o.exceptionallySetClassName,x=e.objectWithoutPropertiesLoose(o,["space","align","alignY","collapseBelow","children","exceptionallySetClassName"]);return t.createElement(r.Box,Object.assign({},x,{className:[f,l.getClassNames(s.default,"space",i)],flexDirection:"desktop"===m?{mobile:"column",tablet:"column",desktop:"row"}:"tablet"===m?{mobile:"column",tablet:"row"}:"row",display:"flex",alignItems:l.mapResponsiveProp(u,(function(e){return"top"===e?"flexStart":"bottom"===e?"flexEnd":e})),justifyContent:l.mapResponsiveProp(c,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":e})),flexGrow:1,ref:n}),d)}));exports.Column=n,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=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 { 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            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            flexDirection={\n                collapseBelow === 'desktop'\n                    ? { mobile: 'column', tablet: 'column', desktop: 'row' }\n                    : collapseBelow === 'tablet'\n                    ? { mobile: 'column', tablet: 'row' }\n                    : 'row'\n            }\n            display=\"flex\"\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            flexGrow={1}\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","flexShrink","Columns","space","align","alignY","collapseBelow","flexDirection","mobile","tablet","desktop","display","alignItems","mapResponsiveProp","justifyContent","flexGrow"],"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,WAAsB,YAAVb,EAAsB,OAAIY,EACtCb,IAAKA,IAEJE,MAgBPa,EAAUhB,wBAA0C,WAUtDC,OARIgB,IAAAA,UACAC,MAAAA,aAAQ,aACRC,OAAAA,aAAS,QACTC,IAAAA,cACAjB,IAAAA,SACAC,IAAAA,0BACGC,6HAKHC,gBAACC,uBACOF,GACJG,UAAW,CAACJ,EAA2BO,gBAAcF,UAAQ,QAASQ,IACtEI,cACsB,YAAlBD,EACM,CAAEE,OAAQ,SAAUC,OAAQ,SAAUC,QAAS,OAC7B,WAAlBJ,EACA,CAAEE,OAAQ,SAAUC,OAAQ,OAC5B,MAEVE,QAAQ,OACRC,WAAYC,oBAAkBR,GAAQ,SAACA,SACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAYA,KAEvES,eAAgBD,oBAAkBT,GAAO,SAACA,SAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAYA,KAErEW,SAAU,EACV5B,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":"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":"bc73ab9d",column:"_7efa4861","space-small":"c93ef522","space-medium":"a3bcceae","space-large":"_6e3b6830","space-xlarge":"c8935f26","space-xxlarge":"_0f819fef","tablet-space-xsmall":"b37242bb","tablet-space-small":"bbdf9471","tablet-space-medium":"_66c6998d","tablet-space-large":"bce245a1","tablet-space-xlarge":"fdff6b7f","tablet-space-xxlarge":"e4ec3d8d","desktop-space-xsmall":"_4a75307e","desktop-space-small":"_97b495ec","desktop-space-medium":"be376830","desktop-space-large":"_9b3b7633","desktop-space-xlarge":"_791a2950","desktop-space-xxlarge":"f49836a3","columnWidth-auto":"a4c294e6","columnWidth-1-2":"de029ae3","columnWidth-1-3":"_102223f4","columnWidth-2-3":"_35209410","columnWidth-1-4":"_785d4274","columnWidth-3-4":"d4b300a7","columnWidth-1-5":"c7e02813","columnWidth-2-5":"d305894b","columnWidth-3-5":"_420612f0","columnWidth-4-5":"a9c44d9e","tablet-tablet-space-xsmall":"b8d9d8fb"};
+"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/common-types.d.ts

@@ -4,6 +4,7 @@ export declare type Space = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' |
 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"),s=require("../responsive-props.js"),i=require("../box/box.js"),t=require("./divider.module.css.js");exports.Divider=function(u){var l=u.weight,o=void 0===l?"regular":l,a=e.objectWithoutPropertiesLoose(u,["weight"]);return r.createElement(i.Box,Object.assign({as:"hr",className:[t.default.divider,"regular"!==o?s.getClassNames(t.default,"weight",o):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            as=\"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","as","className","styles","divider","getClassNames"],"mappings":"wQAYA,oBAAmBA,OAAAA,aAAS,YAAcC,sDAElCC,gBAACC,qBACGC,GAAG,KACHC,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,17 +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';
-    exceptionallySetClassName?: string;
+    /**
+     * 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" | "exceptionallySetClassName"> & 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"),a=require("../responsive-props.js"),s=require("../box/box.js"),r=require("./heading.module.css.js");exports.Heading=l.forwardRef((function(t,i){var n=t.level,o=t.weight,u=void 0===o?"regular":o,d=t.size,p=t.tone,g=void 0===p?"normal":p,m=t.children,c=t.lineClamp,f=t.exceptionallySetClassName,h=e.objectWithoutPropertiesLoose(t,["level","weight","size","tone","children","lineClamp","exceptionallySetClassName"]),v="h"+n,C="string"==typeof c?parseInt(c,10)>1:(c||0)>1;return l.createElement(s.Box,Object.assign({},h,{className:[f,r.default.heading,"regular"!==u?a.getClassNames(r.default,"weight",u):null,"normal"!==g?a.getClassNames(r.default,"tone",g):null,a.getClassNames(r.default,"size",d),C?r.default.lineClamp:null,c?a.getClassNames(r.default,"line-clamp",c.toString()):null],as:v,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    exceptionallySetClassName?: string\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n    {\n        level,\n        weight = 'regular',\n        size,\n        tone = 'normal',\n        children,\n        lineClamp,\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.lineClamp : null,\n                lineClamp ? getClassNames(styles, 'line-clamp', lineClamp.toString()) : null,\n            ]}\n            as={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","exceptionallySetClassName","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","as"],"mappings":"wQAwBgBA,cAAmD,WAW/DC,OATIC,IAAAA,UACAC,OAAAA,aAAS,YACTC,IAAAA,SACAC,KAAAA,aAAO,WACPC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,0BACGC,wHAMDC,MAAyBR,EACzBS,EACmB,iBAAdJ,EAAyBK,SAASL,EAAW,IAAM,GAAKA,GAAa,GAAK,SAGjFP,gBAACa,uBACOJ,GACJK,UAAW,CACPN,EACAO,UAAOC,QACI,YAAXb,EAAuBc,gBAAcF,UAAQ,SAAUZ,GAAU,KACxD,WAATE,EAAoBY,gBAAcF,UAAQ,OAAQV,GAAQ,KAC1DY,gBAAcF,UAAQ,OAAQX,GAC9BO,EAAyBI,UAAOR,UAAY,KAC5CA,EAAYU,gBAAcF,UAAQ,aAAcR,EAAUW,YAAc,MAE5EC,GAAIT,EACJT,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:"dc0d313f","weight-light":"_243fe799","tone-secondary":"cc7ebd5e","tone-danger":"_88837360","size-largest":"_8636903b","size-larger":"b8feff86","size-smaller":"_4ad45c57","line-clamp-1":"_57cacb08",lineClamp:"_03e5a21b","line-clamp-2":"_0ed29808","line-clamp-3":"_1952de13","line-clamp-4":"aed92dda","line-clamp-5":"cba31398"};
+"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/loading/index.d.ts

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

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+declare type Size = 'small' | 'medium' | 'large';
+declare type NativeProps = Omit<JSX.IntrinsicElements['div'], 'className' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'>;
+declare type LoadingProps = NativeProps & {
+    /**
+     * The size of the loading spinner.
+     * @default 'small'
+     */
+    size?: Size;
+    exceptionallySetClassName?: string;
+} & ({
+    /**
+     * The non-visual label used for assistive technologies.
+     */
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    /**
+     * The non-visual label used for assistive technologies.
+     */
+    'aria-labelledby': string;
+    'aria-label'?: never;
+});
+declare function Loading({ size, exceptionallySetClassName, ...props }: LoadingProps): JSX.Element;
+export { Loading };
+export type { LoadingProps };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,l=require("../box/box.js"),s=require("../spinner/spinner.js"),i={small:24,medium:36,large:48};exports.Loading=function(e){var a,n=e.size,o=void 0===n?"small":n,u=e.exceptionallySetClassName,c=r.objectWithoutPropertiesLoose(e,["size","exceptionallySetClassName"]),p=null!==(a=i[o])&&void 0!==a?a:i.small;return t.createElement(l.Box,Object.assign({},c,{className:u,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),t.createElement(s.Spinner,{size:p}))};
+//# sourceMappingURL=loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    exceptionallySetClassName?: string\n} & (\n        | {\n              /**\n               * The non-visual label used for assistive technologies.\n               */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /**\n               * The non-visual label used for assistive technologies.\n               */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","small","medium","large","size","exceptionallySetClassName","props","numericSize","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"uQAmCMA,EAAoC,CACtCC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAmBC,KAAAA,aAAO,UAASC,IAAAA,0BAA8BC,yEACvDC,YAAcP,EAAYI,kBAASJ,EAAYC,aAEjDO,gBAACC,uBACOH,GACJI,UAAWL,EACXM,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELN,gBAACO,WAAQX,KAAMG"}

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

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

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

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

package/lib/new-components/modal/modal-stories-components.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as ModalComponents from './modal';
+import type { ModalProps, ModalHeaderProps, ModalFooterProps } from './modal';
+declare function Link({ children, ...props }: JSX.IntrinsicElements['a']): JSX.Element;
+declare type ModalStoryState = Pick<ModalProps, 'width' | 'height'> & {
+    button: 'true' | 'false' | 'custom';
+    withScrollableContent: boolean;
+};
+declare function ModalStoryStateProvider({ initialState, children, }: {
+    initialState?: ModalStoryState;
+    children: React.ReactNode;
+}): JSX.Element;
+declare function ScrollableContent({ label, count }: {
+    label?: string;
+    count?: number;
+}): JSX.Element;
+declare function ModalOptionsForm({ title }: {
+    title?: React.ReactNode;
+}): JSX.Element;
+declare function ModalButton({ variant, size, children, }: {
+    variant: 'primary' | 'secondary';
+    size?: 'small';
+    children: NonNullable<React.ReactNode>;
+}): JSX.Element;
+declare namespace ModalButton {
+    var displayName: string;
+}
+declare type WithOptionals<Props, Keys extends keyof Props> = Omit<Props, Keys> & Partial<Pick<Props, Keys>>;
+declare function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width' | 'height'>): JSX.Element;
+declare function ModalHeader(props: WithOptionals<ModalHeaderProps, 'withDivider' | 'button'>): JSX.Element;
+declare const ModalBody: typeof ModalComponents.ModalBody;
+declare function ModalFooter(props: WithOptionals<ModalFooterProps, 'withDivider'>): JSX.Element;
+declare function ModalActions(props: WithOptionals<ModalFooterProps, 'withDivider'>): JSX.Element;
+export { Link, ModalStoryStateProvider, ModalOptionsForm, ModalButton as Button, ScrollableContent };
+export { Modal, ModalHeader, ModalBody, ModalFooter, ModalActions };