@doist/reactist 19.1.1 → 20.0.0

package/es/{new-components/stack → stack}/stack.js

@@ -1,7 +1,7 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement, Children, Fragment } from 'react';
-import { polymorphicComponent } from '../../utils/polymorphism.js';
-import { mapResponsiveProp } from '../responsive-props.js';
+import { polymorphicComponent } from '../utils/polymorphism.js';
+import { mapResponsiveProp } from '../utils/responsive-props.js';
 import { Box } from '../box/box.js';
 import { Divider } from '../divider/divider.js';
 import flattenChildren from 'react-keyed-flatten-children';

package/es/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align,\n        dividers = 'none',\n        width = 'full',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignItems: BoxProps['alignItems'] =\n        align === undefined\n            ? undefined\n            : mapResponsiveProp(align, (align) =>\n                  align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n              )\n\n    return (\n        <Box\n            {...props}\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={width}\n            alignItems={alignItems}\n            gap={space}\n            as={as}\n            className={exceptionallySetClassName}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","polymorphicComponent","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","alignItems","undefined","mapResponsiveProp","React","Box","display","flexDirection","gap","className","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;MAsBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAWlDE,GAXkD;MAClD;IACIC,EADJ;IAEIC,KAFJ;IAGIC,KAHJ;IAIIC,QAAQ,GAAG,MAJf;IAKIC,KAAK,GAAG,MALZ;IAMIC,QANJ;IAOIC;;MACGC;;EAIP,MAAMC,UAAU,GACZN,KAAK,KAAKO,SAAV,GACMA,SADN,GAEMC,iBAAiB,CAACR,KAAD,EAASA,KAAD,IACrBA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QADnD,CAH3B;EAOA,oBACIS,aAAA,CAACC,GAAD,oCACQL,KADR;IAEIM,OAAO,EAAC,MAFZ;IAGIC,aAAa,EAAC,QAHlB;IAIIV,KAAK,EAAEA,KAJX;IAKII,UAAU,EAAEA,UALhB;IAMIO,GAAG,EAAEd,KANT;IAOID,EAAE,EAAEA,EAPR;IAQIgB,SAAS,EAAEV,yBARf;IASIP,GAAG,EAAEA;MAEJI,QAAQ,KAAK,MAAb,GACKQ,QAAA,CAAeM,GAAf,CAAmBC,eAAe,CAACb,QAAD,CAAlC,EAA8C,CAACc,KAAD,EAAQC,KAAR,KAC1CA,KAAK,GAAG,CAAR,gBACIT,aAAA,SAAA,MAAA,eACIA,aAAA,CAACU,OAAD;IAASC,MAAM,EAAEnB;GAAjB,CADJ,EAEKgB,KAFL,CADJ,GAMIA,KAPR,CADL,GAWKd,QAtBV,CADJ;AA0BH,CA9CiC;;;;"}

package/es/{new-components/switch-field → switch-field}/switch-field.js

@@ -1,9 +1,9 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useState, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
 import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
-import { useId } from '../common-helpers.js';
+import { useId } from '../utils/common-helpers.js';
 import { Text } from '../text/text.js';
 import { FieldHint } from '../base-field/base-field.js';
 import styles from './switch-field.module.css.js';

package/es/switch-field/switch-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ntype SwitchFieldProps = Omit<\n    FieldComponentProps<HTMLInputElement>,\n    | 'type'\n    | 'secondaryLabel'\n    | 'auxiliaryLabel'\n    | 'maxWidth'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    /** Identifies the element (or elements) that describes the switch for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current switch for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current switch for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        hint,\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["SwitchField","React","ref","label","hint","disabled","hidden","defaultChecked","id","originalId","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checkedState","setChecked","checked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"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"}

package/es/{new-components/tabs → tabs}/tabs.js

@@ -1,11 +1,11 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useEffect, useMemo, createElement, useContext, useState, createContext } from 'react';
 import classNames from 'classnames';
-import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { polymorphicComponent } from '../utils/polymorphism.js';
 import { Box } from '../box/box.js';
 import { Inline } from '../inline/inline.js';
 import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'ariakit/tab';
-import { usePrevious } from '../../hooks/use-previous/use-previous.js';
+import { usePrevious } from '../hooks/use-previous/use-previous.js';
 import styles from './tabs.module.css.js';
 
 const _excluded = ["as", "children", "id", "exceptionallySetClassName"],

package/es/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../hooks/use-previous'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

package/es/{new-components/text → text}/text.js

@@ -1,7 +1,7 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
-import { polymorphicComponent } from '../../utils/polymorphism.js';
-import { getClassNames } from '../responsive-props.js';
+import { polymorphicComponent } from '../utils/polymorphism.js';
+import { getClassNames } from '../utils/responsive-props.js';
 import { Box } from '../box/box.js';
 import styles from './text.module.css.js';
 

package/es/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text 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 text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\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            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":";;;;;;;;MAoDMA,IAAI,gBAAGC,oBAAoB,CAAmB,SAASD,IAAT,OAYhDE,GAZgD;MAChD;IACIC,EADJ;IAEIC,IAAI,GAAG,MAFX;IAGIC,MAAM,GAAG,SAHb;IAIIC,IAAI,GAAG,QAJX;IAKIC,KALJ;IAMIC,QANJ;IAOIC,SAPJ;IAQIC;;MACGC;;EAIP,MAAMC,sBAAsB,GACxB,OAAOH,SAAP,KAAqB,QAArB,GAAgCI,MAAM,CAACJ,SAAD,CAAN,GAAoB,CAApD,GAAwD,CAACA,SAAD,WAACA,SAAD,GAAc,CAAd,IAAmB,CAD/E;EAGA,oBACIK,aAAA,CAACC,GAAD,oCACQJ,KADR;IAEIR,EAAE,EAAEA,EAFR;IAGIa,SAAS,EAAE,CACPN,yBADO,EAEPO,MAAM,CAACC,IAFA,EAGPd,IAAI,KAAK,MAAT,GAAkBe,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBb,IAAjB,CAA/B,GAAwD,IAHjD,EAIPC,MAAM,KAAK,SAAX,GAAuBc,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBZ,MAAnB,CAApC,GAAiE,IAJ1D,EAKPC,IAAI,KAAK,QAAT,GAAoBa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBX,IAAjB,CAAjC,GAA0D,IALnD,EAMPM,sBAAsB,GAAGK,MAAM,CAACL,sBAAV,GAAmC,IANlD,EAOPH,SAAS,GAAGU,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsBR,SAAS,CAACW,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAHf;IAYIC,SAAS,EAAEd,KAZf;;;IAeIe,YAAY,EAAEb,SAAS,GAAG,QAAH,GAAcc,SAfzC;IAgBIrB,GAAG,EAAEA;MAEJM,QAlBL,CADJ;AAsBH,CAvCgC;;;;"}

package/es/{new-components/text-area → text-area}/text-area.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useRef, useEffect, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';

package/es/text-area/text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        /**\n         * The number of visible text lines for the text area.\n         *\n         * If it is specified, it must be a positive integer. If it is not specified, the default\n         * value is 2 (set by the browser).\n         *\n         * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n         * of rows that the textarea will shrink to when the content is not large enough to make it\n         * expand.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n         */\n        rows?: number\n        /**\n         * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n         */\n        autoExpand?: boolean\n    }\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n            function handleInput(event: Event) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = (event.currentTarget as HTMLTextAreaElement).value\n                }\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) return undefined\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","ariaDescribedBy","rows","autoExpand","props","containerRef","internalRef","combinedRef","useMergeRefs","setupAutoExpand","containerElement","current","handleInput","event","dataset","replicatedValue","currentTarget","value","textAreaElement","undefined","addEventListener","removeEventListener","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer"],"mappings":";;;;;;;;MA2BMA,QAAQ,gBAAGC,UAAA,CAAqD,SAASD,QAAT,OAiBlEE,GAjBkE;MAClE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,MAVJ;IAWI,oBAAoBC,eAXxB;IAYIC,IAZJ;IAaIC,UAAU,GAAG;;MACVC;;EAIP,MAAMC,YAAY,GAAGhB,MAAA,CAA6B,IAA7B,CAArB;EACA,MAAMiB,WAAW,GAAGjB,MAAA,CAAkC,IAAlC,CAApB;EACA,MAAMkB,WAAW,GAAGC,YAAY,CAAC,CAAClB,GAAD,EAAMgB,WAAN,CAAD,CAAhC;EAEAjB,SAAA,CACI,SAASoB,eAAT;IACI,MAAMC,gBAAgB,GAAGL,YAAY,CAACM,OAAtC;;IACA,SAASC,WAAT,CAAqBC,KAArB;MACI,IAAIH,gBAAJ,EAAsB;QAClBA,gBAAgB,CAACI,OAAjB,CAAyBC,eAAzB,GAA4CF,KAAK,CAACG,aAAN,CAA4CC,KAAxF;;;;IAIR,MAAMC,eAAe,GAAGZ,WAAW,CAACK,OAApC;IACA,IAAI,CAACO,eAAD,IAAoB,CAACf,UAAzB,EAAqC,OAAOgB,SAAP;IACrCD,eAAe,CAACE,gBAAhB,CAAiC,OAAjC,EAA0CR,WAA1C;IACA,OAAO,MAAMM,eAAe,CAACG,mBAAhB,CAAoC,OAApC,EAA6CT,WAA7C,CAAb;GAZR,EAcI,CAACT,UAAD,CAdJ;EAiBA,oBACId,aAAA,CAACiC,SAAD;IACI/B,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,MAAM,EAAEA;wBACUC;IAClBsB,SAAS,EAAE,CACPC,MAAM,CAACC,iBADA,EAEP3B,IAAI,KAAK,OAAT,GAAmB0B,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPnC,OAAO,KAAK,UAAZ,GAAyBiC,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKX5B,QAAQ,EAAEA;GAhBd,EAkBM6B,UAAD,iBACGvC,aAAA,CAACwC,GAAD;IACIC,KAAK,EAAC;IACNC,OAAO,EAAC;IACRR,SAAS,EAAEC,MAAM,CAACQ;IAClB1C,GAAG,EAAEe;GAJT,eAMIhB,aAAA,WAAA,mDACQe,KADR,GAEQwB,UAFR;IAGItC,GAAG,EAAEiB,WAHT;IAIIL,IAAI,EAAEA,IAJV;IAKIqB,SAAS,EAAEpB,UAAU,GAAGqB,MAAM,CAACrB,UAAV,GAAuBgB;KAXpD,CAnBR,CADJ;AAqCH,CA7EgB;;;;"}

package/es/{new-components/text-field → text-field}/text-field.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useRef, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';

package/es/text-field/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> &\n    BaseFieldVariantProps & {\n        type?: TextFieldType\n        startIcon?: React.ReactChild\n    }\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startIcon,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function focusOnIconClick() {\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    {startIcon ? (\n                        <Box\n                            display=\"flex\"\n                            className={styles.startIcon}\n                            onClick={focusOnIconClick}\n                            marginRight=\"-xsmall\"\n                            marginLeft=\"small\"\n                            aria-hidden\n                        >\n                            {startIcon}\n                        </Box>\n                    ) : null}\n                    <input {...props} {...extraProps} type={type} ref={combinedRef} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","ariaDescribedBy","startIcon","props","internalRef","combinedRef","useMergeRefs","focusOnIconClick","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","marginRight","marginLeft"],"mappings":";;;;;;;;MAeMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAiBjEE,GAjBiE;MACjE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,IAAI,GAAG,MATX;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,oBAAoBC,eAZxB;IAaIC;;MACGC;;EAIP,MAAMC,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMiB,WAAW,GAAGC,YAAY,CAAC,CAACjB,GAAD,EAAMe,WAAN,CAAD,CAAhC;;EAEA,SAASG,gBAAT;;;IACI,wBAAAH,WAAW,CAACI,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIrB,aAAA,CAACsB,SAAD;IACIpB,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,QAAQ,EAAEA;IACVC,MAAM,EAAEA;wBACUC;GAXtB,EAaMU,UAAD,iBACGvB,aAAA,CAACwB,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPpB,IAAI,KAAK,OAAT,GAAmBmB,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGP5B,OAAO,KAAK,UAAZ,GAAyB0B,MAAM,CAACG,QAAhC,GAA2C,IAHpC;GAHf,EASKjB,SAAS,gBACNd,aAAA,CAACwB,GAAD;IACIC,OAAO,EAAC;IACRE,SAAS,EAAEC,MAAM,CAACd;IAClBkB,OAAO,EAAEb;IACTc,WAAW,EAAC;IACZC,UAAU,EAAC;;GALf,EAQKpB,SARL,CADM,GAWN,IApBR,eAqBId,aAAA,QAAA,mDAAWe,KAAX,GAAsBQ,UAAtB;IAAkCb,IAAI,EAAEA,IAAxC;IAA8CT,GAAG,EAAEgB;KArBvD,CAdR,CADJ;AAyCH,CAnEiB;;;;"}

package/es/{new-components/text-link → text-link}/text-link.js

@@ -1,6 +1,6 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
-import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { polymorphicComponent } from '../utils/polymorphism.js';
 import { Box } from '../box/box.js';
 import styles from './text-link.module.css.js';
 

package/es/text-link/text-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.js","sources":["../../src/text-link/text-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport styles from './text-link.module.css'\nimport type { OpenInNewTab } from '../utils/common-types'\n\ntype TextLinkProps = OpenInNewTab\n\nconst TextLink = polymorphicComponent<'a', TextLinkProps>(function TextLink(\n    { as = 'a', openInNewTab = false, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            as={as}\n            display=\"inline\"\n            className={[exceptionallySetClassName, styles.container]}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { TextLink }\nexport type { TextLinkProps }\n"],"names":["TextLink","polymorphicComponent","ref","as","openInNewTab","exceptionallySetClassName","props","React","Box","display","className","styles","container","target","undefined","rel"],"mappings":";;;;;;;MAQMA,QAAQ,gBAAGC,oBAAoB,CAAqB,SAASD,QAAT,OAEtDE,GAFsD;MACtD;IAAEC,EAAE,GAAG,GAAP;IAAYC,YAAY,GAAG,KAA3B;IAAkCC;;MAA8BC;;EAGhE,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIH,EAAE,EAAEA,EAFR;IAGIM,OAAO,EAAC,QAHZ;IAIIC,SAAS,EAAE,CAACL,yBAAD,EAA4BM,MAAM,CAACC,SAAnC,CAJf;IAKIV,GAAG,EAAEA,GALT;IAMIW,MAAM,EAAET,YAAY,GAAG,QAAH,GAAcU,SANtC;IAOIC,GAAG,EAAEX,YAAY,GAAG,qBAAH,GAA2BU;KARpD;AAWH,CAfoC;;;;"}

package/es/{new-components/toast → toast}/static-toast.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';

package/es/toast/static-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-toast.js","sources":["../../src/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <Button\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast }\nexport type { StaticToastProps }\n"],"names":["StaticToast","React","forwardRef","Toast","ref","message","description","icon","action","onDismiss","dismissLabel","props","Box","role","borderRadius","width","background","display","padding","alignItems","className","styles","toastContainer","ToastContentSlot","flexGrow","maxWidth","Stack","space","Text","weight","isActionObject","Button","variant","size","onClick","label","CloseIcon","children","justifyContent","marginX","marginY","slot"],"mappings":";;;;;;;;;;AA4DA;;;;;;;;;;;;;;;MAcMA,WAAW,gBAAGC,cAAK,CAACC,UAAN,CAAmD,SAASC,KAAT,OAEnEC,GAFmE;MACnE;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,IAAxB;IAA8BC,MAA9B;IAAsCC,SAAtC;IAAiDC,YAAY,GAAG;;MAAYC;;EAG5E,oBACIV,4BAAA,CAACW,GAAD;IACIR,GAAG,EAAEA,GADT;IAEIS,IAAI,EAAC,OAFT;iBAGc,QAHd;IAIIC,YAAY,EAAC,MAJjB;IAKIC,KAAK,EAAC,YALV;IAMIC,UAAU,EAAC,OANf;IAOIC,OAAO,EAAC,MAPZ;IAQIC,OAAO,EAAC,OARZ;IASIC,UAAU,EAAC,QATf;IAUIC,SAAS,EAAEC,MAAM,CAACC;KACdX,KAXR,GAaKJ,IAAI,gBAAGN,4BAAA,CAACsB,gBAAD,MAAA,EAAmBhB,IAAnB,CAAH,GAAiD,IAb1D,eAeIN,4BAAA,CAACW,GAAD;IAAKY,QAAQ,EAAE;IAAGC,QAAQ,EAAC;GAA3B,EACKnB,WAAW,gBACRL,4BAAA,CAACyB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACI1B,4BAAA,CAAC2B,IAAD;IAAMC,MAAM,EAAC;GAAb,EAAqBxB,OAArB,KAAA,CADJ,eAEIJ,4BAAA,CAAC2B,IAAD,MAAA,EAAOtB,WAAP,CAFJ,CADQ,gBAMRL,4BAAA,CAAC2B,IAAD,MAAA,EAAOvB,OAAP,CAPR,CAfJ,EA0BKG,MAAM,gBACHP,4BAAA,CAACsB,gBAAD,MAAA,EACKO,cAAc,CAACtB,MAAD,CAAd,gBACGP,4BAAA,CAAC8B,MAAD;IAAQC,OAAO,EAAC;IAAWC,IAAI,EAAC;IAAQC,OAAO,EAAE1B,MAAM,CAAC0B;GAAxD,EACK1B,MAAM,CAAC2B,KADZ,CADH,GAKG3B,MANR,CADG,GAUH,IApCR,EAsCKC,SAAS,gBACNR,4BAAA,CAACsB,gBAAD,MAAA,eACItB,4BAAA,CAAC8B,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEzB;kBACGC;IACZH,IAAI,eAAEN,4BAAA,CAACmC,SAAD,MAAA;GALV,CADJ,CADM,GAUN,IAhDR,CADJ;AAoDH,CAxDmB;;AA0DpB,SAASN,cAAT,CAAwBtB,MAAxB;EACI,OACIA,MAAM,IAAI,IAAV,IACA,OAAOA,MAAP,KAAkB,QADlB,IAEA,WAAWA,MAFX,IAGA,aAAaA,MAHb,IAIA,OAAOA,MAAM,CAAC2B,KAAd,KAAwB,QAJxB,IAKA,OAAO3B,MAAM,CAAC0B,OAAd,KAA0B,UAN9B;AAQH;;AAED,SAASX,gBAAT,CAA0B;EAAEc;AAAF,CAA1B;EACI,oBACIpC,4BAAA,CAACW,GAAD;IACIK,OAAO,EAAC;IACRE,UAAU,EAAC;IACXmB,cAAc,EAAC;IACfC,OAAO,EAAC;IACRC,OAAO,EAAC;IACRpB,SAAS,EAAEC,MAAM,CAACoB;GANtB,EAQKJ,QARL,CADJ;AAYH;;;;"}

package/es/toast/toast-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-animation.js","sources":["../../src/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["ANIMATION_TIMEOUT","ENTRANCE_TRANSITION","EXIT_TRANSITION","animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","transitionEndHandler","event","target","removeEventListener","clearTimeout","addEventListener","window","requestAnimationFrame","to","useToastsAnimation","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"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"}

package/es/{new-components/toast → toast}/use-toasts.js

@@ -1,8 +1,8 @@
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
-import { generateElementId } from '../common-helpers.js';
+import { generateElementId } from '../utils/common-helpers.js';
 import styles from './toast.module.css.js';
 import { StaticToast } from './static-toast.js';
 import { Portal } from 'ariakit/portal';

package/es/toast/use-toasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(() => {\n                onRemoveToast(toastId)\n                onDismiss?.()\n            }, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning],\n    )\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={action}\n            onDismiss={\n                showDismissButton\n                    ? () => {\n                          onDismiss?.()\n                          onRemoveToast(toastId)\n                      }\n                    : undefined\n            }\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={styles.stackedToastsView}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","useEffect","setupAutoDismiss","window","setTimeout","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","removeToast","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}

package/es/{new-components/tooltip → tooltip}/tooltip.js

@@ -1,4 +1,4 @@
-import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo, Children, createElement, Fragment, cloneElement, useCallback, useRef, useEffect } from 'react';
 import { Box } from '../box/box.js';
 import { TooltipAnchor, Tooltip as Tooltip$1, TooltipArrow, useTooltipState } from 'ariakit/tooltip';

package/es/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from 'ariakit/tooltip'\nimport { Box } from '../box'\n\nimport type {\n    TooltipStateProps as AriakitTooltipStateProps,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: PopoverState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n        state.hide()\n        child?.props?.onBlur?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} described>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, {\n                        ...anchorProps,\n                        ...child.props,\n                        onFocus: handleFocus,\n                        onBlur: handleBlur,\n                    })\n                }}\n            </TooltipAnchor>\n            {state.open ? (\n                <Box\n                    as={AriakitTooltip}\n                    state={state}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","show","hide","Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","state","placement","gutter","child","only","ref","Error","handleFocus","event","handleKeyUp","eventKey","key","currentTarget","addEventListener","once","preventDefault","props","onFocus","handleBlur","onBlur","TooltipAnchor","described","anchorProps","open","Box","as","AriakitTooltip","className","styles","tooltip","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","timeoutRef","clearTimeouts","current","clearTimeout","fn","setTimeout"],"mappings":"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"}

package/es/utils/common-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":["import * as React from 'react'\n\nlet uid = 0\nfunction uniqueId() {\n    return uid++\n}\n\nexport function generateElementId(prefix: string): string {\n    const num = uniqueId()\n    return `${prefix}-${num}`\n}\n\nexport function useId(providedId?: string): string {\n    const ref = React.useRef<string | null>(providedId ?? null)\n    if (!ref.current) {\n        ref.current = generateElementId('element')\n    }\n    return ref.current\n}\n"],"names":["uid","uniqueId","generateElementId","prefix","num","useId","providedId","ref","React","current"],"mappings":";;AAEA,IAAIA,GAAG,GAAG,CAAV;;AACA,SAASC,QAAT;EACI,OAAOD,GAAG,EAAV;AACH;;SAEeE,kBAAkBC;EAC9B,MAAMC,GAAG,GAAGH,QAAQ,EAApB;EACA,OAAUE,MAAV,SAAoBC,GAApB;AACH;SAEeC,MAAMC;EAClB,MAAMC,GAAG,GAAGC,MAAA,CAA4BF,UAA5B,WAA4BA,UAA5B,GAA0C,IAA1C,CAAZ;;EACA,IAAI,CAACC,GAAG,CAACE,OAAT,EAAkB;IACdF,GAAG,CAACE,OAAJ,GAAcP,iBAAiB,CAAC,SAAD,CAA/B;;;EAEJ,OAAOK,GAAG,CAACE,OAAX;AACH;;;;"}

package/es/utils/responsive-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: Array<string | undefined> = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAgBA,MAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC;AAEA;;;;;;;;;;;;;;;;;;AAiBA,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ;EAKI,IAAI,CAACA,KAAL,EAAY;IACR,OAAO,IAAP;;;EAGJ,MAAMC,SAAS,GAA8B,EAA7C;;EAEA,IAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;IAC3BC,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAhB,CAArB;GADJ,MAEO;IACH,IAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAK,CAACG,MAAtB,CAArB;IAClB,IAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,aAAWC,QAAX,SAAuBC,KAAK,CAACI,MAA7B,CAArB;IAClB,IAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,cAAYC,QAAZ,SAAwBC,KAAK,CAACK,OAA9B,CAArB;;;EAGvB,IAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;;IAEpCC,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;MAAEV,QAAF;MAAYC,KAAZ;MAAmBC;KAA5E;;;EAGJ,OAAOA,SAAP;AACH;AAED;;;;;;;;;;;;AAUA,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ;EAII,IAAI,CAACD,SAAL,EAAgB;IACZ,OAAOE,SAAP;;;EAGJ,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOC,MAAM,CAACD,SAAD,CAAb;;;EAGJ,OAAO;IACHR,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SADnD;IAEHT,MAAM,EAAEO,SAAS,CAACP,MAAV,GAAmBQ,MAAM,CAACD,SAAS,CAACP,MAAX,CAAzB,GAA8CS,SAFnD;IAGHR,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ;GAH7D;AAKH;;;;"}

package/lib/{new-components/alert → alert}/alert.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AlertTone } from '../common-types';
+import type { AlertTone } from '../utils/common-types';
 declare type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };

package/lib/alert/alert.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../utils/responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../button/button.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),s=require("./alert.module.css.js");exports.Alert=function({id:i,children:u,tone:c,closeLabel:m,onClose:d}){return e.createElement(t.Box,{id:i,role:"alert","aria-live":"polite",borderRadius:"standard",className:[s.default.container,l.getClassNames(s.default,"tone",c)]},e.createElement(n.Columns,{space:"small",alignY:"top"},e.createElement(n.Column,{width:"content"},e.createElement(a.AlertIcon,{tone:c})),e.createElement(n.Column,null,e.createElement(t.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small"},u)),null!=d&&null!=m?e.createElement(n.Column,{width:"content"},e.createElement(r.Button,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:e.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
+//# sourceMappingURL=alert.js.map

package/lib/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"standard\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["id","children","tone","closeLabel","onClose","React","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY","paddingRight","undefined","Button","variant","size","onClick","icon","CloseIcon","style","--reactist-btn-hover-fill"],"mappings":"6VA0BA,UAAeA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,EAAhBC,WAAsBA,EAAtBC,QAAkCA,IAC7C,OACIC,gBAACC,OACGN,GAAIA,EACJO,KAAK,oBACK,SACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQR,KAE5DG,gBAACQ,WAAQC,MAAM,QAAQC,OAAO,OAC1BV,gBAACW,UAAOC,MAAM,WACVZ,gBAACa,aAAUhB,KAAMA,KAErBG,gBAACW,cACGX,gBAACC,OACGa,SAAS,SACTC,aAAyB,MAAXhB,GAAiC,MAAdD,OAAqBkB,EAAY,SAEjEpB,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,gBAACW,UAAOC,MAAM,WACVZ,gBAACiB,UACGC,QAAQ,aACRC,KAAK,QACLC,QAASrB,eACGD,EACZuB,KAAMrB,gBAACsB,kBACPC,MAAO,CAEHC,4BAA6B,kBAIzC"}

package/lib/{new-components/avatar → avatar}/avatar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ResponsiveProp } from '../responsive-props';
+import { ResponsiveProp } from '../utils/responsive-props';
 declare type AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 declare type Props = {
     /** @deprecated Please use `exceptionallySetClassName` */

package/lib/avatar/avatar.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../utils/responsive-props.js"),t=require("../box/box.js"),s=require("./utils.js"),l=require("./avatar.module.css.js");const i=["user","avatarUrl","size","className","colorList","exceptionallySetClassName"],o=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"];function c(c){let{user:u,avatarUrl:n,size:b="l",className:d,colorList:m=o,exceptionallySetClassName:p}=c,f=e.objectWithoutProperties(c,i);const v=s.getInitials(u.name)||s.getInitials(u.email),x=b||"l",g=n?{backgroundImage:"url("+n+")",textIndent:"-9999px"}:{backgroundColor:m[s.emailToIndex(u.email,m.length)]},j=r.getClassNames(l.default,"size",x);return a.createElement(t.Box,e.objectSpread2({className:[d,l.default.avatar,j,p],style:g},f),v)}c.displayName="Avatar",exports.Avatar=c;
+//# sourceMappingURL=avatar.js.map

package/lib/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    exceptionallySetClassName?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":"0WAQMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAgBJ,SAASC,SAAOC,KACZA,EADYC,UAEZA,EAFYC,KAGZA,EAAO,IAHKC,UAIZA,EAJYC,UAKZA,EAAYN,EALAO,0BAMZA,KACGC,iCAEH,MAAMC,EAAeC,cAAYR,EAAKS,OAASD,cAAYR,EAAKU,OAC1DC,EAAaT,GAAc,IAE3BU,EAAQX,EACR,CACIY,uBAAwBZ,MACxBa,WAAY,WAEhB,CACIC,gBAAiBX,EAAUY,eAAahB,EAAKU,MAAON,EAAUa,UAGlEC,EAAgBC,gBAAcC,UAAQ,OAAQT,GAEpD,OACIU,gBAACC,uBACGnB,UAAW,CAACA,EAAWiB,UAAOG,OAAQL,EAAeb,GACrDO,MAAOA,GACHN,GAEHC,GAIbR,EAAOyB,YAAc"}

package/lib/avatar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial?.[0]\n    if (\n        firstInitial != null &&\n        lastInitial != null &&\n        initials != null &&\n        // Better readable this way.\n        // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n        firstInitial[0] !== lastInitial[0]\n    ) {\n        initials += lastInitial[0]\n    }\n    return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n    return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["email","maxIndex","seed","split","charCodeAt","length","name","trim","firstInitial","lastInitial","initials","_initials","toUpperCase"],"mappings":"yFAuBA,SAAsBA,EAAeC,GACjC,MAAMC,EAAOF,EAAMG,MAAM,KAAK,GAE9B,OADaD,GAAOA,EAAKE,WAAW,GAAKF,EAAKE,WAAWF,EAAKG,OAAS,IAAU,GACnEJ,uBA1BlB,SAAqBK,SACjB,IAAKA,EACD,MAAO,GAGX,MAAMJ,EAAOI,EAAKC,OAAOJ,MAAM,KACzBK,EAAeN,EAAK,GACpBO,EAAcP,EAAKA,EAAKG,OAAS,GAEvC,IAAIK,QAAWF,SAAAA,EAAe,GAW9B,OAToB,MAAhBA,GACe,MAAfC,GACY,MAAZC,GAGAF,EAAa,KAAOC,EAAY,KAEhCC,GAAYD,EAAY,aAErBC,UAAAC,EAAUC"}

package/lib/badge/badge.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../box/box.js"),a=require("./badge.module.css.js");const l=["tone","label"];exports.Badge=function(o){let{tone:s,label:u}=o,i=e.objectWithoutProperties(o,l);return r.createElement(t.Box,e.objectSpread2(e.objectSpread2({},i),{},{as:"span",display:"inline",className:[a.default.badge,a.default["badge-"+s]]}),u)};
+//# sourceMappingURL=badge.js.map

package/lib/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["tone","label","props","React","Box","as","display","className","styles","badge"],"mappings":"sPAmBA,gBAAeA,KAAEA,EAAFC,MAAQA,KAAUC,iCAC7B,OACIC,gBAACC,yCACOF,OACJG,GAAG,OACHC,QAAQ,SACRC,UAAW,CAACC,UAAOC,MAAOD,mBAAgBR,MAEzCC"}

package/lib/banner/banner.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),r=require("../columns/columns.js"),i=require("../utils/common-helpers.js"),a=require("./banner.module.css.js");const n=["id","tone","icon","title","description","action"];exports.Banner=t.forwardRef((function(o,s){let{id:d,tone:u,icon:c,title:m,description:p,action:b}=o,f=e.objectWithoutProperties(o,n);const x=i.useId(),j=i.useId();return t.createElement(l.Box,e.objectSpread2(e.objectSpread2({},f),{},{ref:s,id:d,role:"status","aria-labelledby":x,"aria-describedby":j,"aria-live":"polite",tabIndex:0,borderRadius:"standard",className:[a.default.banner,a.default["banner-"+u]]}),t.createElement(r.Columns,{space:"medium",alignY:"center"},t.createElement(r.Column,{width:"content","aria-hidden":!0,style:{lineHeight:0}},c),t.createElement(r.Column,null,t.createElement(l.Box,{paddingY:"xsmall"},t.createElement(l.Box,p?{id:x,className:[a.default.title,a.default["title-"+u]]}:{id:x,className:[a.default.title,a.default["title-without-description"],a.default["title-"+u]]},m),p?t.createElement(l.Box,{id:j,className:[a.default.description,a.default["description-"+u]]},p):null)),b?t.createElement(r.Column,{width:"content"},b):null))}));
+//# sourceMappingURL=banner.js.map

package/lib/banner/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactChild\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactChild\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":"sWAiCeA,cAA8C,WAEzDC,OADAC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,KAAWC,iCAGjD,MAAMC,EAAUC,UACVC,EAAgBD,UACtB,OACIV,gBAACY,yCACOJ,OACJP,IAAKA,EACLC,GAAIA,EACJW,KAAK,2BACYJ,qBACCE,cACR,SACVG,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,OAAQD,oBAAiBd,MAE5CH,gBAACmB,WAAQC,MAAM,SAASC,OAAO,UAC3BrB,gBAACsB,UACGC,MAAM,2BAENC,MAAO,CAEHC,WAAY,IAGfrB,GAELJ,gBAACsB,cACGtB,gBAACY,OAAIc,SAAS,UAEN1B,gBAACY,MADJN,GACQJ,GAAIO,EAASO,UAAW,CAACC,UAAOZ,MAAOY,mBAAgBd,MAKxDD,GAAIO,EACJO,UAAW,CACPC,UAAOZ,MAGPY,uCACAA,mBAAgBd,KAVnBE,GAgBRC,EACGN,gBAACY,OACGV,GAAIS,EACJK,UAAW,CAACC,UAAOX,YAAaW,yBAAsBd,KAErDG,GAEL,OAGXC,EAASP,gBAACsB,UAAOC,MAAM,WAAWhB,GAAmB"}