@wordpress/components 22.0.0 → 22.1.0

package/build-module/utils/colors-values.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["rgba","white","GRAY","ALERT","yellow","red","green","ADMIN","theme","themeDark10","UI","background","backgroundDisabled","border","borderHover","borderFocus","borderDisabled","textDisabled","textDark","darkGrayPlaceholder","lightGrayPlaceholder","COLORS","Object","freeze","gray","alert","ui"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,UAArB;AAEA,MAAMC,KAAK,GAAG,MAAd,C,CAEA;;AACA,MAAMC,IAAI,GAAG;AACZ,OAAK,SADO;AAEZ,OAAK,SAFO;;AAGZ;AACA,OAAK,SAJO;;AAKZ;AACA,OAAK,SANO;AAOZ,OAAK,MAPO;;AAQZ;AACA,OAAK,MATO;;AAUZ;AACA,OAAK,SAXO;;AAYZ;AACA,OAAK;AAbO,CAAb,C,CAgBA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,MAAM,EAAE,SADK;AAEbC,EAAAA,GAAG,EAAE,SAFQ;AAGbC,EAAAA,KAAK,EAAE;AAHM,CAAd,C,CAMA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,KAAK,EAAE,uCADM;AAEbC,EAAAA,WAAW,EAAE;AAFA,CAAd;AAKA,MAAMC,EAAE,GAAG;AACVF,EAAAA,KAAK,EAAED,KAAK,CAACC,KADH;AAEVG,EAAAA,UAAU,EAAEV,KAFF;AAGVW,EAAAA,kBAAkB,EAAEV,IAAI,CAAE,GAAF,CAHd;AAIVW,EAAAA,MAAM,EAAEX,IAAI,CAAE,GAAF,CAJF;AAKVY,EAAAA,WAAW,EAAEZ,IAAI,CAAE,GAAF,CALP;AAMVa,EAAAA,WAAW,EAAER,KAAK,CAACE,WANT;AAOVO,EAAAA,cAAc,EAAEd,IAAI,CAAE,GAAF,CAPV;AAQVe,EAAAA,YAAY,EAAEf,IAAI,CAAE,GAAF,CARR;AASVgB,EAAAA,QAAQ,EAAEjB,KATA;AAWV;AACAkB,EAAAA,mBAAmB,EAAEnB,IAAI,CAAEE,IAAI,CAAE,GAAF,CAAN,EAAe,IAAf,CAZf;AAaVkB,EAAAA,oBAAoB,EAAEpB,IAAI,CAAEC,KAAF,EAAS,IAAT;AAbhB,CAAX;AAgBA,OAAO,MAAMoB,MAAM,GAAGC,MAAM,CAACC,MAAP,CAAe;AACpC;AACD;AACA;AACCC,EAAAA,IAAI,EAAEtB,IAJ8B;AAKpCD,EAAAA,KALoC;AAMpCwB,EAAAA,KAAK,EAAEtB,KAN6B;AAOpCuB,EAAAA,EAAE,EAAEhB;AAPgC,CAAf,CAAf;AAUP,eAAeW,MAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport { rgba } from './colors';\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Matches @wordpress/base-styles\nconst ADMIN = {\n\ttheme: 'var( --wp-admin-theme-color, #007cba)',\n\tthemeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',\n};\n\nconst UI = {\n\ttheme: ADMIN.theme,\n\tbackground: white,\n\tbackgroundDisabled: GRAY[ 100 ],\n\tborder: GRAY[ 700 ],\n\tborderHover: GRAY[ 700 ],\n\tborderFocus: ADMIN.themeDark10,\n\tborderDisabled: GRAY[ 400 ],\n\ttextDisabled: GRAY[ 600 ],\n\ttextDark: white,\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),\n\tlightGrayPlaceholder: rgba( white, 0.65 ),\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t */\n\tgray: GRAY,\n\twhite,\n\talert: ALERT,\n\tui: UI,\n} );\n\nexport default COLORS;\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/colors-values.js"],"names":["rgba","white","GRAY","ALERT","yellow","red","green","ADMIN","theme","themeDark10","UI","background","backgroundDisabled","border","borderHover","borderFocus","borderDisabled","textDisabled","textDark","darkGrayPlaceholder","lightGrayPlaceholder","COLORS","Object","freeze","gray","alert","ui"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,UAArB;AAEA,MAAMC,KAAK,GAAG,MAAd,C,CAEA;;AACA,MAAMC,IAAI,GAAG;AACZ,OAAK,SADO;AAEZ,OAAK,SAFO;;AAGZ;AACA,OAAK,SAJO;;AAKZ;AACA,OAAK,SANO;AAOZ,OAAK,MAPO;;AAQZ;AACA,OAAK,MATO;;AAUZ;AACA,OAAK,SAXO;;AAYZ;AACA,OAAK;AAbO,CAAb,C,CAgBA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,MAAM,EAAE,SADK;AAEbC,EAAAA,GAAG,EAAE,SAFQ;AAGbC,EAAAA,KAAK,EAAE;AAHM,CAAd,C,CAMA;;AACA,MAAMC,KAAK,GAAG;AACbC,EAAAA,KAAK,EAAE,yEADM;AAEbC,EAAAA,WAAW,EACV;AAHY,CAAd;AAMA,MAAMC,EAAE,GAAG;AACVF,EAAAA,KAAK,EAAED,KAAK,CAACC,KADH;AAEVC,EAAAA,WAAW,EAAEF,KAAK,CAACE,WAFT;AAGVE,EAAAA,UAAU,EAAEV,KAHF;AAIVW,EAAAA,kBAAkB,EAAEV,IAAI,CAAE,GAAF,CAJd;AAKVW,EAAAA,MAAM,EAAEX,IAAI,CAAE,GAAF,CALF;AAMVY,EAAAA,WAAW,EAAEZ,IAAI,CAAE,GAAF,CANP;AAOVa,EAAAA,WAAW,EAAER,KAAK,CAACE,WAPT;AAQVO,EAAAA,cAAc,EAAEd,IAAI,CAAE,GAAF,CARV;AASVe,EAAAA,YAAY,EAAEf,IAAI,CAAE,GAAF,CATR;AAUVgB,EAAAA,QAAQ,EAAEjB,KAVA;AAYV;AACAkB,EAAAA,mBAAmB,EAAEnB,IAAI,CAAEE,IAAI,CAAE,GAAF,CAAN,EAAe,IAAf,CAbf;AAcVkB,EAAAA,oBAAoB,EAAEpB,IAAI,CAAEC,KAAF,EAAS,IAAT;AAdhB,CAAX;AAiBA,OAAO,MAAMoB,MAAM,GAAGC,MAAM,CAACC,MAAP,CAAe;AACpC;AACD;AACA;AACCC,EAAAA,IAAI,EAAEtB,IAJ8B;AAKpCD,EAAAA,KALoC;AAMpCwB,EAAAA,KAAK,EAAEtB,KAN6B;AAOpCuB,EAAAA,EAAE,EAAEhB;AAPgC,CAAf,CAAf;AAUP,eAAeW,MAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport { rgba } from './colors';\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Matches @wordpress/base-styles\nconst ADMIN = {\n\ttheme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',\n\tthemeDark10:\n\t\t'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',\n};\n\nconst UI = {\n\ttheme: ADMIN.theme,\n\tthemeDark10: ADMIN.themeDark10,\n\tbackground: white,\n\tbackgroundDisabled: GRAY[ 100 ],\n\tborder: GRAY[ 700 ],\n\tborderHover: GRAY[ 700 ],\n\tborderFocus: ADMIN.themeDark10,\n\tborderDisabled: GRAY[ 400 ],\n\ttextDisabled: GRAY[ 600 ],\n\ttextDark: white,\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),\n\tlightGrayPlaceholder: rgba( white, 0.65 ),\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t */\n\tgray: GRAY,\n\twhite,\n\talert: ALERT,\n\tui: UI,\n} );\n\nexport default COLORS;\n"]}

package/build-module/utils/input/base.js

@@ -9,6 +9,6 @@ import { css } from '@emotion/react';
 import { reduceMotion } from '../reduce-motion';
 import { COLORS } from '../colors-values';
 import { CONFIG } from '../';
-export const inputStyleNeutral = /*#__PURE__*/css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", CONFIG.radiusBlockUi, ";border:", CONFIG.borderWidth, " solid ", COLORS.ui.border, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleNeutral;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZb0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9iYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi9yZWR1Y2UtbW90aW9uJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgQ09ORklHIH0gZnJvbSAnLi4vJztcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVOZXV0cmFsID0gY3NzYFxuXHRib3gtc2hhZG93OiAwIDAgMCB0cmFuc3BhcmVudDtcblx0dHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjFzIGxpbmVhcjtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c0Jsb2NrVWkgfTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH0gfTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgaW5wdXRTdHlsZUZvY3VzID0gY3NzYFxuXHRib3JkZXItY29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRib3gtc2hhZG93OiAwIDAgMFxuXHRcdGNhbGMoICR7IENPTkZJRy5ib3JkZXJXaWR0aEZvY3VzIH0gLSAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSApXG5cdFx0dmFyKCAtLXdwLWFkbWluLXRoZW1lLWNvbG9yICk7XG5cblx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0b3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuYDtcbiJdfQ== */");
-export const inputStyleFocus = /*#__PURE__*/css("border-color:var( --wp-admin-theme-color );box-shadow:0 0 0 calc( ", CONFIG.borderWidthFocus, " - ", CONFIG.borderWidth, " ) var( --wp-admin-theme-color );outline:2px solid transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleFocus;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vcmVkdWNlLW1vdGlvbic7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi9jb2xvcnMtdmFsdWVzJztcbmltcG9ydCB7IENPTkZJRyB9IGZyb20gJy4uLyc7XG5cbmV4cG9ydCBjb25zdCBpbnB1dFN0eWxlTmV1dHJhbCA9IGNzc2Bcblx0Ym94LXNoYWRvdzogMCAwIDAgdHJhbnNwYXJlbnQ7XG5cdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXI7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNCbG9ja1VpIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9IH07XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVGb2N1cyA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiB2YXIoIC0td3AtYWRtaW4tdGhlbWUtY29sb3IgKTtcblx0Ym94LXNoYWRvdzogMCAwIDBcblx0XHRjYWxjKCAkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyB9IC0gJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gKVxuXHRcdHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXG5cdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbmA7XG4iXX0= */");
+export const inputStyleNeutral = /*#__PURE__*/css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", CONFIG.radiusBlockUi, ";border:", CONFIG.borderWidth, " solid ", COLORS.ui.border, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleNeutral;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZb0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9iYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi9yZWR1Y2UtbW90aW9uJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgQ09ORklHIH0gZnJvbSAnLi4vJztcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVOZXV0cmFsID0gY3NzYFxuXHRib3gtc2hhZG93OiAwIDAgMCB0cmFuc3BhcmVudDtcblx0dHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjFzIGxpbmVhcjtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c0Jsb2NrVWkgfTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH0gfTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgaW5wdXRTdHlsZUZvY3VzID0gY3NzYFxuXHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3gtc2hhZG93OiAwIDAgMFxuXHRcdGNhbGMoICR7IENPTkZJRy5ib3JkZXJXaWR0aEZvY3VzIH0gLSAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSApXG5cdFx0JHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cblx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0b3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuYDtcbiJdfQ== */");
+export const inputStyleFocus = /*#__PURE__*/css("border-color:", COLORS.ui.theme, ";box-shadow:0 0 0 calc( ", CONFIG.borderWidthFocus, " - ", CONFIG.borderWidth, " ) ", COLORS.ui.theme, ";outline:2px solid transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleFocus;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vcmVkdWNlLW1vdGlvbic7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi9jb2xvcnMtdmFsdWVzJztcbmltcG9ydCB7IENPTkZJRyB9IGZyb20gJy4uLyc7XG5cbmV4cG9ydCBjb25zdCBpbnB1dFN0eWxlTmV1dHJhbCA9IGNzc2Bcblx0Ym94LXNoYWRvdzogMCAwIDAgdHJhbnNwYXJlbnQ7XG5cdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXI7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNCbG9ja1VpIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9IH07XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVGb2N1cyA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym94LXNoYWRvdzogMCAwIDBcblx0XHRjYWxjKCAkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyB9IC0gJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gKVxuXHRcdCR7IENPTE9SUy51aS50aGVtZSB9O1xuXG5cdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbmA7XG4iXX0= */");
 //# sourceMappingURL=base.js.map

package/build-module/utils/input/base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/input/base.js"],"names":["css","reduceMotion","COLORS","CONFIG","inputStyleNeutral","radiusBlockUi","borderWidth","ui","border","inputStyleFocus","borderWidthFocus"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,MAAT,QAAuB,KAAvB;AAEA,OAAO,MAAMC,iBAAiB,gBAAGJ,GAAH,kFAGXG,MAAM,CAACE,aAHI,cAIlBF,MAAM,CAACG,WAJW,aAIYJ,MAAM,CAACK,EAAP,CAAUC,MAJtB,uhDAAvB;AAQP,OAAO,MAAMC,eAAe,gBAAGT,GAAH,uEAGjBG,MAAM,CAACO,gBAHU,SAGcP,MAAM,CAACG,WAHrB,mlDAArB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { reduceMotion } from '../reduce-motion';\nimport { COLORS } from '../colors-values';\nimport { CONFIG } from '../';\n\nexport const inputStyleNeutral = css`\n\tbox-shadow: 0 0 0 transparent;\n\ttransition: box-shadow 0.1s linear;\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border } };\n\t${ reduceMotion( 'transition' ) }\n`;\n\nexport const inputStyleFocus = css`\n\tborder-color: var( --wp-admin-theme-color );\n\tbox-shadow: 0 0 0\n\t\tcalc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )\n\t\tvar( --wp-admin-theme-color );\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/input/base.js"],"names":["css","reduceMotion","COLORS","CONFIG","inputStyleNeutral","radiusBlockUi","borderWidth","ui","border","inputStyleFocus","theme","borderWidthFocus"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,MAAT,QAAuB,KAAvB;AAEA,OAAO,MAAMC,iBAAiB,gBAAGJ,GAAH,kFAGXG,MAAM,CAACE,aAHI,cAIlBF,MAAM,CAACG,WAJW,aAIYJ,MAAM,CAACK,EAAP,CAAUC,MAJtB,+/CAAvB;AAQP,OAAO,MAAMC,eAAe,gBAAGT,GAAH,kBACVE,MAAM,CAACK,EAAP,CAAUG,KADA,8BAGjBP,MAAM,CAACQ,gBAHU,SAGcR,MAAM,CAACG,WAHrB,SAIvBJ,MAAM,CAACK,EAAP,CAAUG,KAJa,2hDAArB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { reduceMotion } from '../reduce-motion';\nimport { COLORS } from '../colors-values';\nimport { CONFIG } from '../';\n\nexport const inputStyleNeutral = css`\n\tbox-shadow: 0 0 0 transparent;\n\ttransition: box-shadow 0.1s linear;\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border } };\n\t${ reduceMotion( 'transition' ) }\n`;\n\nexport const inputStyleFocus = css`\n\tborder-color: ${ COLORS.ui.theme };\n\tbox-shadow: 0 0 0\n\t\tcalc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )\n\t\t${ COLORS.ui.theme };\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n`;\n"]}

package/build-module/view/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/view/index.js"],"names":["default","View"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB,QAAgC,aAAhC","sourcesContent":["export { default as View } from './component';\n"]}
+{"version":3,"sources":["@wordpress/components/src/view/index.ts"],"names":["default","View"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB,QAAgC,aAAhC","sourcesContent":["export { default as View } from './component';\n"]}

package/build-style/style-rtl.css

@@ -171,7 +171,7 @@
   width: 100%;
 }
 .components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-button-group {
@@ -566,12 +566,12 @@ p + .components-button.is-tertiary {
   }
 }
 .components-checkbox-control__input[type=checkbox]:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
-  background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
@@ -880,7 +880,7 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 1px solid transparent;
 }
 .components-color-palette__custom-color:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-width: 2px;
 }
 
@@ -985,6 +985,11 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 0;
 }
 
+.components-custom-select-control__hint {
+  color: #949494;
+  margin-right: 10px;
+}
+
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
   background-color: #fff;
@@ -1021,7 +1026,7 @@ input.components-combobox-control__input[type=text]:focus {
   background: #ddd;
 }
 .components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #757575;
+  color: #949494;
   text-align: left;
   padding-left: 4px;
 }
@@ -1095,7 +1100,7 @@ body.is-dragging-components-draggable {
   height: 100%;
   width: 100%;
   display: flex;
-  background-color: var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   align-items: center;
   justify-content: center;
   z-index: 50;
@@ -1268,12 +1273,12 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-admin-theme-color);
-  border: 1px solid var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border: 9px solid transparent;
 }
 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1417,7 +1422,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
   background: transparent;
@@ -1508,7 +1513,7 @@ body.is-dragging-components-draggable {
   cursor: pointer;
 }
 .components-form-token-field__suggestion.is-selected {
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
 }
 
@@ -1628,27 +1633,50 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 
-.is-focusing-regions [role=region]:focus::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  pointer-events: none;
-  outline: 4px solid transparent;
-  box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions [role=region]:focus {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
 }
-@supports (outline-offset: 1px) {
-  .is-focusing-regions [role=region]:focus::after {
-    content: none;
-  }
-  .is-focusing-regions [role=region]:focus {
-    outline-style: solid;
-    outline-color: var(--wp-admin-theme-color);
-    outline-width: 4px;
-    outline-offset: -4px;
-  }
+.is-focusing-regions [role=region]:focus .interface-navigable-region__stacker {
+  position: relative;
+  z-index: -1;
+}
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .interface-navigable-region__stacker,
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__sidebar .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__actions .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions [role=region].interface-interface-skeleton__actions:focus .editor-post-publish-panel {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer {
+  z-index: 31;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle.is-open {
+  outline: none;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle__button {
+  z-index: -1;
+}
+
+.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+  height: 100%;
 }
 
 .components-menu-group + .components-menu-group {
@@ -1714,7 +1742,7 @@ body.is-dragging-components-draggable {
 .components-menu-item__button.components-button:disabled.is-tertiary,
 .components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
   background: none;
-  color: var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   opacity: 0.3;
 }
 
@@ -1894,7 +1922,7 @@ body.is-dragging-components-draggable {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   background-color: #fff;
-  border-right: 4px solid var(--wp-admin-theme-color);
+  border-right: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   margin: 5px 15px 2px;
   padding: 8px 12px;
   align-items: center;
@@ -2059,7 +2087,7 @@ body.is-dragging-components-draggable {
   }
 }
 .components-panel__body-toggle.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2582,7 +2610,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   left: calc(50% - 8px);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 
@@ -2592,7 +2620,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   width: 3px;
   height: 3px;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   cursor: inherit;
   position: absolute;
   top: calc(50% - 1px);
@@ -2813,7 +2841,7 @@ body.lockscroll {
 }
 .components-search-control input[type=search].components-search-control__input:focus {
   background: #fff;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-search-control input[type=search].components-search-control__input::placeholder {
   color: #757575;
@@ -2880,7 +2908,7 @@ body.lockscroll {
   }
 }
 .components-snackbar:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-snackbar.components-snackbar-explicit-dismiss {
   cursor: default;
@@ -2916,7 +2944,7 @@ body.lockscroll {
   outline: 1px dotted #fff;
 }
 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-snackbar__content {
@@ -2970,10 +2998,10 @@ body.lockscroll {
   visibility: hidden;
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
-  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-tab-panel__tabs-item.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   position: relative;
 }
 .components-tab-panel__tabs-item.is-active::before {
@@ -2986,10 +3014,10 @@ body.lockscroll {
   border-bottom: 1.5px solid transparent;
 }
 .components-tab-panel__tabs-item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-tab-panel__tabs-item.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)), inset 0 -3px 0 0 var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-text-control__input,

package/build-style/style.css

@@ -171,7 +171,7 @@
   width: 100%;
 }
 .components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-button-group {
@@ -566,12 +566,12 @@ p + .components-button.is-tertiary {
   }
 }
 .components-checkbox-control__input[type=checkbox]:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
-  background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
@@ -882,7 +882,7 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 1px solid transparent;
 }
 .components-color-palette__custom-color:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-width: 2px;
 }
 
@@ -988,6 +988,11 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 0;
 }
 
+.components-custom-select-control__hint {
+  color: #949494;
+  margin-left: 10px;
+}
+
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
   background-color: #fff;
@@ -1024,7 +1029,7 @@ input.components-combobox-control__input[type=text]:focus {
   background: #ddd;
 }
 .components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #757575;
+  color: #949494;
   text-align: right;
   padding-right: 4px;
 }
@@ -1098,7 +1103,7 @@ body.is-dragging-components-draggable {
   height: 100%;
   width: 100%;
   display: flex;
-  background-color: var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   align-items: center;
   justify-content: center;
   z-index: 50;
@@ -1271,12 +1276,12 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-admin-theme-color);
-  border: 1px solid var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border: 9px solid transparent;
 }
 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1420,7 +1425,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
   background: transparent;
@@ -1511,7 +1516,7 @@ body.is-dragging-components-draggable {
   cursor: pointer;
 }
 .components-form-token-field__suggestion.is-selected {
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
 }
 
@@ -1631,27 +1636,50 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 
-.is-focusing-regions [role=region]:focus::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  outline: 4px solid transparent;
-  box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions [role=region]:focus {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
 }
-@supports (outline-offset: 1px) {
-  .is-focusing-regions [role=region]:focus::after {
-    content: none;
-  }
-  .is-focusing-regions [role=region]:focus {
-    outline-style: solid;
-    outline-color: var(--wp-admin-theme-color);
-    outline-width: 4px;
-    outline-offset: -4px;
-  }
+.is-focusing-regions [role=region]:focus .interface-navigable-region__stacker {
+  position: relative;
+  z-index: -1;
+}
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .interface-navigable-region__stacker,
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__sidebar .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__actions .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions [role=region].interface-interface-skeleton__actions:focus .editor-post-publish-panel {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer {
+  z-index: 31;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle.is-open {
+  outline: none;
+}
+.is-focusing-regions .interface-interface-skeleton__drawer .edit-site-navigation-toggle__button {
+  z-index: -1;
+}
+
+.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+  height: 100%;
 }
 
 .components-menu-group + .components-menu-group {
@@ -1717,7 +1745,7 @@ body.is-dragging-components-draggable {
 .components-menu-item__button.components-button:disabled.is-tertiary,
 .components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
   background: none;
-  color: var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   opacity: 0.3;
 }
 
@@ -1897,7 +1925,7 @@ body.is-dragging-components-draggable {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   background-color: #fff;
-  border-left: 4px solid var(--wp-admin-theme-color);
+  border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   margin: 5px 15px 2px;
   padding: 8px 12px;
   align-items: center;
@@ -2064,7 +2092,7 @@ body.is-dragging-components-draggable {
   }
 }
 .components-panel__body-toggle.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2589,7 +2617,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   right: calc(50% - 8px);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 
@@ -2599,7 +2627,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   width: 3px;
   height: 3px;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   cursor: inherit;
   position: absolute;
   top: calc(50% - 1px);
@@ -2823,7 +2851,7 @@ body.lockscroll {
 }
 .components-search-control input[type=search].components-search-control__input:focus {
   background: #fff;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-search-control input[type=search].components-search-control__input::placeholder {
   color: #757575;
@@ -2890,7 +2918,7 @@ body.lockscroll {
   }
 }
 .components-snackbar:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-snackbar.components-snackbar-explicit-dismiss {
   cursor: default;
@@ -2926,7 +2954,7 @@ body.lockscroll {
   outline: 1px dotted #fff;
 }
 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-snackbar__content {
@@ -2980,10 +3008,10 @@ body.lockscroll {
   visibility: hidden;
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
-  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-tab-panel__tabs-item.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   position: relative;
 }
 .components-tab-panel__tabs-item.is-active::before {
@@ -2996,10 +3024,10 @@ body.lockscroll {
   border-bottom: 1.5px solid transparent;
 }
 .components-tab-panel__tabs-item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-tab-panel__tabs-item.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)), inset 0 -3px 0 0 var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-text-control__input,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { LabelProps } from '../../border-control/types';
+import type { LabelProps, BorderControlProps } from '../../border-control/types';
 /**
  * The `BorderBoxControl` effectively has two view states. The first, a "linked"
  * view, allows configuration of a flat border via a single `BorderControl`.
@@ -49,13 +49,13 @@ import type { LabelProps } from '../../border-control/types';
  * };
  * ```
  */
-export declare const BorderBoxControl: import("../../ui/context").WordPressComponent<"div", import("../../border-control/types").ColorProps & LabelProps & {
-    enableStyle?: boolean | undefined;
+export declare const BorderBoxControl: import("../../ui/context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "enableAlpha" | "__experimentalHasMultipleOrigins" | "__experimentalIsRenderedInSidebar"> & {
+    disableCustomColors?: boolean | undefined;
+} & LabelProps & Pick<BorderControlProps, "size" | "enableStyle"> & {
     onChange: (value: import("../types").AnyBorder) => void;
     popoverPlacement?: import("@floating-ui/core").Placement | undefined;
     popoverOffset?: number | undefined;
     value: import("../types").AnyBorder;
-    size?: "default" | "__unstable-large" | undefined;
 } & import("react").RefAttributes<any>, false>;
 export default BorderBoxControl;
 //# sourceMappingURL=component.d.ts.map

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

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

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

@@ -4,7 +4,10 @@ import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 export declare function useBorderBoxControl(props: WordPressComponentProps<BorderBoxControlProps, 'div'>): {
     className: string;
+    colors: (import("../../color-palette/types").ColorObject | import("../../color-palette/types").PaletteObject)[];
     disableUnits: boolean;
+    enableAlpha: boolean;
+    enableStyle: boolean;
     hasMixedBorders: boolean;
     isLinked: boolean;
     linkedControlClassName: string;
@@ -12,19 +15,16 @@ export declare function useBorderBoxControl(props: WordPressComponentProps<Borde
     onSplitChange: (newBorder: Border | undefined, side: BorderSide) => void;
     toggleLinked: () => void;
     linkedValue: Border | undefined;
+    size: "default" | "__unstable-large";
     splitValue: Borders | undefined;
     wrapperClassName: string;
-    colors?: import("../../border-control/types").Colors | undefined;
+    __experimentalHasMultipleOrigins: boolean;
+    __experimentalIsRenderedInSidebar: boolean;
     disableCustomColors?: boolean | undefined;
-    enableAlpha?: boolean | undefined;
-    __experimentalHasMultipleOrigins?: boolean | undefined;
-    __experimentalIsRenderedInSidebar?: boolean | undefined;
     hideLabelFromVision?: boolean | undefined;
     label?: string | undefined;
-    enableStyle?: boolean | undefined;
     popoverPlacement?: import("@floating-ui/core").Placement | undefined;
     popoverOffset?: number | undefined;
-    size?: "default" | "__unstable-large" | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;