@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/build/gradient-picker/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: gradient,\n      isSelected: value === gradient,\n      tooltipText: name ||\n      // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n      sprintf(__('Gradient code: %s'), gradient),\n      style: {\n        color: 'rgba( 0,0,0,0 )',\n        background: gradient\n      },\n      onClick: value === gradient ? clearGradient : () => onChange(gradient, index),\n      \"aria-label\": name ?\n      // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n      sprintf(__('Gradient: %s'), name) :\n      // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n      sprintf(__('Gradient code: %s'), gradient)\n    }, slug));\n  }, [gradients, value, onChange, clearGradient]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: gradient => onChange(gradient, index),\n          value: value,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => {\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug, which keeps two entries with the same gradient\n      // value apart. Otherwise selection falls back to matching the\n      // gradient value.\n      const isSelected = selectedSlug ? slug === selectedSlug : value === gradient;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        value: gradient,\n        isSelected: isSelected,\n        tooltipText: name ||\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient),\n        style: {\n          color: 'rgba( 0,0,0,0 )',\n          background: gradient\n        },\n        onClick: isSelected ? clearGradient : () => onChange(gradient, index, slug),\n        \"aria-label\": name ?\n        // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n        sprintf(__('Gradient: %s'), name) :\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient)\n      }, slug);\n    });\n  }, [gradients, value, onChange, clearGradient, selectedSlug]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: (gradient, _index, slug) => onChange(gradient, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;"],
+  "mappings": "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",
   "names": ["_jsx", "CircularOptionPicker", "_jsxs", "CustomGradientPicker"]
 }

package/build/heading/hook.cjs

@@ -33,7 +33,7 @@ function useHeading(props) {
     level = 2,
     color = import_utils.COLORS.theme.foreground,
     isBlock = true,
-    weight = import_utils.CONFIG.fontWeightHeading,
+    weight = import_utils.CONFIG.fontWeightEmphasis,
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "Heading");
   const as = asProp || `h${level}`;

package/build/heading/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/heading/hook.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../context';\nimport { useText } from '../text';\nimport { getHeadingFontSize } from '../utils/font-size';\nimport { CONFIG, COLORS } from '../utils';\nexport function useHeading(props) {\n  const {\n    as: asProp,\n    level = 2,\n    color = COLORS.theme.foreground,\n    isBlock = true,\n    weight = CONFIG.fontWeightHeading,\n    ...otherProps\n  } = useContextSystem(props, 'Heading');\n  const as = asProp || `h${level}`;\n  const a11yProps = {};\n  if (typeof as === 'string' && as[0] !== 'h') {\n    // If not a semantic `h` element, add a11y props:\n    a11yProps.role = 'heading';\n    a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;\n  }\n  const textProps = useText({\n    color,\n    isBlock,\n    weight,\n    size: getHeadingFontSize(level),\n    ...otherProps\n  });\n  return {\n    ...textProps,\n    ...a11yProps,\n    as\n  };\n}"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../context';\nimport { useText } from '../text';\nimport { getHeadingFontSize } from '../utils/font-size';\nimport { CONFIG, COLORS } from '../utils';\nexport function useHeading(props) {\n  const {\n    as: asProp,\n    level = 2,\n    color = COLORS.theme.foreground,\n    isBlock = true,\n    weight = CONFIG.fontWeightEmphasis,\n    ...otherProps\n  } = useContextSystem(props, 'Heading');\n  const as = asProp || `h${level}`;\n  const a11yProps = {};\n  if (typeof as === 'string' && as[0] !== 'h') {\n    // If not a semantic `h` element, add a11y props:\n    a11yProps.role = 'heading';\n    a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;\n  }\n  const textProps = useText({\n    color,\n    isBlock,\n    weight,\n    size: getHeadingFontSize(level),\n    ...otherProps\n  });\n  return {\n    ...textProps,\n    ...a11yProps,\n    as\n  };\n}"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qBAAiC;AACjC,kBAAwB;AACxB,uBAAmC;AACnC,mBAA+B;AACxB,SAAS,WAAW,OAAO;AAChC,QAAM;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ,oBAAO,MAAM;AAAA,IACrB,UAAU;AAAA,IACV,SAAS,oBAAO;AAAA,IAChB,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,SAAS;AACrC,QAAM,KAAK,UAAU,IAAI,KAAK;AAC9B,QAAM,YAAY,CAAC;AACnB,MAAI,OAAO,OAAO,YAAY,GAAG,CAAC,MAAM,KAAK;AAE3C,cAAU,OAAO;AACjB,cAAU,YAAY,IAAI,OAAO,UAAU,WAAW,SAAS,KAAK,IAAI;AAAA,EAC1E;AACA,QAAM,gBAAY,qBAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAM,qCAAmB,KAAK;AAAA,IAC9B,GAAG;AAAA,EACL,CAAC;AACD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,EACF;AACF;",
   "names": []
 }

package/build/input-control/index.cjs

@@ -43,8 +43,6 @@ var import_input_field = __toESM(require("./input-field.cjs"));
 var import_space = require("../utils/space.cjs");
 var import_utils = require("./utils.cjs");
 var import_base_control = __toESM(require("../base-control/index.cjs"));
-var import_use_deprecated_props = require("../utils/use-deprecated-props.cjs");
-var import_deprecated_36px_size = require("../utils/deprecated-36px-size.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var noop = () => {
 };
@@ -55,8 +53,9 @@ function useUniqueId(idProp) {
 }
 function UnforwardedInputControl(props, ref) {
   const {
-    __next40pxDefaultSize,
-    __shouldNotWarnDeprecated36pxSize,
+    // Prevent passing legacy props to internal components.
+    __next40pxDefaultSize: _next40pxDefaultSize,
+    __next36pxDefaultSize: _next36pxDefaultSize,
     __unstableStateReducer: stateReducer = (state) => state,
     __unstableInputWidth,
     className,
@@ -76,7 +75,7 @@ function UnforwardedInputControl(props, ref) {
     suffix,
     value,
     ...restProps
-  } = (0, import_use_deprecated_props.useDeprecated36pxDefaultSizeProp)(props);
+  } = props;
   const id = useUniqueId(idProp);
   const classes = (0, import_clsx.default)("components-input-control", className);
   const draftHookProps = (0, import_utils.useDraft)({
@@ -87,18 +86,11 @@ function UnforwardedInputControl(props, ref) {
   const helpProp = !!help ? {
     "aria-describedby": `${id}__help`
   } : {};
-  (0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
-    componentName: "InputControl",
-    __next40pxDefaultSize,
-    size,
-    __shouldNotWarnDeprecated36pxSize
-  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default, {
     className: classes,
     help,
     id,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_base.default, {
-      __next40pxDefaultSize,
       __unstableInputWidth,
       disabled,
       gap: 3,
@@ -114,7 +106,6 @@ function UnforwardedInputControl(props, ref) {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_field.default, {
         ...restProps,
         ...helpProp,
-        __next40pxDefaultSize,
         className: "components-input-control__input",
         disabled,
         id,
@@ -132,7 +123,6 @@ function UnforwardedInputControl(props, ref) {
   });
 }
 var InputControl = (0, import_element.forwardRef)(UnforwardedInputControl);
-InputControl.displayName = "InputControl";
 var input_control_default = InputControl;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/input-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputControl);\n  const id = `inspector-input-control-${instanceId}`;\n  return idProp || id;\n}\nexport function UnforwardedInputControl(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize,\n    __unstableStateReducer: stateReducer = state => state,\n    __unstableInputWidth,\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    id: idProp,\n    isPressEnterToChange = false,\n    label,\n    labelPosition = 'top',\n    onChange = noop,\n    onValidate = noop,\n    onKeyDown = noop,\n    prefix,\n    size = 'default',\n    style,\n    suffix,\n    value,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const id = useUniqueId(idProp);\n  const classes = clsx('components-input-control', className);\n  const draftHookProps = useDraft({\n    value,\n    onBlur: restProps.onBlur,\n    onChange\n  });\n  const helpProp = !!help ? {\n    'aria-describedby': `${id}__help`\n  } : {};\n  maybeWarnDeprecated36pxSize({\n    componentName: 'InputControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    help: help,\n    id: id,\n    children: /*#__PURE__*/_jsx(InputBase, {\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      __unstableInputWidth: __unstableInputWidth,\n      disabled: disabled,\n      gap: 3,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      justify: \"left\",\n      label: label,\n      labelPosition: labelPosition,\n      prefix: prefix,\n      size: size,\n      style: style,\n      suffix: suffix,\n      children: /*#__PURE__*/_jsx(InputField, {\n        ...restProps,\n        ...helpProp,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        className: \"components-input-control__input\",\n        disabled: disabled,\n        id: id,\n        isPressEnterToChange: isPressEnterToChange,\n        onKeyDown: onKeyDown,\n        onValidate: onValidate,\n        paddingInlineStart: prefix ? space(1) : undefined,\n        paddingInlineEnd: suffix ? space(1) : undefined,\n        ref: ref,\n        size: size,\n        stateReducer: stateReducer,\n        ...draftHookProps\n      })\n    })\n  });\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n * \t\t\t__next40pxDefaultSize\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef(UnforwardedInputControl);\nInputControl.displayName = 'InputControl';\nexport default InputControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAA8B;AAC9B,qBAA2B;AAK3B,wBAAsB;AACtB,yBAAuB;AACvB,mBAAsB;AACtB,mBAAyB;AACzB,0BAAwB;AACxB,kCAAiD;AACjD,kCAA4C;AAC5C,yBAA4B;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,iBAAa,8BAAc,YAAY;AAC7C,QAAM,KAAK,2BAA2B,UAAU;AAChD,SAAO,UAAU;AACnB;AACO,SAAS,wBAAwB,OAAO,KAAK;AAClD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB,eAAe,WAAS;AAAA,IAChD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,IACtB,IAAI;AAAA,IACJ,uBAAuB;AAAA,IACvB;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,8DAAiC,KAAK;AAC1C,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,cAAU,YAAAA,SAAK,4BAA4B,SAAS;AAC1D,QAAM,qBAAiB,uBAAS;AAAA,IAC9B;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB;AAAA,EACF,CAAC;AACD,QAAM,WAAW,CAAC,CAAC,OAAO;AAAA,IACxB,oBAAoB,GAAG,EAAE;AAAA,EAC3B,IAAI,CAAC;AACL,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,kBAAAE,SAAW;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAuB,uCAAAF,KAAK,mBAAAG,SAAY;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAoB,aAAS,oBAAM,CAAC,IAAI;AAAA,QACxC,kBAAkB,aAAS,oBAAM,CAAC,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,mBAAe,2BAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputControl);\n  const id = `inspector-input-control-${instanceId}`;\n  return idProp || id;\n}\nexport function UnforwardedInputControl(props, ref) {\n  const {\n    // Prevent passing legacy props to internal components.\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    __next36pxDefaultSize: _next36pxDefaultSize,\n    __unstableStateReducer: stateReducer = state => state,\n    __unstableInputWidth,\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    id: idProp,\n    isPressEnterToChange = false,\n    label,\n    labelPosition = 'top',\n    onChange = noop,\n    onValidate = noop,\n    onKeyDown = noop,\n    prefix,\n    size = 'default',\n    style,\n    suffix,\n    value,\n    ...restProps\n  } = props;\n  const id = useUniqueId(idProp);\n  const classes = clsx('components-input-control', className);\n  const draftHookProps = useDraft({\n    value,\n    onBlur: restProps.onBlur,\n    onChange\n  });\n  const helpProp = !!help ? {\n    'aria-describedby': `${id}__help`\n  } : {};\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    help: help,\n    id: id,\n    children: /*#__PURE__*/_jsx(InputBase, {\n      __unstableInputWidth: __unstableInputWidth,\n      disabled: disabled,\n      gap: 3,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      justify: \"left\",\n      label: label,\n      labelPosition: labelPosition,\n      prefix: prefix,\n      size: size,\n      style: style,\n      suffix: suffix,\n      children: /*#__PURE__*/_jsx(InputField, {\n        ...restProps,\n        ...helpProp,\n        className: \"components-input-control__input\",\n        disabled: disabled,\n        id: id,\n        isPressEnterToChange: isPressEnterToChange,\n        onKeyDown: onKeyDown,\n        onValidate: onValidate,\n        paddingInlineStart: prefix ? space(1) : undefined,\n        paddingInlineEnd: suffix ? space(1) : undefined,\n        ref: ref,\n        size: size,\n        stateReducer: stateReducer,\n        ...draftHookProps\n      })\n    })\n  });\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef(UnforwardedInputControl);\nexport default InputControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAA8B;AAC9B,qBAA2B;AAK3B,wBAAsB;AACtB,yBAAuB;AACvB,mBAAsB;AACtB,mBAAyB;AACzB,0BAAwB;AACxB,yBAA4B;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,iBAAa,8BAAc,YAAY;AAC7C,QAAM,KAAK,2BAA2B,UAAU;AAChD,SAAO,UAAU;AACnB;AACO,SAAS,wBAAwB,OAAO,KAAK;AAClD,QAAM;AAAA;AAAA,IAEJ,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB,wBAAwB,eAAe,WAAS;AAAA,IAChD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,IACtB,IAAI;AAAA,IACJ,uBAAuB;AAAA,IACvB;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,cAAU,YAAAA,SAAK,4BAA4B,SAAS;AAC1D,QAAM,qBAAiB,uBAAS;AAAA,IAC9B;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB;AAAA,EACF,CAAC;AACD,QAAM,WAAW,CAAC,CAAC,OAAO;AAAA,IACxB,oBAAoB,GAAG,EAAE;AAAA,EAC3B,IAAI,CAAC;AACL,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,kBAAAE,SAAW;AAAA,MACrC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAuB,uCAAAF,KAAK,mBAAAG,SAAY;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAoB,aAAS,oBAAM,CAAC,IAAI;AAAA,QACxC,kBAAkB,aAAS,oBAAM,CAAC,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,mBAAe,2BAAW,uBAAuB;AAC9D,IAAO,wBAAQ;",
   "names": ["clsx", "_jsx", "BaseControl", "InputBase", "InputField"]
 }

package/build/input-control/input-base.cjs

@@ -39,7 +39,6 @@ var import_backdrop = __toESM(require("./backdrop.cjs"));
 var import_label = __toESM(require("./label.cjs"));
 var import_input_control_styles = require("./styles/input-control-styles.cjs");
 var import_context = require("../context/index.cjs");
-var import_use_deprecated_props = require("../utils/use-deprecated-props.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function useUniqueId(idProp) {
   const instanceId = (0, import_compose.useInstanceId)(InputBase);
@@ -67,7 +66,6 @@ function getUIFlexProps(labelPosition) {
 }
 function InputBase(props, ref) {
   const {
-    __next40pxDefaultSize,
     __unstableInputWidth,
     children,
     className,
@@ -81,21 +79,19 @@ function InputBase(props, ref) {
     size = "default",
     suffix,
     ...restProps
-  } = (0, import_use_deprecated_props.useDeprecated36pxDefaultSizeProp)((0, import_context.useContextSystem)(props, "InputBase"));
+  } = (0, import_context.useContextSystem)(props, "InputBase");
   const id = useUniqueId(idProp);
   const hideLabel = hideLabelFromVision || !label;
   const prefixSuffixContextValue = (0, import_element.useMemo)(() => {
     return {
       InputControlPrefixWrapper: {
-        __next40pxDefaultSize,
         size
       },
       InputControlSuffixWrapper: {
-        __next40pxDefaultSize,
         size
       }
     };
-  }, [__next40pxDefaultSize, size]);
+  }, [size]);
   return (
     // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_input_control_styles.Root, {

package/build/input-control/input-base.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/input-base.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Backdrop from './backdrop';\nimport Label from './label';\nimport { Container, Root, Prefix, Suffix } from './styles/input-control-styles';\nimport { ContextSystemProvider, contextConnect, useContextSystem } from '../context';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputBase);\n  const id = `input-base-control-${instanceId}`;\n  return idProp || id;\n}\n\n// Adapter to map props for the new ui/flex component.\nfunction getUIFlexProps(labelPosition) {\n  const props = {};\n  switch (labelPosition) {\n    case 'top':\n      props.direction = 'column';\n      props.expanded = false;\n      props.gap = 0;\n      break;\n    case 'bottom':\n      props.direction = 'column-reverse';\n      props.expanded = false;\n      props.gap = 0;\n      break;\n    case 'edge':\n      props.justify = 'space-between';\n      break;\n  }\n  return props;\n}\nfunction InputBase(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    __unstableInputWidth,\n    children,\n    className,\n    disabled = false,\n    hideLabelFromVision = false,\n    labelPosition,\n    id: idProp,\n    isBorderless = false,\n    label,\n    prefix,\n    size = 'default',\n    suffix,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(useContextSystem(props, 'InputBase'));\n  const id = useUniqueId(idProp);\n  const hideLabel = hideLabelFromVision || !label;\n  const prefixSuffixContextValue = useMemo(() => {\n    return {\n      InputControlPrefixWrapper: {\n        __next40pxDefaultSize,\n        size\n      },\n      InputControlSuffixWrapper: {\n        __next40pxDefaultSize,\n        size\n      }\n    };\n  }, [__next40pxDefaultSize, size]);\n  return (\n    /*#__PURE__*/\n    // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.\n    _jsxs(Root, {\n      ...restProps,\n      ...getUIFlexProps(labelPosition),\n      className: className,\n      gap: 2,\n      ref: ref,\n      children: [/*#__PURE__*/_jsx(Label, {\n        className: \"components-input-control__label\",\n        hideLabelFromVision: hideLabelFromVision,\n        labelPosition: labelPosition,\n        htmlFor: id,\n        children: label\n      }), /*#__PURE__*/_jsxs(Container, {\n        __unstableInputWidth: __unstableInputWidth,\n        className: \"components-input-control__container\",\n        disabled: disabled,\n        hideLabel: hideLabel,\n        labelPosition: labelPosition,\n        children: [/*#__PURE__*/_jsxs(ContextSystemProvider, {\n          value: prefixSuffixContextValue,\n          children: [prefix && /*#__PURE__*/_jsx(Prefix, {\n            className: \"components-input-control__prefix\",\n            children: prefix\n          }), children, suffix && /*#__PURE__*/_jsx(Suffix, {\n            className: \"components-input-control__suffix\",\n            children: suffix\n          })]\n        }), /*#__PURE__*/_jsx(Backdrop, {\n          disabled: disabled,\n          isBorderless: isBorderless\n        })]\n      })]\n    })\n  );\n}\n\n/**\n * `InputBase` is an internal component used to style the standard borders for an input,\n * as well as handle the layout for prefix/suffix elements.\n */\nexport default contextConnect(InputBase, 'InputBase');"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA8B;AAC9B,qBAAwB;AAKxB,sBAAqB;AACrB,mBAAkB;AAClB,kCAAgD;AAChD,qBAAwE;AACxE,kCAAiD;AACjD,yBAA2C;AAC3C,SAAS,YAAY,QAAQ;AAC3B,QAAM,iBAAa,8BAAc,SAAS;AAC1C,QAAM,KAAK,sBAAsB,UAAU;AAC3C,SAAO,UAAU;AACnB;AAGA,SAAS,eAAe,eAAe;AACrC,QAAM,QAAQ,CAAC;AACf,UAAQ,eAAe;AAAA,IACrB,KAAK;AACH,YAAM,YAAY;AAClB,YAAM,WAAW;AACjB,YAAM,MAAM;AACZ;AAAA,IACF,KAAK;AACH,YAAM,YAAY;AAClB,YAAM,WAAW;AACjB,YAAM,MAAM;AACZ;AAAA,IACF,KAAK;AACH,YAAM,UAAU;AAChB;AAAA,EACJ;AACA,SAAO;AACT;AACA,SAAS,UAAU,OAAO,KAAK;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB;AAAA,IACA,IAAI;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,QAAI,kEAAiC,iCAAiB,OAAO,WAAW,CAAC;AACzE,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,YAAY,uBAAuB,CAAC;AAC1C,QAAM,+BAA2B,wBAAQ,MAAM;AAC7C,WAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA;AAAA,MACF;AAAA,MACA,2BAA2B;AAAA,QACzB;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,uBAAuB,IAAI,CAAC;AAChC;AAAA;AAAA,IAGE,uCAAAA,MAAM,kCAAM;AAAA,MACV,GAAG;AAAA,MACH,GAAG,eAAe,aAAa;AAAA,MAC/B;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAc,uCAAAC,KAAK,aAAAC,SAAO;AAAA,QAClC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAF,MAAM,uCAAW;AAAA,QAChC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAc,uCAAAA,MAAM,sCAAuB;AAAA,UACnD,OAAO;AAAA,UACP,UAAU,CAAC,UAAuB,uCAAAC,KAAK,oCAAQ;AAAA,YAC7C,WAAW;AAAA,YACX,UAAU;AAAA,UACZ,CAAC,GAAG,UAAU,UAAuB,uCAAAA,KAAK,oCAAQ;AAAA,YAChD,WAAW;AAAA,YACX,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,GAAgB,uCAAAA,KAAK,gBAAAE,SAAU;AAAA,UAC9B;AAAA,UACA;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AAMA,IAAO,yBAAQ,+BAAe,WAAW,WAAW;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Backdrop from './backdrop';\nimport Label from './label';\nimport { Container, Root, Prefix, Suffix } from './styles/input-control-styles';\nimport { ContextSystemProvider, contextConnect, useContextSystem } from '../context';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputBase);\n  const id = `input-base-control-${instanceId}`;\n  return idProp || id;\n}\n\n// Adapter to map props for the new ui/flex component.\nfunction getUIFlexProps(labelPosition) {\n  const props = {};\n  switch (labelPosition) {\n    case 'top':\n      props.direction = 'column';\n      props.expanded = false;\n      props.gap = 0;\n      break;\n    case 'bottom':\n      props.direction = 'column-reverse';\n      props.expanded = false;\n      props.gap = 0;\n      break;\n    case 'edge':\n      props.justify = 'space-between';\n      break;\n  }\n  return props;\n}\nfunction InputBase(props, ref) {\n  const {\n    __unstableInputWidth,\n    children,\n    className,\n    disabled = false,\n    hideLabelFromVision = false,\n    labelPosition,\n    id: idProp,\n    isBorderless = false,\n    label,\n    prefix,\n    size = 'default',\n    suffix,\n    ...restProps\n  } = useContextSystem(props, 'InputBase');\n  const id = useUniqueId(idProp);\n  const hideLabel = hideLabelFromVision || !label;\n  const prefixSuffixContextValue = useMemo(() => {\n    return {\n      InputControlPrefixWrapper: {\n        size\n      },\n      InputControlSuffixWrapper: {\n        size\n      }\n    };\n  }, [size]);\n  return (\n    /*#__PURE__*/\n    // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.\n    _jsxs(Root, {\n      ...restProps,\n      ...getUIFlexProps(labelPosition),\n      className: className,\n      gap: 2,\n      ref: ref,\n      children: [/*#__PURE__*/_jsx(Label, {\n        className: \"components-input-control__label\",\n        hideLabelFromVision: hideLabelFromVision,\n        labelPosition: labelPosition,\n        htmlFor: id,\n        children: label\n      }), /*#__PURE__*/_jsxs(Container, {\n        __unstableInputWidth: __unstableInputWidth,\n        className: \"components-input-control__container\",\n        disabled: disabled,\n        hideLabel: hideLabel,\n        labelPosition: labelPosition,\n        children: [/*#__PURE__*/_jsxs(ContextSystemProvider, {\n          value: prefixSuffixContextValue,\n          children: [prefix && /*#__PURE__*/_jsx(Prefix, {\n            className: \"components-input-control__prefix\",\n            children: prefix\n          }), children, suffix && /*#__PURE__*/_jsx(Suffix, {\n            className: \"components-input-control__suffix\",\n            children: suffix\n          })]\n        }), /*#__PURE__*/_jsx(Backdrop, {\n          disabled: disabled,\n          isBorderless: isBorderless\n        })]\n      })]\n    })\n  );\n}\n\n/**\n * `InputBase` is an internal component used to style the standard borders for an input,\n * as well as handle the layout for prefix/suffix elements.\n */\nexport default contextConnect(InputBase, 'InputBase');"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA8B;AAC9B,qBAAwB;AAKxB,sBAAqB;AACrB,mBAAkB;AAClB,kCAAgD;AAChD,qBAAwE;AACxE,yBAA2C;AAC3C,SAAS,YAAY,QAAQ;AAC3B,QAAM,iBAAa,8BAAc,SAAS;AAC1C,QAAM,KAAK,sBAAsB,UAAU;AAC3C,SAAO,UAAU;AACnB;AAGA,SAAS,eAAe,eAAe;AACrC,QAAM,QAAQ,CAAC;AACf,UAAQ,eAAe;AAAA,IACrB,KAAK;AACH,YAAM,YAAY;AAClB,YAAM,WAAW;AACjB,YAAM,MAAM;AACZ;AAAA,IACF,KAAK;AACH,YAAM,YAAY;AAClB,YAAM,WAAW;AACjB,YAAM,MAAM;AACZ;AAAA,IACF,KAAK;AACH,YAAM,UAAU;AAChB;AAAA,EACJ;AACA,SAAO;AACT;AACA,SAAS,UAAU,OAAO,KAAK;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB;AAAA,IACA,IAAI;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,WAAW;AACvC,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,YAAY,uBAAuB,CAAC;AAC1C,QAAM,+BAA2B,wBAAQ,MAAM;AAC7C,WAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,MACF;AAAA,MACA,2BAA2B;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT;AAAA;AAAA,IAGE,uCAAAA,MAAM,kCAAM;AAAA,MACV,GAAG;AAAA,MACH,GAAG,eAAe,aAAa;AAAA,MAC/B;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAc,uCAAAC,KAAK,aAAAC,SAAO;AAAA,QAClC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAF,MAAM,uCAAW;AAAA,QAChC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAc,uCAAAA,MAAM,sCAAuB;AAAA,UACnD,OAAO;AAAA,UACP,UAAU,CAAC,UAAuB,uCAAAC,KAAK,oCAAQ;AAAA,YAC7C,WAAW;AAAA,YACX,UAAU;AAAA,UACZ,CAAC,GAAG,UAAU,UAAuB,uCAAAA,KAAK,oCAAQ;AAAA,YAChD,WAAW;AAAA,YACX,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,GAAgB,uCAAAA,KAAK,gBAAAE,SAAU;AAAA,UAC9B;AAAA,UACA;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AAMA,IAAO,yBAAQ,+BAAe,WAAW,WAAW;",
   "names": ["_jsxs", "_jsx", "Label", "Backdrop"]
 }