@wordpress/components 19.10.0 → 19.13.0

package/build-module/border-box-control/styles.js

@@ -10,24 +10,18 @@ import { css } from '@emotion/react';
 
 import { COLORS, CONFIG, rtl } from '../utils';
 import { space } from '../ui/utils/space';
-export const BorderBoxControl = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControl;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjbUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbmltcG9ydCB0eXBlIHsgQm9yZGVyIH0gZnJvbSAnLi4vYm9yZGVyLWNvbnRyb2wvdHlwZXMnO1xuaW1wb3J0IHR5cGUgeyBCb3JkZXJzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sID0gY3NzYGA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvcmRlckJveENvbnRyb2xMaW5rZWRCdXR0b24gPSBjc3NgXG5cdGZsZXg6IDA7XG5cdGZsZXgtYmFzaXM6IDM2cHg7XG5cdG1hcmdpbi10b3A6IDdweDtcbmA7XG5cbmNvbnN0IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9ICggYm9yZGVycz86IEJvcmRlcnMgKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogMjBweDtcblx0XHRyaWdodDogMzBweDtcblx0XHRib3R0b206IDIwcHg7XG5cdFx0bGVmdDogMzBweDtcblx0XHRib3JkZXItdG9wOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8udG9wICkgfTtcblx0XHRib3JkZXItYm90dG9tOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8uYm90dG9tICkgfTtcblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlckxlZnQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5sZWZ0ICksXG5cdFx0fSApKCkgfVxuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyUmlnaHQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5yaWdodCApLFxuXHRcdH0gKSgpIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sU3BsaXRDb250cm9scyA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHQkeyBydGwoIHsgbWFyZ2luUmlnaHQ6IHNwYWNlKCAzICkgfSwgeyBtYXJnaW5MZWZ0OiBzcGFjZSggMyApIH0gKSgpIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcbiJdfQ== */");
+export const BorderBoxControl = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControl;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjbUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbmltcG9ydCB0eXBlIHsgQm9yZGVyIH0gZnJvbSAnLi4vYm9yZGVyLWNvbnRyb2wvdHlwZXMnO1xuaW1wb3J0IHR5cGUgeyBCb3JkZXJzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sID0gY3NzYGA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvcmRlckJveENvbnRyb2xMaW5rZWRCdXR0b24gPSAoXG5cdF9fbmV4dDM2cHhEZWZhdWx0U2l6ZT86IGJvb2xlYW5cbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGZsZXg6IDA7XG5cdFx0ZmxleC1iYXNpczogMzZweDtcblx0XHRtYXJnaW4tdG9wOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnNnB4JyA6ICczcHgnIH07XG5cdGA7XG59O1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoXG5cdGJvcmRlcnM/OiBCb3JkZXJzLFxuXHRfX25leHQzNnB4RGVmYXVsdFNpemU/OiBib29sZWFuXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnMThweCcgOiAnMTVweCcgfTtcblx0XHRyaWdodDogMzBweDtcblx0XHRib3R0b206ICR7IF9fbmV4dDM2cHhEZWZhdWx0U2l6ZSA/ICcxOHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSAoKSA9PiBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCByaWdodEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdCR7IHJ0bCggeyBtYXJnaW5MZWZ0OiAnYXV0bycgfSwgeyBtYXJnaW5SaWdodDogJ2F1dG8nIH0gKSgpIH1cbmA7XG4iXX0= */");
 export const LinkedBorderControl = process.env.NODE_ENV === "production" ? {
   name: "82a6rk",
   styles: "flex:1"
 } : {
   name: "178dsw2-LinkedBorderControl",
   styles: "flex:1;label:LinkedBorderControl;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQnNDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQnNDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRfX25leHQzNnB4RGVmYXVsdFNpemU/OiBib29sZWFuXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRmbGV4OiAwO1xuXHRcdGZsZXgtYmFzaXM6IDM2cHg7XG5cdFx0bWFyZ2luLXRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzZweCcgOiAnM3B4JyB9O1xuXHRgO1xufTtcblxuY29uc3QgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2sgPSAoIGJvcmRlcj86IEJvcmRlciApID0+IHtcblx0Y29uc3Qge1xuXHRcdGNvbG9yID0gQ09MT1JTLmdyYXlbIDIwMCBdLFxuXHRcdHN0eWxlID0gJ3NvbGlkJyxcblx0XHR3aWR0aCA9IENPTkZJRy5ib3JkZXJXaWR0aCxcblx0fSA9IGJvcmRlciB8fCB7fTtcblxuXHRjb25zdCBjbGFtcGVkV2lkdGggPVxuXHRcdHdpZHRoICE9PSBDT05GSUcuYm9yZGVyV2lkdGggPyBgY2xhbXAoMXB4LCAkeyB3aWR0aCB9LCAxMHB4KWAgOiB3aWR0aDtcblx0Y29uc3QgaGFzVmlzaWJsZUJvcmRlciA9ICggISEgd2lkdGggJiYgd2lkdGggIT09ICcwJyApIHx8ICEhIGNvbG9yO1xuXHRjb25zdCBib3JkZXJTdHlsZSA9IGhhc1Zpc2libGVCb3JkZXIgPyBzdHlsZSB8fCAnc29saWQnIDogc3R5bGU7XG5cblx0cmV0dXJuIGAkeyBjb2xvciB9ICR7IGJvcmRlclN0eWxlIH0gJHsgY2xhbXBlZFdpZHRoIH1gO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xWaXN1YWxpemVyID0gKFxuXHRib3JkZXJzPzogQm9yZGVycyxcblx0X19uZXh0MzZweERlZmF1bHRTaXplPzogYm9vbGVhblxuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzE4cHgnIDogJzE1cHgnIH07XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnMThweCcgOiAnMTVweCcgfTtcblx0XHRsZWZ0OiAzMHB4O1xuXHRcdGJvcmRlci10b3A6ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKCkgPT4gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGZsZXg6IDE7XG5cdCR7IHJ0bCggeyBtYXJnaW5SaWdodDogc3BhY2UoIDMgKSB9LCB7IG1hcmdpbkxlZnQ6IHNwYWNlKCAzICkgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENlbnRlcmVkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0Z3JpZC1jb2x1bW46IHNwYW4gMjtcblx0bWFyZ2luOiAwIGF1dG87XG5gO1xuXG5leHBvcnQgY29uc3QgcmlnaHRCb3JkZXJDb250cm9sID0gKCkgPT4gY3NzYFxuXHQkeyBydGwoIHsgbWFyZ2luTGVmdDogJ2F1dG8nIH0sIHsgbWFyZ2luUmlnaHQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export const BorderBoxControlLinkedButton = process.env.NODE_ENV === "production" ? {
-  name: "3gg0za",
-  styles: "flex:0;flex-basis:36px;margin-top:7px"
-} : {
-  name: "f5zp9n-BorderBoxControlLinkedButton",
-  styles: "flex:0;flex-basis:36px;margin-top:7px;label:BorderBoxControlLinkedButton;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQitDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+export const BorderBoxControlLinkedButton = __next36pxDefaultSize => {
+  return /*#__PURE__*/css("flex:0;flex-basis:36px;margin-top:", __next36pxDefaultSize ? '6px' : '3px', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControlLinkedButton;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QlciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbmltcG9ydCB0eXBlIHsgQm9yZGVyIH0gZnJvbSAnLi4vYm9yZGVyLWNvbnRyb2wvdHlwZXMnO1xuaW1wb3J0IHR5cGUgeyBCb3JkZXJzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sID0gY3NzYGA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvcmRlckJveENvbnRyb2xMaW5rZWRCdXR0b24gPSAoXG5cdF9fbmV4dDM2cHhEZWZhdWx0U2l6ZT86IGJvb2xlYW5cbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGZsZXg6IDA7XG5cdFx0ZmxleC1iYXNpczogMzZweDtcblx0XHRtYXJnaW4tdG9wOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnNnB4JyA6ICczcHgnIH07XG5cdGA7XG59O1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoXG5cdGJvcmRlcnM/OiBCb3JkZXJzLFxuXHRfX25leHQzNnB4RGVmYXVsdFNpemU/OiBib29sZWFuXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnMThweCcgOiAnMTVweCcgfTtcblx0XHRyaWdodDogMzBweDtcblx0XHRib3R0b206ICR7IF9fbmV4dDM2cHhEZWZhdWx0U2l6ZSA/ICcxOHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSAoKSA9PiBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCByaWdodEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdCR7IHJ0bCggeyBtYXJnaW5MZWZ0OiAnYXV0bycgfSwgeyBtYXJnaW5SaWdodDogJ2F1dG8nIH0gKSgpIH1cbmA7XG4iXX0= */");
 };
 
 const BorderBoxStyleWithFallback = border => {
@@ -42,25 +36,30 @@ const BorderBoxStyleWithFallback = border => {
   return `${color} ${borderStyle} ${clampedWidth}`;
 };
 
-export const BorderBoxControlVisualizer = borders => {
-  return /*#__PURE__*/css("position:absolute;top:20px;right:30px;bottom:20px;left:30px;border-top:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.top), ";border-bottom:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.bottom), ";", rtl({
+export const borderBoxControlVisualizer = (borders, __next36pxDefaultSize) => {
+  return /*#__PURE__*/css("position:absolute;top:", __next36pxDefaultSize ? '18px' : '15px', ";right:30px;bottom:", __next36pxDefaultSize ? '18px' : '15px', ";left:30px;border-top:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.top), ";border-bottom:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.bottom), ";", rtl({
     borderLeft: BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.left)
   })(), " ", rtl({
     borderRight: BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.right)
-  })(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControlVisualizer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbmltcG9ydCB0eXBlIHsgQm9yZGVyIH0gZnJvbSAnLi4vYm9yZGVyLWNvbnRyb2wvdHlwZXMnO1xuaW1wb3J0IHR5cGUgeyBCb3JkZXJzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sID0gY3NzYGA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvcmRlckJveENvbnRyb2xMaW5rZWRCdXR0b24gPSBjc3NgXG5cdGZsZXg6IDA7XG5cdGZsZXgtYmFzaXM6IDM2cHg7XG5cdG1hcmdpbi10b3A6IDdweDtcbmA7XG5cbmNvbnN0IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9ICggYm9yZGVycz86IEJvcmRlcnMgKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogMjBweDtcblx0XHRyaWdodDogMzBweDtcblx0XHRib3R0b206IDIwcHg7XG5cdFx0bGVmdDogMzBweDtcblx0XHRib3JkZXItdG9wOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8udG9wICkgfTtcblx0XHRib3JkZXItYm90dG9tOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8uYm90dG9tICkgfTtcblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlckxlZnQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5sZWZ0ICksXG5cdFx0fSApKCkgfVxuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyUmlnaHQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5yaWdodCApLFxuXHRcdH0gKSgpIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sU3BsaXRDb250cm9scyA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHQkeyBydGwoIHsgbWFyZ2luUmlnaHQ6IHNwYWNlKCAzICkgfSwgeyBtYXJnaW5MZWZ0OiBzcGFjZSggMyApIH0gKSgpIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcbiJdfQ== */");
+  })(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:borderBoxControlVisualizer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRFciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbmltcG9ydCB0eXBlIHsgQm9yZGVyIH0gZnJvbSAnLi4vYm9yZGVyLWNvbnRyb2wvdHlwZXMnO1xuaW1wb3J0IHR5cGUgeyBCb3JkZXJzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sID0gY3NzYGA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvcmRlckJveENvbnRyb2xMaW5rZWRCdXR0b24gPSAoXG5cdF9fbmV4dDM2cHhEZWZhdWx0U2l6ZT86IGJvb2xlYW5cbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdGZsZXg6IDA7XG5cdFx0ZmxleC1iYXNpczogMzZweDtcblx0XHRtYXJnaW4tdG9wOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnNnB4JyA6ICczcHgnIH07XG5cdGA7XG59O1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoXG5cdGJvcmRlcnM/OiBCb3JkZXJzLFxuXHRfX25leHQzNnB4RGVmYXVsdFNpemU/OiBib29sZWFuXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnMThweCcgOiAnMTVweCcgfTtcblx0XHRyaWdodDogMzBweDtcblx0XHRib3R0b206ICR7IF9fbmV4dDM2cHhEZWZhdWx0U2l6ZSA/ICcxOHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSAoKSA9PiBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCByaWdodEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdCR7IHJ0bCggeyBtYXJnaW5MZWZ0OiAnYXV0bycgfSwgeyBtYXJnaW5SaWdodDogJ2F1dG8nIH0gKSgpIH1cbmA7XG4iXX0= */");
 };
-export const BorderBoxControlSplitControls = /*#__PURE__*/css("position:relative;flex:1;", rtl({
+export const borderBoxControlSplitControls = () => /*#__PURE__*/css("position:relative;flex:1;", rtl({
   marginRight: space(3)
 }, {
   marginLeft: space(3)
-})(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControlSplitControls;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */");
+})(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:borderBoxControlSplitControls;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRXNEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRfX25leHQzNnB4RGVmYXVsdFNpemU/OiBib29sZWFuXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRmbGV4OiAwO1xuXHRcdGZsZXgtYmFzaXM6IDM2cHg7XG5cdFx0bWFyZ2luLXRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzZweCcgOiAnM3B4JyB9O1xuXHRgO1xufTtcblxuY29uc3QgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2sgPSAoIGJvcmRlcj86IEJvcmRlciApID0+IHtcblx0Y29uc3Qge1xuXHRcdGNvbG9yID0gQ09MT1JTLmdyYXlbIDIwMCBdLFxuXHRcdHN0eWxlID0gJ3NvbGlkJyxcblx0XHR3aWR0aCA9IENPTkZJRy5ib3JkZXJXaWR0aCxcblx0fSA9IGJvcmRlciB8fCB7fTtcblxuXHRjb25zdCBjbGFtcGVkV2lkdGggPVxuXHRcdHdpZHRoICE9PSBDT05GSUcuYm9yZGVyV2lkdGggPyBgY2xhbXAoMXB4LCAkeyB3aWR0aCB9LCAxMHB4KWAgOiB3aWR0aDtcblx0Y29uc3QgaGFzVmlzaWJsZUJvcmRlciA9ICggISEgd2lkdGggJiYgd2lkdGggIT09ICcwJyApIHx8ICEhIGNvbG9yO1xuXHRjb25zdCBib3JkZXJTdHlsZSA9IGhhc1Zpc2libGVCb3JkZXIgPyBzdHlsZSB8fCAnc29saWQnIDogc3R5bGU7XG5cblx0cmV0dXJuIGAkeyBjb2xvciB9ICR7IGJvcmRlclN0eWxlIH0gJHsgY2xhbXBlZFdpZHRoIH1gO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xWaXN1YWxpemVyID0gKFxuXHRib3JkZXJzPzogQm9yZGVycyxcblx0X19uZXh0MzZweERlZmF1bHRTaXplPzogYm9vbGVhblxuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzE4cHgnIDogJzE1cHgnIH07XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnMThweCcgOiAnMTVweCcgfTtcblx0XHRsZWZ0OiAzMHB4O1xuXHRcdGJvcmRlci10b3A6ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKCkgPT4gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGZsZXg6IDE7XG5cdCR7IHJ0bCggeyBtYXJnaW5SaWdodDogc3BhY2UoIDMgKSB9LCB7IG1hcmdpbkxlZnQ6IHNwYWNlKCAzICkgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENlbnRlcmVkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0Z3JpZC1jb2x1bW46IHNwYW4gMjtcblx0bWFyZ2luOiAwIGF1dG87XG5gO1xuXG5leHBvcnQgY29uc3QgcmlnaHRCb3JkZXJDb250cm9sID0gKCkgPT4gY3NzYFxuXHQkeyBydGwoIHsgbWFyZ2luTGVmdDogJ2F1dG8nIH0sIHsgbWFyZ2luUmlnaHQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
 export const CenteredBorderControl = process.env.NODE_ENV === "production" ? {
   name: "1nwbfnf",
   styles: "grid-column:span 2;margin:0 auto"
 } : {
   name: "1mxp6dq-CenteredBorderControl",
   styles: "grid-column:span 2;margin:0 auto;label:CenteredBorderControl;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRXdDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3RXdDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRfX25leHQzNnB4RGVmYXVsdFNpemU/OiBib29sZWFuXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRmbGV4OiAwO1xuXHRcdGZsZXgtYmFzaXM6IDM2cHg7XG5cdFx0bWFyZ2luLXRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzZweCcgOiAnM3B4JyB9O1xuXHRgO1xufTtcblxuY29uc3QgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2sgPSAoIGJvcmRlcj86IEJvcmRlciApID0+IHtcblx0Y29uc3Qge1xuXHRcdGNvbG9yID0gQ09MT1JTLmdyYXlbIDIwMCBdLFxuXHRcdHN0eWxlID0gJ3NvbGlkJyxcblx0XHR3aWR0aCA9IENPTkZJRy5ib3JkZXJXaWR0aCxcblx0fSA9IGJvcmRlciB8fCB7fTtcblxuXHRjb25zdCBjbGFtcGVkV2lkdGggPVxuXHRcdHdpZHRoICE9PSBDT05GSUcuYm9yZGVyV2lkdGggPyBgY2xhbXAoMXB4LCAkeyB3aWR0aCB9LCAxMHB4KWAgOiB3aWR0aDtcblx0Y29uc3QgaGFzVmlzaWJsZUJvcmRlciA9ICggISEgd2lkdGggJiYgd2lkdGggIT09ICcwJyApIHx8ICEhIGNvbG9yO1xuXHRjb25zdCBib3JkZXJTdHlsZSA9IGhhc1Zpc2libGVCb3JkZXIgPyBzdHlsZSB8fCAnc29saWQnIDogc3R5bGU7XG5cblx0cmV0dXJuIGAkeyBjb2xvciB9ICR7IGJvcmRlclN0eWxlIH0gJHsgY2xhbXBlZFdpZHRoIH1gO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xWaXN1YWxpemVyID0gKFxuXHRib3JkZXJzPzogQm9yZGVycyxcblx0X19uZXh0MzZweERlZmF1bHRTaXplPzogYm9vbGVhblxuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzE4cHgnIDogJzE1cHgnIH07XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnMThweCcgOiAnMTVweCcgfTtcblx0XHRsZWZ0OiAzMHB4O1xuXHRcdGJvcmRlci10b3A6ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKCkgPT4gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGZsZXg6IDE7XG5cdCR7IHJ0bCggeyBtYXJnaW5SaWdodDogc3BhY2UoIDMgKSB9LCB7IG1hcmdpbkxlZnQ6IHNwYWNlKCAzICkgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENlbnRlcmVkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0Z3JpZC1jb2x1bW46IHNwYW4gMjtcblx0bWFyZ2luOiAwIGF1dG87XG5gO1xuXG5leHBvcnQgY29uc3QgcmlnaHRCb3JkZXJDb250cm9sID0gKCkgPT4gY3NzYFxuXHQkeyBydGwoIHsgbWFyZ2luTGVmdDogJ2F1dG8nIH0sIHsgbWFyZ2luUmlnaHQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+export const rightBorderControl = () => /*#__PURE__*/css(rtl({
+  marginLeft: 'auto'
+}, {
+  marginRight: 'auto'
+})(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:rightBorderControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RTJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRfX25leHQzNnB4RGVmYXVsdFNpemU/OiBib29sZWFuXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRmbGV4OiAwO1xuXHRcdGZsZXgtYmFzaXM6IDM2cHg7XG5cdFx0bWFyZ2luLXRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzZweCcgOiAnM3B4JyB9O1xuXHRgO1xufTtcblxuY29uc3QgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2sgPSAoIGJvcmRlcj86IEJvcmRlciApID0+IHtcblx0Y29uc3Qge1xuXHRcdGNvbG9yID0gQ09MT1JTLmdyYXlbIDIwMCBdLFxuXHRcdHN0eWxlID0gJ3NvbGlkJyxcblx0XHR3aWR0aCA9IENPTkZJRy5ib3JkZXJXaWR0aCxcblx0fSA9IGJvcmRlciB8fCB7fTtcblxuXHRjb25zdCBjbGFtcGVkV2lkdGggPVxuXHRcdHdpZHRoICE9PSBDT05GSUcuYm9yZGVyV2lkdGggPyBgY2xhbXAoMXB4LCAkeyB3aWR0aCB9LCAxMHB4KWAgOiB3aWR0aDtcblx0Y29uc3QgaGFzVmlzaWJsZUJvcmRlciA9ICggISEgd2lkdGggJiYgd2lkdGggIT09ICcwJyApIHx8ICEhIGNvbG9yO1xuXHRjb25zdCBib3JkZXJTdHlsZSA9IGhhc1Zpc2libGVCb3JkZXIgPyBzdHlsZSB8fCAnc29saWQnIDogc3R5bGU7XG5cblx0cmV0dXJuIGAkeyBjb2xvciB9ICR7IGJvcmRlclN0eWxlIH0gJHsgY2xhbXBlZFdpZHRoIH1gO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xWaXN1YWxpemVyID0gKFxuXHRib3JkZXJzPzogQm9yZGVycyxcblx0X19uZXh0MzZweERlZmF1bHRTaXplPzogYm9vbGVhblxuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogJHsgX19uZXh0MzZweERlZmF1bHRTaXplID8gJzE4cHgnIDogJzE1cHgnIH07XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAkeyBfX25leHQzNnB4RGVmYXVsdFNpemUgPyAnMThweCcgOiAnMTVweCcgfTtcblx0XHRsZWZ0OiAzMHB4O1xuXHRcdGJvcmRlci10b3A6ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKCkgPT4gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGZsZXg6IDE7XG5cdCR7IHJ0bCggeyBtYXJnaW5SaWdodDogc3BhY2UoIDMgKSB9LCB7IG1hcmdpbkxlZnQ6IHNwYWNlKCAzICkgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENlbnRlcmVkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0Z3JpZC1jb2x1bW46IHNwYW4gMjtcblx0bWFyZ2luOiAwIGF1dG87XG5gO1xuXG5leHBvcnQgY29uc3QgcmlnaHRCb3JkZXJDb250cm9sID0gKCkgPT4gY3NzYFxuXHQkeyBydGwoIHsgbWFyZ2luTGVmdDogJ2F1dG8nIH0sIHsgbWFyZ2luUmlnaHQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
 //# sourceMappingURL=styles.js.map

package/build-module/border-box-control/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/styles.ts"],"names":["css","COLORS","CONFIG","rtl","space","BorderBoxControl","LinkedBorderControl","BorderBoxControlLinkedButton","BorderBoxStyleWithFallback","border","color","gray","style","width","borderWidth","clampedWidth","hasVisibleBorder","borderStyle","BorderBoxControlVisualizer","borders","top","bottom","borderLeft","left","borderRight","right","BorderBoxControlSplitControls","marginRight","marginLeft","CenteredBorderControl"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,GAAzB,QAAoC,UAApC;AACA,SAASC,KAAT,QAAsB,mBAAtB;AAKA,OAAO,MAAMC,gBAAgB,gBAAGL,GAAH,ywFAAtB;AAEP,OAAO,MAAMM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAzB;AAIP,OAAO,MAAMC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlC;;AAMP,MAAMC,0BAA0B,GAAKC,MAAF,IAAuB;AACzD,QAAM;AACLC,IAAAA,KAAK,GAAGT,MAAM,CAACU,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,KAAK,GAAG,OAFH;AAGLC,IAAAA,KAAK,GAAGX,MAAM,CAACY;AAHV,MAIFL,MAAM,IAAI,EAJd;AAMA,QAAMM,YAAY,GACjBF,KAAK,KAAKX,MAAM,CAACY,WAAjB,GAAgC,cAAcD,KAAO,SAArD,GAAgEA,KADjE;AAEA,QAAMG,gBAAgB,GAAK,CAAC,CAAEH,KAAH,IAAYA,KAAK,KAAK,GAAxB,IAAiC,CAAC,CAAEH,KAA7D;AACA,QAAMO,WAAW,GAAGD,gBAAgB,GAAGJ,KAAK,IAAI,OAAZ,GAAsBA,KAA1D;AAEA,SAAQ,GAAGF,KAAO,IAAIO,WAAa,IAAIF,YAAc,EAArD;AACA,CAbD;;AAeA,OAAO,MAAMG,0BAA0B,GAAKC,OAAF,IAAyB;AAClE,sBAAOnB,GAAP,4EAMgBQ,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,GAAX,CAN1C,qBAOmBZ,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,MAAX,CAP7C,OAQIlB,GAAG,CAAE;AACPmB,IAAAA,UAAU,EAAEd,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,IAAX;AAD/B,GAAF,CAAH,EARJ,OAWIpB,GAAG,CAAE;AACPqB,IAAAA,WAAW,EAAEhB,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEM,KAAX;AADhC,GAAF,CAAH,EAXJ;AAeA,CAhBM;AAkBP,OAAO,MAAMC,6BAA6B,gBAAG1B,GAAH,8BAGtCG,GAAG,CAAE;AAAEwB,EAAAA,WAAW,EAAEvB,KAAK,CAAE,CAAF;AAApB,CAAF,EAA+B;AAAEwB,EAAAA,UAAU,EAAExB,KAAK,CAAE,CAAF;AAAnB,CAA/B,CAAH,EAHsC,+xFAAnC;AAMP,OAAO,MAAMyB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA3B","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\n\nimport type { Border } from '../border-control/types';\nimport type { Borders } from './types';\n\nexport const BorderBoxControl = css``;\n\nexport const LinkedBorderControl = css`\n\tflex: 1;\n`;\n\nexport const BorderBoxControlLinkedButton = css`\n\tflex: 0;\n\tflex-basis: 36px;\n\tmargin-top: 7px;\n`;\n\nconst BorderBoxStyleWithFallback = ( border?: Border ) => {\n\tconst {\n\t\tcolor = COLORS.gray[ 200 ],\n\t\tstyle = 'solid',\n\t\twidth = CONFIG.borderWidth,\n\t} = border || {};\n\n\tconst clampedWidth =\n\t\twidth !== CONFIG.borderWidth ? `clamp(1px, ${ width }, 10px)` : width;\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn `${ color } ${ borderStyle } ${ clampedWidth }`;\n};\n\nexport const BorderBoxControlVisualizer = ( borders?: Borders ) => {\n\treturn css`\n\t\tposition: absolute;\n\t\ttop: 20px;\n\t\tright: 30px;\n\t\tbottom: 20px;\n\t\tleft: 30px;\n\t\tborder-top: ${ BorderBoxStyleWithFallback( borders?.top ) };\n\t\tborder-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };\n\t\t${ rtl( {\n\t\t\tborderLeft: BorderBoxStyleWithFallback( borders?.left ),\n\t\t} )() }\n\t\t${ rtl( {\n\t\t\tborderRight: BorderBoxStyleWithFallback( borders?.right ),\n\t\t} )() }\n\t`;\n};\n\nexport const BorderBoxControlSplitControls = css`\n\tposition: relative;\n\tflex: 1;\n\t${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }\n`;\n\nexport const CenteredBorderControl = css`\n\tgrid-column: span 2;\n\tmargin: 0 auto;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/styles.ts"],"names":["css","COLORS","CONFIG","rtl","space","BorderBoxControl","LinkedBorderControl","BorderBoxControlLinkedButton","__next36pxDefaultSize","BorderBoxStyleWithFallback","border","color","gray","style","width","borderWidth","clampedWidth","hasVisibleBorder","borderStyle","borderBoxControlVisualizer","borders","top","bottom","borderLeft","left","borderRight","right","borderBoxControlSplitControls","marginRight","marginLeft","CenteredBorderControl","rightBorderControl"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,GAAzB,QAAoC,UAApC;AACA,SAASC,KAAT,QAAsB,mBAAtB;AAKA,OAAO,MAAMC,gBAAgB,gBAAGL,GAAH,ytGAAtB;AAEP,OAAO,MAAMM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAzB;AAIP,OAAO,MAAMC,4BAA4B,GACxCC,qBAD2C,IAEvC;AACJ,sBAAOR,GAAP,uCAGgBQ,qBAAqB,GAAG,KAAH,GAAW,KAHhD;AAKA,CARM;;AAUP,MAAMC,0BAA0B,GAAKC,MAAF,IAAuB;AACzD,QAAM;AACLC,IAAAA,KAAK,GAAGV,MAAM,CAACW,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,KAAK,GAAG,OAFH;AAGLC,IAAAA,KAAK,GAAGZ,MAAM,CAACa;AAHV,MAIFL,MAAM,IAAI,EAJd;AAMA,QAAMM,YAAY,GACjBF,KAAK,KAAKZ,MAAM,CAACa,WAAjB,GAAgC,cAAcD,KAAO,SAArD,GAAgEA,KADjE;AAEA,QAAMG,gBAAgB,GAAK,CAAC,CAAEH,KAAH,IAAYA,KAAK,KAAK,GAAxB,IAAiC,CAAC,CAAEH,KAA7D;AACA,QAAMO,WAAW,GAAGD,gBAAgB,GAAGJ,KAAK,IAAI,OAAZ,GAAsBA,KAA1D;AAEA,SAAQ,GAAGF,KAAO,IAAIO,WAAa,IAAIF,YAAc,EAArD;AACA,CAbD;;AAeA,OAAO,MAAMG,0BAA0B,GAAG,CACzCC,OADyC,EAEzCZ,qBAFyC,KAGrC;AACJ,sBAAOR,GAAP,2BAESQ,qBAAqB,GAAG,MAAH,GAAY,MAF1C,yBAIYA,qBAAqB,GAAG,MAAH,GAAY,MAJ7C,4BAMgBC,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,GAAX,CAN1C,qBAOmBZ,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,MAAX,CAP7C,OAQInB,GAAG,CAAE;AACPoB,IAAAA,UAAU,EAAEd,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,IAAX;AAD/B,GAAF,CAAH,EARJ,OAWIrB,GAAG,CAAE;AACPsB,IAAAA,WAAW,EAAEhB,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEM,KAAX;AADhC,GAAF,CAAH,EAXJ;AAeA,CAnBM;AAqBP,OAAO,MAAMC,6BAA6B,GAAG,mBAAM3B,GAAN,8BAGzCG,GAAG,CAAE;AAAEyB,EAAAA,WAAW,EAAExB,KAAK,CAAE,CAAF;AAApB,CAAF,EAA+B;AAAEyB,EAAAA,UAAU,EAAEzB,KAAK,CAAE,CAAF;AAAnB,CAA/B,CAAH,EAHyC,+uGAAtC;AAMP,OAAO,MAAM0B,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA3B;AAKP,OAAO,MAAMC,kBAAkB,GAAG,mBAAM/B,GAAN,CAC9BG,GAAG,CAAE;AAAE0B,EAAAA,UAAU,EAAE;AAAd,CAAF,EAA0B;AAAED,EAAAA,WAAW,EAAE;AAAf,CAA1B,CAAH,EAD8B,ouGAA3B","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\n\nimport type { Border } from '../border-control/types';\nimport type { Borders } from './types';\n\nexport const BorderBoxControl = css``;\n\nexport const LinkedBorderControl = css`\n\tflex: 1;\n`;\n\nexport const BorderBoxControlLinkedButton = (\n\t__next36pxDefaultSize?: boolean\n) => {\n\treturn css`\n\t\tflex: 0;\n\t\tflex-basis: 36px;\n\t\tmargin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };\n\t`;\n};\n\nconst BorderBoxStyleWithFallback = ( border?: Border ) => {\n\tconst {\n\t\tcolor = COLORS.gray[ 200 ],\n\t\tstyle = 'solid',\n\t\twidth = CONFIG.borderWidth,\n\t} = border || {};\n\n\tconst clampedWidth =\n\t\twidth !== CONFIG.borderWidth ? `clamp(1px, ${ width }, 10px)` : width;\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn `${ color } ${ borderStyle } ${ clampedWidth }`;\n};\n\nexport const borderBoxControlVisualizer = (\n\tborders?: Borders,\n\t__next36pxDefaultSize?: boolean\n) => {\n\treturn css`\n\t\tposition: absolute;\n\t\ttop: ${ __next36pxDefaultSize ? '18px' : '15px' };\n\t\tright: 30px;\n\t\tbottom: ${ __next36pxDefaultSize ? '18px' : '15px' };\n\t\tleft: 30px;\n\t\tborder-top: ${ BorderBoxStyleWithFallback( borders?.top ) };\n\t\tborder-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };\n\t\t${ rtl( {\n\t\t\tborderLeft: BorderBoxStyleWithFallback( borders?.left ),\n\t\t} )() }\n\t\t${ rtl( {\n\t\t\tborderRight: BorderBoxStyleWithFallback( borders?.right ),\n\t\t} )() }\n\t`;\n};\n\nexport const borderBoxControlSplitControls = () => css`\n\tposition: relative;\n\tflex: 1;\n\t${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }\n`;\n\nexport const CenteredBorderControl = css`\n\tgrid-column: span 2;\n\tmargin: 0 auto;\n`;\n\nexport const rightBorderControl = () => css`\n\t${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }\n`;\n"]}

package/build-module/border-box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/utils.ts"],"names":["sides","borderProps","isEmptyBorder","border","some","prop","undefined","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : undefined,\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst { color: fallbackColor, style: fallbackStyle, width: fallbackWidth } =\n\t\tfallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/utils.ts"],"names":["sides","borderProps","isEmptyBorder","border","some","prop","undefined","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : undefined,\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst {\n\t\tcolor: fallbackColor,\n\t\tstyle: fallbackStyle,\n\t\twidth: fallbackWidth,\n\t} = fallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n"]}

package/build-module/border-control/border-control/component.js

@@ -42,7 +42,7 @@ const BorderControl = (props, forwardedRef) => {
     onSliderChange,
     onWidthChange,
     placeholder,
-    popoverContentClassName,
+    __unstablePopoverProps,
     previousStyleSelection,
     showDropdownHeader,
     sliderClassName,
@@ -53,6 +53,7 @@ const BorderControl = (props, forwardedRef) => {
     withSlider,
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
+    __next36pxDefaultSize,
     ...otherProps
   } = useBorderControl(props);
   return createElement(View, _extends({}, otherProps, {
@@ -68,7 +69,7 @@ const BorderControl = (props, forwardedRef) => {
   }, createElement(BorderControlDropdown, {
     border: border,
     colors: colors,
-    contentClassName: popoverContentClassName,
+    __unstablePopoverProps: __unstablePopoverProps,
     disableCustomColors: disableCustomColors,
     enableAlpha: enableAlpha,
     enableStyle: enableStyle,
@@ -76,7 +77,8 @@ const BorderControl = (props, forwardedRef) => {
     previousStyleSelection: previousStyleSelection,
     showDropdownHeader: showDropdownHeader,
     __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
-    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    __next36pxDefaultSize: __next36pxDefaultSize
   }), createElement(UnitControl, {
     className: widthControlClassName,
     min: 0,

package/build-module/border-control/border-control/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","BorderControl","forwardedRef","colors","disableCustomColors","enableAlpha","enableStyle","innerWrapperClassName","onBorderChange","onSliderChange","onWidthChange","placeholder","popoverContentClassName","previousStyleSelection","showDropdownHeader","sliderClassName","value","border","widthControlClassName","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","width","includes","undefined","ConnectedBorderControl"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\tpopoverContentClassName,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 3 }>\n\t\t\t\t<HStack className={ innerWrapperClassName } alignment=\"stretch\">\n\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tcontentClassName={ popoverContentClassName }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tclassName={ widthControlClassName }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControl = contextConnect( BorderControl, 'BorderControl' );\n\nexport default ConnectedBorderControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","BorderControl","forwardedRef","colors","disableCustomColors","enableAlpha","enableStyle","innerWrapperClassName","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","sliderClassName","value","border","widthControlClassName","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","width","includes","undefined","ConnectedBorderControl"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 3 }>\n\t\t\t\t<HStack className={ innerWrapperClassName } alignment=\"stretch\">\n\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tclassName={ widthControlClassName }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControl = contextConnect( BorderControl, 'BorderControl' );\n\nexport default ConnectedBorderControl;\n"]}

package/build-module/border-control/border-control/hook.js

@@ -30,6 +30,7 @@ export function useBorderControl(props) {
     shouldSanitizeBorder = true,
     value: border,
     width,
+    __next36pxDefaultSize = false,
     ...otherProps
   } = useContextSystem(props, 'BorderControl');
   const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border === null || border === void 0 ? void 0 : border.width);
@@ -43,7 +44,7 @@ export function useBorderControl(props) {
     }
 
     onChange(newBorder);
-  }, [onChange, shouldSanitizeBorder, sanitizeBorder]);
+  }, [onChange, shouldSanitizeBorder]);
   const onWidthChange = useCallback(newWidth => {
     const newWidthValue = newWidth === '' ? undefined : newWidth;
     const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);
@@ -78,7 +79,7 @@ export function useBorderControl(props) {
     }
 
     onBorderChange(updatedBorder);
-  }, [border, hadPreviousZeroWidth, onBorderChange]);
+  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);
   const onSliderChange = useCallback(value => {
     onWidthChange(`${value}${widthUnit}`);
   }, [onWidthChange, widthUnit]); // Generate class names.
@@ -90,8 +91,9 @@ export function useBorderControl(props) {
   const innerWrapperClassName = useMemo(() => {
     const wrapperWidth = isCompact ? '90px' : width;
     const widthStyle = !!wrapperWidth && styles.wrapperWidth(wrapperWidth);
-    return cx(styles.innerWrapper(), widthStyle);
-  }, [isCompact, width, cx]);
+    const heightStyle = styles.wrapperHeight(__next36pxDefaultSize);
+    return cx(styles.innerWrapper(), widthStyle, heightStyle);
+  }, [isCompact, width, cx, __next36pxDefaultSize]);
   const widthControlClassName = useMemo(() => {
     return cx(styles.borderWidthControl());
   }, [cx]);
@@ -109,7 +111,8 @@ export function useBorderControl(props) {
     value: border,
     widthControlClassName,
     widthUnit,
-    widthValue
+    widthValue,
+    __next36pxDefaultSize
   };
 }
 //# sourceMappingURL=hook.js.map

package/build-module/border-control/border-control/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder, sanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\tnewWidth\n\t\t\t);\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[ border, hadPreviousZeroWidth, onBorderChange ]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value: string ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle );\n\t}, [ isCompact, width, cx ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","__next36pxDefaultSize","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","heightStyle","wrapperHeight","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value: string ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\t\tconst heightStyle = styles.wrapperHeight( __next36pxDefaultSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ isCompact, width, cx, __next36pxDefaultSize ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\t__next36pxDefaultSize,\n\t};\n}\n"]}

package/build-module/border-control/border-control-dropdown/component.js

@@ -97,6 +97,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     resetButtonClassName,
     showDropdownHeader,
     enableStyle = true,
+    __unstablePopoverProps,
     ...otherProps
   } = useBorderControlDropdown(props);
   const {
@@ -105,6 +106,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
   } = border || {};
   const colorObject = getColorObject(color, colors, !!__experimentalHasMultipleOrigins);
   const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
+  const showResetButton = color || style && style !== 'none';
   const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
 
   const renderToggle = _ref => {
@@ -150,7 +152,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
       label: __('Style'),
       value: style,
       onChange: onStyleChange
-    })), createElement(Button, {
+    })), showResetButton && createElement(Button, {
       className: resetButtonClassName,
       variant: "tertiary",
       onClick: () => {
@@ -163,7 +165,9 @@ const BorderControlDropdown = (props, forwardedRef) => {
   return createElement(Dropdown, _extends({
     renderToggle: renderToggle,
     renderContent: renderContent,
-    contentClassName: popoverClassName
+    popoverProps: { ...__unstablePopoverProps,
+      className: popoverClassName
+    }
   }, otherProps, {
     ref: forwardedRef
   }));

package/build-module/border-control/border-control-dropdown/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","noop","undefined","getColorObject","colorValue","colors","hasMultipleColorOrigins","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverClassName","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","enableStyle","otherProps","toggleAriaLabel","dropdownPosition","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\n\nimport type {\n\tColor,\n\tColorOrigin,\n\tColors,\n\tDropdownProps,\n\tPopoverProps,\n} from '../types';\n\nconst noop = () => undefined;\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: Colors | undefined,\n\thasMultipleColorOrigins: boolean\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( hasMultipleColorOrigins ) {\n\t\tlet matchedColor;\n\n\t\t( colors as ColorOrigin[] ).some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\treturn ( colors as Color[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: Color | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tcolorValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tcolorObject.color\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tcolorValue\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tenableStyle = true,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject(\n\t\tcolor,\n\t\tcolors,\n\t\t!! __experimentalHasMultipleOrigins\n\t);\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle = ( { onToggle = noop } ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent = ( { onClose }: PopoverProps ) => (\n\t\t<>\n\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t) : undefined }\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\tvalue={ color }\n\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t}\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t\t{ enableStyle && (\n\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t\t<Button\n\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonReset();\n\t\t\t\t\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t</Button>\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tcontentClassName={ popoverClassName }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","noop","undefined","getColorObject","colorValue","colors","hasMultipleColorOrigins","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverClassName","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","enableStyle","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","renderToggle","onToggle","renderContent","onClose","className","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\n\nimport type {\n\tColor,\n\tColorOrigin,\n\tColors,\n\tDropdownProps,\n\tPopoverProps,\n} from '../types';\n\nconst noop = () => undefined;\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: Colors | undefined,\n\thasMultipleColorOrigins: boolean\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( hasMultipleColorOrigins ) {\n\t\tlet matchedColor;\n\n\t\t( colors as ColorOrigin[] ).some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\treturn ( colors as Color[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: Color | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tcolorObject.color\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tcolorValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tcolorObject.color\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tcolorValue\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tenableStyle = true,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject(\n\t\tcolor,\n\t\tcolors,\n\t\t!! __experimentalHasMultipleOrigins\n\t);\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle = ( { onToggle = noop } ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent = ( { onClose }: PopoverProps ) => (\n\t\t<>\n\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t) : undefined }\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\tvalue={ color }\n\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t}\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t\t{ enableStyle && (\n\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t\t{ showResetButton && (\n\t\t\t\t<Button\n\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonReset();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t\tclassName: popoverClassName,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}

package/build-module/border-control/border-control-dropdown/hook.js

@@ -15,9 +15,9 @@ export function useBorderControlDropdown(props) {
     border,
     className,
     colors,
-    contentClassName,
     onChange,
     previousStyleSelection,
+    __next36pxDefaultSize,
     ...otherProps
   } = useContextSystem(props, 'BorderControlDropdown');
   const [widthValue] = parseQuantityAndUnitFromRawValue(border === null || border === void 0 ? void 0 : border.width);
@@ -57,11 +57,11 @@ export function useBorderControlDropdown(props) {
     return cx(styles.borderColorIndicator);
   }, [cx]);
   const indicatorWrapperClassName = useMemo(() => {
-    return cx(styles.colorIndicatorWrapper(border));
-  }, [border, cx]);
+    return cx(styles.colorIndicatorWrapper(border, __next36pxDefaultSize));
+  }, [border, cx, __next36pxDefaultSize]);
   const popoverClassName = useMemo(() => {
-    return cx(styles.borderControlPopover, contentClassName);
-  }, [cx, contentClassName]);
+    return cx(styles.borderControlPopover);
+  }, [cx]);
   const popoverControlsClassName = useMemo(() => {
     return cx(styles.borderControlPopoverControls);
   }, [cx]);

package/build-module/border-control/border-control-dropdown/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","contentClassName","onChange","previousStyleSelection","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverClassName","borderControlPopover","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors,\n\t\tcontentClassName,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown(), className );\n\t}, [ className, cx ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx( styles.colorIndicatorWrapper( border ) );\n\t}, [ border, cx ] );\n\n\tconst popoverClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopover, contentClassName );\n\t}, [ cx, contentClassName ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","onChange","previousStyleSelection","__next36pxDefaultSize","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverClassName","borderControlPopover","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown(), className );\n\t}, [ className, cx ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.colorIndicatorWrapper( border, __next36pxDefaultSize )\n\t\t);\n\t}, [ border, cx, __next36pxDefaultSize ] );\n\n\tconst popoverClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopover );\n\t}, [ cx ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t};\n}\n"]}