@doist/reactist 10.0.0 → 11.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"hidden.js","sources":["../../../src/new-components/hidden/hidden.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport styles from './hidden.module.css'\nimport type { ResponsiveBreakpoints } from '../responsive-props'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\ntype AboveProp = {\n    /**\n     * Hides the element on viewport sizes equal or larger to the one given.\n     *\n     * It is not supported to pass it alongside `below`, and the resulting behavior is undefined\n     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).\n     *\n     * @see below\n     */\n    above: Exclude<ResponsiveBreakpoints, 'desktop'>\n    below?: never\n}\n\ntype BelowProp = {\n    /**\n     * Hides the element on viewport sizes equal or smaller to the one given.\n     *\n     * It is not supported to pass it alongside `above`, and the resulting behavior is undefined\n     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).\n     *\n     * @see above\n     */\n    below: Exclude<ResponsiveBreakpoints, 'mobile'>\n    above?: never\n}\n\ntype CommonProps = {\n    children: React.ReactNode\n    /**\n     * hides the element when on print media.\n     */\n    print?: boolean\n    /**\n     * Useful if you want the element to be an inline element when it is visible.\n     */\n    display?: 'inline' | 'block'\n}\n\ntype HiddenProps = CommonProps & (AboveProp | BelowProp | Required<Pick<CommonProps, 'print'>>)\n\n/**\n * A component that allows to specify how to hide itself on certain responsive screen sizes, or on\n * print media.\n *\n * @see HiddenProps\n * @see HiddenVisually for hiding content only visually, while keeping it available for assistive\n *   technologies.\n */\nconst Hidden = polymorphicComponent<'div', HiddenProps>(function Hidden(\n    { display = 'block', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const hiddenOnPrint = 'print' in props && props.print\n\n    const hiddenOnDesktop = 'above' in props\n    const hiddenOnMobile = 'below' in props\n    const hiddenOnTablet =\n        ('below' in props && props.below === 'desktop') ||\n        ('above' in props && props.above === 'mobile')\n\n    if (hiddenOnDesktop && hiddenOnMobile) {\n        // eslint-disable-next-line no-console\n        console.warn('<Hidden /> should receive either above=\"…\" or below=\"…\" but not both')\n    }\n\n    if (!hiddenOnDesktop && !hiddenOnMobile && !hiddenOnPrint) {\n        // eslint-disable-next-line no-console\n        console.warn('<Hidden /> did not receive any criteria to hide itself')\n    }\n\n    // We need to delete these so they do not get forwarded to the Box\n    if ('above' in props) delete props['above']\n    if ('below' in props) delete props['below']\n    if ('print' in props) delete props['print']\n\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            className={[exceptionallySetClassName, hiddenOnPrint ? styles.hiddenOnPrint : null]}\n            display={\n                hiddenOnDesktop && hiddenOnMobile\n                    ? 'none'\n                    : {\n                          mobile: hiddenOnMobile ? 'none' : display,\n                          tablet: hiddenOnTablet ? 'none' : display,\n                          desktop: hiddenOnDesktop ? 'none' : display,\n                      }\n            }\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport { Hidden }\nexport type { HiddenProps }\n"],"names":["Hidden","polymorphicComponent","ref","display","children","exceptionallySetClassName","props","hiddenOnPrint","print","hiddenOnDesktop","hiddenOnMobile","hiddenOnTablet","below","above","console","warn","React","Box","className","styles","mobile","tablet","desktop"],"mappings":";;;;;;;AA8CA;;;;;;;;;IAQMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;0BAClDC;MAAAA,oCAAU;MAASC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAG7D,MAAMC,aAAa,GAAG,WAAWD,KAAX,IAAoBA,KAAK,CAACE,KAAhD;AAEA,MAAMC,eAAe,IAAG,WAAWH,KAAd,CAArB;AACA,MAAMI,cAAc,IAAG,WAAWJ,KAAd,CAApB;AACA,MAAMK,cAAc,GACf,WAAWL,KAAX,IAAoBA,KAAK,CAACM,KAAN,KAAgB,SAArC,IACC,WAAWN,KAAX,IAAoBA,KAAK,CAACO,KAAN,KAAgB,QAFzC;;AAIA,MAAIJ,eAAe,IAAIC,cAAvB,EAAuC;AACnC;AACAI,IAAAA,OAAO,CAACC,IAAR,CAAa,sEAAb;AACH;;AAED,MAAI,CAACN,eAAD,IAAoB,CAACC,cAArB,IAAuC,CAACH,aAA5C,EAA2D;AACvD;AACAO,IAAAA,OAAO,CAACC,IAAR,CAAa,wDAAb;AACH;;;AAGD,MAAI,WAAWT,KAAf,EAAsB,OAAOA,KAAK,CAAC,OAAD,CAAZ;AACtB,MAAI,WAAWA,KAAf,EAAsB,OAAOA,KAAK,CAAC,OAAD,CAAZ;AACtB,MAAI,WAAWA,KAAf,EAAsB,OAAOA,KAAK,CAAC,OAAD,CAAZ;AAEtB,sBACIU,aAAA,CAACC,GAAD,oBACQX;AACJJ,IAAAA,GAAG,EAAEA;AACLgB,IAAAA,SAAS,EAAE,CAACb,yBAAD,EAA4BE,aAAa,GAAGY,MAAM,CAACZ,aAAV,GAA0B,IAAnE;AACXJ,IAAAA,OAAO,EACHM,eAAe,IAAIC,cAAnB,GACM,MADN,GAEM;AACIU,MAAAA,MAAM,EAAEV,cAAc,GAAG,MAAH,GAAYP,OADtC;AAEIkB,MAAAA,MAAM,EAAEV,cAAc,GAAG,MAAH,GAAYR,OAFtC;AAGImB,MAAAA,OAAO,EAAEb,eAAe,GAAG,MAAH,GAAYN;AAHxC;IAPd,EAcKC,QAdL,CADJ;AAkBH,CA7CkC;;;;"}

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

@@ -0,0 +1,4 @@
+var modules_4689e97e = {"hiddenOnPrint":"_0e595dea"};
+
+export default modules_4689e97e;
+//# sourceMappingURL=hidden.module.css.js.map

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

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

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

@@ -0,0 +1,22 @@
+import { createElement } from 'react';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { Box } from '../box/box.js';
+import styles from './hidden-visually.module.css.js';
+
+/**
+ * Provides content to assistive technologies while hiding it from the screen.
+ *
+ * @see Hidden for fully hiding content, and only under certain conditions.
+ */
+
+var HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually(props, ref) {
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    ref: ref,
+    position: "absolute",
+    overflow: "hidden",
+    className: styles.hiddenVisually
+  }));
+});
+
+export { HiddenVisually };
+//# sourceMappingURL=hidden-visually.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hidden-visually.js","sources":["../../../src/new-components/hidden-visually/hidden-visually.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport styles from './hidden-visually.module.css'\n\ntype Props = {\n    children: React.ReactNode\n}\n\n/**\n * Provides content to assistive technologies while hiding it from the screen.\n *\n * @see Hidden for fully hiding content, and only under certain conditions.\n */\nconst HiddenVisually = polymorphicComponent<'div', Props, 'omitClassName'>(function HiddenVisually(\n    props,\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            position=\"absolute\"\n            overflow=\"hidden\"\n            className={styles.hiddenVisually}\n        />\n    )\n})\n\nexport { HiddenVisually }\n"],"names":["HiddenVisually","polymorphicComponent","props","ref","React","Box","position","overflow","className","styles","hiddenVisually"],"mappings":";;;;;AASA;;;;;;IAKMA,cAAc,gBAAGC,oBAAoB,CAAgC,SAASD,cAAT,CACvEE,KADuE,EAEvEC,GAFuE;AAIvE,sBACIC,aAAA,CAACC,GAAD,oBACQH;AACJC,IAAAA,GAAG,EAAEA;AACLG,IAAAA,QAAQ,EAAC;AACTC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,SAAS,EAAEC,MAAM,CAACC;IALtB,CADJ;AASH,CAb0C;;;;"}

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

@@ -0,0 +1,4 @@
+var modules_61c16c43 = {"hiddenVisually":"_618235b7"};
+
+export default modules_61c16c43;
+//# sourceMappingURL=hidden-visually.module.css.js.map

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

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

package/es/new-components/icons/alert-icon.js

@@ -0,0 +1,77 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement } from 'react';
+
+var _excluded = ["tone"];
+var alertIconForTone = {
+  info: AlertInfoIcon,
+  positive: AlertPositiveIcon,
+  caution: AlertCautionIcon,
+  critical: AlertCriticalIcon
+};
+
+function AlertIcon(_ref) {
+  var tone = _ref.tone,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var Icon = alertIconForTone[tone];
+  return Icon ? /*#__PURE__*/createElement(Icon, Object.assign({}, props)) : null;
+}
+
+function AlertInfoIcon(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertPositiveIcon(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertCautionIcon(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertCriticalIcon(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z",
+    fill: "currentColor"
+  }));
+}
+
+export { AlertIcon };
+//# sourceMappingURL=alert-icon.js.map

package/es/new-components/icons/alert-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-icon.js","sources":["../../../src/new-components/icons/alert-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\n\nconst alertIconForTone: Record<AlertTone, typeof AlertInfoIcon> = {\n    info: AlertInfoIcon,\n    positive: AlertPositiveIcon,\n    caution: AlertCautionIcon,\n    critical: AlertCriticalIcon,\n}\n\nfunction AlertIcon({ tone, ...props }: JSX.IntrinsicElements['svg'] & { tone: AlertTone }) {\n    const Icon = alertIconForTone[tone]\n    return Icon ? <Icon {...props} /> : null\n}\n\nfunction AlertInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertCautionIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nfunction AlertCriticalIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { AlertIcon }\n"],"names":["alertIconForTone","info","AlertInfoIcon","positive","AlertPositiveIcon","caution","AlertCautionIcon","critical","AlertCriticalIcon","AlertIcon","tone","props","Icon","React","width","height","fill","xmlns","fillRule","clipRule","d"],"mappings":";;;;AAGA,IAAMA,gBAAgB,GAA4C;AAC9DC,EAAAA,IAAI,EAAEC,aADwD;AAE9DC,EAAAA,QAAQ,EAAEC,iBAFoD;AAG9DC,EAAAA,OAAO,EAAEC,gBAHqD;AAI9DC,EAAAA,QAAQ,EAAEC;AAJoD,CAAlE;;AAOA,SAASC,SAAT;MAAqBC,YAAAA;MAASC;;AAC1B,MAAMC,IAAI,GAAGZ,gBAAgB,CAACU,IAAD,CAA7B;AACA,SAAOE,IAAI,gBAAGC,aAAA,CAACD,IAAD,oBAAUD,MAAV,CAAH,GAAyB,IAApC;AACH;;AAED,SAAST,aAAT,CAAuBS,KAAvB;AACI,sBACIE,aAAA,MAAA;AAAKC,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCN,MAA/E,eACIE,aAAA,OAAA;AACIK,IAAAA,QAAQ,EAAC;AACTC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,CAAC,EAAC;AACFJ,IAAAA,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;AAED,SAASZ,iBAAT,CAA2BO,KAA3B;AACI,sBACIE,aAAA,MAAA;AAAKC,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCN,MAA/E,eACIE,aAAA,OAAA;AACIK,IAAAA,QAAQ,EAAC;AACTC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,CAAC,EAAC;AACFJ,IAAAA,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;AAED,SAASV,gBAAT,CAA0BK,KAA1B;AACI,sBACIE,aAAA,MAAA;AAAKC,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCN,MAA/E,eACIE,aAAA,OAAA;AACIK,IAAAA,QAAQ,EAAC;AACTC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,CAAC,EAAC;AACFJ,IAAAA,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;AAED,SAASR,iBAAT,CAA2BG,KAA3B;AACI,sBACIE,aAAA,MAAA;AAAKC,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCN,MAA/E,eACIE,aAAA,OAAA;AACIK,IAAAA,QAAQ,EAAC;AACTC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,CAAC,EAAC;AACFJ,IAAAA,IAAI,EAAC;GAJT,CADJ,CADJ;AAUH;;;;"}

package/es/new-components/icons/close-icon.js

@@ -0,0 +1,15 @@
+import { createElement } from 'react';
+
+function CloseIcon(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/createElement("path", {
+    fill: "currentColor",
+    d: "M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z"
+  }));
+}
+
+export { CloseIcon };
+//# sourceMappingURL=close-icon.js.map

package/es/new-components/icons/close-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close-icon.js","sources":["../../../src/new-components/icons/close-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nfunction CloseIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" {...props}>\n            <path\n                fill=\"currentColor\"\n                d=\"M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z\"\n            />\n        </svg>\n    )\n}\n\nexport { CloseIcon }\n"],"names":["CloseIcon","props","React","xmlns","width","height","fill","d"],"mappings":";;AAEA,SAASA,SAAT,CAAmBC,KAAnB;AACI,sBACIC,aAAA,MAAA;AAAKC,IAAAA,KAAK,EAAC;AAA6BC,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;KAASJ,MAAnE,eACIC,aAAA,OAAA;AACII,IAAAA,IAAI,EAAC;AACLC,IAAAA,CAAC,EAAC;GAFN,CADJ,CADJ;AAQH;;;;"}

package/es/new-components/icons/password-hidden-icon.js

@@ -0,0 +1,29 @@
+import { createElement } from 'react';
+
+function PasswordHiddenIcon(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/createElement("g", {
+    fill: "gray",
+    fillRule: "evenodd",
+    transform: "translate(2 4)"
+  }, /*#__PURE__*/createElement("path", {
+    fillRule: "nonzero",
+    d: "M13.047 2.888C11.962 2.294 10.944 2 10 2 7.56 2 4.63 3.966 1.288 8c1.133 1.368 2.218 2.497 3.253 3.394l-.708.708c-1.068-.93-2.173-2.085-3.315-3.464a1 1 0 0 1 0-1.276C4.031 3.121 7.192 1 10 1c1.196 0 2.456.385 3.78 1.154l-.733.734zm-6.02 10.263C8.084 13.72 9.076 14 10 14c2.443 0 5.373-1.969 8.712-6-1.11-1.34-2.176-2.453-3.193-3.341l.708-.709C17.437 5.013 18.695 6.363 20 8c-3.721 4.667-7.054 7-10 7-1.175 0-2.411-.371-3.709-1.113l.735-.736z"
+  }), /*#__PURE__*/createElement("path", {
+    fillRule: "nonzero",
+    d: "M8.478 11.7l.79-.79a3 3 0 0 0 3.642-3.642l.79-.79A4 4 0 0 1 8.477 11.7zM6.334 9.602a4 4 0 0 1 5.268-5.268l-.78.78A3.002 3.002 0 0 0 7.113 8.82l-.78.78z"
+  }), /*#__PURE__*/createElement("rect", {
+    width: "21",
+    height: "1",
+    x: "-.722",
+    y: "7.778",
+    rx: ".5",
+    transform: "rotate(-45 9.778 8.278)"
+  })));
+}
+
+export { PasswordHiddenIcon };
+//# sourceMappingURL=password-hidden-icon.js.map

package/es/new-components/icons/password-hidden-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-hidden-icon.js","sources":["../../../src/new-components/icons/password-hidden-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nfunction PasswordHiddenIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" {...props}>\n            <g fill=\"gray\" fillRule=\"evenodd\" transform=\"translate(2 4)\">\n                <path\n                    fillRule=\"nonzero\"\n                    d=\"M13.047 2.888C11.962 2.294 10.944 2 10 2 7.56 2 4.63 3.966 1.288 8c1.133 1.368 2.218 2.497 3.253 3.394l-.708.708c-1.068-.93-2.173-2.085-3.315-3.464a1 1 0 0 1 0-1.276C4.031 3.121 7.192 1 10 1c1.196 0 2.456.385 3.78 1.154l-.733.734zm-6.02 10.263C8.084 13.72 9.076 14 10 14c2.443 0 5.373-1.969 8.712-6-1.11-1.34-2.176-2.453-3.193-3.341l.708-.709C17.437 5.013 18.695 6.363 20 8c-3.721 4.667-7.054 7-10 7-1.175 0-2.411-.371-3.709-1.113l.735-.736z\"\n                />\n                <path\n                    fillRule=\"nonzero\"\n                    d=\"M8.478 11.7l.79-.79a3 3 0 0 0 3.642-3.642l.79-.79A4 4 0 0 1 8.477 11.7zM6.334 9.602a4 4 0 0 1 5.268-5.268l-.78.78A3.002 3.002 0 0 0 7.113 8.82l-.78.78z\"\n                />\n                <rect\n                    width=\"21\"\n                    height=\"1\"\n                    x=\"-.722\"\n                    y=\"7.778\"\n                    rx=\".5\"\n                    transform=\"rotate(-45 9.778 8.278)\"\n                />\n            </g>\n        </svg>\n    )\n}\n\nexport { PasswordHiddenIcon }\n"],"names":["PasswordHiddenIcon","props","React","xmlns","width","height","fill","fillRule","transform","d","x","y","rx"],"mappings":";;AAEA,SAASA,kBAAT,CAA4BC,KAA5B;AACI,sBACIC,aAAA,MAAA;AAAKC,IAAAA,KAAK,EAAC;AAA6BC,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;KAASJ,MAAnE,eACIC,aAAA,IAAA;AAAGI,IAAAA,IAAI,EAAC;AAAOC,IAAAA,QAAQ,EAAC;AAAUC,IAAAA,SAAS,EAAC;GAA5C,eACIN,aAAA,OAAA;AACIK,IAAAA,QAAQ,EAAC;AACTE,IAAAA,CAAC,EAAC;GAFN,CADJ,eAKIP,aAAA,OAAA;AACIK,IAAAA,QAAQ,EAAC;AACTE,IAAAA,CAAC,EAAC;GAFN,CALJ,eASIP,aAAA,OAAA;AACIE,IAAAA,KAAK,EAAC;AACNC,IAAAA,MAAM,EAAC;AACPK,IAAAA,CAAC,EAAC;AACFC,IAAAA,CAAC,EAAC;AACFC,IAAAA,EAAE,EAAC;AACHJ,IAAAA,SAAS,EAAC;GANd,CATJ,CADJ,CADJ;AAsBH;;;;"}

package/es/new-components/icons/password-visible-icon.js

@@ -0,0 +1,22 @@
+import { createElement } from 'react';
+
+function PasswordVisibleIcon(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "gray"
+  }, /*#__PURE__*/createElement("path", {
+    d: "M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z"
+  }), /*#__PURE__*/createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3.5"
+  })));
+}
+
+export { PasswordVisibleIcon };
+//# sourceMappingURL=password-visible-icon.js.map

package/es/new-components/icons/password-visible-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-visible-icon.js","sources":["../../../src/new-components/icons/password-visible-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nfunction PasswordVisibleIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" {...props}>\n            <g fill=\"none\" fillRule=\"evenodd\" stroke=\"gray\">\n                <path d=\"M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z\" />\n                <circle cx=\"12\" cy=\"12\" r=\"3.5\" />\n            </g>\n        </svg>\n    )\n}\n\nexport { PasswordVisibleIcon }\n"],"names":["PasswordVisibleIcon","props","React","xmlns","width","height","fill","fillRule","stroke","d","cx","cy","r"],"mappings":";;AAEA,SAASA,mBAAT,CAA6BC,KAA7B;AACI,sBACIC,aAAA,MAAA;AAAKC,IAAAA,KAAK,EAAC;AAA6BC,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;KAASJ,MAAnE,eACIC,aAAA,IAAA;AAAGI,IAAAA,IAAI,EAAC;AAAOC,IAAAA,QAAQ,EAAC;AAAUC,IAAAA,MAAM,EAAC;GAAzC,eACIN,aAAA,OAAA;AAAMO,IAAAA,CAAC,EAAC;GAAR,CADJ,eAEIP,aAAA,SAAA;AAAQQ,IAAAA,EAAE,EAAC;AAAKC,IAAAA,EAAE,EAAC;AAAKC,IAAAA,CAAC,EAAC;GAA1B,CAFJ,CADJ,CADJ;AAQH;;;;"}

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

@@ -0,0 +1,36 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement } from 'react';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { getClassNames, mapResponsiveProp } from '../responsive-props.js';
+import { Box } from '../box/box.js';
+import styles from './inline.module.css.js';
+
+var _excluded = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
+var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
+  var as = _ref.as,
+      space = _ref.space,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$alignY = _ref.alignY,
+      alignY = _ref$alignY === void 0 ? 'center' : _ref$alignY,
+      children = _ref.children,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/createElement(Box, null, /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    as: as,
+    display: "flex",
+    flexWrap: "wrap",
+    className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
+    ref: ref,
+    alignItems: mapResponsiveProp(alignY, function (alignY) {
+      return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center';
+    }),
+    justifyContent: mapResponsiveProp(align, function (align) {
+      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
+    })
+  }), children));
+});
+
+export { Inline };
+//# sourceMappingURL=inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline.js","sources":["../../../src/new-components/inline/inline.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 } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './inline.module.css'\n\ntype InlineAlign = 'left' | 'center' | 'right'\n\ninterface InlineProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<InlineAlign>\n    alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>\n}\n\nconst Inline = polymorphicComponent<'div', InlineProps>(function Inline(\n    { as, space, align = 'left', alignY = 'center', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box>\n            <Box\n                {...props}\n                as={as}\n                display=\"flex\"\n                flexWrap=\"wrap\"\n                className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n                ref={ref}\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            >\n                {children}\n            </Box>\n        </Box>\n    )\n})\n\nexport type { InlineProps, InlineAlign }\nexport { Inline }\n"],"names":["Inline","polymorphicComponent","ref","as","space","align","alignY","children","exceptionallySetClassName","props","React","Box","display","flexWrap","className","getClassNames","styles","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;;IAmBMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;MAClDC,UAAAA;MAAIC,aAAAA;wBAAOC;MAAAA,gCAAQ;yBAAQC;MAAAA,kCAAS;MAAUC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAGxF,sBACIC,aAAA,CAACC,GAAD,MAAA,eACID,aAAA,CAACC,GAAD,oBACQF;AACJN,IAAAA,EAAE,EAAEA;AACJS,IAAAA,OAAO,EAAC;AACRC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,SAAS,EAAE,CAACN,yBAAD,EAA4BO,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBZ,KAAlB,CAAzC;AACXF,IAAAA,GAAG,EAAEA;AACLe,IAAAA,UAAU,EAAEC,iBAAiB,CAACZ,MAAD,EAAS,UAACA,MAAD;AAAA,aAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkC,QADjC;AAAA,KAAT;AAG7Ba,IAAAA,cAAc,EAAED,iBAAiB,CAACb,KAAD,EAAQ,UAACA,KAAD;AAAA,aACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgC,QAD5B;AAAA,KAAR;IAVrC,EAcKE,QAdL,CADJ,CADJ;AAoBH,CAxBkC;;;;"}

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

@@ -0,0 +1,4 @@
+var modules_da5d5c21 = {"space-xsmall":"_6b1279e0","space-small":"_0d82c42d","space-medium":"_556714e1","space-large":"e90b43fb","space-xlarge":"a9c34345","space-xxlarge":"aa102efe","tablet-space-xsmall":"_34d16157","tablet-space-small":"c7e0e54f","tablet-space-medium":"_7f2a4e4b","tablet-space-large":"ae256487","tablet-space-xlarge":"e88be0f7","tablet-space-xxlarge":"dc7bcb18","desktop-space-xsmall":"_853f3012","desktop-space-small":"_3bfaf758","desktop-space-medium":"_36462a93","desktop-space-large":"e73081b7","desktop-space-xlarge":"e22ec9dd","desktop-space-xxlarge":"_4a20bd12"};
+
+export default modules_da5d5c21;
+//# sourceMappingURL=inline.module.css.js.map

package/es/new-components/inline/inline.module.css.js.map

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

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

@@ -0,0 +1,37 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Box } from '../box/box.js';
+import { Spinner } from '../spinner/spinner.js';
+
+var _excluded = ["size", "exceptionallySetClassName"];
+var sizeMapping = {
+  small: 24,
+  medium: 36,
+  large: 48
+};
+
+function Loading(_ref) {
+  var _sizeMapping$size;
+
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var numericSize = (_sizeMapping$size = sizeMapping[size]) !== null && _sizeMapping$size !== void 0 ? _sizeMapping$size : sizeMapping.small;
+  var ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({}, props, {
+    "aria-label": ariaLabel,
+    className: exceptionallySetClassName,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    role: "progressbar"
+  }), /*#__PURE__*/React__default.createElement(Spinner, {
+    size: numericSize,
+    "aria-hidden": true
+  }));
+}
+
+export { Loading };
+//# sourceMappingURL=loading.js.map

package/es/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-describedby' | '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    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\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    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","small","medium","large","Loading","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":";;;;;;AAoCA,IAAMA,WAAW,GAAyB;AACtCC,EAAAA,KAAK,EAAE,EAD+B;AAEtCC,EAAAA,MAAM,EAAE,EAF8B;AAGtCC,EAAAA,KAAK,EAAE;AAH+B,CAA1C;;AAMA,SAASC,OAAT;;;uBAAmBC;MAAAA,8BAAO;MAASC,iCAAAA;MAA8BC;;AAC7D,MAAMC,WAAW,wBAAGR,WAAW,CAACK,IAAD,CAAd,iEAAwBL,WAAW,CAACC,KAArD;AACA,MAAMQ,SAAS,GAAGF,KAAK,CAAC,YAAD,CAAL,GACZA,KAAK,CAAC,YAAD,CADO,GAEZ,CAACA,KAAK,CAAC,iBAAD,CAAN,GACA,UADA,GAEAG,SAJN;AAMA,sBACIC,4BAAA,CAACC,GAAD,oBACQL;kBACQE;AACZI,IAAAA,SAAS,EAAEP;AACXQ,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;AACXC,IAAAA,cAAc,EAAC;AACfC,IAAAA,IAAI,EAAC;IAPT,eASIN,4BAAA,CAACO,OAAD;AAASb,IAAAA,IAAI,EAAEG;;GAAf,CATJ,CADJ;AAaH;;;;"}

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

@@ -0,0 +1,224 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useMemo, createElement, useContext, useState, useEffect, Fragment, Children, createContext } from 'react';
+import classNames from 'classnames';
+import { Box } from '../box/box.js';
+import { Columns, Column } from '../columns/columns.js';
+import { Divider } from '../divider/divider.js';
+import { Inline } from '../inline/inline.js';
+import { CloseIcon } from '../icons/close-icon.js';
+import { Button } from '../button/button.js';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import FocusLock from 'react-focus-lock';
+import styles from './modal.module.css.js';
+
+var _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+    _excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
+    _excluded3 = ["exceptionallySetClassName", "children"],
+    _excluded4 = ["exceptionallySetClassName", "withDivider"],
+    _excluded5 = ["children"];
+var ModalContext = /*#__PURE__*/createContext({
+  onDismiss: undefined,
+  height: 'fitContent'
+});
+
+function isNotInternalFrame(element) {
+  return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
+}
+/**
+ * Renders a modal that sits on top of the rest of the content in the entire page.
+ *
+ * Follows the WAI-ARIA Dialog (Modal) Pattern.
+ *
+ * @see ModalHeader
+ * @see ModalFooter
+ * @see ModalBody
+ */
+
+
+function Modal(_ref) {
+  var isOpen = _ref.isOpen,
+      onDismiss = _ref.onDismiss,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 'fitContent' : _ref$height,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'medium' : _ref$width,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var contextValue = useMemo(function () {
+    return {
+      onDismiss: onDismiss,
+      height: height
+    };
+  }, [onDismiss, height]);
+  return /*#__PURE__*/createElement(DialogOverlay, {
+    isOpen: isOpen,
+    onDismiss: onDismiss,
+    dangerouslyBypassFocusLock // We're setting up our own focus lock below
+    : true,
+    className: classNames(styles.overlay, styles[height], styles[width]),
+    "data-testid": "modal-overlay"
+  }, /*#__PURE__*/createElement(FocusLock, {
+    autoFocus: autoFocus,
+    whiteList: isNotInternalFrame,
+    returnFocus: true
+  }, /*#__PURE__*/createElement(DialogContent, Object.assign({}, props, {
+    as: Box,
+    borderRadius: "full",
+    background: "default",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    height: height === 'expand' ? 'full' : undefined,
+    flexGrow: height === 'expand' ? 1 : 0,
+    className: [exceptionallySetClassName, styles.container]
+  }), /*#__PURE__*/createElement(ModalContext.Provider, {
+    value: contextValue
+  }, children))));
+}
+/**
+ * The close button rendered by ModalHeader. Provided independently so that consumers can customize
+ * the button's label.
+ *
+ * @see ModalHeader
+ */
+
+function ModalCloseButton(props) {
+  var _React$useContext = useContext(ModalContext),
+      onDismiss = _React$useContext.onDismiss;
+
+  var _React$useState = useState(false),
+      includeInTabOrder = _React$useState[0],
+      setincludeInTabOrder = _React$useState[1];
+
+  var _React$useState2 = useState(false),
+      isMounted = _React$useState2[0],
+      setIsMounted = _React$useState2[1];
+
+  useEffect(function skipAutoFocus() {
+    if (isMounted) {
+      setincludeInTabOrder(true);
+    } else {
+      setIsMounted(true);
+    }
+  }, [isMounted]);
+  return /*#__PURE__*/createElement(Button, Object.assign({}, props, {
+    variant: "quaternary",
+    onClick: onDismiss,
+    icon: /*#__PURE__*/createElement(CloseIcon, null),
+    tabIndex: includeInTabOrder ? 0 : -1
+  }));
+}
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see Modal
+ * @see ModalFooter
+ * @see ModalBody
+ */
+
+function ModalHeader(_ref2) {
+  var children = _ref2.children,
+      _ref2$button = _ref2.button,
+      button = _ref2$button === void 0 ? true : _ref2$button,
+      _ref2$withDivider = _ref2.withDivider,
+      withDivider = _ref2$withDivider === void 0 ? false : _ref2$withDivider,
+      exceptionallySetClassName = _ref2.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    as: "header",
+    paddingLeft: "large",
+    paddingRight: "small",
+    paddingY: "small",
+    className: exceptionallySetClassName
+  }), /*#__PURE__*/createElement(Columns, {
+    space: "large",
+    alignY: "center"
+  }, /*#__PURE__*/createElement(Column, {
+    width: "auto"
+  }, children), /*#__PURE__*/createElement(Column, {
+    width: "content",
+    exceptionallySetClassName: styles.buttonContainer
+  }, typeof button !== 'boolean' ? button : button === true ? /*#__PURE__*/createElement(ModalCloseButton, {
+    "aria-label": "Close modal",
+    autoFocus: false
+  }) : null))), withDivider ? /*#__PURE__*/createElement(Divider, null) : null);
+}
+/**
+ * Renders the body of a modal.
+ *
+ * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
+ * things, that the contet of the modal body expands or contracts depending on the modal height
+ * setting or the size of the content. The body content also automatically scrolls when it's too
+ * large to fit the available space.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalFooter
+ */
+
+function ModalBody(_ref3) {
+  var exceptionallySetClassName = _ref3.exceptionallySetClassName,
+      children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+
+  var _React$useContext2 = useContext(ModalContext),
+      height = _React$useContext2.height;
+
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    className: exceptionallySetClassName,
+    flexGrow: height === 'expand' ? 1 : 0,
+    height: height === 'expand' ? 'full' : undefined,
+    overflow: "auto"
+  }), /*#__PURE__*/createElement(Box, {
+    padding: "large",
+    paddingBottom: "xxlarge"
+  }, children));
+}
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalBody
+ */
+
+function ModalFooter(_ref4) {
+  var exceptionallySetClassName = _ref4.exceptionallySetClassName,
+      _ref4$withDivider = _ref4.withDivider,
+      withDivider = _ref4$withDivider === void 0 ? false : _ref4$withDivider,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+
+  return /*#__PURE__*/createElement(Fragment, null, withDivider ? /*#__PURE__*/createElement(Divider, null) : null, /*#__PURE__*/createElement(Box, Object.assign({
+    as: "footer"
+  }, props, {
+    className: exceptionallySetClassName,
+    padding: "large"
+  })));
+} //
+// ModalActions
+//
+
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see ModalFooter
+ */
+
+function ModalActions(_ref5) {
+  var children = _ref5.children,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+
+  return /*#__PURE__*/createElement(ModalFooter, Object.assign({}, props), /*#__PURE__*/createElement(Inline, {
+    align: "right",
+    space: "large"
+  }, Children.map(children, function (child) {
+    return /*#__PURE__*/createElement("div", null, child);
+  })));
+}
+
+export { Modal, ModalActions, ModalBody, ModalCloseButton, ModalFooter, ModalHeader };
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setincludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setincludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight=\"small\"\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    <Column width=\"content\" exceptionallySetClassName={styles.buttonContainer}>\n                        {typeof button !== 'boolean' ? (\n                            button\n                        ) : button === true ? (\n                            <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                        ) : null}\n                    </Column>\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalFooterProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {React.Children.map(children, (child) => (\n                    <div>{child}</div>\n                ))}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","ModalCloseButton","includeInTabOrder","setincludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align","map","child"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var modules_8f59d13b = {"reach-portal":"dddb40c3","fadein":"_955f2d73","fitContent":"_95c7550e","container":"_88079712","full":"_4779d078","large":"_5fd86231","medium":"bdfb5931","small":"_4e848a11","xlarge":"d673fba2","overlay":"ea9ae0cc","expand":"a8bf8a4f","buttonContainer":"_44d6850e"};
+
+export default modules_8f59d13b;
+//# sourceMappingURL=modal.module.css.js.map

package/es/new-components/modal/modal.module.css.js.map

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