@doist/reactist 11.5.1 → 12.0.2

package/es/new-components/base-button/base-button.js

@@ -1,4 +1,4 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement, Fragment } from 'react';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { Box } from '../box/box.js';
@@ -6,7 +6,7 @@ import { Tooltip } from '../../components/tooltip/tooltip.js';
 import { Spinner } from '../spinner/spinner.js';
 import styles from './base-button.module.css.js';
 
-var _excluded = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "tooltipGapSize", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
+const _excluded = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "tooltipGapSize", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
 
 function preventDefault(event) {
   event.preventDefault();
@@ -20,33 +20,29 @@ function preventDefault(event) {
  */
 
 
-var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'div' : _ref$as,
-      variant = _ref.variant,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'normal' : _ref$size,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      tooltip = _ref.tooltip,
-      tooltipGapSize = _ref.tooltipGapSize,
-      onClick = _ref.onClick,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      children = _ref.children,
-      startIcon = _ref.startIcon,
-      endIcon = _ref.endIcon,
-      icon = _ref.icon,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      align = _ref.align,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
+  let {
+    as = 'div',
+    variant,
+    tone = 'normal',
+    size = 'normal',
+    disabled = false,
+    loading = false,
+    tooltip,
+    tooltipGapSize,
+    onClick,
+    exceptionallySetClassName,
+    children,
+    startIcon,
+    endIcon,
+    icon,
+    width = 'auto',
+    align
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var isDisabled = loading || disabled;
-  var buttonElement = /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+  const isDisabled = loading || disabled;
+  const buttonElement = /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     ref: ref,
     "aria-disabled": isDisabled,
@@ -65,7 +61,7 @@ var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref
     "aria-hidden": true
   }, loading ? /*#__PURE__*/createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
 
-  var tooltipContent = icon ? tooltip !== null && tooltip !== void 0 ? tooltip : props['aria-label'] : tooltip;
+  const tooltipContent = icon ? tooltip != null ? tooltip : props['aria-label'] : tooltip;
   return tooltipContent ? /*#__PURE__*/createElement(Tooltip, {
     content: tooltipContent,
     gapSize: tooltipGapSize

package/es/new-components/base-button/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n    /**\n     * The distance between the button element and the linked tooltip.\n     */\n    tooltipGapSize?: TooltipProps['gapSize']\n}\n\ntype AlignmentProps = {\n    width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n    align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n    width?: 'auto'\n    align?: never\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n    width?: never\n    align?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        tooltipGapSize,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        width = 'auto',\n        align,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            width={icon ? undefined : width}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                width !== 'auto' && icon == null && align != null ? styles[`align-${align}`] : null,\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent} gapSize={tooltipGapSize}>\n            {buttonElement}\n        </Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content","gapSize"],"mappings":";;;;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;AACIA,EAAAA,KAAK,CAACD,cAAN;AACH;AA2ED;;;;;;;;;IAOaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAoBnEE,GApBmE;qBAE/DC;MAAAA,0BAAK;MACLC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;2BACPC;MAAAA,sCAAW;0BACXC;MAAAA,oCAAU;MACVC,eAAAA;MACAC,sBAAAA;MACAC,eAAAA;MACAC,iCAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,YAAAA;wBACAC;MAAAA,gCAAQ;MACRC,aAAAA;MACGC;;AAIP,MAAMC,UAAU,GAAGZ,OAAO,IAAID,QAA9B;AACA,MAAMc,aAAa,gBACfC,aAAA,CAACC,GAAD,oBACQJ;AACJhB,IAAAA,EAAE,EAAEA;AACJD,IAAAA,GAAG,EAAEA;qBACUkB;AACfT,IAAAA,OAAO,EAAES,UAAU,GAAGtB,cAAH,GAAoBa;AACvCM,IAAAA,KAAK,EAAED,IAAI,GAAGQ,SAAH,GAAeP;AAC1BQ,IAAAA,SAAS,EAAE,CACPb,yBADO,EAEPc,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYtB,OAAZ,CAHC,EAIPsB,MAAM,WAASrB,IAAT,CAJC,EAKPqB,MAAM,WAASpB,IAAT,CALC,EAMPW,KAAK,KAAK,MAAV,IAAoBD,IAAI,IAAI,IAA5B,IAAoCE,KAAK,IAAI,IAA7C,GAAoDQ,MAAM,YAAUR,KAAV,CAA1D,GAA+E,IANxE,EAOPF,IAAI,GAAGU,MAAM,CAACE,UAAV,GAAuB,IAPpB,EAQPrB,QAAQ,GAAGmB,MAAM,CAACnB,QAAV,GAAqB,IARtB;IAPf,EAkBKS,IAAI,GACAR,OAAO,iBAAIc,aAAA,CAACO,OAAD,MAAA,CAAZ,IAA4Bb,IAD3B,gBAGDM,aAAA,SAAA,MAAA,EACKR,SAAS,gBACNQ,aAAA,CAACC,GAAD;AAAKO,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACZ;;GAAtC,EACKN,OAAO,IAAI,CAACO,OAAZ,gBAAsBO,aAAA,CAACO,OAAD,MAAA,CAAtB,GAAoCf,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBAAGS,aAAA,OAAA;AAAMG,IAAAA,SAAS,EAAEC,MAAM,CAACK;GAAxB,EAAgClB,QAAhC,CAAH,GAAsD,IANnE,EAOKE,OAAO,IAAKP,OAAO,IAAI,CAACM,SAAxB,gBACGQ,aAAA,CAACC,GAAD;AAAKO,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACX;;GAAtC,EACKP,OAAO,gBAAGc,aAAA,CAACO,OAAD,MAAA,CAAH,GAAiBd,OAD7B,CADH,GAIG,IAXR,CArBR,CADJ;;AAwCA,MAAMiB,cAAc,GAAGhB,IAAI,GAAGP,OAAH,aAAGA,OAAH,cAAGA,OAAH,GAAcU,KAAK,CAAC,YAAD,CAAnB,GAAoCV,OAA/D;AACA,SAAOuB,cAAc,gBACjBV,aAAA,CAACW,OAAD;AAASC,IAAAA,OAAO,EAAEF;AAAgBG,IAAAA,OAAO,EAAEzB;GAA3C,EACKW,aADL,CADiB,GAKjBA,aALJ;AAOH,CAvE6C;;;;"}
+{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n    /**\n     * The distance between the button element and the linked tooltip.\n     */\n    tooltipGapSize?: TooltipProps['gapSize']\n}\n\ntype AlignmentProps = {\n    width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n    align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n    width?: 'auto'\n    align?: never\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n    width?: never\n    align?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        tooltipGapSize,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        width = 'auto',\n        align,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            width={icon ? undefined : width}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                width !== 'auto' && icon == null && align != null ? styles[`align-${align}`] : null,\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent} gapSize={tooltipGapSize}>\n            {buttonElement}\n        </Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content","gapSize"],"mappings":";;;;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;EACIA,KAAK,CAACD,cAAN;AACH;AA2ED;;;;;;;;;MAOaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAoBnEE,GApBmE;MACnE;IACIC,EAAE,GAAG,KADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,QAAQ,GAAG,KALf;IAMIC,OAAO,GAAG,KANd;IAOIC,OAPJ;IAQIC,cARJ;IASIC,OATJ;IAUIC,yBAVJ;IAWIC,QAXJ;IAYIC,SAZJ;IAaIC,OAbJ;IAcIC,IAdJ;IAeIC,KAAK,GAAG,MAfZ;IAgBIC;;MACGC;;EAIP,MAAMC,UAAU,GAAGZ,OAAO,IAAID,QAA9B;EACA,MAAMc,aAAa,gBACfC,aAAA,CAACC,GAAD,oCACQJ,KADR;IAEIhB,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;qBAImBkB,UAJnB;IAKIT,OAAO,EAAES,UAAU,GAAGtB,cAAH,GAAoBa,OAL3C;IAMIM,KAAK,EAAED,IAAI,GAAGQ,SAAH,GAAeP,KAN9B;IAOIQ,SAAS,EAAE,CACPb,yBADO,EAEPc,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYtB,OAAZ,CAHC,EAIPsB,MAAM,WAASrB,IAAT,CAJC,EAKPqB,MAAM,WAASpB,IAAT,CALC,EAMPW,KAAK,KAAK,MAAV,IAAoBD,IAAI,IAAI,IAA5B,IAAoCE,KAAK,IAAI,IAA7C,GAAoDQ,MAAM,YAAUR,KAAV,CAA1D,GAA+E,IANxE,EAOPF,IAAI,GAAGU,MAAM,CAACE,UAAV,GAAuB,IAPpB,EAQPrB,QAAQ,GAAGmB,MAAM,CAACnB,QAAV,GAAqB,IARtB;MAWVS,IAAI,GACAR,OAAO,iBAAIc,aAAA,CAACO,OAAD,MAAA,CAAZ,IAA4Bb,IAD3B,gBAGDM,aAAA,SAAA,MAAA,EACKR,SAAS,gBACNQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACZ;;GAAtC,EACKN,OAAO,IAAI,CAACO,OAAZ,gBAAsBO,aAAA,CAACO,OAAD,MAAA,CAAtB,GAAoCf,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBAAGS,aAAA,OAAA;IAAMG,SAAS,EAAEC,MAAM,CAACK;GAAxB,EAAgClB,QAAhC,CAAH,GAAsD,IANnE,EAOKE,OAAO,IAAKP,OAAO,IAAI,CAACM,SAAxB,gBACGQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACX;;GAAtC,EACKP,OAAO,gBAAGc,aAAA,CAACO,OAAD,MAAA,CAAH,GAAiBd,OAD7B,CADH,GAIG,IAXR,CArBR,CADJ;;EAwCA,MAAMiB,cAAc,GAAGhB,IAAI,GAAGP,OAAH,WAAGA,OAAH,GAAcU,KAAK,CAAC,YAAD,CAAnB,GAAoCV,OAA/D;EACA,OAAOuB,cAAc,gBACjBV,aAAA,CAACW,OAAD;IAASC,OAAO,EAAEF;IAAgBG,OAAO,EAAEzB;GAA3C,EACKW,aADL,CADiB,GAKjBA,aALJ;AAOH,CAvE6C;;;;"}

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

@@ -1,3 +1,4 @@
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
@@ -6,27 +7,28 @@ import { useId } from '../common-helpers.js';
 import styles from './base-field.module.css.js';
 
 function FieldHint(props) {
-  return /*#__PURE__*/createElement(Text, Object.assign({
+  return /*#__PURE__*/createElement(Text, _objectSpread2({
     as: "p",
     tone: "secondary",
     size: "copy"
   }, props));
 }
 
-function BaseField(_ref) {
-  var label = _ref.label,
-      secondaryLabel = _ref.secondaryLabel,
-      auxiliaryLabel = _ref.auxiliaryLabel,
-      hint = _ref.hint,
-      className = _ref.className,
-      children = _ref.children,
-      maxWidth = _ref.maxWidth,
-      hidden = _ref.hidden,
-      originalAriaDescribedBy = _ref['aria-describedby'],
-      originalId = _ref.id;
-  var id = useId(originalId);
-  var hintId = useId();
-  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+function BaseField({
+  label,
+  secondaryLabel,
+  auxiliaryLabel,
+  hint,
+  className,
+  children,
+  maxWidth,
+  hidden,
+  'aria-describedby': originalAriaDescribedBy,
+  id: originalId
+}) {
+  const id = useId(originalId);
+  const hintId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
   return /*#__PURE__*/createElement(Stack, {
     space: "small"
   }, /*#__PURE__*/createElement(Box, {
@@ -47,14 +49,14 @@ function BaseField(_ref) {
     className: styles.primaryLabel
   }, label) : null, secondaryLabel ? /*#__PURE__*/createElement("span", {
     className: styles.secondaryLabel
-  }, "\xA0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/createElement(Box, {
+  }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/createElement(Box, {
     className: styles.auxiliaryLabel,
     paddingLeft: "small"
   }, auxiliaryLabel) : null), children(ariaDescribedBy ? {
-    id: id,
+    id,
     'aria-describedby': ariaDescribedBy
   } : {
-    id: id
+    id
   })), hint ? /*#__PURE__*/createElement(FieldHint, {
     hidden: hidden,
     id: hintId

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport { WithEnhancedClassName } from '../common-types'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n    hidden?: boolean\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         */\n        hint?: React.ReactNode\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n\n    return (\n        <Stack space=\"small\">\n            <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n                <Box\n                    as=\"span\"\n                    display=\"flex\"\n                    justifyContent=\"spaceBetween\"\n                    alignItems=\"flexEnd\"\n                    paddingBottom=\"small\"\n                >\n                    <Text size=\"body\" as=\"label\" htmlFor={id}>\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            </Box>\n            {hint ? (\n                <FieldHint hidden={hidden} id={hintId}>\n                    {hint}\n                </FieldHint>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport type { FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","BaseField","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","originalId","id","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":";;;;;;;AAcA,SAASA,SAAT,CAAmBC,KAAnB;AACI,sBAAOC,aAAA,CAACC,IAAD;AAAMC,IAAAA,EAAE,EAAC;AAAIC,IAAAA,IAAI,EAAC;AAAYC,IAAAA,IAAI,EAAC;KAAWL,MAA9C,CAAP;AACH;;AA+DD,SAASM,SAAT;MACIC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,iBAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,cAAAA;MACoBC,+BAApB;MACIC,kBAAJC;AAEA,MAAMA,EAAE,GAAGC,KAAK,CAACF,UAAD,CAAhB;AACA,MAAMG,MAAM,GAAGD,KAAK,EAApB;AAEA,MAAME,eAAe,GAAGL,uBAAH,aAAGA,uBAAH,cAAGA,uBAAH,GAA+BL,IAAI,GAAGS,MAAH,GAAYE,SAApE;AAEA,sBACIpB,aAAA,CAACqB,KAAD;AAAOC,IAAAA,KAAK,EAAC;GAAb,eACItB,aAAA,CAACuB,GAAD;AAAKb,IAAAA,SAAS,EAAE,CAACA,SAAD,EAAYc,MAAM,CAACC,SAAnB;AAA+Bb,IAAAA,QAAQ,EAAEA;AAAUC,IAAAA,MAAM,EAAEA;GAA3E,eACIb,aAAA,CAACuB,GAAD;AACIrB,IAAAA,EAAE,EAAC;AACHwB,IAAAA,OAAO,EAAC;AACRC,IAAAA,cAAc,EAAC;AACfC,IAAAA,UAAU,EAAC;AACXC,IAAAA,aAAa,EAAC;GALlB,eAOI7B,aAAA,CAACC,IAAD;AAAMG,IAAAA,IAAI,EAAC;AAAOF,IAAAA,EAAE,EAAC;AAAQ4B,IAAAA,OAAO,EAAEd;GAAtC,EACKV,KAAK,gBAAGN,aAAA,OAAA;AAAMU,IAAAA,SAAS,EAAEc,MAAM,CAACO;GAAxB,EAAuCzB,KAAvC,CAAH,GAA0D,IADpE,EAEKC,cAAc,gBACXP,aAAA,OAAA;AAAMU,IAAAA,SAAS,EAAEc,MAAM,CAACjB;GAAxB,SAAA,EAAgDA,cAAhD,KAAA,CADW,GAEX,IAJR,CAPJ,EAaKC,cAAc,gBACXR,aAAA,CAACuB,GAAD;AAAKb,IAAAA,SAAS,EAAEc,MAAM,CAAChB;AAAgBwB,IAAAA,WAAW,EAAC;GAAnD,EACKxB,cADL,CADW,GAIX,IAjBR,CADJ,EAoBKG,QAAQ,CAACQ,eAAe,GAAG;AAAEH,IAAAA,EAAE,EAAFA,EAAF;AAAM,wBAAoBG;AAA1B,GAAH,GAAiD;AAAEH,IAAAA,EAAE,EAAFA;AAAF,GAAjE,CApBb,CADJ,EAuBKP,IAAI,gBACDT,aAAA,CAACF,SAAD;AAAWe,IAAAA,MAAM,EAAEA;AAAQG,IAAAA,EAAE,EAAEE;GAA/B,EACKT,IADL,CADC,GAID,IA3BR,CADJ;AA+BH;;;;"}
+{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../common-types'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n    hidden?: boolean\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         */\n        hint?: React.ReactNode\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n\n    return (\n        <Stack space=\"small\">\n            <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n                <Box\n                    as=\"span\"\n                    display=\"flex\"\n                    justifyContent=\"spaceBetween\"\n                    alignItems=\"flexEnd\"\n                    paddingBottom=\"small\"\n                >\n                    <Text size=\"body\" as=\"label\" htmlFor={id}>\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            </Box>\n            {hint ? (\n                <FieldHint hidden={hidden} id={hintId}>\n                    {hint}\n                </FieldHint>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport type { FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","BaseField","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","id","originalId","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":";;;;;;;;AAeA,SAASA,SAAT,CAAmBC,KAAnB;EACI,oBAAOC,aAAA,CAACC,IAAD;IAAMC,EAAE,EAAC,GAAT;IAAaC,IAAI,EAAC,WAAlB;IAA8BC,IAAI,EAAC;KAAWL,KAA9C,EAAP;AACH;;AA+DD,SAASM,SAAT,CAAmB;EACfC,KADe;EAEfC,cAFe;EAGfC,cAHe;EAIfC,IAJe;EAKfC,SALe;EAMfC,QANe;EAOfC,QAPe;EAQfC,MARe;EASf,oBAAoBC,uBATL;EAUfC,EAAE,EAAEC;AAVW,CAAnB;EAYI,MAAMD,EAAE,GAAGE,KAAK,CAACD,UAAD,CAAhB;EACA,MAAME,MAAM,GAAGD,KAAK,EAApB;EAEA,MAAME,eAAe,GAAGL,uBAAH,WAAGA,uBAAH,GAA+BL,IAAI,GAAGS,MAAH,GAAYE,SAApE;EAEA,oBACIpB,aAAA,CAACqB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACItB,aAAA,CAACuB,GAAD;IAAKb,SAAS,EAAE,CAACA,SAAD,EAAYc,MAAM,CAACC,SAAnB;IAA+Bb,QAAQ,EAAEA;IAAUC,MAAM,EAAEA;GAA3E,eACIb,aAAA,CAACuB,GAAD;IACIrB,EAAE,EAAC;IACHwB,OAAO,EAAC;IACRC,cAAc,EAAC;IACfC,UAAU,EAAC;IACXC,aAAa,EAAC;GALlB,eAOI7B,aAAA,CAACC,IAAD;IAAMG,IAAI,EAAC;IAAOF,EAAE,EAAC;IAAQ4B,OAAO,EAAEf;GAAtC,EACKT,KAAK,gBAAGN,aAAA,OAAA;IAAMU,SAAS,EAAEc,MAAM,CAACO;GAAxB,EAAuCzB,KAAvC,CAAH,GAA0D,IADpE,EAEKC,cAAc,gBACXP,aAAA,OAAA;IAAMU,SAAS,EAAEc,MAAM,CAACjB;GAAxB,WAAA,EAAgDA,cAAhD,KAAA,CADW,GAEX,IAJR,CAPJ,EAaKC,cAAc,gBACXR,aAAA,CAACuB,GAAD;IAAKb,SAAS,EAAEc,MAAM,CAAChB;IAAgBwB,WAAW,EAAC;GAAnD,EACKxB,cADL,CADW,GAIX,IAjBR,CADJ,EAoBKG,QAAQ,CAACQ,eAAe,GAAG;IAAEJ,EAAF;IAAM,oBAAoBI;GAA7B,GAAiD;IAAEJ;GAAnE,CApBb,CADJ,EAuBKN,IAAI,gBACDT,aAAA,CAACF,SAAD;IAAWe,MAAM,EAAEA;IAAQE,EAAE,EAAEG;GAA/B,EACKT,IADL,CADC,GAID,IA3BR,CADJ;AA+BH;;;;"}

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

@@ -1,4 +1,4 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
@@ -8,66 +8,65 @@ import paddingStyles from './padding.module.css.js';
 import marginStyles from './margin.module.css.js';
 import widthStyles from './width.module.css.js';
 
-var _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
-var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
+const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
+const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
 
-  var _ref$as = _ref.as,
-      component = _ref$as === void 0 ? 'div' : _ref$as,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'static' : _ref$position,
-      display = _ref.display,
-      _ref$flexDirection = _ref.flexDirection,
-      flexDirection = _ref$flexDirection === void 0 ? 'row' : _ref$flexDirection,
-      flexWrap = _ref.flexWrap,
-      flexGrow = _ref.flexGrow,
-      flexShrink = _ref.flexShrink,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      alignSelf = _ref.alignSelf,
-      overflow = _ref.overflow,
-      width = _ref.width,
-      height = _ref.height,
-      background = _ref.background,
-      border = _ref.border,
-      borderRadius = _ref.borderRadius,
-      minWidth = _ref.minWidth,
-      maxWidth = _ref.maxWidth,
-      textAlign = _ref.textAlign,
-      padding = _ref.padding,
-      paddingY = _ref.paddingY,
-      paddingX = _ref.paddingX,
-      paddingTop = _ref.paddingTop,
-      paddingRight = _ref.paddingRight,
-      paddingBottom = _ref.paddingBottom,
-      paddingLeft = _ref.paddingLeft,
-      margin = _ref.margin,
-      marginY = _ref.marginY,
-      marginX = _ref.marginX,
-      marginTop = _ref.marginTop,
-      marginRight = _ref.marginRight,
-      marginBottom = _ref.marginBottom,
-      marginLeft = _ref.marginLeft,
-      className = _ref.className,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  let {
+    as: component = 'div',
+    position = 'static',
+    display,
+    flexDirection = 'row',
+    flexWrap,
+    flexGrow,
+    flexShrink,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    overflow,
+    width,
+    height,
+    background,
+    border,
+    borderRadius,
+    minWidth,
+    maxWidth,
+    textAlign,
+    padding,
+    paddingY,
+    paddingX,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    margin,
+    marginY,
+    marginX,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    className,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var resolvedPaddingTop = (_ref2 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref2 !== void 0 ? _ref2 : padding;
-  var resolvedPaddingRight = (_ref3 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX) !== null && _ref3 !== void 0 ? _ref3 : padding;
-  var resolvedPaddingBottom = (_ref4 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref4 !== void 0 ? _ref4 : padding;
-  var resolvedPaddingLeft = (_ref5 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX) !== null && _ref5 !== void 0 ? _ref5 : padding;
-  var resolvedMarginTop = (_ref6 = marginTop !== null && marginTop !== void 0 ? marginTop : marginY) !== null && _ref6 !== void 0 ? _ref6 : margin;
-  var resolvedMarginRight = (_ref7 = marginRight !== null && marginRight !== void 0 ? marginRight : marginX) !== null && _ref7 !== void 0 ? _ref7 : margin;
-  var resolvedMarginBottom = (_ref8 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY) !== null && _ref8 !== void 0 ? _ref8 : margin;
-  var resolvedMarginLeft = (_ref9 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX) !== null && _ref9 !== void 0 ? _ref9 : margin;
-  var omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
+  const resolvedPaddingTop = (_ref2 = paddingTop != null ? paddingTop : paddingY) != null ? _ref2 : padding;
+  const resolvedPaddingRight = (_ref3 = paddingRight != null ? paddingRight : paddingX) != null ? _ref3 : padding;
+  const resolvedPaddingBottom = (_ref4 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref4 : padding;
+  const resolvedPaddingLeft = (_ref5 = paddingLeft != null ? paddingLeft : paddingX) != null ? _ref5 : padding;
+  const resolvedMarginTop = (_ref6 = marginTop != null ? marginTop : marginY) != null ? _ref6 : margin;
+  const resolvedMarginRight = (_ref7 = marginRight != null ? marginRight : marginX) != null ? _ref7 : margin;
+  const resolvedMarginBottom = (_ref8 = marginBottom != null ? marginBottom : marginY) != null ? _ref8 : margin;
+  const resolvedMarginLeft = (_ref9 = marginLeft != null ? marginLeft : marginX) != null ? _ref9 : margin;
+  const omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
   return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     className: classNames(className, styles.box, display ? getClassNames(styles, 'display', display) : null, position !== 'static' ? getClassNames(styles, 'position', position) : null, minWidth != null ? getClassNames(widthStyles, 'minWidth', String(minWidth)) : null, getClassNames(widthStyles, 'maxWidth', maxWidth), getClassNames(styles, 'textAlign', textAlign), // padding
     getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop), getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight), getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom), getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft), // margin
     getClassNames(marginStyles, 'marginTop', resolvedMarginTop), getClassNames(marginStyles, 'marginRight', resolvedMarginRight), getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom), getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft), // flex props
     omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(styles, 'alignItems', alignItems), omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, // other props
     getClassNames(styles, 'overflow', overflow), width != null ? getClassNames(widthStyles, 'width', String(width)) : null, getClassNames(styles, 'height', height), getClassNames(styles, 'bg', background), borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(styles, 'border', border) : null) || undefined,
-    ref: ref
+    ref
   }), children);
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n}\n\nexport { Box }\n"],"names":["Box","polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n}\n\nexport { Box }\n"],"names":["Box","polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","undefined"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import { BaseButton } from '../base-button/base-button.js';
 
-var _excluded = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
+const _excluded = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
 /**
  * A semantic button that also looks like a button, and provides all the necessary visual variants.
  * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
@@ -10,20 +10,18 @@ var _excluded = ["variant", "tone", "size", "type", "disabled", "exceptionallySe
  * @see ButtonLink
  */
 
-var Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
-  var variant = _ref.variant,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'normal' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+const Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
+  let {
+    variant,
+    tone = 'normal',
+    size = 'normal',
+    type = 'button',
+    disabled = false,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(BaseButton, Object.assign({}, props, {
+  return /*#__PURE__*/createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "button",
     ref: ref,
     variant: variant,

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["Button","React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":";;;;;AAeA;;;;;;;IAMaA,MAAM,gBAAGC,UAAA,CAAiD,SAASD,MAAT,OAUnEE,GAVmE;MAE/DC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;2BACPC;MAAAA,sCAAW;MACXC,iCAAAA;MACGC;;AAIP,sBACIR,aAAA,CAACS,UAAD,oBACQD;AACJE,IAAAA,EAAE,EAAC;AACHT,IAAAA,GAAG,EAAEA;AACLC,IAAAA,OAAO,EAAEA;AACTC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,yBAAyB,EAAEA;IAT/B,CADJ;AAaH,CAzBqB;;;;"}
+{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["Button","React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":";;;;;AAeA;;;;;;;MAMaA,MAAM,gBAAGC,UAAA,CAAiD,SAASD,MAAT,OAUnEE,GAVmE;MACnE;IACIC,OADJ;IAEIC,IAAI,GAAG,QAFX;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,QAAQ,GAAG,KALf;IAMIC;;MACGC;;EAIP,oBACIR,aAAA,CAACS,UAAD,oCACQD,KADR;IAEIE,EAAE,EAAC,QAFP;IAGIT,GAAG,EAAEA,GAHT;IAIIC,OAAO,EAAEA,OAJb;IAKIC,IAAI,EAAEA,IALV;IAMIC,IAAI,EAAEA,IANV;IAOIC,IAAI,EAAEA,IAPV;IAQIC,QAAQ,EAAEA,QARd;IASIC,yBAAyB,EAAEA;KAVnC;AAaH,CAzBqB;;;;"}

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

@@ -1,9 +1,9 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } 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 { BaseButton } from '../base-button/base-button.js';
 
-var _excluded = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
+const _excluded = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
 /**
  * A semantic link that looks like a button, exactly matching the `Button` component in all visual
  * aspects.
@@ -11,20 +11,18 @@ var _excluded = ["as", "variant", "tone", "size", "exceptionallySetClassName", "
  * @see Button
  */
 
-var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'a' : _ref$as,
-      variant = _ref.variant,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'normal' : _ref$size,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      _ref$openInNewTab = _ref.openInNewTab,
-      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
+  let {
+    as = 'a',
+    variant,
+    tone = 'normal',
+    size = 'normal',
+    exceptionallySetClassName,
+    openInNewTab = false
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(BaseButton, Object.assign({}, props, {
+  return /*#__PURE__*/createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     ref: ref,
     variant: variant,

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

@@ -1 +1 @@
-{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../common-types'\n\ntype NativeLinkProps = Omit<\n    JSX.IntrinsicElements['a'],\n    'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n    {\n        as = 'a',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        exceptionallySetClassName,\n        openInNewTab = false,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as={as}\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            exceptionallySetClassName={exceptionallySetClassName}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n"],"names":["ButtonLink","polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":";;;;;;AAaA;;;;;;;IAMaA,UAAU,gBAAGC,oBAAoB,CAAuB,SAASD,UAAT,OAUjEE,GAViE;qBAE7DC;MAAAA,0BAAK;MACLC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;MACPC,iCAAAA;+BACAC;MAAAA,8CAAe;MACZC;;AAIP,sBACIC,aAAA,CAACC,UAAD,oBACQF;AACJN,IAAAA,EAAE,EAAEA;AACJD,IAAAA,GAAG,EAAEA;AACLE,IAAAA,OAAO,EAAEA;AACTC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,yBAAyB,EAAEA;AAC3BK,IAAAA,MAAM,EAAEJ,YAAY,GAAG,QAAH,GAAcK;AAClCC,IAAAA,GAAG,EAAEN,YAAY,GAAG,qBAAH,GAA2BK;IAThD,CADJ;AAaH,CAzB6C;;;;"}
+{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../common-types'\n\ntype NativeLinkProps = Omit<\n    JSX.IntrinsicElements['a'],\n    'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n    {\n        as = 'a',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        exceptionallySetClassName,\n        openInNewTab = false,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as={as}\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            exceptionallySetClassName={exceptionallySetClassName}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n"],"names":["ButtonLink","polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":";;;;;;AAaA;;;;;;;MAMaA,UAAU,gBAAGC,oBAAoB,CAAuB,SAASD,UAAT,OAUjEE,GAViE;MACjE;IACIC,EAAE,GAAG,GADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,yBALJ;IAMIC,YAAY,GAAG;;MACZC;;EAIP,oBACIC,aAAA,CAACC,UAAD,oCACQF,KADR;IAEIN,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;IAIIE,OAAO,EAAEA,OAJb;IAKIC,IAAI,EAAEA,IALV;IAMIC,IAAI,EAAEA,IANV;IAOIC,yBAAyB,EAAEA,yBAP/B;IAQIK,MAAM,EAAEJ,YAAY,GAAG,QAAH,GAAcK,SARtC;IASIC,GAAG,EAAEN,YAAY,GAAG,qBAAH,GAA2BK;KAVpD;AAaH,CAzB6C;;;;"}