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

package/build-module/validated-form-controls/components/range-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/range-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(RangeControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);\nValidatedRangeControl.displayName = 'ValidatedRangeControl';"],
-  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,cAAc;AAAA,MACxC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,wBAAwB,WAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(RangeControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);\nValidatedRangeControl.displayName = 'ValidatedRangeControl';"],
+  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,cAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,wBAAwB,WAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
   "names": []
 }

package/build-module/validated-form-controls/components/select-control.mjs

@@ -18,7 +18,6 @@ var UnforwardedValidatedSelectControl = ({
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ _jsx(SelectControl, {
-      __next40pxDefaultSize: true,
       ref: mergedRefs,
       ...restProps
     })

package/build-module/validated-form-controls/components/select-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/select-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedSelectControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(SelectControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedSelectControl = forwardRef(UnforwardedValidatedSelectControl);\nValidatedSelectControl.displayName = 'ValidatedSelectControl';"],
-  "mappings": ";AAGA,SAAS,YAAY,cAAc;AACnC,SAAS,oBAAoB;AAK7B,SAAS,wBAAwB;AACjC,OAAO,mBAAmB;AAC1B,SAAS,OAAO,YAAY;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,eAAe;AAAA,MACzC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,yBAAyB,WAAW,iCAAiC;AAClF,uBAAuB,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport SelectControl from '../../select-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedSelectControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(SelectControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedSelectControl = forwardRef(UnforwardedValidatedSelectControl);\nValidatedSelectControl.displayName = 'ValidatedSelectControl';"],
+  "mappings": ";AAGA,SAAS,YAAY,cAAc;AACnC,SAAS,oBAAoB;AAK7B,SAAS,wBAAwB;AACjC,OAAO,mBAAmB;AAC1B,SAAS,OAAO,YAAY;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,eAAe;AAAA,MACzC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,yBAAyB,WAAW,iCAAiC;AAClF,uBAAuB,cAAc;",
   "names": []
 }

package/build-module/validated-form-controls/components/toggle-group-control.mjs

@@ -19,7 +19,6 @@ var UnforwardedValidatedToggleGroupControl = ({
       customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /* @__PURE__ */ _jsx(ToggleGroupControl, {
-        __next40pxDefaultSize: true,
         ref: forwardedRef,
         ...restProps
       })

package/build-module/validated-form-controls/components/toggle-group-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/toggle-group-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleGroupControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const nameAttr = useId();\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ToggleGroupControl, {\n        __next40pxDefaultSize: true,\n        ref: forwardedRef,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"radio\",\n      ref: validityTargetRef,\n      required: required,\n      checked: restProps.value !== undefined,\n      tabIndex: -1\n      // A name attribute is needed for the `required` behavior to work.\n      ,\n      name: nameAttr,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[data-active-item=\"true\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedToggleGroupControl = forwardRef(UnforwardedValidatedToggleGroupControl);\nValidatedToggleGroupControl.displayName = 'ValidatedToggleGroupControl';"],
-  "mappings": ";AAGA,SAAS,YAAY,OAAO,cAAc;AAK1C,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,yCAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,WAAW,MAAM;AACvB,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,qBAAK,kBAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,qBAAK,oBAAoB;AAAA,QAC9C,uBAAuB;AAAA,QACvB,KAAK;AAAA,QACL,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,SAAS,UAAU,UAAU;AAAA,MAC7B,UAAU;AAAA,MAGV,MAAM;AAAA,MACN,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,2BAA2B,GAAG,MAAM;AAAA,MACrF;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,8BAA8B,WAAW,sCAAsC;AAC5F,4BAA4B,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleGroupControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const nameAttr = useId();\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ToggleGroupControl, {\n        ref: forwardedRef,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"radio\",\n      ref: validityTargetRef,\n      required: required,\n      checked: restProps.value !== undefined,\n      tabIndex: -1\n      // A name attribute is needed for the `required` behavior to work.\n      ,\n      name: nameAttr,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[data-active-item=\"true\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedToggleGroupControl = forwardRef(UnforwardedValidatedToggleGroupControl);\nValidatedToggleGroupControl.displayName = 'ValidatedToggleGroupControl';"],
+  "mappings": ";AAGA,SAAS,YAAY,OAAO,cAAc;AAK1C,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,yCAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,WAAW,MAAM;AACvB,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,qBAAK,kBAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,qBAAK,oBAAoB;AAAA,QAC9C,KAAK;AAAA,QACL,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,SAAS,UAAU,UAAU;AAAA,MAC7B,UAAU;AAAA,MAGV,MAAM;AAAA,MACN,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,2BAA2B,GAAG,MAAM;AAAA,MACrF;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,8BAA8B,WAAW,sCAAsC;AAC5F,4BAA4B,cAAc;",
   "names": []
 }

package/build-module/view/component.mjs

@@ -1,19 +1,13 @@
 // packages/components/src/view/component.tsx
-import _styled from "@emotion/styled/base";
 import { forwardRef } from "@wordpress/element";
+import { PolymorphicElement } from "../utils/polymorphic-element.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-var PolymorphicDiv = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e19lxcc00"
-} : {
-  target: "e19lxcc00",
-  label: "PolymorphicDiv"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWlDIiwiZmlsZSI6ImNvbXBvbmVudC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL2NvbnRleHQnO1xuXG5jb25zdCBQb2x5bW9ycGhpY0RpdiA9IHN0eWxlZC5kaXZgYDtcblxuZnVuY3Rpb24gVW5mb3J3YXJkZWRWaWV3PCBUIGV4dGVuZHMgUmVhY3QuRWxlbWVudFR5cGUgPSAnZGl2JyA+KFxuXHR7IGFzLCAuLi5yZXN0UHJvcHMgfTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IHt9LCBUID4sXG5cdHJlZjogUmVhY3QuRm9yd2FyZGVkUmVmPCBhbnkgPlxuKSB7XG5cdHJldHVybiA8UG9seW1vcnBoaWNEaXYgYXM9eyBhcyB9IHJlZj17IHJlZiB9IHsgLi4ucmVzdFByb3BzIH0gLz47XG59XG5cbi8qKlxuICogYFZpZXdgIGlzIGEgY29yZSBjb21wb25lbnQgdGhhdCByZW5kZXJzIGV2ZXJ5dGhpbmcgaW4gdGhlIGxpYnJhcnkuXG4gKiBJdCBpcyB0aGUgcHJpbmNpcGxlIGNvbXBvbmVudCBpbiB0aGUgZW50aXJlIGxpYnJhcnkuXG4gKlxuICogYGBganN4XG4gKiBpbXBvcnQgeyBWaWV3IH0gZnJvbSBgQHdvcmRwcmVzcy9jb21wb25lbnRzYDtcbiAqXG4gKiBmdW5jdGlvbiBFeGFtcGxlKCkge1xuICogXHRyZXR1cm4gKFxuICogXHRcdDxWaWV3PlxuICogXHRcdFx0IENvZGUgaXMgUG9ldHJ5XG4gKiBcdFx0PC9WaWV3PlxuICogXHQpO1xuICogfVxuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBWaWV3ID0gT2JqZWN0LmFzc2lnbiggZm9yd2FyZFJlZiggVW5mb3J3YXJkZWRWaWV3ICksIHtcblx0c2VsZWN0b3I6ICcuY29tcG9uZW50cy12aWV3Jyxcbn0gKTtcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */");
 function UnforwardedView({
-  as,
+  css,
   ...restProps
 }, ref) {
-  return /* @__PURE__ */ _jsx(PolymorphicDiv, {
-    as,
+  void css;
+  return /* @__PURE__ */ _jsx(PolymorphicElement, {
     ref,
     ...restProps
   });

package/build-module/view/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/view/component.tsx"],
-  "sourcesContent": ["import _styled from \"@emotion/styled/base\";\n/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst PolymorphicDiv = /*#__PURE__*/_styled(\"div\", process.env.NODE_ENV === \"production\" ? {\n  target: \"e19lxcc00\"\n} : {\n  target: \"e19lxcc00\",\n  label: \"PolymorphicDiv\"\n})(process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWlDIiwiZmlsZSI6ImNvbXBvbmVudC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL2NvbnRleHQnO1xuXG5jb25zdCBQb2x5bW9ycGhpY0RpdiA9IHN0eWxlZC5kaXZgYDtcblxuZnVuY3Rpb24gVW5mb3J3YXJkZWRWaWV3PCBUIGV4dGVuZHMgUmVhY3QuRWxlbWVudFR5cGUgPSAnZGl2JyA+KFxuXHR7IGFzLCAuLi5yZXN0UHJvcHMgfTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IHt9LCBUID4sXG5cdHJlZjogUmVhY3QuRm9yd2FyZGVkUmVmPCBhbnkgPlxuKSB7XG5cdHJldHVybiA8UG9seW1vcnBoaWNEaXYgYXM9eyBhcyB9IHJlZj17IHJlZiB9IHsgLi4ucmVzdFByb3BzIH0gLz47XG59XG5cbi8qKlxuICogYFZpZXdgIGlzIGEgY29yZSBjb21wb25lbnQgdGhhdCByZW5kZXJzIGV2ZXJ5dGhpbmcgaW4gdGhlIGxpYnJhcnkuXG4gKiBJdCBpcyB0aGUgcHJpbmNpcGxlIGNvbXBvbmVudCBpbiB0aGUgZW50aXJlIGxpYnJhcnkuXG4gKlxuICogYGBganN4XG4gKiBpbXBvcnQgeyBWaWV3IH0gZnJvbSBgQHdvcmRwcmVzcy9jb21wb25lbnRzYDtcbiAqXG4gKiBmdW5jdGlvbiBFeGFtcGxlKCkge1xuICogXHRyZXR1cm4gKFxuICogXHRcdDxWaWV3PlxuICogXHRcdFx0IENvZGUgaXMgUG9ldHJ5XG4gKiBcdFx0PC9WaWV3PlxuICogXHQpO1xuICogfVxuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBWaWV3ID0gT2JqZWN0LmFzc2lnbiggZm9yd2FyZFJlZiggVW5mb3J3YXJkZWRWaWV3ICksIHtcblx0c2VsZWN0b3I6ICcuY29tcG9uZW50cy12aWV3Jyxcbn0gKTtcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */\");\nfunction UnforwardedView({\n  as,\n  ...restProps\n}, ref) {\n  return /*#__PURE__*/_jsx(PolymorphicDiv, {\n    as: as,\n    ref: ref,\n    ...restProps\n  });\n}\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View = Object.assign(forwardRef(UnforwardedView), {\n  selector: '.components-view'\n});\nexport default View;"],
-  "mappings": ";AAAA,OAAO,aAAa;AAQpB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,YAAY;AAC5B,IAAM,iBAA8B,wBAAQ,OAAO,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzF,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe,KAAK,yhDAAyhD;AACzkD,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,SAAoB,qBAAK,gBAAgB;AAAA,IACvC;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AACH;AAkBO,IAAM,OAAO,OAAO,OAAO,WAAW,eAAe,GAAG;AAAA,EAC7D,UAAU;AACZ,CAAC;AACD,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { PolymorphicElement } from '../utils/polymorphic-element';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedView({\n  css,\n  ...restProps\n}, ref) {\n  void css;\n  return /*#__PURE__*/_jsx(PolymorphicElement, {\n    ref: ref,\n    ...restProps\n  });\n}\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View = Object.assign(forwardRef(UnforwardedView), {\n  selector: '.components-view'\n});\nexport default View;"],
+  "mappings": ";AAGA,SAAS,kBAAkB;AAM3B,SAAS,0BAA0B;AACnC,SAAS,OAAO,YAAY;AAC5B,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,OAAK;AACL,SAAoB,qBAAK,oBAAoB;AAAA,IAC3C;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AACH;AAkBO,IAAM,OAAO,OAAO,OAAO,WAAW,eAAe,GAAG;AAAA,EAC7D,UAAU;AACZ,CAAC;AACD,IAAO,oBAAQ;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -68,6 +68,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */
@@ -257,6 +263,10 @@
  *
  * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
  */
+.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));
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+}
 .components-button {
   display: inline-flex;
   text-decoration: none;
@@ -270,13 +280,6 @@
      -moz-appearance: none;
           appearance: none;
   background: none;
-}
-@media not (prefers-reduced-motion) {
-  .components-button {
-    transition: box-shadow 0.1s linear;
-  }
-}
-.components-button {
   height: 36px;
   align-items: center;
   box-sizing: border-box;
@@ -290,9 +293,6 @@
 .components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
-.components-button:focus:not(:active) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
 .components-button {
   /**
    * Primary button style.
@@ -304,7 +304,6 @@
   color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
   text-decoration: none;
   text-shadow: none;
-  outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
   background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
@@ -312,20 +311,11 @@
 }
 .components-button.is-primary:active:not(:disabled) {
   background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
-  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
   color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
 }
-.components-button.is-primary:focus:not(:active) {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
   color: rgba(255, 255, 255, 0.4);
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: none;
-}
-.components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
@@ -333,16 +323,17 @@
   /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   background-image: linear-gradient(45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
   /* stylelint-enable */
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+@media (forced-colors: active) {
+  .components-button.is-primary {
+    outline: 1px solid ButtonBorder;
+  }
 }
 .components-button {
   /**
    * Secondary and tertiary buttons.
    */
 }
-.components-button.is-secondary, .components-button.is-tertiary {
-  outline: 1px solid transparent;
-}
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
   box-shadow: none;
 }
@@ -351,14 +342,23 @@
   background: transparent;
   transform: none;
 }
+@media (forced-colors: active) {
+  .components-button.is-secondary, .components-button.is-tertiary {
+    outline: 1px solid ButtonBorder;
+  }
+}
 .components-button {
   /**
    * Secondary button style.
    */
 }
+@media not (prefers-reduced-motion) {
+  .components-button.is-secondary {
+    transition: box-shadow 0.1s linear;
+  }
+}
 .components-button.is-secondary {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
-  outline: 1px solid transparent;
   white-space: nowrap;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
@@ -371,8 +371,10 @@
 .components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
   box-shadow: inset 0 0 0 1px var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
 }
-.components-button.is-secondary:focus:not(:active) {
-  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+@media (forced-colors: active) {
+  .components-button.is-secondary {
+    box-shadow: none;
+  }
 }
 .components-button {
   /**
@@ -394,10 +396,6 @@
 p + .components-button.is-tertiary {
   margin-right: -6px;
 }
-.components-button.is-tertiary:disabled:not(:focus), .components-button.is-tertiary[aria-disabled=true]:not(:focus), .components-button.is-tertiary[aria-disabled=true]:hover:not(:focus) {
-  box-shadow: none;
-  outline: none;
-}
 .components-button {
   /**
    * Destructive buttons.
@@ -414,9 +412,6 @@ p + .components-button.is-tertiary {
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
   color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
 }
-.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:active) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
-}
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
   background: #ccc;
 }
@@ -459,15 +454,13 @@ p + .components-button.is-tertiary {
 .components-button.is-link {
   height: auto;
 }
-.components-button.is-link:focus {
+.components-button.is-link:focus:not(:active) {
   border-radius: 2px;
+  text-decoration: none;
 }
 .components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
   color: #949494;
 }
-.components-button:focus {
-  outline: 3px solid transparent;
-}
 .components-button:not(:disabled, [aria-disabled=true]):active {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
@@ -541,15 +534,6 @@ p + .components-button.is-tertiary {
   color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
   background: #949494;
 }
-.components-button.is-pressed:focus:not(:active) {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
-.components-button.is-pressed:focus {
-  outline: 2px solid transparent;
-}
-.components-button:focus:active {
-  outline: none;
-}
 .components-button svg {
   fill: currentColor;
   outline: none;
@@ -1166,7 +1150,6 @@ svg.components-checkbox-control__indeterminate {
   left: 1px;
   border-radius: 50%;
   z-index: -1;
-  /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
   background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 

package/build-style/style.css

@@ -68,6 +68,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */
@@ -257,6 +263,10 @@
  *
  * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
  */
+.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));
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+}
 .components-button {
   display: inline-flex;
   text-decoration: none;
@@ -270,13 +280,6 @@
      -moz-appearance: none;
           appearance: none;
   background: none;
-}
-@media not (prefers-reduced-motion) {
-  .components-button {
-    transition: box-shadow 0.1s linear;
-  }
-}
-.components-button {
   height: 36px;
   align-items: center;
   box-sizing: border-box;
@@ -290,9 +293,6 @@
 .components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
-.components-button:focus:not(:active) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
 .components-button {
   /**
    * Primary button style.
@@ -304,7 +304,6 @@
   color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
   text-decoration: none;
   text-shadow: none;
-  outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
   background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
@@ -312,20 +311,11 @@
 }
 .components-button.is-primary:active:not(:disabled) {
   background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
-  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
   color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
 }
-.components-button.is-primary:focus:not(:active) {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
   color: rgba(255, 255, 255, 0.4);
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: none;
-}
-.components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
@@ -333,16 +323,17 @@
   /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   background-image: linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
   /* stylelint-enable */
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+@media (forced-colors: active) {
+  .components-button.is-primary {
+    outline: 1px solid ButtonBorder;
+  }
 }
 .components-button {
   /**
    * Secondary and tertiary buttons.
    */
 }
-.components-button.is-secondary, .components-button.is-tertiary {
-  outline: 1px solid transparent;
-}
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
   box-shadow: none;
 }
@@ -351,14 +342,23 @@
   background: transparent;
   transform: none;
 }
+@media (forced-colors: active) {
+  .components-button.is-secondary, .components-button.is-tertiary {
+    outline: 1px solid ButtonBorder;
+  }
+}
 .components-button {
   /**
    * Secondary button style.
    */
 }
+@media not (prefers-reduced-motion) {
+  .components-button.is-secondary {
+    transition: box-shadow 0.1s linear;
+  }
+}
 .components-button.is-secondary {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
-  outline: 1px solid transparent;
   white-space: nowrap;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
@@ -371,8 +371,10 @@
 .components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
   box-shadow: inset 0 0 0 1px var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
 }
-.components-button.is-secondary:focus:not(:active) {
-  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+@media (forced-colors: active) {
+  .components-button.is-secondary {
+    box-shadow: none;
+  }
 }
 .components-button {
   /**
@@ -394,10 +396,6 @@
 p + .components-button.is-tertiary {
   margin-left: -6px;
 }
-.components-button.is-tertiary:disabled:not(:focus), .components-button.is-tertiary[aria-disabled=true]:not(:focus), .components-button.is-tertiary[aria-disabled=true]:hover:not(:focus) {
-  box-shadow: none;
-  outline: none;
-}
 .components-button {
   /**
    * Destructive buttons.
@@ -414,9 +412,6 @@ p + .components-button.is-tertiary {
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
   color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
 }
-.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:active) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
-}
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
   background: #ccc;
 }
@@ -459,15 +454,13 @@ p + .components-button.is-tertiary {
 .components-button.is-link {
   height: auto;
 }
-.components-button.is-link:focus {
+.components-button.is-link:focus:not(:active) {
   border-radius: 2px;
+  text-decoration: none;
 }
 .components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
   color: #949494;
 }
-.components-button:focus {
-  outline: 3px solid transparent;
-}
 .components-button:not(:disabled, [aria-disabled=true]):active {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
@@ -541,15 +534,6 @@ p + .components-button.is-tertiary {
   color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
   background: #949494;
 }
-.components-button.is-pressed:focus:not(:active) {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
-.components-button.is-pressed:focus {
-  outline: 2px solid transparent;
-}
-.components-button:focus:active {
-  outline: none;
-}
 .components-button svg {
   fill: currentColor;
   outline: none;
@@ -1166,7 +1150,6 @@ svg.components-checkbox-control__indeterminate {
   right: 1px;
   border-radius: 50%;
   z-index: -1;
-  /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
   background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 

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

@@ -28,7 +28,6 @@ import type { LabelProps, BorderControlProps } from '../../border-control/types'
  *
  * 	return (
  * 		<BorderBoxControl
- * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }
@@ -41,11 +40,12 @@ 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" | "size"> & {
+} & LabelProps & Pick<BorderControlProps, "enableStyle"> & {
     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;

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;AA6HpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;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/border-box-control/hook.d.ts

@@ -284,7 +284,6 @@ export declare function useBorderBoxControl(props: WordPressComponentProps<Borde
     onSplitChange: (newBorder: Border | undefined, side: BorderSide) => void;
     toggleLinked: () => void;
     linkedValue: Border | undefined;
-    size: "__unstable-large" | "default";
     splitValue: Borders | undefined;
     wrapperClassName: string;
     __experimentalIsRenderedInSidebar: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/hook.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAK7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAE3E,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,uBAAuB,CAAE,qBAAqB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyCzB,MAAM;+BAuC/B,MAAM,GAAG,SAAS,QACvB,UAAU;;;;;;;EA2CjB"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/hook.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAE3E,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,uBAAuB,CAAE,qBAAqB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAiCzB,MAAM;+BAuC/B,MAAM,GAAG,SAAS,QACvB,UAAU;;;;;;EA0CjB"}

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

@@ -1,6 +1,4 @@
-declare const ConnectedBorderBoxControlLinkedButton: import("../../context").WordPressComponent<"button", Pick<import("../types").BorderBoxControlProps, "size"> & {
-    isLinked: boolean;
-    onClick: () => void;
-} & import("react").RefAttributes<any>, true>;
+import type { LinkedButtonProps } from '../types';
+declare const ConnectedBorderBoxControlLinkedButton: import("../../context").WordPressComponent<"button", LinkedButtonProps & import("react").RefAttributes<any>, true>;
 export default ConnectedBorderBoxControlLinkedButton;
 //# sourceMappingURL=component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/component.tsx"],"names":[],"mappings":"AAqCA,QAAA,MAAM,qCAAqC;;;6CAG1C,CAAC;eACa,qCAAqC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/component.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAuBlD,QAAA,MAAM,qCAAqC,oHAG1C,CAAC;eACa,qCAAqC"}

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

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/hook.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,+BAA+B,CAC9C,KAAK,EAAE,uBAAuB,CAAE,iBAAiB,EAAE,QAAQ,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAe7D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-linked-button/hook.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,+BAA+B,CAC9C,KAAK,EAAE,uBAAuB,CAAE,iBAAiB,EAAE,QAAQ,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAc7D"}

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

@@ -1,7 +1,7 @@
 declare const ConnectedBorderBoxControlSplitControls: import("../../context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "__experimentalIsRenderedInSidebar" | "colors"> & {
     disableCustomColors?: boolean;
     enableAlpha?: boolean;
-} & Pick<import("../types").BorderBoxControlProps, "enableStyle" | "size"> & {
+} & Pick<import("../types").BorderBoxControlProps, "enableStyle"> & {
     onChange: (value: import("../../border-control/types").Border | undefined, side: import("../types").BorderSide) => void;
     popoverPlacement?: import("../../popover/types").PopoverProps['placement'];
     popoverOffset?: import("../../popover/types").PopoverProps['offset'];

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AA6HA,QAAA,MAAM,sCAAsC;;;;;;;;6CAG3C,CAAC;eACa,sCAAsC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AAkHA,QAAA,MAAM,sCAAsC;;;;;;;;6CAG3C,CAAC;eACa,sCAAsC"}

package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts

@@ -277,7 +277,6 @@ export declare function useBorderBoxControlSplitControls(props: WordPressCompone
     enableAlpha: boolean;
     enableStyle: boolean;
     rightAlignedClassName: string;
-    size: "__unstable-large" | "default";
     __experimentalIsRenderedInSidebar: boolean;
 };
 //# sourceMappingURL=hook.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/hook.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,wBAAgB,gCAAgC,CAC/C,KAAK,EAAE,uBAAuB,CAAE,kBAAkB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqC3D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/hook.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,wBAAgB,gCAAgC,CAC/C,KAAK,EAAE,uBAAuB,CAAE,kBAAkB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC3D"}

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

@@ -1,5 +1,4 @@
-declare const ConnectedBorderBoxControlVisualizer: import("../../context").WordPressComponent<"div", Pick<import("../types").BorderBoxControlProps, "size"> & {
-    value?: import("../types").Borders;
-} & import("react").RefAttributes<any>, true>;
+import type { VisualizerProps } from '../types';
+declare const ConnectedBorderBoxControlVisualizer: import("../../context").WordPressComponent<"div", VisualizerProps & import("react").RefAttributes<any>, true>;
 export default ConnectedBorderBoxControlVisualizer;
 //# sourceMappingURL=component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-visualizer/component.tsx"],"names":[],"mappings":"AAmBA,QAAA,MAAM,mCAAmC;;6CAGxC,CAAC;eACa,mCAAmC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-visualizer/component.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAWhD,QAAA,MAAM,mCAAmC,+GAGxC,CAAC;eACa,mCAAmC"}