@doist/reactist 10.0.0 → 11.0.0

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

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import type { ObfuscatedClassName } from '../../utils/polymorphism';
+import type { Tone } from '../common-types';
+import type { BoxProps } from '../box';
+declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6';
+declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+declare type SupportedHeadingElementProps = Omit<JSX.IntrinsicElements[HeadingElement], 'className' | 'children'>;
+declare type HeadingProps = SupportedHeadingElementProps & {
+    children: React.ReactNode;
+    /**
+     * The semantic level of the heading.
+     */
+    level: HeadingLevel;
+    /**
+     * The weight of the heading. Used to de-emphasize the heading visually when using 'light'.
+     *
+     * @default 'regular'
+     */
+    weight?: 'regular' | 'light';
+    /**
+     * Shifts the default heading visual text size up or down, depending on the original size
+     * imposed by the `level`. The heading continues to be semantically at the given level.
+     *
+     * By default, no value is applied, and the default size from the level is applied. The values
+     * have the following effect:
+     *
+     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
+     * level look visually as if it were of the immediately lower level).
+     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
+     * scale.
+     * - 'largest' can be thought of as applying 'larger' twice.
+     *
+     * @see level
+     * @default undefined
+     */
+    size?: 'smaller' | 'larger' | 'largest';
+    /**
+     * The tone (semantic color) of the heading.
+     *
+     * @default 'normal'
+     */
+    tone?: Tone;
+    /**
+     * Used to truncate the heading to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
+    /**
+     * How to align the heading text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
+};
+declare const Heading: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    children: React.ReactNode;
+    /**
+     * The semantic level of the heading.
+     */
+    level: HeadingLevel;
+    /**
+     * The weight of the heading. Used to de-emphasize the heading visually when using 'light'.
+     *
+     * @default 'regular'
+     */
+    weight?: "regular" | "light" | undefined;
+    /**
+     * Shifts the default heading visual text size up or down, depending on the original size
+     * imposed by the `level`. The heading continues to be semantically at the given level.
+     *
+     * By default, no value is applied, and the default size from the level is applied. The values
+     * have the following effect:
+     *
+     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the
+     * level look visually as if it were of the immediately lower level).
+     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the
+     * scale.
+     * - 'largest' can be thought of as applying 'larger' twice.
+     *
+     * @see level
+     * @default undefined
+     */
+    size?: "smaller" | "larger" | "largest" | undefined;
+    /**
+     * The tone (semantic color) of the heading.
+     *
+     * @default 'normal'
+     */
+    tone?: "normal" | "secondary" | "danger" | undefined;
+    /**
+     * Used to truncate the heading to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5" | undefined;
+    /**
+     * How to align the heading text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
+} & ObfuscatedClassName, "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "level" | "weight" | "size" | "tone" | "lineClamp" | "align" | "exceptionallySetClassName"> & React.RefAttributes<HTMLHeadingElement>>;
+export type { HeadingProps, HeadingLevel };
+export { Heading };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/new-components/icons/alert-icon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AlertTone } from '../common-types';
+declare function AlertIcon({ tone, ...props }: JSX.IntrinsicElements['svg'] & {
+    tone: AlertTone;
+}): JSX.Element | null;
+export { AlertIcon };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=["tone"],n={info:function(e){return l.createElement("svg",Object.assign({width:"24",height:"24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),l.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"}))},positive:function(e){return l.createElement("svg",Object.assign({width:"24",height:"24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),l.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"}))},caution:function(e){return l.createElement("svg",Object.assign({width:"24",height:"24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),l.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"}))},critical:function(e){return l.createElement("svg",Object.assign({width:"24",height:"24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),l.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"}))}};exports.AlertIcon=function(r){var a=r.tone,i=e.objectWithoutPropertiesLoose(r,t),o=n[a];return o?l.createElement(o,Object.assign({},i)):null};
+//# sourceMappingURL=alert-icon.js.map

package/lib/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","props","React","width","height","fill","xmlns","fillRule","clipRule","d","positive","caution","critical","tone","Icon"],"mappings":"+JAGMA,EAA4D,CAC9DC,KAWJ,SAAuBC,UAEfC,qCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,yNACFJ,KAAK,mBAjBjBK,SAuBJ,SAA2BT,UAEnBC,qCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,6MACFJ,KAAK,mBA7BjBM,QAmCJ,SAA0BV,UAElBC,qCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,gXACFJ,KAAK,mBAzCjBO,SA+CJ,SAA2BX,UAEnBC,qCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,SAAS,UACTC,SAAS,UACTC,EAAE,6QACFJ,KAAK,sCAnDrB,gBAAqBQ,IAAAA,KAASZ,sCACpBa,EAAOf,EAAiBc,UACvBC,EAAOZ,gBAACY,mBAASb,IAAY"}

package/lib/new-components/icons/close-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function CloseIcon(props: JSX.IntrinsicElements['svg']): JSX.Element;
+export { CloseIcon };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.CloseIcon=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},t),e.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"}))};
+//# sourceMappingURL=close-icon.js.map

package/lib/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":["props","React","xmlns","width","height","fill","d"],"mappings":"6GAEA,SAAmBA,UAEXC,qCAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,MAASJ,GAC/DC,wBACII,KAAK,eACLC,EAAE"}

package/lib/new-components/icons/password-hidden-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function PasswordHiddenIcon(props: JSX.IntrinsicElements['svg']): JSX.Element;
+export { PasswordHiddenIcon };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.PasswordHiddenIcon=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},t),e.createElement("g",{fill:"gray",fillRule:"evenodd",transform:"translate(2 4)"},e.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"}),e.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"}),e.createElement("rect",{width:"21",height:"1",x:"-.722",y:"7.778",rx:".5",transform:"rotate(-45 9.778 8.278)"})))};
+//# sourceMappingURL=password-hidden-icon.js.map

package/lib/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":["props","React","xmlns","width","height","fill","fillRule","transform","d","x","y","rx"],"mappings":"sHAEA,SAA4BA,UAEpBC,qCAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,MAASJ,GAC/DC,qBAAGI,KAAK,OAAOC,SAAS,UAAUC,UAAU,kBACxCN,wBACIK,SAAS,UACTE,EAAE,8bAENP,wBACIK,SAAS,UACTE,EAAE,4JAENP,wBACIE,MAAM,KACNC,OAAO,IACPK,EAAE,QACFC,EAAE,QACFC,GAAG,KACHJ,UAAU"}

package/lib/new-components/icons/password-visible-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function PasswordVisibleIcon(props: JSX.IntrinsicElements['svg']): JSX.Element;
+export { PasswordVisibleIcon };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.PasswordVisibleIcon=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},t),e.createElement("g",{fill:"none",fillRule:"evenodd",stroke:"gray"},e.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"}),e.createElement("circle",{cx:"12",cy:"12",r:"3.5"})))};
+//# sourceMappingURL=password-visible-icon.js.map

package/lib/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":["props","React","xmlns","width","height","fill","fillRule","stroke","d","cx","cy","r"],"mappings":"uHAEA,SAA6BA,UAErBC,qCAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,MAASJ,GAC/DC,qBAAGI,KAAK,OAAOC,SAAS,UAAUC,OAAO,QACrCN,wBAAMO,EAAE,6JACRP,0BAAQQ,GAAG,KAAKC,GAAG,KAAKC,EAAE"}

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

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

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

@@ -0,0 +1,12 @@
+import type { ResponsiveProp } from '../responsive-props';
+import type { Space } from '../common-types';
+import type { ReusableBoxProps } from '../box';
+declare type InlineAlign = 'left' | 'center' | 'right';
+interface InlineProps extends ReusableBoxProps {
+    space?: ResponsiveProp<Space>;
+    align?: ResponsiveProp<InlineAlign>;
+    alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>;
+}
+declare const Inline: import("../../utils/polymorphism").PolymorphicComponent<"div", InlineProps, "obfuscateClassName">;
+export type { InlineProps, InlineAlign };
+export { Inline };

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

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

package/lib/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":["polymorphicComponent","ref","as","space","align","alignY","children","exceptionallySetClassName","props","React","Box","display","flexWrap","className","getClassNames","styles","alignItems","mapResponsiveProp","justifyContent"],"mappings":"wXAmBeA,wBAAyC,WAEpDC,OADEC,IAAAA,GAAIC,IAAAA,UAAOC,MAAAA,aAAQ,aAAQC,OAAAA,aAAS,WAAUC,IAAAA,SAAUC,IAAAA,0BAA8BC,6CAIpFC,gBAACC,WACGD,gBAACC,uBACOF,GACJN,GAAIA,EACJS,QAAQ,OACRC,SAAS,OACTC,UAAW,CAACN,EAA2BO,gBAAcC,UAAQ,QAASZ,IACtEF,IAAKA,EACLe,WAAYC,oBAAkBZ,GAAQ,SAACA,SACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAY,YAEvEa,eAAgBD,oBAAkBb,GAAO,SAACA,SAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAY,cAGpEE"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"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"};
+//# sourceMappingURL=inline.module.css.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+declare type Size = 'small' | 'medium' | 'large';
+declare type NativeProps = Omit<JSX.IntrinsicElements['div'], 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'>;
+declare type LoadingProps = NativeProps & {
+    /**
+     * The size of the loading spinner.
+     * @default 'small'
+     */
+    size?: Size;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */
+    'aria-describedby'?: string;
+} & ({
+    /** Defines a string value that labels the current loading component for assistive technologies. */
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */
+    'aria-labelledby': string;
+    'aria-label'?: never;
+});
+declare function Loading({ size, exceptionallySetClassName, ...props }: LoadingProps): JSX.Element;
+export { Loading };
+export type { LoadingProps };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-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","size","exceptionallySetClassName","props","numericSize","React","Box","undefined","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"8SAoCMA,EAAoC,CACtCC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAmBC,KAAAA,aAAO,UAASC,IAAAA,0BAA8BC,sCACvDC,YAAcP,EAAYI,kBAASJ,EAAYC,aAQjDO,gBAACC,uBACOH,gBARMA,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPI,EADA,WAOEC,UAAWN,EACXO,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELP,gBAACQ,WAAQZ,KAAMG"}

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

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

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

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

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

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