npm - @wordpress/components - Versions diffs - 25.0.0 → 25.1.0 - Mend

@wordpress/components 25.0.0 → 25.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1415) hide show

package/build-module/surface/styles.js CHANGED Viewed

@@ -9,13 +9,12 @@ import { css } from '@emotion/react';
 import { CONFIG, COLORS } from '../utils';
 export const Surface = /*#__PURE__*/css("background-color:", CONFIG.surfaceColor, ";color:", COLORS.gray[900], ";position:relative;" + (process.env.NODE_ENV === "production" ? "" : ";label:Surface;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3VyZmFjZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVzBCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3VyZmFjZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBTdXJmYWNlVmFyaWFudCwgU3VyZmFjZVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBTdXJmYWNlID0gY3NzYFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuc3VyZmFjZUNvbG9yIH07XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhY2tncm91bmQgPSBjc3NgXG5cdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5zdXJmYWNlQmFja2dyb3VuZENvbG9yIH07XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0Qm9yZGVycygge1xuXHRib3JkZXJCb3R0b20sXG5cdGJvcmRlckxlZnQsXG5cdGJvcmRlclJpZ2h0LFxuXHRib3JkZXJUb3AsXG59OiBQaWNrPFxuXHRTdXJmYWNlUHJvcHMsXG5cdCdib3JkZXJCb3R0b20nIHwgJ2JvcmRlckxlZnQnIHwgJ2JvcmRlclJpZ2h0JyB8ICdib3JkZXJUb3AnXG4+ICkge1xuXHRjb25zdCBib3JkZXJTdHlsZSA9IGAxcHggc29saWQgJHsgQ09ORklHLnN1cmZhY2VCb3JkZXJDb2xvciB9YDtcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Ym9yZGVyQm90dG9tOiBib3JkZXJCb3R0b20gPyBib3JkZXJTdHlsZSA6IHVuZGVmaW5lZCxcblx0XHRib3JkZXJMZWZ0OiBib3JkZXJMZWZ0ID8gYm9yZGVyU3R5bGUgOiB1bmRlZmluZWQsXG5cdFx0Ym9yZGVyUmlnaHQ6IGJvcmRlclJpZ2h0ID8gYm9yZGVyU3R5bGUgOiB1bmRlZmluZWQsXG5cdFx0Ym9yZGVyVG9wOiBib3JkZXJUb3AgPyBib3JkZXJTdHlsZSA6IHVuZGVmaW5lZCxcblx0fSApO1xufVxuXG5leHBvcnQgY29uc3QgcHJpbWFyeSA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3Qgc2Vjb25kYXJ5ID0gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuc3VyZmFjZUJhY2tncm91bmRUaW50Q29sb3IgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCB0ZXJ0aWFyeSA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLnN1cmZhY2VCYWNrZ3JvdW5kVGVydGlhcnlDb2xvciB9O1xuYDtcblxuY29uc3QgY3VzdG9tQmFja2dyb3VuZFNpemUgPSAoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZTogc3RyaW5nICkgPT5cblx0WyBzdXJmYWNlQmFja2dyb3VuZFNpemUsIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZSBdLmpvaW4oICcgJyApO1xuXG5jb25zdCBkb3R0ZWRCYWNrZ3JvdW5kMSA9ICggc3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkOiBzdHJpbmcgKSA9PlxuXHRbXG5cdFx0JzkwZGVnJyxcblx0XHRbIENPTkZJRy5zdXJmYWNlQmFja2dyb3VuZENvbG9yLCBzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWQgXS5qb2luKFxuXHRcdFx0JyAnXG5cdFx0KSxcblx0XHQndHJhbnNwYXJlbnQgMSUnLFxuXHRdLmpvaW4oICcsJyApO1xuXG5jb25zdCBkb3R0ZWRCYWNrZ3JvdW5kMiA9ICggc3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkOiBzdHJpbmcgKSA9PlxuXHRbXG5cdFx0WyBDT05GSUcuc3VyZmFjZUJhY2tncm91bmRDb2xvciwgc3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkIF0uam9pbihcblx0XHRcdCcgJ1xuXHRcdCksXG5cdFx0J3RyYW5zcGFyZW50IDElJyxcblx0XS5qb2luKCAnLCcgKTtcblxuY29uc3QgZG90dGVkQmFja2dyb3VuZENvbWJpbmVkID0gKCBzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWQ6IHN0cmluZyApID0+XG5cdFtcblx0XHRgbGluZWFyLWdyYWRpZW50KCAkeyBkb3R0ZWRCYWNrZ3JvdW5kMShcblx0XHRcdHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZFxuXHRcdCkgfSApIGNlbnRlcmAsXG5cdFx0YGxpbmVhci1ncmFkaWVudCggJHsgZG90dGVkQmFja2dyb3VuZDIoXG5cdFx0XHRzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWRcblx0XHQpIH0gKSBjZW50ZXJgLFxuXHRcdENPTkZJRy5zdXJmYWNlQm9yZGVyQm9sZENvbG9yLFxuXHRdLmpvaW4oICcsJyApO1xuXG5leHBvcnQgY29uc3QgZ2V0RG90dGVkID0gKFxuXHRzdXJmYWNlQmFja2dyb3VuZFNpemU6IHN0cmluZyxcblx0c3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkOiBzdHJpbmdcbikgPT4gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBkb3R0ZWRCYWNrZ3JvdW5kQ29tYmluZWQoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZCApIH07XG5cdGJhY2tncm91bmQtc2l6ZTogJHsgY3VzdG9tQmFja2dyb3VuZFNpemUoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZSApIH07XG5gO1xuXG5jb25zdCBncmlkQmFja2dyb3VuZDEgPSBbXG5cdGAkeyBDT05GSUcuc3VyZmFjZUJvcmRlclN1YnRsZUNvbG9yIH0gMXB4YCxcblx0J3RyYW5zcGFyZW50IDFweCcsXG5dLmpvaW4oICcsJyApO1xuXG5jb25zdCBncmlkQmFja2dyb3VuZDIgPSBbXG5cdCc5MGRlZycsXG5cdGAkeyBDT05GSUcuc3VyZmFjZUJvcmRlclN1YnRsZUNvbG9yIH0gMXB4YCxcblx0J3RyYW5zcGFyZW50IDFweCcsXG5dLmpvaW4oICcsJyApO1xuXG5jb25zdCBncmlkQmFja2dyb3VuZENvbWJpbmVkID0gW1xuXHRgbGluZWFyLWdyYWRpZW50KCAkeyBncmlkQmFja2dyb3VuZDEgfSApYCxcblx0YGxpbmVhci1ncmFkaWVudCggJHsgZ3JpZEJhY2tncm91bmQyIH0gKWAsXG5dLmpvaW4oICcsJyApO1xuXG5leHBvcnQgY29uc3QgZ2V0R3JpZCA9ICggc3VyZmFjZUJhY2tncm91bmRTaXplOiBzdHJpbmcgKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0YmFja2dyb3VuZDogJHsgQ09ORklHLnN1cmZhY2VCYWNrZ3JvdW5kQ29sb3IgfTtcblx0XHRiYWNrZ3JvdW5kLWltYWdlOiAkeyBncmlkQmFja2dyb3VuZENvbWJpbmVkIH07XG5cdFx0YmFja2dyb3VuZC1zaXplOiAkeyBjdXN0b21CYWNrZ3JvdW5kU2l6ZSggc3VyZmFjZUJhY2tncm91bmRTaXplICkgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRWYXJpYW50ID0gKFxuXHR2YXJpYW50OiBTdXJmYWNlVmFyaWFudCxcblx0c3VyZmFjZUJhY2tncm91bmRTaXplOiBzdHJpbmcsXG5cdHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZDogc3RyaW5nXG4pID0+IHtcblx0c3dpdGNoICggdmFyaWFudCApIHtcblx0XHRjYXNlICdkb3R0ZWQnOiB7XG5cdFx0XHRyZXR1cm4gZ2V0RG90dGVkKFxuXHRcdFx0XHRzdXJmYWNlQmFja2dyb3VuZFNpemUsXG5cdFx0XHRcdHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZFxuXHRcdFx0KTtcblx0XHR9XG5cdFx0Y2FzZSAnZ3JpZCc6IHtcblx0XHRcdHJldHVybiBnZXRHcmlkKCBzdXJmYWNlQmFja2dyb3VuZFNpemUgKTtcblx0XHR9XG5cdFx0Y2FzZSAncHJpbWFyeSc6IHtcblx0XHRcdHJldHVybiBwcmltYXJ5O1xuXHRcdH1cblx0XHRjYXNlICdzZWNvbmRhcnknOiB7XG5cdFx0XHRyZXR1cm4gc2Vjb25kYXJ5O1xuXHRcdH1cblx0XHRjYXNlICd0ZXJ0aWFyeSc6IHtcblx0XHRcdHJldHVybiB0ZXJ0aWFyeTtcblx0XHR9XG5cdH1cbn07XG4iXX0= */");
 export const background = /*#__PURE__*/css("background-color:", CONFIG.surfaceBackgroundColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:background;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3VyZmFjZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUI2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3N1cmZhY2Uvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU3VyZmFjZVZhcmlhbnQsIFN1cmZhY2VQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgU3VyZmFjZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09ORklHLnN1cmZhY2VDb2xvciB9O1xuXHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBiYWNrZ3JvdW5kID0gY3NzYFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuc3VyZmFjZUJhY2tncm91bmRDb2xvciB9O1xuYDtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldEJvcmRlcnMoIHtcblx0Ym9yZGVyQm90dG9tLFxuXHRib3JkZXJMZWZ0LFxuXHRib3JkZXJSaWdodCxcblx0Ym9yZGVyVG9wLFxufTogUGljazxcblx0U3VyZmFjZVByb3BzLFxuXHQnYm9yZGVyQm90dG9tJyB8ICdib3JkZXJMZWZ0JyB8ICdib3JkZXJSaWdodCcgfCAnYm9yZGVyVG9wJ1xuPiApIHtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBgMXB4IHNvbGlkICR7IENPTkZJRy5zdXJmYWNlQm9yZGVyQ29sb3IgfWA7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGJvcmRlckJvdHRvbTogYm9yZGVyQm90dG9tID8gYm9yZGVyU3R5bGUgOiB1bmRlZmluZWQsXG5cdFx0Ym9yZGVyTGVmdDogYm9yZGVyTGVmdCA/IGJvcmRlclN0eWxlIDogdW5kZWZpbmVkLFxuXHRcdGJvcmRlclJpZ2h0OiBib3JkZXJSaWdodCA/IGJvcmRlclN0eWxlIDogdW5kZWZpbmVkLFxuXHRcdGJvcmRlclRvcDogYm9yZGVyVG9wID8gYm9yZGVyU3R5bGUgOiB1bmRlZmluZWQsXG5cdH0gKTtcbn1cblxuZXhwb3J0IGNvbnN0IHByaW1hcnkgPSBjc3NgYDtcblxuZXhwb3J0IGNvbnN0IHNlY29uZGFyeSA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLnN1cmZhY2VCYWNrZ3JvdW5kVGludENvbG9yIH07XG5gO1xuXG5leHBvcnQgY29uc3QgdGVydGlhcnkgPSBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTkZJRy5zdXJmYWNlQmFja2dyb3VuZFRlcnRpYXJ5Q29sb3IgfTtcbmA7XG5cbmNvbnN0IGN1c3RvbUJhY2tncm91bmRTaXplID0gKCBzdXJmYWNlQmFja2dyb3VuZFNpemU6IHN0cmluZyApID0+XG5cdFsgc3VyZmFjZUJhY2tncm91bmRTaXplLCBzdXJmYWNlQmFja2dyb3VuZFNpemUgXS5qb2luKCAnICcgKTtcblxuY29uc3QgZG90dGVkQmFja2dyb3VuZDEgPSAoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZDogc3RyaW5nICkgPT5cblx0W1xuXHRcdCc5MGRlZycsXG5cdFx0WyBDT05GSUcuc3VyZmFjZUJhY2tncm91bmRDb2xvciwgc3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkIF0uam9pbihcblx0XHRcdCcgJ1xuXHRcdCksXG5cdFx0J3RyYW5zcGFyZW50IDElJyxcblx0XS5qb2luKCAnLCcgKTtcblxuY29uc3QgZG90dGVkQmFja2dyb3VuZDIgPSAoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZDogc3RyaW5nICkgPT5cblx0W1xuXHRcdFsgQ09ORklHLnN1cmZhY2VCYWNrZ3JvdW5kQ29sb3IsIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZCBdLmpvaW4oXG5cdFx0XHQnICdcblx0XHQpLFxuXHRcdCd0cmFuc3BhcmVudCAxJScsXG5cdF0uam9pbiggJywnICk7XG5cbmNvbnN0IGRvdHRlZEJhY2tncm91bmRDb21iaW5lZCA9ICggc3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkOiBzdHJpbmcgKSA9PlxuXHRbXG5cdFx0YGxpbmVhci1ncmFkaWVudCggJHsgZG90dGVkQmFja2dyb3VuZDEoXG5cdFx0XHRzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWRcblx0XHQpIH0gKSBjZW50ZXJgLFxuXHRcdGBsaW5lYXItZ3JhZGllbnQoICR7IGRvdHRlZEJhY2tncm91bmQyKFxuXHRcdFx0c3VyZmFjZUJhY2tncm91bmRTaXplRG90dGVkXG5cdFx0KSB9ICkgY2VudGVyYCxcblx0XHRDT05GSUcuc3VyZmFjZUJvcmRlckJvbGRDb2xvcixcblx0XS5qb2luKCAnLCcgKTtcblxuZXhwb3J0IGNvbnN0IGdldERvdHRlZCA9IChcblx0c3VyZmFjZUJhY2tncm91bmRTaXplOiBzdHJpbmcsXG5cdHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZURvdHRlZDogc3RyaW5nXG4pID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgZG90dGVkQmFja2dyb3VuZENvbWJpbmVkKCBzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWQgKSB9O1xuXHRiYWNrZ3JvdW5kLXNpemU6ICR7IGN1c3RvbUJhY2tncm91bmRTaXplKCBzdXJmYWNlQmFja2dyb3VuZFNpemUgKSB9O1xuYDtcblxuY29uc3QgZ3JpZEJhY2tncm91bmQxID0gW1xuXHRgJHsgQ09ORklHLnN1cmZhY2VCb3JkZXJTdWJ0bGVDb2xvciB9IDFweGAsXG5cdCd0cmFuc3BhcmVudCAxcHgnLFxuXS5qb2luKCAnLCcgKTtcblxuY29uc3QgZ3JpZEJhY2tncm91bmQyID0gW1xuXHQnOTBkZWcnLFxuXHRgJHsgQ09ORklHLnN1cmZhY2VCb3JkZXJTdWJ0bGVDb2xvciB9IDFweGAsXG5cdCd0cmFuc3BhcmVudCAxcHgnLFxuXS5qb2luKCAnLCcgKTtcblxuY29uc3QgZ3JpZEJhY2tncm91bmRDb21iaW5lZCA9IFtcblx0YGxpbmVhci1ncmFkaWVudCggJHsgZ3JpZEJhY2tncm91bmQxIH0gKWAsXG5cdGBsaW5lYXItZ3JhZGllbnQoICR7IGdyaWRCYWNrZ3JvdW5kMiB9IClgLFxuXS5qb2luKCAnLCcgKTtcblxuZXhwb3J0IGNvbnN0IGdldEdyaWQgPSAoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZTogc3RyaW5nICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5zdXJmYWNlQmFja2dyb3VuZENvbG9yIH07XG5cdFx0YmFja2dyb3VuZC1pbWFnZTogJHsgZ3JpZEJhY2tncm91bmRDb21iaW5lZCB9O1xuXHRcdGJhY2tncm91bmQtc2l6ZTogJHsgY3VzdG9tQmFja2dyb3VuZFNpemUoIHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZSApIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgZ2V0VmFyaWFudCA9IChcblx0dmFyaWFudDogU3VyZmFjZVZhcmlhbnQsXG5cdHN1cmZhY2VCYWNrZ3JvdW5kU2l6ZTogc3RyaW5nLFxuXHRzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWQ6IHN0cmluZ1xuKSA9PiB7XG5cdHN3aXRjaCAoIHZhcmlhbnQgKSB7XG5cdFx0Y2FzZSAnZG90dGVkJzoge1xuXHRcdFx0cmV0dXJuIGdldERvdHRlZChcblx0XHRcdFx0c3VyZmFjZUJhY2tncm91bmRTaXplLFxuXHRcdFx0XHRzdXJmYWNlQmFja2dyb3VuZFNpemVEb3R0ZWRcblx0XHRcdCk7XG5cdFx0fVxuXHRcdGNhc2UgJ2dyaWQnOiB7XG5cdFx0XHRyZXR1cm4gZ2V0R3JpZCggc3VyZmFjZUJhY2tncm91bmRTaXplICk7XG5cdFx0fVxuXHRcdGNhc2UgJ3ByaW1hcnknOiB7XG5cdFx0XHRyZXR1cm4gcHJpbWFyeTtcblx0XHR9XG5cdFx0Y2FzZSAnc2Vjb25kYXJ5Jzoge1xuXHRcdFx0cmV0dXJuIHNlY29uZGFyeTtcblx0XHR9XG5cdFx0Y2FzZSAndGVydGlhcnknOiB7XG5cdFx0XHRyZXR1cm4gdGVydGlhcnk7XG5cdFx0fVxuXHR9XG59O1xuIl19 */");
-export function getBorders(_ref) {
-  let {
-    borderBottom,
-    borderLeft,
-    borderRight,
-    borderTop
-  } = _ref;
+export function getBorders({
+  borderBottom,
+  borderLeft,
+  borderRight,
+  borderTop
+}) {
   const borderStyle = `1px solid ${CONFIG.surfaceBorderColor}`;
   return /*#__PURE__*/css({
     borderBottom: borderBottom ? borderStyle : undefined,

package/build-module/surface/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/surface/styles.ts"],"names":["css","CONFIG","COLORS","Surface","surfaceColor","gray","background","surfaceBackgroundColor","getBorders","borderBottom","borderLeft","borderRight","borderTop","borderStyle","surfaceBorderColor","undefined","primary","secondary","surfaceBackgroundTintColor","tertiary","surfaceBackgroundTertiaryColor","customBackgroundSize","surfaceBackgroundSize","join","dottedBackground1","surfaceBackgroundSizeDotted","dottedBackground2","dottedBackgroundCombined","surfaceBorderBoldColor","getDotted","gridBackground1","surfaceBorderSubtleColor","gridBackground2","gridBackgroundCombined","getGrid","getVariant","variant"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,UAA/B;AAGA,OAAO,MAAMC,OAAO,gBAAGH,GAAH,sBACEC,MAAM,CAACG,YADT,aAETF,MAAM,CAACG,IAAP,CAAa,GAAb,CAFS,ukKAAb;AAMP,OAAO,MAAMC,UAAU,gBAAGN,GAAH,sBACDC,MAAM,CAACM,sBADN,wjKAAhB;AAIP,OAAO,SAASC,UAAT,~~OAQH~~;~~AAAA,MARwB;~~AAC3BC,~~IAAAA~~,YAD2B;AAE3BC,~~IAAAA~~,UAF2B;AAG3BC,~~IAAAA~~,WAH2B;AAI3BC,~~IAAAA~~;AAJ2B,~~GAQxB~~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","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n Internal dependencies\n */\nimport { CONFIG, COLORS } from '../utils';\nimport type { SurfaceVariant, SurfaceProps } from './types';\n\nexport const Surface = css`\n\tbackground-color: ${ CONFIG.surfaceColor };\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tposition: relative;\n`;\n\nexport const background = css`\n\tbackground-color: ${ CONFIG.surfaceBackgroundColor };\n`;\n\nexport function getBorders( {\n\tborderBottom,\n\tborderLeft,\n\tborderRight,\n\tborderTop,\n}: Pick<\n\tSurfaceProps,\n\t'borderBottom' \| 'borderLeft' \| 'borderRight' \| 'borderTop'\n> ) {\n\tconst borderStyle = `1px solid ${ CONFIG.surfaceBorderColor }`;\n\n\treturn css( {\n\t\tborderBottom: borderBottom ? borderStyle : undefined,\n\t\tborderLeft: borderLeft ? borderStyle : undefined,\n\t\tborderRight: borderRight ? borderStyle : undefined,\n\t\tborderTop: borderTop ? borderStyle : undefined,\n\t} );\n}\n\nexport const primary = css``;\n\nexport const secondary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTintColor };\n`;\n\nexport const tertiary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTertiaryColor };\n`;\n\nconst customBackgroundSize = ( surfaceBackgroundSize: string ) =>\n\t[ surfaceBackgroundSize, surfaceBackgroundSize ].join( ' ' );\n\nconst dottedBackground1 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t'90deg',\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackground2 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackgroundCombined = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t`linear-gradient( ${ dottedBackground1(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\t`linear-gradient( ${ dottedBackground2(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\tCONFIG.surfaceBorderBoldColor,\n\t].join( ',' );\n\nexport const getDotted = (\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => css`\n\tbackground: ${ dottedBackgroundCombined( surfaceBackgroundSizeDotted ) };\n\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n`;\n\nconst gridBackground1 = [\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackground2 = [\n\t'90deg',\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackgroundCombined = [\n\t`linear-gradient( ${ gridBackground1 } )`,\n\t`linear-gradient( ${ gridBackground2 } )`,\n].join( ',' );\n\nexport const getGrid = ( surfaceBackgroundSize: string ) => {\n\treturn css`\n\t\tbackground: ${ CONFIG.surfaceBackgroundColor };\n\t\tbackground-image: ${ gridBackgroundCombined };\n\t\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n\t`;\n};\n\nexport const getVariant = (\n\tvariant: SurfaceVariant,\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => {\n\tswitch ( variant ) {\n\t\tcase 'dotted': {\n\t\t\treturn getDotted(\n\t\t\t\tsurfaceBackgroundSize,\n\t\t\t\tsurfaceBackgroundSizeDotted\n\t\t\t);\n\t\t}\n\t\tcase 'grid': {\n\t\t\treturn getGrid( surfaceBackgroundSize );\n\t\t}\n\t\tcase 'primary': {\n\t\t\treturn primary;\n\t\t}\n\t\tcase 'secondary': {\n\t\t\treturn secondary;\n\t\t}\n\t\tcase 'tertiary': {\n\t\t\treturn tertiary;\n\t\t}\n\t}\n};\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/surface/styles.ts"],"names":["css","CONFIG","COLORS","Surface","surfaceColor","gray","background","surfaceBackgroundColor","getBorders","borderBottom","borderLeft","borderRight","borderTop","borderStyle","surfaceBorderColor","undefined","primary","secondary","surfaceBackgroundTintColor","tertiary","surfaceBackgroundTertiaryColor","customBackgroundSize","surfaceBackgroundSize","join","dottedBackground1","surfaceBackgroundSizeDotted","dottedBackground2","dottedBackgroundCombined","surfaceBorderBoldColor","getDotted","gridBackground1","surfaceBorderSubtleColor","gridBackground2","gridBackgroundCombined","getGrid","getVariant","variant"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n Internal dependencies\n */\nimport { CONFIG, COLORS } from '../utils';\nimport type { SurfaceVariant, SurfaceProps } from './types';\n\nexport const Surface = css`\n\tbackground-color: ${ CONFIG.surfaceColor };\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tposition: relative;\n`;\n\nexport const background = css`\n\tbackground-color: ${ CONFIG.surfaceBackgroundColor };\n`;\n\nexport function getBorders( {\n\tborderBottom,\n\tborderLeft,\n\tborderRight,\n\tborderTop,\n}: Pick<\n\tSurfaceProps,\n\t'borderBottom' \| 'borderLeft' \| 'borderRight' \| 'borderTop'\n> ) {\n\tconst borderStyle = `1px solid ${ CONFIG.surfaceBorderColor }`;\n\n\treturn css( {\n\t\tborderBottom: borderBottom ? borderStyle : undefined,\n\t\tborderLeft: borderLeft ? borderStyle : undefined,\n\t\tborderRight: borderRight ? borderStyle : undefined,\n\t\tborderTop: borderTop ? borderStyle : undefined,\n\t} );\n}\n\nexport const primary = css``;\n\nexport const secondary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTintColor };\n`;\n\nexport const tertiary = css`\n\tbackground: ${ CONFIG.surfaceBackgroundTertiaryColor };\n`;\n\nconst customBackgroundSize = ( surfaceBackgroundSize: string ) =>\n\t[ surfaceBackgroundSize, surfaceBackgroundSize ].join( ' ' );\n\nconst dottedBackground1 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t'90deg',\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackground2 = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(\n\t\t\t' '\n\t\t),\n\t\t'transparent 1%',\n\t].join( ',' );\n\nconst dottedBackgroundCombined = ( surfaceBackgroundSizeDotted: string ) =>\n\t[\n\t\t`linear-gradient( ${ dottedBackground1(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\t`linear-gradient( ${ dottedBackground2(\n\t\t\tsurfaceBackgroundSizeDotted\n\t\t) } ) center`,\n\t\tCONFIG.surfaceBorderBoldColor,\n\t].join( ',' );\n\nexport const getDotted = (\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => css`\n\tbackground: ${ dottedBackgroundCombined( surfaceBackgroundSizeDotted ) };\n\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n`;\n\nconst gridBackground1 = [\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackground2 = [\n\t'90deg',\n\t`${ CONFIG.surfaceBorderSubtleColor } 1px`,\n\t'transparent 1px',\n].join( ',' );\n\nconst gridBackgroundCombined = [\n\t`linear-gradient( ${ gridBackground1 } )`,\n\t`linear-gradient( ${ gridBackground2 } )`,\n].join( ',' );\n\nexport const getGrid = ( surfaceBackgroundSize: string ) => {\n\treturn css`\n\t\tbackground: ${ CONFIG.surfaceBackgroundColor };\n\t\tbackground-image: ${ gridBackgroundCombined };\n\t\tbackground-size: ${ customBackgroundSize( surfaceBackgroundSize ) };\n\t`;\n};\n\nexport const getVariant = (\n\tvariant: SurfaceVariant,\n\tsurfaceBackgroundSize: string,\n\tsurfaceBackgroundSizeDotted: string\n) => {\n\tswitch ( variant ) {\n\t\tcase 'dotted': {\n\t\t\treturn getDotted(\n\t\t\t\tsurfaceBackgroundSize,\n\t\t\t\tsurfaceBackgroundSizeDotted\n\t\t\t);\n\t\t}\n\t\tcase 'grid': {\n\t\t\treturn getGrid( surfaceBackgroundSize );\n\t\t}\n\t\tcase 'primary': {\n\t\t\treturn primary;\n\t\t}\n\t\tcase 'secondary': {\n\t\t\treturn secondary;\n\t\t}\n\t\tcase 'tertiary': {\n\t\t\treturn tertiary;\n\t\t}\n\t}\n};\n"]}

package/build-module/tab-panel/index.js CHANGED Viewed

@@ -5,11 +5,11 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';
+import { forwardRef, useState, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -18,21 +18,18 @@ import { useInstanceId } from '@wordpress/compose';
 import { NavigableMenu } from '../navigable-container';
 import Button from '../button';
-const TabButton = _ref => {
-  let {
-    tabId,
-    children,
-    selected,
-    ...rest
-  } = _ref;
-  return createElement(Button, _extends({
-    role: "tab",
-    tabIndex: selected ? undefined : -1,
-    "aria-selected": selected,
-    id: tabId,
-    __experimentalIsFocusable: true
-  }, rest), children);
-};
+const TabButton = ({
+  tabId,
+  children,
+  selected,
+  ...rest
+}) => createElement(Button, _extends({
+  role: "tab",
+  tabIndex: selected ? undefined : -1,
+  "aria-selected": selected,
+  id: tabId,
+  __experimentalIsFocusable: true
+}, rest), children);
 /**
  * TabPanel is an ARIA-compliant tabpanel.
  *
@@ -71,24 +68,23 @@ const TabButton = _ref => {
  */
-export function TabPanel(_ref2) {
+const UnforwardedTabPanel = ({
+  className,
+  children,
+  tabs,
+  selectOnMove = true,
+  initialTabName,
+  orientation = 'horizontal',
+  activeClass = 'is-active',
+  onSelect
+}, ref) => {
   var _selectedTab$name;
-  let {
-    className,
-    children,
-    tabs,
-    selectOnMove = true,
-    initialTabName,
-    orientation = 'horizontal',
-    activeClass = 'is-active',
-    onSelect
-  } = _ref2;
   const instanceId = useInstanceId(TabPanel, 'tab-panel');
   const [selected, setSelected] = useState();
   const handleTabSelection = useCallback(tabKey => {
     setSelected(tabKey);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
+    onSelect?.(tabKey);
   }, [onSelect]); // Simulate a click on the newly focused tab, which causes the component
   // to show the `tab-panel` associated with the clicked tab.
@@ -96,13 +92,10 @@ export function TabPanel(_ref2) {
     child.click();
   };
-  const selectedTab = tabs.find(_ref3 => {
-    let {
-      name
-    } = _ref3;
-    return name === selected;
-  });
-  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`; // Handle selecting the initial tab.
+  const selectedTab = tabs.find(({
+    name
+  }) => name === selected);
+  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab?.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`; // Handle selecting the initial tab.
   useLayoutEffect(() => {
     // If there's a selected tab, don't override it.
@@ -130,7 +123,7 @@ export function TabPanel(_ref2) {
   useEffect(() => {
     // This effect only runs when the selected tab is defined and becomes disabled.
-    if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.disabled)) {
+    if (!selectedTab?.disabled) {
       return;
     }
@@ -140,9 +133,10 @@ export function TabPanel(_ref2) {
     if (firstEnabledTab) {
       handleTabSelection(firstEnabledTab.name);
     }
-  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.disabled, handleTabSelection]);
+  }, [tabs, selectedTab?.disabled, handleTabSelection]);
   return createElement("div", {
-    className: className
+    className: className,
+    ref: ref
   }, createElement(NavigableMenu, {
     role: "tablist",
     orientation: orientation,
@@ -168,6 +162,8 @@ export function TabPanel(_ref2) {
     id: `${selectedId}-view`,
     className: "components-tab-panel__tab-content"
   }, children(selectedTab)));
-}
+};
+export const TabPanel = forwardRef(UnforwardedTabPanel);
 export default TabPanel;
 //# sourceMappingURL=index.js.map

package/build-module/tab-panel/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","useState","useEffect","useLayoutEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","children","selected","rest","undefined","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? undefined : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/\n TabPanel is an ARIA-compliant tabpanel.\n \n TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n \n ```jsx\n * import { TabPanel } from '@wordpress/components';\n \n const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n \n const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\thandleTabSelection( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial is disabled.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","forwardRef","useState","useEffect","useLayoutEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","children","selected","rest","undefined","UnforwardedTabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","ref","instanceId","TabPanel","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport {\n\tforwardRef,\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? undefined : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/\n TabPanel is an ARIA-compliant tabpanel.\n \n TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n \n ```jsx\n * import { TabPanel } from '@wordpress/components';\n \n const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n \n const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = (\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\ttabs,\n\t\tselectOnMove = true,\n\t\tinitialTabName,\n\t\torientation = 'horizontal',\n\t\tactiveClass = 'is-active',\n\t\tonSelect,\n\t}: WordPressComponentProps< TabPanelProps, 'div', false >,\n\tref: ForwardedRef< any >\n) => {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\thandleTabSelection( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial is disabled.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className } ref={ ref }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport const TabPanel = forwardRef( UnforwardedTabPanel );\nexport default TabPanel;\n"]}

package/build-module/text/styles/text-mixins.native.js CHANGED Viewed

@@ -76,9 +76,7 @@ const sectionHeading = `
  * @param {TextVariant} variantName
  */
-const variant = function () {
-  let variantName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
+const variant = (variantName = 'body') => {
   switch (variantName) {
     case 'title.large':
       return css`

package/build-module/text/styles/text-mixins.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/text/styles/text-mixins.native.js"],"names":["fontFamily","css","COLORS","fontWeightNormal","fontWeightMedium","fontWeightSemibold","title","titleLarge","titleMedium","titleSmall","subtitle","subtitleLarge","subtitleSmall","body","bodyLarge","bodySmall","button","caption","label","sectionHeading","gray","variant","variantName","text","props"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,eAA3B;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,SAASC,MAAT,QAAuB,2BAAvB;AAEA,MAAMC,gBAAgB,GAAI,mBAA1B;AACA,MAAMC,gBAAgB,GAAI,mBAA1B;AACA,MAAMC,kBAAkB,GAAI,mBAA5B;AAEA,MAAMC,KAAK,GAAI;AACf,IAAKH,gBAAkB;AACvB,CAFA;AAIA,MAAMI,UAAU,GAAI;AACpB;AACA;AACA,CAHA;AAKA,MAAMC,WAAW,GAAI;AACrB;AACA;AACA,CAHA;AAKA,MAAMC,UAAU,GAAI;AACpB;AACA;AACA,CAHA;AAKA,MAAMC,QAAQ,GAAI;AAClB,GAAIL,kBAAoB;AACxB;AACA;AACA,CAJA;AAMA,MAAMM,aAAa,GAAI;AACvB;AACA;AACA,CAHA;AAKA,MAAMC,aAAa,GAAI;AACvB;AACA;AACA,CAHA;AAKA,MAAMC,IAAI,GAAI;AACd,GAAIV,gBAAkB;AACtB,CAFA;AAIA,MAAMW,SAAS,GAAI;AACnB;AACA;AACA,CAHA;AAKA,MAAMC,SAAS,GAAI;AACnB;AACA;AACA,CAHA;AAKA,MAAMC,MAAM,GAAI;AAChB,IAAKX,kBAAoB;AACzB;AACA;AACA,CAJA;AAMA,MAAMY,OAAO,GAAI;AACjB,GAAId,gBAAkB;AACtB;AACA;AACA,CAJA;AAMA,MAAMe,KAAK,GAAI;AACf,GAAIb,kBAAoB;AACxB;AACA;AACA,CAJA;AAMA,MAAMc,cAAc,GAAI;AACxB,GAAIf,gBAAkB;AACtB;AACA;AACA;AACA,UAAWF,MAAM,CAACkB,IAAP,CAAa,GAAb,CAAoB;AAC/B,CANA;AAQA;AACA;AACA;;AAEA;AACA;AACA;;AACA,MAAMC,OAAO,GAAG,~~YAA4B;AAAA~~,~~MAA1BC~~,~~WAA0B~~,~~uEAAZ~~,~~MAAY;;~~AAC3C,UAASA,WAAT;AACC,SAAK,aAAL;AACC,aAAOrB,GAAI;AACd,MAAOK,KAAO;AACd,MAAOC,UAAY;AACnB,IAHG;;AAID,SAAK,cAAL;AACC,aAAON,GAAI;AACd,MAAOK,KAAO;AACd,MAAOE,WAAa;AACpB,IAHG;;AAID,SAAK,aAAL;AACC,aAAOP,GAAI;AACd,MAAOK,KAAO;AACd,MAAOG,UAAY;AACnB,IAHG;;AAKD,SAAK,UAAL;AACC,aAAOR,GAAI;AACd,MAAOS,QAAU;AACjB,MAAOC,aAAe;AACtB,IAHG;;AAID,SAAK,gBAAL;AACC,aAAOV,GAAI;AACd,MAAOS,QAAU;AACjB,MAAOE,aAAe;AACtB,IAHG;;AAKD,SAAK,MAAL;AACC,aAAOX,GAAI;AACd,MAAOY,IAAM;AACb,IAFG;;AAGD,SAAK,YAAL;AACC,aAAOZ,GAAI;AACd,MAAOY,IAAM;AACb,MAAOC,SAAW;AAClB,IAHG;;AAID,SAAK,YAAL;AACC,aAAOb,GAAI;AACd,MAAOY,IAAM;AACb,MAAOE,SAAW;AAClB,IAHG;;AAKD,SAAK,QAAL;AACC,aAAOC,MAAP;;AAED,SAAK,SAAL;AACC,aAAOC,OAAP;;AAED,SAAK,OAAL;AACC,aAAOC,KAAP;;AAED,SAAK,gBAAL;AACC,aAAOC,cAAP;AArDF;AAuDA,CAxDD;AA0DA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;AACA,OAAO,MAAMI,IAAI,GAAKC,KAAF,IAAavB,GAAI;AACrC,GAAID,UAAY;AAChB,GAAIqB,OAAO,CAAEG,KAAK,CAACH,OAAR,CAAmB;AAC9B,CAHO","sourcesContent":["/*\n Internal dependencies\n /\nimport { fontFamily } from './font-family';\nimport css from './emotion-css';\nimport { COLORS } from '../../utils/colors-values';\n\nconst fontWeightNormal = `font-weight: 400;`;\nconst fontWeightMedium = `font-weight: 500;`;\nconst fontWeightSemibold = `font-weight: 600;`;\n\nconst title = `\n ${ fontWeightNormal }\n`;\n\nconst titleLarge = `\n\tfont-size: 32px;\n\tline-height: 40px;\n`;\n\nconst titleMedium = `\n\tfont-size: 24px;\n\tline-height: 32px;\n`;\n\nconst titleSmall = `\n\tfont-size: 20px;\n\tline-height: 28px;\n`;\n\nconst subtitle = `\n\t${ fontWeightSemibold }\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nconst subtitleLarge = `\n\tfont-size: 16px;\n\tline-height: 24px;\n`;\n\nconst subtitleSmall = `\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nconst body = `\n\t${ fontWeightNormal }\n`;\n\nconst bodyLarge = `\n\tfont-size: 16px;\n\tline-height: 24px;\n`;\n\nconst bodySmall = `\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nconst button = `\n ${ fontWeightSemibold }\n font-size: 14px;\n line-height: 20px;\n`;\n\nconst caption = `\n\t${ fontWeightNormal }\n\tfont-size: 12px;\n\tline-height: 16px;\n`;\n\nconst label = `\n\t${ fontWeightSemibold }\n\tfont-size: 12px;\n\tline-height: 16px;\n`;\n\nconst sectionHeading = `\n\t${ fontWeightMedium }\n\tfont-size: 11px;\n\tline-height: 1.4;\n\ttext-transform: uppercase;\n\tcolor: ${ COLORS.gray[ 700 ] }\n`;\n\n/\n @typedef {'title.large'\|'title.medium'\|'title.small'\|'subtitle'\|'subtitle.small'\|'body'\|'body.large'\|'body.small'\|'button'\|'caption'\|'label'\|'sectionheading'} TextVariant\n /\n\n/\n @param {TextVariant} variantName\n /\nconst variant = ( variantName = 'body' ) => {\n\tswitch ( variantName ) {\n\t\tcase 'title.large':\n\t\t\treturn css`\n\t\t\t\t${ title }\n\t\t\t\t${ titleLarge }\n\t\t\t`;\n\t\tcase 'title.medium':\n\t\t\treturn css`\n\t\t\t\t${ title }\n\t\t\t\t${ titleMedium }\n\t\t\t`;\n\t\tcase 'title.small':\n\t\t\treturn css`\n\t\t\t\t${ title }\n\t\t\t\t${ titleSmall }\n\t\t\t`;\n\n\t\tcase 'subtitle':\n\t\t\treturn css`\n\t\t\t\t${ subtitle }\n\t\t\t\t${ subtitleLarge }\n\t\t\t`;\n\t\tcase 'subtitle.small':\n\t\t\treturn css`\n\t\t\t\t${ subtitle }\n\t\t\t\t${ subtitleSmall }\n\t\t\t`;\n\n\t\tcase 'body':\n\t\t\treturn css`\n\t\t\t\t${ body }\n\t\t\t`;\n\t\tcase 'body.large':\n\t\t\treturn css`\n\t\t\t\t${ body }\n\t\t\t\t${ bodyLarge }\n\t\t\t`;\n\t\tcase 'body.small':\n\t\t\treturn css`\n\t\t\t\t${ body }\n\t\t\t\t${ bodySmall }\n\t\t\t`;\n\n\t\tcase 'button':\n\t\t\treturn button;\n\n\t\tcase 'caption':\n\t\t\treturn caption;\n\n\t\tcase 'label':\n\t\t\treturn label;\n\n\t\tcase 'sectionheading':\n\t\t\treturn sectionHeading;\n\t}\n};\n\n/\n @typedef {Object} TextProps\n * @property {TextVariant} variant one of TextVariant to be used\n /\n\n/\n @param {TextProps} props\n */\nexport const text = ( props ) => css`\n\t${ fontFamily }\n\t${ variant( props.variant ) }\n`;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/text/styles/text-mixins.native.js"],"names":["fontFamily","css","COLORS","fontWeightNormal","fontWeightMedium","fontWeightSemibold","title","titleLarge","titleMedium","titleSmall","subtitle","subtitleLarge","subtitleSmall","body","bodyLarge","bodySmall","button","caption","label","sectionHeading","gray","variant","variantName","text","props"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,eAA3B;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,SAASC,MAAT,QAAuB,2BAAvB;AAEA,MAAMC,gBAAgB,GAAI,mBAA1B;AACA,MAAMC,gBAAgB,GAAI,mBAA1B;AACA,MAAMC,kBAAkB,GAAI,mBAA5B;AAEA,MAAMC,KAAK,GAAI;AACf,IAAKH,gBAAkB;AACvB,CAFA;AAIA,MAAMI,UAAU,GAAI;AACpB;AACA;AACA,CAHA;AAKA,MAAMC,WAAW,GAAI;AACrB;AACA;AACA,CAHA;AAKA,MAAMC,UAAU,GAAI;AACpB;AACA;AACA,CAHA;AAKA,MAAMC,QAAQ,GAAI;AAClB,GAAIL,kBAAoB;AACxB;AACA;AACA,CAJA;AAMA,MAAMM,aAAa,GAAI;AACvB;AACA;AACA,CAHA;AAKA,MAAMC,aAAa,GAAI;AACvB;AACA;AACA,CAHA;AAKA,MAAMC,IAAI,GAAI;AACd,GAAIV,gBAAkB;AACtB,CAFA;AAIA,MAAMW,SAAS,GAAI;AACnB;AACA;AACA,CAHA;AAKA,MAAMC,SAAS,GAAI;AACnB;AACA;AACA,CAHA;AAKA,MAAMC,MAAM,GAAI;AAChB,IAAKX,kBAAoB;AACzB;AACA;AACA,CAJA;AAMA,MAAMY,OAAO,GAAI;AACjB,GAAId,gBAAkB;AACtB;AACA;AACA,CAJA;AAMA,MAAMe,KAAK,GAAI;AACf,GAAIb,kBAAoB;AACxB;AACA;AACA,CAJA;AAMA,MAAMc,cAAc,GAAI;AACxB,GAAIf,gBAAkB;AACtB;AACA;AACA;AACA,UAAWF,MAAM,CAACkB,IAAP,CAAa,GAAb,CAAoB;AAC/B,CANA;AAQA;AACA;AACA;;AAEA;AACA;AACA;;AACA,MAAMC,OAAO,GAAG,CAAEC,WAAW,GAAG,MAAhB,KAA4B;AAC3C,UAASA,WAAT;AACC,SAAK,aAAL;AACC,aAAOrB,GAAI;AACd,MAAOK,KAAO;AACd,MAAOC,UAAY;AACnB,IAHG;;AAID,SAAK,cAAL;AACC,aAAON,GAAI;AACd,MAAOK,KAAO;AACd,MAAOE,WAAa;AACpB,IAHG;;AAID,SAAK,aAAL;AACC,aAAOP,GAAI;AACd,MAAOK,KAAO;AACd,MAAOG,UAAY;AACnB,IAHG;;AAKD,SAAK,UAAL;AACC,aAAOR,GAAI;AACd,MAAOS,QAAU;AACjB,MAAOC,aAAe;AACtB,IAHG;;AAID,SAAK,gBAAL;AACC,aAAOV,GAAI;AACd,MAAOS,QAAU;AACjB,MAAOE,aAAe;AACtB,IAHG;;AAKD,SAAK,MAAL;AACC,aAAOX,GAAI;AACd,MAAOY,IAAM;AACb,IAFG;;AAGD,SAAK,YAAL;AACC,aAAOZ,GAAI;AACd,MAAOY,IAAM;AACb,MAAOC,SAAW;AAClB,IAHG;;AAID,SAAK,YAAL;AACC,aAAOb,GAAI;AACd,MAAOY,IAAM;AACb,MAAOE,SAAW;AAClB,IAHG;;AAKD,SAAK,QAAL;AACC,aAAOC,MAAP;;AAED,SAAK,SAAL;AACC,aAAOC,OAAP;;AAED,SAAK,OAAL;AACC,aAAOC,KAAP;;AAED,SAAK,gBAAL;AACC,aAAOC,cAAP;AArDF;AAuDA,CAxDD;AA0DA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;AACA,OAAO,MAAMI,IAAI,GAAKC,KAAF,IAAavB,GAAI;AACrC,GAAID,UAAY;AAChB,GAAIqB,OAAO,CAAEG,KAAK,CAACH,OAAR,CAAmB;AAC9B,CAHO","sourcesContent":["/*\n Internal dependencies\n /\nimport { fontFamily } from './font-family';\nimport css from './emotion-css';\nimport { COLORS } from '../../utils/colors-values';\n\nconst fontWeightNormal = `font-weight: 400;`;\nconst fontWeightMedium = `font-weight: 500;`;\nconst fontWeightSemibold = `font-weight: 600;`;\n\nconst title = `\n ${ fontWeightNormal }\n`;\n\nconst titleLarge = `\n\tfont-size: 32px;\n\tline-height: 40px;\n`;\n\nconst titleMedium = `\n\tfont-size: 24px;\n\tline-height: 32px;\n`;\n\nconst titleSmall = `\n\tfont-size: 20px;\n\tline-height: 28px;\n`;\n\nconst subtitle = `\n\t${ fontWeightSemibold }\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nconst subtitleLarge = `\n\tfont-size: 16px;\n\tline-height: 24px;\n`;\n\nconst subtitleSmall = `\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nconst body = `\n\t${ fontWeightNormal }\n`;\n\nconst bodyLarge = `\n\tfont-size: 16px;\n\tline-height: 24px;\n`;\n\nconst bodySmall = `\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nconst button = `\n ${ fontWeightSemibold }\n font-size: 14px;\n line-height: 20px;\n`;\n\nconst caption = `\n\t${ fontWeightNormal }\n\tfont-size: 12px;\n\tline-height: 16px;\n`;\n\nconst label = `\n\t${ fontWeightSemibold }\n\tfont-size: 12px;\n\tline-height: 16px;\n`;\n\nconst sectionHeading = `\n\t${ fontWeightMedium }\n\tfont-size: 11px;\n\tline-height: 1.4;\n\ttext-transform: uppercase;\n\tcolor: ${ COLORS.gray[ 700 ] }\n`;\n\n/\n @typedef {'title.large'\|'title.medium'\|'title.small'\|'subtitle'\|'subtitle.small'\|'body'\|'body.large'\|'body.small'\|'button'\|'caption'\|'label'\|'sectionheading'} TextVariant\n /\n\n/\n @param {TextVariant} variantName\n /\nconst variant = ( variantName = 'body' ) => {\n\tswitch ( variantName ) {\n\t\tcase 'title.large':\n\t\t\treturn css`\n\t\t\t\t${ title }\n\t\t\t\t${ titleLarge }\n\t\t\t`;\n\t\tcase 'title.medium':\n\t\t\treturn css`\n\t\t\t\t${ title }\n\t\t\t\t${ titleMedium }\n\t\t\t`;\n\t\tcase 'title.small':\n\t\t\treturn css`\n\t\t\t\t${ title }\n\t\t\t\t${ titleSmall }\n\t\t\t`;\n\n\t\tcase 'subtitle':\n\t\t\treturn css`\n\t\t\t\t${ subtitle }\n\t\t\t\t${ subtitleLarge }\n\t\t\t`;\n\t\tcase 'subtitle.small':\n\t\t\treturn css`\n\t\t\t\t${ subtitle }\n\t\t\t\t${ subtitleSmall }\n\t\t\t`;\n\n\t\tcase 'body':\n\t\t\treturn css`\n\t\t\t\t${ body }\n\t\t\t`;\n\t\tcase 'body.large':\n\t\t\treturn css`\n\t\t\t\t${ body }\n\t\t\t\t${ bodyLarge }\n\t\t\t`;\n\t\tcase 'body.small':\n\t\t\treturn css`\n\t\t\t\t${ body }\n\t\t\t\t${ bodySmall }\n\t\t\t`;\n\n\t\tcase 'button':\n\t\t\treturn button;\n\n\t\tcase 'caption':\n\t\t\treturn caption;\n\n\t\tcase 'label':\n\t\t\treturn label;\n\n\t\tcase 'sectionheading':\n\t\t\treturn sectionHeading;\n\t}\n};\n\n/\n @typedef {Object} TextProps\n * @property {TextVariant} variant one of TextVariant to be used\n /\n\n/\n @param {TextProps} props\n */\nexport const text = ( props ) => css`\n\t${ fontFamily }\n\t${ variant( props.variant ) }\n`;\n"]}

package/build-module/text/utils.js CHANGED Viewed

@@ -60,23 +60,22 @@ const memoizedLowercaseProps = memoize(lowercaseProps);
  * @param {Options} options
  */
-export function createHighlighterText(_ref) {
-  let {
-    activeClassName = '',
-    activeIndex = -1,
-    activeStyle,
-    autoEscape,
-    caseSensitive = false,
-    children,
-    findChunks,
-    highlightClassName = '',
-    highlightStyle = {},
-    highlightTag = 'mark',
-    sanitize,
-    searchWords = [],
-    unhighlightClassName = '',
-    unhighlightStyle
-  } = _ref;
+export function createHighlighterText({
+  activeClassName = '',
+  activeIndex = -1,
+  activeStyle,
+  autoEscape,
+  caseSensitive = false,
+  children,
+  findChunks,
+  highlightClassName = '',
+  highlightStyle = {},
+  highlightTag = 'mark',
+  sanitize,
+  searchWords = [],
+  unhighlightClassName = '',
+  unhighlightStyle
+}) {
   if (!children) return null;
   if (typeof children !== 'string') return children;
   const textToHighlight = children;

package/build-module/text/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/text/utils.js"],"names":["memoize","findAll","createElement","lowercaseProps","object","mapped","key","toLowerCase","memoizedLowercaseProps","createHighlighterText","activeClassName","activeIndex","activeStyle","autoEscape","caseSensitive","children","findChunks","highlightClassName","highlightStyle","highlightTag","sanitize","searchWords","unhighlightClassName","unhighlightStyle","textToHighlight","chunks","HighlightTag","highlightIndex","highlightClassNames","highlightStyles","textContent","map","chunk","index","text","substr","start","end","highlight","highlightClass","isActive","Object","assign","props","className","style"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,QAApB;AACA,SAASC,OAAT,QAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;AACA;;AAEA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA;;AACA,MAAMC,cAAc,GAAKC,MAAF,IAAc;AACpC;AACA,QAAMC,MAAM,GAAG,EAAf;;AACA,OAAM,MAAMC,GAAZ,IAAmBF,MAAnB,EAA4B;AAC3BC,IAAAA,MAAM,CAAEC,GAAG,CAACC,WAAJ,EAAF,CAAN,GAA8BH,MAAM,CAAEE,GAAF,CAApC;AACA;;AACD,SAAOD,MAAP;AACA,CAPD;;AASA,MAAMG,sBAAsB,GAAGR,OAAO,CAAEG,cAAF,CAAtC;AAEA;AACA;AACA;AACA;;AACA,OAAO,SAASM,qBAAT,~~OAeH~~;~~AAAA,MAfmC;~~AACtCC,~~IAAAA~~,eAAe,GAAG,EADoB;AAEtCC,~~IAAAA~~,WAAW,GAAG,CAAC,CAFuB;AAGtCC,~~IAAAA~~,WAHsC;AAItCC,~~IAAAA~~,UAJsC;AAKtCC,~~IAAAA~~,aAAa,GAAG,KALsB;AAMtCC,~~IAAAA~~,QANsC;AAOtCC,~~IAAAA~~,UAPsC;AAQtCC,~~IAAAA~~,kBAAkB,GAAG,EARiB;AAStCC,~~IAAAA~~,cAAc,GAAG,EATqB;AAUtCC,~~IAAAA~~,YAAY,GAAG,MAVuB;AAWtCC,~~IAAAA~~,QAXsC;AAYtCC,~~IAAAA~~,WAAW,GAAG,EAZwB;AAatCC,~~IAAAA~~,oBAAoB,GAAG,EAbe;AActCC,~~IAAAA~~;AAdsC,~~GAenC~~;AACH,MAAK,CAAER,QAAP,EAAkB,OAAO,IAAP;AAClB,MAAK,OAAOA,QAAP,KAAoB,QAAzB,EAAoC,OAAOA,QAAP;AAEpC,QAAMS,eAAe,GAAGT,QAAxB;AAEA,QAAMU,MAAM,GAAGxB,OAAO,CAAE;AACvBY,IAAAA,UADuB;AAEvBC,IAAAA,aAFuB;AAGvBE,IAAAA,UAHuB;AAIvBI,IAAAA,QAJuB;AAKvBC,IAAAA,WALuB;AAMvBG,IAAAA;AANuB,GAAF,CAAtB;AAQA,QAAME,YAAY,GAAGP,YAArB;AACA,MAAIQ,cAAc,GAAG,CAAC,CAAtB;AACA,MAAIC,mBAAmB,GAAG,EAA1B;AACA,MAAIC,eAAJ;AAEA,QAAMC,WAAW,GAAGL,MAAM,CAACM,GAAP,CAAY,CAAEC,KAAF,EAASC,KAAT,KAAoB;AACnD,UAAMC,IAAI,GAAGV,eAAe,CAACW,MAAhB,CACZH,KAAK,CAACI,KADM,EAEZJ,KAAK,CAACK,GAAN,GAAYL,KAAK,CAACI,KAFN,CAAb;;AAKA,QAAKJ,KAAK,CAACM,SAAX,EAAuB;AACtBX,MAAAA,cAAc;AAEd,UAAIY,cAAJ;;AACA,UAAK,OAAOtB,kBAAP,KAA8B,QAAnC,EAA8C;AAC7C,YAAK,CAAEH,aAAP,EAAuB;AACtBG,UAAAA,kBAAkB,GACjBT,sBAAsB,CAAES,kBAAF,CADvB;AAEAsB,UAAAA,cAAc,GAAGtB,kBAAkB,CAAEiB,IAAI,CAAC3B,WAAL,EAAF,CAAnC;AACA,SAJD,MAIO;AACNgC,UAAAA,cAAc,GAAGtB,kBAAkB,CAAEiB,IAAF,CAAnC;AACA;AACD,OARD,MAQO;AACNK,QAAAA,cAAc,GAAGtB,kBAAjB;AACA;;AAED,YAAMuB,QAAQ,GAAGb,cAAc,KAAK,CAAChB,WAArC;AAEAiB,MAAAA,mBAAmB,GAAI,GAAGW,cAAgB,IACzCC,QAAQ,GAAG9B,eAAH,GAAqB,EAC7B,EAFD;AAGAmB,MAAAA,eAAe,GACdW,QAAQ,KAAK,IAAb,IAAqB5B,WAAW,KAAK,IAArC,GACG6B,MAAM,CAACC,MAAP,CAAe,EAAf,EAAmBxB,cAAnB,EAAmCN,WAAnC,CADH,GAEGM,cAHJ;AAKA;;AACA,YAAMyB,KAAK,GAAG;AACb5B,QAAAA,QAAQ,EAAEmB,IADG;AAEbU,QAAAA,SAAS,EAAEhB,mBAFE;AAGbtB,QAAAA,GAAG,EAAE2B,KAHQ;AAIbY,QAAAA,KAAK,EAAEhB;AAJM,OAAd,CA3BsB,CAkCtB;AACA;;AACA,UAAK,OAAOH,YAAP,KAAwB,QAA7B,EAAwC;AACvCiB,QAAAA,KAAK,CAAChB,cAAN,GAAuBA,cAAvB;AACA;;AAED,aAAOzB,aAAa,CAAEwB,YAAF,EAAgBiB,KAAhB,CAApB;AACA;;AACD,WAAOzC,aAAa,CAAE,MAAF,EAAU;AAC7Ba,MAAAA,QAAQ,EAAEmB,IADmB;AAE7BU,MAAAA,SAAS,EAAEtB,oBAFkB;AAG7BhB,MAAAA,GAAG,EAAE2B,KAHwB;AAI7BY,MAAAA,KAAK,EAAEtB;AAJsB,KAAV,CAApB;AAMA,GAtDmB,CAApB;AAwDA,SAAOO,WAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport memoize from 'memize';\nimport { findAll } from 'highlight-words-core';\n\n/\n WordPress dependencies\n /\nimport { createElement } from '@wordpress/element';\n\n/\n Source:\n * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js\n /\n\n/ eslint-disable jsdoc/valid-types /\n/\n @typedef Options\n * @property {string} [activeClassName=''] Classname for active highlighted areas.\n * @property {number} [activeIndex=-1] The index of the active highlighted area.\n * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle] Styles to apply to the active highlighted area.\n * @property {boolean} [autoEscape] Whether to automatically escape text.\n * @property {boolean} [caseSensitive=false] Whether to highlight in a case-sensitive manner.\n * @property {string} children Children to highlight.\n * @property {import('highlight-words-core').FindAllArgs['findChunks']} [findChunks] Custom `findChunks` function to pass to `highlight-words-core`.\n * @property {string \| Record<string, unknown>} [highlightClassName=''] Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).\n * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}] Styles to apply to highlighted text.\n * @property {keyof JSX.IntrinsicElements} [highlightTag='mark'] Tag to use for the highlighted text.\n * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `santize` function to pass to `highlight-words-core`.\n * @property {string[]} [searchWords=[]] Words to search for and highlight.\n * @property {string} [unhighlightClassName=''] Classname to apply to unhighlighted text.\n * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle] Style to apply to unhighlighted text.\n /\n\n/\n Maps props to lowercase names.\n \n @template {Record<string, unknown>} T\n * @param {T} object Props to map.\n * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props.\n /\n/ eslint-enable jsdoc/valid-types /\nconst lowercaseProps = ( object ) => {\n\t/* @type {any} /\n\tconst mapped = {};\n\tfor ( const key in object ) {\n\t\tmapped[ key.toLowerCase() ] = object[ key ];\n\t}\n\treturn mapped;\n};\n\nconst memoizedLowercaseProps = memoize( lowercaseProps );\n\n/\n \n * @param {Options} options\n /\nexport function createHighlighterText( {\n\tactiveClassName = '',\n\tactiveIndex = -1,\n\tactiveStyle,\n\tautoEscape,\n\tcaseSensitive = false,\n\tchildren,\n\tfindChunks,\n\thighlightClassName = '',\n\thighlightStyle = {},\n\thighlightTag = 'mark',\n\tsanitize,\n\tsearchWords = [],\n\tunhighlightClassName = '',\n\tunhighlightStyle,\n} ) {\n\tif ( ! children ) return null;\n\tif ( typeof children !== 'string' ) return children;\n\n\tconst textToHighlight = children;\n\n\tconst chunks = findAll( {\n\t\tautoEscape,\n\t\tcaseSensitive,\n\t\tfindChunks,\n\t\tsanitize,\n\t\tsearchWords,\n\t\ttextToHighlight,\n\t} );\n\tconst HighlightTag = highlightTag;\n\tlet highlightIndex = -1;\n\tlet highlightClassNames = '';\n\tlet highlightStyles;\n\n\tconst textContent = chunks.map( ( chunk, index ) => {\n\t\tconst text = textToHighlight.substr(\n\t\t\tchunk.start,\n\t\t\tchunk.end - chunk.start\n\t\t);\n\n\t\tif ( chunk.highlight ) {\n\t\t\thighlightIndex++;\n\n\t\t\tlet highlightClass;\n\t\t\tif ( typeof highlightClassName === 'object' ) {\n\t\t\t\tif ( ! caseSensitive ) {\n\t\t\t\t\thighlightClassName =\n\t\t\t\t\t\tmemoizedLowercaseProps( highlightClassName );\n\t\t\t\t\thighlightClass = highlightClassName[ text.toLowerCase() ];\n\t\t\t\t} else {\n\t\t\t\t\thighlightClass = highlightClassName[ text ];\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\thighlightClass = highlightClassName;\n\t\t\t}\n\n\t\t\tconst isActive = highlightIndex === +activeIndex;\n\n\t\t\thighlightClassNames = `${ highlightClass } ${\n\t\t\t\tisActive ? activeClassName : ''\n\t\t\t}`;\n\t\t\thighlightStyles =\n\t\t\t\tisActive === true && activeStyle !== null\n\t\t\t\t\t? Object.assign( {}, highlightStyle, activeStyle )\n\t\t\t\t\t: highlightStyle;\n\n\t\t\t/* @type {Record<string, any>} */\n\t\t\tconst props = {\n\t\t\t\tchildren: text,\n\t\t\t\tclassName: highlightClassNames,\n\t\t\t\tkey: index,\n\t\t\t\tstyle: highlightStyles,\n\t\t\t};\n\n\t\t\t// Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)\n\t\t\t// Only pass through the highlightIndex attribute for custom components.\n\t\t\tif ( typeof HighlightTag !== 'string' ) {\n\t\t\t\tprops.highlightIndex = highlightIndex;\n\t\t\t}\n\n\t\t\treturn createElement( HighlightTag, props );\n\t\t}\n\t\treturn createElement( 'span', {\n\t\t\tchildren: text,\n\t\t\tclassName: unhighlightClassName,\n\t\t\tkey: index,\n\t\t\tstyle: unhighlightStyle,\n\t\t} );\n\t} );\n\n\treturn textContent;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/text/utils.js"],"names":["memoize","findAll","createElement","lowercaseProps","object","mapped","key","toLowerCase","memoizedLowercaseProps","createHighlighterText","activeClassName","activeIndex","activeStyle","autoEscape","caseSensitive","children","findChunks","highlightClassName","highlightStyle","highlightTag","sanitize","searchWords","unhighlightClassName","unhighlightStyle","textToHighlight","chunks","HighlightTag","highlightIndex","highlightClassNames","highlightStyles","textContent","map","chunk","index","text","substr","start","end","highlight","highlightClass","isActive","Object","assign","props","className","style"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport memoize from 'memize';\nimport { findAll } from 'highlight-words-core';\n\n/\n WordPress dependencies\n /\nimport { createElement } from '@wordpress/element';\n\n/\n Source:\n * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js\n /\n\n/ eslint-disable jsdoc/valid-types /\n/\n @typedef Options\n * @property {string} [activeClassName=''] Classname for active highlighted areas.\n * @property {number} [activeIndex=-1] The index of the active highlighted area.\n * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle] Styles to apply to the active highlighted area.\n * @property {boolean} [autoEscape] Whether to automatically escape text.\n * @property {boolean} [caseSensitive=false] Whether to highlight in a case-sensitive manner.\n * @property {string} children Children to highlight.\n * @property {import('highlight-words-core').FindAllArgs['findChunks']} [findChunks] Custom `findChunks` function to pass to `highlight-words-core`.\n * @property {string \| Record<string, unknown>} [highlightClassName=''] Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).\n * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}] Styles to apply to highlighted text.\n * @property {keyof JSX.IntrinsicElements} [highlightTag='mark'] Tag to use for the highlighted text.\n * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `santize` function to pass to `highlight-words-core`.\n * @property {string[]} [searchWords=[]] Words to search for and highlight.\n * @property {string} [unhighlightClassName=''] Classname to apply to unhighlighted text.\n * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle] Style to apply to unhighlighted text.\n /\n\n/\n Maps props to lowercase names.\n \n @template {Record<string, unknown>} T\n * @param {T} object Props to map.\n * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props.\n /\n/ eslint-enable jsdoc/valid-types /\nconst lowercaseProps = ( object ) => {\n\t/* @type {any} /\n\tconst mapped = {};\n\tfor ( const key in object ) {\n\t\tmapped[ key.toLowerCase() ] = object[ key ];\n\t}\n\treturn mapped;\n};\n\nconst memoizedLowercaseProps = memoize( lowercaseProps );\n\n/\n \n * @param {Options} options\n /\nexport function createHighlighterText( {\n\tactiveClassName = '',\n\tactiveIndex = -1,\n\tactiveStyle,\n\tautoEscape,\n\tcaseSensitive = false,\n\tchildren,\n\tfindChunks,\n\thighlightClassName = '',\n\thighlightStyle = {},\n\thighlightTag = 'mark',\n\tsanitize,\n\tsearchWords = [],\n\tunhighlightClassName = '',\n\tunhighlightStyle,\n} ) {\n\tif ( ! children ) return null;\n\tif ( typeof children !== 'string' ) return children;\n\n\tconst textToHighlight = children;\n\n\tconst chunks = findAll( {\n\t\tautoEscape,\n\t\tcaseSensitive,\n\t\tfindChunks,\n\t\tsanitize,\n\t\tsearchWords,\n\t\ttextToHighlight,\n\t} );\n\tconst HighlightTag = highlightTag;\n\tlet highlightIndex = -1;\n\tlet highlightClassNames = '';\n\tlet highlightStyles;\n\n\tconst textContent = chunks.map( ( chunk, index ) => {\n\t\tconst text = textToHighlight.substr(\n\t\t\tchunk.start,\n\t\t\tchunk.end - chunk.start\n\t\t);\n\n\t\tif ( chunk.highlight ) {\n\t\t\thighlightIndex++;\n\n\t\t\tlet highlightClass;\n\t\t\tif ( typeof highlightClassName === 'object' ) {\n\t\t\t\tif ( ! caseSensitive ) {\n\t\t\t\t\thighlightClassName =\n\t\t\t\t\t\tmemoizedLowercaseProps( highlightClassName );\n\t\t\t\t\thighlightClass = highlightClassName[ text.toLowerCase() ];\n\t\t\t\t} else {\n\t\t\t\t\thighlightClass = highlightClassName[ text ];\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\thighlightClass = highlightClassName;\n\t\t\t}\n\n\t\t\tconst isActive = highlightIndex === +activeIndex;\n\n\t\t\thighlightClassNames = `${ highlightClass } ${\n\t\t\t\tisActive ? activeClassName : ''\n\t\t\t}`;\n\t\t\thighlightStyles =\n\t\t\t\tisActive === true && activeStyle !== null\n\t\t\t\t\t? Object.assign( {}, highlightStyle, activeStyle )\n\t\t\t\t\t: highlightStyle;\n\n\t\t\t/* @type {Record<string, any>} */\n\t\t\tconst props = {\n\t\t\t\tchildren: text,\n\t\t\t\tclassName: highlightClassNames,\n\t\t\t\tkey: index,\n\t\t\t\tstyle: highlightStyles,\n\t\t\t};\n\n\t\t\t// Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)\n\t\t\t// Only pass through the highlightIndex attribute for custom components.\n\t\t\tif ( typeof HighlightTag !== 'string' ) {\n\t\t\t\tprops.highlightIndex = highlightIndex;\n\t\t\t}\n\n\t\t\treturn createElement( HighlightTag, props );\n\t\t}\n\t\treturn createElement( 'span', {\n\t\t\tchildren: text,\n\t\t\tclassName: unhighlightClassName,\n\t\t\tkey: index,\n\t\t\tstyle: unhighlightStyle,\n\t\t} );\n\t} );\n\n\treturn textContent;\n}\n"]}

package/build-module/text-control/index.native.js CHANGED Viewed

@@ -11,19 +11,18 @@ import { memo } from '@wordpress/element';
 import Cell from '../mobile/bottom-sheet/cell';
-function TextControl(_ref) {
-  let {
-    label,
-    hideLabelFromVision,
-    value,
-    help,
-    className,
-    instanceId,
-    onChange,
-    type = 'text',
-    placeholder,
-    ...props
-  } = _ref;
+function TextControl({
+  label,
+  hideLabelFromVision,
+  value,
+  help,
+  className,
+  instanceId,
+  onChange,
+  type = 'text',
+  placeholder,
+  ...props
+}) {
   const id = `inspector-text-control-${instanceId}`;
   return createElement(Cell, _extends({
     label: label,

package/build-module/text-control/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/text-control/index.native.js"],"names":["memo","Cell","TextControl","label","hideLabelFromVision","value","help","className","instanceId","onChange","type","placeholder","props","id","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,oBAArB;AACA;AACA;AACA;;AACA,OAAOC,IAAP,MAAiB,6BAAjB;;AAEA,SAASC,WAAT,~~OAWI~~;~~AAAA,MAXkB;~~AACrBC,~~IAAAA~~,KADqB;AAErBC,~~IAAAA~~,mBAFqB;AAGrBC,~~IAAAA~~,KAHqB;AAIrBC,~~IAAAA~~,IAJqB;AAKrBC,~~IAAAA~~,SALqB;AAMrBC,~~IAAAA~~,UANqB;AAOrBC,~~IAAAA~~,QAPqB;AAQrBC,~~IAAAA~~,IAAI,GAAG,MARc;AASrBC,~~IAAAA~~,WATqB;AAUrB,~~OAAGC~~;AAVkB,~~GAWlB~~;AACH,QAAMC,EAAE,GAAI,0BAA0BL,UAAY,EAAlD;AAEA,SACC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGL,KADT;AAEC,IAAA,mBAAmB,EAAGC,mBAFvB;AAGC,IAAA,EAAE,EAAGS,EAHN;AAIC,IAAA,IAAI,EAAGP,IAJR;AAKC,IAAA,SAAS,EAAGC,SALb;AAMC,IAAA,IAAI,EAAGG,IANR;AAOC,IAAA,KAAK,EAAGL,KAPT;AAQC,IAAA,aAAa,EAAGI,QARjB;AASC,wBAAmB,CAAC,CAAEH,IAAH,GAAUO,EAAE,GAAG,QAAf,GAA0BC,SAT9C;AAUC,IAAA,gBAAgB,EAAGH;AAVpB,KAWMC,KAXN,EADD;AAeA;;AAED,eAAeZ,IAAI,CAAEE,WAAF,CAAnB","sourcesContent":["/*\n WordPress dependencies\n /\nimport { memo } from '@wordpress/element';\n/\n Internal dependencies\n */\nimport Cell from '../mobile/bottom-sheet/cell';\n\nfunction TextControl( {\n\tlabel,\n\thideLabelFromVision,\n\tvalue,\n\thelp,\n\tclassName,\n\tinstanceId,\n\tonChange,\n\ttype = 'text',\n\tplaceholder,\n\t...props\n} ) {\n\tconst id = `inspector-text-control-${ instanceId }`;\n\n\treturn (\n\t\t<Cell\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t\ttype={ type }\n\t\t\tvalue={ value }\n\t\t\tonChangeValue={ onChange }\n\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\tvaluePlaceholder={ placeholder }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default memo( TextControl );\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/text-control/index.native.js"],"names":["memo","Cell","TextControl","label","hideLabelFromVision","value","help","className","instanceId","onChange","type","placeholder","props","id","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,oBAArB;AACA;AACA;AACA;;AACA,OAAOC,IAAP,MAAiB,6BAAjB;;AAEA,SAASC,WAAT,CAAsB;AACrBC,EAAAA,KADqB;AAErBC,EAAAA,mBAFqB;AAGrBC,EAAAA,KAHqB;AAIrBC,EAAAA,IAJqB;AAKrBC,EAAAA,SALqB;AAMrBC,EAAAA,UANqB;AAOrBC,EAAAA,QAPqB;AAQrBC,EAAAA,IAAI,GAAG,MARc;AASrBC,EAAAA,WATqB;AAUrB,KAAGC;AAVkB,CAAtB,EAWI;AACH,QAAMC,EAAE,GAAI,0BAA0BL,UAAY,EAAlD;AAEA,SACC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGL,KADT;AAEC,IAAA,mBAAmB,EAAGC,mBAFvB;AAGC,IAAA,EAAE,EAAGS,EAHN;AAIC,IAAA,IAAI,EAAGP,IAJR;AAKC,IAAA,SAAS,EAAGC,SALb;AAMC,IAAA,IAAI,EAAGG,IANR;AAOC,IAAA,KAAK,EAAGL,KAPT;AAQC,IAAA,aAAa,EAAGI,QARjB;AASC,wBAAmB,CAAC,CAAEH,IAAH,GAAUO,EAAE,GAAG,QAAf,GAA0BC,SAT9C;AAUC,IAAA,gBAAgB,EAAGH;AAVpB,KAWMC,KAXN,EADD;AAeA;;AAED,eAAeZ,IAAI,CAAEE,WAAF,CAAnB","sourcesContent":["/*\n WordPress dependencies\n /\nimport { memo } from '@wordpress/element';\n/\n Internal dependencies\n */\nimport Cell from '../mobile/bottom-sheet/cell';\n\nfunction TextControl( {\n\tlabel,\n\thideLabelFromVision,\n\tvalue,\n\thelp,\n\tclassName,\n\tinstanceId,\n\tonChange,\n\ttype = 'text',\n\tplaceholder,\n\t...props\n} ) {\n\tconst id = `inspector-text-control-${ instanceId }`;\n\n\treturn (\n\t\t<Cell\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t\ttype={ type }\n\t\t\tvalue={ value }\n\t\t\tonChangeValue={ onChange }\n\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\tvaluePlaceholder={ placeholder }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default memo( TextControl );\n"]}

package/build-module/textarea-control/index.native.js CHANGED Viewed

@@ -10,14 +10,13 @@ import { TextInput } from 'react-native';
 import BaseControl from '../base-control';
-function TextareaControl(_ref) {
-  let {
-    label,
-    value,
-    help,
-    onChange,
-    rows = 4
-  } = _ref;
+function TextareaControl({
+  label,
+  value,
+  help,
+  onChange,
+  rows = 4
+}) {
   return createElement(BaseControl, {
     label: label,
     help: help

package/build-module/textarea-control/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/textarea-control/index.native.js"],"names":["TextInput","BaseControl","TextareaControl","label","value","help","onChange","rows","height","borderColor","borderWidth"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,cAA1B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAEA,SAASC,eAAT,~~OAAuE~~;~~AAAA,MAA7C;~~AAAEC,~~IAAAA~~,KAAF;AAASC,~~IAAAA~~,KAAT;AAAgBC,~~IAAAA~~,IAAhB;AAAsBC,~~IAAAA~~,QAAtB;AAAgCC,~~IAAAA~~,IAAI,GAAG;AAAvC,~~GAA6C~~;AACtE,SACC,cAAC,WAAD;AAAa,IAAA,KAAK,EAAGJ,KAArB;AAA6B,IAAA,IAAI,EAAGE;AAApC,KACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAG;AAAEG,MAAAA,MAAM,EAAE,EAAV;AAAcC,MAAAA,WAAW,EAAE,MAA3B;AAAmCC,MAAAA,WAAW,EAAE;AAAhD,KADT;AAEC,IAAA,KAAK,EAAGN,KAFT;AAGC,IAAA,YAAY,EAAGE,QAHhB;AAIC,IAAA,aAAa,EAAGC,IAJjB;AAKC,IAAA,SAAS,EAAGA,IAAI,GAAG,CALpB;AAMC,IAAA,iBAAiB,EAAC;AANnB,IADD,CADD;AAYA;;AAED,eAAeL,eAAf","sourcesContent":["/*\n External dependencies\n /\nimport { TextInput } from 'react-native';\n\n/\n Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nfunction TextareaControl( { label, value, help, onChange, rows = 4 } ) {\n\treturn (\n\t\t<BaseControl label={ label } help={ help }>\n\t\t\t<TextInput\n\t\t\t\tstyle={ { height: 80, borderColor: 'gray', borderWidth: 1 } }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChangeText={ onChange }\n\t\t\t\tnumberOfLines={ rows }\n\t\t\t\tmultiline={ rows > 1 }\n\t\t\t\ttextAlignVertical=\"top\"\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/textarea-control/index.native.js"],"names":["TextInput","BaseControl","TextareaControl","label","value","help","onChange","rows","height","borderColor","borderWidth"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,cAA1B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAEA,SAASC,eAAT,CAA0B;AAAEC,EAAAA,KAAF;AAASC,EAAAA,KAAT;AAAgBC,EAAAA,IAAhB;AAAsBC,EAAAA,QAAtB;AAAgCC,EAAAA,IAAI,GAAG;AAAvC,CAA1B,EAAuE;AACtE,SACC,cAAC,WAAD;AAAa,IAAA,KAAK,EAAGJ,KAArB;AAA6B,IAAA,IAAI,EAAGE;AAApC,KACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAG;AAAEG,MAAAA,MAAM,EAAE,EAAV;AAAcC,MAAAA,WAAW,EAAE,MAA3B;AAAmCC,MAAAA,WAAW,EAAE;AAAhD,KADT;AAEC,IAAA,KAAK,EAAGN,KAFT;AAGC,IAAA,YAAY,EAAGE,QAHhB;AAIC,IAAA,aAAa,EAAGC,IAJjB;AAKC,IAAA,SAAS,EAAGA,IAAI,GAAG,CALpB;AAMC,IAAA,iBAAiB,EAAC;AANnB,IADD,CADD;AAYA;;AAED,eAAeL,eAAf","sourcesContent":["/*\n External dependencies\n /\nimport { TextInput } from 'react-native';\n\n/\n Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nfunction TextareaControl( { label, value, help, onChange, rows = 4 } ) {\n\treturn (\n\t\t<BaseControl label={ label } help={ help }>\n\t\t\t<TextInput\n\t\t\t\tstyle={ { height: 80, borderColor: 'gray', borderWidth: 1 } }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChangeText={ onChange }\n\t\t\t\tnumberOfLines={ rows }\n\t\t\t\tmultiline={ rows > 1 }\n\t\t\t\ttextAlignVertical=\"top\"\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"]}

package/build-module/theme/color-algorithms.js CHANGED Viewed

@@ -96,8 +96,7 @@ export function generateShades(background, foreground) {
   const range = Math.abs(colord(background).toHsl().l - colord(foreground).toHsl().l) / 100;
   const result = {};
-  Object.entries(SHADES).forEach(_ref => {
-    let [key, value] = _ref;
+  Object.entries(SHADES).forEach(([key, value]) => {
     result[parseInt(key)] = colord(background)[direction](value / limit * range).toHex();
   });
   return result;

package/build-module/theme/color-algorithms.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/theme/color-algorithms.ts"],"names":["colord","extend","a11yPlugin","namesPlugin","warning","COLORS","generateThemeVariables","inputs","validateInputs","generatedColors","generateAccentDependentColors","accent","generateBackgroundDependentColors","background","warnContrastIssues","checkContrasts","colors","key","value","Object","entries","isValid","outputs","white","foreground","gray","isReadable","undefined","grays","contrast","issues","error","values","accentDarker10","darken","toHex","accentDarker20","accentInverted","getForegroundForColor","foregroundInverted","generateShades","color","isDark","SHADES","limit","direction","range","Math","abs","toHsl","l","result","forEach","parseInt"],"mappings":"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~~QAAsB;AAAA~~,~~QAApB,~~CAAEnC,GAAF,EAAOC,KAAP,~~CAAoB~~;AACvDiC,IAAAA,MAAM,CAAEE,QAAQ,CAAEpC,GAAF,CAAV,CAAN,GAA4BjB,MAAM,CAAEa,UAAF,CAAN,CACzBgC,SADyB,EACV3B,KAAK,GAAG0B,KAAV,GAAoBE,KADR,EAE1BX,KAF0B,EAA5B;AAGA,GAJD;AAMA,SAAOgB,MAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n WordPress dependencies\n /\nimport warning from '@wordpress/warning';\n\n/\n Internal dependencies\n /\nimport type { ThemeInputValues, ThemeOutputValues } from './types';\nimport { COLORS } from '../utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport function generateThemeVariables(\n\tinputs: ThemeInputValues\n): ThemeOutputValues {\n\tvalidateInputs( inputs );\n\n\tconst generatedColors = {\n\t\t...generateAccentDependentColors( inputs.accent ),\n\t\t...generateBackgroundDependentColors( inputs.background ),\n\t};\n\n\twarnContrastIssues( checkContrasts( inputs, generatedColors ) );\n\n\treturn { colors: generatedColors };\n}\n\nfunction validateInputs( inputs: ThemeInputValues ) {\n\tfor ( const [ key, value ] of Object.entries( inputs ) ) {\n\t\tif ( typeof value !== 'undefined' && ! colord( value ).isValid() ) {\n\t\t\twarning(\n\t\t\t\t`wp.components.Theme: \"${ value }\" is not a valid color value for the '${ key }' prop.`\n\t\t\t);\n\t\t}\n\t}\n}\n\nexport function checkContrasts(\n\tinputs: ThemeInputValues,\n\toutputs: ThemeOutputValues[ 'colors' ]\n) {\n\tconst background = inputs.background \|\| COLORS.white;\n\tconst accent = inputs.accent \|\| '#3858e9';\n\tconst foreground = outputs.foreground \|\| COLORS.gray[ 900 ];\n\tconst gray = outputs.gray \|\| COLORS.gray;\n\n\treturn {\n\t\taccent: colord( background ).isReadable( accent )\n\t\t\t? undefined\n\t\t\t: `The background color (\"${ background }\") does not have sufficient contrast against the accent color (\"${ accent }\").`,\n\t\tforeground: colord( background ).isReadable( foreground )\n\t\t\t? undefined\n\t\t\t: `The background color provided (\"${ background }\") does not have sufficient contrast against the standard foreground colors.`,\n\t\tgrays:\n\t\t\tcolord( background ).contrast( gray[ 600 ] ) >= 3 &&\n\t\t\tcolord( background ).contrast( gray[ 700 ] ) >= 4.5\n\t\t\t\t? undefined\n\t\t\t\t: `The background color provided (\"${ background }\") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`,\n\t};\n}\n\nfunction warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {\n\tfor ( const error of Object.values( issues ) ) {\n\t\tif ( error ) {\n\t\t\twarning( 'wp.components.Theme: ' + error );\n\t\t}\n\t}\n}\n\nfunction generateAccentDependentColors( accent?: string ) {\n\tif ( ! accent ) return {};\n\n\treturn {\n\t\taccent,\n\t\taccentDarker10: colord( accent ).darken( 0.1 ).toHex(),\n\t\taccentDarker20: colord( accent ).darken( 0.2 ).toHex(),\n\t\taccentInverted: getForegroundForColor( accent ),\n\t};\n}\n\nfunction generateBackgroundDependentColors( background?: string ) {\n\tif ( ! background ) return {};\n\n\tconst foreground = getForegroundForColor( background );\n\n\treturn {\n\t\tbackground,\n\t\tforeground,\n\t\tforegroundInverted: getForegroundForColor( foreground ),\n\t\tgray: generateShades( background, foreground ),\n\t};\n}\n\nfunction getForegroundForColor( color: string ) {\n\treturn colord( color ).isDark() ? COLORS.white : COLORS.gray[ 900 ];\n}\n\nexport function generateShades( background: string, foreground: string ) {\n\t// How much darkness you need to add to #fff to get the COLORS.gray[n] color\n\tconst SHADES = {\n\t\t100: 0.06,\n\t\t200: 0.121,\n\t\t300: 0.132,\n\t\t400: 0.2,\n\t\t600: 0.42,\n\t\t700: 0.543,\n\t\t800: 0.821,\n\t};\n\n\t// Darkness of COLORS.gray[ 900 ], relative to #fff\n\tconst limit = 0.884;\n\n\tconst direction = colord( background ).isDark() ? 'lighten' : 'darken';\n\n\t// Lightness delta between the background and foreground colors\n\tconst range =\n\t\tMath.abs(\n\t\t\tcolord( background ).toHsl().l - colord( foreground ).toHsl().l\n\t\t) / 100;\n\n\tconst result: Record< number, string > = {};\n\n\tObject.entries( SHADES ).forEach( ( [ key, value ] ) => {\n\t\tresult[ parseInt( key ) ] = colord( background )\n\t\t\t[ direction ]( ( value / limit ) range )\n\t\t\t.toHex();\n\t} );\n\n\treturn result as NonNullable< ThemeOutputValues[ 'colors' ][ 'gray' ] >;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/theme/color-algorithms.ts"],"names":["colord","extend","a11yPlugin","namesPlugin","warning","COLORS","generateThemeVariables","inputs","validateInputs","generatedColors","generateAccentDependentColors","accent","generateBackgroundDependentColors","background","warnContrastIssues","checkContrasts","colors","key","value","Object","entries","isValid","outputs","white","foreground","gray","isReadable","undefined","grays","contrast","issues","error","values","accentDarker10","darken","toHex","accentDarker20","accentInverted","getForegroundForColor","foregroundInverted","generateShades","color","isDark","SHADES","limit","direction","range","Math","abs","toHsl","l","result","forEach","parseInt"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n WordPress dependencies\n /\nimport warning from '@wordpress/warning';\n\n/\n Internal dependencies\n /\nimport type { ThemeInputValues, ThemeOutputValues } from './types';\nimport { COLORS } from '../utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport function generateThemeVariables(\n\tinputs: ThemeInputValues\n): ThemeOutputValues {\n\tvalidateInputs( inputs );\n\n\tconst generatedColors = {\n\t\t...generateAccentDependentColors( inputs.accent ),\n\t\t...generateBackgroundDependentColors( inputs.background ),\n\t};\n\n\twarnContrastIssues( checkContrasts( inputs, generatedColors ) );\n\n\treturn { colors: generatedColors };\n}\n\nfunction validateInputs( inputs: ThemeInputValues ) {\n\tfor ( const [ key, value ] of Object.entries( inputs ) ) {\n\t\tif ( typeof value !== 'undefined' && ! colord( value ).isValid() ) {\n\t\t\twarning(\n\t\t\t\t`wp.components.Theme: \"${ value }\" is not a valid color value for the '${ key }' prop.`\n\t\t\t);\n\t\t}\n\t}\n}\n\nexport function checkContrasts(\n\tinputs: ThemeInputValues,\n\toutputs: ThemeOutputValues[ 'colors' ]\n) {\n\tconst background = inputs.background \|\| COLORS.white;\n\tconst accent = inputs.accent \|\| '#3858e9';\n\tconst foreground = outputs.foreground \|\| COLORS.gray[ 900 ];\n\tconst gray = outputs.gray \|\| COLORS.gray;\n\n\treturn {\n\t\taccent: colord( background ).isReadable( accent )\n\t\t\t? undefined\n\t\t\t: `The background color (\"${ background }\") does not have sufficient contrast against the accent color (\"${ accent }\").`,\n\t\tforeground: colord( background ).isReadable( foreground )\n\t\t\t? undefined\n\t\t\t: `The background color provided (\"${ background }\") does not have sufficient contrast against the standard foreground colors.`,\n\t\tgrays:\n\t\t\tcolord( background ).contrast( gray[ 600 ] ) >= 3 &&\n\t\t\tcolord( background ).contrast( gray[ 700 ] ) >= 4.5\n\t\t\t\t? undefined\n\t\t\t\t: `The background color provided (\"${ background }\") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`,\n\t};\n}\n\nfunction warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {\n\tfor ( const error of Object.values( issues ) ) {\n\t\tif ( error ) {\n\t\t\twarning( 'wp.components.Theme: ' + error );\n\t\t}\n\t}\n}\n\nfunction generateAccentDependentColors( accent?: string ) {\n\tif ( ! accent ) return {};\n\n\treturn {\n\t\taccent,\n\t\taccentDarker10: colord( accent ).darken( 0.1 ).toHex(),\n\t\taccentDarker20: colord( accent ).darken( 0.2 ).toHex(),\n\t\taccentInverted: getForegroundForColor( accent ),\n\t};\n}\n\nfunction generateBackgroundDependentColors( background?: string ) {\n\tif ( ! background ) return {};\n\n\tconst foreground = getForegroundForColor( background );\n\n\treturn {\n\t\tbackground,\n\t\tforeground,\n\t\tforegroundInverted: getForegroundForColor( foreground ),\n\t\tgray: generateShades( background, foreground ),\n\t};\n}\n\nfunction getForegroundForColor( color: string ) {\n\treturn colord( color ).isDark() ? COLORS.white : COLORS.gray[ 900 ];\n}\n\nexport function generateShades( background: string, foreground: string ) {\n\t// How much darkness you need to add to #fff to get the COLORS.gray[n] color\n\tconst SHADES = {\n\t\t100: 0.06,\n\t\t200: 0.121,\n\t\t300: 0.132,\n\t\t400: 0.2,\n\t\t600: 0.42,\n\t\t700: 0.543,\n\t\t800: 0.821,\n\t};\n\n\t// Darkness of COLORS.gray[ 900 ], relative to #fff\n\tconst limit = 0.884;\n\n\tconst direction = colord( background ).isDark() ? 'lighten' : 'darken';\n\n\t// Lightness delta between the background and foreground colors\n\tconst range =\n\t\tMath.abs(\n\t\t\tcolord( background ).toHsl().l - colord( foreground ).toHsl().l\n\t\t) / 100;\n\n\tconst result: Record< number, string > = {};\n\n\tObject.entries( SHADES ).forEach( ( [ key, value ] ) => {\n\t\tresult[ parseInt( key ) ] = colord( background )\n\t\t\t[ direction ]( ( value / limit ) range )\n\t\t\t.toHex();\n\t} );\n\n\treturn result as NonNullable< ThemeOutputValues[ 'colors' ][ 'gray' ] >;\n}\n"]}

package/build-module/theme/index.js CHANGED Viewed

@@ -35,13 +35,12 @@ import { useCx } from '../utils';
  * ```
  */
-function Theme(_ref) {
-  let {
-    accent,
-    background,
-    className,
-    ...props
-  } = _ref;
+function Theme({
+  accent,
+  background,
+  className,
+  ...props
+}) {
   const cx = useCx();
   const classes = useMemo(() => cx(...colorVariables(generateThemeVariables({
     accent,

package/build-module/theme/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/theme/index.tsx"],"names":["useMemo","colorVariables","Wrapper","generateThemeVariables","useCx","Theme","accent","background","className","props","cx","classes"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AAGA,SAASC,cAAT,EAAyBC,OAAzB,QAAwC,UAAxC;AACA,SAASC,sBAAT,QAAuC,oBAAvC;AACA,SAASC,KAAT,QAAsB,UAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,KAAT,~~OAKwD~~;~~AAAA,MALxC;~~AACfC,~~IAAAA~~,MADe;AAEfC,~~IAAAA~~,UAFe;AAGfC,~~IAAAA~~,SAHe;AAIf,~~OAAGC~~;AAJY,~~GAKwC~~;AACvD,QAAMC,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,OAAO,GAAGX,OAAO,CACtB,MACCU,EAAE,CACD,GAAGT,cAAc,CAChBE,sBAAsB,CAAE;AAAEG,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAF,CADN,CADhB,EAIDC,SAJC,CAFmB,EAQtB,CAAEF,MAAF,EAAUC,UAAV,EAAsBC,SAAtB,EAAiCE,EAAjC,CARsB,CAAvB;AAWA,SAAO,cAAC,OAAD;AAAS,IAAA,SAAS,EAAGC;AAArB,KAAoCF,KAApC,EAAP;AACA;;AAED,eAAeJ,KAAf","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { ThemeProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { colorVariables, Wrapper } from './styles';\nimport { generateThemeVariables } from './color-algorithms';\nimport { useCx } from '../utils';\n\n/\n `Theme` allows defining theme variables for components in the `@wordpress/components` package.\n \n Multiple `Theme` components can be nested in order to override specific theme variables.\n \n \n * @example\n * ```jsx\n * import { __experimentalTheme as Theme } from '@wordpress/components';\n \n const Example = () => {\n * return (\n * <Theme accent=\"red\">\n * <Button variant=\"primary\">I'm red</Button>\n * <Theme accent=\"blue\">\n * <Button variant=\"primary\">I'm blue</Button>\n * </Theme>\n * </Theme>\n * );\n * };\n * ```\n */\nfunction Theme( {\n\taccent,\n\tbackground,\n\tclassName,\n\t...props\n}: WordPressComponentProps< ThemeProps, 'div', true > ) {\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\t...colorVariables(\n\t\t\t\t\tgenerateThemeVariables( { accent, background } )\n\t\t\t\t),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ accent, background, className, cx ]\n\t);\n\n\treturn <Wrapper className={ classes } { ...props } />;\n}\n\nexport default Theme;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/theme/index.tsx"],"names":["useMemo","colorVariables","Wrapper","generateThemeVariables","useCx","Theme","accent","background","className","props","cx","classes"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AAGA,SAASC,cAAT,EAAyBC,OAAzB,QAAwC,UAAxC;AACA,SAASC,sBAAT,QAAuC,oBAAvC;AACA,SAASC,KAAT,QAAsB,UAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,KAAT,CAAgB;AACfC,EAAAA,MADe;AAEfC,EAAAA,UAFe;AAGfC,EAAAA,SAHe;AAIf,KAAGC;AAJY,CAAhB,EAKwD;AACvD,QAAMC,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,OAAO,GAAGX,OAAO,CACtB,MACCU,EAAE,CACD,GAAGT,cAAc,CAChBE,sBAAsB,CAAE;AAAEG,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAF,CADN,CADhB,EAIDC,SAJC,CAFmB,EAQtB,CAAEF,MAAF,EAAUC,UAAV,EAAsBC,SAAtB,EAAiCE,EAAjC,CARsB,CAAvB;AAWA,SAAO,cAAC,OAAD;AAAS,IAAA,SAAS,EAAGC;AAArB,KAAoCF,KAApC,EAAP;AACA;;AAED,eAAeJ,KAAf","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { ThemeProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { colorVariables, Wrapper } from './styles';\nimport { generateThemeVariables } from './color-algorithms';\nimport { useCx } from '../utils';\n\n/\n `Theme` allows defining theme variables for components in the `@wordpress/components` package.\n \n Multiple `Theme` components can be nested in order to override specific theme variables.\n \n \n * @example\n * ```jsx\n * import { __experimentalTheme as Theme } from '@wordpress/components';\n \n const Example = () => {\n * return (\n * <Theme accent=\"red\">\n * <Button variant=\"primary\">I'm red</Button>\n * <Theme accent=\"blue\">\n * <Button variant=\"primary\">I'm blue</Button>\n * </Theme>\n * </Theme>\n * );\n * };\n * ```\n */\nfunction Theme( {\n\taccent,\n\tbackground,\n\tclassName,\n\t...props\n}: WordPressComponentProps< ThemeProps, 'div', true > ) {\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\t...colorVariables(\n\t\t\t\t\tgenerateThemeVariables( { accent, background } )\n\t\t\t\t),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ accent, background, className, cx ]\n\t);\n\n\treturn <Wrapper className={ classes } { ...props } />;\n}\n\nexport default Theme;\n"]}

package/build-module/theme/styles.js CHANGED Viewed

@@ -8,14 +8,10 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
-export const colorVariables = _ref => {
-  let {
-    colors
-  } = _ref;
-  const shades = Object.entries(colors.gray || {}).map(_ref2 => {
-    let [k, v] = _ref2;
-    return `--wp-components-color-gray-${k}: ${v};`;
-  }).join('');
+export const colorVariables = ({
+  colors
+}) => {
+  const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-${k}: ${v};`).join('');
   return [/*#__PURE__*/css("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:colorVariables;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCSyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RoZW1lL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBUaGVtZU91dHB1dFZhbHVlcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgY29sb3JWYXJpYWJsZXMgPSAoIHsgY29sb3JzIH06IFRoZW1lT3V0cHV0VmFsdWVzICkgPT4ge1xuXHRjb25zdCBzaGFkZXMgPSBPYmplY3QuZW50cmllcyggY29sb3JzLmdyYXkgfHwge30gKVxuXHRcdC5tYXAoICggWyBrLCB2IF0gKSA9PiBgLS13cC1jb21wb25lbnRzLWNvbG9yLWdyYXktJHsgayB9OiAkeyB2IH07YCApXG5cdFx0LmpvaW4oICcnICk7XG5cblx0cmV0dXJuIFtcblx0XHRjc3NgXG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50OiAkeyBjb2xvcnMuYWNjZW50IH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0xMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjEwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0yMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjIwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWludmVydGVkOiAkeyBjb2xvcnMuYWNjZW50SW52ZXJ0ZWQgfTtcblxuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWJhY2tncm91bmQ6ICR7IGNvbG9ycy5iYWNrZ3JvdW5kIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItZm9yZWdyb3VuZDogJHsgY29sb3JzLmZvcmVncm91bmQgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1mb3JlZ3JvdW5kLWludmVydGVkOiAkeyBjb2xvcnMuZm9yZWdyb3VuZEludmVydGVkIH07XG5cblx0XHRcdCR7IHNoYWRlcyB9XG5cdFx0YCxcblx0XTtcbn07XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBgO1xuIl19 */")];
 };
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {

package/build-module/theme/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/theme/styles.ts"],"names":["css","colorVariables","colors","shades","Object","entries","gray","map","k","v","join","accent","accentDarker10","accentDarker20","accentInverted","background","foreground","foregroundInverted","Wrapper"],"mappings":";;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AAGA,OAAO,MAAMC,cAAc,GAAG,~~QAAqC~~;~~AAAA,MAAnC;~~AAAEC,~~IAAAA~~;AAAF,~~GAAmC~~;AAClE,QAAMC,MAAM,GAAGC,MAAM,CAACC,OAAP,CAAgBH,MAAM,CAACI,IAAP,IAAe,EAA/B,EACbC,GADa,CACR~~;AAAA~~,~~QAAE~~,CAAEC,CAAF,EAAKC,CAAL,CAAF~~;AAAA~~,~~WAAiB~~,8BAA8BD,CAAG,KAAKC,CAAG,~~GAA1D;AAAA~~,~~GADQ,~~EAEbC,IAFa,CAEP,EAFO,CAAf;AAIA,SAAO,cACNV,GADM,kCAE4BE,MAAM,CAACS,MAFnC,8CAGsCT,MAAM,CAACU,cAH7C,8CAIsCV,MAAM,CAACW,cAJ7C,6CAKqCX,MAAM,CAACY,cAL5C,wCAOgCZ,MAAM,CAACa,UAPvC,wCAQgCb,MAAM,CAACc,UARvC,iDASyCd,MAAM,CAACe,kBAThD,OAWFd,MAXE,yvDAAP;AAcA,CAnBM;AAqBP,OAAO,MAAMe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,8qDAAb","sourcesContent":["/*\n External dependencies\n /\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/\n Internal dependencies\n */\nimport type { ThemeOutputValues } from './types';\n\nexport const colorVariables = ( { colors }: ThemeOutputValues ) => {\n\tconst shades = Object.entries( colors.gray \|\| {} )\n\t\t.map( ( [ k, v ] ) => `--wp-components-color-gray-${ k }: ${ v };` )\n\t\t.join( '' );\n\n\treturn [\n\t\tcss`\n\t\t\t--wp-components-color-accent: ${ colors.accent };\n\t\t\t--wp-components-color-accent-darker-10: ${ colors.accentDarker10 };\n\t\t\t--wp-components-color-accent-darker-20: ${ colors.accentDarker20 };\n\t\t\t--wp-components-color-accent-inverted: ${ colors.accentInverted };\n\n\t\t\t--wp-components-color-background: ${ colors.background };\n\t\t\t--wp-components-color-foreground: ${ colors.foreground };\n\t\t\t--wp-components-color-foreground-inverted: ${ colors.foregroundInverted };\n\n\t\t\t${ shades }\n\t\t`,\n\t];\n};\n\nexport const Wrapper = styled.div``;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/theme/styles.ts"],"names":["css","colorVariables","colors","shades","Object","entries","gray","map","k","v","join","accent","accentDarker10","accentDarker20","accentInverted","background","foreground","foregroundInverted","Wrapper"],"mappings":";;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AAGA,OAAO,MAAMC,cAAc,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAqC;AAClE,QAAMC,MAAM,GAAGC,MAAM,CAACC,OAAP,CAAgBH,MAAM,CAACI,IAAP,IAAe,EAA/B,EACbC,GADa,CACR,CAAE,CAAEC,CAAF,EAAKC,CAAL,CAAF,KAAiB,8BAA8BD,CAAG,KAAKC,CAAG,GADlD,EAEbC,IAFa,CAEP,EAFO,CAAf;AAIA,SAAO,cACNV,GADM,kCAE4BE,MAAM,CAACS,MAFnC,8CAGsCT,MAAM,CAACU,cAH7C,8CAIsCV,MAAM,CAACW,cAJ7C,6CAKqCX,MAAM,CAACY,cAL5C,wCAOgCZ,MAAM,CAACa,UAPvC,wCAQgCb,MAAM,CAACc,UARvC,iDASyCd,MAAM,CAACe,kBAThD,OAWFd,MAXE,yvDAAP;AAcA,CAnBM;AAqBP,OAAO,MAAMe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,8qDAAb","sourcesContent":["/*\n External dependencies\n /\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/\n Internal dependencies\n */\nimport type { ThemeOutputValues } from './types';\n\nexport const colorVariables = ( { colors }: ThemeOutputValues ) => {\n\tconst shades = Object.entries( colors.gray \|\| {} )\n\t\t.map( ( [ k, v ] ) => `--wp-components-color-gray-${ k }: ${ v };` )\n\t\t.join( '' );\n\n\treturn [\n\t\tcss`\n\t\t\t--wp-components-color-accent: ${ colors.accent };\n\t\t\t--wp-components-color-accent-darker-10: ${ colors.accentDarker10 };\n\t\t\t--wp-components-color-accent-darker-20: ${ colors.accentDarker20 };\n\t\t\t--wp-components-color-accent-inverted: ${ colors.accentInverted };\n\n\t\t\t--wp-components-color-background: ${ colors.background };\n\t\t\t--wp-components-color-foreground: ${ colors.foreground };\n\t\t\t--wp-components-color-foreground-inverted: ${ colors.foregroundInverted };\n\n\t\t\t${ shades }\n\t\t`,\n\t];\n};\n\nexport const Wrapper = styled.div``;\n"]}