@wordpress/components 35.0.1 → 35.1.1-next.v.202606191442.0

package/build-module/utils/config-values.mjs

@@ -60,8 +60,8 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
   surfaceBackgroundTertiaryColor: COLORS.white,
   surfaceColor: COLORS.white,
   // Modal exit animation: `use-modal-exit-animation` parses this for the
-  // `animationend` timeout race; keep the numeric duration equal to
-  // `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.
+  // `animationend` timeout race; keep the numeric duration equal to the WPDS
+  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.
   transitionDuration: "200ms",
   transitionDurationFast: "160ms",
   transitionDurationFaster: "120ms",

package/build-module/utils/config-values.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/config-values.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\n\nconst CONTROL_PROPS = {\n\t// These values should be shared with TextControl.\n\tcontrolPaddingX: 12,\n\tcontrolPaddingXSmall: 8,\n\tcontrolPaddingXLarge: 12 * 1.3334, // TODO: Deprecate\n\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign( {}, CONTROL_PROPS, {\n\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusXSmall: '1px',\n\tradiusSmall: '2px',\n\tradiusMedium: '4px',\n\tradiusLarge: '8px',\n\tradiusFull: '9999px',\n\tradiusRound: '50%',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.4',\n\tfontWeight: 'normal',\n\tfontWeightMedium: '499', // ensures fallback to 400 (instead of 600)\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\televationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n\televationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n\televationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n\televationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\t// Modal exit animation: `use-modal-exit-animation` parses this for the\n\t// `animationend` timeout race; keep the numeric duration equal to\n\t// `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n} );\n"],
-  "mappings": ";AAGA,SAAS,cAAc;AAEvB,IAAM,iBAAiB;AAEvB,IAAM,gBAAgB;AAAA;AAAA,EAErB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAE3B,uBAAuB,eAAgB,OAAO,MAAM,MAAO;AAAA,EAC3D,eAAe;AAAA,EACf,qBAAqB,SAAU,cAAe;AAAA,EAC9C,oBAAoB,SAAU,cAAe;AAAA,EAC7C,oBAAoB,SAAU,cAAe;AAAA,EAC7C,qBAAqB,SAAU,cAAe;AAC/C;AAIA,IAAO,wBAAQ,OAAO,OAAQ,CAAC,GAAG,eAAe;AAAA,EAChD,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,kBAAkB;AAAA;AAAA,EAClB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,wBAAwB,OAAO;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,gCAAgC,OAAO;AAAA,EACvC,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AAClC,CAAE;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { COLORS } from './colors-values';\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PROPS = {\n  // These values should be shared with TextControl.\n  controlPaddingX: 12,\n  controlPaddingXSmall: 8,\n  controlPaddingXLarge: 12 * 1.3334,\n  // TODO: Deprecate\n\n  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,\n  controlHeight: CONTROL_HEIGHT,\n  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,\n  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,\n  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,\n  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign({}, CONTROL_PROPS, {\n  colorDivider: 'rgba(0, 0, 0, 0.1)',\n  colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n  colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n  colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n  elevationIntensity: 1,\n  radiusXSmall: '1px',\n  radiusSmall: '2px',\n  radiusMedium: '4px',\n  radiusLarge: '8px',\n  radiusFull: '9999px',\n  radiusRound: '50%',\n  borderWidth: '1px',\n  borderWidthFocus: '1.5px',\n  borderWidthTab: '4px',\n  spinnerSize: 16,\n  fontSize: '13px',\n  fontSizeH1: 'calc(2.44 * 13px)',\n  fontSizeH2: 'calc(1.95 * 13px)',\n  fontSizeH3: 'calc(1.56 * 13px)',\n  fontSizeH4: 'calc(1.25 * 13px)',\n  fontSizeH5: '13px',\n  fontSizeH6: 'calc(0.8 * 13px)',\n  fontSizeInputMobile: '16px',\n  fontSizeMobile: '15px',\n  fontSizeSmall: 'calc(0.92 * 13px)',\n  fontSizeXSmall: 'calc(0.75 * 13px)',\n  fontLineHeightBase: '1.4',\n  fontWeight: 'normal',\n  fontWeightMedium: '499',\n  // ensures fallback to 400 (instead of 600)\n  fontWeightHeading: '600',\n  gridBase: '4px',\n  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n  surfaceBackgroundColor: COLORS.white,\n  surfaceBackgroundSubtleColor: '#F3F3F3',\n  surfaceBackgroundTintColor: '#F5F5F5',\n  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n  surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n  surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n  surfaceBackgroundTertiaryColor: COLORS.white,\n  surfaceColor: COLORS.white,\n  // Modal exit animation: `use-modal-exit-animation` parses this for the\n  // `animationend` timeout race; keep the numeric duration equal to the WPDS\n  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.\n  transitionDuration: '200ms',\n  transitionDurationFast: '160ms',\n  transitionDurationFaster: '120ms',\n  transitionDurationFastest: '100ms',\n  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'\n});"],
+  "mappings": ";AAGA,SAAS,cAAc;AACvB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB;AAAA;AAAA,EAEpB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAG3B,uBAAuB,eAAe,OAAO,MAAM,MAAM;AAAA,EACzD,eAAe;AAAA,EACf,qBAAqB,SAAS,cAAc;AAAA,EAC5C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,qBAAqB,SAAS,cAAc;AAC9C;AAIA,IAAO,wBAAQ,OAAO,OAAO,CAAC,GAAG,eAAe;AAAA,EAC9C,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,kBAAkB;AAAA;AAAA,EAElB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,wBAAwB,OAAO;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,gCAAgC,OAAO;AAAA,EACvC,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
   "names": []
 }

package/build-module/utils/dropdown-motion.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/dropdown-motion.ts"],
-  "sourcesContent": ["// Motion configuration for dropdown-like popovers.\n// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css\n// Values should stay in sync with --wpds-motion-* design tokens.\n\nexport const DROPDOWN_MOTION = Object.freeze( {\n\tSLIDE_DISTANCE: 4,\n\tSLIDE_DURATION: 200,\n\tSLIDE_EASING: {\n\t\tfunction: 'cubic-bezier',\n\t\targs: [ 0.25, 0, 0, 1 ] as const,\n\t},\n\tFADE_DURATION: 100,\n\tFADE_EASING: {\n\t\tfunction: 'linear',\n\t},\n} );\n\nconst convertEasingToString = ( easing: {\n\tfunction: string;\n\targs?: readonly [ number, number, number, number ];\n} ) => {\n\tif ( easing.args?.length ) {\n\t\treturn `${ easing.function }(${ easing.args.join( ',' ) })`;\n\t}\n\treturn easing.function;\n};\n\n// Note: --wpds-* tokens can't be used here directly because the build-time\n// fallback injection is not compatible with Emotion. This file is consumed\n// by Menu's Emotion styles.\nexport const DROPDOWN_MOTION_CSS = Object.freeze( {\n\tSLIDE_DISTANCE: `${ DROPDOWN_MOTION.SLIDE_DISTANCE }px`,\n\tSLIDE_DURATION: `${ DROPDOWN_MOTION.SLIDE_DURATION }ms`,\n\tSLIDE_EASING: convertEasingToString( DROPDOWN_MOTION.SLIDE_EASING ),\n\tFADE_DURATION: `${ DROPDOWN_MOTION.FADE_DURATION }ms`,\n\tFADE_EASING: convertEasingToString( DROPDOWN_MOTION.FADE_EASING ),\n} );\n"],
-  "mappings": ";AAIO,IAAM,kBAAkB,OAAO,OAAQ;AAAA,EAC7C,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACb,UAAU;AAAA,IACV,MAAM,CAAE,MAAM,GAAG,GAAG,CAAE;AAAA,EACvB;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,IACZ,UAAU;AAAA,EACX;AACD,CAAE;AAEF,IAAM,wBAAwB,CAAE,WAGzB;AACN,MAAK,OAAO,MAAM,QAAS;AAC1B,WAAO,GAAI,OAAO,QAAS,IAAK,OAAO,KAAK,KAAM,GAAI,CAAE;AAAA,EACzD;AACA,SAAO,OAAO;AACf;AAKO,IAAM,sBAAsB,OAAO,OAAQ;AAAA,EACjD,gBAAgB,GAAI,gBAAgB,cAAe;AAAA,EACnD,gBAAgB,GAAI,gBAAgB,cAAe;AAAA,EACnD,cAAc,sBAAuB,gBAAgB,YAAa;AAAA,EAClE,eAAe,GAAI,gBAAgB,aAAc;AAAA,EACjD,aAAa,sBAAuB,gBAAgB,WAAY;AACjE,CAAE;",
+  "sourcesContent": ["// Motion configuration for dropdown-like popovers.\n// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css\n// Values should stay in sync with the WPDS motion design tokens.\n\nexport const DROPDOWN_MOTION = Object.freeze({\n  SLIDE_DISTANCE: 4,\n  SLIDE_DURATION: 200,\n  SLIDE_EASING: {\n    function: 'cubic-bezier',\n    args: [0.25, 0, 0, 1]\n  },\n  FADE_DURATION: 100,\n  FADE_EASING: {\n    function: 'linear'\n  }\n});\nconst convertEasingToString = easing => {\n  if (easing.args?.length) {\n    return `${easing.function}(${easing.args.join(',')})`;\n  }\n  return easing.function;\n};\n\n// Note: WPDS design tokens can't be referenced here directly. The build-time\n// fallback injection is incompatible with Emotion, and even mentioning a token's\n// full CSS custom property name in this file makes the esbuild fallback plugin\n// claim it and break the Emotion transform. This file is consumed by Menu's\n// Emotion styles.\nexport const DROPDOWN_MOTION_CSS = Object.freeze({\n  SLIDE_DISTANCE: `${DROPDOWN_MOTION.SLIDE_DISTANCE}px`,\n  SLIDE_DURATION: `${DROPDOWN_MOTION.SLIDE_DURATION}ms`,\n  SLIDE_EASING: convertEasingToString(DROPDOWN_MOTION.SLIDE_EASING),\n  FADE_DURATION: `${DROPDOWN_MOTION.FADE_DURATION}ms`,\n  FADE_EASING: convertEasingToString(DROPDOWN_MOTION.FADE_EASING)\n});"],
+  "mappings": ";AAIO,IAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,IACX,UAAU;AAAA,EACZ;AACF,CAAC;AACD,IAAM,wBAAwB,YAAU;AACtC,MAAI,OAAO,MAAM,QAAQ;AACvB,WAAO,GAAG,OAAO,QAAQ,IAAI,OAAO,KAAK,KAAK,GAAG,CAAC;AAAA,EACpD;AACA,SAAO,OAAO;AAChB;AAOO,IAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,gBAAgB,GAAG,gBAAgB,cAAc;AAAA,EACjD,cAAc,sBAAsB,gBAAgB,YAAY;AAAA,EAChE,eAAe,GAAG,gBAAgB,aAAa;AAAA,EAC/C,aAAa,sBAAsB,gBAAgB,WAAW;AAChE,CAAC;",
   "names": []
 }

package/build-module/utils/strings.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/strings.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\nimport { paramCase } from 'change-case';\n\n/**\n * All unicode characters that we consider \"dash-like\":\n * - `\\u007e`: ~ (tilde)\n * - `\\u00ad`: \u00AD (soft hyphen)\n * - `\\u2053`: \u2053 (swung dash)\n * - `\\u207b`: \u207B (superscript minus)\n * - `\\u208b`: \u208B (subscript minus)\n * - `\\u2212`: \u2212 (minus sign)\n * - `\\\\p{Pd}`: any other Unicode dash character\n */\nconst ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\\u007e\\u00ad\\u2053\\u207b\\u208b\\u2212\\p{Pd}]/gu);\nexport const normalizeTextString = value => {\n  return removeAccents(value).normalize('NFKC').toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');\n};\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param str String to convert.\n * @return Kebab-cased string\n */\nexport function kebabCase(str) {\n  let input = str?.toString?.() ?? '';\n\n  // See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n  input = input.replace(/['\\u2019]/, '');\n  return paramCase(input, {\n    splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g,\n    // fooBar => foo-bar, 3Bar => 3-bar\n    /(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g,\n    // 3bar => 3-bar\n    /([A-Za-z])([0-9])/g,\n    // Foo3 => foo-3, foo3 => foo-3\n    /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar\n    ]\n  });\n}\n\n/**\n * Escapes the RegExp special characters.\n *\n * @param string Input string.\n *\n * @return Regex-escaped string.\n */\nexport function escapeRegExp(string) {\n  return string.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\nimport { paramCase } from 'change-case';\n\n/**\n * All unicode characters that we consider \"dash-like\":\n * - `\\u007e`: ~ (tilde)\n * - `\\u00ad`: ­ (soft hyphen)\n * - `\\u2053`: ⁓ (swung dash)\n * - `\\u207b`: ⁻ (superscript minus)\n * - `\\u208b`: ₋ (subscript minus)\n * - `\\u2212`: − (minus sign)\n * - `\\\\p{Pd}`: any other Unicode dash character\n */\nconst ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\\u007e\\u00ad\\u2053\\u207b\\u208b\\u2212\\p{Pd}]/gu);\nexport const normalizeTextString = value => {\n  return removeAccents(value).normalize('NFKC').toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');\n};\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param str String to convert.\n * @return Kebab-cased string\n */\nexport function kebabCase(str) {\n  let input = str?.toString?.() ?? '';\n\n  // See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n  input = input.replace(/['\\u2019]/, '');\n  return paramCase(input, {\n    splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g,\n    // fooBar => foo-bar, 3Bar => 3-bar\n    /(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g,\n    // 3bar => 3-bar\n    /([A-Za-z])([0-9])/g,\n    // Foo3 => foo-3, foo3 => foo-3\n    /([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar\n    ]\n  });\n}\n\n/**\n * Escapes the RegExp special characters.\n *\n * @param string Input string.\n *\n * @return Regex-escaped string.\n */\nexport function escapeRegExp(string) {\n  return string.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}"],
   "mappings": ";AAGA,OAAO,mBAAmB;AAC1B,SAAS,iBAAiB;AAY1B,IAAM,8BAA8B,IAAI,OAAO,gDAAgD;AACxF,IAAM,sBAAsB,WAAS;AAC1C,SAAO,cAAc,KAAK,EAAE,UAAU,MAAM,EAAE,kBAAkB,EAAE,QAAQ,6BAA6B,GAAG;AAC5G;AAaO,SAAS,UAAU,KAAK;AAC7B,MAAI,QAAQ,KAAK,WAAW,KAAK;AAGjC,UAAQ,MAAM,QAAQ,aAAa,EAAE;AACrC,SAAO,UAAU,OAAO;AAAA,IACtB,aAAa;AAAA,MAAC;AAAA;AAAA,MAEd;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AASO,SAAS,aAAa,QAAQ;AACnC,SAAO,OAAO,QAAQ,uBAAuB,MAAM;AACrD;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -282,7 +282,7 @@
   box-sizing: border-box;
   padding: 4px 12px;
   border-radius: 2px;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-button.is-next-40px-default-size {
   height: 40px;
@@ -301,22 +301,22 @@
 .components-button.is-primary {
   white-space: nowrap;
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  color: var(--wp-components-color-accent-inverted, #fff);
+  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));
-  color: var(--wp-components-color-accent-inverted, #fff);
+  color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
 }
 .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, #fff);
+  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, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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);
@@ -325,10 +325,10 @@
   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, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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, #fff);
+  color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
   background-size: 100px 100%;
   /* 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%);
@@ -369,7 +369,7 @@
   background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 }
 .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 #ddd;
+  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));
@@ -469,7 +469,7 @@ p + .components-button.is-tertiary {
   outline: 3px solid transparent;
 }
 .components-button:not(:disabled, [aria-disabled=true]):active {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-button:disabled, .components-button[aria-disabled=true] {
   cursor: default;
@@ -494,14 +494,14 @@ p + .components-button.is-tertiary {
   min-width: 32px;
 }
 .components-button.is-small {
-  height: 24px;
+  height: var(--wpds-dimension-size-sm, 24px);
   line-height: 22px;
   padding: 0 8px;
   font-size: 11px;
 }
 .components-button.is-small.has-icon:not(.has-text) {
   padding: 0;
-  min-width: 24px;
+  min-width: var(--wpds-dimension-size-sm, 24px);
 }
 .components-button.has-icon {
   padding: 6px;
@@ -529,20 +529,20 @@ p + .components-button.is-tertiary {
   padding-right: 12px;
 }
 .components-button.is-pressed, .components-button.is-pressed:hover {
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
 }
 .components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
-  background: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
   color: #949494;
 }
 .components-button.is-pressed:disabled:not(.is-primary):not(.is-secondary):not(.is-tertiary), .components-button.is-pressed[aria-disabled=true]:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  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, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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;
@@ -571,8 +571,8 @@ p + .components-button.is-tertiary {
   position: relative; /* Required to position the navigation toolbar. */
   box-sizing: border-box;
   display: inline flow-root;
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  background-color: var(--wp-components-color-background, #fff);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+  background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   font-size: 13px;
   font-weight: 400;
   z-index: 0;
@@ -588,7 +588,7 @@ p + .components-button.is-tertiary {
   position: relative;
 }
 .components-calendar__day:has(.components-calendar__day-button:disabled) {
-  color: var(--wp-components-color-gray-400, #ccc);
+  color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -672,7 +672,7 @@ p + .components-button.is-tertiary {
 .components-calendar__button-previous:disabled,
 .components-calendar__button-previous[aria-disabled=true] {
   cursor: revert;
-  color: var(--wp-components-color-gray-600, #949494);
+  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-calendar__button-next:focus-visible,
 .components-calendar__button-previous:focus-visible {
@@ -729,7 +729,7 @@ p + .components-button.is-tertiary {
   width: 32px;
   height: 32px;
   padding: 0;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   text-align: center;
   text-transform: uppercase;
 }
@@ -749,21 +749,21 @@ p + .components-button.is-tertiary {
 
 .components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
 .components-calendar__day-button:hover:not(:disabled)) {
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
-  background-color: var(--wp-components-color-foreground, #1e1e1e);
+  background-color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   border: 1px solid transparent;
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
-  background-color: var(--wp-components-color-gray-400, #ccc);
+  background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
-  background-color: var(--wp-components-color-gray-800, #2f2f2f);
+  background-color: var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .components-calendar__day--outside {
-  color: var(--wp-components-color-gray-600, #949494);
+  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 
 .components-calendar__day--hidden {
@@ -1105,7 +1105,7 @@ svg.components-checkbox-control__indeterminate {
 
 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
-  fill: var(--wp-components-color-gray-400, #ccc);
+  fill: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 
 .components-checkbox-control__help {
@@ -1280,8 +1280,8 @@ input.components-combobox-control__input[type=text] {
   margin: 0;
   line-height: inherit;
   min-height: auto;
-  background: var(--wp-components-color-background, #fff);
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 @media (min-width: 600px) {
   input.components-combobox-control__input[type=text] {
@@ -1384,7 +1384,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-color-palette__custom-color-name {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   margin: 0 1px;
 }
 
@@ -1606,7 +1606,7 @@ input.components-combobox-control__input[type=text]:focus {
   display: block;
   content: "";
   box-sizing: content-box;
-  background-color: #ddd;
+  background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   position: absolute;
   top: -3px;
   right: 0;
@@ -1668,7 +1668,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-external-link {
-  color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
+  color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
   text-decoration: none;
 }
 @media not (prefers-reduced-motion) {
@@ -1681,13 +1681,13 @@ input.components-combobox-control__input[type=text]:focus {
   outline-offset: 1px;
 }
 .components-external-link:visited {
-  color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
+  color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 }
 .components-external-link:hover, .components-external-link:active {
-  color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
+  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-brand, var(--wp-admin-theme-color, #3858e9));
+  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;
 }
@@ -1784,8 +1784,8 @@ input.components-combobox-control__input[type=text]:focus {
   transform: translateX(-16px);
 }
 .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
-  background-color: var(--wp-components-color-gray-100, #f0f0f0);
-  border-color: var(--wp-components-color-gray-300, #ddd);
+  background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
 }
 @media (forced-colors: active) {
   .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
@@ -1793,7 +1793,7 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
-  background-color: var(--wp-components-color-gray-400, #ccc);
+  background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   box-shadow: none;
 }
 @media (forced-colors: active) {
@@ -1802,8 +1802,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-components-color-gray-400, #ccc);
-  border-color: var(--wp-components-color-gray-400, #ccc);
+  background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
+  border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 @media (forced-colors: active) {
   .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
@@ -1879,8 +1879,8 @@ input.components-combobox-control__input[type=text]:focus {
   cursor: text;
 }
 .components-form-token-field__input-container.is-disabled {
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border-color: var(--wp-components-color-gray-400, #ccc);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   cursor: default;
 }
 .components-form-token-field__input-container.is-active {
@@ -1902,7 +1902,7 @@ input.components-combobox-control__input[type=text]:focus {
   min-width: 50px;
   background: inherit;
   border: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   box-shadow: none;
 }
 @media (min-width: 600px) {
@@ -1938,8 +1938,8 @@ input.components-combobox-control__input[type=text]:focus {
 }
 .components-form-token-field__token.is-disabled .components-form-token-field__token-text,
 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  color: var(--wp-components-color-gray-600, #949494);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .components-form-token-field__token.is-borderless {
   position: relative;
@@ -2021,7 +2021,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-form-token-field__suggestion {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   display: block;
   font-size: 13px;
   padding: 8px 12px;
@@ -2031,7 +2031,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 .components-form-token-field__suggestion.is-selected {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  color: var(--wp-components-color-foreground-inverted, #fff);
+  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
 }
 .components-form-token-field__suggestion[aria-disabled=true] {
   pointer-events: none;
@@ -2500,7 +2500,7 @@ input.components-combobox-control__input[type=text]:focus {
   margin: 0;
 }
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
-  border-bottom-color: #ddd;
+  border-bottom-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
 }
 .components-modal__header + p {
   margin-top: 0;
@@ -2540,9 +2540,9 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-notice {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak, #f3f9ff);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #a9c6e7);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-info, #001b4f);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -2557,25 +2557,25 @@ input.components-combobox-control__input[type=text]:focus {
   line-height: var(--wpds-typography-line-height-sm, 20px);
 }
 .components-notice.is-success {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak, #ebffed);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #94d29e);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-success, #002900);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
 }
 .components-notice.is-warning {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak, #fff7e1);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bc7c);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-warning, #2e1900);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
 }
 .components-notice.is-error {
-  --wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak, #fff6f5);
+  --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
   --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #dab1aa);
-  --wp-components-notice-text-color: var(--wpds-color-fg-content-error, #470000);
+  --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
 }
 
 .components-notice__content {
   grid-column: 1;
   grid-row: 1;
-  padding-block: calc((24px - 1lh) / 2);
+  padding-block: calc((var(--wpds-dimension-size-sm, 24px) - 1lh) / 2);
 }
 
 .components-notice__actions {
@@ -2591,11 +2591,11 @@ input.components-combobox-control__input[type=text]:focus {
 .components-notice__dismiss {
   grid-column: 2;
   grid-row: 1;
-  color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
   margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
 }
 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
-  color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
   background-color: transparent;
 }
 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
@@ -2644,7 +2644,7 @@ input.components-combobox-control__input[type=text]:focus {
   justify-content: space-between;
   align-items: center;
   padding: 0 16px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   box-sizing: content-box;
   height: 47px;
 }
@@ -3197,12 +3197,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   border-radius: 50%;
 }
 .components-radio-control__input[type=radio]:disabled {
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-300, #ddd);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
   opacity: 1;
 }
 .components-radio-control__input[type=radio]:disabled:checked::before {
-  border-color: var(--wp-components-color-gray-400, #ccc);
+  border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   opacity: 1;
 }
 
@@ -3520,13 +3520,13 @@ body.lockscroll {
   padding: 3px var(--wpds-dimension-padding-lg, 16px);
   margin-right: 0;
   font-weight: var(--wpds-typography-font-weight-regular, 400);
-  color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 }
 .components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
-  color: var(--wpds-color-fg-interactive-neutral-disabled, #8d8d8d);
+  color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
 }
 .components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
-  color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
   position: relative;
@@ -3568,7 +3568,7 @@ body.lockscroll {
   }
 }
 .components-tab-panel__tabs-item:focus-visible::before {
-  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
@@ -3578,7 +3578,7 @@ body.lockscroll {
   display: none;
 }
 .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
-  background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
+  background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
 }
 
 .components-tab-panel__tab-content:focus {
@@ -3586,7 +3586,7 @@ body.lockscroll {
   outline: none;
 }
 .components-tab-panel__tab-content:focus-visible {
-  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: 0;
 }
@@ -3608,8 +3608,8 @@ body.lockscroll {
   width: 100%;
   height: 32px;
   margin: 0;
-  background: var(--wp-components-color-background, #fff);
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -3709,10 +3709,10 @@ body.lockscroll {
 .components-text-control__input[type=email],
 .components-text-control__input[type=month],
 .components-text-control__input[type=number] {
-  border-color: var(--wp-components-color-gray-600, #949494);
+  border-color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
 }
 .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 {
-  color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
+  color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
 }
 .components-text-control__input::placeholder,
 .components-text-control__input[type=text]::placeholder,
@@ -3728,7 +3728,7 @@ body.lockscroll {
 .components-text-control__input[type=email]::placeholder,
 .components-text-control__input[type=month]::placeholder,
 .components-text-control__input[type=number]::placeholder {
-  color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
+  color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
 }
 .components-text-control__input.is-next-40px-default-size,
 .components-text-control__input[type=text].is-next-40px-default-size,
@@ -3782,7 +3782,7 @@ body.lockscroll {
 
 .components-accessible-toolbar {
   display: inline-flex;
-  border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
+  border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   border-radius: 2px;
   flex-shrink: 0;
 }
@@ -3849,7 +3849,7 @@ body.lockscroll {
 }
 .components-accessible-toolbar .components-button.is-pressed::before,
 .components-toolbar .components-button.is-pressed::before {
-  background: var(--wp-components-color-foreground, #1e1e1e);
+  background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 .components-accessible-toolbar .components-button:focus::before,
 .components-toolbar .components-button:focus::before {
@@ -3893,8 +3893,8 @@ body.lockscroll {
 
 .components-toolbar-group {
   min-height: 48px;
-  border-left: 1px solid var(--wp-components-color-foreground, #1e1e1e);
-  background-color: var(--wp-components-color-background, #fff);
+  border-left: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+  background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
@@ -3917,7 +3917,7 @@ body.lockscroll {
 }
 .components-toolbar-group .components-button.components-button svg,
 .components-toolbar-group .components-button.has-icon.has-icon svg {
-  min-width: 24px;
+  min-width: var(--wpds-dimension-size-sm, 24px);
 }
 .components-toolbar-group .components-button.components-button::before,
 .components-toolbar-group .components-button.has-icon.has-icon::before {
@@ -3928,8 +3928,8 @@ body.lockscroll {
 .components-toolbar {
   min-height: 48px;
   margin: 0;
-  border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
-  background-color: var(--wp-components-color-background, #fff);
+  border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+  background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
@@ -3952,7 +3952,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   display: inline-block;
   content: "";
   box-sizing: content-box;
-  background-color: #ddd;
+  background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   position: absolute;
   top: 8px;
   right: -3px;
@@ -4022,7 +4022,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 12px;
   line-height: 16px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }
 .components-validated-control__indicator.is-invalid {