@wordpress/components 37.0.0 → 38.0.0

package/build-module/tools-panel/tools-panel-item/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/tools-panel/tools-panel-item/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerResetAllFilter,\n    deregisterResetAllFilter,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // hasValue is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // resetAllFilter is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);\n  const previousPanelId = usePrevious(currentPanelId);\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // Registering the panel item allows the panel to include it in its\n  // automatically generated menu and determine its initial checked status.\n  //\n  // This is performed in a layout effect to ensure that the panel item\n  // is registered before it is rendered preventing a rendering glitch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (hasMatchingPanel && previousPanelId !== null) {\n      registerPanelItem({\n        hasValue: hasValueCallback,\n        isShownByDefault,\n        label,\n        panelId\n      });\n    }\n    return () => {\n      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {\n        deregisterPanelItem(label);\n      }\n    };\n  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);\n  useEffect(() => {\n    if (hasMatchingPanel) {\n      registerResetAllFilter(resetAllFilterCallback);\n    }\n    return () => {\n      if (hasMatchingPanel) {\n        deregisterResetAllFilter(resetAllFilterCallback);\n      }\n    };\n  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);\n\n  // Note: `label` is used as a key when building menu item state in\n  // `ToolsPanel`.\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const wasMenuItemChecked = usePrevious(isMenuItemChecked);\n  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;\n  const isValueSet = hasValue();\n  // Notify the panel when an item's value has changed except for optional\n  // items without value because the item should not cause itself to hide.\n  useEffect(() => {\n    if (!isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label, menuGroup);\n  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);\n\n  // Determine if the panel item's corresponding menu is being toggled and\n  // trigger appropriate callback if it is.\n  useEffect(() => {\n    // We check whether this item is currently registered as items rendered\n    // via fills can persist through the parent panel being remounted.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);\n\n  // The item is shown if it is a default control regardless of whether it\n  // has a value. Optional items are shown when they are checked or have\n  // a value.\n  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;\n  const cx = useCx();\n  const classes = useMemo(() => {\n    const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n    const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass;\n    const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass;\n    return cx(styles.ToolsPanelItem, shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder, !shouldApplyPlaceholderStyles && className, firstItemStyle, lastItemStyle);\n  }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\n    className: classes\n  };\n}"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,aAAa,WAAW,iBAAiB,eAAe;AAKjE,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACtB,IAAM,OAAO,MAAM;AAAC;AACb,SAAS,kBAAkB,OAAO;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,gBAAgB;AAC5C,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,8BAA8B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB;AAIzB,QAAM,mBAAmB,YAAY,UAAU,CAAC,OAAO,CAAC;AAGxD,QAAM,yBAAyB,YAAY,gBAAgB,CAAC,OAAO,CAAC;AACpE,QAAM,kBAAkB,YAAY,cAAc;AAClD,QAAM,mBAAmB,mBAAmB,WAAW,mBAAmB;AAQ1E,kBAAgB,MAAM;AACpB,QAAI,oBAAoB,oBAAoB,MAAM;AAChD,wBAAkB;AAAA,QAChB,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO,MAAM;AACX,UAAI,oBAAoB,QAAQ,CAAC,CAAC,kBAAkB,mBAAmB,SAAS;AAC9E,4BAAoB,KAAK;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,kBAAkB,kBAAkB,OAAO,kBAAkB,SAAS,iBAAiB,mBAAmB,mBAAmB,CAAC;AAClJ,YAAU,MAAM;AACd,QAAI,kBAAkB;AACpB,6BAAuB,sBAAsB;AAAA,IAC/C;AACA,WAAO,MAAM;AACX,UAAI,kBAAkB;AACpB,iCAAyB,sBAAsB;AAAA,MACjD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,wBAAwB,0BAA0B,wBAAwB,gBAAgB,CAAC;AAI/F,QAAM,YAAY,mBAAmB,YAAY;AACjD,QAAM,oBAAoB,YAAY,SAAS,IAAI,KAAK;AACxD,QAAM,qBAAqB,YAAY,iBAAiB;AACxD,QAAM,eAAe,YAAY,SAAS,IAAI,KAAK,MAAM;AACzD,QAAM,aAAa,SAAS;AAG5B,YAAU,MAAM;AACd,QAAI,CAAC,oBAAoB,CAAC,YAAY;AACpC;AAAA,IACF;AACA,0BAAsB,YAAY,OAAO,SAAS;AAAA,EACpD,GAAG,CAAC,YAAY,WAAW,OAAO,uBAAuB,gBAAgB,CAAC;AAI1E,YAAU,MAAM;AAId,QAAI,CAAC,gBAAgB,eAAe,CAAC,kBAAkB;AACrD;AAAA,IACF;AACA,QAAI,qBAAqB,CAAC,cAAc,CAAC,oBAAoB;AAC3D,iBAAW;AAAA,IACb;AACA,QAAI,CAAC,qBAAqB,cAAc,oBAAoB;AAC1D,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,kBAAkB,mBAAmB,cAAc,aAAa,YAAY,oBAAoB,UAAU,UAAU,CAAC;AAKzH,QAAM,UAAU,mBAAmB,YAAY,SAAS,IAAI,KAAK,MAAM,SAAY;AACnF,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,UAAM,+BAA+B,2BAA2B,CAAC;AACjE,UAAM,iBAAiB,uBAAuB,SAAS;AACvD,UAAM,gBAAgB,sBAAsB,SAAS;AACrD,WAAO,GAAU,uBAAgB,gCAAuC,kCAA2B,CAAC,gCAAgC,WAAW,gBAAgB,aAAa;AAAA,EAC9K,GAAG,CAAC,SAAS,yBAAyB,WAAW,IAAI,oBAAoB,mBAAmB,qCAAqC,oCAAoC,KAAK,CAAC;AAC3K,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb;AACF;",
+  "sources": ["../../../src/tools-panel/tools-panel-item/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from '../style.module.scss';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerResetAllFilter,\n    deregisterResetAllFilter,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // hasValue is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // resetAllFilter is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);\n  const previousPanelId = usePrevious(currentPanelId);\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // Registering the panel item allows the panel to include it in its\n  // automatically generated menu and determine its initial checked status.\n  //\n  // This is performed in a layout effect to ensure that the panel item\n  // is registered before it is rendered preventing a rendering glitch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (hasMatchingPanel && previousPanelId !== null) {\n      registerPanelItem({\n        hasValue: hasValueCallback,\n        isShownByDefault,\n        label,\n        panelId\n      });\n    }\n    return () => {\n      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {\n        deregisterPanelItem(label);\n      }\n    };\n  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);\n  useEffect(() => {\n    if (hasMatchingPanel) {\n      registerResetAllFilter(resetAllFilterCallback);\n    }\n    return () => {\n      if (hasMatchingPanel) {\n        deregisterResetAllFilter(resetAllFilterCallback);\n      }\n    };\n  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);\n\n  // Note: `label` is used as a key when building menu item state in\n  // `ToolsPanel`.\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const wasMenuItemChecked = usePrevious(isMenuItemChecked);\n  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;\n  const isValueSet = hasValue();\n  // Notify the panel when an item's value has changed except for optional\n  // items without value because the item should not cause itself to hide.\n  useEffect(() => {\n    if (!isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label, menuGroup);\n  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);\n\n  // Determine if the panel item's corresponding menu is being toggled and\n  // trigger appropriate callback if it is.\n  useEffect(() => {\n    // We check whether this item is currently registered as items rendered\n    // via fills can persist through the parent panel being remounted.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);\n\n  // The item is shown if it is a default control regardless of whether it\n  // has a value. Optional items are shown when they are checked or have\n  // a value.\n  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;\n  const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n  const classes = clsx(styles['tools-panel-item'], shouldApplyPlaceholderStyles && styles['tools-panel-item-placeholder'], !shouldApplyPlaceholderStyles && className, firstDisplayedItem === label && __experimentalFirstVisibleItemClass, lastDisplayedItem === label && __experimentalLastVisibleItemClass);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\n    className: classes\n  };\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"29b739f451\", \"._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}\");\n}\nexport default {\"tools-panel\":\"_62d714739f4dc308__tools-panel\",\"tools-panel-with-inner-wrapper\":\"_40db7f4f897b683d__tools-panel-with-inner-wrapper\",\"tools-panel-hidden-inner-wrapper\":\"_95a15674966f30a3__tools-panel-hidden-inner-wrapper\",\"tools-panel-header\":\"_322a049b9b7d8674__tools-panel-header\",\"tools-panel-heading\":\"b92a382d3b30104d__tools-panel-heading\",\"tools-panel-item\":\"_8005d68fffa9db91__tools-panel-item\",\"tools-panel-item-placeholder\":\"_4f55e1a6e373746e__tools-panel-item-placeholder\",\"dropdown-menu\":\"d40032517bff9e12__dropdown-menu\",\"reset-label\":\"f135b96aa96ca6bb__reset-label\",\"default-controls-item\":\"_69b138dfa5570d9c__default-controls-item\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/validated-form-controls/control-with-error.mjs

@@ -46,6 +46,9 @@ function UnforwardedControlWithError({
     const validityTarget = getValidityTarget();
     const suppressNativePopover = (event) => {
       event.preventDefault();
+      if (!event.isTrusted) {
+        return;
+      }
       const target = event.target;
       const firstErrorInForm = Array.from(target.form?.elements ?? []).find((el) => !el.validity.valid);
       if (!target.form || firstErrorInForm === target) {

package/build-module/validated-form-controls/control-with-error.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/validated-form-controls/control-with-error.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useId, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  let suffix;\n  if (required && !markWhenOptional) {\n    suffix = `(${__('Required')})`;\n  } else if (!required && markWhenOptional) {\n    suffix = `(${__('Optional')})`;\n  }\n  if (!suffix) {\n    return label;\n  }\n  if (typeof label === 'string') {\n    return `${label} ${suffix}`;\n  }\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [label, \" \", suffix]\n  });\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          validityTarget?.setCustomValidity(customValidity.message ?? '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const messageId = useId();\n  const message = (() => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  })();\n  const visibleMessage = showMessage ? message : null;\n\n  // Imperatively manage `aria-describedby` on the validity target so we\n  // merge with any value the child control sets internally (e.g. from a\n  // `help` prop), rather than competing with it at the props level.\n  useEffect(() => {\n    const target = getValidityTarget();\n    if (!target) {\n      return;\n    }\n    function setDescribedBy(el, shouldAdd) {\n      const ids = (el.getAttribute('aria-describedby') ?? '').split(' ').filter(id => id && id !== messageId);\n      if (shouldAdd) {\n        ids.push(messageId);\n      }\n      if (ids.length) {\n        el.setAttribute('aria-describedby', ids.join(' '));\n      } else {\n        el.removeAttribute('aria-describedby');\n      }\n    }\n    setDescribedBy(target, !!visibleMessage);\n    return () => setDescribedBy(target, false);\n  }, [visibleMessage, messageId, getValidityTarget]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), visibleMessage]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useId, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  let suffix;\n  if (required && !markWhenOptional) {\n    suffix = `(${__('Required')})`;\n  } else if (!required && markWhenOptional) {\n    suffix = `(${__('Optional')})`;\n  }\n  if (!suffix) {\n    return label;\n  }\n  if (typeof label === 'string') {\n    return `${label} ${suffix}`;\n  }\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [label, \" \", suffix]\n  });\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      event.preventDefault();\n\n      // Only trusted `invalid` events (a form submission or a\n      // `reportValidity()` call) mirror the native focus behavior.\n      // Consumers may dispatch a synthetic `invalid` event to reveal\n      // this control's error message without disturbing the user's\n      // place in the form, so it must not move focus.\n      if (!event.isTrusted) {\n        return;\n      }\n      const target = event.target;\n      const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          validityTarget?.setCustomValidity(customValidity.message ?? '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const messageId = useId();\n  const message = (() => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  })();\n  const visibleMessage = showMessage ? message : null;\n\n  // Imperatively manage `aria-describedby` on the validity target so we\n  // merge with any value the child control sets internally (e.g. from a\n  // `help` prop), rather than competing with it at the props level.\n  useEffect(() => {\n    const target = getValidityTarget();\n    if (!target) {\n      return;\n    }\n    function setDescribedBy(el, shouldAdd) {\n      const ids = (el.getAttribute('aria-describedby') ?? '').split(' ').filter(id => id && id !== messageId);\n      if (shouldAdd) {\n        ids.push(messageId);\n      }\n      if (ids.length) {\n        el.setAttribute('aria-describedby', ids.join(' '));\n      } else {\n        el.removeAttribute('aria-describedby');\n      }\n    }\n    setDescribedBy(target, !!visibleMessage);\n    return () => setDescribedBy(target, false);\n  }, [visibleMessage, messageId, getValidityTarget]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), visibleMessage]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
+  "mappings": "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",
   "names": []
 }

package/build-style/style-rtl.css

@@ -265,7 +265,8 @@
   box-shadow: none;
 }
 .components-button:focus:not(:active) {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
   outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 }
 .components-button {
@@ -1292,8 +1293,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-combobox-control__suggestions-container:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container::-moz-placeholder {
@@ -1310,8 +1311,8 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 0;
 }
 .components-combobox-control__suggestions-container:focus-within {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container .components-spinner {
@@ -1646,15 +1647,6 @@ input.components-combobox-control__input[type=text]:focus {
   color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
   text-decoration: none;
 }
-@media not (prefers-reduced-motion) {
-  .components-external-link {
-    transition: outline 0.1s ease-out;
-  }
-}
-.components-external-link {
-  outline: 0 solid transparent;
-  outline-offset: 1px;
-}
 .components-external-link:visited {
   color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 }
@@ -1662,10 +1654,14 @@ input.components-combobox-control__input[type=text]:focus {
   color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
 }
 .components-external-link:focus {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   box-shadow: none;
   border-radius: 0;
 }
+.components-external-link:focus:not(:active) {
+  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+}
 
 .components-external-link__contents {
   text-decoration: underline;
@@ -1838,8 +1834,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-form-token-field__input-container:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container::-moz-placeholder {
@@ -1859,8 +1855,8 @@ input.components-combobox-control__input[type=text]:focus {
   cursor: default;
 }
 .components-form-token-field__input-container.is-active {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
@@ -3644,8 +3640,8 @@ body.lockscroll {
 .components-text-control__input[type=email]:focus,
 .components-text-control__input[type=month]:focus,
 .components-text-control__input[type=number]:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
@@ -3943,7 +3939,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   border-color: #cc1818;
 }
 .components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
 }
 
 .components-validated-control__wrapper-with-error-delegate {
@@ -3957,11 +3953,11 @@ div.components-toolbar > div + div.has-left-divider::before {
   --wp-components-color-accent: #cc1818;
 }
 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
   border-color: #cc1818;
 }
 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox] {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
   border-color: #cc1818;
 }
 

package/build-style/style.css

@@ -265,7 +265,8 @@
   box-shadow: none;
 }
 .components-button:focus:not(:active) {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
   outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 }
 .components-button {
@@ -1292,8 +1293,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-combobox-control__suggestions-container:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container::-moz-placeholder {
@@ -1310,8 +1311,8 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 0;
 }
 .components-combobox-control__suggestions-container:focus-within {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container .components-spinner {
@@ -1651,15 +1652,6 @@ input.components-combobox-control__input[type=text]:focus {
   color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
   text-decoration: none;
 }
-@media not (prefers-reduced-motion) {
-  .components-external-link {
-    transition: outline 0.1s ease-out;
-  }
-}
-.components-external-link {
-  outline: 0 solid transparent;
-  outline-offset: 1px;
-}
 .components-external-link:visited {
   color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 }
@@ -1667,10 +1659,14 @@ input.components-combobox-control__input[type=text]:focus {
   color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
 }
 .components-external-link:focus {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   box-shadow: none;
   border-radius: 0;
 }
+.components-external-link:focus:not(:active) {
+  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+}
 
 .components-external-link__contents {
   text-decoration: underline;
@@ -1843,8 +1839,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-form-token-field__input-container:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container::-moz-placeholder {
@@ -1864,8 +1860,8 @@ input.components-combobox-control__input[type=text]:focus {
   cursor: default;
 }
 .components-form-token-field__input-container.is-active {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
@@ -3656,8 +3652,8 @@ body.lockscroll {
 .components-text-control__input[type=email]:focus,
 .components-text-control__input[type=month]:focus,
 .components-text-control__input[type=number]:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
@@ -3956,7 +3952,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   border-color: #cc1818;
 }
 .components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
 }
 
 .components-validated-control__wrapper-with-error-delegate {
@@ -3970,11 +3966,11 @@ div.components-toolbar > div + div.has-left-divider::before {
   --wp-components-color-accent: #cc1818;
 }
 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
   border-color: #cc1818;
 }
 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox] {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
   border-color: #cc1818;
 }
 

package/build-types/autocomplete/index.d.ts

@@ -13,18 +13,22 @@ export declare function useLastDifferentValue(value: UseAutocompleteProps['recor
     start: NonNullable<import("@wordpress/rich-text").RichTextValue['start']>;
     end: NonNullable<import("@wordpress/rich-text").RichTextValue['end']>;
 };
-export declare function useAutocompleteProps(options: UseAutocompleteProps): {
+export declare function useAutocompleteProps(options: Omit<UseAutocompleteProps, 'contentRef'>): {
     ref: import("react").RefCallback<HTMLElement>;
     children?: undefined;
     'aria-autocomplete'?: undefined;
+    'aria-haspopup'?: undefined;
+    'aria-controls'?: undefined;
     'aria-owns'?: undefined;
     'aria-activedescendant'?: undefined;
 } | {
     ref: import("react").RefCallback<HTMLElement>;
     children: false | import("react").JSX.Element;
-    'aria-autocomplete': string | undefined;
+    'aria-autocomplete': "list" | undefined;
+    'aria-haspopup': "listbox" | undefined;
+    'aria-controls': string | undefined;
     'aria-owns': string | undefined;
-    'aria-activedescendant': string | null;
+    'aria-activedescendant': string | undefined;
 };
 export default function Autocomplete({ children, isSelected, ...options }: AutocompleteProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/build-types/autocomplete/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAEX,iBAAiB,EAMjB,oBAAoB,EACpB,MAAM,SAAS,CAAC;AAgEjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;;;EA2OtB;AAaD;;;GAGG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,oBAAoB,CAAE,QAAQ,CAAE;;;EAmBvC;AAED,wBAAgB,oBAAoB,CAAE,OAAO,EAAE,oBAAoB;;;;;;;;;;;;EAiDlE;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,+BAQnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAEX,iBAAiB,EAMjB,oBAAoB,EACpB,MAAM,SAAS,CAAC;AAgEjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;;;EA2OtB;AAaD;;;GAGG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,oBAAoB,CAAE,QAAQ,CAAE;;;EAmBvC;AAID,wBAAgB,oBAAoB,CACnC,OAAO,EAAE,IAAI,CAAE,oBAAoB,EAAE,YAAY,CAAE;;;;;;;;;;;;;;;;EA2DnD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,+BAQnB"}

package/build-types/border-box-control/border-box-control/component.d.ts

@@ -40,13 +40,11 @@ import type { LabelProps, BorderControlProps } from '../../border-control/types'
 export declare const BorderBoxControl: import("../../context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "__experimentalIsRenderedInSidebar" | "colors"> & {
     disableCustomColors?: boolean;
     enableAlpha?: boolean;
-} & LabelProps & Pick<BorderControlProps, "enableStyle"> & {
+} & LabelProps & Pick<BorderControlProps, "__next40pxDefaultSize" | "enableStyle" | "size"> & {
     onChange: (value: import("../types").AnyBorder) => void;
     popoverPlacement?: import("../../popover/types").PopoverProps['placement'];
     popoverOffset?: import("../../popover/types").PopoverProps['offset'];
     value: import("../types").AnyBorder;
-    size?: 'default' | '__unstable-large';
-    __next40pxDefaultSize?: boolean;
 } & import("react").RefAttributes<any>, false>;
 export default BorderBoxControl;
 //# sourceMappingURL=component.d.ts.map

package/build-types/border-box-control/border-box-control/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,UAAU,EACV,kBAAkB,EAClB,MAAM,4BAA4B,CAAC;AAsHpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;8CAG5B,CAAC;eAEa,gBAAgB"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,UAAU,EACV,kBAAkB,EAClB,MAAM,4BAA4B,CAAC;AAsHpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;8CAG5B,CAAC;eAEa,gBAAgB"}

package/build-types/border-box-control/stories/index.story.d.ts

@@ -8,12 +8,10 @@ export default meta;
 export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Pick<import("../../color-palette/types").ColorPaletteProps, "__experimentalIsRenderedInSidebar" | "colors"> & {
     disableCustomColors?: boolean;
     enableAlpha?: boolean;
-} & import("../../border-control/types").LabelProps & Pick<import("../../border-control/types").BorderControlProps, "enableStyle"> & {
+} & import("../../border-control/types").LabelProps & Pick<import("../../border-control/types").BorderControlProps, "__next40pxDefaultSize" | "enableStyle" | "size"> & {
     onChange: (value: import("../types").AnyBorder) => void;
     popoverPlacement?: import("../../popover/types").PopoverProps['placement'];
     popoverOffset?: import("../../popover/types").PopoverProps['offset'];
     value: import("../types").AnyBorder;
-    size?: 'default' | '__unstable-large';
-    __next40pxDefaultSize?: boolean;
 } & import("react").RefAttributes<any> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "__experimentalIsRenderedInSidebar" | "__next40pxDefaultSize" | "as" | "children" | "colors" | "disableCustomColors" | "enableAlpha" | "enableStyle" | "onChange" | "popoverOffset" | "popoverPlacement" | "size" | "value" | keyof import("../../border-control/types").LabelProps | keyof import("react").RefAttributes<any>>>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/border-box-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAY3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAexC,CAAC;eACa,IAAI;AAqDnB,eAAO,MAAM,OAAO;;;;;;;;;;8dAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAY3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAexC,CAAC;eACa,IAAI;AAqDnB,eAAO,MAAM,OAAO;;;;;;;;8dAAsB,CAAC"}

package/build-types/border-box-control/types.d.ts

@@ -12,7 +12,7 @@ export type Borders = {
 export type AnyBorder = Border | Borders | undefined;
 export type BorderProp = keyof Border;
 export type BorderSide = keyof Borders;
-export type BorderBoxControlProps = ColorProps & LabelProps & Pick<BorderControlProps, 'enableStyle'> & {
+export type BorderBoxControlProps = ColorProps & LabelProps & Pick<BorderControlProps, 'enableStyle' | '__next40pxDefaultSize' | 'size'> & {
     /**
      * A callback function invoked when any border value is changed. The value
      * received may be a "flat" border object, one that has properties defining
@@ -35,20 +35,6 @@ export type BorderBoxControlProps = ColorProps & LabelProps & Pick<BorderControl
      * properties but for each side; `top`, `right`, `bottom`, and `left`.
      */
     value: AnyBorder;
-    /**
-     * Size of the control.
-     *
-     * @deprecated This prop no longer has any effect.
-     * @ignore
-     */
-    size?: 'default' | '__unstable-large';
-    /**
-     * Start opting into the larger default height that will become the default size in a future version.
-     *
-     * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-     * @ignore
-     */
-    __next40pxDefaultSize?: boolean;
 };
 export type LinkedButtonProps = {
     /**

package/build-types/border-box-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/border-box-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,OAAO,GAAG;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAC7C,UAAU,GACV,IAAI,CAAE,kBAAkB,EAAE,aAAa,CAAE,GAAG;IAC3C;;;;OAIG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,SAAS,KAAM,IAAI,CAAC;IACvC;;OAEG;IACH,gBAAgB,CAAC,EAAE,YAAY,CAAE,WAAW,CAAE,CAAC;IAC/C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAE,QAAQ,CAAE,CAAC;IACzC;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACtC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAC1C,IAAI,CAAE,qBAAqB,EAAE,aAAa,CAAE,GAAG;IAC9C;;;OAGG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,UAAU,KAAM,IAAI,CAAC;IAClE;;OAEG;IACH,gBAAgB,CAAC,EAAE,YAAY,CAAE,WAAW,CAAE,CAAC;IAC/C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAE,QAAQ,CAAE,CAAC;IACzC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/border-box-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,OAAO,GAAG;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC;AACtC,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAC7C,UAAU,GACV,IAAI,CACH,kBAAkB,EAClB,aAAa,GAAG,uBAAuB,GAAG,MAAM,CAChD,GAAG;IACH;;;;OAIG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,SAAS,KAAM,IAAI,CAAC;IACvC;;OAEG;IACH,gBAAgB,CAAC,EAAE,YAAY,CAAE,WAAW,CAAE,CAAC;IAC/C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAE,QAAQ,CAAE,CAAC;IACzC;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;CACjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAC1C,IAAI,CAAE,qBAAqB,EAAE,aAAa,CAAE,GAAG;IAC9C;;;OAGG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,UAAU,KAAM,IAAI,CAAC;IAClE;;OAEG;IACH,gBAAgB,CAAC,EAAE,YAAY,CAAE,WAAW,CAAE,CAAC;IAC/C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAE,QAAQ,CAAE,CAAC;IACzC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}

package/build-types/box-control/input-control.d.ts

@@ -0,0 +1,3 @@
+import type { BoxControlInputControlProps } from './types';
+export default function BoxInputControl({ __next40pxDefaultSize, onChange, onFocus, values, selectedUnits, setSelectedUnits, sides, side, min, presets, presetKey, ...props }: BoxControlInputControlProps): import("react").JSX.Element;
+//# sourceMappingURL=input-control.d.ts.map

package/build-types/box-control/input-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../src/box-control/input-control.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,2BAA2B,EAAmB,MAAM,SAAS,CAAC;AA+C5E,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,qBAAqB,EACrB,QAAe,EACf,OAAc,EACd,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,IAAI,EACJ,GAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACR,EAAE,2BAA2B,+BAuN7B"}

package/build-types/box-control/styles/box-control-styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledUnitControl: import("@emotion/styled").StyledComponent<Pick<import("../../input-control/types").InputControlProps, "size"> & Omit<import("../../unit-control/types").UnitSelectControlProps, "size" | "unit"> & Omit<import("../../number-control/types").NumberControlProps, "__next40pxDefaultSize" | "spinControls" | "suffix" | "type"> & {
+export declare const StyledUnitControl: import("@emotion/styled").StyledComponent<Pick<import("../../input-control/types").InputControlProps, "size"> & Omit<import("../../unit-control/types").UnitSelectControlProps, "size" | "unit"> & Omit<import("../../number-control/types").NumberControlProps, "spinControls" | "suffix" | "type"> & {
     disableUnits?: boolean;
     isResetValueOnUnitChange?: boolean;
     onUnitChange?: import("../../unit-control/types").UnitControlOnChangeCallback;
@@ -6,9 +6,7 @@ export declare const StyledUnitControl: import("@emotion/styled").StyledComponen
     value?: string | number;
     onBlur?: import("react").FocusEventHandler<HTMLInputElement | HTMLSelectElement>;
     onFocus?: import("react").FocusEventHandler<HTMLInputElement | HTMLSelectElement>;
-    __shouldNotWarnDeprecated36pxSize?: boolean;
-    __next40pxDefaultSize?: boolean;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next36pxDefaultSize" | "__next40pxDefaultSize" | "__shouldNotWarnDeprecated36pxSize" | "__unstableInputWidth" | "__unstableStateReducer" | "about" | "accept" | "accessKey" | "alt" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "autoSave" | "capture" | "checked" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableUnits" | "disabled" | "dragDirection" | "dragThreshold" | "draggable" | "enterKeyHint" | "exportparts" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "help" | "hidden" | "hideHTMLArrows" | "hideLabelFromVision" | "id" | "inlist" | "inputMode" | "is" | "isDragEnabled" | "isPressEnterToChange" | "isResetValueOnUnitChange" | "isShiftStepEnabled" | "isUnitSelectTabbable" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "label" | "labelPosition" | "lang" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onUnitChange" | "onValidate" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "pattern" | "placeholder" | "prefix" | "property" | "radioGroup" | "readOnly" | "rel" | "required" | "resource" | "results" | "rev" | "role" | "security" | "shiftStep" | "size" | "slot" | "spellCheck" | "spinFactor" | "src" | "step" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unit" | "units" | "unselectable" | "value" | "vocab" | "width"> & import("react").RefAttributes<any> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next36pxDefaultSize" | "__next40pxDefaultSize" | "__unstableInputWidth" | "__unstableStateReducer" | "about" | "accept" | "accessKey" | "alt" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "autoSave" | "capture" | "checked" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableUnits" | "disabled" | "dragDirection" | "dragThreshold" | "draggable" | "enterKeyHint" | "exportparts" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "help" | "hidden" | "hideHTMLArrows" | "hideLabelFromVision" | "id" | "inlist" | "inputMode" | "is" | "isDragEnabled" | "isPressEnterToChange" | "isResetValueOnUnitChange" | "isShiftStepEnabled" | "isUnitSelectTabbable" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "label" | "labelPosition" | "lang" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onUnitChange" | "onValidate" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "pattern" | "placeholder" | "prefix" | "property" | "radioGroup" | "readOnly" | "rel" | "required" | "resource" | "results" | "rev" | "role" | "security" | "shiftStep" | "size" | "slot" | "spellCheck" | "spinFactor" | "src" | "step" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unit" | "units" | "unselectable" | "value" | "vocab" | "width"> & import("react").RefAttributes<any> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<Omit<import("../../flex/types").FlexProps, "align" | "gap"> & {
@@ -31,7 +29,7 @@ export declare const FlexedBoxControlIcon: import("@emotion/styled").StyledCompo
 } & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const FlexedRangeControl: import("@emotion/styled").StyledComponent<Pick<import("../../base-control/types").BaseControlProps, "__nextHasNoMarginBottom" | "help" | "hideLabelFromVision"> & import("../../range-control/types").NumericProps & {
+export declare const FlexedRangeControl: import("@emotion/styled").StyledComponent<Pick<import("../../base-control/types").BaseControlProps, "__nextHasNoMarginBottom" | "help" | "hideLabelFromVision"> & Pick<import("../../number-control/types").NumberControlProps, "__next40pxDefaultSize"> & import("../../range-control/types").NumericProps & {
     disabled?: boolean;
     marks?: boolean | {
         value: number;
@@ -57,13 +55,11 @@ export declare const FlexedRangeControl: import("@emotion/styled").StyledCompone
     resetFallbackValue?: number;
     separatorType?: 'none' | 'fullWidth' | 'topFullWidth';
     shiftStep?: number;
-    __next40pxDefaultSize?: boolean;
     showTooltip?: boolean;
     trackColor?: import("react").CSSProperties['color'];
     type?: 'stepper';
     withInputField?: boolean;
-    __shouldNotWarnDeprecated36pxSize?: boolean;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom" | "__shouldNotWarnDeprecated36pxSize" | "afterIcon" | "allowReset" | "as" | "beforeIcon" | "children" | "color" | "currentInput" | "disabled" | "help" | "hideLabelFromVision" | "initialPosition" | "isShiftStepEnabled" | "label" | "marks" | "onBlur" | "onChange" | "onFocus" | "onMouseLeave" | "onMouseMove" | "railColor" | "renderTooltipContent" | "resetFallbackValue" | "separatorType" | "shiftStep" | "showTooltip" | "step" | "trackColor" | "type" | "withInputField" | keyof import("../../range-control/types").NumericProps> & import("react").RefAttributes<HTMLInputElement> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom" | "afterIcon" | "allowReset" | "as" | "beforeIcon" | "children" | "color" | "currentInput" | "disabled" | "help" | "hideLabelFromVision" | "initialPosition" | "isShiftStepEnabled" | "label" | "marks" | "onBlur" | "onChange" | "onFocus" | "onMouseLeave" | "onMouseMove" | "railColor" | "renderTooltipContent" | "resetFallbackValue" | "separatorType" | "shiftStep" | "showTooltip" | "step" | "trackColor" | "type" | "withInputField" | keyof import("../../range-control/types").NumericProps> & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 //# sourceMappingURL=box-control-styles.d.ts.map

package/build-types/box-control/styles/box-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box-control-styles.d.ts","sourceRoot":"","sources":["../../../src/box-control/styles/box-control-styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;UAE7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;UAExB,CAAC;AAEF,eAAO,MAAM,WAAW;;UAGvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;UAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAG9B,CAAC"}
+{"version":3,"file":"box-control-styles.d.ts","sourceRoot":"","sources":["../../../src/box-control/styles/box-control-styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,iBAAiB;;;;;;;;;;UAE7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;UAExB,CAAC;AAEF,eAAO,MAAM,WAAW;;UAGvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;UAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAG9B,CAAC"}