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

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

@@ -1,4 +1,4 @@
-var modules_54d944f2 = {"box":"_7c657f27","position-absolute":"_24f0305b","position-fixed":"f22516c3","position-relative":"dd3031f0","position-sticky":"c55e1376","tablet-position-absolute":"c01b4973","tablet-position-fixed":"fe61c08e","tablet-position-relative":"_42cf42ae","tablet-position-sticky":"_1cd29585","desktop-position-absolute":"_3bf17b40","desktop-position-fixed":"_3c190375","desktop-position-relative":"_21549264","desktop-position-sticky":"b3301c9a","display-block":"d0eafb3e","display-flex":"_29841fc9","display-inline":"be8e98ca","display-inlineBlock":"_009244ff","display-inlineFlex":"_366b4e11","display-none":"_685beb97","tablet-display-block":"ae57c505","tablet-display-flex":"e79407a2","tablet-display-inline":"_4b3944fb","tablet-display-inlineBlock":"_04228de9","tablet-display-inlineFlex":"_29bbb522","tablet-display-none":"_2d2052e6","desktop-display-block":"b1ba4d16","desktop-display-flex":"cb21a300","desktop-display-inline":"_9b2d213a","desktop-display-inlineBlock":"c6b19ae4","desktop-display-inlineFlex":"e2d9e9ae","desktop-display-none":"_69d56326","minWidth-0":"f87e83dc","minWidth-xsmall":"_2ca630ec","minWidth-small":"_7a1a60f1","minWidth-medium":"c0a2d8db","minWidth-large":"_95c19faa","minWidth-xlarge":"_4ab999ca","maxWidth-xsmall":"_1ca5dbf5","maxWidth-small":"c3ff7c04","maxWidth-medium":"_74540095","maxWidth-large":"_811b6141","maxWidth-xlarge":"_52023176","flexDirection-column":"_7ce9375b","flexDirection-row":"_953fabba","tablet-flexDirection-column":"bfc2801e","tablet-flexDirection-row":"_65c778a0","desktop-flexDirection-column":"_23be346b","desktop-flexDirection-row":"_986465f5","flexWrap-wrap":"_2c4c621c","flexWrap-nowrap":"c3633c19","flexShrink-0":"b477fff2","flexGrow-0":"b1b675a2","flexGrow-1":"_8e345e7d","alignItems-flexStart":"_9e819789","alignItems-center":"_3ae82bc9","alignItems-flexEnd":"_00f518cd","tablet-alignItems-flexStart":"ef284703","tablet-alignItems-center":"c0033f6b","tablet-alignItems-flexEnd":"_23222959","desktop-alignItems-flexStart":"f5ff68ae","desktop-alignItems-center":"eaa36a65","desktop-alignItems-flexEnd":"_2f176e1d","justifyContent-flexStart":"_4749a6dc","justifyContent-center":"c07ae3c5","justifyContent-flexEnd":"_92f94735","justifyContent-spaceBetween":"_654ccdee","tablet-justifyContent-flexStart":"_1598cc97","tablet-justifyContent-center":"a70ab2a6","tablet-justifyContent-flexEnd":"_6a961a37","tablet-justifyContent-spaceBetween":"_0d9709e0","desktop-justifyContent-flexStart":"_9f212924","desktop-justifyContent-center":"c6fbe3ef","desktop-justifyContent-flexEnd":"cdb44e6c","desktop-justifyContent-spaceBetween":"_70f074d7","overflow-hidden":"_01b1b3d3","overflow-auto":"f99741e1","overflow-visible":"_3f62d2f4","overflow-scroll":"_58821030","width-full":"_5ff2e0fb","height-full":"b43d8faa","paddingTop-xsmall":"_43d03f23","paddingTop-small":"c82a83d3","paddingTop-medium":"_05b7d9e9","paddingTop-large":"_221cd893","paddingTop-xlarge":"a303d58a","paddingTop-xxlarge":"_543c0127","tablet-paddingTop-xsmall":"a2e0fd3e","tablet-paddingTop-small":"_0bde39f9","tablet-paddingTop-medium":"_5f4af3c6","tablet-paddingTop-large":"fa89daaa","tablet-paddingTop-xlarge":"_5f9a63f3","tablet-paddingTop-xxlarge":"c45f5234","desktop-paddingTop-xsmall":"_9cf8b441","desktop-paddingTop-small":"_2813d05c","desktop-paddingTop-medium":"_8703333a","desktop-paddingTop-large":"_13793865","desktop-paddingTop-xlarge":"_240da042","desktop-paddingTop-xxlarge":"c9c7fbc2","paddingRight-xsmall":"d495bb28","paddingRight-small":"_042ac90b","paddingRight-medium":"_1b11d4ca","paddingRight-large":"bf68852a","paddingRight-xlarge":"_4e4767c7","paddingRight-xxlarge":"bfa73acf","tablet-paddingRight-xsmall":"d6462717","tablet-paddingRight-small":"f797ebe8","tablet-paddingRight-medium":"_44ba8f12","tablet-paddingRight-large":"_40c5576f","tablet-paddingRight-xlarge":"e7ee4168","tablet-paddingRight-xxlarge":"_860d8fbf","desktop-paddingRight-xsmall":"c97156fd","desktop-paddingRight-small":"c9953041","desktop-paddingRight-medium":"_37914764","desktop-paddingRight-large":"_1ca8c885","desktop-paddingRight-xlarge":"_75d49cdb","desktop-paddingRight-xxlarge":"d32fa11d","paddingBottom-xsmall":"bc3ad5d0","paddingBottom-small":"_46557bc6","paddingBottom-medium":"b923b5a7","paddingBottom-large":"_21795b21","paddingBottom-xlarge":"_1843b8d5","paddingBottom-xxlarge":"aa17bf37","tablet-paddingBottom-xsmall":"a28f6624","tablet-paddingBottom-small":"_7da0f299","tablet-paddingBottom-medium":"_50149ce3","tablet-paddingBottom-large":"a6ab60e2","tablet-paddingBottom-xlarge":"ce605666","tablet-paddingBottom-xxlarge":"b956675e","desktop-paddingBottom-xsmall":"d5326ae6","desktop-paddingBottom-small":"_6803052d","desktop-paddingBottom-medium":"_69a10a83","desktop-paddingBottom-large":"_5a8a9ae8","desktop-paddingBottom-xlarge":"_8b25ea98","desktop-paddingBottom-xxlarge":"dfd70349","paddingLeft-xsmall":"_805ae294","paddingLeft-small":"df5b5dfd","paddingLeft-medium":"eadadb70","paddingLeft-large":"_96f7a1d7","paddingLeft-xlarge":"bcc8a161","paddingLeft-xxlarge":"_3f7a75c6","tablet-paddingLeft-xsmall":"_98624fbc","tablet-paddingLeft-small":"b27f1381","tablet-paddingLeft-medium":"_21610d64","tablet-paddingLeft-large":"fa50a773","tablet-paddingLeft-xlarge":"b89f0a01","tablet-paddingLeft-xxlarge":"e9b75114","desktop-paddingLeft-xsmall":"_1d2763bd","desktop-paddingLeft-small":"_2b159c75","desktop-paddingLeft-medium":"_91d5fe19","desktop-paddingLeft-large":"_1818546c","desktop-paddingLeft-xlarge":"fe23556f","desktop-paddingLeft-xxlarge":"b69c0660","bg-default":"_191675e3","bg-aside":"c9237bd2","bg-highlight":"c6d1677f","bg-selected":"e4c307c8","borderRadius-standard":"d96494dc","borderRadius-full":"e4c4cad8","border-standard":"ba98367a"};
+var modules_54d944f2 = {"box":"_26c5201d","position-absolute":"_77c3d8d1","position-fixed":"_37cb98fb","position-relative":"df16028f","position-sticky":"_4205abac","tablet-position-absolute":"d6993b5e","tablet-position-fixed":"a015e0f5","tablet-position-relative":"_236dd3b1","tablet-position-sticky":"b7ac4837","desktop-position-absolute":"fd93a726","desktop-position-fixed":"_49228edc","desktop-position-relative":"d972b518","desktop-position-sticky":"b2a2baf3","display-block":"_22f1edd1","display-flex":"c23d2d6f","display-inline":"_5359896d","display-inlineBlock":"a54a41a6","display-inlineFlex":"d02f3d43","display-none":"_760c0710","tablet-display-block":"_64e2ebe6","tablet-display-flex":"_25274f78","tablet-display-inline":"_2077d063","tablet-display-inlineBlock":"aaed581f","tablet-display-inlineFlex":"_1d4a6eb5","tablet-display-none":"_66f24c78","desktop-display-block":"_145cca89","desktop-display-flex":"_1861c899","desktop-display-inline":"_96a720c8","desktop-display-inlineBlock":"_56acf5d5","desktop-display-inlineFlex":"_2a268e4b","desktop-display-none":"b4f30b9e","minWidth-0":"_0b071847","minWidth-xsmall":"_8b67f007","minWidth-small":"e3ec3474","minWidth-medium":"_5cccd4fc","minWidth-large":"_06eeac65","minWidth-xlarge":"ee1b6344","maxWidth-xsmall":"_2df097d0","maxWidth-small":"b771df2a","maxWidth-medium":"_00ad4e35","maxWidth-large":"_4a848dab","maxWidth-xlarge":"bf216b15","maxWidth-full":"a60a7855","flexDirection-column":"_4cf1b6c9","flexDirection-row":"e056fa5a","tablet-flexDirection-column":"b9aa8d99","tablet-flexDirection-row":"_2e8b3442","desktop-flexDirection-column":"_2162c612","desktop-flexDirection-row":"_279bf1e4","flexWrap-wrap":"_346d3a71","flexWrap-nowrap":"_786fd122","flexShrink-0":"_4b864fc2","flexGrow-0":"_795f552f","flexGrow-1":"a68bcd0f","alignItems-flexStart":"_34e24973","alignItems-center":"_648380f4","alignItems-flexEnd":"_18b4e1d6","alignItems-baseline":"_805c1b65","tablet-alignItems-flexStart":"fd4006c2","tablet-alignItems-center":"c3ba10a7","tablet-alignItems-flexEnd":"_984cd304","tablet-alignItems-baseline":"_696cc167","desktop-alignItems-flexStart":"_74133d54","desktop-alignItems-center":"_92ab46df","desktop-alignItems-flexEnd":"_177026d9","desktop-alignItems-baseline":"ebd2f31f","justifyContent-flexStart":"_4969235b","justifyContent-center":"_9594db58","justifyContent-flexEnd":"_6789fdd3","justifyContent-spaceAround":"b9902d94","justifyContent-spaceBetween":"_3c3ae41b","justifyContent-spaceEvenly":"_8dce8767","tablet-justifyContent-flexStart":"_6bd82354","tablet-justifyContent-center":"_3044c29a","tablet-justifyContent-flexEnd":"_13da8745","tablet-justifyContent-spaceAround":"_981fa9c8","tablet-justifyContent-spaceBetween":"d34811a6","tablet-justifyContent-spaceEvenly":"_53e07124","desktop-justifyContent-flexStart":"e709f277","desktop-justifyContent-center":"abc87cc4","desktop-justifyContent-flexEnd":"ce410292","desktop-justifyContent-spaceBetween":"_5ab1bc04","overflow-hidden":"_11a684c0","overflow-auto":"_2c024f85","overflow-visible":"_4d4892bd","overflow-scroll":"_22ffbb40","width-full":"_330d9b0b","height-full":"fb8deb05","bg-default":"_133f5c00","bg-aside":"b2be7ffe","bg-highlight":"a45e67ff","bg-selected":"b90226b5","borderRadius-standard":"_6e988219","borderRadius-full":"_14cf204e","border-primary":"a710cfdd","border-secondary":"_52263feb","border-tertiary":"_546ec3ef","textAlign-start":"_7fa90cb9","textAlign-center":"_54c80396","textAlign-end":"e4b1ea49","textAlign-justify":"_0eecd510","tablet-textAlign-start":"a309e75d","tablet-textAlign-center":"_67fb1a07","tablet-textAlign-end":"_0fa851ec","tablet-textAlign-justify":"_585a0e34","desktop-textAlign-start":"_5f909690","desktop-textAlign-center":"_13e03993","desktop-textAlign-end":"f142a1cb","desktop-textAlign-justify":"_2bba79a9"};
 
 export default modules_54d944f2;
 //# sourceMappingURL=box.module.css.js.map

package/es/new-components/box/margin.module.css.js

@@ -0,0 +1,4 @@
+var modules_131405ac = {"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da6","marginTop-medium":"_4ea254c1","marginTop-large":"c0844f64","marginTop-xlarge":"_213145b4","marginTop-xxlarge":"df61c84c","marginTop--xsmall":"efe72b13","marginTop--small":"_870c2768","marginTop--medium":"_0b927c57","marginTop--large":"_461db014","marginTop--xlarge":"_2a3a8cb8","marginTop--xxlarge":"_9bcda921","tablet-marginTop-xsmall":"_6add01e4","tablet-marginTop-small":"_735ef86b","tablet-marginTop-medium":"_0477d068","tablet-marginTop-large":"_2c90af97","tablet-marginTop-xlarge":"_63a82db6","tablet-marginTop-xxlarge":"_03cd7726","tablet-marginTop--xsmall":"c986a62a","tablet-marginTop--small":"be2bdcdd","tablet-marginTop--medium":"_47d2686b","tablet-marginTop--large":"_25e5af9d","tablet-marginTop--xlarge":"ee82f441","tablet-marginTop--xxlarge":"a6f9d404","desktop-marginTop-xsmall":"_4d8d9a36","desktop-marginTop-small":"e813cee7","desktop-marginTop-medium":"_56975b7d","desktop-marginTop-large":"_53b367f6","desktop-marginTop-xlarge":"d69e7311","desktop-marginTop-xxlarge":"_92f57c7e","desktop-marginTop--xsmall":"_96880d3e","desktop-marginTop--small":"dc3f3555","desktop-marginTop--medium":"_86dd06bb","desktop-marginTop--large":"c93ef12e","desktop-marginTop--xlarge":"bc8fd4a2","desktop-marginTop--xxlarge":"b12a9124","marginRight-xsmall":"_6016f4fb","marginRight-small":"b85e3dfa","marginRight-medium":"_297575f4","marginRight-large":"b401ac6c","marginRight-xlarge":"dc3ec387","marginRight-xxlarge":"_24694604","marginRight--xsmall":"_8e9bf2ee","marginRight--small":"ae9d1115","marginRight--medium":"_14e46fc3","marginRight--large":"_3370631b","marginRight--xlarge":"_3f0e9b50","marginRight--xxlarge":"bc13e010","tablet-marginRight-xsmall":"_6fa1aae3","tablet-marginRight-small":"_2976c5cb","tablet-marginRight-medium":"_38d94802","tablet-marginRight-large":"db9569b5","tablet-marginRight-xlarge":"_4a52f06d","tablet-marginRight-xxlarge":"_8a0f0410","tablet-marginRight--xsmall":"e7d40e9d","tablet-marginRight--small":"_680fde91","tablet-marginRight--medium":"_021010ca","tablet-marginRight--large":"_9e52c87c","tablet-marginRight--xlarge":"_4d602613","tablet-marginRight--xxlarge":"_21b1b65a","desktop-marginRight-xsmall":"_7321bc07","desktop-marginRight-small":"fa1721f4","desktop-marginRight-medium":"_3fd7b4b8","desktop-marginRight-large":"_4fdc2f74","desktop-marginRight-xlarge":"c0254761","desktop-marginRight-xxlarge":"_710a5f09","desktop-marginRight--xsmall":"e08bee7f","desktop-marginRight--small":"e5ab73d2","desktop-marginRight--medium":"_5e731477","desktop-marginRight--large":"_0f57a22e","desktop-marginRight--xlarge":"_25f26ed3","desktop-marginRight--xxlarge":"_11a3b4e0","marginBottom-xsmall":"_6a4f69f7","marginBottom-small":"db26b033","marginBottom-medium":"c7313022","marginBottom-large":"a5885889","marginBottom-xlarge":"_33dfbd8e","marginBottom-xxlarge":"_795ad2de","marginBottom--xsmall":"a329dbd3","marginBottom--small":"_85e739fb","marginBottom--medium":"_681f65ff","marginBottom--large":"caf50d8f","marginBottom--xlarge":"_1e084cbf","marginBottom--xxlarge":"_3dfb1c7e","tablet-marginBottom-xsmall":"ef4735be","tablet-marginBottom-small":"de55afba","tablet-marginBottom-medium":"_0e33ce88","tablet-marginBottom-large":"_8ca391fc","tablet-marginBottom-xlarge":"_3a609d23","tablet-marginBottom-xxlarge":"_3e1177e4","tablet-marginBottom--xsmall":"d384884d","tablet-marginBottom--small":"_75254cec","tablet-marginBottom--medium":"_5d9f127d","tablet-marginBottom--large":"_835f1089","tablet-marginBottom--xlarge":"dad52a72","tablet-marginBottom--xxlarge":"_8703a4bf","desktop-marginBottom-xsmall":"_90fd20e9","desktop-marginBottom-small":"f3769191","desktop-marginBottom-medium":"_156410f8","desktop-marginBottom-large":"_7fed74d0","desktop-marginBottom-xlarge":"_477dc10e","desktop-marginBottom-xxlarge":"_85c82d89","desktop-marginBottom--xsmall":"_4f09c1e0","desktop-marginBottom--small":"_9523e048","desktop-marginBottom--medium":"efe10240","desktop-marginBottom--large":"c43971e6","desktop-marginBottom--xlarge":"f9b4da15","desktop-marginBottom--xxlarge":"a10fdf70","marginLeft-xsmall":"f9be90b4","marginLeft-small":"f53218d5","marginLeft-medium":"c4a9b3ab","marginLeft-large":"_5755e2c3","marginLeft-xlarge":"_33fc9354","marginLeft-xxlarge":"_4749a3bf","marginLeft--xsmall":"c76cb3c7","marginLeft--small":"_96003c07","marginLeft--medium":"_09988d07","marginLeft--large":"b4a486f6","marginLeft--xlarge":"f396e75e","marginLeft--xxlarge":"_81d1f26d","tablet-marginLeft-xsmall":"_0a46e8f1","tablet-marginLeft-small":"_57c970af","tablet-marginLeft-medium":"_4b6099d3","tablet-marginLeft-large":"_378fcff5","tablet-marginLeft-xlarge":"f8785663","tablet-marginLeft-xxlarge":"_72f957ee","tablet-marginLeft--xsmall":"_2288c7e1","tablet-marginLeft--small":"b27c1c05","tablet-marginLeft--medium":"_702cbb13","tablet-marginLeft--large":"_1a2748b4","tablet-marginLeft--xlarge":"b8c043a5","tablet-marginLeft--xxlarge":"_8dc8ff63","desktop-marginLeft-xsmall":"c2af646d","desktop-marginLeft-small":"c03d07be","desktop-marginLeft-medium":"_915fb1d3","desktop-marginLeft-large":"_64214ee1","desktop-marginLeft-xlarge":"_7be4a22c","desktop-marginLeft-xxlarge":"_5ec0a401","desktop-marginLeft--xsmall":"ea29f1ee","desktop-marginLeft--small":"c26652c7","desktop-marginLeft--medium":"c24f6af9","desktop-marginLeft--large":"c2671f27","desktop-marginLeft--xlarge":"cc51a04e","desktop-marginLeft--xxlarge":"fd581f54"};
+
+export default modules_131405ac;
+//# sourceMappingURL=margin.module.css.js.map

package/es/new-components/box/margin.module.css.js.map

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

package/es/new-components/box/padding.module.css.js

@@ -0,0 +1,4 @@
+var modules_b537a8ee = {"paddingTop-xsmall":"c4803194","paddingTop-small":"_4e9ab24b","paddingTop-medium":"_1d226e27","paddingTop-large":"eb6097f1","paddingTop-xlarge":"d3229ba4","paddingTop-xxlarge":"_47978ba4","tablet-paddingTop-xsmall":"f987719c","tablet-paddingTop-small":"_8dbc4b4d","tablet-paddingTop-medium":"ae44fe07","tablet-paddingTop-large":"ffe9548d","tablet-paddingTop-xlarge":"f2b76a44","tablet-paddingTop-xxlarge":"c6eb8f43","desktop-paddingTop-xsmall":"_8699b560","desktop-paddingTop-small":"_02c374b7","desktop-paddingTop-medium":"_0dd0332f","desktop-paddingTop-large":"da55f1f6","desktop-paddingTop-xlarge":"_8ef2a278","desktop-paddingTop-xxlarge":"_8b493b28","paddingRight-xsmall":"_211eebc7","paddingRight-small":"ad0ccf15","paddingRight-medium":"a03e39af","paddingRight-large":"f0941ead","paddingRight-xlarge":"e47c5a43","paddingRight-xxlarge":"e849a5cf","tablet-paddingRight-xsmall":"_85374228","tablet-paddingRight-small":"_89df37b9","tablet-paddingRight-medium":"_1cc50ebe","tablet-paddingRight-large":"_1060982b","tablet-paddingRight-xlarge":"be58847d","tablet-paddingRight-xxlarge":"_45093484","desktop-paddingRight-xsmall":"f8d99d6a","desktop-paddingRight-small":"efa076d9","desktop-paddingRight-medium":"e59caa64","desktop-paddingRight-large":"da42f46a","desktop-paddingRight-xlarge":"b3ee2580","desktop-paddingRight-xxlarge":"_3ef94658","paddingBottom-xsmall":"b0e6eab4","paddingBottom-small":"_9510d053","paddingBottom-medium":"d7af60c9","paddingBottom-large":"b75f86cd","paddingBottom-xlarge":"fbd4ce29","paddingBottom-xxlarge":"_33e3ad63","tablet-paddingBottom-xsmall":"f0302da7","tablet-paddingBottom-small":"_4f9b8012","tablet-paddingBottom-medium":"_4333e20e","tablet-paddingBottom-large":"_30bbc76c","tablet-paddingBottom-xlarge":"ba5a4008","tablet-paddingBottom-xxlarge":"_423a3b1a","desktop-paddingBottom-xsmall":"b40139b7","desktop-paddingBottom-small":"f96071fa","desktop-paddingBottom-medium":"fe803c9a","desktop-paddingBottom-large":"_01686eb9","desktop-paddingBottom-xlarge":"afa763d8","desktop-paddingBottom-xxlarge":"a95785f1","paddingLeft-xsmall":"cad4e2ec","paddingLeft-small":"d70b3c17","paddingLeft-medium":"_8c851bd6","paddingLeft-large":"_078feb3c","paddingLeft-xlarge":"_76ab968c","paddingLeft-xxlarge":"aaca85d7","tablet-paddingLeft-xsmall":"_5eb0e5aa","tablet-paddingLeft-small":"_0384fb4f","tablet-paddingLeft-medium":"edffff6f","tablet-paddingLeft-large":"_873b9a46","tablet-paddingLeft-xlarge":"_89105db5","tablet-paddingLeft-xxlarge":"db1966fe","desktop-paddingLeft-xsmall":"b17f826b","desktop-paddingLeft-small":"_6dc83610","desktop-paddingLeft-medium":"_3421b8b2","desktop-paddingLeft-large":"_68cec7a6","desktop-paddingLeft-xlarge":"_94bde020","desktop-paddingLeft-xxlarge":"b94ee579"};
+
+export default modules_b537a8ee;
+//# sourceMappingURL=padding.module.css.js.map

package/es/new-components/box/padding.module.css.js.map

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

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

@@ -0,0 +1,41 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import { BaseButton } from '../base-button/base-button.js';
+
+var _excluded = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
+/**
+ * A semantic button that also looks like a button, and provides all the necessary visual variants.
+ * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
+ *
+ * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see ButtonLink
+ */
+
+var Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
+  var variant = _ref.variant,
+      _ref$tone = _ref.tone,
+      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/createElement(BaseButton, Object.assign({}, props, {
+    as: "button",
+    ref: ref,
+    variant: variant,
+    tone: tone,
+    size: size,
+    type: type,
+    disabled: disabled,
+    exceptionallySetClassName: exceptionallySetClassName
+  }));
+});
+
+export { Button };
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["Button","React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":";;;;;AAeA;;;;;;;;;IAQaA,MAAM,gBAAGC,UAAA,CAAiD,SAASD,MAAT,OAUnEE,GAVmE;MAE/DC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;2BACPC;MAAAA,sCAAW;MACXC,iCAAAA;MACGC;;AAIP,sBACIR,aAAA,CAACS,UAAD,oBACQD;AACJE,IAAAA,EAAE,EAAC;AACHT,IAAAA,GAAG,EAAEA;AACLC,IAAAA,OAAO,EAAEA;AACTC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,yBAAyB,EAAEA;IAT/B,CADJ;AAaH,CAzBqB;;;;"}

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

@@ -1,26 +1,38 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
-import { forwardRefWithAs } from '../type-helpers.js';
-import { Box } from '../box/box.js';
-import styles from './button-link.module.css.js';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { BaseButton } from '../base-button/base-button.js';
 
-var ButtonLink = /*#__PURE__*/forwardRefWithAs(function ButtonLink(_ref, ref) {
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'a' : _ref$component,
+var _excluded = ["as", "variant", "tone", "size", "exceptionallySetClassName", "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
+ */
+
+var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
+  var _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'a' : _ref$as,
       variant = _ref.variant,
+      _ref$tone = _ref.tone,
+      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'default' : _ref$size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
       _ref$openInNewTab = _ref.openInNewTab,
       openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "variant", "size", "openInNewTab"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
-    component: component,
-    display: "inlineFlex",
-    alignItems: "center",
-    justifyContent: "center",
-    className: [styles.container, 'reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null],
+  return /*#__PURE__*/createElement(BaseButton, Object.assign({}, props, {
+    as: as,
     ref: ref,
+    variant: variant,
+    tone: tone,
+    size: size,
+    exceptionallySetClassName: exceptionallySetClassName,
     target: openInNewTab ? '_blank' : undefined,
     rel: openInNewTab ? 'noopener noreferrer' : undefined
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { forwardRefWithAs } from '../type-helpers'\nimport type { OpenInNewTab } from '../common-types'\n\nimport styles from './button-link.module.css'\n\ninterface ButtonLinkProps extends OpenInNewTab {\n    variant: 'primary' | 'secondary' | 'danger'\n    size?: 'default' | 'small' | 'large'\n}\n\nconst ButtonLink = forwardRefWithAs<ButtonLinkProps>(function ButtonLink(\n    { component = 'a', variant, size = 'default', openInNewTab = false, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            component={component}\n            display=\"inlineFlex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={[\n                styles.container,\n                'reactist_button',\n                variant ? `reactist_button--${variant}` : null,\n                size !== 'default' ? `reactist_button--${size}` : null,\n            ]}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { ButtonLink }\nexport type { ButtonLinkProps }\n"],"names":["ButtonLink","forwardRefWithAs","ref","component","variant","size","openInNewTab","props","React","Box","display","alignItems","justifyContent","className","styles","container","target","undefined","rel"],"mappings":";;;;;;IAYMA,UAAU,gBAAGC,gBAAgB,CAAkB,SAASD,UAAT,OAEjDE,GAFiD;4BAC/CC;MAAAA,wCAAY;MAAKC,eAAAA;uBAASC;MAAAA,8BAAO;+BAAWC;MAAAA,8CAAe;MAAUC;;AAGvE,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJJ,IAAAA,SAAS,EAAEA;AACXO,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;AACXC,IAAAA,cAAc,EAAC;AACfC,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEP,iBAFO,EAGPX,OAAO,yBAAuBA,OAAvB,GAAmC,IAHnC,EAIPC,IAAI,KAAK,SAAT,yBAAyCA,IAAzC,GAAkD,IAJ3C;AAMXH,IAAAA,GAAG,EAAEA;AACLc,IAAAA,MAAM,EAAEV,YAAY,GAAG,QAAH,GAAcW;AAClCC,IAAAA,GAAG,EAAEZ,YAAY,GAAG,qBAAH,GAA2BW;IAdhD,CADJ;AAkBH,CAtBkC;;;;"}
+{"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":["ButtonLink","polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":";;;;;;AAaA;;;;;;;;;IAQaA,UAAU,gBAAGC,oBAAoB,CAAuB,SAASD,UAAT,OAUjEE,GAViE;qBAE7DC;MAAAA,0BAAK;MACLC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;MACPC,iCAAAA;+BACAC;MAAAA,8CAAe;MACZC;;AAIP,sBACIC,aAAA,CAACC,UAAD,oBACQF;AACJN,IAAAA,EAAE,EAAEA;AACJD,IAAAA,GAAG,EAAEA;AACLE,IAAAA,OAAO,EAAEA;AACTC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,yBAAyB,EAAEA;AAC3BK,IAAAA,MAAM,EAAEJ,YAAY,GAAG,QAAH,GAAcK;AAClCC,IAAAA,GAAG,EAAEN,YAAY,GAAG,qBAAH,GAA2BK;IAThD,CADJ;AAaH,CAzB6C;;;;"}

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

@@ -1,49 +1,72 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { useRef, useEffect, createElement } from 'react';
+import { forwardRef, useState, useRef, useEffect, createElement } from 'react';
 import { Box } from '../box/box.js';
-import { VisuallyHidden } from 'reakit/VisuallyHidden';
+import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
+import { Text } from '../text/text.js';
+import { useForkRef } from 'reakit-utils';
 import { CheckboxIcon } from './checkbox-icon.js';
 import styles from './checkbox-field.module.css.js';
 
-function CheckboxField(_ref) {
-  var _ref2;
+var _excluded = ["label", "disabled", "indeterminate", "defaultChecked", "onChange"];
+var CheckboxField = /*#__PURE__*/forwardRef(function CheckboxField(_ref, ref) {
+  var _ref2, _props$checked, _props$checked2;
 
   var label = _ref.label,
-      className = _ref.className,
-      style = _ref.style,
-      checked = _ref.checked,
-      _ref$indeterminate = _ref.indeterminate,
-      indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "className", "style", "checked", "indeterminate"]);
+      disabled = _ref.disabled,
+      indeterminate = _ref.indeterminate,
+      defaultChecked = _ref.defaultChecked,
+      _onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var isControlledComponent = typeof props.checked === 'boolean';
+
+  if (typeof indeterminate === 'boolean' && !isControlledComponent) {
+    // eslint-disable-next-line no-console
+    console.warn('Cannot use indeterminate on an uncontrolled checkbox');
+    indeterminate = undefined;
+  }
 
   if (!label && !props['aria-label'] && !props['aria-labelledby']) {
     // eslint-disable-next-line no-console
     console.warn('A Checkbox needs a label');
   }
 
-  var checkboxRef = useRef(null);
+  var _React$useState = useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
+      checkedState = _React$useState[0],
+      setChecked = _React$useState[1];
+
+  var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
+  var internalRef = useRef(null);
+  var combinedRef = useForkRef(internalRef, ref);
   useEffect(function setIndeterminate() {
-    if (checkboxRef.current) {
-      checkboxRef.current.indeterminate = indeterminate;
+    if (internalRef.current && typeof indeterminate === 'boolean') {
+      internalRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
   return /*#__PURE__*/createElement(Box, {
-    component: "label",
+    as: "label",
     display: "flex",
     alignItems: "center",
-    className: [className, styles.container, (_ref2 = {}, _ref2[styles.checked] = checked, _ref2), 'focus-marker-enabled-within'],
-    style: style
-  }, /*#__PURE__*/createElement(VisuallyHidden, null, /*#__PURE__*/createElement("input", Object.assign({}, props, {
-    ref: checkboxRef,
+    className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null, 'focus-marker-enabled-within']
+  }, /*#__PURE__*/createElement(HiddenVisually, null, /*#__PURE__*/createElement("input", Object.assign({}, props, {
+    ref: combinedRef,
     type: "checkbox",
-    checked: checked
+    checked: isChecked,
+    disabled: disabled,
+    onChange: function onChange(event) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+
+      if (!event.defaultPrevented) {
+        setChecked(event.currentTarget.checked);
+      }
+    }
   }))), /*#__PURE__*/createElement(CheckboxIcon, {
     "aria-hidden": true,
-    checked: checked,
+    checked: isChecked,
     indeterminate: indeterminate,
-    disabled: props.disabled
-  }), label ? /*#__PURE__*/createElement("span", null, label) : null);
-}
+    disabled: disabled
+  }), label ? /*#__PURE__*/createElement(Text, null, label) : null);
+});
 
 export { CheckboxField };
 //# sourceMappingURL=checkbox-field.js.map

package/es/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":["CheckboxField","label","className","style","checked","indeterminate","props","console","warn","checkboxRef","React","setIndeterminate","current","Box","component","display","alignItems","styles","container","VisuallyHidden","ref","type","CheckboxIcon","disabled"],"mappings":";;;;;;;AAYA,SAASA,aAAT;;;MACIC,aAAAA;MACAC,iBAAAA;MACAC,aAAAA;MACAC,eAAAA;gCACAC;MAAAA,gDAAgB;MACbC;;AAEH,MAAI,CAACL,KAAD,IAAU,CAACK,KAAK,CAAC,YAAD,CAAhB,IAAkC,CAACA,KAAK,CAAC,iBAAD,CAA5C,EAAiE;AAC7D;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0BAAb;AACH;;AAED,MAAMC,WAAW,GAAGC,MAAA,CAA+B,IAA/B,CAApB;AACAA,EAAAA,SAAA,CACI,SAASC,gBAAT;AACI,QAAIF,WAAW,CAACG,OAAhB,EAAyB;AACrBH,MAAAA,WAAW,CAACG,OAAZ,CAAoBP,aAApB,GAAoCA,aAApC;AACH;AACJ,GALL,EAMI,CAACA,aAAD,CANJ;AASA,sBACIK,aAAA,CAACG,GAAD;AACIC,IAAAA,SAAS,EAAC;AACVC,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;AACXd,IAAAA,SAAS,EAAE,CACPA,SADO,EAEPe,MAAM,CAACC,SAFA,qBAGJD,MAAM,CAACb,OAHH,IAGaA,OAHb,UAIP,6BAJO;AAMXD,IAAAA,KAAK,EAAEA;GAVX,eAYIO,aAAA,CAACS,cAAD,MAAA,eACIT,aAAA,QAAA,oBAAWJ;AAAOc,IAAAA,GAAG,EAAEX;AAAaY,IAAAA,IAAI,EAAC;AAAWjB,IAAAA,OAAO,EAAEA;IAA7D,CADJ,CAZJ,eAeIM,aAAA,CAACY,YAAD;;AAEIlB,IAAAA,OAAO,EAAEA;AACTC,IAAAA,aAAa,EAAEA;AACfkB,IAAAA,QAAQ,EAAEjB,KAAK,CAACiB;GAJpB,CAfJ,EAqBKtB,KAAK,gBAAGS,aAAA,OAAA,MAAA,EAAOT,KAAP,CAAH,GAA0B,IArBpC,CADJ;AAyBH;;;;"}
+{"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":["CheckboxField","React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","HiddenVisually","type","event","defaultPrevented","currentTarget","CheckboxIcon","Text"],"mappings":";;;;;;;;;;IAcMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;;;MACvEC,aAAAA;MAAOC,gBAAAA;MAAUC,qBAAAA;MAAeC,sBAAAA;MAAgBC,iBAAAA;MAAaC;;AAG/D,MAAMC,qBAAqB,GAAG,OAAOD,KAAK,CAACE,OAAb,KAAyB,SAAvD;;AACA,MAAI,OAAOL,aAAP,KAAyB,SAAzB,IAAsC,CAACI,qBAA3C,EAAkE;AAC9D;AACAE,IAAAA,OAAO,CAACC,IAAR,CAAa,sDAAb;AACAP,IAAAA,aAAa,GAAGQ,SAAhB;AACH;;AAED,MAAI,CAACV,KAAD,IAAU,CAACK,KAAK,CAAC,YAAD,CAAhB,IAAkC,CAACA,KAAK,CAAC,iBAAD,CAA5C,EAAiE;AAC7D;AACAG,IAAAA,OAAO,CAACC,IAAR,CAAa,0BAAb;AACH;;AAED,wBAAmCX,QAAA,4BAAeO,KAAK,CAACE,OAArB,2DAAgCJ,cAAhC,yCAAkD,KAAlD,CAAnC;AAAA,MAAOQ,YAAP;AAAA,MAAqBC,UAArB;;AACA,MAAMC,SAAS,sBAAGR,KAAK,CAACE,OAAT,6DAAoBI,YAAnC;AAEA,MAAMG,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;AACA,MAAMiB,WAAW,GAAGC,UAAU,CAACF,WAAD,EAAcf,GAAd,CAA9B;AACAD,EAAAA,SAAA,CACI,SAASmB,gBAAT;AACI,QAAIH,WAAW,CAACI,OAAZ,IAAuB,OAAOhB,aAAP,KAAyB,SAApD,EAA+D;AAC3DY,MAAAA,WAAW,CAACI,OAAZ,CAAoBhB,aAApB,GAAoCA,aAApC;AACH;AACJ,GALL,EAMI,CAACA,aAAD,CANJ;AASA,sBACIJ,aAAA,CAACqB,GAAD;AACIC,IAAAA,EAAE,EAAC;AACHC,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;AACXC,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEPxB,QAAQ,GAAGuB,MAAM,CAACvB,QAAV,GAAqB,IAFtB,EAGPY,SAAS,GAAGW,MAAM,CAACjB,OAAV,GAAoB,IAHtB,EAIP,6BAJO;GAJf,eAWIT,aAAA,CAAC4B,cAAD,MAAA,eACI5B,aAAA,QAAA,oBACQO;AACJN,IAAAA,GAAG,EAAEgB;AACLY,IAAAA,IAAI,EAAC;AACLpB,IAAAA,OAAO,EAAEM;AACTZ,IAAAA,QAAQ,EAAEA;AACVG,IAAAA,QAAQ,EAAE,kBAACwB,KAAD;AACNxB,MAAAA,SAAQ,SAAR,IAAAA,SAAQ,WAAR,YAAAA,SAAQ,CAAGwB,KAAH,CAAR;;AACA,UAAI,CAACA,KAAK,CAACC,gBAAX,EAA6B;AACzBjB,QAAAA,UAAU,CAACgB,KAAK,CAACE,aAAN,CAAoBvB,OAArB,CAAV;AACH;AACJ;IAXL,CADJ,CAXJ,eA0BIT,aAAA,CAACiC,YAAD;;AAEIxB,IAAAA,OAAO,EAAEM;AACTX,IAAAA,aAAa,EAAEA;AACfD,IAAAA,QAAQ,EAAEA;GAJd,CA1BJ,EAgCKD,KAAK,gBAAGF,aAAA,CAACkC,IAAD,MAAA,EAAOhC,KAAP,CAAH,GAA0B,IAhCpC,CADJ;AAoCH,CAlEqB;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_664a6a80 = {"container":"_6ba70fbf","checked":"_13189b71"};
+var modules_664a6a80 = {"container":"f9e0a1b8","disabled":"_01411889","checked":"ffdfd8fb"};
 
 export default modules_664a6a80;
 //# sourceMappingURL=checkbox-field.module.css.js.map

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

@@ -1,6 +1,7 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
 
+var _excluded = ["checked", "indeterminate", "disabled"];
 var svgPath = {
   checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
   unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
@@ -37,7 +38,7 @@ function CheckboxIcon(_ref2) {
   var checked = _ref2.checked,
       indeterminate = _ref2.indeterminate,
       disabled = _ref2.disabled,
-      props = _objectWithoutPropertiesLoose(_ref2, ["checked", "indeterminate", "disabled"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   var pathKey = getPathKey({
     checked: checked,

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-icon.js","sources":["../../../src/new-components/checkbox-field/checkbox-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst svgPath = {\n    checked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',\n    unchecked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',\n    mixed:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',\n    filled:\n        'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',\n} as const\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n    checked?: boolean\n    indeterminate?: boolean\n    disabled?: boolean\n}\n\nfunction getPathKey({ checked, indeterminate, disabled }: Props): keyof typeof svgPath {\n    if (indeterminate) {\n        return 'mixed' // indeterminate, when true, overrides the checked state\n    }\n\n    if (checked) {\n        return 'checked'\n    }\n\n    // We only used 'filled' when unchecked AND disabled, because the default unchecked icon\n    // is not enough to convey the disabled state with opacity alone. For all other cases\n    // above, when disabled, we use the same icon the corresponds to that state, and the\n    // opacity conveys the fact that the checkbox is disabled.\n    // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390\n    if (disabled) {\n        return 'filled'\n    }\n\n    return 'unchecked'\n}\n\nfunction CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props) {\n    const pathKey = getPathKey({ checked, indeterminate, disabled })\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path fill=\"currentColor\" fillRule=\"nonzero\" d={svgPath[pathKey]} />\n        </svg>\n    )\n}\n\nexport { CheckboxIcon }\n"],"names":["svgPath","checked","unchecked","mixed","filled","getPathKey","indeterminate","disabled","CheckboxIcon","props","pathKey","React","xmlns","width","height","viewBox","fill","fillRule","d"],"mappings":";;;AAEA,IAAMA,OAAO,GAAG;AACZC,EAAAA,OAAO,EACH,2LAFQ;AAGZC,EAAAA,SAAS,EACL,iJAJQ;AAKZC,EAAAA,KAAK,EACD,gHANQ;AAOZC,EAAAA,MAAM,EACF;AARQ,CAAhB;;AAiBA,SAASC,UAAT;MAAsBJ,eAAAA;MAASK,qBAAAA;MAAeC,gBAAAA;;AAC1C,MAAID,aAAJ,EAAmB;AACf,WAAO,OAAP,CADe;AAElB;;AAED,MAAIL,OAAJ,EAAa;AACT,WAAO,SAAP;AACH;AAGD;AACA;AACA;AACA;;;AACA,MAAIM,QAAJ,EAAc;AACV,WAAO,QAAP;AACH;;AAED,SAAO,WAAP;AACH;;AAED,SAASC,YAAT;MAAwBP,gBAAAA;MAASK,sBAAAA;MAAeC,iBAAAA;MAAaE;;AACzD,MAAMC,OAAO,GAAGL,UAAU,CAAC;AAAEJ,IAAAA,OAAO,EAAPA,OAAF;AAAWK,IAAAA,aAAa,EAAbA,aAAX;AAA0BC,IAAAA,QAAQ,EAARA;AAA1B,GAAD,CAA1B;AACA,sBACII,aAAA,MAAA;AACIC,IAAAA,KAAK,EAAC;AACNC,IAAAA,KAAK,EAAC;AACNC,IAAAA,MAAM,EAAC;AACPC,IAAAA,OAAO,EAAC;KACJN,MALR,eAOIE,aAAA,OAAA;AAAMK,IAAAA,IAAI,EAAC;AAAeC,IAAAA,QAAQ,EAAC;AAAUC,IAAAA,CAAC,EAAElB,OAAO,CAACU,OAAD;GAAvD,CAPJ,CADJ;AAWH;;;;"}
+{"version":3,"file":"checkbox-icon.js","sources":["../../../src/new-components/checkbox-field/checkbox-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst svgPath = {\n    checked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',\n    unchecked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',\n    mixed:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',\n    filled:\n        'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',\n} as const\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n    checked?: boolean\n    indeterminate?: boolean\n    disabled?: boolean\n}\n\nfunction getPathKey({ checked, indeterminate, disabled }: Props): keyof typeof svgPath {\n    if (indeterminate) {\n        return 'mixed' // indeterminate, when true, overrides the checked state\n    }\n\n    if (checked) {\n        return 'checked'\n    }\n\n    // We only used 'filled' when unchecked AND disabled, because the default unchecked icon\n    // is not enough to convey the disabled state with opacity alone. For all other cases\n    // above, when disabled, we use the same icon the corresponds to that state, and the\n    // opacity conveys the fact that the checkbox is disabled.\n    // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390\n    if (disabled) {\n        return 'filled'\n    }\n\n    return 'unchecked'\n}\n\nfunction CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props) {\n    const pathKey = getPathKey({ checked, indeterminate, disabled })\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path fill=\"currentColor\" fillRule=\"nonzero\" d={svgPath[pathKey]} />\n        </svg>\n    )\n}\n\nexport { CheckboxIcon }\n"],"names":["svgPath","checked","unchecked","mixed","filled","getPathKey","indeterminate","disabled","CheckboxIcon","props","pathKey","React","xmlns","width","height","viewBox","fill","fillRule","d"],"mappings":";;;;AAEA,IAAMA,OAAO,GAAG;AACZC,EAAAA,OAAO,EACH,2LAFQ;AAGZC,EAAAA,SAAS,EACL,iJAJQ;AAKZC,EAAAA,KAAK,EACD,gHANQ;AAOZC,EAAAA,MAAM,EACF;AARQ,CAAhB;;AAiBA,SAASC,UAAT;MAAsBJ,eAAAA;MAASK,qBAAAA;MAAeC,gBAAAA;;AAC1C,MAAID,aAAJ,EAAmB;AACf,WAAO,OAAP,CADe;AAElB;;AAED,MAAIL,OAAJ,EAAa;AACT,WAAO,SAAP;AACH;AAGD;AACA;AACA;AACA;;;AACA,MAAIM,QAAJ,EAAc;AACV,WAAO,QAAP;AACH;;AAED,SAAO,WAAP;AACH;;AAED,SAASC,YAAT;MAAwBP,gBAAAA;MAASK,sBAAAA;MAAeC,iBAAAA;MAAaE;;AACzD,MAAMC,OAAO,GAAGL,UAAU,CAAC;AAAEJ,IAAAA,OAAO,EAAPA,OAAF;AAAWK,IAAAA,aAAa,EAAbA,aAAX;AAA0BC,IAAAA,QAAQ,EAARA;AAA1B,GAAD,CAA1B;AACA,sBACII,aAAA,MAAA;AACIC,IAAAA,KAAK,EAAC;AACNC,IAAAA,KAAK,EAAC;AACNC,IAAAA,MAAM,EAAC;AACPC,IAAAA,OAAO,EAAC;KACJN,MALR,eAOIE,aAAA,OAAA;AAAMK,IAAAA,IAAI,EAAC;AAAeC,IAAAA,QAAQ,EAAC;AAAUC,IAAAA,CAAC,EAAElB,OAAO,CAACU,OAAD;GAAvD,CAPJ,CADJ;AAWH;;;;"}

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

@@ -1,41 +1,55 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
-import { forwardRefWithAs } from '../type-helpers.js';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { getClassNames, mapResponsiveProp } from '../responsive-props.js';
 import { Box } from '../box/box.js';
 import styles from './columns.module.css.js';
 
-var Column = /*#__PURE__*/forwardRefWithAs(function Column(_ref, ref) {
+var _excluded = ["width", "children", "exceptionallySetClassName"],
+    _excluded2 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
+var Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? 'auto' : _ref$width,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "width", "children"]);
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(Box, Object.assign({
-    className: [styles.column, width !== 'content' ? getClassNames(styles, 'columnWidth', width.replace('/', '-')) : null],
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    className: [exceptionallySetClassName, styles.column, width !== 'content' ? getClassNames(styles, 'columnWidth', width.replace('/', '-')) : null],
     minWidth: 0,
     width: width !== 'content' ? 'full' : undefined,
+    height: "full",
     flexShrink: width === 'content' ? 0 : undefined,
     ref: ref
-  }, props), children);
+  }), children);
 });
-var Columns = /*#__PURE__*/forwardRefWithAs(function Columns(_ref2, ref) {
+var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
   var space = _ref2.space,
-      align = _ref2.align,
-      alignY = _ref2.alignY,
+      _ref2$align = _ref2.align,
+      align = _ref2$align === void 0 ? 'left' : _ref2$align,
+      _ref2$alignY = _ref2.alignY,
+      alignY = _ref2$alignY === void 0 ? 'top' : _ref2$alignY,
       collapseBelow = _ref2.collapseBelow,
       children = _ref2.children,
-      props = _objectWithoutPropertiesLoose(_ref2, ["space", "align", "alignY", "collapseBelow", "children"]);
+      exceptionallySetClassName = _ref2.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
-    className: getClassNames(styles, 'space', space),
-    flexDirection: collapseBelow === 'desktop' ? ['column', 'column', 'row'] : collapseBelow === 'tablet' ? ['column', 'row'] : 'row',
+    className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
     display: "flex",
+    flexDirection: collapseBelow === 'desktop' ? {
+      mobile: 'column',
+      tablet: 'column',
+      desktop: 'row'
+    } : collapseBelow === 'tablet' ? {
+      mobile: 'column',
+      tablet: 'row'
+    } : 'row',
     alignItems: mapResponsiveProp(alignY, function (alignY) {
-      return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center';
+      return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY;
     }),
     justifyContent: mapResponsiveProp(align, function (align) {
-      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
+      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align;
     }),
     ref: ref
   }), children);

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

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../src/new-components/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport { forwardRefWithAs } from '../type-helpers'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './columns.module.css'\n\ntype ColumnWidth =\n    | 'auto'\n    | 'content'\n    | '1/2'\n    | '1/3'\n    | '2/3'\n    | '1/4'\n    | '3/4'\n    | '1/5'\n    | '2/5'\n    | '3/5'\n    | '4/5'\n\ninterface ColumnProps {\n    width?: ColumnWidth\n}\n\nconst Column = forwardRefWithAs<ColumnProps>(function Column(\n    { component, width = 'auto', children, ...props },\n    ref,\n) {\n    return (\n        <Box\n            className={[\n                styles.column,\n                width !== 'content'\n                    ? getClassNames(styles, 'columnWidth', width.replace('/', '-'))\n                    : null,\n            ]}\n            minWidth={0}\n            width={width !== 'content' ? 'full' : undefined}\n            flexShrink={width === 'content' ? 0 : undefined}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </Box>\n    )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom'\ntype ColumnsCollapseBelow = ResponsiveBreakpoints\n\ninterface ColumnsProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<ColumnsHorizontalAlignment>\n    alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n    collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = forwardRefWithAs<ColumnsProps>(function Columns(\n    { space, align, alignY, collapseBelow, children, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={getClassNames(styles, 'space', space)}\n            flexDirection={\n                collapseBelow === 'desktop'\n                    ? ['column', 'column', 'row']\n                    : collapseBelow === 'tablet'\n                    ? ['column', 'row']\n                    : 'row'\n            }\n            display=\"flex\"\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',\n            )}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type {\n    ColumnProps,\n    ColumnsProps,\n    ColumnWidth,\n    ColumnsCollapseBelow,\n    ColumnsHorizontalAlignment,\n    ColumnsVerticalAlignment,\n}\n\nexport { Column, Columns }\n"],"names":["Column","forwardRefWithAs","ref","width","children","props","React","Box","className","styles","column","getClassNames","replace","minWidth","undefined","flexShrink","Columns","space","align","alignY","collapseBelow","flexDirection","display","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;IA4BMA,MAAM,gBAAGC,gBAAgB,CAAc,SAASD,MAAT,OAEzCE,GAFyC;wBAC5BC;MAAAA,gCAAQ;MAAQC,gBAAAA;MAAaC;;AAG1C,sBACIC,aAAA,CAACC,GAAD;AACIC,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,MADA,EAEPP,KAAK,KAAK,SAAV,GACMQ,aAAa,CAACF,MAAD,EAAS,aAAT,EAAwBN,KAAK,CAACS,OAAN,CAAc,GAAd,EAAmB,GAAnB,CAAxB,CADnB,GAEM,IAJC;AAMXC,IAAAA,QAAQ,EAAE;AACVV,IAAAA,KAAK,EAAEA,KAAK,KAAK,SAAV,GAAsB,MAAtB,GAA+BW;AACtCC,IAAAA,UAAU,EAAEZ,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0BW;AACtCZ,IAAAA,GAAG,EAAEA;KACDG,MAXR,EAaKD,QAbL,CADJ;AAiBH,CArB8B;IAkCzBY,OAAO,gBAAGf,gBAAgB,CAAe,SAASe,OAAT,QAE3Cd,GAF2C;MACzCe,cAAAA;MAAOC,cAAAA;MAAOC,eAAAA;MAAQC,sBAAAA;MAAehB,iBAAAA;MAAaC;;AAGpD,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJG,IAAAA,SAAS,EAAEG,aAAa,CAACF,MAAD,EAAS,OAAT,EAAkBQ,KAAlB;AACxBI,IAAAA,aAAa,EACTD,aAAa,KAAK,SAAlB,GACM,CAAC,QAAD,EAAW,QAAX,EAAqB,KAArB,CADN,GAEMA,aAAa,KAAK,QAAlB,GACA,CAAC,QAAD,EAAW,KAAX,CADA,GAEA;AAEVE,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAEC,iBAAiB,CAACL,MAAD,EAAS,UAACA,MAAD;AAAA,aAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkC,QADjC;AAAA,KAAT;AAG7BM,IAAAA,cAAc,EAAED,iBAAiB,CAACN,KAAD,EAAQ,UAACA,KAAD;AAAA,aACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgC,QAD5B;AAAA,KAAR;AAGjChB,IAAAA,GAAG,EAAEA;IAjBT,EAmBKE,QAnBL,CADJ;AAuBH,CA3B+B;;;;"}
+{"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":";;;;;;;;;IA4BMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;wBAClDC;MAAAA,gCAAQ;MAAQC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAG1D,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJG,IAAAA,SAAS,EAAE,CACPJ,yBADO,EAEPK,MAAM,CAACC,MAFA,EAGPR,KAAK,KAAK,SAAV,GACMS,aAAa,CAACF,MAAD,EAAS,aAAT,EAAwBP,KAAK,CAACU,OAAN,CAAc,GAAd,EAAmB,GAAnB,CAAxB,CADnB,GAEM,IALC;AAOXC,IAAAA,QAAQ,EAAE;AACVX,IAAAA,KAAK,EAAEA,KAAK,KAAK,SAAV,GAAsB,MAAtB,GAA+BY;AACtCC,IAAAA,MAAM,EAAC;AACPC,IAAAA,UAAU,EAAEd,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0BY;AACtCb,IAAAA,GAAG,EAAEA;IAbT,EAeKE,QAfL,CADJ;AAmBH,CAvBkC;IAoC7Bc,OAAO,gBAAGjB,oBAAoB,CAAsB,SAASiB,OAAT,QAUtDhB,GAVsD;MAElDiB,cAAAA;0BACAC;MAAAA,iCAAQ;2BACRC;MAAAA,mCAAS;MACTC,sBAAAA;MACAlB,iBAAAA;MACAC,kCAAAA;MACGC;;AAIP,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJG,IAAAA,SAAS,EAAE,CAACJ,yBAAD,EAA4BO,aAAa,CAACF,MAAD,EAAS,OAAT,EAAkBS,KAAlB,CAAzC;AACXI,IAAAA,OAAO,EAAC;AACRC,IAAAA,aAAa,EACTF,aAAa,KAAK,SAAlB,GACM;AAAEG,MAAAA,MAAM,EAAE,QAAV;AAAoBC,MAAAA,MAAM,EAAE,QAA5B;AAAsCC,MAAAA,OAAO,EAAE;AAA/C,KADN,GAEML,aAAa,KAAK,QAAlB,GACA;AAAEG,MAAAA,MAAM,EAAE,QAAV;AAAoBC,MAAAA,MAAM,EAAE;AAA5B,KADA,GAEA;AAEVE,IAAAA,UAAU,EAAEC,iBAAiB,CAACR,MAAD,EAAS,UAACA,MAAD;AAAA,aAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkCA,MADjC;AAAA,KAAT;AAG7BS,IAAAA,cAAc,EAAED,iBAAiB,CAACT,KAAD,EAAQ,UAACA,KAAD;AAAA,aACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgCA,KAD5B;AAAA,KAAR;AAGjClB,IAAAA,GAAG,EAAEA;IAjBT,EAmBKE,QAnBL,CADJ;AAuBH,CAnCmC;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_67f2d07a = {"space-xsmall":"_404dd1d2","column":"ba843812","space-small":"_68f43f2f","space-medium":"_56c030a5","space-large":"_68ba4cde","space-xlarge":"d0bbcce8","space-xxlarge":"cffd4d47","tablet-space-xsmall":"_9f5eab66","tablet-space-small":"_87cfd3ad","tablet-space-medium":"_77aa72c8","tablet-space-large":"_8c23eb98","tablet-space-xlarge":"_46a0eb6f","tablet-space-xxlarge":"_392aadd9","desktop-space-xsmall":"cb9101af","desktop-space-small":"fd2027f1","desktop-space-medium":"f2556874","desktop-space-large":"f384b196","desktop-space-xlarge":"_70eeac35","desktop-space-xxlarge":"_38ebe435","columnWidth-auto":"fb022b2e","columnWidth-1-2":"f80b1c59","columnWidth-1-3":"_29dbf9cb","columnWidth-2-3":"f928dd14","columnWidth-1-4":"dae94143","columnWidth-3-4":"_1896fe55","columnWidth-1-5":"a20fe1a9","columnWidth-2-5":"d8316fb5","columnWidth-3-5":"_2add1195","columnWidth-4-5":"_17e07039","tablet-tablet-space-xsmall":"c3b80a0f"};
+var modules_67f2d07a = {"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"};
 
 export default modules_67f2d07a;
 //# sourceMappingURL=columns.module.css.js.map

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

@@ -4,14 +4,16 @@ import { getClassNames } from '../responsive-props.js';
 import { Box } from '../box/box.js';
 import styles from './divider.module.css.js';
 
+var _excluded = ["weight"];
+
 function Divider(_ref) {
   var _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
-      props = _objectWithoutPropertiesLoose(_ref, ["weight"]);
+      weight = _ref$weight === void 0 ? 'tertiary' : _ref$weight,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/createElement(Box, Object.assign({
-    component: "hr",
-    className: [styles.divider, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null]
+    as: "hr",
+    className: getClassNames(styles, 'weight', weight)
   }, props));
 }
 

package/es/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":["Divider","weight","props","React","Box","component","className","styles","divider","getClassNames"],"mappings":";;;;;;AAYA,SAASA,OAAT;yBAAmBC;MAAAA,kCAAS;MAAcC;;AACtC,sBACIC,aAAA,CAACC,GAAD;AACIC,IAAAA,SAAS,EAAC;AACVC,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,OADA,EAEPP,MAAM,KAAK,SAAX,GAAuBQ,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBN,MAAnB,CAApC,GAAiE,IAF1D;KAIPC,MANR,CADJ;AAUH;;;;"}
+{"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":["Divider","weight","props","React","Box","as","className","getClassNames","styles"],"mappings":";;;;;;;;AAWA,SAASA,OAAT;yBAAmBC;MAAAA,kCAAS;MAAeC;;AACvC,sBAAOC,aAAA,CAACC,GAAD;AAAKC,IAAAA,EAAE,EAAC;AAAKC,IAAAA,SAAS,EAAEC,aAAa,CAACC,MAAD,EAAS,QAAT,EAAmBP,MAAnB;KAAgCC,MAArE,CAAP;AACH;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_c742c4d7 = {"divider":"_9b6c04bf","weight-strong":"_6354eb7c"};
+var modules_c742c4d7 = {"weight-primary":"_3f3a401c","weight-secondary":"_03b05b70","weight-tertiary":"b6f67ff8"};
 
 export default modules_c742c4d7;
 //# sourceMappingURL=divider.module.css.js.map

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

@@ -4,6 +4,7 @@ import { getClassNames } from '../responsive-props.js';
 import { Box } from '../box/box.js';
 import styles from './heading.module.css.js';
 
+var _excluded = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
 var Heading = /*#__PURE__*/forwardRef(function Heading(_ref, ref) {
   var level = _ref.level,
       _ref$weight = _ref.weight,
@@ -13,15 +14,21 @@ var Heading = /*#__PURE__*/forwardRef(function Heading(_ref, ref) {
       tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
       children = _ref.children,
       lineClamp = _ref.lineClamp,
-      props = _objectWithoutPropertiesLoose(_ref, ["level", "weight", "size", "tone", "children", "lineClamp"]);
+      align = _ref.align,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   // In TypeScript v4.1, this would be properly recognized without needing the type assertion
   // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
   var headingElementName = "h" + level;
   var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
   return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
-    className: [styles.heading, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, getClassNames(styles, 'size', size), lineClampMultipleLines ? styles.lineClamp : null, lineClamp ? getClassNames(styles, 'line-clamp', lineClamp.toString()) : null],
-    component: headingElementName,
+    className: [exceptionallySetClassName, styles.heading, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, getClassNames(styles, 'size', size), lineClampMultipleLines ? styles.lineClampMultipleLines : null, lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null],
+    textAlign: align,
+    // Prevents emojis from being cut-off
+    // See https://github.com/Doist/reactist/pull/528
+    paddingRight: lineClamp ? 'xsmall' : undefined,
+    as: headingElementName,
     ref: ref
   }), children);
 });