@doist/reactist 10.0.0 → 11.2.0

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

@@ -0,0 +1,42 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement, Children, Fragment } from 'react';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { mapResponsiveProp, getClassNames } from '../responsive-props.js';
+import { Box } from '../box/box.js';
+import { Divider } from '../divider/divider.js';
+import flattenChildren from 'react-keyed-flatten-children';
+import styles from './stack.module.css.js';
+
+var _excluded = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
+var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
+  var as = _ref.as,
+      space = _ref.space,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'start' : _ref$align,
+      _ref$dividers = _ref.dividers,
+      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
+      children = _ref.children,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var alignProps = align === 'start' ? undefined : {
+    width: 'full',
+    flexDirection: 'column',
+    display: 'flex',
+    alignItems: mapResponsiveProp(align, function (align) {
+      return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
+    })
+  };
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, alignProps, {
+    as: as,
+    className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
+    ref: ref
+  }), dividers !== 'none' ? Children.map(flattenChildren(children), function (child, index) {
+    return index > 0 ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Divider, {
+      weight: dividers
+    }), child) : child;
+  }) : children);
+});
+
+export { Stack };
+//# sourceMappingURL=stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\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 = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\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","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;;IAwBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAUlDE,GAVkD;MAE9CC,UAAAA;MACAC,aAAAA;wBACAC;MAAAA,gCAAQ;2BACRC;MAAAA,sCAAW;MACXC,gBAAAA;MACAC,iCAAAA;MACGC;;AAIP,MAAMC,UAAU,GACZL,KAAK,KAAK,OAAV,GACMM,SADN,GAEM;AACIC,IAAAA,KAAK,EAAE,MADX;AAEIC,IAAAA,aAAa,EAAE,QAFnB;AAGIC,IAAAA,OAAO,EAAE,MAHb;AAIIC,IAAAA,UAAU,EAAEC,iBAAiB,CAACX,KAAD,EAAQ,UAACA,KAAD;AAAA,aACjCA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QAD/B;AAAA,KAAR;AAJjC,GAHV;AAYA,sBACIY,aAAA,CAACC,GAAD,oBACQT,OACAC;AACJP,IAAAA,EAAE,EAAEA;AACJgB,IAAAA,SAAS,EAAE,CAACX,yBAAD,EAA4BY,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBjB,KAAlB,CAAzC;AACXF,IAAAA,GAAG,EAAEA;IALT,EAOKI,QAAQ,KAAK,MAAb,GACKW,QAAA,CAAeK,GAAf,CAAmBC,eAAe,CAAChB,QAAD,CAAlC,EAA8C,UAACiB,KAAD,EAAQC,KAAR;AAAA,WAC1CA,KAAK,GAAG,CAAR,gBACIR,aAAA,SAAA,MAAA,eACIA,aAAA,CAACS,OAAD;AAASC,MAAAA,MAAM,EAAErB;KAAjB,CADJ,EAEKkB,KAFL,CADJ,GAMIA,KAPsC;AAAA,GAA9C,CADL,GAWKjB,QAlBV,CADJ;AAsBH,CA9CiC;;;;"}

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

@@ -0,0 +1,4 @@
+var modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
+
+export default modules_3af3b7ac;
+//# sourceMappingURL=stack.module.css.js.map

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

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

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

@@ -0,0 +1,96 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } 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 { Text } from '../text/text.js';
+import { useId } from '../common-helpers.js';
+import { FieldHint } from '../base-field/base-field.js';
+import styles from './switch-field.module.css.js';
+
+var _excluded = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
+  var _ref2, _props$checked, _props$checked2;
+
+  var label = _ref.label,
+      hint = _ref.hint,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      hidden = _ref.hidden,
+      defaultChecked = _ref.defaultChecked,
+      originalId = _ref.id,
+      originalAriaDescribedBy = _ref['aria-describedby'],
+      originalAriaLabel = _ref['aria-label'],
+      originalAriaLabelledby = _ref['aria-labelledby'],
+      _onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var id = useId(originalId);
+  var hintId = useId();
+  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+  var ariaLabel = originalAriaLabel !== null && originalAriaLabel !== void 0 ? originalAriaLabel : undefined;
+  var ariaLabelledBy = originalAriaLabelledby !== null && originalAriaLabelledby !== void 0 ? originalAriaLabelledby : undefined;
+
+  var _React$useState = useState(false),
+      keyFocused = _React$useState[0],
+      setKeyFocused = _React$useState[1];
+
+  var _React$useState2 = useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
+      checkedState = _React$useState2[0],
+      setChecked = _React$useState2[1];
+
+  var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
+  return /*#__PURE__*/createElement(Stack, {
+    space: "small",
+    hidden: hidden
+  }, /*#__PURE__*/createElement(Box, {
+    className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null, keyFocused ? styles.keyFocused : null],
+    as: "label",
+    display: "flex",
+    alignItems: "center"
+  }, /*#__PURE__*/createElement(Box, {
+    position: "relative",
+    display: "inlineBlock",
+    overflow: "visible",
+    marginRight: "small",
+    flexShrink: 0,
+    className: styles.toggle
+  }, /*#__PURE__*/createElement(HiddenVisually, null, /*#__PURE__*/createElement("input", Object.assign({}, props, {
+    id: id,
+    type: "checkbox",
+    disabled: disabled,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ref: ref,
+    checked: isChecked,
+    onChange: function onChange(event) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+
+      if (!event.defaultPrevented) {
+        setChecked(event.currentTarget.checked);
+      }
+    },
+    onBlur: function onBlur(event) {
+      var _props$onBlur;
+
+      setKeyFocused(false);
+      props === null || props === void 0 ? void 0 : (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, event);
+    },
+    onKeyUp: function onKeyUp(event) {
+      var _props$onKeyUp;
+
+      setKeyFocused(true);
+      props === null || props === void 0 ? void 0 : (_props$onKeyUp = props.onKeyUp) === null || _props$onKeyUp === void 0 ? void 0 : _props$onKeyUp.call(props, event);
+    }
+  }))), /*#__PURE__*/createElement("span", {
+    className: styles.handle
+  })), /*#__PURE__*/createElement(Text, {
+    exceptionallySetClassName: styles.label
+  }, label)), hint ? /*#__PURE__*/createElement(FieldHint, {
+    id: hintId
+  }, hint) : null);
+});
+
+export { SwitchField };
+//# sourceMappingURL=switch-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.js","sources":["../../../src/new-components/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 '../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","originalId","id","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checked","checkedState","setChecked","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/switch-field/switch-field.module.css.js

@@ -0,0 +1,4 @@
+var modules_8e05f7c9 = {"container":"ec63c3f1","disabled":"_7de9c06d","checked":"a37981fc","toggle":"_2a17ac45","label":"_68cc9707","handle":"_91409c7f","keyFocused":"a6490371"};
+
+export default modules_8e05f7c9;
+//# sourceMappingURL=switch-field.module.css.js.map

package/es/new-components/switch-field/switch-field.module.css.js.map

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

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

@@ -0,0 +1,147 @@
+import { objectSpread2 as _objectSpread2, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useEffect, useMemo, createElement, useContext, useState, createContext } from 'react';
+import classNames from 'classnames';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { Inline } from '../inline/inline.js';
+import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'reakit/Tab';
+import { usePrevious } from '../../hooks/use-previous/use-previous.js';
+import styles from './tabs.module.css.js';
+
+var _excluded = ["color", "variant"],
+    _excluded2 = ["children", "space"],
+    _excluded3 = ["color", "variant"],
+    _excluded4 = ["children", "id", "as", "render"],
+    _excluded5 = ["color", "variant"];
+var TabsContext = /*#__PURE__*/createContext(null);
+/**
+ * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
+ */
+
+function Tabs(_ref) {
+  var children = _ref.children,
+      selectedId = _ref.selectedId,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant;
+  var tabState = useTabState({
+    selectedId: selectedId
+  });
+  var previousSelectedId = usePrevious(selectedId);
+  var actualSelectedId = tabState.selectedId,
+      select = tabState.select;
+  useEffect(function selectTab() {
+    if (previousSelectedId !== selectedId && selectedId !== actualSelectedId && selectedId !== undefined) {
+      select(selectedId);
+    }
+  }, [selectedId, actualSelectedId, select, previousSelectedId]);
+  var memoizedTabState = useMemo(function memoizeTabState() {
+    return _objectSpread2(_objectSpread2({}, tabState), {}, {
+      color: color,
+      variant: variant
+    });
+  }, // There is no guarantee that useTabState returns a stable object when there are no changes, so
+  // following reakit/Tab's example we only return a new objet when any of its values have changed
+  // eslint-disable-next-line
+  [color, variant].concat(Object.values(tabState)));
+  return /*#__PURE__*/createElement(TabsContext.Provider, {
+    value: memoizedTabState
+  }, children);
+}
+/**
+ * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
+ */
+
+function Tab(_ref2) {
+  var children = _ref2.children,
+      id = _ref2.id;
+  var tabContextValue = useContext(TabsContext);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var color = tabContextValue.color,
+      variant = tabContextValue.variant,
+      tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded);
+
+  return /*#__PURE__*/createElement(Tab$1, Object.assign({
+    className: classNames(styles.tab, styles["tab-" + (variant !== null && variant !== void 0 ? variant : '')], styles["tab-" + (color !== null && color !== void 0 ? color : '')]),
+    id: id
+  }, tabState), children);
+}
+/**
+ * A component used to group `<Tab>` elements together.
+ */
+
+function TabList(_ref3) {
+  var children = _ref3.children,
+      _ref3$space = _ref3.space,
+      space = _ref3$space === void 0 ? 'medium' : _ref3$space,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+
+  var tabContextValue = useContext(TabsContext);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded3);
+
+  return /*#__PURE__*/createElement(TabList$1, Object.assign({}, props, tabState), /*#__PURE__*/createElement(Inline, {
+    space: space
+  }, children));
+}
+/**
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
+ */
+
+var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
+  var children = _ref4.children,
+      id = _ref4.id,
+      as = _ref4.as,
+      _ref4$render = _ref4.render,
+      render = _ref4$render === void 0 ? 'always' : _ref4$render,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+
+  var tabContextValue = useContext(TabsContext);
+
+  var _React$useState = useState(false),
+      tabRendered = _React$useState[0],
+      setTabRendered = _React$useState[1];
+
+  var tabIsActive = (tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.selectedId) === id;
+  useEffect(function trackTabRenderedState() {
+    if (!tabRendered && tabIsActive) {
+      setTabRendered(true);
+    }
+  }, [tabRendered, tabIsActive]);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded5);
+
+  return /*#__PURE__*/createElement(TabPanel$1, Object.assign({
+    tabId: id
+  }, tabState, props, {
+    as: as,
+    ref: ref
+  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+});
+/**
+ * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
+ * component. Can be placed freely within the main `<Tabs>` component.
+ */
+
+function TabAwareSlot(_ref5) {
+  var children = _ref5.children;
+  var tabContextValue = useContext(TabsContext);
+  return tabContextValue ? children({
+    selectedId: tabContextValue.selectedId
+  }) : null;
+}
+
+export { Tab, TabAwareSlot, TabList, TabPanel, Tabs };
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/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    TabStateReturn,\n} from 'reakit/Tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\n\nconst TabsContext = React.createContext<\n    (TabStateReturn & Omit<TabsProps, 'children' | 'selectedId'>) | null\n>(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 primary colour of the tabs\n     */\n    color?: 'primary' | 'secondary' | 'tertiary'\n    /**\n     * Determines the style of the tabs\n     */\n    variant?: 'normal' | 'plain'\n    /**\n     * The id of the selected tab\n     */\n    selectedId?: string | null\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 */\nexport function Tabs({\n    children,\n    selectedId,\n    color = 'primary',\n    variant = 'normal',\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId })\n    const previousSelectedId = usePrevious(selectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectTab() {\n            if (\n                previousSelectedId !== selectedId &&\n                selectedId !== actualSelectedId &&\n                selectedId !== undefined\n            ) {\n                select(selectedId)\n            }\n        },\n        [selectedId, actualSelectedId, select, previousSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                ...tabState,\n                color,\n                variant,\n            }\n        },\n        // There is no guarantee that useTabState returns a stable object when there are no changes, so\n        // following reakit/Tab's example we only return a new objet when any of its values have changed\n        // eslint-disable-next-line\n        [color, variant, ...Object.values(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 */\nexport function Tab({ children, id }: TabProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            className={classNames(\n                styles.tab,\n                styles[`tab-${variant ?? ''}`],\n                styles[`tab-${color ?? ''}`],\n            )}\n            id={id}\n            {...tabState}\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?: ResponsiveProp<Space>\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'medium',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTabList {...props} {...tabState}>\n            <Inline space={space}>{children}</Inline>\n        </BaseTabList>\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 */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    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?.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 { color, variant, ...tabState } = tabContextValue\n\n        return (\n            <BaseTabPanel tabId={id} {...tabState} {...props} as={as} ref={ref}>\n                {render === 'always' ? children : null}\n                {render === 'active' && tabIsActive ? children : null}\n                {render === 'lazy' && (tabIsActive || tabRendered) ? children : null}\n            </BaseTabPanel>\n        )\n    },\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 */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tabs","children","selectedId","color","variant","tabState","useTabState","previousSelectedId","usePrevious","actualSelectedId","select","selectTab","undefined","memoizedTabState","memoizeTabState","Object","values","Provider","value","Tab","id","tabContextValue","BaseTab","className","classNames","styles","tab","TabList","space","props","BaseTabList","Inline","TabPanel","polymorphicComponent","ref","as","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var modules_40c67f5b = {"tab":"d7928f1c","tab-normal":"_5d8e72b3","tab-primary":"_8a23756d","tab-secondary":"_88fd4c95","tab-tertiary":"_40c4cce9","tab-plain":"_13722523"};
+
+export default modules_40c67f5b;
+//# sourceMappingURL=tabs.module.css.js.map

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

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

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

@@ -0,0 +1,36 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement } from 'react';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { getClassNames } from '../responsive-props.js';
+import { Box } from '../box/box.js';
+import styles from './text.module.css.js';
+
+var _excluded = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
+  var as = _ref.as,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'body' : _ref$size,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
+      _ref$tone = _ref.tone,
+      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
+      align = _ref.align,
+      children = _ref.children,
+      lineClamp = _ref.lineClamp,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    as: as,
+    className: [exceptionallySetClassName, styles.text, size !== 'body' ? getClassNames(styles, 'size', size) : null, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, lineClampMultipleLines ? styles.lineClampMultipleLines : null, lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null],
+    textAlign: align,
+    // Prevents emojis from being cut-off
+    // See https://github.com/Doist/reactist/pull/528
+    paddingRight: lineClamp ? 'xsmall' : undefined,
+    ref: ref
+  }), children);
+});
+
+export { Text };
+//# sourceMappingURL=text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../../src/new-components/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\nimport type { Tone } from '../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":";;;;;;;;IAoDMA,IAAI,gBAAGC,oBAAoB,CAAmB,SAASD,IAAT,OAYhDE,GAZgD;MAE5CC,UAAAA;uBACAC;MAAAA,8BAAO;yBACPC;MAAAA,kCAAS;uBACTC;MAAAA,8BAAO;MACPC,aAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,iCAAAA;MACGC;;AAIP,MAAMC,sBAAsB,GACxB,OAAOH,SAAP,KAAqB,QAArB,GAAgCI,MAAM,CAACJ,SAAD,CAAN,GAAoB,CAApD,GAAwD,CAACA,SAAD,aAACA,SAAD,cAACA,SAAD,GAAc,CAAd,IAAmB,CAD/E;AAGA,sBACIK,aAAA,CAACC,GAAD,oBACQJ;AACJR,IAAAA,EAAE,EAAEA;AACJa,IAAAA,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;AASXC,IAAAA,SAAS,EAAEd;AACX;AACA;AACAe,IAAAA,YAAY,EAAEb,SAAS,GAAG,QAAH,GAAcc;AACrCrB,IAAAA,GAAG,EAAEA;IAhBT,EAkBKM,QAlBL,CADJ;AAsBH,CAvCgC;;;;"}

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

@@ -0,0 +1,4 @@
+var modules_a9637dd3 = {"text":"c5028ea8","size-caption":"_05d3a546","size-copy":"_100565e3","size-subtitle":"b8f72625","weight-semibold":"_398ecda1","weight-bold":"_8054cd6b","tone-secondary":"_6abd56b1","tone-danger":"_274b4a47","lineClampMultipleLines":"_724b0054","lineClamp-1":"_51ac6ee4","lineClamp-2":"b0742803","lineClamp-3":"dd664c95","lineClamp-4":"b02775b5","lineClamp-5":"da91b300"};
+
+export default modules_a9637dd3;
+//# sourceMappingURL=text.module.css.js.map

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

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

package/es/new-components/text-area/text-area.js

@@ -0,0 +1,34 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement } from 'react';
+import { Box } from '../box/box.js';
+import { BaseField } from '../base-field/base-field.js';
+import styles from './text-area.module.css.js';
+
+var _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth"];
+
+function TextArea(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
+      auxiliaryLabel = _ref.auxiliaryLabel,
+      hint = _ref.hint,
+      maxWidth = _ref.maxWidth,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/createElement(BaseField, {
+    id: id,
+    label: label,
+    secondaryLabel: secondaryLabel,
+    auxiliaryLabel: auxiliaryLabel,
+    hint: hint,
+    className: styles.container,
+    maxWidth: maxWidth
+  }, function (extraProps) {
+    return /*#__PURE__*/createElement(Box, {
+      width: "full"
+    }, /*#__PURE__*/createElement("textarea", Object.assign({}, props, extraProps)));
+  });
+}
+
+export { TextArea };
+//# sourceMappingURL=text-area.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> & {\n    rows?: number\n}\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":";;;;;;;;AASA,SAASA,QAAT;MACIC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACGC;;AAEH,sBACIC,aAAA,CAACC,SAAD;AACIR,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNK,IAAAA,SAAS,EAAEC,MAAM,CAACC;AAClBN,IAAAA,QAAQ,EAAEA;GAPd,EASK,UAACO,UAAD;AAAA,wBACGL,aAAA,CAACM,GAAD;AAAKC,MAAAA,KAAK,EAAC;KAAX,eACIP,aAAA,WAAA,oBAAcD,OAAWM,WAAzB,CADJ,CADH;AAAA,GATL,CADJ;AAiBH;;;;"}

package/es/new-components/text-area/text-area.module.css.js

@@ -0,0 +1,4 @@
+var modules_2728c236 = {"container":"_5a579f96"};
+
+export default modules_2728c236;
+//# sourceMappingURL=text-area.module.css.js.map

package/es/new-components/text-area/text-area.module.css.js.map

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

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

@@ -0,0 +1,41 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import { Box } from '../box/box.js';
+import { BaseField } from '../base-field/base-field.js';
+import styles from './text-field.module.css.js';
+
+var _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"];
+var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
+      auxiliaryLabel = _ref.auxiliaryLabel,
+      hint = _ref.hint,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      maxWidth = _ref.maxWidth,
+      hidden = _ref.hidden,
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/createElement(BaseField, {
+    id: id,
+    label: label,
+    secondaryLabel: secondaryLabel,
+    auxiliaryLabel: auxiliaryLabel,
+    hint: hint,
+    maxWidth: maxWidth,
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
+  }, function (extraProps) {
+    return /*#__PURE__*/createElement(Box, {
+      className: styles.inputWrapper
+    }, /*#__PURE__*/createElement("input", Object.assign({}, props, extraProps, {
+      type: type,
+      ref: ref
+    })));
+  });
+});
+
+export { TextField };
+//# sourceMappingURL=text-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> & {\n    type?: TextFieldType\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.inputWrapper}>\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","inputWrapper"],"mappings":";;;;;;;IAYMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAajEE,GAbiE;MAE7DC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;uBACAC;MAAAA,8BAAO;MACPC,gBAAAA;MACAC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,sBACIX,aAAA,CAACY,SAAD;AACIV,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNE,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACG,UAAD;AAAA,wBACGb,aAAA,CAACc,GAAD;AAAKC,MAAAA,SAAS,EAAEC,MAAM,CAACC;KAAvB,eACIjB,aAAA,QAAA,oBAAWW,OAAWE;AAAYN,MAAAA,IAAI,EAAEA;AAAMN,MAAAA,GAAG,EAAEA;MAAnD,CADJ,CADH;AAAA,GAVL,CADJ;AAkBH,CAjCiB;;;;"}

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

@@ -0,0 +1,4 @@
+var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
+
+export default modules_aaf25250;
+//# sourceMappingURL=text-field.module.css.js.map

package/es/new-components/text-field/text-field.module.css.js.map

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

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

@@ -0,0 +1,27 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement } from 'react';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { Box } from '../box/box.js';
+import styles from './text-link.module.css.js';
+
+var _excluded = ["as", "openInNewTab", "exceptionallySetClassName"];
+var TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
+  var _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'a' : _ref$as,
+      _ref$openInNewTab = _ref.openInNewTab,
+      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    as: as,
+    display: "inline",
+    className: [exceptionallySetClassName, styles.container],
+    ref: ref,
+    target: openInNewTab ? '_blank' : undefined,
+    rel: openInNewTab ? 'noopener noreferrer' : undefined
+  }));
+});
+
+export { TextLink };
+//# sourceMappingURL=text-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.js","sources":["../../../src/new-components/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 '../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":";;;;;;;IAQMA,QAAQ,gBAAGC,oBAAoB,CAAqB,SAASD,QAAT,OAEtDE,GAFsD;qBACpDC;MAAAA,0BAAK;+BAAKC;MAAAA,8CAAe;MAAOC,iCAAAA;MAA8BC;;AAGhE,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJH,IAAAA,EAAE,EAAEA;AACJM,IAAAA,OAAO,EAAC;AACRC,IAAAA,SAAS,EAAE,CAACL,yBAAD,EAA4BM,MAAM,CAACC,SAAnC;AACXV,IAAAA,GAAG,EAAEA;AACLW,IAAAA,MAAM,EAAET,YAAY,GAAG,QAAH,GAAcU;AAClCC,IAAAA,GAAG,EAAEX,YAAY,GAAG,qBAAH,GAA2BU;IAPhD,CADJ;AAWH,CAfoC;;;;"}

package/es/new-components/text-link/text-link.module.css.js

@@ -0,0 +1,4 @@
+var modules_3d05deee = {"container":"b55607a1"};
+
+export default modules_3d05deee;
+//# sourceMappingURL=text-link.module.css.js.map

package/es/new-components/text-link/text-link.module.css.js.map

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

package/es/utils/polymorphism.js

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
+ * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
+ * value to be typed using `as PolymorphicComponent<…>`.
+ *
+ * @see PolymorphicComponent for details about what this type does
+ */
+
+function polymorphicComponent(render) {
+  return /*#__PURE__*/forwardRef(render);
+}
+
+export { polymorphicComponent };
+//# sourceMappingURL=polymorphism.js.map