@wordpress/ui 0.5.1-next.v.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (257) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/build/box/box.cjs +2 -2
  3. package/build/box/box.cjs.map +2 -2
  4. package/build/button/button.cjs +18 -303
  5. package/build/button/button.cjs.map +3 -3
  6. package/build/form/primitives/constants.cjs +35 -0
  7. package/build/form/primitives/constants.cjs.map +7 -0
  8. package/build/form/primitives/field/description.cjs +6 -33
  9. package/build/form/primitives/field/description.cjs.map +2 -2
  10. package/build/form/primitives/field/details.cjs +6 -33
  11. package/build/form/primitives/field/details.cjs.map +2 -2
  12. package/build/form/primitives/field/label.cjs +6 -33
  13. package/build/form/primitives/field/label.cjs.map +2 -2
  14. package/build/form/primitives/field/root.cjs +6 -17
  15. package/build/form/primitives/field/root.cjs.map +2 -2
  16. package/build/form/primitives/fieldset/description.cjs +6 -33
  17. package/build/form/primitives/fieldset/description.cjs.map +2 -2
  18. package/build/form/primitives/fieldset/details.cjs +6 -33
  19. package/build/form/primitives/fieldset/details.cjs.map +2 -2
  20. package/build/form/primitives/fieldset/legend.cjs +6 -33
  21. package/build/form/primitives/fieldset/legend.cjs.map +2 -2
  22. package/build/form/primitives/fieldset/root.cjs +6 -16
  23. package/build/form/primitives/fieldset/root.cjs.map +2 -2
  24. package/build/form/primitives/index.cjs +8 -2
  25. package/build/form/primitives/index.cjs.map +2 -2
  26. package/build/form/primitives/input/index.cjs +31 -0
  27. package/build/form/primitives/input/index.cjs.map +7 -0
  28. package/build/form/primitives/input/input.cjs +82 -0
  29. package/build/form/primitives/input/input.cjs.map +7 -0
  30. package/build/form/primitives/input/types.cjs +19 -0
  31. package/build/form/primitives/input/types.cjs.map +7 -0
  32. package/build/form/primitives/input-layout/input-layout.cjs +12 -111
  33. package/build/form/primitives/input-layout/input-layout.cjs.map +3 -3
  34. package/build/form/primitives/input-layout/slot.cjs +6 -94
  35. package/build/form/primitives/input-layout/slot.cjs.map +2 -2
  36. package/build/form/primitives/select/index.cjs +40 -0
  37. package/build/form/primitives/select/index.cjs.map +7 -0
  38. package/build/form/primitives/select/item.cjs +98 -0
  39. package/build/form/primitives/select/item.cjs.map +7 -0
  40. package/build/form/primitives/select/popup.cjs +109 -0
  41. package/build/form/primitives/select/popup.cjs.map +7 -0
  42. package/build/form/primitives/select/root.cjs +35 -0
  43. package/build/form/primitives/select/root.cjs.map +7 -0
  44. package/build/form/primitives/select/trigger.cjs +116 -0
  45. package/build/form/primitives/select/trigger.cjs.map +7 -0
  46. package/build/form/primitives/select/types.cjs +19 -0
  47. package/build/form/primitives/select/types.cjs.map +7 -0
  48. package/build/index.cjs +19 -0
  49. package/build/index.cjs.map +2 -2
  50. package/build/lock-unlock.cjs +37 -0
  51. package/build/lock-unlock.cjs.map +7 -0
  52. package/build/stack/stack.cjs +6 -11
  53. package/build/stack/stack.cjs.map +2 -2
  54. package/build/tooltip/index.cjs +40 -0
  55. package/build/tooltip/index.cjs.map +7 -0
  56. package/build/tooltip/popup.cjs +100 -0
  57. package/build/tooltip/popup.cjs.map +7 -0
  58. package/build/tooltip/provider.cjs +35 -0
  59. package/build/tooltip/provider.cjs.map +7 -0
  60. package/build/tooltip/root.cjs +35 -0
  61. package/build/tooltip/root.cjs.map +7 -0
  62. package/build/tooltip/trigger.cjs +38 -0
  63. package/build/tooltip/trigger.cjs.map +7 -0
  64. package/build/tooltip/types.cjs +19 -0
  65. package/build/tooltip/types.cjs.map +7 -0
  66. package/build/utils/types.cjs.map +1 -1
  67. package/build/visually-hidden/visually-hidden.cjs +6 -19
  68. package/build/visually-hidden/visually-hidden.cjs.map +2 -2
  69. package/build-module/box/box.mjs +2 -2
  70. package/build-module/box/box.mjs.map +2 -2
  71. package/build-module/button/button.mjs +18 -303
  72. package/build-module/button/button.mjs.map +3 -3
  73. package/build-module/form/primitives/constants.mjs +10 -0
  74. package/build-module/form/primitives/constants.mjs.map +7 -0
  75. package/build-module/form/primitives/field/description.mjs +6 -33
  76. package/build-module/form/primitives/field/description.mjs.map +2 -2
  77. package/build-module/form/primitives/field/details.mjs +6 -33
  78. package/build-module/form/primitives/field/details.mjs.map +2 -2
  79. package/build-module/form/primitives/field/label.mjs +6 -33
  80. package/build-module/form/primitives/field/label.mjs.map +2 -2
  81. package/build-module/form/primitives/field/root.mjs +6 -17
  82. package/build-module/form/primitives/field/root.mjs.map +2 -2
  83. package/build-module/form/primitives/fieldset/description.mjs +6 -33
  84. package/build-module/form/primitives/fieldset/description.mjs.map +2 -2
  85. package/build-module/form/primitives/fieldset/details.mjs +6 -33
  86. package/build-module/form/primitives/fieldset/details.mjs.map +2 -2
  87. package/build-module/form/primitives/fieldset/legend.mjs +6 -33
  88. package/build-module/form/primitives/fieldset/legend.mjs.map +2 -2
  89. package/build-module/form/primitives/fieldset/root.mjs +6 -16
  90. package/build-module/form/primitives/fieldset/root.mjs.map +2 -2
  91. package/build-module/form/primitives/index.mjs +5 -1
  92. package/build-module/form/primitives/index.mjs.map +2 -2
  93. package/build-module/form/primitives/input/index.mjs +6 -0
  94. package/build-module/form/primitives/input/index.mjs.map +7 -0
  95. package/build-module/form/primitives/input/input.mjs +47 -0
  96. package/build-module/form/primitives/input/input.mjs.map +7 -0
  97. package/build-module/form/primitives/input/types.mjs +1 -0
  98. package/build-module/form/primitives/input/types.mjs.map +7 -0
  99. package/build-module/form/primitives/input-layout/input-layout.mjs +12 -111
  100. package/build-module/form/primitives/input-layout/input-layout.mjs.map +3 -3
  101. package/build-module/form/primitives/input-layout/slot.mjs +6 -94
  102. package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
  103. package/build-module/form/primitives/select/index.mjs +12 -0
  104. package/build-module/form/primitives/select/index.mjs.map +7 -0
  105. package/build-module/form/primitives/select/item.mjs +63 -0
  106. package/build-module/form/primitives/select/item.mjs.map +7 -0
  107. package/build-module/form/primitives/select/popup.mjs +76 -0
  108. package/build-module/form/primitives/select/popup.mjs.map +7 -0
  109. package/build-module/form/primitives/select/root.mjs +10 -0
  110. package/build-module/form/primitives/select/root.mjs.map +7 -0
  111. package/build-module/form/primitives/select/trigger.mjs +81 -0
  112. package/build-module/form/primitives/select/trigger.mjs.map +7 -0
  113. package/build-module/form/primitives/select/types.mjs +1 -0
  114. package/build-module/form/primitives/select/types.mjs.map +7 -0
  115. package/build-module/index.mjs +4 -0
  116. package/build-module/index.mjs.map +2 -2
  117. package/build-module/lock-unlock.mjs +11 -0
  118. package/build-module/lock-unlock.mjs.map +7 -0
  119. package/build-module/stack/stack.mjs +6 -11
  120. package/build-module/stack/stack.mjs.map +2 -2
  121. package/build-module/tooltip/index.mjs +12 -0
  122. package/build-module/tooltip/index.mjs.map +7 -0
  123. package/build-module/tooltip/popup.mjs +67 -0
  124. package/build-module/tooltip/popup.mjs.map +7 -0
  125. package/build-module/tooltip/provider.mjs +10 -0
  126. package/build-module/tooltip/provider.mjs.map +7 -0
  127. package/build-module/tooltip/root.mjs +10 -0
  128. package/build-module/tooltip/root.mjs.map +7 -0
  129. package/build-module/tooltip/trigger.mjs +13 -0
  130. package/build-module/tooltip/trigger.mjs.map +7 -0
  131. package/build-module/tooltip/types.mjs +1 -0
  132. package/build-module/tooltip/types.mjs.map +7 -0
  133. package/build-module/visually-hidden/visually-hidden.mjs +6 -19
  134. package/build-module/visually-hidden/visually-hidden.mjs.map +2 -2
  135. package/build-types/badge/stories/choosing-intent.story.d.ts +17 -0
  136. package/build-types/badge/stories/choosing-intent.story.d.ts.map +1 -0
  137. package/build-types/badge/stories/index.story.d.ts +1 -1
  138. package/build-types/badge/stories/index.story.d.ts.map +1 -1
  139. package/build-types/box/stories/index.story.d.ts +1 -1
  140. package/build-types/box/stories/index.story.d.ts.map +1 -1
  141. package/build-types/button/stories/index.story.d.ts +1 -1
  142. package/build-types/button/stories/index.story.d.ts.map +1 -1
  143. package/build-types/form/primitives/constants.d.ts +9 -0
  144. package/build-types/form/primitives/constants.d.ts.map +1 -0
  145. package/build-types/form/primitives/field/stories/index.story.d.ts +1 -1
  146. package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
  147. package/build-types/form/primitives/fieldset/stories/index.story.d.ts +1 -1
  148. package/build-types/form/primitives/fieldset/stories/index.story.d.ts.map +1 -1
  149. package/build-types/form/primitives/index.d.ts +2 -0
  150. package/build-types/form/primitives/index.d.ts.map +1 -1
  151. package/build-types/form/primitives/input/index.d.ts +2 -0
  152. package/build-types/form/primitives/input/index.d.ts.map +1 -0
  153. package/build-types/form/primitives/input/input.d.ts +10 -0
  154. package/build-types/form/primitives/input/input.d.ts.map +1 -0
  155. package/build-types/form/primitives/input/stories/index.story.d.ts +13 -0
  156. package/build-types/form/primitives/input/stories/index.story.d.ts.map +1 -0
  157. package/build-types/form/primitives/input/test/index.test.d.ts +2 -0
  158. package/build-types/form/primitives/input/test/index.test.d.ts.map +1 -0
  159. package/build-types/form/primitives/input/types.d.ts +27 -0
  160. package/build-types/form/primitives/input/types.d.ts.map +1 -0
  161. package/build-types/form/primitives/input-layout/stories/index.story.d.ts +1 -1
  162. package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map +1 -1
  163. package/build-types/form/primitives/select/index.d.ts +5 -0
  164. package/build-types/form/primitives/select/index.d.ts.map +1 -0
  165. package/build-types/form/primitives/select/item.d.ts +7 -0
  166. package/build-types/form/primitives/select/item.d.ts.map +1 -0
  167. package/build-types/form/primitives/select/popup.d.ts +2 -0
  168. package/build-types/form/primitives/select/popup.d.ts.map +1 -0
  169. package/build-types/form/primitives/select/root.d.ts +3 -0
  170. package/build-types/form/primitives/select/root.d.ts.map +1 -0
  171. package/build-types/form/primitives/select/stories/index.story.d.ts +50 -0
  172. package/build-types/form/primitives/select/stories/index.story.d.ts.map +1 -0
  173. package/build-types/form/primitives/select/test/index.test.d.ts +2 -0
  174. package/build-types/form/primitives/select/test/index.test.d.ts.map +1 -0
  175. package/build-types/form/primitives/select/trigger.d.ts +7 -0
  176. package/build-types/form/primitives/select/trigger.d.ts.map +1 -0
  177. package/build-types/form/primitives/select/types.d.ts +42 -0
  178. package/build-types/form/primitives/select/types.d.ts.map +1 -0
  179. package/build-types/icon/stories/index.story.d.ts +1 -1
  180. package/build-types/icon/stories/index.story.d.ts.map +1 -1
  181. package/build-types/index.d.ts +1 -0
  182. package/build-types/index.d.ts.map +1 -1
  183. package/build-types/lock-unlock.d.ts +2 -0
  184. package/build-types/lock-unlock.d.ts.map +1 -0
  185. package/build-types/stack/stories/index.story.d.ts +1 -1
  186. package/build-types/stack/stories/index.story.d.ts.map +1 -1
  187. package/build-types/tooltip/index.d.ts +6 -0
  188. package/build-types/tooltip/index.d.ts.map +1 -0
  189. package/build-types/tooltip/popup.d.ts +4 -0
  190. package/build-types/tooltip/popup.d.ts.map +1 -0
  191. package/build-types/tooltip/provider.d.ts +4 -0
  192. package/build-types/tooltip/provider.d.ts.map +1 -0
  193. package/build-types/tooltip/root.d.ts +4 -0
  194. package/build-types/tooltip/root.d.ts.map +1 -0
  195. package/build-types/tooltip/stories/index.story.d.ts +23 -0
  196. package/build-types/tooltip/stories/index.story.d.ts.map +1 -0
  197. package/build-types/tooltip/test/index.test.d.ts +2 -0
  198. package/build-types/tooltip/test/index.test.d.ts.map +1 -0
  199. package/build-types/tooltip/trigger.d.ts +4 -0
  200. package/build-types/tooltip/trigger.d.ts.map +1 -0
  201. package/build-types/tooltip/types.d.ts +18 -0
  202. package/build-types/tooltip/types.d.ts.map +1 -0
  203. package/build-types/utils/types.d.ts +0 -3
  204. package/build-types/utils/types.d.ts.map +1 -1
  205. package/build-types/visually-hidden/stories/index.story.d.ts +1 -1
  206. package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
  207. package/package.json +12 -10
  208. package/src/badge/stories/choosing-intent.mdx +29 -32
  209. package/src/badge/stories/choosing-intent.story.tsx +129 -0
  210. package/src/badge/stories/index.story.tsx +1 -1
  211. package/src/box/box.tsx +2 -2
  212. package/src/box/stories/index.story.tsx +1 -1
  213. package/src/box/test/box.test.tsx +0 -11
  214. package/src/button/stories/index.story.tsx +1 -6
  215. package/src/button/style.module.css +2 -2
  216. package/src/button/test/button.test.tsx +1 -16
  217. package/src/form/primitives/constants.ts +10 -0
  218. package/src/form/primitives/field/stories/index.story.tsx +1 -1
  219. package/src/form/primitives/fieldset/stories/index.story.tsx +1 -1
  220. package/src/form/primitives/index.ts +2 -0
  221. package/src/form/primitives/input/index.ts +1 -0
  222. package/src/form/primitives/input/input.tsx +28 -0
  223. package/src/form/primitives/input/stories/index.story.tsx +40 -0
  224. package/src/form/primitives/input/style.module.css +34 -0
  225. package/src/form/primitives/input/test/index.test.tsx +13 -0
  226. package/src/form/primitives/input/types.ts +31 -0
  227. package/src/form/primitives/input-layout/stories/index.story.tsx +1 -1
  228. package/src/form/primitives/input-layout/style.module.css +5 -4
  229. package/src/form/primitives/select/index.ts +4 -0
  230. package/src/form/primitives/select/item.tsx +39 -0
  231. package/src/form/primitives/select/popup.tsx +55 -0
  232. package/src/form/primitives/select/root.tsx +6 -0
  233. package/src/form/primitives/select/stories/index.story.tsx +276 -0
  234. package/src/form/primitives/select/style.module.css +7 -0
  235. package/src/form/primitives/select/test/index.test.tsx +35 -0
  236. package/src/form/primitives/select/trigger.tsx +58 -0
  237. package/src/form/primitives/select/types.ts +52 -0
  238. package/src/icon/stories/index.story.tsx +1 -1
  239. package/src/index.ts +1 -0
  240. package/src/lock-unlock.ts +7 -0
  241. package/src/stack/stories/index.story.tsx +1 -1
  242. package/src/stories/introduction.mdx +1 -1
  243. package/src/tooltip/index.ts +6 -0
  244. package/src/tooltip/popup.tsx +64 -0
  245. package/src/tooltip/provider.tsx +8 -0
  246. package/src/tooltip/root.tsx +8 -0
  247. package/src/tooltip/stories/index.story.tsx +97 -0
  248. package/src/tooltip/style.module.css +20 -0
  249. package/src/tooltip/test/index.test.tsx +87 -0
  250. package/src/tooltip/trigger.tsx +15 -0
  251. package/src/tooltip/types.ts +26 -0
  252. package/src/utils/css/dropdown-motion.module.css +47 -0
  253. package/src/utils/css/focus.module.css +1 -1
  254. package/src/utils/css/item-popup.module.css +127 -0
  255. package/src/utils/css/select-trigger.module.css +58 -0
  256. package/src/utils/types.ts +0 -3
  257. package/src/visually-hidden/stories/index.story.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
- ## 0.5.0-next.0 (2026-01-14)
5
+ ## 0.6.0 (2026-01-29)
6
+
7
+ ## 0.5.0 (2026-01-16)
6
8
 
7
9
  ### Breaking Changes
8
10
 
@@ -17,3 +19,5 @@
17
19
  - Add `Icon` component ([#74311](https://github.com/WordPress/gutenberg/pull/74311)).
18
20
  - Add `Button` component ([#74415](https://github.com/WordPress/gutenberg/pull/74415), [#74416](https://github.com/WordPress/gutenberg/pull/74416), [#74470](https://github.com/WordPress/gutenberg/pull/74470)).
19
21
  - Add `InputLayout` primitive ([#74313](https://github.com/WordPress/gutenberg/pull/74313)).
22
+ - Add `Input` primitive ([#74615](https://github.com/WordPress/gutenberg/pull/74615)).
23
+ - Add `Select` primitive ([#74661](https://github.com/WordPress/gutenberg/pull/74661)).
package/build/box/box.cjs CHANGED
@@ -65,10 +65,10 @@ var Box = (0, import_element.forwardRef)(function Box2({
65
65
  );
66
66
  }
67
67
  if (borderRadius) {
68
- style.borderRadius = `var(--wpds-border-radius-${target}-${borderRadius}, var(--wpds-border-radius-surface-${borderRadius}))`;
68
+ style.borderRadius = `var(--wpds-border-radius-${target}-${borderRadius}, var(--wpds-border-radius-${borderRadius}))`;
69
69
  }
70
70
  if (borderWidth) {
71
- style.borderWidth = `var(--wpds-border-width-${target}-${borderWidth}, var(--wpds-border-width-surface-${borderWidth}))`;
71
+ style.borderWidth = `var(--wpds-border-width-${target}-${borderWidth}, var(--wpds-border-width-${borderWidth}))`;
72
72
  style.borderStyle = "solid";
73
73
  }
74
74
  if (borderColor) {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/box/box.tsx"],
4
- "sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport { type BoxProps } from './types';\n\n/**\n * Default render function that renders a div element with the given props.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (\n\t<div { ...props } />\n);\n\n/**\n * Capitalizes the first character of a string.\n */\nconst capitalize = ( str: string ): string =>\n\tstr.charAt( 0 ).toUpperCase() + str.slice( 1 );\n\n/**\n * Converts a size token name to a CSS design token property reference (with\n * fallback).\n *\n * @param property The CSS property name.\n * @param target The design system token target.\n * @param value The size token name.\n * @return A CSS value string with variable references.\n */\nconst getSpacingValue = (\n\tproperty: string,\n\ttarget: string,\n\tvalue: string\n): string =>\n\t`var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;\n\n/**\n * Generates CSS styles for properties with optionally directional values,\n * normalizing single values and objects with directional keys for logical\n * properties.\n *\n * @param property The CSS property name from BoxProps.\n * @param target The design system token target.\n * @param value The property value (single or object with directional keys).\n * @return A CSSProperties object with the computed styles.\n */\nconst getDimensionVariantStyles = < T extends keyof BoxProps >(\n\tproperty: T,\n\ttarget: string,\n\tvalue: NonNullable< BoxProps[ T ] >\n): React.CSSProperties =>\n\ttypeof value !== 'object'\n\t\t? { [ property ]: getSpacingValue( property, target, value ) }\n\t\t: Object.keys( value ).reduce(\n\t\t\t\t( result, key ) => ( {\n\t\t\t\t\t...result,\n\t\t\t\t\t[ property + capitalize( key ) ]: getSpacingValue(\n\t\t\t\t\t\tproperty,\n\t\t\t\t\t\ttarget,\n\t\t\t\t\t\tvalue[ key ]\n\t\t\t\t\t),\n\t\t\t\t} ),\n\t\t\t\t{} as Record< string, string >\n\t\t );\n\n/**\n * A low-level visual primitive that provides an interface for applying design\n * token-based customization for background, text, padding, and more.\n */\nexport const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(\n\t{\n\t\ttarget = 'surface',\n\t\tbackgroundColor,\n\t\tcolor,\n\t\tpadding,\n\t\tborderRadius,\n\t\tborderWidth,\n\t\tborderColor,\n\t\trender = DEFAULT_RENDER,\n\t\t...props\n\t},\n\tref\n) {\n\tconst style: React.CSSProperties = {};\n\n\tif ( backgroundColor ) {\n\t\tstyle.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;\n\t}\n\n\tif ( color ) {\n\t\tstyle.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`;\n\t}\n\n\tif ( padding ) {\n\t\tObject.assign(\n\t\t\tstyle,\n\t\t\tgetDimensionVariantStyles( 'padding', target, padding )\n\t\t);\n\t}\n\n\tif ( borderRadius ) {\n\t\tstyle.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-surface-${ borderRadius }))`;\n\t}\n\n\tif ( borderWidth ) {\n\t\tstyle.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-surface-${ borderWidth }))`;\n\t\tstyle.borderStyle = 'solid';\n\t}\n\n\tif ( borderColor ) {\n\t\tstyle.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;\n\t}\n\n\tconst element = useRender( {\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps< 'div' >( props, { style } ),\n\t} );\n\n\treturn element;\n} );\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,qBAA2B;AAO1B;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,SAAM,GAAG,OAAQ;AAMnB,IAAM,aAAa,CAAE,QACpB,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AAW9C,IAAM,kBAAkB,CACvB,UACA,QACA,UAEA,wBAAyB,QAAS,IAAK,MAAO,IAAK,KAAM,0BAA2B,QAAS,YAAa,KAAM;AAYjH,IAAM,4BAA4B,CACjC,UACA,QACA,UAEA,OAAO,UAAU,WACd,EAAE,CAAE,QAAS,GAAG,gBAAiB,UAAU,QAAQ,KAAM,EAAE,IAC3D,OAAO,KAAM,KAAM,EAAE;AAAA,EACrB,CAAE,QAAQ,SAAW;AAAA,IACpB,GAAG;AAAA,IACH,CAAE,WAAW,WAAY,GAAI,CAAE,GAAG;AAAA,MACjC;AAAA,MACA;AAAA,MACA,MAAO,GAAI;AAAA,IACZ;AAAA,EACD;AAAA,EACA,CAAC;AACD;AAMG,IAAM,UAAM,2BAAwC,SAASA,KACnE;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GACA,KACC;AACD,QAAM,QAA6B,CAAC;AAEpC,MAAK,iBAAkB;AACtB,UAAM,kBAAkB,uBAAwB,MAAO,IAAK,eAAgB,iCAAkC,eAAgB;AAAA,EAC/H;AAEA,MAAK,OAAQ;AACZ,UAAM,QAAQ,uBAAwB,MAAO,IAAK,KAAM,iCAAkC,KAAM;AAAA,EACjG;AAEA,MAAK,SAAU;AACd,WAAO;AAAA,MACN;AAAA,MACA,0BAA2B,WAAW,QAAQ,OAAQ;AAAA,IACvD;AAAA,EACD;AAEA,MAAK,cAAe;AACnB,UAAM,eAAe,4BAA6B,MAAO,IAAK,YAAa,sCAAuC,YAAa;AAAA,EAChI;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAC1H,UAAM,cAAc;AAAA,EACrB;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAAA,EAC3H;AAEA,QAAM,cAAU,wBAAW;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,WAAO,yBAAqB,OAAO,EAAE,MAAM,CAAE;AAAA,EAC9C,CAAE;AAEF,SAAO;AACR,CAAE;",
4
+ "sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport { type BoxProps } from './types';\n\n/**\n * Default render function that renders a div element with the given props.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (\n\t<div { ...props } />\n);\n\n/**\n * Capitalizes the first character of a string.\n */\nconst capitalize = ( str: string ): string =>\n\tstr.charAt( 0 ).toUpperCase() + str.slice( 1 );\n\n/**\n * Converts a size token name to a CSS design token property reference (with\n * fallback).\n *\n * @param property The CSS property name.\n * @param target The design system token target.\n * @param value The size token name.\n * @return A CSS value string with variable references.\n */\nconst getSpacingValue = (\n\tproperty: string,\n\ttarget: string,\n\tvalue: string\n): string =>\n\t`var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;\n\n/**\n * Generates CSS styles for properties with optionally directional values,\n * normalizing single values and objects with directional keys for logical\n * properties.\n *\n * @param property The CSS property name from BoxProps.\n * @param target The design system token target.\n * @param value The property value (single or object with directional keys).\n * @return A CSSProperties object with the computed styles.\n */\nconst getDimensionVariantStyles = < T extends keyof BoxProps >(\n\tproperty: T,\n\ttarget: string,\n\tvalue: NonNullable< BoxProps[ T ] >\n): React.CSSProperties =>\n\ttypeof value !== 'object'\n\t\t? { [ property ]: getSpacingValue( property, target, value ) }\n\t\t: Object.keys( value ).reduce(\n\t\t\t\t( result, key ) => ( {\n\t\t\t\t\t...result,\n\t\t\t\t\t[ property + capitalize( key ) ]: getSpacingValue(\n\t\t\t\t\t\tproperty,\n\t\t\t\t\t\ttarget,\n\t\t\t\t\t\tvalue[ key ]\n\t\t\t\t\t),\n\t\t\t\t} ),\n\t\t\t\t{} as Record< string, string >\n\t\t );\n\n/**\n * A low-level visual primitive that provides an interface for applying design\n * token-based customization for background, text, padding, and more.\n */\nexport const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(\n\t{\n\t\ttarget = 'surface',\n\t\tbackgroundColor,\n\t\tcolor,\n\t\tpadding,\n\t\tborderRadius,\n\t\tborderWidth,\n\t\tborderColor,\n\t\trender = DEFAULT_RENDER,\n\t\t...props\n\t},\n\tref\n) {\n\tconst style: React.CSSProperties = {};\n\n\tif ( backgroundColor ) {\n\t\tstyle.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;\n\t}\n\n\tif ( color ) {\n\t\tstyle.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`;\n\t}\n\n\tif ( padding ) {\n\t\tObject.assign(\n\t\t\tstyle,\n\t\t\tgetDimensionVariantStyles( 'padding', target, padding )\n\t\t);\n\t}\n\n\tif ( borderRadius ) {\n\t\tstyle.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-${ borderRadius }))`;\n\t}\n\n\tif ( borderWidth ) {\n\t\tstyle.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-${ borderWidth }))`;\n\t\tstyle.borderStyle = 'solid';\n\t}\n\n\tif ( borderColor ) {\n\t\tstyle.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;\n\t}\n\n\tconst element = useRender( {\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps< 'div' >( props, { style } ),\n\t} );\n\n\treturn element;\n} );\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,qBAA2B;AAO1B;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,SAAM,GAAG,OAAQ;AAMnB,IAAM,aAAa,CAAE,QACpB,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AAW9C,IAAM,kBAAkB,CACvB,UACA,QACA,UAEA,wBAAyB,QAAS,IAAK,MAAO,IAAK,KAAM,0BAA2B,QAAS,YAAa,KAAM;AAYjH,IAAM,4BAA4B,CACjC,UACA,QACA,UAEA,OAAO,UAAU,WACd,EAAE,CAAE,QAAS,GAAG,gBAAiB,UAAU,QAAQ,KAAM,EAAE,IAC3D,OAAO,KAAM,KAAM,EAAE;AAAA,EACrB,CAAE,QAAQ,SAAW;AAAA,IACpB,GAAG;AAAA,IACH,CAAE,WAAW,WAAY,GAAI,CAAE,GAAG;AAAA,MACjC;AAAA,MACA;AAAA,MACA,MAAO,GAAI;AAAA,IACZ;AAAA,EACD;AAAA,EACA,CAAC;AACD;AAMG,IAAM,UAAM,2BAAwC,SAASA,KACnE;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GACA,KACC;AACD,QAAM,QAA6B,CAAC;AAEpC,MAAK,iBAAkB;AACtB,UAAM,kBAAkB,uBAAwB,MAAO,IAAK,eAAgB,iCAAkC,eAAgB;AAAA,EAC/H;AAEA,MAAK,OAAQ;AACZ,UAAM,QAAQ,uBAAwB,MAAO,IAAK,KAAM,iCAAkC,KAAM;AAAA,EACjG;AAEA,MAAK,SAAU;AACd,WAAO;AAAA,MACN;AAAA,MACA,0BAA2B,WAAW,QAAQ,OAAQ;AAAA,IACvD;AAAA,EACD;AAEA,MAAK,cAAe;AACnB,UAAM,eAAe,4BAA6B,MAAO,IAAK,YAAa,8BAA+B,YAAa;AAAA,EACxH;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,6BAA8B,WAAY;AAClH,UAAM,cAAc;AAAA,EACrB;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAAA,EAC3H;AAEA,QAAM,cAAU,wBAAW;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,WAAO,yBAAqB,OAAO,EAAE,MAAM,CAAE;AAAA,EAC9C,CAAE;AAEF,SAAO;AACR,CAAE;",
6
6
  "names": ["Box"]
7
7
  }
@@ -40,316 +40,31 @@ var import_element = require("@wordpress/element");
40
40
  var import_i18n = require("@wordpress/i18n");
41
41
 
42
42
  // packages/ui/src/button/style.module.css
43
- var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
44
-
45
- @layer wp-ui-components {
46
- .style-module__button__l7D8M,
47
- .style-module__is-unstyled__q7snL {
48
- appearance: none;
49
- padding: 0;
50
- }
51
-
52
- .style-module__button__l7D8M {
53
- /* Internal variables */
54
- --wp-ui-button-font-weight: 499;
55
-
56
- --wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-strong);
57
- --wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-strong-active);
58
- --wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);
59
- --wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand-strong);
60
- --wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-strong-active);
61
- --wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);
62
- --wp-ui-button-padding-inline: calc(3 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */
63
- --wp-ui-button-height: 40px;
64
- --wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */
65
- --wp-ui-button-font-size: var(--wpds-font-size-md);
66
-
67
- /* by default, borders have the same color as the background */
68
- --wp-ui-button-border-color: var(--wp-ui-button-background-color);
69
- --wp-ui-button-border-color-active: var(--wp-ui-button-background-color-active);
70
- --wp-ui-button-border-color-disabled: var(--wp-ui-button-background-color-disabled);
71
-
72
- /* Styles */
73
- position: relative;
74
- display: inline-flex;
75
- justify-content: center;
76
- align-items: center;
77
- gap: calc(2 * var(--wpds-dimension-base)); /* TODO: Consider new interactive/control gap tokens */
78
- aspect-ratio: var(--wp-ui-button-aspect-ratio);
79
- height: var(--wp-ui-button-height);
80
- padding-inline: var(--wp-ui-button-padding-inline);
81
- border-style: solid;
82
- border-width: 1px;
83
- border-color: var(--wp-ui-button-border-color);
84
- border-radius: var(--wpds-border-radius-surface-sm);
85
- background-color: var(--wp-ui-button-background-color);
86
- background-clip: padding-box;
87
- font-family: var(--wpds-font-family-body);
88
- font-size: var(--wp-ui-button-font-size);
89
- font-weight: var(--wp-ui-button-font-weight);
90
- line-height: var(--wpds-font-line-height-sm);
91
- text-decoration: none;
92
- color: var(--wp-ui-button-foreground-color);
93
-
94
- @media not ( prefers-reduced-motion ) {
95
- transition: color 0.1s ease-out;
96
-
97
- * {
98
- transition: opacity 0.1s ease-out;
99
- }
100
- }
101
-
102
- /* Use pointer cursor for buttons that are links */
103
- &[href] {
104
- cursor: pointer;
105
- }
106
-
107
- /* Make sure that links rendered as children of \`Button\` use button styles */
108
- *[href] {
109
- color: inherit;
110
- text-decoration: inherit;
111
- }
112
-
113
- /* States */
114
- &:not([aria-disabled="true"]):is(:hover, :active, :focus) {
115
- /* hover/active/focus states apply when the button is not disabled. A non
116
- disabled, loading button will have hover/active/focus styles */
117
- --wp-ui-button-background-color: var(--wp-ui-button-background-color-active);
118
- --wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-active);
119
- --wp-ui-button-border-color: var(--wp-ui-button-border-color-active);
120
- }
121
-
122
- &[aria-disabled="true"]:not(.style-module__is-loading__kUtC8) {
123
- /* A loading button, even when disabled, won't "look" disabled */
124
- --wp-ui-button-background-color: var(--wp-ui-button-background-color-disabled);
125
- --wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-disabled);
126
- --wp-ui-button-border-color: var(--wp-ui-button-border-color-disabled);
127
-
128
- @media ( forced-colors: active ) {
129
- border-color: GrayText;
130
- color: GrayText;
131
- }
132
- }
133
-
134
- /* Loading spinner \u2014 not animated and hidden unless in loading state */
135
- &::before {
136
- content: "";
137
- position: absolute;
138
- top: 50%;
139
- inset-inline-start: 50%;
140
- transform: translate(-50%, -50%);
141
-
142
- display: block;
143
- box-sizing: border-box;
144
- height: var(--wp-ui-button-font-size);
145
- aspect-ratio: 1;
146
-
147
- border: var(--wpds-border-width-interactive-focus) solid;
148
- border-block-start-color: var(--wp-ui-button-foreground-color);
149
- border-inline-end-color: var(--wp-ui-button-foreground-color);
150
- border-block-end-color: transparent;
151
- border-inline-start-color: transparent;
152
- border-radius: 50%;
153
-
154
- pointer-events: none;
155
- opacity: 0;
156
-
157
- @media not ( prefers-reduced-motion ) {
158
- transition: opacity 0.1s ease-out;
159
- }
160
- }
161
- }
162
-
163
- .style-module__is-small__kIIFR {
164
- --wp-ui-button-padding-inline: calc(2 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */
165
- --wp-ui-button-height: 24px;
166
- }
167
-
168
- /* Variants (\`tone\` + \`variant\`) overrides compared to default styles */
169
-
170
- /* All outline buttons have a border */
171
- .style-module__is-brand__3UYMl {
172
- /* no need to redefine variables for .is-brand.is-solid as it's the default variant */
173
-
174
- /* Outline and minimal buttons use the same foreground color */
175
- &.style-module__is-outline__YtWne,
176
- &.style-module__is-minimal__rQYZo {
177
- --wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand);
178
- --wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-active);
179
- --wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);
180
- }
181
-
182
- &.style-module__is-outline__YtWne {
183
- --wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);
184
- --wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);
185
- --wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
186
- --wp-ui-button-border-color: var(--wpds-color-stroke-interactive-brand);
187
- --wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-brand-active);
188
- --wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);
189
- }
190
-
191
- &.style-module__is-minimal__rQYZo {
192
- --wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);
193
- --wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);
194
- --wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
195
- }
196
- }
197
-
198
- .style-module__is-neutral__5yKo- {
199
- &.style-module__is-solid__tQszW {
200
- --wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);
201
- --wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong-active);
202
- --wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);
203
- --wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);
204
- --wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong-active);
205
- --wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);
206
- }
207
-
208
- /* Outline and minimal buttons use the same foreground color */
209
- &.style-module__is-outline__YtWne,
210
- &.style-module__is-minimal__rQYZo {
211
- --wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral);
212
- --wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-active);
213
- --wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);
214
- }
215
-
216
- &.style-module__is-outline__YtWne {
217
- --wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);
218
- --wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);
219
- --wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
220
- --wp-ui-button-border-color: var(--wpds-color-stroke-interactive-neutral);
221
- --wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-neutral-active);
222
- --wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);
223
- }
224
-
225
- &.style-module__is-minimal__rQYZo {
226
- --wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);
227
- --wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);
228
- --wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
229
- }
230
- }
231
-
232
- .style-module__is-unstyled__q7snL {
233
- border: none;
234
- background: none;
235
- }
236
-
237
- .style-module__is-compact__z1nPG {
238
- --wp-ui-button-height: 32px;
239
- }
240
-
241
- .style-module__is-loading__kUtC8 {
242
- color: transparent;
243
-
244
- * {
245
- opacity: 0;
246
- }
247
-
248
- &::before {
249
- transition-delay: 0.05s;
250
- opacity: 1;
251
-
252
- @media not ( prefers-reduced-motion ) {
253
- animation: style-module__loading-animation__Wh1T2 1s linear infinite;
254
- }
255
- }
256
- }
257
-
258
- [aria-pressed="true"].style-module__is-minimal__rQYZo.style-module__is-neutral__5yKo- {
259
- --wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);
260
- --wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong);
261
- --wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);
262
- --wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong);
263
- }
43
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='e89bb0a0ac']")) {
44
+ const style = document.createElement("style");
45
+ style.setAttribute("data-wp-hash", "e89bb0a0ac");
46
+ style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*3);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:calc(var(--wpds-dimension-base)*2);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:"";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*2);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}'));
47
+ document.head.appendChild(style);
264
48
  }
265
-
266
- @keyframes style-module__loading-animation__Wh1T2 {
267
- 0% {
268
- transform: translate(-50%, -50%) rotate(0deg);
269
- }
270
-
271
- 100% {
272
- transform: translate(-50%, -50%) rotate(360deg);
273
- }
274
- }
275
- `;
276
- document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
277
- var style_default = {
278
- "button": "style-module__button__l7D8M",
279
- "is-unstyled": "style-module__is-unstyled__q7snL",
280
- "is-loading": "style-module__is-loading__kUtC8",
281
- "is-small": "style-module__is-small__kIIFR",
282
- "is-brand": "style-module__is-brand__3UYMl",
283
- "is-outline": "style-module__is-outline__YtWne",
284
- "is-minimal": "style-module__is-minimal__rQYZo",
285
- "is-neutral": "style-module__is-neutral__5yKo-",
286
- "is-solid": "style-module__is-solid__tQszW",
287
- "is-compact": "style-module__is-compact__z1nPG",
288
- "loading-animation": "style-module__loading-animation__Wh1T2"
289
- };
49
+ var style_default = { "button": "_97b0fc33c028be1a__button", "is-unstyled": "abbb272e2ce49bd6__is-unstyled", "is-loading": "_914b42f315c0e580__is-loading", "is-small": "_908205475f9f2a92__is-small", "is-brand": "dd460c965226cc77__is-brand", "is-outline": "_62d5a778b7b258ee__is-outline", "is-minimal": "ad0619a3217c6a5b__is-minimal", "is-neutral": "e722a8f96726aa99__is-neutral", "is-solid": "b50b3358c5fb4d0b__is-solid", "is-compact": "cf59cf1b69629838__is-compact", "loading-animation": "_5a1d53da6f830c8d__loading-animation" };
290
50
 
291
51
  // packages/ui/src/utils/css/resets.module.css
292
- var css2 = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
293
-
294
- @layer wp-ui-utilities {
295
- .resets-module__box-sizing__M2zT5 {
296
- box-sizing: border-box;
297
-
298
- *,
299
- *::before,
300
- *::after {
301
- box-sizing: inherit;
302
- }
303
- }
52
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='671ebfc62d']")) {
53
+ const style = document.createElement("style");
54
+ style.setAttribute("data-wp-hash", "671ebfc62d");
55
+ style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}"));
56
+ document.head.appendChild(style);
304
57
  }
305
- `;
306
- document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css2));
307
- var resets_default = {
308
- "box-sizing": "resets-module__box-sizing__M2zT5"
309
- };
58
+ var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
310
59
 
311
60
  // packages/ui/src/utils/css/focus.module.css
312
- var css3 = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
313
-
314
- @layer wp-ui-utilities {
315
- .focus-module__outset-ring--focus__COii5,
316
- .focus-module__outset-ring--focus-except-active__4lsr3,
317
- .focus-module__outset-ring--focus-visible__0FQby,
318
- .focus-module__outset-ring--focus-within__zYPfw,
319
- .focus-module__outset-ring--focus-within-except-active__lw0E3,
320
- .focus-module__outset-ring--focus-within-visible__xcs-5 {
321
- @media not ( prefers-reduced-motion ) {
322
- transition: outline 0.1s ease-out;
323
- }
324
-
325
- /* Outline width must be kept at 0 even with a transparent color,
326
- or else the outline will be visible in forced-colors mode. */
327
- outline-width: 0;
328
- outline-style: solid;
329
- outline-color: transparent;
330
- outline-offset: 1px;
331
- }
332
-
333
- .focus-module__outset-ring--focus__COii5:focus,
334
- .focus-module__outset-ring--focus-except-active__4lsr3:focus:not(:active),
335
- .focus-module__outset-ring--focus-visible__0FQby:focus-visible,
336
- .focus-module__outset-ring--focus-within__zYPfw:focus-within,
337
- .focus-module__outset-ring--focus-within-except-active__lw0E3:focus-within:not(:has(:active)),
338
- .focus-module__outset-ring--focus-within-visible__xcs-5:focus-within:has(:focus-visible) {
339
- outline-width: var(--wpds-border-width-interactive-focus);
340
- outline-color: var(--wpds-color-stroke-focus-brand);
341
- }
61
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='28ad59e2e3']")) {
62
+ const style = document.createElement("style");
63
+ style.setAttribute("data-wp-hash", "28ad59e2e3");
64
+ style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}"));
65
+ document.head.appendChild(style);
342
66
  }
343
- `;
344
- document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css3));
345
- var focus_default = {
346
- "outset-ring--focus": "focus-module__outset-ring--focus__COii5",
347
- "outset-ring--focus-except-active": "focus-module__outset-ring--focus-except-active__4lsr3",
348
- "outset-ring--focus-visible": "focus-module__outset-ring--focus-visible__0FQby",
349
- "outset-ring--focus-within": "focus-module__outset-ring--focus-within__zYPfw",
350
- "outset-ring--focus-within-except-active": "focus-module__outset-ring--focus-within-except-active__lw0E3",
351
- "outset-ring--focus-within-visible": "focus-module__outset-ring--focus-within-visible__xcs-5"
352
- };
67
+ var focus_default = { "outset-ring--focus": "_08e8a2e44959f892__outset-ring--focus", "outset-ring--focus-except-active": "e25b2bdd7aa21721__outset-ring--focus-except-active", "outset-ring--focus-visible": "d0541bc9dd9dc7b6__outset-ring--focus-visible", "outset-ring--focus-within": "cd83dfc2126a0846__outset-ring--focus-within", "outset-ring--focus-within-except-active": "_970d04df7376df67__outset-ring--focus-within-except-active", "outset-ring--focus-within-visible": "c5cb3ee4bddaa8e4__outset-ring--focus-within-visible" };
353
68
 
354
69
  // packages/ui/src/button/button.tsx
355
70
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/button/button.tsx", "../../src/button/style.module.css", "../../src/utils/css/resets.module.css", "../../src/utils/css/focus.module.css"],
4
- "sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__button__l7D8M,\n\t.style-module__is-unstyled__q7snL {\n\t\tappearance: none;\n\t\tpadding: 0;\n\t}\n\n\t.style-module__button__l7D8M {\n\t\t/* Internal variables */\n\t\t--wp-ui-button-font-weight: 499;\n\n\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-strong);\n\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-strong-active);\n\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);\n\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand-strong);\n\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-strong-active);\n\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);\n\t\t--wp-ui-button-padding-inline: calc(3 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */\n\t\t--wp-ui-button-height: 40px;\n\t\t--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */\n\t\t--wp-ui-button-font-size: var(--wpds-font-size-md);\n\n\t\t/* by default, borders have the same color as the background */\n\t\t--wp-ui-button-border-color: var(--wp-ui-button-background-color);\n\t\t--wp-ui-button-border-color-active: var(--wp-ui-button-background-color-active);\n\t\t--wp-ui-button-border-color-disabled: var(--wp-ui-button-background-color-disabled);\n\n\t\t/* Styles */\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: calc(2 * var(--wpds-dimension-base)); /* TODO: Consider new interactive/control gap tokens */\n\t\taspect-ratio: var(--wp-ui-button-aspect-ratio);\n\t\theight: var(--wp-ui-button-height);\n\t\tpadding-inline: var(--wp-ui-button-padding-inline);\n\t\tborder-style: solid;\n\t\tborder-width: 1px;\n\t\tborder-color: var(--wp-ui-button-border-color);\n\t\tborder-radius: var(--wpds-border-radius-surface-sm);\n\t\tbackground-color: var(--wp-ui-button-background-color);\n\t\tbackground-clip: padding-box;\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wp-ui-button-font-size);\n\t\tfont-weight: var(--wp-ui-button-font-weight);\n\t\tline-height: var(--wpds-font-line-height-sm);\n\t\ttext-decoration: none;\n\t\tcolor: var(--wp-ui-button-foreground-color);\n\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: color 0.1s ease-out;\n\n\t\t\t* {\n\t\t\t\ttransition: opacity 0.1s ease-out;\n\t\t\t}\n\t\t}\n\n\t\t/* Use pointer cursor for buttons that are links */\n\t\t&[href] {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t/* Make sure that links rendered as children of \\`Button\\` use button styles */\n\t\t*[href] {\n\t\t\tcolor: inherit;\n\t\t\ttext-decoration: inherit;\n\t\t}\n\n\t\t/* States */\n\t\t&:not([aria-disabled=\"true\"]):is(:hover, :active, :focus) {\n\t\t\t/* hover/active/focus states apply when the button is not disabled. A non\n\t\t\tdisabled, loading button will have hover/active/focus styles */\n\t\t\t--wp-ui-button-background-color: var(--wp-ui-button-background-color-active);\n\t\t\t--wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-active);\n\t\t\t--wp-ui-button-border-color: var(--wp-ui-button-border-color-active);\n\t\t}\n\n\t\t&[aria-disabled=\"true\"]:not(.style-module__is-loading__kUtC8) {\n\t\t\t/* A loading button, even when disabled, won't \"look\" disabled */\n\t\t\t--wp-ui-button-background-color: var(--wp-ui-button-background-color-disabled);\n\t\t\t--wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-disabled);\n\t\t\t--wp-ui-button-border-color: var(--wp-ui-button-border-color-disabled);\n\n\t\t\t@media ( forced-colors: active ) {\n\t\t\t\tborder-color: GrayText;\n\t\t\t\tcolor: GrayText;\n\t\t\t}\n\t\t}\n\n\t\t/* Loading spinner \u2014 not animated and hidden unless in loading state */\n\t\t&::before {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tinset-inline-start: 50%;\n\t\t\ttransform: translate(-50%, -50%);\n\n\t\t\tdisplay: block;\n\t\t\tbox-sizing: border-box;\n\t\t\theight: var(--wp-ui-button-font-size);\n\t\t\taspect-ratio: 1;\n\n\t\t\tborder: var(--wpds-border-width-interactive-focus) solid;\n\t\t\tborder-block-start-color: var(--wp-ui-button-foreground-color);\n\t\t\tborder-inline-end-color: var(--wp-ui-button-foreground-color);\n\t\t\tborder-block-end-color: transparent;\n\t\t\tborder-inline-start-color: transparent;\n\t\t\tborder-radius: 50%;\n\n\t\t\tpointer-events: none;\n\t\t\topacity: 0;\n\n\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\ttransition: opacity 0.1s ease-out;\n\t\t\t}\n\t\t}\n\t}\n\n\t.style-module__is-small__kIIFR {\n\t\t--wp-ui-button-padding-inline: calc(2 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */\n\t\t--wp-ui-button-height: 24px;\n\t}\n\n\t/* Variants (\\`tone\\` + \\`variant\\`) overrides compared to default styles */\n\n\t/* All outline buttons have a border */\n\t.style-module__is-brand__3UYMl {\n\t\t/* no need to redefine variables for .is-brand.is-solid as it's the default variant */\n\n\t\t/* Outline and minimal buttons use the same foreground color */\n\t\t&.style-module__is-outline__YtWne,\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand);\n\t\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-active);\n\t\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-outline__YtWne {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\t--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-brand);\n\t\t\t--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-brand-active);\n\t\t\t--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t}\n\t}\n\n\t.style-module__is-neutral__5yKo- {\n\t\t&.style-module__is-solid__tQszW {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);\n\t\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);\n\t\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong-active);\n\t\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);\n\t\t}\n\n\t\t/* Outline and minimal buttons use the same foreground color */\n\t\t&.style-module__is-outline__YtWne,\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral);\n\t\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-active);\n\t\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-outline__YtWne {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\t--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-neutral);\n\t\t\t--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-neutral-active);\n\t\t\t--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t}\n\t}\n\n\t.style-module__is-unstyled__q7snL {\n\t\tborder: none;\n\t\tbackground: none;\n\t}\n\n\t.style-module__is-compact__z1nPG {\n\t\t--wp-ui-button-height: 32px;\n\t}\n\n\t.style-module__is-loading__kUtC8 {\n\t\tcolor: transparent;\n\n\t\t* {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&::before {\n\t\t\ttransition-delay: 0.05s;\n\t\t\topacity: 1;\n\n\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\tanimation: style-module__loading-animation__Wh1T2 1s linear infinite;\n\t\t\t}\n\t\t}\n\t}\n\n\t[aria-pressed=\"true\"].style-module__is-minimal__rQYZo.style-module__is-neutral__5yKo- {\n\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);\n\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong);\n\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);\n\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong);\n\t}\n}\n\n@keyframes style-module__loading-animation__Wh1T2 {\n\t0% {\n\t\ttransform: translate(-50%, -50%) rotate(0deg);\n\t}\n\n\t100% {\n\t\ttransform: translate(-50%, -50%) rotate(360deg);\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"button\": \"style-module__button__l7D8M\",\n \"is-unstyled\": \"style-module__is-unstyled__q7snL\",\n \"is-loading\": \"style-module__is-loading__kUtC8\",\n \"is-small\": \"style-module__is-small__kIIFR\",\n \"is-brand\": \"style-module__is-brand__3UYMl\",\n \"is-outline\": \"style-module__is-outline__YtWne\",\n \"is-minimal\": \"style-module__is-minimal__rQYZo\",\n \"is-neutral\": \"style-module__is-neutral__5yKo-\",\n \"is-solid\": \"style-module__is-solid__tQszW\",\n \"is-compact\": \"style-module__is-compact__z1nPG\",\n \"loading-animation\": \"style-module__loading-animation__Wh1T2\"\n};", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-utilities {\n\t.resets-module__box-sizing__M2zT5 {\n\t\tbox-sizing: border-box;\n\n\t\t*,\n\t\t*::before,\n\t\t*::after {\n\t\t\tbox-sizing: inherit;\n\t\t}\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"box-sizing\": \"resets-module__box-sizing__M2zT5\"\n};", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-utilities {\n\t.focus-module__outset-ring--focus__COii5,\n\t.focus-module__outset-ring--focus-except-active__4lsr3,\n\t.focus-module__outset-ring--focus-visible__0FQby,\n\t.focus-module__outset-ring--focus-within__zYPfw,\n\t.focus-module__outset-ring--focus-within-except-active__lw0E3,\n\t.focus-module__outset-ring--focus-within-visible__xcs-5 {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: outline 0.1s ease-out;\n\t\t}\n\n\t\t/* Outline width must be kept at 0 even with a transparent color,\n\t\tor else the outline will be visible in forced-colors mode. */\n\t\toutline-width: 0;\n\t\toutline-style: solid;\n\t\toutline-color: transparent;\n\t\toutline-offset: 1px;\n\t}\n\n\t.focus-module__outset-ring--focus__COii5:focus,\n\t.focus-module__outset-ring--focus-except-active__4lsr3:focus:not(:active),\n\t.focus-module__outset-ring--focus-visible__0FQby:focus-visible,\n\t.focus-module__outset-ring--focus-within__zYPfw:focus-within,\n\t.focus-module__outset-ring--focus-within-except-active__lw0E3:focus-within:not(:has(:active)),\n\t.focus-module__outset-ring--focus-within-visible__xcs-5:focus-within:has(:focus-visible) {\n\t\toutline-width: var(--wpds-border-width-interactive-focus);\n\t\toutline-color: var(--wpds-color-stroke-focus-brand);\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"outset-ring--focus\": \"focus-module__outset-ring--focus__COii5\",\n \"outset-ring--focus-except-active\": \"focus-module__outset-ring--focus-except-active__4lsr3\",\n \"outset-ring--focus-visible\": \"focus-module__outset-ring--focus-visible__0FQby\",\n \"outset-ring--focus-within\": \"focus-module__outset-ring--focus-within__zYPfw\",\n \"outset-ring--focus-within-except-active\": \"focus-module__outset-ring--focus-within-except-active__lw0E3\",\n \"outset-ring--focus-within-visible\": \"focus-module__outset-ring--focus-within-visible__xcs-5\"\n};"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,kBAAsB;AACtB,qBAAsC;AACtC,kBAAmB;;;ACJnB,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyOZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,UAAU;AAAA,EACV,eAAe;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,qBAAqB;AACvB;;;ACzPA,IAAMA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAeA,IAAG,CAAC;AAE7C,IAAO,iBAAQ;AAAA,EACb,cAAc;AAChB;;;ACpBA,IAAMC,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAeA,IAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,sBAAsB;AAAA,EACtB,oCAAoC;AAAA,EACpC,8BAA8B;AAAA,EAC9B,6BAA6B;AAAA,EAC7B,2CAA2C;AAAA,EAC3C,qCAAqC;AACvC;;;AHEG;AAnCI,IAAM,aAAS;AAAA,EACrB,SAASC,QACR;AAAA,IACC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,0BAAsB,gBAAI,SAAU;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,sBAAkB,YAAAC;AAAA,MACvB,eAAa,YAAa;AAAA,MAC1B,cAAa,kCAAmC;AAAA,MAChD,YAAY,cAAc,cAAO;AAAA,MACjC,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,cAAQ,MAAO,OAAQ,EAAG;AAAA,MAC1B,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,WAAW,cAAQ,YAAa;AAAA,MAChC;AAAA,IACD;AAGA,kCAAW,MAAM;AAChB,UAAK,WAAW,qBAAsB;AACrC,+BAAO,mBAAoB;AAAA,MAC5B;AAAA,IACD,GAAG,CAAE,SAAS,mBAAoB,CAAE;AAEpC,WACC;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,QACZ;AAAA,QACA,UAAW,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
6
- "names": ["css", "css", "Button", "clsx", "_Button"]
4
+ "sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='e89bb0a0ac']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e89bb0a0ac\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*3);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:calc(var(--wpds-dimension-base)*2);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:\\\"\\\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*2);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"button\":\"_97b0fc33c028be1a__button\",\"is-unstyled\":\"abbb272e2ce49bd6__is-unstyled\",\"is-loading\":\"_914b42f315c0e580__is-loading\",\"is-small\":\"_908205475f9f2a92__is-small\",\"is-brand\":\"dd460c965226cc77__is-brand\",\"is-outline\":\"_62d5a778b7b258ee__is-outline\",\"is-minimal\":\"ad0619a3217c6a5b__is-minimal\",\"is-neutral\":\"e722a8f96726aa99__is-neutral\",\"is-solid\":\"b50b3358c5fb4d0b__is-solid\",\"is-compact\":\"cf59cf1b69629838__is-compact\",\"loading-animation\":\"_5a1d53da6f830c8d__loading-animation\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='28ad59e2e3']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"28ad59e2e3\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"outset-ring--focus\":\"_08e8a2e44959f892__outset-ring--focus\",\"outset-ring--focus-except-active\":\"e25b2bdd7aa21721__outset-ring--focus-except-active\",\"outset-ring--focus-visible\":\"d0541bc9dd9dc7b6__outset-ring--focus-visible\",\"outset-ring--focus-within\":\"cd83dfc2126a0846__outset-ring--focus-within\",\"outset-ring--focus-within-except-active\":\"_970d04df7376df67__outset-ring--focus-within-except-active\",\"outset-ring--focus-within-visible\":\"c5cb3ee4bddaa8e4__outset-ring--focus-within-visible\"};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,kBAAsB;AACtB,qBAAsC;AACtC,kBAAmB;;;ACJnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,qjOAAujO,CAAC;AAClmO,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,eAAc,iCAAgC,cAAa,iCAAgC,YAAW,+BAA8B,YAAW,8BAA6B,cAAa,iCAAgC,cAAa,gCAA+B,cAAa,gCAA+B,YAAW,8BAA6B,cAAa,gCAA+B,qBAAoB,uCAAsC;;;ACNpf,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0hCAA0hC,CAAC;AACrkC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,sBAAqB,yCAAwC,oCAAmC,sDAAqD,8BAA6B,gDAA+C,6BAA4B,+CAA8C,2CAA0C,8DAA6D,qCAAoC,sDAAqD;;;AHuCxf;AAnCI,IAAM,aAAS;AAAA,EACrB,SAASA,QACR;AAAA,IACC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,0BAAsB,gBAAI,SAAU;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,sBAAkB,YAAAC;AAAA,MACvB,eAAa,YAAa;AAAA,MAC1B,cAAa,kCAAmC;AAAA,MAChD,YAAY,cAAc,cAAO;AAAA,MACjC,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,cAAQ,MAAO,OAAQ,EAAG;AAAA,MAC1B,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,WAAW,cAAQ,YAAa;AAAA,MAChC;AAAA,IACD;AAGA,kCAAW,MAAM;AAChB,UAAK,WAAW,qBAAsB;AACrC,+BAAO,mBAAoB;AAAA,MAC5B;AAAA,IACD,GAAG,CAAE,SAAS,mBAAoB,CAAE;AAEpC,WACC;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,QACZ;AAAA,QACA,UAAW,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
6
+ "names": ["Button", "clsx", "_Button"]
7
7
  }
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // packages/ui/src/form/primitives/constants.ts
21
+ var constants_exports = {};
22
+ __export(constants_exports, {
23
+ ITEM_POPUP_POSITIONER_PROPS: () => ITEM_POPUP_POSITIONER_PROPS
24
+ });
25
+ module.exports = __toCommonJS(constants_exports);
26
+ var ITEM_POPUP_POSITIONER_PROPS = {
27
+ align: "start",
28
+ sideOffset: 8,
29
+ collisionPadding: 12
30
+ };
31
+ // Annotate the CommonJS export names for ESM import in node:
32
+ 0 && (module.exports = {
33
+ ITEM_POPUP_POSITIONER_PROPS
34
+ });
35
+ //# sourceMappingURL=constants.cjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/form/primitives/constants.ts"],
4
+ "sourcesContent": ["import type { Select as _Select } from '@base-ui/react/select';\n\n/**\n * Shared positioning props for item popups (Select, Combobox, etc.).\n */\nexport const ITEM_POPUP_POSITIONER_PROPS = {\n\talign: 'start',\n\tsideOffset: 8,\n\tcollisionPadding: 12,\n} satisfies Partial< _Select.Positioner.Props >;\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,IAAM,8BAA8B;AAAA,EAC1C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,kBAAkB;AACnB;",
6
+ "names": []
7
+ }
@@ -38,40 +38,13 @@ var import_field = require("@base-ui/react/field");
38
38
  var import_element = require("@wordpress/element");
39
39
 
40
40
  // packages/ui/src/utils/css/field.module.css
41
- var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
42
-
43
- @layer wp-ui-utilities {
44
- .field-module__label__LVrYU {
45
- --wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);
46
-
47
- font-family: var(--wpds-font-family-body);
48
- font-size: var(--wpds-font-size-xs);
49
- line-height: var(--wp-ui-field-label-line-height);
50
- font-weight: var(--wpds-font-weight-medium);
51
- text-transform: uppercase;
52
- color: var(--wpds-color-fg-content-neutral);
53
-
54
- &.field-module__is-plain__F8QhR {
55
- font-size: var(--wpds-font-size-md);
56
- text-transform: none;
57
- }
58
- }
59
-
60
- .field-module__description__CKN1B {
61
- margin: 0;
62
- font-family: var(--wpds-font-family-body);
63
- font-size: var(--wpds-font-size-sm);
64
- line-height: var(--wpds-font-line-height-xs);
65
- color: var(--wpds-color-fg-content-neutral-weak);
66
- }
41
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='04c8f253c6']")) {
42
+ const style = document.createElement("style");
43
+ style.setAttribute("data-wp-hash", "04c8f253c6");
44
+ style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-font-line-height-xs);color:var(--wpds-color-fg-content-neutral);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-xs);font-weight:var(--wpds-font-weight-medium);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-font-size-md);text-transform:none}}._08a3750500e0233f__description{color:var(--wpds-color-fg-content-neutral-weak);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);line-height:var(--wpds-font-line-height-xs);margin:0}}"));
45
+ document.head.appendChild(style);
67
46
  }
68
- `;
69
- document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
70
- var field_default = {
71
- "label": "field-module__label__LVrYU",
72
- "is-plain": "field-module__is-plain__F8QhR",
73
- "description": "field-module__description__CKN1B"
74
- };
47
+ var field_default = { "label": "_2d5ad850b2f90964__label", "is-plain": "_17c4214649230bea__is-plain", "description": "_08a3750500e0233f__description" };
75
48
 
76
49
  // packages/ui/src/form/primitives/field/description.tsx
77
50
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/form/primitives/field/description.tsx", "../../../../src/utils/css/field.module.css"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDescriptionProps } from './types';\n\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>( function Description( { className, ...restProps }, ref ) {\n\treturn (\n\t\t<_Field.Description\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( fieldStyles.description, className ) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-utilities {\n\t.field-module__label__LVrYU {\n\t\t--wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);\n\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wpds-font-size-xs);\n\t\tline-height: var(--wp-ui-field-label-line-height);\n\t\tfont-weight: var(--wpds-font-weight-medium);\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--wpds-color-fg-content-neutral);\n\n\t\t&.field-module__is-plain__F8QhR {\n\t\t\tfont-size: var(--wpds-font-size-md);\n\t\t\ttext-transform: none;\n\t\t}\n\t}\n\n\t.field-module__description__CKN1B {\n\t\tmargin: 0;\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wpds-font-size-sm);\n\t\tline-height: var(--wpds-font-line-height-xs);\n\t\tcolor: var(--wpds-color-fg-content-neutral-weak);\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"label\": \"field-module__label__LVrYU\",\n \"is-plain\": \"field-module__is-plain__F8QhR\",\n \"description\": \"field-module__description__CKN1B\"\n};"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,mBAAgC;AAChC,qBAA2B;;;ACF3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,eAAe;AACjB;;;ADzBE;AALK,IAAM,kBAAc,2BAGxB,SAASA,aAAa,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AAC3D,SACC;AAAA,IAAC,aAAAC,MAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,eAAY,YAAAC,SAAM,cAAY,aAAa,SAAU;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDescriptionProps } from './types';\n\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>( function Description( { className, ...restProps }, ref ) {\n\treturn (\n\t\t<_Field.Description\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( fieldStyles.description, className ) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='04c8f253c6']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"04c8f253c6\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-font-line-height-xs);color:var(--wpds-color-fg-content-neutral);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-xs);font-weight:var(--wpds-font-weight-medium);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-font-size-md);text-transform:none}}._08a3750500e0233f__description{color:var(--wpds-color-fg-content-neutral-weak);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);line-height:var(--wpds-font-line-height-xs);margin:0}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"label\":\"_2d5ad850b2f90964__label\",\"is-plain\":\"_17c4214649230bea__is-plain\",\"description\":\"_08a3750500e0233f__description\"};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,mBAAgC;AAChC,qBAA2B;;;ACF3B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,qtBAAqtB,CAAC;AAChwB,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,YAAW,+BAA8B,eAAc,iCAAgC;;;ADKxI;AALK,IAAM,kBAAc,2BAGxB,SAASA,aAAa,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AAC3D,SACC;AAAA,IAAC,aAAAC,MAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,eAAY,YAAAC,SAAM,cAAY,aAAa,SAAU;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;",
6
6
  "names": ["Description", "_Field", "clsx"]
7
7
  }