@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AAYA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAGA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA","sourcesContent":["// Primitives.\nexport {\n\tSVG,\n\tPath,\n\tCircle,\n\tPolygon,\n\tRect,\n\tG,\n\tHorizontalRule,\n\tBlockQuotation,\n} from '@wordpress/primitives';\n\n// Components.\nexport { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';\nexport {\n\tdefault as Animate,\n\tgetAnimateClassName as __unstableGetAnimateClassName,\n} from './animate';\nexport { __unstableMotion } from './animation';\nexport { default as AnglePickerControl } from './angle-picker-control';\nexport {\n\tdefault as Autocomplete,\n\tuseAutocompleteProps as __unstableUseAutocompleteProps,\n} from './autocomplete';\nexport { default as BaseControl } from './base-control';\nexport {\n\tBorderBoxControl as __experimentalBorderBoxControl,\n\thasSplitBorders as __experimentalHasSplitBorders,\n\tisDefinedBorder as __experimentalIsDefinedBorder,\n\tisEmptyBorder as __experimentalIsEmptyBorder,\n} from './border-box-control';\nexport { BorderControl as __experimentalBorderControl } from './border-control';\nexport { default as __experimentalBoxControl } from './box-control';\nexport { default as Button } from './button';\nexport { default as ButtonGroup } from './button-group';\nexport {\n\tCard,\n\tCardBody,\n\tCardDivider,\n\tCardFooter,\n\tCardHeader,\n\tCardMedia,\n} from './card';\nexport { default as CheckboxControl } from './checkbox-control';\nexport { default as ClipboardButton } from './clipboard-button';\nexport { default as __experimentalPaletteEdit } from './palette-edit';\nexport { default as ColorIndicator } from './color-indicator';\nexport { default as ColorPalette } from './color-palette';\nexport { ColorPicker } from './color-picker';\nexport { default as ComboboxControl } from './combobox-control';\nexport {\n\tComposite as __unstableComposite,\n\tCompositeGroup as __unstableCompositeGroup,\n\tCompositeItem as __unstableCompositeItem,\n\tuseCompositeState as __unstableUseCompositeState,\n} from './composite';\nexport { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';\nexport { default as CustomSelectControl } from './custom-select-control';\nexport { default as Dashicon } from './dashicon';\nexport { default as DateTimePicker, DatePicker, TimePicker } from './date-time';\nexport { default as __experimentalDimensionControl } from './dimension-control';\nexport { default as Disabled } from './disabled';\nexport { DisclosureContent as __unstableDisclosureContent } from './disclosure';\nexport { Divider as __experimentalDivider } from './divider';\nexport { default as Draggable } from './draggable';\nexport { default as DropZone } from './drop-zone';\nexport { default as DropZoneProvider } from './drop-zone/provider';\nexport { default as Dropdown } from './dropdown';\nexport { default as DropdownMenu } from './dropdown-menu';\nexport { DuotoneSwatch, DuotonePicker } from './duotone-picker';\nexport { Elevation as __experimentalElevation } from './elevation';\nexport { default as ExternalLink } from './external-link';\nexport { Flex, FlexBlock, FlexItem } from './flex';\nexport { default as FocalPointPicker } from './focal-point-picker';\nexport { default as FocusableIframe } from './focusable-iframe';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as FormFileUpload } from './form-file-upload';\nexport { default as FormToggle } from './form-toggle';\nexport { default as FormTokenField } from './form-token-field';\nexport { default as GradientPicker } from './gradient-picker';\nexport { default as CustomGradientPicker } from './custom-gradient-picker';\nexport { Grid as __experimentalGrid } from './grid';\nexport { default as Guide } from './guide';\nexport { default as GuidePage } from './guide/page';\nexport { Heading as __experimentalHeading } from './heading';\nexport { HStack as __experimentalHStack } from './h-stack';\nexport { default as Icon } from './icon';\nexport { default as IconButton } from './button/deprecated';\nexport {\n\tItemGroup as __experimentalItemGroup,\n\tItem as __experimentalItem,\n} from './item-group';\nexport { default as __experimentalInputControl } from './input-control';\nexport { default as KeyboardShortcuts } from './keyboard-shortcuts';\nexport { default as MenuGroup } from './menu-group';\nexport { default as MenuItem } from './menu-item';\nexport { default as MenuItemsChoice } from './menu-items-choice';\nexport { default as Modal } from './modal';\nexport { default as ScrollLock } from './scroll-lock';\nexport { NavigableMenu, TabbableContainer } from './navigable-container';\nexport { default as __experimentalNavigation } from './navigation';\nexport { default as __experimentalNavigationBackButton } from './navigation/back-button';\nexport { default as __experimentalNavigationGroup } from './navigation/group';\nexport { default as __experimentalNavigationItem } from './navigation/item';\nexport { default as __experimentalNavigationMenu } from './navigation/menu';\nexport {\n\tNavigatorProvider as __experimentalNavigatorProvider,\n\tNavigatorScreen as __experimentalNavigatorScreen,\n\tNavigatorButton as __experimentalNavigatorButton,\n\tNavigatorBackButton as __experimentalNavigatorBackButton,\n\tuseNavigator as __experimentalUseNavigator,\n} from './navigator';\nexport { default as Notice } from './notice';\nexport { default as __experimentalNumberControl } from './number-control';\nexport { default as NoticeList } from './notice/list';\nexport { default as Panel } from './panel';\nexport { default as PanelBody } from './panel/body';\nexport { default as PanelHeader } from './panel/header';\nexport { default as PanelRow } from './panel/row';\nexport { default as Placeholder } from './placeholder';\nexport { default as Popover } from './popover';\nexport { default as QueryControls } from './query-controls';\nexport { default as __experimentalRadio } from './radio';\nexport { default as __experimentalRadioGroup } from './radio-group';\nexport { default as RadioControl } from './radio-control';\nexport { default as RangeControl } from './range-control';\nexport { default as ResizableBox } from './resizable-box';\nexport { default as ResponsiveWrapper } from './responsive-wrapper';\nexport { default as SandBox } from './sandbox';\nexport { default as SearchControl } from './search-control';\nexport { default as SelectControl } from './select-control';\nexport { default as Snackbar } from './snackbar';\nexport { default as SnackbarList } from './snackbar/list';\nexport { Spacer as __experimentalSpacer } from './spacer';\nexport { Scrollable as __experimentalScrollable } from './scrollable';\nexport { default as Spinner } from './spinner';\nexport { Surface as __experimentalSurface } from './surface';\nexport { default as TabPanel } from './tab-panel';\nexport { Text as __experimentalText } from './text';\nexport { default as TextControl } from './text-control';\nexport { default as TextareaControl } from './textarea-control';\nexport { default as TextHighlight } from './text-highlight';\nexport { default as Tip } from './tip';\nexport { default as ToggleControl } from './toggle-control';\nexport {\n\tToggleGroupControl as __experimentalToggleGroupControl,\n\tToggleGroupControlOption as __experimentalToggleGroupControlOption,\n\tToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,\n} from './toggle-group-control';\nexport { default as Toolbar } from './toolbar';\nexport { default as ToolbarButton } from './toolbar-button';\nexport { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';\nexport { default as __experimentalToolbarContext } from './toolbar-context';\nexport { default as ToolbarGroup } from './toolbar-group';\nexport { default as ToolbarItem } from './toolbar-item';\nexport {\n\tToolsPanel as __experimentalToolsPanel,\n\tToolsPanelItem as __experimentalToolsPanelItem,\n\tToolsPanelContext as __experimentalToolsPanelContext,\n} from './tools-panel';\nexport { default as Tooltip } from './tooltip';\nexport {\n\tdefault as __experimentalTreeGrid,\n\tTreeGridRow as __experimentalTreeGridRow,\n\tTreeGridCell as __experimentalTreeGridCell,\n\tTreeGridItem as __experimentalTreeGridItem,\n} from './tree-grid';\nexport { default as TreeSelect } from './tree-select';\nexport { Truncate as __experimentalTruncate } from './truncate';\nexport {\n\tdefault as __experimentalUnitControl,\n\tuseCustomUnits as __experimentalUseCustomUnits,\n\tparseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,\n} from './unit-control';\nexport { View as __experimentalView } from './view';\nexport { VisuallyHidden } from './visually-hidden';\nexport { VStack as __experimentalVStack } from './v-stack';\nexport { default as IsolatedEventContainer } from './isolated-event-container';\nexport {\n\tcreateSlotFill,\n\tSlot,\n\tFill,\n\tProvider as SlotFillProvider,\n\tuseSlot as __experimentalUseSlot,\n} from './slot-fill';\nexport { default as __experimentalStyleProvider } from './style-provider';\nexport { ZStack as __experimentalZStack } from './z-stack';\n\n// Higher-Order Components.\nexport {\n\tdefault as navigateRegions,\n\tuseNavigateRegions as __unstableUseNavigateRegions,\n} from './higher-order/navigate-regions';\nexport { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';\nexport { default as withFallbackStyles } from './higher-order/with-fallback-styles';\nexport { default as withFilters } from './higher-order/with-filters';\nexport { default as withFocusOutside } from './higher-order/with-focus-outside';\nexport {\n\tdefault as withFocusReturn,\n\tProvider as FocusReturnProvider,\n} from './higher-order/with-focus-return';\nexport { default as withNotices } from './higher-order/with-notices';\nexport { default as withSpokenMessages } from './higher-order/with-spoken-messages';\n"]}
+{"version":3,"sources":["@wordpress/components/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AAYA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAMA;;AACA;;AAIA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAGA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA","sourcesContent":["// Primitives.\nexport {\n\tSVG,\n\tPath,\n\tCircle,\n\tPolygon,\n\tRect,\n\tG,\n\tHorizontalRule,\n\tBlockQuotation,\n} from '@wordpress/primitives';\n\n// Components.\nexport { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';\nexport {\n\tdefault as Animate,\n\tgetAnimateClassName as __unstableGetAnimateClassName,\n} from './animate';\nexport { __unstableMotion } from './animation';\nexport { default as AnglePickerControl } from './angle-picker-control';\nexport {\n\tdefault as Autocomplete,\n\tuseAutocompleteProps as __unstableUseAutocompleteProps,\n} from './autocomplete';\nexport { default as BaseControl } from './base-control';\nexport {\n\tBorderBoxControl as __experimentalBorderBoxControl,\n\thasSplitBorders as __experimentalHasSplitBorders,\n\tisDefinedBorder as __experimentalIsDefinedBorder,\n\tisEmptyBorder as __experimentalIsEmptyBorder,\n} from './border-box-control';\nexport { BorderControl as __experimentalBorderControl } from './border-control';\nexport {\n\tdefault as __experimentalBoxControl,\n\tapplyValueToSides as __experimentalApplyValueToSides,\n} from './box-control';\nexport { default as Button } from './button';\nexport { default as ButtonGroup } from './button-group';\nexport {\n\tCard,\n\tCardBody,\n\tCardDivider,\n\tCardFooter,\n\tCardHeader,\n\tCardMedia,\n} from './card';\nexport { default as CheckboxControl } from './checkbox-control';\nexport { default as ClipboardButton } from './clipboard-button';\nexport { default as __experimentalPaletteEdit } from './palette-edit';\nexport { default as ColorIndicator } from './color-indicator';\nexport { default as ColorPalette } from './color-palette';\nexport { ColorPicker } from './color-picker';\nexport { default as ComboboxControl } from './combobox-control';\nexport {\n\tComposite as __unstableComposite,\n\tCompositeGroup as __unstableCompositeGroup,\n\tCompositeItem as __unstableCompositeItem,\n\tuseCompositeState as __unstableUseCompositeState,\n} from './composite';\nexport { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';\nexport { default as CustomSelectControl } from './custom-select-control';\nexport { default as Dashicon } from './dashicon';\nexport { default as DateTimePicker, DatePicker, TimePicker } from './date-time';\nexport { default as __experimentalDimensionControl } from './dimension-control';\nexport { default as Disabled } from './disabled';\nexport { DisclosureContent as __unstableDisclosureContent } from './disclosure';\nexport { Divider as __experimentalDivider } from './divider';\nexport { default as Draggable } from './draggable';\nexport { default as DropZone } from './drop-zone';\nexport { default as DropZoneProvider } from './drop-zone/provider';\nexport { default as Dropdown } from './dropdown';\nexport { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';\nexport { default as DropdownMenu } from './dropdown-menu';\nexport { DuotoneSwatch, DuotonePicker } from './duotone-picker';\nexport { Elevation as __experimentalElevation } from './elevation';\nexport { default as ExternalLink } from './external-link';\nexport { Flex, FlexBlock, FlexItem } from './flex';\nexport { default as FocalPointPicker } from './focal-point-picker';\nexport { default as FocusableIframe } from './focusable-iframe';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as FormFileUpload } from './form-file-upload';\nexport { default as FormToggle } from './form-toggle';\nexport { default as FormTokenField } from './form-token-field';\nexport { default as GradientPicker } from './gradient-picker';\nexport { default as CustomGradientPicker } from './custom-gradient-picker';\nexport { Grid as __experimentalGrid } from './grid';\nexport { default as Guide } from './guide';\nexport { default as GuidePage } from './guide/page';\nexport { Heading as __experimentalHeading } from './heading';\nexport { HStack as __experimentalHStack } from './h-stack';\nexport { default as Icon } from './icon';\nexport { default as IconButton } from './button/deprecated';\nexport {\n\tItemGroup as __experimentalItemGroup,\n\tItem as __experimentalItem,\n} from './item-group';\nexport { default as __experimentalInputControl } from './input-control';\nexport { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';\nexport { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';\nexport { default as KeyboardShortcuts } from './keyboard-shortcuts';\nexport { default as MenuGroup } from './menu-group';\nexport { default as MenuItem } from './menu-item';\nexport { default as MenuItemsChoice } from './menu-items-choice';\nexport { default as Modal } from './modal';\nexport { default as ScrollLock } from './scroll-lock';\nexport { NavigableMenu, TabbableContainer } from './navigable-container';\nexport { default as __experimentalNavigation } from './navigation';\nexport { default as __experimentalNavigationBackButton } from './navigation/back-button';\nexport { default as __experimentalNavigationGroup } from './navigation/group';\nexport { default as __experimentalNavigationItem } from './navigation/item';\nexport { default as __experimentalNavigationMenu } from './navigation/menu';\nexport {\n\tNavigatorProvider as __experimentalNavigatorProvider,\n\tNavigatorScreen as __experimentalNavigatorScreen,\n\tNavigatorButton as __experimentalNavigatorButton,\n\tNavigatorBackButton as __experimentalNavigatorBackButton,\n\tuseNavigator as __experimentalUseNavigator,\n} from './navigator';\nexport { default as Notice } from './notice';\nexport { default as __experimentalNumberControl } from './number-control';\nexport { default as NoticeList } from './notice/list';\nexport { default as Panel } from './panel';\nexport { default as PanelBody } from './panel/body';\nexport { default as PanelHeader } from './panel/header';\nexport { default as PanelRow } from './panel/row';\nexport { default as Placeholder } from './placeholder';\nexport { default as Popover } from './popover';\nexport { default as QueryControls } from './query-controls';\nexport { default as __experimentalRadio } from './radio';\nexport { default as __experimentalRadioGroup } from './radio-group';\nexport { default as RadioControl } from './radio-control';\nexport { default as RangeControl } from './range-control';\nexport { default as ResizableBox } from './resizable-box';\nexport { default as ResponsiveWrapper } from './responsive-wrapper';\nexport { default as SandBox } from './sandbox';\nexport { default as SearchControl } from './search-control';\nexport { default as SelectControl } from './select-control';\nexport { default as Snackbar } from './snackbar';\nexport { default as SnackbarList } from './snackbar/list';\nexport { Spacer as __experimentalSpacer } from './spacer';\nexport { Scrollable as __experimentalScrollable } from './scrollable';\nexport { default as Spinner } from './spinner';\nexport { Surface as __experimentalSurface } from './surface';\nexport { default as TabPanel } from './tab-panel';\nexport { Text as __experimentalText } from './text';\nexport { default as TextControl } from './text-control';\nexport { default as TextareaControl } from './textarea-control';\nexport { default as TextHighlight } from './text-highlight';\nexport { default as Tip } from './tip';\nexport { default as ToggleControl } from './toggle-control';\nexport {\n\tToggleGroupControl as __experimentalToggleGroupControl,\n\tToggleGroupControlOption as __experimentalToggleGroupControlOption,\n\tToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,\n} from './toggle-group-control';\nexport { default as Toolbar } from './toolbar';\nexport { default as ToolbarButton } from './toolbar-button';\nexport { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';\nexport { default as __experimentalToolbarContext } from './toolbar-context';\nexport { default as ToolbarGroup } from './toolbar-group';\nexport { default as ToolbarItem } from './toolbar-item';\nexport {\n\tToolsPanel as __experimentalToolsPanel,\n\tToolsPanelItem as __experimentalToolsPanelItem,\n\tToolsPanelContext as __experimentalToolsPanelContext,\n} from './tools-panel';\nexport { default as Tooltip } from './tooltip';\nexport {\n\tdefault as __experimentalTreeGrid,\n\tTreeGridRow as __experimentalTreeGridRow,\n\tTreeGridCell as __experimentalTreeGridCell,\n\tTreeGridItem as __experimentalTreeGridItem,\n} from './tree-grid';\nexport { default as TreeSelect } from './tree-select';\nexport { Truncate as __experimentalTruncate } from './truncate';\nexport {\n\tdefault as __experimentalUnitControl,\n\tuseCustomUnits as __experimentalUseCustomUnits,\n\tparseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,\n} from './unit-control';\nexport { View as __experimentalView } from './view';\nexport { VisuallyHidden } from './visually-hidden';\nexport { VStack as __experimentalVStack } from './v-stack';\nexport { default as IsolatedEventContainer } from './isolated-event-container';\nexport {\n\tcreateSlotFill,\n\tSlot,\n\tFill,\n\tProvider as SlotFillProvider,\n\tuseSlot as __experimentalUseSlot,\n} from './slot-fill';\nexport { default as __experimentalStyleProvider } from './style-provider';\nexport { ZStack as __experimentalZStack } from './z-stack';\n\n// Higher-Order Components.\nexport {\n\tdefault as navigateRegions,\n\tuseNavigateRegions as __unstableUseNavigateRegions,\n} from './higher-order/navigate-regions';\nexport { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';\nexport { default as withFallbackStyles } from './higher-order/with-fallback-styles';\nexport { default as withFilters } from './higher-order/with-filters';\nexport { default as withFocusOutside } from './higher-order/with-focus-outside';\nexport {\n\tdefault as withFocusReturn,\n\tProvider as FocusReturnProvider,\n} from './higher-order/with-focus-return';\nexport { default as withNotices } from './higher-order/with-notices';\nexport { default as withSpokenMessages } from './higher-order/with-spoken-messages';\n"]}

package/build/input-control/index.js

@@ -21,6 +21,8 @@ var _inputBase = _interopRequireDefault(require("./input-base"));
 
 var _inputField = _interopRequireDefault(require("./input-field"));
 
+var _space = require("../ui/utils/space");
+
 var _utils = require("./utils");
 
 /**
@@ -44,6 +46,7 @@ function useUniqueId(idProp) {
 
 function UnforwardedInputControl(_ref, ref) {
   let {
+    __next36pxDefaultSize,
     __unstableStateReducer: stateReducer = state => state,
     __unstableInputWidth,
     className,
@@ -71,6 +74,7 @@ function UnforwardedInputControl(_ref, ref) {
     onChange
   });
   return (0, _element.createElement)(_inputBase.default, {
+    __next36pxDefaultSize: __next36pxDefaultSize,
     __unstableInputWidth: __unstableInputWidth,
     className: classes,
     disabled: disabled,
@@ -85,6 +89,7 @@ function UnforwardedInputControl(_ref, ref) {
     size: size,
     suffix: suffix
   }, (0, _element.createElement)(_inputField.default, (0, _extends2.default)({}, props, {
+    __next36pxDefaultSize: __next36pxDefaultSize,
     className: "components-input-control__input",
     disabled: disabled,
     id: id,
@@ -92,6 +97,8 @@ function UnforwardedInputControl(_ref, ref) {
     isPressEnterToChange: isPressEnterToChange,
     onKeyDown: onKeyDown,
     onValidate: onValidate,
+    paddingInlineStart: prefix ? (0, _space.space)(2) : undefined,
+    paddingInlineEnd: suffix ? (0, _space.space)(2) : undefined,
     ref: ref,
     setIsFocused: setIsFocused,
     size: size,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/index.tsx"],"names":["noop","useUniqueId","idProp","instanceId","InputControl","id","UnforwardedInputControl","ref","__unstableStateReducer","stateReducer","state","__unstableInputWidth","className","disabled","hideLabelFromVision","isPressEnterToChange","label","labelPosition","onChange","onValidate","onKeyDown","prefix","size","suffix","value","props","isFocused","setIsFocused","classes","draftHookProps","onBlur"],"mappings":";;;;;;;;;;;AAUA;;;;AAPA;;AAMA;;AAMA;;AACA;;AAEA;;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAMA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,WAAT,CAAsBC,MAAtB,EAAwC;AACvC,QAAMC,UAAU,GAAG,4BAAeC,YAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,2BAA2BF,UAAY,EAAnD;AAEA,SAAOD,MAAM,IAAIG,EAAjB;AACA;;AAEM,SAASC,uBAAT,OAoBNC,GApBM,EAqBL;AAAA,MApBD;AACCC,IAAAA,sBAAsB,EAAEC,YAAY,GAAKC,KAAF,IAAaA,KADrD;AAECC,IAAAA,oBAFD;AAGCC,IAAAA,SAHD;AAICC,IAAAA,QAAQ,GAAG,KAJZ;AAKCC,IAAAA,mBAAmB,GAAG,KALvB;AAMCT,IAAAA,EAAE,EAAEH,MANL;AAOCa,IAAAA,oBAAoB,GAAG,KAPxB;AAQCC,IAAAA,KARD;AASCC,IAAAA,aAAa,GAAG,KATjB;AAUCC,IAAAA,QAAQ,GAAGlB,IAVZ;AAWCmB,IAAAA,UAAU,GAAGnB,IAXd;AAYCoB,IAAAA,SAAS,GAAGpB,IAZb;AAaCqB,IAAAA,MAbD;AAcCC,IAAAA,IAAI,GAAG,SAdR;AAeCC,IAAAA,MAfD;AAgBCC,IAAAA,KAhBD;AAiBC,OAAGC;AAjBJ,GAoBC;AACD,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,KAAV,CAApC;AAEA,QAAMtB,EAAE,GAAGJ,WAAW,CAAEC,MAAF,CAAtB;AACA,QAAM0B,OAAO,GAAG,yBAAY,0BAAZ,EAAwChB,SAAxC,CAAhB;AAEA,QAAMiB,cAAc,GAAG,qBAAU;AAChCL,IAAAA,KADgC;AAEhCM,IAAAA,MAAM,EAAEL,KAAK,CAACK,MAFkB;AAGhCZ,IAAAA;AAHgC,GAAV,CAAvB;AAMA,SACC,4BAAC,kBAAD;AACC,IAAA,oBAAoB,EAAGP,oBADxB;AAEC,IAAA,SAAS,EAAGiB,OAFb;AAGC,IAAA,QAAQ,EAAGf,QAHZ;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,EAAE,EAAGT,EANN;AAOC,IAAA,SAAS,EAAGqB,SAPb;AAQC,IAAA,OAAO,EAAC,MART;AASC,IAAA,KAAK,EAAGV,KATT;AAUC,IAAA,aAAa,EAAGC,aAVjB;AAWC,IAAA,MAAM,EAAGI,MAXV;AAYC,IAAA,IAAI,EAAGC,IAZR;AAaC,IAAA,MAAM,EAAGC;AAbV,KAeC,4BAAC,mBAAD,6BACME,KADN;AAEC,IAAA,SAAS,EAAC,iCAFX;AAGC,IAAA,QAAQ,EAAGZ,QAHZ;AAIC,IAAA,EAAE,EAAGR,EAJN;AAKC,IAAA,SAAS,EAAGqB,SALb;AAMC,IAAA,oBAAoB,EAAGX,oBANxB;AAOC,IAAA,SAAS,EAAGK,SAPb;AAQC,IAAA,UAAU,EAAGD,UARd;AASC,IAAA,GAAG,EAAGZ,GATP;AAUC,IAAA,YAAY,EAAGoB,YAVhB;AAWC,IAAA,IAAI,EAAGL,IAXR;AAYC,IAAA,YAAY,EAAGb;AAZhB,KAaMoB,cAbN,EAfD,CADD;AAiCA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMzB,YAAY,GAAG,yBAAYE,uBAAZ,CAArB;;eAEQF,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport type { InputControlProps } from './types';\nimport { useDraft } from './utils';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputControl );\n\tconst id = `inspector-input-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nexport function UnforwardedInputControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\t__unstableInputWidth,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thideLabelFromVision = false,\n\t\tid: idProp,\n\t\tisPressEnterToChange = false,\n\t\tlabel,\n\t\tlabelPosition = 'top',\n\t\tonChange = noop,\n\t\tonValidate = noop,\n\t\tonKeyDown = noop,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tsuffix,\n\t\tvalue,\n\t\t...props\n\t}: InputControlProps,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tconst id = useUniqueId( idProp );\n\tconst classes = classNames( 'components-input-control', className );\n\n\tconst draftHookProps = useDraft( {\n\t\tvalue,\n\t\tonBlur: props.onBlur,\n\t\tonChange,\n\t} );\n\n\treturn (\n\t\t<InputBase\n\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tgap={ 3 }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\tisFocused={ isFocused }\n\t\t\tjustify=\"left\"\n\t\t\tlabel={ label }\n\t\t\tlabelPosition={ labelPosition }\n\t\t\tprefix={ prefix }\n\t\t\tsize={ size }\n\t\t\tsuffix={ suffix }\n\t\t>\n\t\t\t<InputField\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"components-input-control__input\"\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tonValidate={ onValidate }\n\t\t\t\tref={ ref }\n\t\t\t\tsetIsFocused={ setIsFocused }\n\t\t\t\tsize={ size }\n\t\t\t\tstateReducer={ stateReducer }\n\t\t\t\t{ ...draftHookProps }\n\t\t\t/>\n\t\t</InputBase>\n\t);\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 '@wordpress/compose';\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 );\n\nexport default InputControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/index.tsx"],"names":["noop","useUniqueId","idProp","instanceId","InputControl","id","UnforwardedInputControl","ref","__next36pxDefaultSize","__unstableStateReducer","stateReducer","state","__unstableInputWidth","className","disabled","hideLabelFromVision","isPressEnterToChange","label","labelPosition","onChange","onValidate","onKeyDown","prefix","size","suffix","value","props","isFocused","setIsFocused","classes","draftHookProps","onBlur","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport type { InputControlProps } from './types';\nimport { space } from '../ui/utils/space';\nimport { useDraft } from './utils';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputControl );\n\tconst id = `inspector-input-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nexport function UnforwardedInputControl(\n\t{\n\t\t__next36pxDefaultSize,\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\t__unstableInputWidth,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thideLabelFromVision = false,\n\t\tid: idProp,\n\t\tisPressEnterToChange = false,\n\t\tlabel,\n\t\tlabelPosition = 'top',\n\t\tonChange = noop,\n\t\tonValidate = noop,\n\t\tonKeyDown = noop,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tsuffix,\n\t\tvalue,\n\t\t...props\n\t}: InputControlProps,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tconst id = useUniqueId( idProp );\n\tconst classes = classNames( 'components-input-control', className );\n\n\tconst draftHookProps = useDraft( {\n\t\tvalue,\n\t\tonBlur: props.onBlur,\n\t\tonChange,\n\t} );\n\n\treturn (\n\t\t<InputBase\n\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tgap={ 3 }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\tisFocused={ isFocused }\n\t\t\tjustify=\"left\"\n\t\t\tlabel={ label }\n\t\t\tlabelPosition={ labelPosition }\n\t\t\tprefix={ prefix }\n\t\t\tsize={ size }\n\t\t\tsuffix={ suffix }\n\t\t>\n\t\t\t<InputField\n\t\t\t\t{ ...props }\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\tclassName=\"components-input-control__input\"\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tonValidate={ onValidate }\n\t\t\t\tpaddingInlineStart={ prefix ? space( 2 ) : undefined }\n\t\t\t\tpaddingInlineEnd={ suffix ? space( 2 ) : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\tsetIsFocused={ setIsFocused }\n\t\t\t\tsize={ size }\n\t\t\t\tstateReducer={ stateReducer }\n\t\t\t\t{ ...draftHookProps }\n\t\t\t/>\n\t\t</InputBase>\n\t);\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 '@wordpress/compose';\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 );\n\nexport default InputControl;\n"]}

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

@@ -20,6 +20,8 @@ var _label = _interopRequireDefault(require("./label"));
 
 var _inputControlStyles = require("./styles/input-control-styles");
 
+var _context = require("../ui/context");
+
 /**
  * External dependencies
  */
@@ -62,6 +64,7 @@ function getUIFlexProps(labelPosition) {
 
 function InputBase(_ref, ref) {
   let {
+    __next36pxDefaultSize,
     __unstableInputWidth,
     children,
     className,
@@ -78,6 +81,23 @@ function InputBase(_ref, ref) {
   } = _ref;
   const id = useUniqueId(idProp);
   const hideLabel = hideLabelFromVision || !label;
+  const {
+    paddingLeft,
+    paddingRight
+  } = (0, _inputControlStyles.getSizeConfig)({
+    inputSize: size,
+    __next36pxDefaultSize
+  });
+  const prefixSuffixContextValue = (0, _element.useMemo)(() => {
+    return {
+      InputControlPrefixWrapper: {
+        paddingLeft
+      },
+      InputControlSuffixWrapper: {
+        paddingRight
+      }
+    };
+  }, [paddingLeft, paddingRight]);
   return (// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
     (0, _element.createElement)(_inputControlStyles.Root, (0, _extends2.default)({}, props, getUIFlexProps(labelPosition), {
       className: className,
@@ -88,19 +108,20 @@ function InputBase(_ref, ref) {
       className: "components-input-control__label",
       hideLabelFromVision: hideLabelFromVision,
       labelPosition: labelPosition,
-      htmlFor: id,
-      size: size
+      htmlFor: id
     }, label)), (0, _element.createElement)(_inputControlStyles.Container, {
       __unstableInputWidth: __unstableInputWidth,
       className: "components-input-control__container",
       disabled: disabled,
       hideLabel: hideLabel,
       labelPosition: labelPosition
+    }, (0, _element.createElement)(_context.ContextSystemProvider, {
+      value: prefixSuffixContextValue
     }, prefix && (0, _element.createElement)(_inputControlStyles.Prefix, {
       className: "components-input-control__prefix"
     }, prefix), children, suffix && (0, _element.createElement)(_inputControlStyles.Suffix, {
       className: "components-input-control__suffix"
-    }, suffix), (0, _element.createElement)(_backdrop.default, {
+    }, suffix)), (0, _element.createElement)(_backdrop.default, {
       disabled: disabled,
       isFocused: isFocused
     })))

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/input-base.tsx"],"names":["useUniqueId","idProp","instanceId","InputBase","id","getUIFlexProps","labelPosition","props","direction","gap","justify","ref","__unstableInputWidth","children","className","disabled","hideLabelFromVision","isFocused","label","prefix","size","suffix","hideLabel"],"mappings":";;;;;;;;;;AASA;;;;AADA;;AAMA;;AACA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAYA,SAASA,WAAT,CAAsBC,MAAtB,EAAwC;AACvC,QAAMC,UAAU,GAAG,4BAAeC,SAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,sBAAsBF,UAAY,EAA9C;AAEA,SAAOD,MAAM,IAAIG,EAAjB;AACA,C,CAED;;;AACA,SAASC,cAAT,CAAyBC,aAAzB,EAAyD;AACxD,QAAMC,KAA6D,GAAG,EAAtE;;AACA,UAASD,aAAT;AACC,SAAK,KAAL;AACCC,MAAAA,KAAK,CAACC,SAAN,GAAkB,QAAlB;AACAD,MAAAA,KAAK,CAACE,GAAN,GAAY,CAAZ;AACA;;AACD,SAAK,QAAL;AACCF,MAAAA,KAAK,CAACC,SAAN,GAAkB,gBAAlB;AACAD,MAAAA,KAAK,CAACE,GAAN,GAAY,CAAZ;AACA;;AACD,SAAK,MAAL;AACCF,MAAAA,KAAK,CAACG,OAAN,GAAgB,eAAhB;AACA;AAXF;;AAcA,SAAOH,KAAP;AACA;;AAEM,SAASJ,SAAT,OAgBNQ,GAhBM,EAiBL;AAAA,MAhBD;AACCC,IAAAA,oBADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,SAHD;AAICC,IAAAA,QAAQ,GAAG,KAJZ;AAKCC,IAAAA,mBAAmB,GAAG,KALvB;AAMCV,IAAAA,aAND;AAOCF,IAAAA,EAAE,EAAEH,MAPL;AAQCgB,IAAAA,SAAS,GAAG,KARb;AASCC,IAAAA,KATD;AAUCC,IAAAA,MAVD;AAWCC,IAAAA,IAAI,GAAG,SAXR;AAYCC,IAAAA,MAZD;AAaC,OAAGd;AAbJ,GAgBC;AACD,QAAMH,EAAE,GAAGJ,WAAW,CAAEC,MAAF,CAAtB;AACA,QAAMqB,SAAS,GAAGN,mBAAmB,IAAI,CAAEE,KAA3C;AAEA,SACC;AACA,gCAAC,wBAAD,6BACMX,KADN,EAEMF,cAAc,CAAEC,aAAF,CAFpB;AAGC,MAAA,SAAS,EAAGQ,SAHb;AAIC,MAAA,SAAS,EAAGG,SAJb;AAKC,MAAA,aAAa,EAAGX,aALjB;AAMC,MAAA,GAAG,EAAGK;AANP,QAQC,4BAAC,gCAAD,QACC,4BAAC,cAAD;AACC,MAAA,SAAS,EAAC,iCADX;AAEC,MAAA,mBAAmB,EAAGK,mBAFvB;AAGC,MAAA,aAAa,EAAGV,aAHjB;AAIC,MAAA,OAAO,EAAGF,EAJX;AAKC,MAAA,IAAI,EAAGgB;AALR,OAOGF,KAPH,CADD,CARD,EAmBC,4BAAC,6BAAD;AACC,MAAA,oBAAoB,EAAGN,oBADxB;AAEC,MAAA,SAAS,EAAC,qCAFX;AAGC,MAAA,QAAQ,EAAGG,QAHZ;AAIC,MAAA,SAAS,EAAGO,SAJb;AAKC,MAAA,aAAa,EAAGhB;AALjB,OAOGa,MAAM,IACP,4BAAC,0BAAD;AAAQ,MAAA,SAAS,EAAC;AAAlB,OACGA,MADH,CARF,EAYGN,QAZH,EAaGQ,MAAM,IACP,4BAAC,0BAAD;AAAQ,MAAA,SAAS,EAAC;AAAlB,OACGA,MADH,CAdF,EAkBC,4BAAC,iBAAD;AAAU,MAAA,QAAQ,EAAGN,QAArB;AAAgC,MAAA,SAAS,EAAGE;AAA5C,MAlBD,CAnBD;AAFD;AA2CA;;eAEc,yBAAYd,SAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Backdrop from './backdrop';\nimport Label from './label';\nimport {\n\tContainer,\n\tRoot,\n\tPrefix,\n\tSuffix,\n\tLabelWrapper,\n} from './styles/input-control-styles';\nimport type { InputBaseProps, LabelPosition } from './types';\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputBase );\n\tconst id = `input-base-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\n// Adapter to map props for the new ui/flex compopnent.\nfunction getUIFlexProps( labelPosition?: LabelPosition ) {\n\tconst props: { direction?: string; gap?: number; justify?: string } = {};\n\tswitch ( labelPosition ) {\n\t\tcase 'top':\n\t\t\tprops.direction = 'column';\n\t\t\tprops.gap = 0;\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\tprops.direction = 'column-reverse';\n\t\t\tprops.gap = 0;\n\t\t\tbreak;\n\t\tcase 'edge':\n\t\t\tprops.justify = 'space-between';\n\t\t\tbreak;\n\t}\n\n\treturn props;\n}\n\nexport function InputBase(\n\t{\n\t\t__unstableInputWidth,\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thideLabelFromVision = false,\n\t\tlabelPosition,\n\t\tid: idProp,\n\t\tisFocused = false,\n\t\tlabel,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tsuffix,\n\t\t...props\n\t}: InputBaseProps,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\tconst id = useUniqueId( idProp );\n\tconst hideLabel = hideLabelFromVision || ! label;\n\n\treturn (\n\t\t// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\t{ ...getUIFlexProps( labelPosition ) }\n\t\t\tclassName={ className }\n\t\t\tisFocused={ isFocused }\n\t\t\tlabelPosition={ labelPosition }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<LabelWrapper>\n\t\t\t\t<Label\n\t\t\t\t\tclassName=\"components-input-control__label\"\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tsize={ size }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Label>\n\t\t\t</LabelWrapper>\n\t\t\t<Container\n\t\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\t\tclassName=\"components-input-control__container\"\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabel={ hideLabel }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t>\n\t\t\t\t{ prefix && (\n\t\t\t\t\t<Prefix className=\"components-input-control__prefix\">\n\t\t\t\t\t\t{ prefix }\n\t\t\t\t\t</Prefix>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ suffix && (\n\t\t\t\t\t<Suffix className=\"components-input-control__suffix\">\n\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t</Suffix>\n\t\t\t\t) }\n\t\t\t\t<Backdrop disabled={ disabled } isFocused={ isFocused } />\n\t\t\t</Container>\n\t\t</Root>\n\t);\n}\n\nexport default forwardRef( InputBase );\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/input-base.tsx"],"names":["useUniqueId","idProp","instanceId","InputBase","id","getUIFlexProps","labelPosition","props","direction","gap","justify","ref","__next36pxDefaultSize","__unstableInputWidth","children","className","disabled","hideLabelFromVision","isFocused","label","prefix","size","suffix","hideLabel","paddingLeft","paddingRight","inputSize","prefixSuffixContextValue","InputControlPrefixWrapper","InputControlSuffixWrapper"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Backdrop from './backdrop';\nimport Label from './label';\nimport {\n\tContainer,\n\tRoot,\n\tPrefix,\n\tSuffix,\n\tLabelWrapper,\n\tgetSizeConfig,\n} from './styles/input-control-styles';\nimport type { InputBaseProps, LabelPosition } from './types';\nimport { ContextSystemProvider } from '../ui/context';\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputBase );\n\tconst id = `input-base-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\n// Adapter to map props for the new ui/flex compopnent.\nfunction getUIFlexProps( labelPosition?: LabelPosition ) {\n\tconst props: { direction?: string; gap?: number; justify?: string } = {};\n\tswitch ( labelPosition ) {\n\t\tcase 'top':\n\t\t\tprops.direction = 'column';\n\t\t\tprops.gap = 0;\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\tprops.direction = 'column-reverse';\n\t\t\tprops.gap = 0;\n\t\t\tbreak;\n\t\tcase 'edge':\n\t\t\tprops.justify = 'space-between';\n\t\t\tbreak;\n\t}\n\n\treturn props;\n}\n\nexport function InputBase(\n\t{\n\t\t__next36pxDefaultSize,\n\t\t__unstableInputWidth,\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thideLabelFromVision = false,\n\t\tlabelPosition,\n\t\tid: idProp,\n\t\tisFocused = false,\n\t\tlabel,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tsuffix,\n\t\t...props\n\t}: InputBaseProps,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\tconst id = useUniqueId( idProp );\n\tconst hideLabel = hideLabelFromVision || ! label;\n\n\tconst { paddingLeft, paddingRight } = getSizeConfig( {\n\t\tinputSize: size,\n\t\t__next36pxDefaultSize,\n\t} );\n\tconst prefixSuffixContextValue = useMemo( () => {\n\t\treturn {\n\t\t\tInputControlPrefixWrapper: { paddingLeft },\n\t\t\tInputControlSuffixWrapper: { paddingRight },\n\t\t};\n\t}, [ paddingLeft, paddingRight ] );\n\n\treturn (\n\t\t// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\t{ ...getUIFlexProps( labelPosition ) }\n\t\t\tclassName={ className }\n\t\t\tisFocused={ isFocused }\n\t\t\tlabelPosition={ labelPosition }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<LabelWrapper>\n\t\t\t\t<Label\n\t\t\t\t\tclassName=\"components-input-control__label\"\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</Label>\n\t\t\t</LabelWrapper>\n\t\t\t<Container\n\t\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\t\tclassName=\"components-input-control__container\"\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabel={ hideLabel }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t>\n\t\t\t\t<ContextSystemProvider value={ prefixSuffixContextValue }>\n\t\t\t\t\t{ prefix && (\n\t\t\t\t\t\t<Prefix className=\"components-input-control__prefix\">\n\t\t\t\t\t\t\t{ prefix }\n\t\t\t\t\t\t</Prefix>\n\t\t\t\t\t) }\n\t\t\t\t\t{ children }\n\t\t\t\t\t{ suffix && (\n\t\t\t\t\t\t<Suffix className=\"components-input-control__suffix\">\n\t\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t\t</Suffix>\n\t\t\t\t\t) }\n\t\t\t\t</ContextSystemProvider>\n\t\t\t\t<Backdrop disabled={ disabled } isFocused={ isFocused } />\n\t\t\t</Container>\n\t\t</Root>\n\t);\n}\n\nexport default forwardRef( InputBase );\n"]}

package/build/input-control/input-prefix-wrapper.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InputControlPrefixWrapper = void 0;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _spacer = require("../spacer");
+
+var _context = require("../ui/context");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function UnconnectedInputControlPrefixWrapper(props, forwardedRef) {
+  const derivedProps = (0, _context.useContextSystem)(props, 'InputControlPrefixWrapper');
+  return (0, _element.createElement)(_spacer.Spacer, (0, _extends2.default)({
+    marginBottom: 0
+  }, derivedProps, {
+    ref: forwardedRef
+  }));
+}
+/**
+ * A convenience wrapper for the `prefix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+ * />
+ * ```
+ */
+
+
+const InputControlPrefixWrapper = (0, _context.contextConnect)(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper');
+exports.InputControlPrefixWrapper = InputControlPrefixWrapper;
+var _default = InputControlPrefixWrapper;
+exports.default = _default;
+//# sourceMappingURL=input-prefix-wrapper.js.map

package/build/input-control/input-prefix-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/input-control/input-prefix-wrapper.tsx"],"names":["UnconnectedInputControlPrefixWrapper","props","forwardedRef","derivedProps","InputControlPrefixWrapper"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AASA,SAASA,oCAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,+BAAkBF,KAAlB,EAAyB,2BAAzB,CAArB;AAEA,SACC,4BAAC,cAAD;AAAQ,IAAA,YAAY,EAAG;AAAvB,KAAgCE,YAAhC;AAA+C,IAAA,GAAG,EAAGD;AAArD,KADD;AAGA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,yBAAyB,GAAG,6BACxCJ,oCADwC,EAExC,2BAFwC,CAAlC;;eAKQI,yB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { Spacer } from '../spacer';\nimport {\n\tWordPressComponentProps,\n\tcontextConnect,\n\tuseContextSystem,\n} from '../ui/context';\nimport type { InputControlPrefixWrapperProps } from './types';\n\nfunction UnconnectedInputControlPrefixWrapper(\n\tprops: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );\n\n\treturn (\n\t\t<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />\n\t);\n}\n\n/**\n * A convenience wrapper for the `prefix` when you want to apply\n * standard padding in accordance with the size variant.\n *\n * ```jsx\n * import {\n *   __experimentalInputControl as InputControl,\n *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n * } from '@wordpress/components';\n *\n * <InputControl\n *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}\n * />\n * ```\n */\nexport const InputControlPrefixWrapper = contextConnect(\n\tUnconnectedInputControlPrefixWrapper,\n\t'InputControlPrefixWrapper'\n);\n\nexport default InputControlPrefixWrapper;\n"]}

package/build/input-control/input-suffix-wrapper.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InputControlSuffixWrapper = void 0;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _spacer = require("../spacer");
+
+var _context = require("../ui/context");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function UnconnectedInputControlSuffixWrapper(props, forwardedRef) {
+  const derivedProps = (0, _context.useContextSystem)(props, 'InputControlSuffixWrapper');
+  return (0, _element.createElement)(_spacer.Spacer, (0, _extends2.default)({
+    marginBottom: 0
+  }, derivedProps, {
+    ref: forwardedRef
+  }));
+}
+/**
+ * A convenience wrapper for the `suffix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+ * />
+ * ```
+ */
+
+
+const InputControlSuffixWrapper = (0, _context.contextConnect)(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper');
+exports.InputControlSuffixWrapper = InputControlSuffixWrapper;
+var _default = InputControlSuffixWrapper;
+exports.default = _default;
+//# sourceMappingURL=input-suffix-wrapper.js.map

package/build/input-control/input-suffix-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/input-control/input-suffix-wrapper.tsx"],"names":["UnconnectedInputControlSuffixWrapper","props","forwardedRef","derivedProps","InputControlSuffixWrapper"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AASA,SAASA,oCAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,+BAAkBF,KAAlB,EAAyB,2BAAzB,CAArB;AAEA,SACC,4BAAC,cAAD;AAAQ,IAAA,YAAY,EAAG;AAAvB,KAAgCE,YAAhC;AAA+C,IAAA,GAAG,EAAGD;AAArD,KADD;AAGA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,yBAAyB,GAAG,6BACxCJ,oCADwC,EAExC,2BAFwC,CAAlC;;eAKQI,yB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { Spacer } from '../spacer';\nimport {\n\tWordPressComponentProps,\n\tcontextConnect,\n\tuseContextSystem,\n} from '../ui/context';\nimport type { InputControlSuffixWrapperProps } from './types';\n\nfunction UnconnectedInputControlSuffixWrapper(\n\tprops: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );\n\n\treturn (\n\t\t<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />\n\t);\n}\n\n/**\n * A convenience wrapper for the `suffix` when you want to apply\n * standard padding in accordance with the size variant.\n *\n * ```jsx\n * import {\n *   __experimentalInputControl as InputControl,\n *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n * } from '@wordpress/components';\n *\n * <InputControl\n *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}\n * />\n * ```\n */\nexport const InputControlSuffixWrapper = contextConnect(\n\tUnconnectedInputControlSuffixWrapper,\n\t'InputControlSuffixWrapper'\n);\n\nexport default InputControlSuffixWrapper;\n"]}

package/build/input-control/reducer/actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RESET = exports.PRESS_UP = exports.PRESS_ENTER = exports.PRESS_DOWN = exports.INVALIDATE = exports.DRAG_START = exports.DRAG_END = exports.DRAG = exports.COMMIT = exports.CHANGE = void 0;
+exports.RESET = exports.PRESS_UP = exports.PRESS_ENTER = exports.PRESS_DOWN = exports.INVALIDATE = exports.DRAG_START = exports.DRAG_END = exports.DRAG = exports.CONTROL = exports.COMMIT = exports.CHANGE = void 0;
 
 /**
  * External dependencies
@@ -16,6 +16,8 @@ const CHANGE = 'CHANGE';
 exports.CHANGE = CHANGE;
 const COMMIT = 'COMMIT';
 exports.COMMIT = COMMIT;
+const CONTROL = 'CONTROL';
+exports.CONTROL = CONTROL;
 const DRAG_END = 'DRAG_END';
 exports.DRAG_END = DRAG_END;
 const DRAG_START = 'DRAG_START';

package/build/input-control/reducer/actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/reducer/actions.ts"],"names":["CHANGE","COMMIT","DRAG_END","DRAG_START","DRAG","INVALIDATE","PRESS_DOWN","PRESS_ENTER","PRESS_UP","RESET"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,MAAM,GAAG,QAAf;;AACA,MAAMC,MAAM,GAAG,QAAf;;AACA,MAAMC,QAAQ,GAAG,UAAjB;;AACA,MAAMC,UAAU,GAAG,YAAnB;;AACA,MAAMC,IAAI,GAAG,MAAb;;AACA,MAAMC,UAAU,GAAG,YAAnB;;AACA,MAAMC,UAAU,GAAG,YAAnB;;AACA,MAAMC,WAAW,GAAG,aAApB;;AACA,MAAMC,QAAQ,GAAG,UAAjB;;AACA,MAAMC,KAAK,GAAG,OAAd","sourcesContent":["/**\n * External dependencies\n */\nimport type { SyntheticEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DragProps } from '../types';\n\nexport const CHANGE = 'CHANGE';\nexport const COMMIT = 'COMMIT';\nexport const DRAG_END = 'DRAG_END';\nexport const DRAG_START = 'DRAG_START';\nexport const DRAG = 'DRAG';\nexport const INVALIDATE = 'INVALIDATE';\nexport const PRESS_DOWN = 'PRESS_DOWN';\nexport const PRESS_ENTER = 'PRESS_ENTER';\nexport const PRESS_UP = 'PRESS_UP';\nexport const RESET = 'RESET';\n\ninterface EventPayload {\n\tevent?: SyntheticEvent;\n}\n\ninterface Action< Type, ExtraPayload = {} > {\n\ttype: Type;\n\tpayload: EventPayload & ExtraPayload;\n}\n\ninterface ValuePayload {\n\tvalue: string;\n}\n\nexport type ChangeAction = Action< typeof CHANGE, ValuePayload >;\nexport type CommitAction = Action< typeof COMMIT, ValuePayload >;\nexport type PressUpAction = Action< typeof PRESS_UP >;\nexport type PressDownAction = Action< typeof PRESS_DOWN >;\nexport type PressEnterAction = Action< typeof PRESS_ENTER >;\nexport type DragStartAction = Action< typeof DRAG_START, DragProps >;\nexport type DragEndAction = Action< typeof DRAG_END, DragProps >;\nexport type DragAction = Action< typeof DRAG, DragProps >;\nexport type ResetAction = Action< typeof RESET, Partial< ValuePayload > >;\nexport type InvalidateAction = Action< typeof INVALIDATE, { error: unknown } >;\n\nexport type ChangeEventAction = ChangeAction | ResetAction | CommitAction;\n\nexport type DragEventAction = DragStartAction | DragEndAction | DragAction;\n\nexport type KeyEventAction = PressDownAction | PressUpAction | PressEnterAction;\n\nexport type InputAction =\n\t| ChangeEventAction\n\t| KeyEventAction\n\t| DragEventAction\n\t| InvalidateAction;\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/reducer/actions.ts"],"names":["CHANGE","COMMIT","CONTROL","DRAG_END","DRAG_START","DRAG","INVALIDATE","PRESS_DOWN","PRESS_ENTER","PRESS_UP","RESET"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,MAAM,GAAG,QAAf;;AACA,MAAMC,MAAM,GAAG,QAAf;;AACA,MAAMC,OAAO,GAAG,SAAhB;;AACA,MAAMC,QAAQ,GAAG,UAAjB;;AACA,MAAMC,UAAU,GAAG,YAAnB;;AACA,MAAMC,IAAI,GAAG,MAAb;;AACA,MAAMC,UAAU,GAAG,YAAnB;;AACA,MAAMC,UAAU,GAAG,YAAnB;;AACA,MAAMC,WAAW,GAAG,aAApB;;AACA,MAAMC,QAAQ,GAAG,UAAjB;;AACA,MAAMC,KAAK,GAAG,OAAd","sourcesContent":["/**\n * External dependencies\n */\nimport type { SyntheticEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DragProps } from '../types';\n\nexport const CHANGE = 'CHANGE';\nexport const COMMIT = 'COMMIT';\nexport const CONTROL = 'CONTROL';\nexport const DRAG_END = 'DRAG_END';\nexport const DRAG_START = 'DRAG_START';\nexport const DRAG = 'DRAG';\nexport const INVALIDATE = 'INVALIDATE';\nexport const PRESS_DOWN = 'PRESS_DOWN';\nexport const PRESS_ENTER = 'PRESS_ENTER';\nexport const PRESS_UP = 'PRESS_UP';\nexport const RESET = 'RESET';\n\ninterface EventPayload {\n\tevent?: SyntheticEvent;\n}\n\nexport interface Action< Type = string, ExtraPayload = {} > {\n\ttype: Type;\n\tpayload: EventPayload & ExtraPayload;\n}\n\ninterface ValuePayload {\n\tvalue: string;\n}\n\nexport type ChangeAction = Action< typeof CHANGE, ValuePayload >;\nexport type CommitAction = Action< typeof COMMIT, ValuePayload >;\nexport type ControlAction = Action< typeof CONTROL, ValuePayload >;\nexport type PressUpAction = Action< typeof PRESS_UP >;\nexport type PressDownAction = Action< typeof PRESS_DOWN >;\nexport type PressEnterAction = Action< typeof PRESS_ENTER >;\nexport type DragStartAction = Action< typeof DRAG_START, DragProps >;\nexport type DragEndAction = Action< typeof DRAG_END, DragProps >;\nexport type DragAction = Action< typeof DRAG, DragProps >;\nexport type ResetAction = Action< typeof RESET, Partial< ValuePayload > >;\nexport type InvalidateAction = Action< typeof INVALIDATE, { error: unknown } >;\n\nexport type ChangeEventAction = ChangeAction | ResetAction | CommitAction;\n\nexport type DragEventAction = DragStartAction | DragEndAction | DragAction;\n\nexport type KeyEventAction = PressDownAction | PressUpAction | PressEnterAction;\n\nexport type InputAction =\n\t| ChangeEventAction\n\t| KeyEventAction\n\t| DragEventAction\n\t| InvalidateAction;\n"]}

package/build/input-control/reducer/reducer.js

@@ -44,13 +44,13 @@ function mergeInitialState() {
   };
 }
 /**
- * Creates a reducer that opens the channel for external state subscription
- * and modification.
+ * Creates the base reducer which may be coupled to a specializing reducer.
+ * As its final step, for all actions other than CONTROL, the base reducer
+ * passes the state and action on through the specializing reducer. The
+ * exception for CONTROL actions is because they represent controlled updates
+ * from props and no case has yet presented for their specialization.
  *
- * This technique uses the "stateReducer" design pattern:
- * https://kentcdodds.com/blog/the-state-reducer-pattern/
- *
- * @param  composedStateReducers A custom reducer that can subscribe and modify state.
+ * @param  composedStateReducers A reducer to specialize state changes.
  * @return The reducer.
  */
 
@@ -61,9 +61,20 @@ function inputControlStateReducer(composedStateReducers) {
     };
 
     switch (action.type) {
+      /*
+       * Controlled updates
+       */
+      case actions.CONTROL:
+        nextState.value = action.payload.value;
+        nextState.isDirty = false;
+        nextState._event = undefined; // Returns immediately to avoid invoking additional reducers.
+
+        return nextState;
+
       /**
        * Keyboard events
        */
+
       case actions.PRESS_UP:
         nextState.isDirty = false;
         break;
@@ -203,14 +214,17 @@ function useInputControlStateReducer() {
   const refProps = (0, _element.useRef)({
     value: initialState.value,
     onChangeHandler
-  });
+  }); // Freshens refs to props and state so that subsequent effects have access
+  // to their latest values without their changes causing effect runs.
+
   (0, _element.useLayoutEffect)(() => {
     currentState.current = state;
     refProps.current = {
       value: initialState.value,
       onChangeHandler
     };
-  });
+  }); // Propagates the latest state through onChange.
+
   (0, _element.useLayoutEffect)(() => {
     if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) {
       var _state$value;
@@ -219,13 +233,16 @@ function useInputControlStateReducer() {
         event: currentState.current._event
       });
     }
-  }, [state.value, state.isDirty]);
+  }, [state.value, state.isDirty]); // Updates the state from props.
+
   (0, _element.useLayoutEffect)(() => {
     if (initialState.value !== currentState.current.value && !currentState.current.isDirty) {
+      var _initialState$value;
+
       dispatch({
-        type: actions.RESET,
+        type: actions.CONTROL,
         payload: {
-          value: initialState.value
+          value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ''
         }
       });
     }

package/build/input-control/reducer/reducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/reducer/reducer.ts"],"names":["mergeInitialState","initialState","initialInputControlState","value","initialValue","inputControlStateReducer","composedStateReducers","state","action","nextState","type","actions","PRESS_UP","isDirty","PRESS_DOWN","DRAG_START","isDragging","DRAG_END","CHANGE","error","payload","isPressEnterToChange","COMMIT","RESET","INVALIDATE","_event","event","useInputControlStateReducer","stateReducer","initialStateReducer","onChangeHandler","dispatch","createChangeEvent","nextValue","createKeyEvent","createDragEvent","change","invalidate","reset","commit","dragStart","drag","DRAG","dragEnd","pressUp","pressDown","pressEnter","PRESS_ENTER","currentState","refProps","current","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { SyntheticEvent, ChangeEvent, PointerEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useReducer, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tInputState,\n\tStateReducer,\n\tinitialInputControlState,\n\tinitialStateReducer,\n} from './state';\nimport * as actions from './actions';\nimport type { InputChangeCallback } from '../types';\n\n/**\n * Prepares initialState for the reducer.\n *\n * @param  initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(\n\tinitialState: Partial< InputState > = initialInputControlState\n): InputState {\n\tconst { value } = initialState;\n\n\treturn {\n\t\t...initialInputControlState,\n\t\t...initialState,\n\t\tinitialValue: value,\n\t} as InputState;\n}\n\n/**\n * Creates a reducer that opens the channel for external state subscription\n * and modification.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param  composedStateReducers A custom reducer that can subscribe and modify state.\n * @return The reducer.\n */\nfunction inputControlStateReducer(\n\tcomposedStateReducers: StateReducer\n): StateReducer {\n\treturn ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\tswitch ( action.type ) {\n\t\t\t/**\n\t\t\t * Keyboard events\n\t\t\t */\n\t\t\tcase actions.PRESS_UP:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.PRESS_DOWN:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Drag events\n\t\t\t */\n\t\t\tcase actions.DRAG_START:\n\t\t\t\tnextState.isDragging = true;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.DRAG_END:\n\t\t\t\tnextState.isDragging = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Input events\n\t\t\t */\n\t\t\tcase actions.CHANGE:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.value = action.payload.value;\n\n\t\t\t\tif ( state.isPressEnterToChange ) {\n\t\t\t\t\tnextState.isDirty = true;\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\n\t\t\tcase actions.COMMIT:\n\t\t\t\tnextState.value = action.payload.value;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.RESET:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tnextState.value = action.payload.value || state.initialValue;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Validation\n\t\t\t */\n\t\t\tcase actions.INVALIDATE:\n\t\t\t\tnextState.error = action.payload.error;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tnextState._event = action.payload.event;\n\n\t\t/**\n\t\t * Send the nextState + action to the composedReducers via\n\t\t * this \"bridge\" mechanism. This allows external stateReducers\n\t\t * to hook into actions, and modify state if needed.\n\t\t */\n\t\treturn composedStateReducers( nextState, action );\n\t};\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param  stateReducer    An external state reducer.\n * @param  initialState    The initial state for the reducer.\n * @param  onChangeHandler A handler for the onChange event.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(\n\tstateReducer: StateReducer = initialStateReducer,\n\tinitialState: Partial< InputState > = initialInputControlState,\n\tonChangeHandler: InputChangeCallback\n) {\n\tconst [ state, dispatch ] = useReducer< StateReducer >(\n\t\tinputControlStateReducer( stateReducer ),\n\t\tmergeInitialState( initialState )\n\t);\n\n\tconst createChangeEvent =\n\t\t( type: actions.ChangeEventAction[ 'type' ] ) =>\n\t\t(\n\t\t\tnextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],\n\t\t\tevent: actions.ChangeEventAction[ 'payload' ][ 'event' ]\n\t\t) => {\n\t\t\tdispatch( {\n\t\t\t\ttype,\n\t\t\t\tpayload: { value: nextValue, event },\n\t\t\t} as actions.InputAction );\n\t\t};\n\n\tconst createKeyEvent =\n\t\t( type: actions.KeyEventAction[ 'type' ] ) =>\n\t\t( event: actions.KeyEventAction[ 'payload' ][ 'event' ] ) => {\n\t\t\tdispatch( { type, payload: { event } } );\n\t\t};\n\n\tconst createDragEvent =\n\t\t( type: actions.DragEventAction[ 'type' ] ) =>\n\t\t( payload: actions.DragEventAction[ 'payload' ] ) => {\n\t\t\tdispatch( { type, payload } );\n\t\t};\n\n\t/**\n\t * Actions for the reducer\n\t */\n\tconst change = createChangeEvent( actions.CHANGE );\n\tconst invalidate = ( error: unknown, event: SyntheticEvent ) =>\n\t\tdispatch( { type: actions.INVALIDATE, payload: { error, event } } );\n\tconst reset = createChangeEvent( actions.RESET );\n\tconst commit = createChangeEvent( actions.COMMIT );\n\n\tconst dragStart = createDragEvent( actions.DRAG_START );\n\tconst drag = createDragEvent( actions.DRAG );\n\tconst dragEnd = createDragEvent( actions.DRAG_END );\n\n\tconst pressUp = createKeyEvent( actions.PRESS_UP );\n\tconst pressDown = createKeyEvent( actions.PRESS_DOWN );\n\tconst pressEnter = createKeyEvent( actions.PRESS_ENTER );\n\n\tconst currentState = useRef( state );\n\tconst refProps = useRef( { value: initialState.value, onChangeHandler } );\n\tuseLayoutEffect( () => {\n\t\tcurrentState.current = state;\n\t\trefProps.current = { value: initialState.value, onChangeHandler };\n\t} );\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tcurrentState.current._event !== undefined &&\n\t\t\tstate.value !== refProps.current.value &&\n\t\t\t! state.isDirty\n\t\t) {\n\t\t\trefProps.current.onChangeHandler( state.value ?? '', {\n\t\t\t\tevent: currentState.current._event as\n\t\t\t\t\t| ChangeEvent< HTMLInputElement >\n\t\t\t\t\t| PointerEvent< HTMLInputElement >,\n\t\t\t} );\n\t\t}\n\t}, [ state.value, state.isDirty ] );\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tinitialState.value !== currentState.current.value &&\n\t\t\t! currentState.current.isDirty\n\t\t) {\n\t\t\tdispatch( {\n\t\t\t\ttype: actions.RESET,\n\t\t\t\tpayload: { value: initialState.value },\n\t\t\t} );\n\t\t}\n\t}, [ initialState.value ] );\n\n\treturn {\n\t\tchange,\n\t\tcommit,\n\t\tdispatch,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t\tstate,\n\t} as const;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/reducer/reducer.ts"],"names":["mergeInitialState","initialState","initialInputControlState","value","initialValue","inputControlStateReducer","composedStateReducers","state","action","nextState","type","actions","CONTROL","payload","isDirty","_event","undefined","PRESS_UP","PRESS_DOWN","DRAG_START","isDragging","DRAG_END","CHANGE","error","isPressEnterToChange","COMMIT","RESET","INVALIDATE","event","useInputControlStateReducer","stateReducer","initialStateReducer","onChangeHandler","dispatch","createChangeEvent","nextValue","createKeyEvent","createDragEvent","change","invalidate","reset","commit","dragStart","drag","DRAG","dragEnd","pressUp","pressDown","pressEnter","PRESS_ENTER","currentState","refProps","current"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { SyntheticEvent, ChangeEvent, PointerEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useReducer, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tInputState,\n\tStateReducer,\n\tinitialInputControlState,\n\tinitialStateReducer,\n} from './state';\nimport * as actions from './actions';\nimport type { InputChangeCallback } from '../types';\n\n/**\n * Prepares initialState for the reducer.\n *\n * @param  initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(\n\tinitialState: Partial< InputState > = initialInputControlState\n): InputState {\n\tconst { value } = initialState;\n\n\treturn {\n\t\t...initialInputControlState,\n\t\t...initialState,\n\t\tinitialValue: value,\n\t} as InputState;\n}\n\n/**\n * Creates the base reducer which may be coupled to a specializing reducer.\n * As its final step, for all actions other than CONTROL, the base reducer\n * passes the state and action on through the specializing reducer. The\n * exception for CONTROL actions is because they represent controlled updates\n * from props and no case has yet presented for their specialization.\n *\n * @param  composedStateReducers A reducer to specialize state changes.\n * @return The reducer.\n */\nfunction inputControlStateReducer(\n\tcomposedStateReducers: StateReducer\n): StateReducer< actions.ControlAction > {\n\treturn ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\tswitch ( action.type ) {\n\t\t\t/*\n\t\t\t * Controlled updates\n\t\t\t */\n\t\t\tcase actions.CONTROL:\n\t\t\t\tnextState.value = action.payload.value;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tnextState._event = undefined;\n\t\t\t\t// Returns immediately to avoid invoking additional reducers.\n\t\t\t\treturn nextState;\n\n\t\t\t/**\n\t\t\t * Keyboard events\n\t\t\t */\n\t\t\tcase actions.PRESS_UP:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.PRESS_DOWN:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Drag events\n\t\t\t */\n\t\t\tcase actions.DRAG_START:\n\t\t\t\tnextState.isDragging = true;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.DRAG_END:\n\t\t\t\tnextState.isDragging = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Input events\n\t\t\t */\n\t\t\tcase actions.CHANGE:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.value = action.payload.value;\n\n\t\t\t\tif ( state.isPressEnterToChange ) {\n\t\t\t\t\tnextState.isDirty = true;\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\n\t\t\tcase actions.COMMIT:\n\t\t\t\tnextState.value = action.payload.value;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.RESET:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tnextState.value = action.payload.value || state.initialValue;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Validation\n\t\t\t */\n\t\t\tcase actions.INVALIDATE:\n\t\t\t\tnextState.error = action.payload.error;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tnextState._event = action.payload.event;\n\n\t\t/**\n\t\t * Send the nextState + action to the composedReducers via\n\t\t * this \"bridge\" mechanism. This allows external stateReducers\n\t\t * to hook into actions, and modify state if needed.\n\t\t */\n\t\treturn composedStateReducers( nextState, action );\n\t};\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param  stateReducer    An external state reducer.\n * @param  initialState    The initial state for the reducer.\n * @param  onChangeHandler A handler for the onChange event.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(\n\tstateReducer: StateReducer = initialStateReducer,\n\tinitialState: Partial< InputState > = initialInputControlState,\n\tonChangeHandler: InputChangeCallback\n) {\n\tconst [ state, dispatch ] = useReducer(\n\t\tinputControlStateReducer( stateReducer ),\n\t\tmergeInitialState( initialState )\n\t);\n\n\tconst createChangeEvent =\n\t\t( type: actions.ChangeEventAction[ 'type' ] ) =>\n\t\t(\n\t\t\tnextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],\n\t\t\tevent: actions.ChangeEventAction[ 'payload' ][ 'event' ]\n\t\t) => {\n\t\t\tdispatch( {\n\t\t\t\ttype,\n\t\t\t\tpayload: { value: nextValue, event },\n\t\t\t} as actions.InputAction );\n\t\t};\n\n\tconst createKeyEvent =\n\t\t( type: actions.KeyEventAction[ 'type' ] ) =>\n\t\t( event: actions.KeyEventAction[ 'payload' ][ 'event' ] ) => {\n\t\t\tdispatch( { type, payload: { event } } );\n\t\t};\n\n\tconst createDragEvent =\n\t\t( type: actions.DragEventAction[ 'type' ] ) =>\n\t\t( payload: actions.DragEventAction[ 'payload' ] ) => {\n\t\t\tdispatch( { type, payload } );\n\t\t};\n\n\t/**\n\t * Actions for the reducer\n\t */\n\tconst change = createChangeEvent( actions.CHANGE );\n\tconst invalidate = ( error: unknown, event: SyntheticEvent ) =>\n\t\tdispatch( { type: actions.INVALIDATE, payload: { error, event } } );\n\tconst reset = createChangeEvent( actions.RESET );\n\tconst commit = createChangeEvent( actions.COMMIT );\n\n\tconst dragStart = createDragEvent( actions.DRAG_START );\n\tconst drag = createDragEvent( actions.DRAG );\n\tconst dragEnd = createDragEvent( actions.DRAG_END );\n\n\tconst pressUp = createKeyEvent( actions.PRESS_UP );\n\tconst pressDown = createKeyEvent( actions.PRESS_DOWN );\n\tconst pressEnter = createKeyEvent( actions.PRESS_ENTER );\n\n\tconst currentState = useRef( state );\n\tconst refProps = useRef( { value: initialState.value, onChangeHandler } );\n\n\t// Freshens refs to props and state so that subsequent effects have access\n\t// to their latest values without their changes causing effect runs.\n\tuseLayoutEffect( () => {\n\t\tcurrentState.current = state;\n\t\trefProps.current = { value: initialState.value, onChangeHandler };\n\t} );\n\n\t// Propagates the latest state through onChange.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tcurrentState.current._event !== undefined &&\n\t\t\tstate.value !== refProps.current.value &&\n\t\t\t! state.isDirty\n\t\t) {\n\t\t\trefProps.current.onChangeHandler( state.value ?? '', {\n\t\t\t\tevent: currentState.current._event as\n\t\t\t\t\t| ChangeEvent< HTMLInputElement >\n\t\t\t\t\t| PointerEvent< HTMLInputElement >,\n\t\t\t} );\n\t\t}\n\t}, [ state.value, state.isDirty ] );\n\n\t// Updates the state from props.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tinitialState.value !== currentState.current.value &&\n\t\t\t! currentState.current.isDirty\n\t\t) {\n\t\t\tdispatch( {\n\t\t\t\ttype: actions.CONTROL,\n\t\t\t\tpayload: { value: initialState.value ?? '' },\n\t\t\t} );\n\t\t}\n\t}, [ initialState.value ] );\n\n\treturn {\n\t\tchange,\n\t\tcommit,\n\t\tdispatch,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t\tstate,\n\t} as const;\n}\n"]}

package/build/input-control/reducer/state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/reducer/state.ts"],"names":["initialStateReducer","state","initialInputControlState","error","initialValue","isDirty","isDragEnabled","isDragging","isPressEnterToChange","value"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAgBO,MAAMA,mBAAiC,GAAKC,KAAF,IAAyBA,KAAnE;;;AAEA,MAAMC,wBAAoC,GAAG;AACnDC,EAAAA,KAAK,EAAE,IAD4C;AAEnDC,EAAAA,YAAY,EAAE,EAFqC;AAGnDC,EAAAA,OAAO,EAAE,KAH0C;AAInDC,EAAAA,aAAa,EAAE,KAJoC;AAKnDC,EAAAA,UAAU,EAAE,KALuC;AAMnDC,EAAAA,oBAAoB,EAAE,KAN6B;AAOnDC,EAAAA,KAAK,EAAE;AAP4C,CAA7C","sourcesContent":["/**\n * External dependencies\n */\nimport type { Reducer, SyntheticEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { InputAction } from './actions';\n\nexport interface InputState {\n\t_event?: SyntheticEvent;\n\terror: unknown;\n\tinitialValue?: string;\n\tisDirty: boolean;\n\tisDragEnabled: boolean;\n\tisDragging: boolean;\n\tisPressEnterToChange: boolean;\n\tvalue?: string;\n}\n\nexport type StateReducer = Reducer< InputState, InputAction >;\n\nexport const initialStateReducer: StateReducer = ( state: InputState ) => state;\n\nexport const initialInputControlState: InputState = {\n\terror: null,\n\tinitialValue: '',\n\tisDirty: false,\n\tisDragEnabled: false,\n\tisDragging: false,\n\tisPressEnterToChange: false,\n\tvalue: '',\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/reducer/state.ts"],"names":["initialStateReducer","state","initialInputControlState","error","initialValue","isDirty","isDragEnabled","isDragging","isPressEnterToChange","value"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAqBO,MAAMA,mBAAiC,GAAKC,KAAF,IAAyBA,KAAnE;;;AAEA,MAAMC,wBAAoC,GAAG;AACnDC,EAAAA,KAAK,EAAE,IAD4C;AAEnDC,EAAAA,YAAY,EAAE,EAFqC;AAGnDC,EAAAA,OAAO,EAAE,KAH0C;AAInDC,EAAAA,aAAa,EAAE,KAJoC;AAKnDC,EAAAA,UAAU,EAAE,KALuC;AAMnDC,EAAAA,oBAAoB,EAAE,KAN6B;AAOnDC,EAAAA,KAAK,EAAE;AAP4C,CAA7C","sourcesContent":["/**\n * External dependencies\n */\nimport type { Reducer, SyntheticEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { Action, InputAction } from './actions';\n\nexport interface InputState {\n\t_event?: SyntheticEvent;\n\terror: unknown;\n\tinitialValue?: string;\n\tisDirty: boolean;\n\tisDragEnabled: boolean;\n\tisDragging: boolean;\n\tisPressEnterToChange: boolean;\n\tvalue?: string;\n}\n\nexport type StateReducer< SpecializedAction = {} > = Reducer<\n\tInputState,\n\tSpecializedAction extends Action\n\t\t? InputAction | SpecializedAction\n\t\t: InputAction\n>;\n\nexport const initialStateReducer: StateReducer = ( state: InputState ) => state;\n\nexport const initialInputControlState: InputState = {\n\terror: null,\n\tinitialValue: '',\n\tisDirty: false,\n\tisDragEnabled: false,\n\tisDragging: false,\n\tisPressEnterToChange: false,\n\tvalue: '',\n};\n"]}