@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
@@ -3,121 +3,22 @@ import clsx from "clsx";
3
3
  import { forwardRef } from "@wordpress/element";
4
4
 
5
5
  // packages/ui/src/utils/css/resets.module.css
6
- var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
7
-
8
- @layer wp-ui-utilities {
9
- .resets-module__box-sizing__M2zT5 {
10
- box-sizing: border-box;
11
-
12
- *,
13
- *::before,
14
- *::after {
15
- box-sizing: inherit;
16
- }
17
- }
6
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='671ebfc62d']")) {
7
+ const style = document.createElement("style");
8
+ style.setAttribute("data-wp-hash", "671ebfc62d");
9
+ 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}}}"));
10
+ document.head.appendChild(style);
18
11
  }
19
- `;
20
- document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
21
- var resets_default = {
22
- "box-sizing": "resets-module__box-sizing__M2zT5"
23
- };
12
+ var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
24
13
 
25
14
  // packages/ui/src/form/primitives/input-layout/style.module.css
26
- var css2 = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
27
-
28
- @layer wp-ui-components {
29
- .style-module__input-layout__yyuq- {
30
- /* TODO: Use padding tokens */
31
- --wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);
32
-
33
- display: flex;
34
- height: 40px;
35
- background-color: var(--wpds-color-bg-interactive-neutral-weak);
36
- border-width: var(--wpds-border-width-surface-xs);
37
- border-style: solid;
38
- border-color: var(--wpds-color-stroke-interactive-neutral);
39
- border-radius: var(--wpds-border-radius-surface-sm);
40
- font-family: var(--wpds-font-family-body);
41
- font-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */
42
- line-height: 1;
43
- color: var(--wpds-color-fg-interactive-neutral);
44
-
45
- @media (min-width: 600px) {
46
- font-size: var(--wpds-font-size-md);
47
- }
48
-
49
- &.style-module__is-size-compact__DIB6h {
50
- /* TODO: Use padding tokens */
51
- --wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
52
- height: 32px;
53
- }
54
-
55
- &.style-module__is-size-small__7WfNo {
56
- /* TODO: Use padding tokens */
57
- --wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
58
- height: 24px;
59
- }
60
-
61
- &.style-module__is-disabled__b7cQR {
62
- background-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);
63
- border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
64
- color: var(--wpds-color-fg-interactive-neutral-disabled);
65
-
66
- @media (forced-colors: active) {
67
- border-color: GrayText;
68
- color: GrayText;
69
- }
70
- }
71
-
72
- &.style-module__is-borderless__gJcnB {
73
- border-color: transparent;
74
- }
75
-
76
- /* Don't show focus ring when the focus is in the prefix or suffix slots */
77
- &:has(.style-module__input-layout-slot__DXr61:focus-within) {
78
- outline: none;
79
- }
80
-
81
- &:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {
82
- border-color: var(--wpds-color-stroke-interactive-neutral-active);
83
- }
84
- }
85
-
86
- .style-module__input-layout-slot__DXr61 {
87
- display: flex;
88
- align-items: center;
89
-
90
- &.style-module__is-padding-minimal__DJUmg {
91
- --wp-ui-input-layout-prefix-padding-start:
92
- calc(var(--wp-ui-input-layout-padding-inline) -
93
- var(--wpds-dimension-base));
94
- --wp-ui-input-layout-suffix-padding-end:
95
- calc(var(--wp-ui-input-layout-padding-inline) -
96
- var(--wpds-dimension-base));
97
- }
98
-
99
- &.style-module__is-prefix__ezQzb {
100
- padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
101
- }
102
-
103
- &.style-module__is-suffix__R6el3 {
104
- padding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));
105
- }
106
- }
15
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='c75ffc6db5']")) {
16
+ const style = document.createElement("style");
17
+ style.setAttribute("data-wp-hash", "c75ffc6db5");
18
+ style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*3);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}"));
19
+ document.head.appendChild(style);
107
20
  }
108
- `;
109
- document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css2));
110
- var style_default = {
111
- "input-layout": "style-module__input-layout__yyuq-",
112
- "is-size-compact": "style-module__is-size-compact__DIB6h",
113
- "is-size-small": "style-module__is-size-small__7WfNo",
114
- "is-disabled": "style-module__is-disabled__b7cQR",
115
- "is-borderless": "style-module__is-borderless__gJcnB",
116
- "input-layout-slot": "style-module__input-layout-slot__DXr61",
117
- "is-padding-minimal": "style-module__is-padding-minimal__DJUmg",
118
- "is-prefix": "style-module__is-prefix__ezQzb",
119
- "is-suffix": "style-module__is-suffix__R6el3"
120
- };
21
+ var style_default = { "input-layout": "cb2baafdc08746bb__input-layout", "is-size-compact": "_0c807a84cbb94e0c__is-size-compact", "is-size-small": "ed67cda122dc1e7b__is-size-small", "is-disabled": "_6fb7104732387680__is-disabled", "is-borderless": "_8097270636ca6100__is-borderless", "input-layout-slot": "_0d7afad74a057888__input-layout-slot", "is-padding-minimal": "_0c952682762ca288__is-padding-minimal", "is-prefix": "_7b34336f9cf989b9__is-prefix", "is-suffix": "_47a7a5deefae3545__is-suffix" };
121
22
 
122
23
  // packages/ui/src/form/primitives/input-layout/input-layout.tsx
123
24
  import { SlotContextProvider } from "./context.mjs";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/form/primitives/input-layout/input-layout.tsx", "../../../../src/utils/css/resets.module.css", "../../../../src/form/primitives/input-layout/style.module.css"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport styles from './style.module.css';\nimport type { InputLayoutProps } from './types';\nimport { SlotContextProvider } from './context';\n\n/**\n * A low-level component that handles the visual layout of an input-like field,\n * including disabled states and standard prefix/suffix slots.\n */\nexport const InputLayout = forwardRef< HTMLDivElement, InputLayoutProps >(\n\tfunction InputLayout(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tvisuallyDisabled,\n\t\t\tsize = 'default',\n\t\t\tisBorderless,\n\t\t\tprefix,\n\t\t\tsuffix,\n\t\t\t...restProps\n\t\t},\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\tstyles[ 'input-layout' ],\n\t\t\t\t\tstyles[ `is-size-${ size }` ],\n\t\t\t\t\tvisuallyDisabled && styles[ 'is-disabled' ],\n\t\t\t\t\tisBorderless && styles[ 'is-borderless' ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<SlotContextProvider type=\"prefix\">\n\t\t\t\t\t{ prefix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t\t{ children }\n\t\t\t\t<SlotContextProvider type=\"suffix\">\n\t\t\t\t\t{ suffix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t</div>\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.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-components {\n\t.style-module__input-layout__yyuq- {\n\t\t/* TODO: Use padding tokens */\n\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);\n\n\t\tdisplay: flex;\n\t\theight: 40px;\n\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\tborder-width: var(--wpds-border-width-surface-xs);\n\t\tborder-style: solid;\n\t\tborder-color: var(--wpds-color-stroke-interactive-neutral);\n\t\tborder-radius: var(--wpds-border-radius-surface-sm);\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */\n\t\tline-height: 1;\n\t\tcolor: var(--wpds-color-fg-interactive-neutral);\n\n\t\t@media (min-width: 600px) {\n\t\t\tfont-size: var(--wpds-font-size-md);\n\t\t}\n\n\t\t&.style-module__is-size-compact__DIB6h {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 32px;\n\t\t}\n\n\t\t&.style-module__is-size-small__7WfNo {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 24px;\n\t\t}\n\n\t\t&.style-module__is-disabled__b7cQR {\n\t\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t\tcolor: var(--wpds-color-fg-interactive-neutral-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&.style-module__is-borderless__gJcnB {\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t/* Don't show focus ring when the focus is in the prefix or suffix slots */\n\t\t&:has(.style-module__input-layout-slot__DXr61:focus-within) {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-active);\n\t\t}\n\t}\n\n\t.style-module__input-layout-slot__DXr61 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&.style-module__is-padding-minimal__DJUmg {\n\t\t\t--wp-ui-input-layout-prefix-padding-start:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t\t--wp-ui-input-layout-suffix-padding-end:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t}\n\n\t\t&.style-module__is-prefix__ezQzb {\n\t\t\tpadding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\n\t\t&.style-module__is-suffix__R6el3 {\n\t\t\tpadding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"input-layout\": \"style-module__input-layout__yyuq-\",\n \"is-size-compact\": \"style-module__is-size-compact__DIB6h\",\n \"is-size-small\": \"style-module__is-size-small__7WfNo\",\n \"is-disabled\": \"style-module__is-disabled__b7cQR\",\n \"is-borderless\": \"style-module__is-borderless__gJcnB\",\n \"input-layout-slot\": \"style-module__input-layout-slot__DXr61\",\n \"is-padding-minimal\": \"style-module__is-padding-minimal__DJUmg\",\n \"is-prefix\": \"style-module__is-prefix__ezQzb\",\n \"is-suffix\": \"style-module__is-suffix__R6el3\"\n};"],
5
- "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACD3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,iBAAQ;AAAA,EACb,cAAc;AAChB;;;ACpBA,IAAMA,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;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;AAmFZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAeA,IAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,aAAa;AACf;;;AF5FA,SAAS,2BAA2B;AAqBjC,SAYC,KAZD;AAfI,IAAM,cAAc;AAAA,EAC1B,SAASC,aACR;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,UACX,eAAa,YAAa;AAAA,UAC1B,cAAQ,cAAe;AAAA,UACvB,cAAQ,WAAY,IAAK,EAAG;AAAA,UAC5B,oBAAoB,cAAQ,aAAc;AAAA,UAC1C,gBAAgB,cAAQ,eAAgB;AAAA,UACxC;AAAA,QACD;AAAA,QACE,GAAG;AAAA,QAEL;AAAA,8BAAC,uBAAoB,MAAK,UACvB,kBACH;AAAA,UACE;AAAA,UACF,oBAAC,uBAAoB,MAAK,UACvB,kBACH;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AACD;",
6
- "names": ["css", "InputLayout"]
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport styles from './style.module.css';\nimport type { InputLayoutProps } from './types';\nimport { SlotContextProvider } from './context';\n\n/**\n * A low-level component that handles the visual layout of an input-like field,\n * including disabled states and standard prefix/suffix slots.\n */\nexport const InputLayout = forwardRef< HTMLDivElement, InputLayoutProps >(\n\tfunction InputLayout(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tvisuallyDisabled,\n\t\t\tsize = 'default',\n\t\t\tisBorderless,\n\t\t\tprefix,\n\t\t\tsuffix,\n\t\t\t...restProps\n\t\t},\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\tstyles[ 'input-layout' ],\n\t\t\t\t\tstyles[ `is-size-${ size }` ],\n\t\t\t\t\tvisuallyDisabled && styles[ 'is-disabled' ],\n\t\t\t\t\tisBorderless && styles[ 'is-borderless' ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<SlotContextProvider type=\"prefix\">\n\t\t\t\t\t{ prefix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t\t{ children }\n\t\t\t\t<SlotContextProvider type=\"suffix\">\n\t\t\t\t\t{ suffix }\n\t\t\t\t</SlotContextProvider>\n\t\t\t</div>\n\t\t);\n\t}\n);\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='c75ffc6db5']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c75ffc6db5\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*3);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"input-layout\":\"cb2baafdc08746bb__input-layout\",\"is-size-compact\":\"_0c807a84cbb94e0c__is-size-compact\",\"is-size-small\":\"ed67cda122dc1e7b__is-size-small\",\"is-disabled\":\"_6fb7104732387680__is-disabled\",\"is-borderless\":\"_8097270636ca6100__is-borderless\",\"input-layout-slot\":\"_0d7afad74a057888__input-layout-slot\",\"is-padding-minimal\":\"_0c952682762ca288__is-padding-minimal\",\"is-prefix\":\"_7b34336f9cf989b9__is-prefix\",\"is-suffix\":\"_47a7a5deefae3545__is-suffix\"};\n"],
5
+ "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACD3B,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,2uEAA2uE,CAAC;AACtxE,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,gBAAe,kCAAiC,mBAAkB,sCAAqC,iBAAgB,mCAAkC,eAAc,kCAAiC,iBAAgB,oCAAmC,qBAAoB,wCAAuC,sBAAqB,yCAAwC,aAAY,gCAA+B,aAAY,+BAA8B;;;AFDxd,SAAS,2BAA2B;AAqBjC,SAYC,KAZD;AAfI,IAAM,cAAc;AAAA,EAC1B,SAASA,aACR;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,UACX,eAAa,YAAa;AAAA,UAC1B,cAAQ,cAAe;AAAA,UACvB,cAAQ,WAAY,IAAK,EAAG;AAAA,UAC5B,oBAAoB,cAAQ,aAAc;AAAA,UAC1C,gBAAgB,cAAQ,eAAgB;AAAA,UACxC;AAAA,QACD;AAAA,QACE,GAAG;AAAA,QAEL;AAAA,8BAAC,uBAAoB,MAAK,UACvB,kBACH;AAAA,UACE;AAAA,UACF,oBAAC,uBAAoB,MAAK,UACvB,kBACH;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AACD;",
6
+ "names": ["InputLayout"]
7
7
  }
@@ -3,101 +3,13 @@ import clsx from "clsx";
3
3
  import { forwardRef } from "@wordpress/element";
4
4
 
5
5
  // packages/ui/src/form/primitives/input-layout/style.module.css
6
- var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
7
-
8
- @layer wp-ui-components {
9
- .style-module__input-layout__yyuq- {
10
- /* TODO: Use padding tokens */
11
- --wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);
12
-
13
- display: flex;
14
- height: 40px;
15
- background-color: var(--wpds-color-bg-interactive-neutral-weak);
16
- border-width: var(--wpds-border-width-surface-xs);
17
- border-style: solid;
18
- border-color: var(--wpds-color-stroke-interactive-neutral);
19
- border-radius: var(--wpds-border-radius-surface-sm);
20
- font-family: var(--wpds-font-family-body);
21
- font-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */
22
- line-height: 1;
23
- color: var(--wpds-color-fg-interactive-neutral);
24
-
25
- @media (min-width: 600px) {
26
- font-size: var(--wpds-font-size-md);
27
- }
28
-
29
- &.style-module__is-size-compact__DIB6h {
30
- /* TODO: Use padding tokens */
31
- --wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
32
- height: 32px;
33
- }
34
-
35
- &.style-module__is-size-small__7WfNo {
36
- /* TODO: Use padding tokens */
37
- --wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
38
- height: 24px;
39
- }
40
-
41
- &.style-module__is-disabled__b7cQR {
42
- background-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);
43
- border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
44
- color: var(--wpds-color-fg-interactive-neutral-disabled);
45
-
46
- @media (forced-colors: active) {
47
- border-color: GrayText;
48
- color: GrayText;
49
- }
50
- }
51
-
52
- &.style-module__is-borderless__gJcnB {
53
- border-color: transparent;
54
- }
55
-
56
- /* Don't show focus ring when the focus is in the prefix or suffix slots */
57
- &:has(.style-module__input-layout-slot__DXr61:focus-within) {
58
- outline: none;
59
- }
60
-
61
- &:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {
62
- border-color: var(--wpds-color-stroke-interactive-neutral-active);
63
- }
64
- }
65
-
66
- .style-module__input-layout-slot__DXr61 {
67
- display: flex;
68
- align-items: center;
69
-
70
- &.style-module__is-padding-minimal__DJUmg {
71
- --wp-ui-input-layout-prefix-padding-start:
72
- calc(var(--wp-ui-input-layout-padding-inline) -
73
- var(--wpds-dimension-base));
74
- --wp-ui-input-layout-suffix-padding-end:
75
- calc(var(--wp-ui-input-layout-padding-inline) -
76
- var(--wpds-dimension-base));
77
- }
78
-
79
- &.style-module__is-prefix__ezQzb {
80
- padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
81
- }
82
-
83
- &.style-module__is-suffix__R6el3 {
84
- padding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));
85
- }
86
- }
6
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='c75ffc6db5']")) {
7
+ const style = document.createElement("style");
8
+ style.setAttribute("data-wp-hash", "c75ffc6db5");
9
+ style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*3);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}"));
10
+ document.head.appendChild(style);
87
11
  }
88
- `;
89
- document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
90
- var style_default = {
91
- "input-layout": "style-module__input-layout__yyuq-",
92
- "is-size-compact": "style-module__is-size-compact__DIB6h",
93
- "is-size-small": "style-module__is-size-small__7WfNo",
94
- "is-disabled": "style-module__is-disabled__b7cQR",
95
- "is-borderless": "style-module__is-borderless__gJcnB",
96
- "input-layout-slot": "style-module__input-layout-slot__DXr61",
97
- "is-padding-minimal": "style-module__is-padding-minimal__DJUmg",
98
- "is-prefix": "style-module__is-prefix__ezQzb",
99
- "is-suffix": "style-module__is-suffix__R6el3"
100
- };
12
+ var style_default = { "input-layout": "cb2baafdc08746bb__input-layout", "is-size-compact": "_0c807a84cbb94e0c__is-size-compact", "is-size-small": "ed67cda122dc1e7b__is-size-small", "is-disabled": "_6fb7104732387680__is-disabled", "is-borderless": "_8097270636ca6100__is-borderless", "input-layout-slot": "_0d7afad74a057888__input-layout-slot", "is-padding-minimal": "_0c952682762ca288__is-padding-minimal", "is-prefix": "_7b34336f9cf989b9__is-prefix", "is-suffix": "_47a7a5deefae3545__is-suffix" };
101
13
 
102
14
  // packages/ui/src/form/primitives/input-layout/slot.tsx
103
15
  import { useInputLayoutSlotContext } from "./context.mjs";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/form/primitives/input-layout/slot.tsx", "../../../../src/form/primitives/input-layout/style.module.css"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { InputLayoutSlotProps } from './types';\nimport { useInputLayoutSlotContext } from './context';\n\n/**\n * A layout helper to add paddings in a prefix or suffix.\n */\nexport const InputLayoutSlot = forwardRef<\n\tHTMLDivElement,\n\tInputLayoutSlotProps\n>( function InputLayoutSlot(\n\t{ type: typeProp, padding = 'default', ...restProps },\n\tref\n) {\n\tconst typeContext = useInputLayoutSlotContext();\n\tconst type = typeProp ?? typeContext;\n\n\tif ( ! type ) {\n\t\tthrow new Error(\n\t\t\t'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles[ 'input-layout-slot' ],\n\t\t\t\tstyles[ `is-${ type }` ],\n\t\t\t\tstyles[ `is-padding-${ padding }` ]\n\t\t\t) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n\nInputLayoutSlot.displayName = 'InputLayout.Slot';\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__input-layout__yyuq- {\n\t\t/* TODO: Use padding tokens */\n\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);\n\n\t\tdisplay: flex;\n\t\theight: 40px;\n\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\tborder-width: var(--wpds-border-width-surface-xs);\n\t\tborder-style: solid;\n\t\tborder-color: var(--wpds-color-stroke-interactive-neutral);\n\t\tborder-radius: var(--wpds-border-radius-surface-sm);\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */\n\t\tline-height: 1;\n\t\tcolor: var(--wpds-color-fg-interactive-neutral);\n\n\t\t@media (min-width: 600px) {\n\t\t\tfont-size: var(--wpds-font-size-md);\n\t\t}\n\n\t\t&.style-module__is-size-compact__DIB6h {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 32px;\n\t\t}\n\n\t\t&.style-module__is-size-small__7WfNo {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 24px;\n\t\t}\n\n\t\t&.style-module__is-disabled__b7cQR {\n\t\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t\tcolor: var(--wpds-color-fg-interactive-neutral-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&.style-module__is-borderless__gJcnB {\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t/* Don't show focus ring when the focus is in the prefix or suffix slots */\n\t\t&:has(.style-module__input-layout-slot__DXr61:focus-within) {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-active);\n\t\t}\n\t}\n\n\t.style-module__input-layout-slot__DXr61 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&.style-module__is-padding-minimal__DJUmg {\n\t\t\t--wp-ui-input-layout-prefix-padding-start:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t\t--wp-ui-input-layout-suffix-padding-end:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t}\n\n\t\t&.style-module__is-prefix__ezQzb {\n\t\t\tpadding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\n\t\t&.style-module__is-suffix__R6el3 {\n\t\t\tpadding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"input-layout\": \"style-module__input-layout__yyuq-\",\n \"is-size-compact\": \"style-module__is-size-compact__DIB6h\",\n \"is-size-small\": \"style-module__is-size-small__7WfNo\",\n \"is-disabled\": \"style-module__is-disabled__b7cQR\",\n \"is-borderless\": \"style-module__is-borderless__gJcnB\",\n \"input-layout-slot\": \"style-module__input-layout-slot__DXr61\",\n \"is-padding-minimal\": \"style-module__is-padding-minimal__DJUmg\",\n \"is-prefix\": \"style-module__is-prefix__ezQzb\",\n \"is-suffix\": \"style-module__is-suffix__R6el3\"\n};"],
5
- "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACD3B,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;AAmFZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,aAAa;AACf;;;AD7FA,SAAS,iCAAiC;AAsBxC;AAjBK,IAAM,kBAAkB,WAG5B,SAASA,iBACX,EAAE,MAAM,UAAU,UAAU,WAAW,GAAG,UAAU,GACpD,KACC;AACD,QAAM,cAAc,0BAA0B;AAC9C,QAAM,OAAO,YAAY;AAEzB,MAAK,CAAE,MAAO;AACb,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY;AAAA,QACX,cAAQ,mBAAoB;AAAA,QAC5B,cAAQ,MAAO,IAAK,EAAG;AAAA,QACvB,cAAQ,cAAe,OAAQ,EAAG;AAAA,MACnC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;AAEF,gBAAgB,cAAc;",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { InputLayoutSlotProps } from './types';\nimport { useInputLayoutSlotContext } from './context';\n\n/**\n * A layout helper to add paddings in a prefix or suffix.\n */\nexport const InputLayoutSlot = forwardRef<\n\tHTMLDivElement,\n\tInputLayoutSlotProps\n>( function InputLayoutSlot(\n\t{ type: typeProp, padding = 'default', ...restProps },\n\tref\n) {\n\tconst typeContext = useInputLayoutSlotContext();\n\tconst type = typeProp ?? typeContext;\n\n\tif ( ! type ) {\n\t\tthrow new Error(\n\t\t\t'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles[ 'input-layout-slot' ],\n\t\t\t\tstyles[ `is-${ type }` ],\n\t\t\t\tstyles[ `is-padding-${ padding }` ]\n\t\t\t) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n\nInputLayoutSlot.displayName = 'InputLayout.Slot';\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='c75ffc6db5']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c75ffc6db5\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cb2baafdc08746bb__input-layout{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*3);background-color:var(--wpds-color-bg-interactive-neutral-weak);border-color:var(--wpds-color-stroke-interactive-neutral);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:var(--wpds-border-width-xs);color:var(--wpds-color-fg-interactive-neutral);display:flex;font-family:var(--wpds-font-family-body);font-size:max(var(--wpds-font-size-md),16px);height:40px;line-height:1;@media (min-width:600px){font-size:var(--wpds-font-size-md)}&._0c807a84cbb94e0c__is-size-compact{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:32px}&.ed67cda122dc1e7b__is-size-small{--wp-ui-input-layout-padding-inline:calc(var(--wpds-dimension-base)*2);height:24px}&._6fb7104732387680__is-disabled,&:has([data-can-disable-input-layout][data-disabled]){background-color:var(--wpds-color-bg-interactive-neutral-weak-disabled);border-color:var(--wpds-color-stroke-interactive-neutral-disabled);color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&._8097270636ca6100__is-borderless{border-color:#0000}&:has(._0d7afad74a057888__input-layout-slot:focus-within){outline:none}&:hover:not(._6fb7104732387680__is-disabled,:has([data-can-disable-input-layout][data-disabled]),._8097270636ca6100__is-borderless){border-color:var(--wpds-color-stroke-interactive-neutral-active)}}._0d7afad74a057888__input-layout-slot{align-items:center;display:flex;&._0c952682762ca288__is-padding-minimal{--wp-ui-input-layout-prefix-padding-start:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base));--wp-ui-input-layout-suffix-padding-end:calc(var(--wp-ui-input-layout-padding-inline) - var(--wpds-dimension-base))}&._7b34336f9cf989b9__is-prefix{padding-inline-start:var(--wp-ui-input-layout-prefix-padding-start,var(--wp-ui-input-layout-padding-inline))}&._47a7a5deefae3545__is-suffix{padding-inline-end:var(--wp-ui-input-layout-suffix-padding-end,var(--wp-ui-input-layout-padding-inline))}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"input-layout\":\"cb2baafdc08746bb__input-layout\",\"is-size-compact\":\"_0c807a84cbb94e0c__is-size-compact\",\"is-size-small\":\"ed67cda122dc1e7b__is-size-small\",\"is-disabled\":\"_6fb7104732387680__is-disabled\",\"is-borderless\":\"_8097270636ca6100__is-borderless\",\"input-layout-slot\":\"_0d7afad74a057888__input-layout-slot\",\"is-padding-minimal\":\"_0c952682762ca288__is-padding-minimal\",\"is-prefix\":\"_7b34336f9cf989b9__is-prefix\",\"is-suffix\":\"_47a7a5deefae3545__is-suffix\"};\n"],
5
+ "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACD3B,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,2uEAA2uE,CAAC;AACtxE,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,gBAAe,kCAAiC,mBAAkB,sCAAqC,iBAAgB,mCAAkC,eAAc,kCAAiC,iBAAgB,oCAAmC,qBAAoB,wCAAuC,sBAAqB,yCAAwC,aAAY,gCAA+B,aAAY,+BAA8B;;;ADFxd,SAAS,iCAAiC;AAsBxC;AAjBK,IAAM,kBAAkB,WAG5B,SAASA,iBACX,EAAE,MAAM,UAAU,UAAU,WAAW,GAAG,UAAU,GACpD,KACC;AACD,QAAM,cAAc,0BAA0B;AAC9C,QAAM,OAAO,YAAY;AAEzB,MAAK,CAAE,MAAO;AACb,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY;AAAA,QACX,cAAQ,mBAAoB;AAAA,QAC5B,cAAQ,MAAO,IAAK,EAAG;AAAA,QACvB,cAAQ,cAAe,OAAQ,EAAG;AAAA,MACnC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;AAEF,gBAAgB,cAAc;",
6
6
  "names": ["InputLayoutSlot"]
7
7
  }
@@ -0,0 +1,12 @@
1
+ // packages/ui/src/form/primitives/select/index.ts
2
+ import { Item } from "./item.mjs";
3
+ import { Popup } from "./popup.mjs";
4
+ import { Root } from "./root.mjs";
5
+ import { Trigger } from "./trigger.mjs";
6
+ export {
7
+ Item,
8
+ Popup,
9
+ Root,
10
+ Trigger
11
+ };
12
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/form/primitives/select/index.ts"],
4
+ "sourcesContent": ["export { Item } from './item';\nexport { Popup } from './popup';\nexport { Root } from './root';\nexport { Trigger } from './trigger';\n"],
5
+ "mappings": ";AAAA,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,eAAe;",
6
+ "names": []
7
+ }
@@ -0,0 +1,63 @@
1
+ // packages/ui/src/form/primitives/select/item.tsx
2
+ import { Select as _Select } from "@base-ui/react/select";
3
+ import clsx from "clsx";
4
+ import { forwardRef } from "@wordpress/element";
5
+ import { check } from "@wordpress/icons";
6
+
7
+ // packages/ui/src/utils/css/item-popup.module.css
8
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='5b85ae6367']")) {
9
+ const style = document.createElement("style");
10
+ style.setAttribute("data-wp-hash", "5b85ae6367");
11
+ style.appendChild(document.createTextNode('@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:"header" "main";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:"scrollable" "footer";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-2xs);grid-template-columns:24px 1fr;justify-content:flex-start;margin-inline:var(--wp-ui-popup-padding);min-height:var(--wp-ui-popup-item-height);padding-block:var(--wp-ui-popup-item-padding-block);padding-inline-end:var(--wp-ui-popup-item-padding-inline);padding-inline-start:calc(var(--wp-ui-popup-item-padding-inline) - 4px);user-select:none;&.f181b98b0d33282a__is-size-compact{--wp-ui-popup-item-height:32px;--wp-ui-popup-item-padding-inline:8px}&._38f7faff93c61958__is-size-small{--wp-ui-popup-item-height:24px;--wp-ui-popup-item-padding-inline:8px;--wp-ui-popup-item-padding-block:2px}&:not([data-selected]){._92fbe4765dfad5ee__item-indicator-icon{opacity:0}}&[data-highlighted]:not([aria-disabled=true]){background-color:var(--wpds-color-bg-interactive-brand-weak-active);color:var(--wpds-color-fg-interactive-neutral);@media (forced-colors:active){outline:1px solid Highlight}}&[aria-disabled=true]{color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){color:GrayText}}}._888a2f021a37fa9c__item-indicator{justify-self:center}._06c7ff39d2f685b9__empty{--wp-ui-popup-empty-min-height:40px;--wp-ui-popup-empty-padding-inline:12px;align-items:center;color:var(--wpds-color-fg-content-neutral-weak);display:flex;grid-area:main;padding-inline:var(--wp-ui-popup-empty-padding-inline);&:not(:empty){min-height:var(--wp-ui-popup-empty-min-height)}}}'));
12
+ document.head.appendChild(style);
13
+ }
14
+ var item_popup_default = { "popup": "_234b520016b4e56f__popup _380b81b8f79fb10f__dropdown-motion", "list": "f43dc7c768d7b622__list", "list-scrollable-container": "_233cd60cdb84a2ef__list-scrollable-container", "list-footer": "ec4db6f0122263e7__list-footer", "item": "_684ccb7988365b4f__item", "is-size-compact": "f181b98b0d33282a__is-size-compact", "is-size-small": "_38f7faff93c61958__is-size-small", "item-indicator-icon": "_92fbe4765dfad5ee__item-indicator-icon", "item-indicator": "_888a2f021a37fa9c__item-indicator", "empty": "_06c7ff39d2f685b9__empty" };
15
+
16
+ // packages/ui/src/utils/css/resets.module.css
17
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='671ebfc62d']")) {
18
+ const style = document.createElement("style");
19
+ style.setAttribute("data-wp-hash", "671ebfc62d");
20
+ 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}}}"));
21
+ document.head.appendChild(style);
22
+ }
23
+ var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
24
+
25
+ // packages/ui/src/form/primitives/select/item.tsx
26
+ import { Icon } from "../../../icon/index.mjs";
27
+ import { jsx, jsxs } from "react/jsx-runtime";
28
+ var Item = forwardRef(
29
+ function Item2({ className, value, size = "default", children = value, ...restProps }, ref) {
30
+ return /* @__PURE__ */ jsxs(
31
+ _Select.Item,
32
+ {
33
+ className: clsx(
34
+ resets_default["box-sizing"],
35
+ item_popup_default.item,
36
+ item_popup_default[`is-size-${size}`],
37
+ className
38
+ ),
39
+ value,
40
+ ref,
41
+ ...restProps,
42
+ children: [
43
+ /* @__PURE__ */ jsx(
44
+ Icon,
45
+ {
46
+ icon: check,
47
+ className: clsx(
48
+ item_popup_default["item-indicator"],
49
+ item_popup_default["item-indicator-icon"]
50
+ ),
51
+ size: size === "small" ? 20 : 24
52
+ }
53
+ ),
54
+ /* @__PURE__ */ jsx(_Select.ItemText, { children })
55
+ ]
56
+ }
57
+ );
58
+ }
59
+ );
60
+ export {
61
+ Item
62
+ };
63
+ //# sourceMappingURL=item.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/form/primitives/select/item.tsx", "../../../../src/utils/css/item-popup.module.css", "../../../../src/utils/css/resets.module.css"],
4
+ "sourcesContent": ["import { Select as _Select } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { check } from '@wordpress/icons';\nimport itemPopupStyles from '../../../utils/css/item-popup.module.css';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport { Icon } from '../../../icon';\nimport type { SelectItemProps } from './types';\n\nexport const Item = forwardRef< HTMLDivElement, SelectItemProps >(\n\tfunction Item(\n\t\t{ className, value, size = 'default', children = value, ...restProps },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<_Select.Item\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\titemPopupStyles.item,\n\t\t\t\t\titemPopupStyles[ `is-size-${ size }` ],\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\titemPopupStyles[ 'item-indicator' ],\n\t\t\t\t\t\titemPopupStyles[ 'item-indicator-icon' ]\n\t\t\t\t\t) }\n\t\t\t\t\tsize={ size === 'small' ? 20 : 24 }\n\t\t\t\t/>\n\t\t\t\t<_Select.ItemText>{ children }</_Select.ItemText>\n\t\t\t</_Select.Item>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='5b85ae6367']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"5b85ae6367\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:\\\"header\\\" \\\"main\\\";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:\\\"scrollable\\\" \\\"footer\\\";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-2xs);grid-template-columns:24px 1fr;justify-content:flex-start;margin-inline:var(--wp-ui-popup-padding);min-height:var(--wp-ui-popup-item-height);padding-block:var(--wp-ui-popup-item-padding-block);padding-inline-end:var(--wp-ui-popup-item-padding-inline);padding-inline-start:calc(var(--wp-ui-popup-item-padding-inline) - 4px);user-select:none;&.f181b98b0d33282a__is-size-compact{--wp-ui-popup-item-height:32px;--wp-ui-popup-item-padding-inline:8px}&._38f7faff93c61958__is-size-small{--wp-ui-popup-item-height:24px;--wp-ui-popup-item-padding-inline:8px;--wp-ui-popup-item-padding-block:2px}&:not([data-selected]){._92fbe4765dfad5ee__item-indicator-icon{opacity:0}}&[data-highlighted]:not([aria-disabled=true]){background-color:var(--wpds-color-bg-interactive-brand-weak-active);color:var(--wpds-color-fg-interactive-neutral);@media (forced-colors:active){outline:1px solid Highlight}}&[aria-disabled=true]{color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){color:GrayText}}}._888a2f021a37fa9c__item-indicator{justify-self:center}._06c7ff39d2f685b9__empty{--wp-ui-popup-empty-min-height:40px;--wp-ui-popup-empty-padding-inline:12px;align-items:center;color:var(--wpds-color-fg-content-neutral-weak);display:flex;grid-area:main;padding-inline:var(--wp-ui-popup-empty-padding-inline);&:not(:empty){min-height:var(--wp-ui-popup-empty-min-height)}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"popup\":\"_234b520016b4e56f__popup _380b81b8f79fb10f__dropdown-motion\",\"list\":\"f43dc7c768d7b622__list\",\"list-scrollable-container\":\"_233cd60cdb84a2ef__list-scrollable-container\",\"list-footer\":\"ec4db6f0122263e7__list-footer\",\"item\":\"_684ccb7988365b4f__item\",\"is-size-compact\":\"f181b98b0d33282a__is-size-compact\",\"is-size-small\":\"_38f7faff93c61958__is-size-small\",\"item-indicator-icon\":\"_92fbe4765dfad5ee__item-indicator-icon\",\"item-indicator\":\"_888a2f021a37fa9c__item-indicator\",\"empty\":\"_06c7ff39d2f685b9__empty\"};\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"],
5
+ "mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;;;ACHtB,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,wwHAAgxH,CAAC;AAC3zH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,qBAAQ,EAAC,SAAQ,+DAA8D,QAAO,0BAAyB,6BAA4B,gDAA+C,eAAc,iCAAgC,QAAO,2BAA0B,mBAAkB,qCAAoC,iBAAgB,oCAAmC,uBAAsB,0CAAyC,kBAAiB,qCAAoC,SAAQ,2BAA0B;;;ACN/gB,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;;;AFA5D,SAAS,YAAY;AASlB,SAWC,KAXD;AANI,IAAM,OAAO;AAAA,EACnB,SAASA,MACR,EAAE,WAAW,OAAO,OAAO,WAAW,WAAW,OAAO,GAAG,UAAU,GACrE,KACC;AACD,WACC;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA,WAAY;AAAA,UACX,eAAa,YAAa;AAAA,UAC1B,mBAAgB;AAAA,UAChB,mBAAiB,WAAY,IAAK,EAAG;AAAA,UACrC;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACE,GAAG;AAAA,QAEL;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,MAAO;AAAA,cACP,WAAY;AAAA,gBACX,mBAAiB,gBAAiB;AAAA,gBAClC,mBAAiB,qBAAsB;AAAA,cACxC;AAAA,cACA,MAAO,SAAS,UAAU,KAAK;AAAA;AAAA,UAChC;AAAA,UACA,oBAAC,QAAQ,UAAR,EAAmB,UAAU;AAAA;AAAA;AAAA,IAC/B;AAAA,EAEF;AACD;",
6
+ "names": ["Item"]
7
+ }
@@ -0,0 +1,76 @@
1
+ // packages/ui/src/form/primitives/select/popup.tsx
2
+ import { Select as _Select } from "@base-ui/react/select";
3
+ import clsx from "clsx";
4
+ import { forwardRef } from "@wordpress/element";
5
+ import {
6
+ privateApis as themePrivateApis
7
+ } from "@wordpress/theme";
8
+ import { unlock } from "../../../lock-unlock.mjs";
9
+
10
+ // packages/ui/src/utils/css/item-popup.module.css
11
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='5b85ae6367']")) {
12
+ const style = document.createElement("style");
13
+ style.setAttribute("data-wp-hash", "5b85ae6367");
14
+ style.appendChild(document.createTextNode('@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:"header" "main";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:"scrollable" "footer";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-2xs);grid-template-columns:24px 1fr;justify-content:flex-start;margin-inline:var(--wp-ui-popup-padding);min-height:var(--wp-ui-popup-item-height);padding-block:var(--wp-ui-popup-item-padding-block);padding-inline-end:var(--wp-ui-popup-item-padding-inline);padding-inline-start:calc(var(--wp-ui-popup-item-padding-inline) - 4px);user-select:none;&.f181b98b0d33282a__is-size-compact{--wp-ui-popup-item-height:32px;--wp-ui-popup-item-padding-inline:8px}&._38f7faff93c61958__is-size-small{--wp-ui-popup-item-height:24px;--wp-ui-popup-item-padding-inline:8px;--wp-ui-popup-item-padding-block:2px}&:not([data-selected]){._92fbe4765dfad5ee__item-indicator-icon{opacity:0}}&[data-highlighted]:not([aria-disabled=true]){background-color:var(--wpds-color-bg-interactive-brand-weak-active);color:var(--wpds-color-fg-interactive-neutral);@media (forced-colors:active){outline:1px solid Highlight}}&[aria-disabled=true]{color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){color:GrayText}}}._888a2f021a37fa9c__item-indicator{justify-self:center}._06c7ff39d2f685b9__empty{--wp-ui-popup-empty-min-height:40px;--wp-ui-popup-empty-padding-inline:12px;align-items:center;color:var(--wpds-color-fg-content-neutral-weak);display:flex;grid-area:main;padding-inline:var(--wp-ui-popup-empty-padding-inline);&:not(:empty){min-height:var(--wp-ui-popup-empty-min-height)}}}'));
15
+ document.head.appendChild(style);
16
+ }
17
+ var item_popup_default = { "popup": "_234b520016b4e56f__popup _380b81b8f79fb10f__dropdown-motion", "list": "f43dc7c768d7b622__list", "list-scrollable-container": "_233cd60cdb84a2ef__list-scrollable-container", "list-footer": "ec4db6f0122263e7__list-footer", "item": "_684ccb7988365b4f__item", "is-size-compact": "f181b98b0d33282a__is-size-compact", "is-size-small": "_38f7faff93c61958__is-size-small", "item-indicator-icon": "_92fbe4765dfad5ee__item-indicator-icon", "item-indicator": "_888a2f021a37fa9c__item-indicator", "empty": "_06c7ff39d2f685b9__empty" };
18
+
19
+ // packages/ui/src/utils/css/resets.module.css
20
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='671ebfc62d']")) {
21
+ const style = document.createElement("style");
22
+ style.setAttribute("data-wp-hash", "671ebfc62d");
23
+ 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}}}"));
24
+ document.head.appendChild(style);
25
+ }
26
+ var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
27
+
28
+ // packages/ui/src/form/primitives/select/style.module.css
29
+ if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='f7f9e4247f']")) {
30
+ const style = document.createElement("style");
31
+ style.setAttribute("data-wp-hash", "f7f9e4247f");
32
+ style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._0ab863136fb95530__positioner{z-index:var(--wp-ui-select-z-index,initial)}}"));
33
+ document.head.appendChild(style);
34
+ }
35
+ var style_default = { "positioner": "_0ab863136fb95530__positioner" };
36
+
37
+ // packages/ui/src/form/primitives/select/popup.tsx
38
+ import { ITEM_POPUP_POSITIONER_PROPS } from "../constants.mjs";
39
+ import { jsx } from "react/jsx-runtime";
40
+ var ThemeProvider = unlock(themePrivateApis).ThemeProvider;
41
+ var Popup = forwardRef(
42
+ function Popup2({ className, children, style, ...restProps }, ref) {
43
+ return /* @__PURE__ */ jsx(_Select.Portal, { children: /* @__PURE__ */ jsx(
44
+ _Select.Positioner,
45
+ {
46
+ ...ITEM_POPUP_POSITIONER_PROPS,
47
+ alignItemWithTrigger: false,
48
+ style,
49
+ className: clsx(
50
+ resets_default["box-sizing"],
51
+ style_default.positioner,
52
+ className
53
+ ),
54
+ children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
55
+ _Select.Popup,
56
+ {
57
+ ref,
58
+ className: item_popup_default.popup,
59
+ ...restProps,
60
+ children: /* @__PURE__ */ jsx(_Select.List, { className: item_popup_default.list, children: /* @__PURE__ */ jsx(
61
+ "div",
62
+ {
63
+ className: item_popup_default["list-scrollable-container"],
64
+ children
65
+ }
66
+ ) })
67
+ }
68
+ ) })
69
+ }
70
+ ) });
71
+ }
72
+ );
73
+ export {
74
+ Popup
75
+ };
76
+ //# sourceMappingURL=popup.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/form/primitives/select/popup.tsx", "../../../../src/utils/css/item-popup.module.css", "../../../../src/utils/css/resets.module.css", "../../../../src/form/primitives/select/style.module.css"],
4
+ "sourcesContent": ["import { Select as _Select } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../../../lock-unlock';\nimport itemPopupStyles from '../../../utils/css/item-popup.module.css';\nimport resetStyles from '../../../utils/css/resets.module.css';\nimport styles from './style.module.css';\nimport type { SelectPopupProps } from './types';\nimport { ITEM_POPUP_POSITIONER_PROPS } from '../constants';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nexport const Popup = forwardRef< HTMLDivElement, SelectPopupProps >(\n\tfunction Popup( { className, children, style, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<_Select.Portal>\n\t\t\t\t<_Select.Positioner\n\t\t\t\t\t{ ...ITEM_POPUP_POSITIONER_PROPS }\n\t\t\t\t\talignItemWithTrigger={ false }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\t\t\tstyles.positioner,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<_Select.Popup\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\tclassName={ itemPopupStyles.popup }\n\t\t\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<_Select.List className={ itemPopupStyles.list }>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\titemPopupStyles[\n\t\t\t\t\t\t\t\t\t\t\t'list-scrollable-container'\n\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</_Select.List>\n\t\t\t\t\t\t</_Select.Popup>\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</_Select.Positioner>\n\t\t\t</_Select.Portal>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='5b85ae6367']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"5b85ae6367\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities{._380b81b8f79fb10f__dropdown-motion{--wp-ui-dropdown-slide-distance:4px;--wp-ui-dropdown-slide-duration:200ms;--wp-ui-dropdown-slide-easing:cubic-bezier(0,0,0,1);--wp-ui-dropdown-fade-duration:80ms;--wp-ui-dropdown-fade-easing:linear;@media not (prefers-reduced-motion){transition-duration:var(--wp-ui-dropdown-slide-duration),var(--wp-ui-dropdown-fade-duration);transition-property:transform,opacity;transition-timing-function:var(--wp-ui-dropdown-slide-easing),var(--wp-ui-dropdown-fade-easing);will-change:transform,opacity}opacity:0;&[data-side=bottom]{transform:translateY(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-side=top]{transform:translateY(var(--wp-ui-dropdown-slide-distance))}&[data-side=left]{transform:translateX(var(--wp-ui-dropdown-slide-distance))}&[data-side=right]{transform:translateX(calc(var(--wp-ui-dropdown-slide-distance)*-1))}&[data-open]:not([data-starting-style]){opacity:1;transform:translate(0)}}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._234b520016b4e56f__popup{--wp-ui-popup-padding:4px;background-color:var(--wpds-color-bg-surface-neutral-strong);border:1px solid var(--wpds-color-stroke-surface-neutral);border-radius:var(--wpds-border-radius-md);box-shadow:var(--wpds-elevation-medium);color:var(--wpds-color-fg-interactive-neutral);display:grid;font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-md);grid-template-areas:\\\"header\\\" \\\"main\\\";grid-template-rows:auto minmax(0,1fr);line-height:1.4;max-height:min(var(--available-height),480px,60dvh);max-width:var(--available-width);min-width:var(--anchor-width)}.f43dc7c768d7b622__list{display:grid;grid-area:main;grid-template-areas:\\\"scrollable\\\" \\\"footer\\\";grid-template-rows:minmax(0,1fr) auto}._233cd60cdb84a2ef__list-scrollable-container{grid-area:scrollable;overflow-block:auto;overscroll-behavior:contain;scroll-padding-block:var(--wp-ui-popup-padding);&:not(:empty){padding-block:var(--wp-ui-popup-padding)}}.ec4db6f0122263e7__list-footer{grid-area:footer;padding-block:var(--wp-ui-popup-padding);._233cd60cdb84a2ef__list-scrollable-container:not(:empty)+&{border-block-start:1px solid var(--wpds-color-stroke-surface-neutral)}}._684ccb7988365b4f__item{--wp-ui-popup-item-height:40px;--wp-ui-popup-item-padding-inline:12px;--wp-ui-popup-item-padding-block:4px;align-items:center;border-radius:var(--wpds-border-radius-sm);display:grid;gap:var(--wpds-dimension-gap-2xs);grid-template-columns:24px 1fr;justify-content:flex-start;margin-inline:var(--wp-ui-popup-padding);min-height:var(--wp-ui-popup-item-height);padding-block:var(--wp-ui-popup-item-padding-block);padding-inline-end:var(--wp-ui-popup-item-padding-inline);padding-inline-start:calc(var(--wp-ui-popup-item-padding-inline) - 4px);user-select:none;&.f181b98b0d33282a__is-size-compact{--wp-ui-popup-item-height:32px;--wp-ui-popup-item-padding-inline:8px}&._38f7faff93c61958__is-size-small{--wp-ui-popup-item-height:24px;--wp-ui-popup-item-padding-inline:8px;--wp-ui-popup-item-padding-block:2px}&:not([data-selected]){._92fbe4765dfad5ee__item-indicator-icon{opacity:0}}&[data-highlighted]:not([aria-disabled=true]){background-color:var(--wpds-color-bg-interactive-brand-weak-active);color:var(--wpds-color-fg-interactive-neutral);@media (forced-colors:active){outline:1px solid Highlight}}&[aria-disabled=true]{color:var(--wpds-color-fg-interactive-neutral-disabled);@media (forced-colors:active){color:GrayText}}}._888a2f021a37fa9c__item-indicator{justify-self:center}._06c7ff39d2f685b9__empty{--wp-ui-popup-empty-min-height:40px;--wp-ui-popup-empty-padding-inline:12px;align-items:center;color:var(--wpds-color-fg-content-neutral-weak);display:flex;grid-area:main;padding-inline:var(--wp-ui-popup-empty-padding-inline);&:not(:empty){min-height:var(--wp-ui-popup-empty-min-height)}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"popup\":\"_234b520016b4e56f__popup _380b81b8f79fb10f__dropdown-motion\",\"list\":\"f43dc7c768d7b622__list\",\"list-scrollable-container\":\"_233cd60cdb84a2ef__list-scrollable-container\",\"list-footer\":\"ec4db6f0122263e7__list-footer\",\"item\":\"_684ccb7988365b4f__item\",\"is-size-compact\":\"f181b98b0d33282a__is-size-compact\",\"is-size-small\":\"_38f7faff93c61958__is-size-small\",\"item-indicator-icon\":\"_92fbe4765dfad5ee__item-indicator-icon\",\"item-indicator\":\"_888a2f021a37fa9c__item-indicator\",\"empty\":\"_06c7ff39d2f685b9__empty\"};\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='f7f9e4247f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f7f9e4247f\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._0ab863136fb95530__positioner{z-index:var(--wp-ui-select-z-index,initial)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"positioner\":\"_0ab863136fb95530__positioner\"};\n"],
5
+ "mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B;AAAA,EAEC,eAAe;AAAA,OACT;AACP,SAAS,cAAc;;;ACPvB,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,wwHAAgxH,CAAC;AAC3zH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,qBAAQ,EAAC,SAAQ,+DAA8D,QAAO,0BAAyB,6BAA4B,gDAA+C,eAAc,iCAAgC,QAAO,2BAA0B,mBAAkB,qCAAoC,iBAAgB,oCAAmC,uBAAsB,0CAAyC,kBAAiB,qCAAoC,SAAQ,2BAA0B;;;ACN/gB,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,oLAAoL,CAAC;AAC/N,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,cAAa,gCAA+B;;;AHM5D,SAAS,mCAAmC;AA0BpC;AAxBR,IAAM,gBACL,OAAQ,gBAAiB,EAAE;AAErB,IAAM,QAAQ;AAAA,EACpB,SAASA,OAAO,EAAE,WAAW,UAAU,OAAO,GAAG,UAAU,GAAG,KAAM;AACnE,WACC,oBAAC,QAAQ,QAAR,EACA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACE,GAAG;AAAA,QACL,sBAAuB;AAAA,QACvB;AAAA,QACA,WAAY;AAAA,UACX,eAAa,YAAa;AAAA,UAC1B,cAAO;AAAA,UACP;AAAA,QACD;AAAA,QAEA,8BAAC,iBACA;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA;AAAA,YACA,WAAY,mBAAgB;AAAA,YAC1B,GAAG;AAAA,YAEL,8BAAC,QAAQ,MAAR,EAAa,WAAY,mBAAgB,MACzC;AAAA,cAAC;AAAA;AAAA,gBACA,WACC,mBACC,2BACD;AAAA,gBAGC;AAAA;AAAA,YACH,GACD;AAAA;AAAA,QACD,GACD;AAAA;AAAA,IACD,GACD;AAAA,EAEF;AACD;",
6
+ "names": ["Popup"]
7
+ }
@@ -0,0 +1,10 @@
1
+ // packages/ui/src/form/primitives/select/root.tsx
2
+ import { Select as _Select } from "@base-ui/react/select";
3
+ import { jsx } from "react/jsx-runtime";
4
+ function Root(props) {
5
+ return /* @__PURE__ */ jsx(_Select.Root, { ...props });
6
+ }
7
+ export {
8
+ Root
9
+ };
10
+ //# sourceMappingURL=root.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/form/primitives/select/root.tsx"],
4
+ "sourcesContent": ["import { Select as _Select } from '@base-ui/react/select';\nimport type { SelectRootProps } from './types';\n\nexport function Root( props: SelectRootProps ) {\n\treturn <_Select.Root< string, false > { ...props } />;\n}\n"],
5
+ "mappings": ";AAAA,SAAS,UAAU,eAAe;AAI1B;AADD,SAAS,KAAM,OAAyB;AAC9C,SAAO,oBAAC,QAAQ,MAAR,EAAgC,GAAG,OAAQ;AACpD;",
6
+ "names": []
7
+ }