@doist/reactist 28.7.2 → 28.7.3

package/lib/heading/heading.d.ts

@@ -1,112 +1,112 @@
-import * as React from 'react';
-import type { ObfuscatedClassName, Tone } from '../utils/common-types';
-import type { BoxProps } from '../box';
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6';
-type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {
-    children: React.ReactNode;
-    /**
-     * The semantic level of the heading.
-     */
-    level: HeadingLevel;
-    /**
-     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.
-     *
-     * @default 'regular'
-     */
-    weight?: 'regular' | 'medium' | 'light';
-    /**
-     * Shifts the default heading visual text size up or down, depending on the original size
-     * imposed by the `level`. The heading continues to be semantically at the given level.
-     *
-     * By default, no value is applied, and the default size from the level is applied. The values
-     * have the following effect:
-     *
-     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
-     * level look visually as if it were of the immediately lower level).
-     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
-     * scale.
-     * - 'largest' can be thought of as applying 'larger' twice.
-     *
-     * @see level
-     * @default undefined
-     */
-    size?: 'smaller' | 'larger' | 'largest';
-    /**
-     * The tone (semantic color) of the heading.
-     *
-     * @default 'normal'
-     */
-    tone?: Tone;
-    /**
-     * Used to truncate the heading to a given number of lines.
-     *
-     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
-     * truncated. If the text fits without it being truncated, no ellipsis is added.
-     *
-     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
-     *
-     * @default undefined
-     */
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
-    /**
-     * How to align the heading text horizontally.
-     *
-     * @default 'start'
-     */
-    align?: BoxProps['textAlign'];
-};
-declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "className" | "children"> & {
-    children: React.ReactNode;
-    /**
-     * The semantic level of the heading.
-     */
-    level: HeadingLevel;
-    /**
-     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.
-     *
-     * @default 'regular'
-     */
-    weight?: "regular" | "medium" | "light" | undefined;
-    /**
-     * Shifts the default heading visual text size up or down, depending on the original size
-     * imposed by the `level`. The heading continues to be semantically at the given level.
-     *
-     * By default, no value is applied, and the default size from the level is applied. The values
-     * have the following effect:
-     *
-     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
-     * level look visually as if it were of the immediately lower level).
-     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
-     * scale.
-     * - 'largest' can be thought of as applying 'larger' twice.
-     *
-     * @see level
-     * @default undefined
-     */
-    size?: "smaller" | "larger" | "largest" | undefined;
-    /**
-     * The tone (semantic color) of the heading.
-     *
-     * @default 'normal'
-     */
-    tone?: Tone | undefined;
-    /**
-     * Used to truncate the heading to a given number of lines.
-     *
-     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
-     * truncated. If the text fits without it being truncated, no ellipsis is added.
-     *
-     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
-     *
-     * @default undefined
-     */
-    lineClamp?: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5" | undefined;
-    /**
-     * How to align the heading text horizontally.
-     *
-     * @default 'start'
-     */
-    align?: BoxProps['textAlign'];
-} & ObfuscatedClassName & React.RefAttributes<HTMLHeadingElement>>;
-export type { HeadingProps, HeadingLevel };
-export { Heading };
+import * as React from 'react';
+import type { ObfuscatedClassName, Tone } from '../utils/common-types';
+import type { BoxProps } from '../box';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6';
+type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {
+    children: React.ReactNode;
+    /**
+     * The semantic level of the heading.
+     */
+    level: HeadingLevel;
+    /**
+     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.
+     *
+     * @default 'regular'
+     */
+    weight?: 'regular' | 'medium' | 'light';
+    /**
+     * Shifts the default heading visual text size up or down, depending on the original size
+     * imposed by the `level`. The heading continues to be semantically at the given level.
+     *
+     * By default, no value is applied, and the default size from the level is applied. The values
+     * have the following effect:
+     *
+     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
+     * level look visually as if it were of the immediately lower level).
+     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
+     * scale.
+     * - 'largest' can be thought of as applying 'larger' twice.
+     *
+     * @see level
+     * @default undefined
+     */
+    size?: 'smaller' | 'larger' | 'largest';
+    /**
+     * The tone (semantic color) of the heading.
+     *
+     * @default 'normal'
+     */
+    tone?: Tone;
+    /**
+     * Used to truncate the heading to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
+    /**
+     * How to align the heading text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
+};
+declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "className" | "children"> & {
+    children: React.ReactNode;
+    /**
+     * The semantic level of the heading.
+     */
+    level: HeadingLevel;
+    /**
+     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.
+     *
+     * @default 'regular'
+     */
+    weight?: "medium" | "regular" | "light" | undefined;
+    /**
+     * Shifts the default heading visual text size up or down, depending on the original size
+     * imposed by the `level`. The heading continues to be semantically at the given level.
+     *
+     * By default, no value is applied, and the default size from the level is applied. The values
+     * have the following effect:
+     *
+     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
+     * level look visually as if it were of the immediately lower level).
+     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
+     * scale.
+     * - 'largest' can be thought of as applying 'larger' twice.
+     *
+     * @see level
+     * @default undefined
+     */
+    size?: "smaller" | "larger" | "largest" | undefined;
+    /**
+     * The tone (semantic color) of the heading.
+     *
+     * @default 'normal'
+     */
+    tone?: Tone | undefined;
+    /**
+     * Used to truncate the heading to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5" | undefined;
+    /**
+     * How to align the heading text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
+} & ObfuscatedClassName & React.RefAttributes<HTMLHeadingElement>>;
+export type { HeadingProps, HeadingLevel };
+export { Heading };

package/lib/heading/heading.js

@@ -1,2 +1,52 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../utils/responsive-props.js"),r=require("../box/box.js"),a=require("./heading.module.css.js");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var i=n(t);const s=["level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName"];exports.Heading=i.forwardRef((function(t,n){let{level:u,weight:o="regular",size:c,tone:d="normal",children:p,lineClamp:g,align:f,exceptionallySetClassName:m}=t,b=e.objectWithoutProperties(t,s);const j="h"+u,h="string"==typeof g?parseInt(g,10)>1:(g||0)>1;return i.createElement(r.Box,e.objectSpread2(e.objectSpread2({},b),{},{className:[m,a.default.heading,"regular"!==o?l.getClassNames(a.default,"weight",o):null,"normal"!==d?l.getClassNames(a.default,"tone",d):null,l.getClassNames(a.default,"size",c),h?a.default.lineClampMultipleLines:null,g?l.getClassNames(a.default,"lineClamp",g.toString()):null],textAlign:f,paddingRight:g?"xsmall":void 0,as:j,ref:n}),p)}));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var responsiveProps = require('../utils/responsive-props.js');
+var box = require('../box/box.js');
+var heading_module = require('./heading.module.css.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var Heading = React__namespace.forwardRef(function Heading(_a, ref) {
+    var level = _a.level, _b = _a.weight, weight = _b === void 0 ? 'regular' : _b, size = _a.size, _c = _a.tone, tone = _c === void 0 ? 'normal' : _c, children = _a.children, lineClamp = _a.lineClamp, align = _a.align, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"]);
+    // 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".concat(level);
+    var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
+    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { className: [
+            exceptionallySetClassName,
+            heading_module["default"].heading,
+            weight !== 'regular' ? responsiveProps.getClassNames(heading_module["default"], 'weight', weight) : null,
+            tone !== 'normal' ? responsiveProps.getClassNames(heading_module["default"], 'tone', tone) : null,
+            responsiveProps.getClassNames(heading_module["default"], 'size', size),
+            lineClampMultipleLines ? heading_module["default"].lineClampMultipleLines : null,
+            lineClamp ? responsiveProps.getClassNames(heading_module["default"], '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));
+});
+
+exports.Heading = Heading;
 //# sourceMappingURL=heading.js.map

package/lib/heading/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName, Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\ntype HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {\n    children: React.ReactNode\n    /**\n     * The semantic level of the heading.\n     */\n    level: HeadingLevel\n\n    /**\n     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'medium' | 'light'\n\n    /**\n     * Shifts the default heading visual text size up or down, depending on the original size\n     * imposed by the `level`. The heading continues to be semantically at the given level.\n     *\n     * By default, no value is applied, and the default size from the level is applied. The values\n     * have the following effect:\n     *\n     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the\n     * level look visually as if it were of the immediately lower level).\n     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the\n     * scale.\n     * - 'largest' can be thought of as applying 'larger' twice.\n     *\n     * @see level\n     * @default undefined\n     */\n    size?: 'smaller' | 'larger' | 'largest'\n\n    /**\n     * The tone (semantic color) of the heading.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n\n    /**\n     * Used to truncate the heading to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n\n    /**\n     * How to align the heading text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(\n    function Heading(\n        {\n            level,\n            weight = 'regular',\n            size,\n            tone = 'normal',\n            children,\n            lineClamp,\n            align,\n            exceptionallySetClassName,\n            ...props\n        },\n        ref,\n    ) {\n        // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n        // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n        const headingElementName = `h${level}` as HeadingElement\n        const lineClampMultipleLines =\n            typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n        return (\n            <Box\n                {...props}\n                className={[\n                    exceptionallySetClassName,\n                    styles.heading,\n                    weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                    tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                    getClassNames(styles, 'size', size),\n                    lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                    lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n                ]}\n                textAlign={align}\n                // Prevents emojis from being cut-off\n                // See https://github.com/Doist/reactist/pull/528\n                paddingRight={lineClamp ? 'xsmall' : undefined}\n                as={headingElementName}\n                ref={ref}\n            >\n                {children}\n            </Box>\n        )\n    },\n)\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["React","forwardRef","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","headingElementName","lineClampMultipleLines","parseInt","createElement","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":"0oBAqEgBA,EAAMC,YAClB,SAYIC,EAAAA,GAAG,IAXHC,MACIA,EADJC,OAEIA,EAAS,UAFbC,KAGIA,EAHJC,KAIIA,EAAO,SAJXC,SAKIA,EALJC,UAMIA,EANJC,MAOIA,EAPJC,0BAQIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAIH,MAAMC,EAAyB,IAAAb,EACzBc,EACmB,iBAAdT,EAAyBU,SAASV,EAAW,IAAM,GAAKA,GAAa,GAAK,EAErF,OACIR,EAACmB,cAAAC,yCACOR,GADR,GAAA,CAEIS,UAAW,CACPX,EACAY,EAAM,QAACC,QACI,YAAXnB,EAAuBoB,gBAAcF,EAAAA,QAAQ,SAAUlB,GAAU,KACxD,WAATE,EAAoBkB,EAAaA,cAACF,EAAD,QAAS,OAAQhB,GAAQ,KAC1DkB,EAAaA,cAACF,UAAQ,OAAQjB,GAC9BY,EAAyBK,EAAAA,QAAOL,uBAAyB,KACzDT,EAAYgB,EAAaA,cAACF,UAAQ,YAAad,EAAUiB,YAAc,MAE3EC,UAAWjB,EAGXkB,aAAcnB,EAAY,cAAWoB,EACrCC,GAAIb,EACJd,IAAKA,IAEJK"}
+{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":[null],"names":["React","__rest","Box","styles","getClassNames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEM,IAAA,OAAO,GAAGA,gBAAK,CAAC,UAAU,CAC5B,SAAS,OAAO,CACZ,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAA,GAAA,EAAA,CAAA,MAAkB,EAAlB,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,EAClB,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,EAAA,GAAA,EAAA,CAAA,IAAe,EAAf,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAA,EAAA,EACf,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,eAAA,EACT,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EACtB,KAAK,GAAAC,YAAA,CAAA,EAAA,EATZ,kGAUC,CADW,CAAA;;;AAMZ,IAAA,IAAM,kBAAkB,GAAG,GAAI,CAAA,MAAA,CAAA,KAAK,CAAoB,CAAA;IACxD,IAAM,sBAAsB,GACxB,OAAO,SAAS,KAAK,QAAQ,GAAG,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,CAAA;AAEtF,IAAA,QACID,gBAAC,CAAA,aAAA,CAAAE,OAAG,qBACI,KAAK,EAAA,EACT,SAAS,EAAE;YACP,yBAAyB;AACzB,YAAAC,yBAAM,CAAC,OAAO;AACd,YAAA,MAAM,KAAK,SAAS,GAAGC,6BAAa,CAACD,yBAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,IAAI;AACrE,YAAA,IAAI,KAAK,QAAQ,GAAGC,6BAAa,CAACD,yBAAM,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;AAC9D,YAAAC,6BAAa,CAACD,yBAAM,EAAE,MAAM,EAAE,IAAI,CAAC;YACnC,sBAAsB,GAAGA,yBAAM,CAAC,sBAAsB,GAAG,IAAI;AAC7D,YAAA,SAAS,GAAGC,6BAAa,CAACD,yBAAM,EAAE,WAAW,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI;SAC9E,EACD,SAAS,EAAE,KAAK;;;QAGhB,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,EAC9C,EAAE,EAAE,kBAAkB,EACtB,GAAG,EAAE,GAAG,EAEP,CAAA,EAAA,QAAQ,CACP,EACT;AACL,CAAC;;;;"}

package/lib/heading/heading.module.css.js

@@ -1,2 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={heading:"bff24867","weight-medium":"_9b540c61","weight-light":"c6729907","tone-secondary":"d6507f70","tone-danger":"d1846d93","size-largest":"_7cbdd1ba","size-larger":"b3e14969","size-smaller":"be14a265",lineClampMultipleLines:"_71391f13","lineClamp-1":"_97298b1b","lineClamp-2":"_6d357d76","lineClamp-3":"d820b451","lineClamp-4":"_8d37487d","lineClamp-5":"_5215b4d7"};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_949d2ff4 = {"heading":"bff24867","weight-medium":"_9b540c61","weight-light":"c6729907","tone-secondary":"d6507f70","tone-danger":"d1846d93","size-largest":"_7cbdd1ba","size-larger":"b3e14969","size-smaller":"be14a265","lineClampMultipleLines":"_71391f13","lineClamp-1":"_97298b1b","lineClamp-2":"_6d357d76","lineClamp-3":"d820b451","lineClamp-4":"_8d37487d","lineClamp-5":"_5215b4d7"};
+
+exports["default"] = modules_949d2ff4;
 //# sourceMappingURL=heading.module.css.js.map

package/lib/heading/heading.module.css.js.map

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

package/lib/heading/index.d.ts

@@ -1 +1 @@
-export * from './heading';
+export * from './heading';

package/lib/hidden/hidden.d.ts

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

package/lib/hidden/hidden.js

@@ -1,2 +1,71 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../box/box.js"),r=require("./hidden.module.css.js"),n=require("../utils/polymorphism.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,t}var l=i(t);const a=["display","children","exceptionallySetClassName"];exports.Hidden=n.polymorphicComponent((function(t,n){let{display:i="block",children:s,exceptionallySetClassName:d}=t,c=e.objectWithoutProperties(t,a);const u="print"in c&&c.print,b="above"in c,p="below"in c,f="below"in c&&"desktop"===c.below||"above"in c&&"mobile"===c.above;return b&&p&&console.warn('<Hidden /> should receive either above="…" or below="…" but not both'),b||p||u||console.warn("<Hidden /> did not receive any criteria to hide itself"),"above"in c&&delete c.above,"below"in c&&delete c.below,"print"in c&&delete c.print,l.createElement(o.Box,e.objectSpread2(e.objectSpread2({},c),{},{ref:n,className:[d,u?r.default.hiddenOnPrint:null],display:b&&p?"none":{mobile:p?"none":i,tablet:f?"none":i,desktop:b?"none":i}}),s)}));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var box = require('../box/box.js');
+var hidden_module = require('./hidden.module.css.js');
+var polymorphism = require('../utils/polymorphism.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * A component that allows to specify how to hide itself on certain responsive screen sizes, or on
+ * print media.
+ *
+ * @see HiddenProps
+ * @see HiddenVisually for hiding content only visually, while keeping it available for assistive
+ *   technologies.
+ */
+var Hidden = polymorphism.polymorphicComponent(function Hidden(_a, ref) {
+    var _b = _a.display, display = _b === void 0 ? 'block' : _b, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["display", "children", "exceptionallySetClassName"]);
+    var hiddenOnPrint = 'print' in props && props.print;
+    var hiddenOnDesktop = 'above' in props;
+    var hiddenOnMobile = 'below' in props;
+    var hiddenOnTablet = ('below' in props && props.below === 'desktop') ||
+        ('above' in props && props.above === 'mobile');
+    if (hiddenOnDesktop && hiddenOnMobile) {
+        // eslint-disable-next-line no-console
+        console.warn('<Hidden /> should receive either above="…" or below="…" but not both');
+    }
+    if (!hiddenOnDesktop && !hiddenOnMobile && !hiddenOnPrint) {
+        // eslint-disable-next-line no-console
+        console.warn('<Hidden /> did not receive any criteria to hide itself');
+    }
+    // We need to delete these so they do not get forwarded to the Box
+    if ('above' in props)
+        delete props['above'];
+    if ('below' in props)
+        delete props['below'];
+    if ('print' in props)
+        delete props['print'];
+    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { ref: ref, className: [exceptionallySetClassName, hiddenOnPrint ? hidden_module["default"].hiddenOnPrint : null], display: hiddenOnDesktop && hiddenOnMobile
+            ? 'none'
+            : {
+                mobile: hiddenOnMobile ? 'none' : display,
+                tablet: hiddenOnTablet ? 'none' : display,
+                desktop: hiddenOnDesktop ? 'none' : display
+            } }), children));
+});
+
+exports.Hidden = Hidden;
 //# sourceMappingURL=hidden.js.map

package/lib/hidden/hidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"hidden.js","sources":["../../src/hidden/hidden.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport styles from './hidden.module.css'\nimport type { ResponsiveBreakpoints } from '../utils/responsive-props'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\ntype AboveProp = {\n    /**\n     * Hides the element on viewport sizes equal or larger to the one given.\n     *\n     * It is not supported to pass it alongside `below`, and the resulting behavior is undefined\n     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).\n     *\n     * @see below\n     */\n    above: Exclude<ResponsiveBreakpoints, 'desktop'>\n    below?: never\n}\n\ntype BelowProp = {\n    /**\n     * Hides the element on viewport sizes equal or smaller to the one given.\n     *\n     * It is not supported to pass it alongside `above`, and the resulting behavior is undefined\n     * (most likely itʼll hide the element all the time to make it apparent that there's a problem).\n     *\n     * @see above\n     */\n    below: Exclude<ResponsiveBreakpoints, 'mobile'>\n    above?: never\n}\n\ntype CommonProps = {\n    children: React.ReactNode\n    /**\n     * hides the element when on print media.\n     */\n    print?: boolean\n    /**\n     * Useful if you want the element to be an inline element when it is visible.\n     */\n    display?: 'inline' | 'block'\n}\n\ntype HiddenProps = CommonProps & (AboveProp | BelowProp | Required<Pick<CommonProps, 'print'>>)\n\n/**\n * A component that allows to specify how to hide itself on certain responsive screen sizes, or on\n * print media.\n *\n * @see HiddenProps\n * @see HiddenVisually for hiding content only visually, while keeping it available for assistive\n *   technologies.\n */\nconst Hidden = polymorphicComponent<'div', HiddenProps>(function Hidden(\n    { display = 'block', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const hiddenOnPrint = 'print' in props && props.print\n\n    const hiddenOnDesktop = 'above' in props\n    const hiddenOnMobile = 'below' in props\n    const hiddenOnTablet =\n        ('below' in props && props.below === 'desktop') ||\n        ('above' in props && props.above === 'mobile')\n\n    if (hiddenOnDesktop && hiddenOnMobile) {\n        // eslint-disable-next-line no-console\n        console.warn('<Hidden /> should receive either above=\"…\" or below=\"…\" but not both')\n    }\n\n    if (!hiddenOnDesktop && !hiddenOnMobile && !hiddenOnPrint) {\n        // eslint-disable-next-line no-console\n        console.warn('<Hidden /> did not receive any criteria to hide itself')\n    }\n\n    // We need to delete these so they do not get forwarded to the Box\n    if ('above' in props) delete props['above']\n    if ('below' in props) delete props['below']\n    if ('print' in props) delete props['print']\n\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            className={[exceptionallySetClassName, hiddenOnPrint ? styles.hiddenOnPrint : null]}\n            display={\n                hiddenOnDesktop && hiddenOnMobile\n                    ? 'none'\n                    : {\n                          mobile: hiddenOnMobile ? 'none' : display,\n                          tablet: hiddenOnTablet ? 'none' : display,\n                          desktop: hiddenOnDesktop ? 'none' : display,\n                      }\n            }\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport { Hidden }\nexport type { HiddenProps }\n"],"names":["polymorphicComponent","_ref","ref","display","children","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","hiddenOnPrint","print","hiddenOnDesktop","hiddenOnMobile","hiddenOnTablet","below","above","console","warn","React","createElement","Box","className","styles","mobile","tablet","desktop"],"mappings":"2lBAsDeA,EAAAA,sBAAyC,SAAAC,EAEpDC,GAAG,IADHC,QAAEA,EAAU,QAAZC,SAAqBA,EAArBC,0BAA+BA,GAC5BJ,EAD0DK,EAC1DC,EAAAC,wBAAAP,EAAAQ,GAEH,MAAMC,EAAgB,UAAWJ,GAASA,EAAMK,MAE1CC,EAAkB,UAAWN,EAC7BO,EAAiB,UAAWP,EAC5BQ,EACD,UAAWR,GAAyB,YAAhBA,EAAMS,OAC1B,UAAWT,GAAyB,WAAhBA,EAAMU,MAiB/B,OAfIJ,GAAmBC,GAEnBI,QAAQC,KAAK,wEAGZN,GAAoBC,GAAmBH,GAExCO,QAAQC,KAAK,0DAIb,UAAWZ,UAAcA,EAAK,MAC9B,UAAWA,UAAcA,EAAK,MAC9B,UAAWA,UAAcA,EAAK,MAG9Ba,EAAAC,cAACC,yCACOf,GADR,GAAA,CAEIJ,IAAKA,EACLoB,UAAW,CAACjB,EAA2BK,EAAgBa,EAAAA,QAAOb,cAAgB,MAC9EP,QACIS,GAAmBC,EACb,OACA,CACIW,OAAQX,EAAiB,OAASV,EAClCsB,OAAQX,EAAiB,OAASX,EAClCuB,QAASd,EAAkB,OAAST,KAIjDC"}
+{"version":3,"file":"hidden.js","sources":["../../src/hidden/hidden.tsx"],"sourcesContent":[null],"names":["polymorphicComponent","__rest","React","Box","__assign","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA;;;;;;;AAOG;AACG,IAAA,MAAM,GAAGA,iCAAoB,CAAqB,SAAS,MAAM,CACnE,EAAoE,EACpE,GAAG,EAAA;AADD,IAAA,IAAA,eAAiB,EAAjB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,OAAO,KAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EAAK,KAAK,GAAAC,YAAA,CAAA,EAAA,EAAlE,oDAAoE,CAAF,CAAA;IAGlE,IAAM,aAAa,GAAG,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,CAAA;AAErD,IAAA,IAAM,eAAe,GAAG,OAAO,IAAI,KAAK,CAAA;AACxC,IAAA,IAAM,cAAc,GAAG,OAAO,IAAI,KAAK,CAAA;AACvC,IAAA,IAAM,cAAc,GAChB,CAAC,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS;SAC7C,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAA;IAElD,IAAI,eAAe,IAAI,cAAc,EAAE;;AAEnC,QAAA,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAA;AACvF,KAAA;IAED,IAAI,CAAC,eAAe,IAAI,CAAC,cAAc,IAAI,CAAC,aAAa,EAAE;;AAEvD,QAAA,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAA;AACzE,KAAA;;IAGD,IAAI,OAAO,IAAI,KAAK;AAAE,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,CAAA;IAC3C,IAAI,OAAO,IAAI,KAAK;AAAE,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,CAAA;IAC3C,IAAI,OAAO,IAAI,KAAK;AAAE,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,CAAA;AAE3C,IAAA,QACIC,gBAAA,CAAA,aAAA,CAACC,OAAG,EAAAC,cAAA,CAAA,EAAA,EACI,KAAK,EACT,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,yBAAyB,EAAE,aAAa,GAAGC,wBAAM,CAAC,aAAa,GAAG,IAAI,CAAC,EACnF,OAAO,EACH,eAAe,IAAI,cAAc;AAC7B,cAAE,MAAM;AACR,cAAE;gBACI,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,OAAO;gBACzC,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,OAAO;gBACzC,OAAO,EAAE,eAAe,GAAG,MAAM,GAAG,OAAO;aAC9C,EAGV,CAAA,EAAA,QAAQ,CACP,EACT;AACL,CAAC;;;;"}

package/lib/hidden/hidden.module.css.js

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

package/lib/hidden/hidden.module.css.js.map

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

package/lib/hidden/index.d.ts

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

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

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

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

@@ -1,2 +1,41 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../utils/polymorphism.js"),o=require("../box/box.js"),u=require("./hidden-visually.module.css.js");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var l=i(r);exports.HiddenVisually=t.polymorphicComponent((function(r,t){return l.createElement(o.Box,e.objectSpread2(e.objectSpread2({},r),{},{ref:t,position:"absolute",overflow:"hidden",className:u.default.hiddenVisually}))}));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var polymorphism = require('../utils/polymorphism.js');
+var box = require('../box/box.js');
+var hiddenVisually_module = require('./hidden-visually.module.css.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * Provides content to assistive technologies while hiding it from the screen.
+ *
+ * @see Hidden for fully hiding content, and only under certain conditions.
+ */
+var HiddenVisually = polymorphism.polymorphicComponent(function HiddenVisually(props, ref) {
+    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { ref: ref, position: "absolute", overflow: "hidden", className: hiddenVisually_module["default"].hiddenVisually })));
+});
+
+exports.HiddenVisually = HiddenVisually;
 //# sourceMappingURL=hidden-visually.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hidden-visually.js","sources":["../../src/hidden-visually/hidden-visually.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { Box } from '../box'\nimport styles from './hidden-visually.module.css'\n\ntype Props = {\n    children: React.ReactNode\n}\n\n/**\n * Provides content to assistive technologies while hiding it from the screen.\n *\n * @see Hidden for fully hiding content, and only under certain conditions.\n */\nconst HiddenVisually = polymorphicComponent<'div', Props, 'omitClassName'>(function HiddenVisually(\n    props,\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            position=\"absolute\"\n            overflow=\"hidden\"\n            className={styles.hiddenVisually}\n        />\n    )\n})\n\nexport { HiddenVisually }\n"],"names":["polymorphicComponent","props","ref","React","createElement","Box","position","overflow","className","styles","hiddenVisually"],"mappings":"ijBAcuBA,EAAAA,sBAAoD,SACvEC,EACAC,GAEA,OACIC,EAACC,cAAAC,yCACOJ,GADR,GAAA,CAEIC,IAAKA,EACLI,SAAS,WACTC,SAAS,SACTC,UAAWC,EAAM,QAACC"}
+{"version":3,"file":"hidden-visually.js","sources":["../../src/hidden-visually/hidden-visually.tsx"],"sourcesContent":[null],"names":["polymorphicComponent","React","Box","__assign","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;;;AAIG;AACG,IAAA,cAAc,GAAGA,iCAAoB,CAAgC,SAAS,cAAc,CAC9F,KAAK,EACL,GAAG,EAAA;IAEH,QACIC,gBAAC,CAAA,aAAA,CAAAC,OAAG,EACIC,cAAA,CAAA,EAAA,EAAA,KAAK,IACT,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,gCAAM,CAAC,cAAc,EAClC,CAAA,CAAA,EACL;AACL,CAAC;;;;"}