@wordpress/components 19.7.0 → 19.8.2

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 (420) hide show
  1. package/CHANGELOG.md +27 -1
  2. package/README.md +38 -0
  3. package/build/base-control/index.js +35 -31
  4. package/build/base-control/index.js.map +1 -1
  5. package/build/base-control/styles/base-control-styles.js +18 -18
  6. package/build/base-control/styles/base-control-styles.js.map +1 -1
  7. package/build/base-control/types.js +6 -0
  8. package/build/base-control/types.js.map +1 -0
  9. package/build/border-box-control/border-box-control/component.js +124 -0
  10. package/build/border-box-control/border-box-control/component.js.map +1 -0
  11. package/build/border-box-control/border-box-control/hook.js +113 -0
  12. package/build/border-box-control/border-box-control/hook.js.map +1 -0
  13. package/build/border-box-control/border-box-control/index.js +24 -0
  14. package/build/border-box-control/border-box-control/index.js.map +1 -0
  15. package/build/border-box-control/border-box-control-linked-button/component.js +59 -0
  16. package/build/border-box-control/border-box-control-linked-button/component.js.map +1 -0
  17. package/build/border-box-control/border-box-control-linked-button/hook.js +41 -0
  18. package/build/border-box-control/border-box-control-linked-button/hook.js.map +1 -0
  19. package/build/border-box-control/border-box-control-linked-button/index.js +16 -0
  20. package/build/border-box-control/border-box-control-linked-button/index.js.map +1 -0
  21. package/build/border-box-control/border-box-control-split-controls/component.js +93 -0
  22. package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -0
  23. package/build/border-box-control/border-box-control-split-controls/hook.js +45 -0
  24. package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -0
  25. package/build/border-box-control/border-box-control-split-controls/index.js +16 -0
  26. package/build/border-box-control/border-box-control-split-controls/index.js.map +1 -0
  27. package/build/border-box-control/border-box-control-visualizer/component.js +40 -0
  28. package/build/border-box-control/border-box-control-visualizer/component.js.map +1 -0
  29. package/build/border-box-control/border-box-control-visualizer/hook.js +43 -0
  30. package/build/border-box-control/border-box-control-visualizer/hook.js.map +1 -0
  31. package/build/border-box-control/border-box-control-visualizer/index.js +16 -0
  32. package/build/border-box-control/border-box-control-visualizer/index.js.map +1 -0
  33. package/build/border-box-control/index.js +44 -0
  34. package/build/border-box-control/index.js.map +1 -0
  35. package/build/border-box-control/styles.js +76 -0
  36. package/build/border-box-control/styles.js.map +1 -0
  37. package/build/border-box-control/types.js +6 -0
  38. package/build/border-box-control/types.js.map +1 -0
  39. package/build/border-box-control/utils.js +161 -0
  40. package/build/border-box-control/utils.js.map +1 -0
  41. package/build/border-control/border-control/component.js +119 -0
  42. package/build/border-control/border-control/component.js.map +1 -0
  43. package/build/border-control/border-control/hook.js +130 -0
  44. package/build/border-control/border-control/hook.js.map +1 -0
  45. package/build/border-control/border-control/index.js +24 -0
  46. package/build/border-control/border-control/index.js.map +1 -0
  47. package/build/border-control/border-control-dropdown/component.js +196 -0
  48. package/build/border-control/border-control-dropdown/component.js.map +1 -0
  49. package/build/border-control/border-control-dropdown/hook.js +105 -0
  50. package/build/border-control/border-control-dropdown/hook.js.map +1 -0
  51. package/build/border-control/border-control-dropdown/index.js +16 -0
  52. package/build/border-control/border-control-dropdown/index.js.map +1 -0
  53. package/build/border-control/border-control-style-picker/component.js +101 -0
  54. package/build/border-control/border-control-style-picker/component.js.map +1 -0
  55. package/build/border-control/border-control-style-picker/hook.js +45 -0
  56. package/build/border-control/border-control-style-picker/hook.js.map +1 -0
  57. package/build/border-control/border-control-style-picker/index.js +16 -0
  58. package/build/border-control/border-control-style-picker/index.js.map +1 -0
  59. package/build/border-control/index.js +24 -0
  60. package/build/border-control/index.js.map +1 -0
  61. package/build/border-control/styles.js +125 -0
  62. package/build/border-control/styles.js.map +1 -0
  63. package/build/border-control/types.js +6 -0
  64. package/build/border-control/types.js.map +1 -0
  65. package/build/card/styles.js +22 -17
  66. package/build/card/styles.js.map +1 -1
  67. package/build/custom-select-control/index.js +4 -1
  68. package/build/custom-select-control/index.js.map +1 -1
  69. package/build/guide/index.js +14 -8
  70. package/build/guide/index.js.map +1 -1
  71. package/build/index.js +40 -0
  72. package/build/index.js.map +1 -1
  73. package/build/item-group/styles.js +14 -14
  74. package/build/item-group/styles.js.map +1 -1
  75. package/build/mobile/picker/index.android.js +0 -3
  76. package/build/mobile/picker/index.android.js.map +1 -1
  77. package/build/palette-edit/index.js +2 -1
  78. package/build/palette-edit/index.js.map +1 -1
  79. package/build/surface/styles.js +8 -8
  80. package/build/surface/styles.js.map +1 -1
  81. package/build/toggle-group-control/index.js +8 -0
  82. package/build/toggle-group-control/index.js.map +1 -1
  83. package/build/toggle-group-control/toggle-group-control/component.js +10 -1
  84. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  85. package/build/toggle-group-control/toggle-group-control/styles.js +14 -3
  86. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  87. package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +90 -0
  88. package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +1 -0
  89. package/build/toggle-group-control/toggle-group-control-option/component.js +9 -87
  90. package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  91. package/build/toggle-group-control/toggle-group-control-option-base/component.js +127 -0
  92. package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -0
  93. package/build/toggle-group-control/toggle-group-control-option-base/index.js +16 -0
  94. package/build/toggle-group-control/toggle-group-control-option-base/index.js.map +1 -0
  95. package/build/toggle-group-control/toggle-group-control-option-base/styles.js +66 -0
  96. package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -0
  97. package/build/toggle-group-control/toggle-group-control-option-icon/component.js +55 -0
  98. package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -0
  99. package/build/toggle-group-control/toggle-group-control-option-icon/index.js +16 -0
  100. package/build/toggle-group-control/toggle-group-control-option-icon/index.js.map +1 -0
  101. package/build/toolbar-dropdown-menu/index.js +1 -1
  102. package/build/toolbar-dropdown-menu/index.js.map +1 -1
  103. package/build/unit-control/index.js +7 -2
  104. package/build/unit-control/index.js.map +1 -1
  105. package/build/utils/colors-values.js +5 -3
  106. package/build/utils/colors-values.js.map +1 -1
  107. package/build/utils/config-values.js +9 -4
  108. package/build/utils/config-values.js.map +1 -1
  109. package/build-module/base-control/index.js +33 -34
  110. package/build-module/base-control/index.js.map +1 -1
  111. package/build-module/base-control/styles/base-control-styles.js +18 -18
  112. package/build-module/base-control/styles/base-control-styles.js.map +1 -1
  113. package/build-module/base-control/types.js +2 -0
  114. package/build-module/base-control/types.js.map +1 -0
  115. package/build-module/border-box-control/border-box-control/component.js +104 -0
  116. package/build-module/border-box-control/border-box-control/component.js.map +1 -0
  117. package/build-module/border-box-control/border-box-control/hook.js +97 -0
  118. package/build-module/border-box-control/border-box-control/hook.js.map +1 -0
  119. package/build-module/border-box-control/border-box-control/index.js +3 -0
  120. package/build-module/border-box-control/border-box-control/index.js.map +1 -0
  121. package/build-module/border-box-control/border-box-control-linked-button/component.js +42 -0
  122. package/build-module/border-box-control/border-box-control-linked-button/component.js.map +1 -0
  123. package/build-module/border-box-control/border-box-control-linked-button/hook.js +26 -0
  124. package/build-module/border-box-control/border-box-control-linked-button/hook.js.map +1 -0
  125. package/build-module/border-box-control/border-box-control-linked-button/index.js +2 -0
  126. package/build-module/border-box-control/border-box-control-linked-button/index.js.map +1 -0
  127. package/build-module/border-box-control/border-box-control-split-controls/component.js +77 -0
  128. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -0
  129. package/build-module/border-box-control/border-box-control-split-controls/hook.js +30 -0
  130. package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -0
  131. package/build-module/border-box-control/border-box-control-split-controls/index.js +2 -0
  132. package/build-module/border-box-control/border-box-control-split-controls/index.js.map +1 -0
  133. package/build-module/border-box-control/border-box-control-visualizer/component.js +27 -0
  134. package/build-module/border-box-control/border-box-control-visualizer/component.js.map +1 -0
  135. package/build-module/border-box-control/border-box-control-visualizer/hook.js +28 -0
  136. package/build-module/border-box-control/border-box-control-visualizer/hook.js.map +1 -0
  137. package/build-module/border-box-control/border-box-control-visualizer/index.js +2 -0
  138. package/build-module/border-box-control/border-box-control-visualizer/index.js.map +1 -0
  139. package/build-module/border-box-control/index.js +4 -0
  140. package/build-module/border-box-control/index.js.map +1 -0
  141. package/build-module/border-box-control/styles.js +66 -0
  142. package/build-module/border-box-control/styles.js.map +1 -0
  143. package/build-module/border-box-control/types.js +2 -0
  144. package/build-module/border-box-control/types.js.map +1 -0
  145. package/build-module/border-box-control/utils.js +127 -0
  146. package/build-module/border-box-control/utils.js.map +1 -0
  147. package/build-module/border-control/border-control/component.js +100 -0
  148. package/build-module/border-control/border-control/component.js.map +1 -0
  149. package/build-module/border-control/border-control/hook.js +115 -0
  150. package/build-module/border-control/border-control/hook.js.map +1 -0
  151. package/build-module/border-control/border-control/index.js +3 -0
  152. package/build-module/border-control/border-control/index.js.map +1 -0
  153. package/build-module/border-control/border-control-dropdown/component.js +174 -0
  154. package/build-module/border-control/border-control-dropdown/component.js.map +1 -0
  155. package/build-module/border-control/border-control-dropdown/hook.js +89 -0
  156. package/build-module/border-control/border-control-dropdown/hook.js.map +1 -0
  157. package/build-module/border-control/border-control-dropdown/index.js +2 -0
  158. package/build-module/border-control/border-control-dropdown/index.js.map +1 -0
  159. package/build-module/border-control/border-control-style-picker/component.js +81 -0
  160. package/build-module/border-control/border-control-style-picker/component.js.map +1 -0
  161. package/build-module/border-control/border-control-style-picker/hook.js +30 -0
  162. package/build-module/border-control/border-control-style-picker/hook.js.map +1 -0
  163. package/build-module/border-control/border-control-style-picker/index.js +2 -0
  164. package/build-module/border-control/border-control-style-picker/index.js.map +1 -0
  165. package/build-module/border-control/index.js +3 -0
  166. package/build-module/border-control/index.js.map +1 -0
  167. package/build-module/border-control/styles.js +90 -0
  168. package/build-module/border-control/styles.js.map +1 -0
  169. package/build-module/border-control/types.js +2 -0
  170. package/build-module/border-control/types.js.map +1 -0
  171. package/build-module/card/styles.js +23 -18
  172. package/build-module/card/styles.js.map +1 -1
  173. package/build-module/custom-select-control/index.js +4 -1
  174. package/build-module/custom-select-control/index.js.map +1 -1
  175. package/build-module/guide/index.js +14 -8
  176. package/build-module/guide/index.js.map +1 -1
  177. package/build-module/index.js +3 -1
  178. package/build-module/index.js.map +1 -1
  179. package/build-module/item-group/styles.js +14 -14
  180. package/build-module/item-group/styles.js.map +1 -1
  181. package/build-module/mobile/picker/index.android.js +0 -3
  182. package/build-module/mobile/picker/index.android.js.map +1 -1
  183. package/build-module/palette-edit/index.js +3 -2
  184. package/build-module/palette-edit/index.js.map +1 -1
  185. package/build-module/surface/styles.js +8 -8
  186. package/build-module/surface/styles.js.map +1 -1
  187. package/build-module/toggle-group-control/index.js +1 -0
  188. package/build-module/toggle-group-control/index.js.map +1 -1
  189. package/build-module/toggle-group-control/toggle-group-control/component.js +8 -1
  190. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  191. package/build-module/toggle-group-control/toggle-group-control/styles.js +11 -3
  192. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  193. package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +86 -0
  194. package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +1 -0
  195. package/build-module/toggle-group-control/toggle-group-control-option/component.js +9 -76
  196. package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  197. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +105 -0
  198. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -0
  199. package/build-module/toggle-group-control/toggle-group-control-option-base/index.js +2 -0
  200. package/build-module/toggle-group-control/toggle-group-control-option-base/index.js.map +1 -0
  201. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +55 -0
  202. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -0
  203. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +50 -0
  204. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -0
  205. package/build-module/toggle-group-control/toggle-group-control-option-icon/index.js +2 -0
  206. package/build-module/toggle-group-control/toggle-group-control-option-icon/index.js.map +1 -0
  207. package/build-module/toolbar-dropdown-menu/index.js +1 -1
  208. package/build-module/toolbar-dropdown-menu/index.js.map +1 -1
  209. package/build-module/unit-control/index.js +7 -2
  210. package/build-module/unit-control/index.js.map +1 -1
  211. package/build-module/utils/colors-values.js +5 -3
  212. package/build-module/utils/colors-values.js.map +1 -1
  213. package/build-module/utils/config-values.js +8 -4
  214. package/build-module/utils/config-values.js.map +1 -1
  215. package/build-style/style-rtl.css +4 -4
  216. package/build-style/style.css +4 -4
  217. package/build-types/base-control/index.d.ts +35 -76
  218. package/build-types/base-control/index.d.ts.map +1 -1
  219. package/build-types/base-control/stories/index.d.ts +25 -0
  220. package/build-types/base-control/stories/index.d.ts.map +1 -0
  221. package/build-types/base-control/styles/base-control-styles.d.ts +6 -5
  222. package/build-types/base-control/styles/base-control-styles.d.ts.map +1 -1
  223. package/build-types/base-control/types.d.ts +41 -0
  224. package/build-types/base-control/types.d.ts.map +1 -0
  225. package/build-types/border-box-control/border-box-control/component.d.ts +4 -0
  226. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -0
  227. package/build-types/border-box-control/border-box-control/hook.d.ts +282 -0
  228. package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -0
  229. package/build-types/border-box-control/border-box-control/index.d.ts +3 -0
  230. package/build-types/border-box-control/border-box-control/index.d.ts.map +1 -0
  231. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts +4 -0
  232. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts.map +1 -0
  233. package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts +266 -0
  234. package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts.map +1 -0
  235. package/build-types/border-box-control/border-box-control-linked-button/index.d.ts +2 -0
  236. package/build-types/border-box-control/border-box-control-linked-button/index.d.ts.map +1 -0
  237. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +4 -0
  238. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -0
  239. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +274 -0
  240. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -0
  241. package/build-types/border-box-control/border-box-control-split-controls/index.d.ts +2 -0
  242. package/build-types/border-box-control/border-box-control-split-controls/index.d.ts.map +1 -0
  243. package/build-types/border-box-control/border-box-control-visualizer/component.d.ts +4 -0
  244. package/build-types/border-box-control/border-box-control-visualizer/component.d.ts.map +1 -0
  245. package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts +266 -0
  246. package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts.map +1 -0
  247. package/build-types/border-box-control/border-box-control-visualizer/index.d.ts +2 -0
  248. package/build-types/border-box-control/border-box-control-visualizer/index.d.ts.map +1 -0
  249. package/build-types/border-box-control/index.d.ts +4 -0
  250. package/build-types/border-box-control/index.d.ts.map +1 -0
  251. package/build-types/border-box-control/styles.d.ts +8 -0
  252. package/build-types/border-box-control/styles.d.ts.map +1 -0
  253. package/build-types/border-box-control/types.d.ts +91 -0
  254. package/build-types/border-box-control/types.d.ts.map +1 -0
  255. package/build-types/border-box-control/utils.d.ts +24 -0
  256. package/build-types/border-box-control/utils.d.ts.map +1 -0
  257. package/build-types/border-control/border-control/component.d.ts +4 -0
  258. package/build-types/border-control/border-control/component.d.ts.map +1 -0
  259. package/build-types/border-control/border-control/hook.d.ts +285 -0
  260. package/build-types/border-control/border-control/hook.d.ts.map +1 -0
  261. package/build-types/border-control/border-control/index.d.ts +3 -0
  262. package/build-types/border-control/border-control/index.d.ts.map +1 -0
  263. package/build-types/border-control/border-control-dropdown/component.d.ts +4 -0
  264. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -0
  265. package/build-types/border-control/border-control-dropdown/hook.d.ts +280 -0
  266. package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -0
  267. package/build-types/border-control/border-control-dropdown/index.d.ts +2 -0
  268. package/build-types/border-control/border-control-dropdown/index.d.ts.map +1 -0
  269. package/build-types/border-control/border-control-style-picker/component.d.ts +4 -0
  270. package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -0
  271. package/build-types/border-control/border-control-style-picker/hook.d.ts +269 -0
  272. package/build-types/border-control/border-control-style-picker/hook.d.ts.map +1 -0
  273. package/build-types/border-control/border-control-style-picker/index.d.ts +2 -0
  274. package/build-types/border-control/border-control-style-picker/index.d.ts.map +1 -0
  275. package/build-types/border-control/index.d.ts +3 -0
  276. package/build-types/border-control/index.d.ts.map +1 -0
  277. package/build-types/border-control/styles.d.ts +18 -0
  278. package/build-types/border-control/styles.d.ts.map +1 -0
  279. package/build-types/border-control/types.d.ts +163 -0
  280. package/build-types/border-control/types.d.ts.map +1 -0
  281. package/build-types/card/styles.d.ts.map +1 -1
  282. package/build-types/color-indicator/index.d.ts +7 -0
  283. package/build-types/color-indicator/index.d.ts.map +1 -0
  284. package/build-types/input-control/stories/index.d.ts +17 -0
  285. package/build-types/input-control/stories/index.d.ts.map +1 -0
  286. package/build-types/item-group/styles.d.ts.map +1 -1
  287. package/build-types/text/test/index.d.ts +2 -0
  288. package/build-types/text/test/index.d.ts.map +1 -0
  289. package/build-types/toggle-group-control/index.d.ts +1 -0
  290. package/build-types/toggle-group-control/index.d.ts.map +1 -1
  291. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  292. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +5 -0
  293. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  294. package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts +9 -0
  295. package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts.map +1 -0
  296. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +6 -2
  297. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
  298. package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts +4 -0
  299. package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map +1 -1
  300. package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts +25 -0
  301. package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -0
  302. package/build-types/toggle-group-control/toggle-group-control-option-base/index.d.ts +2 -0
  303. package/build-types/toggle-group-control/toggle-group-control-option-base/index.d.ts.map +1 -0
  304. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +15 -0
  305. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -0
  306. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +37 -0
  307. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts.map +1 -0
  308. package/build-types/toggle-group-control/toggle-group-control-option-icon/index.d.ts +2 -0
  309. package/build-types/toggle-group-control/toggle-group-control-option-icon/index.d.ts.map +1 -0
  310. package/build-types/toggle-group-control/types.d.ts +24 -8
  311. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  312. package/build-types/ui/form-group/form-group.d.ts +2 -2
  313. package/build-types/unit-control/index.d.ts +6 -2
  314. package/build-types/unit-control/index.d.ts.map +1 -1
  315. package/build-types/unit-control/types.d.ts +5 -1
  316. package/build-types/unit-control/types.d.ts.map +1 -1
  317. package/build-types/utils/colors-values.d.ts +78 -18
  318. package/build-types/utils/colors-values.d.ts.map +1 -1
  319. package/build-types/utils/config-values.d.ts +71 -71
  320. package/build-types/utils/config-values.d.ts.map +1 -1
  321. package/package.json +17 -17
  322. package/src/animate/README.md +1 -1
  323. package/src/base-control/README.md +11 -11
  324. package/src/base-control/index.tsx +124 -0
  325. package/src/base-control/stories/index.tsx +80 -0
  326. package/src/base-control/styles/{base-control-styles.js → base-control-styles.ts} +0 -0
  327. package/src/base-control/types.ts +42 -0
  328. package/src/border-box-control/border-box-control/README.md +178 -0
  329. package/src/border-box-control/border-box-control/component.tsx +123 -0
  330. package/src/border-box-control/border-box-control/hook.ts +119 -0
  331. package/src/border-box-control/border-box-control/index.ts +2 -0
  332. package/src/border-box-control/border-box-control-linked-button/component.tsx +50 -0
  333. package/src/border-box-control/border-box-control-linked-button/hook.ts +30 -0
  334. package/src/border-box-control/border-box-control-linked-button/index.ts +1 -0
  335. package/src/border-box-control/border-box-control-split-controls/component.tsx +90 -0
  336. package/src/border-box-control/border-box-control-split-controls/hook.ts +34 -0
  337. package/src/border-box-control/border-box-control-split-controls/index.ts +1 -0
  338. package/src/border-box-control/border-box-control-visualizer/component.tsx +28 -0
  339. package/src/border-box-control/border-box-control-visualizer/hook.ts +30 -0
  340. package/src/border-box-control/border-box-control-visualizer/index.ts +1 -0
  341. package/src/border-box-control/index.ts +3 -0
  342. package/src/border-box-control/stories/index.js +104 -0
  343. package/src/border-box-control/styles.ts +69 -0
  344. package/src/border-box-control/test/index.js +354 -0
  345. package/src/border-box-control/test/utils.js +305 -0
  346. package/src/border-box-control/types.ts +98 -0
  347. package/src/border-box-control/utils.ts +151 -0
  348. package/src/border-control/border-control/README.md +181 -0
  349. package/src/border-control/border-control/component.tsx +112 -0
  350. package/src/border-control/border-control/hook.ts +145 -0
  351. package/src/border-control/border-control/index.ts +2 -0
  352. package/src/border-control/border-control-dropdown/component.tsx +252 -0
  353. package/src/border-control/border-control-dropdown/hook.ts +98 -0
  354. package/src/border-control/border-control-dropdown/index.ts +1 -0
  355. package/src/border-control/border-control-style-picker/component.tsx +89 -0
  356. package/src/border-control/border-control-style-picker/hook.ts +34 -0
  357. package/src/border-control/border-control-style-picker/index.ts +1 -0
  358. package/src/border-control/index.ts +2 -0
  359. package/src/border-control/stories/index.js +118 -0
  360. package/src/border-control/styles.ts +190 -0
  361. package/src/border-control/test/index.js +436 -0
  362. package/src/border-control/types.ts +173 -0
  363. package/src/card/styles.js +11 -5
  364. package/src/card/test/__snapshots__/index.js.snap +83 -66
  365. package/src/card/test/index.js +7 -5
  366. package/src/color-palette/README.md +6 -0
  367. package/src/color-palette/stories/index.js +8 -1
  368. package/src/custom-select-control/index.js +7 -1
  369. package/src/custom-select-control/style.scss +5 -1
  370. package/src/disabled/README.md +7 -10
  371. package/src/flyout/test/__snapshots__/index.js.snap +7 -7
  372. package/src/form-toggle/README.md +1 -1
  373. package/src/guide/index.js +12 -13
  374. package/src/guide/style.scss +0 -4
  375. package/src/index.js +8 -0
  376. package/src/item-group/styles.ts +1 -0
  377. package/src/item-group/test/__snapshots__/index.js.snap +11 -10
  378. package/src/mobile/picker/index.android.js +0 -1
  379. package/src/palette-edit/index.js +8 -2
  380. package/src/surface/styles.js +1 -1
  381. package/src/surface/test/__snapshots__/index.js.snap +11 -11
  382. package/src/toggle-group-control/index.ts +1 -0
  383. package/src/toggle-group-control/stories/index.js +37 -7
  384. package/src/toggle-group-control/test/__snapshots__/index.js.snap +269 -5
  385. package/src/toggle-group-control/test/index.js +43 -10
  386. package/src/toggle-group-control/toggle-group-control/component.tsx +10 -0
  387. package/src/toggle-group-control/toggle-group-control/styles.ts +14 -0
  388. package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx +86 -0
  389. package/src/toggle-group-control/toggle-group-control-option/README.md +8 -5
  390. package/src/toggle-group-control/toggle-group-control-option/component.tsx +18 -94
  391. package/src/toggle-group-control/toggle-group-control-option-base/README.md +27 -0
  392. package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +129 -0
  393. package/src/toggle-group-control/toggle-group-control-option-base/index.ts +1 -0
  394. package/src/toggle-group-control/{toggle-group-control-option → toggle-group-control-option-base}/styles.ts +4 -1
  395. package/src/toggle-group-control/toggle-group-control-option-icon/README.md +56 -0
  396. package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +56 -0
  397. package/src/toggle-group-control/toggle-group-control-option-icon/index.ts +1 -0
  398. package/src/toggle-group-control/types.ts +33 -8
  399. package/src/toolbar-dropdown-menu/index.js +1 -1
  400. package/src/tools-panel/test/__snapshots__/index.js.snap +8 -8
  401. package/src/unit-control/README.md +6 -0
  402. package/src/unit-control/index.tsx +6 -1
  403. package/src/unit-control/test/index.js +120 -0
  404. package/src/unit-control/types.ts +5 -1
  405. package/src/utils/colors-values.js +4 -3
  406. package/src/utils/config-values.js +9 -4
  407. package/tsconfig.json +3 -0
  408. package/tsconfig.tsbuildinfo +1 -1
  409. package/build/guide/finish-button.js +0 -44
  410. package/build/guide/finish-button.js.map +0 -1
  411. package/build/toggle-group-control/toggle-group-control-option/styles.js +0 -66
  412. package/build/toggle-group-control/toggle-group-control-option/styles.js.map +0 -1
  413. package/build-module/guide/finish-button.js +0 -34
  414. package/build-module/guide/finish-button.js.map +0 -1
  415. package/build-module/toggle-group-control/toggle-group-control-option/styles.js +0 -55
  416. package/build-module/toggle-group-control/toggle-group-control-option/styles.js.map +0 -1
  417. package/src/base-control/index.js +0 -118
  418. package/src/base-control/stories/index.js +0 -81
  419. package/src/guide/finish-button.js +0 -26
  420. package/src/guide/test/finish-button.js +0 -49
@@ -0,0 +1,66 @@
1
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2
+
3
+ /**
4
+ * External dependencies
5
+ */
6
+ import { css } from '@emotion/react';
7
+ /**
8
+ * Internal dependencies
9
+ */
10
+
11
+ import { COLORS, CONFIG, rtl } from '../utils';
12
+ import { space } from '../ui/utils/space';
13
+ export const BorderBoxControl = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControl;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjbUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbmltcG9ydCB0eXBlIHsgQm9yZGVyIH0gZnJvbSAnLi4vYm9yZGVyLWNvbnRyb2wvdHlwZXMnO1xuaW1wb3J0IHR5cGUgeyBCb3JkZXJzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sID0gY3NzYGA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvcmRlckJveENvbnRyb2xMaW5rZWRCdXR0b24gPSBjc3NgXG5cdGZsZXg6IDA7XG5cdGZsZXgtYmFzaXM6IDM2cHg7XG5cdG1hcmdpbi10b3A6IDdweDtcbmA7XG5cbmNvbnN0IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9ICggYm9yZGVycz86IEJvcmRlcnMgKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogMjBweDtcblx0XHRyaWdodDogMzBweDtcblx0XHRib3R0b206IDIwcHg7XG5cdFx0bGVmdDogMzBweDtcblx0XHRib3JkZXItdG9wOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8udG9wICkgfTtcblx0XHRib3JkZXItYm90dG9tOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8uYm90dG9tICkgfTtcblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlckxlZnQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5sZWZ0ICksXG5cdFx0fSApKCkgfVxuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyUmlnaHQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5yaWdodCApLFxuXHRcdH0gKSgpIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sU3BsaXRDb250cm9scyA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHQkeyBydGwoIHsgbWFyZ2luUmlnaHQ6IHNwYWNlKCAzICkgfSwgeyBtYXJnaW5MZWZ0OiBzcGFjZSggMyApIH0gKSgpIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcbiJdfQ== */");
14
+ export const LinkedBorderControl = process.env.NODE_ENV === "production" ? {
15
+ name: "82a6rk",
16
+ styles: "flex:1"
17
+ } : {
18
+ name: "178dsw2-LinkedBorderControl",
19
+ styles: "flex:1;label:LinkedBorderControl;",
20
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQnNDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */",
21
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
22
+ };
23
+ export const BorderBoxControlLinkedButton = process.env.NODE_ENV === "production" ? {
24
+ name: "3gg0za",
25
+ styles: "flex:0;flex-basis:36px;margin-top:7px"
26
+ } : {
27
+ name: "f5zp9n-BorderBoxControlLinkedButton",
28
+ styles: "flex:0;flex-basis:36px;margin-top:7px;label:BorderBoxControlLinkedButton;",
29
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQitDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */",
30
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
31
+ };
32
+
33
+ const BorderBoxStyleWithFallback = border => {
34
+ const {
35
+ color = COLORS.gray[200],
36
+ style = 'solid',
37
+ width = CONFIG.borderWidth
38
+ } = border || {};
39
+ const clampedWidth = width !== CONFIG.borderWidth ? `clamp(1px, ${width}, 10px)` : width;
40
+ const hasVisibleBorder = !!width && width !== '0' || !!color;
41
+ const borderStyle = hasVisibleBorder ? style || 'solid' : style;
42
+ return `${color} ${borderStyle} ${clampedWidth}`;
43
+ };
44
+
45
+ export const BorderBoxControlVisualizer = borders => {
46
+ return /*#__PURE__*/css("position:absolute;top:20px;right:30px;bottom:20px;left:30px;border-top:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.top), ";border-bottom:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.bottom), ";", rtl({
47
+ borderLeft: BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.left)
48
+ })(), " ", rtl({
49
+ borderRight: BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.right)
50
+ })(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControlVisualizer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbmltcG9ydCB0eXBlIHsgQm9yZGVyIH0gZnJvbSAnLi4vYm9yZGVyLWNvbnRyb2wvdHlwZXMnO1xuaW1wb3J0IHR5cGUgeyBCb3JkZXJzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sID0gY3NzYGA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvcmRlckJveENvbnRyb2xMaW5rZWRCdXR0b24gPSBjc3NgXG5cdGZsZXg6IDA7XG5cdGZsZXgtYmFzaXM6IDM2cHg7XG5cdG1hcmdpbi10b3A6IDdweDtcbmA7XG5cbmNvbnN0IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9ICggYm9yZGVycz86IEJvcmRlcnMgKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogMjBweDtcblx0XHRyaWdodDogMzBweDtcblx0XHRib3R0b206IDIwcHg7XG5cdFx0bGVmdDogMzBweDtcblx0XHRib3JkZXItdG9wOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8udG9wICkgfTtcblx0XHRib3JkZXItYm90dG9tOiAkeyBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8uYm90dG9tICkgfTtcblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlckxlZnQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5sZWZ0ICksXG5cdFx0fSApKCkgfVxuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyUmlnaHQ6IEJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5yaWdodCApLFxuXHRcdH0gKSgpIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sU3BsaXRDb250cm9scyA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHQkeyBydGwoIHsgbWFyZ2luUmlnaHQ6IHNwYWNlKCAzICkgfSwgeyBtYXJnaW5MZWZ0OiBzcGFjZSggMyApIH0gKSgpIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcbiJdfQ== */");
51
+ };
52
+ export const BorderBoxControlSplitControls = /*#__PURE__*/css("position:relative;flex:1;", rtl({
53
+ marginRight: space(3)
54
+ }, {
55
+ marginLeft: space(3)
56
+ })(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:BorderBoxControlSplitControls;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */");
57
+ export const CenteredBorderControl = process.env.NODE_ENV === "production" ? {
58
+ name: "1nwbfnf",
59
+ styles: "grid-column:span 2;margin:0 auto"
60
+ } : {
61
+ name: "1mxp6dq-CenteredBorderControl",
62
+ styles: "grid-column:span 2;margin:0 auto;label:CenteredBorderControl;",
63
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRXdDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQm9yZGVyQ29udHJvbCA9IGNzc2Bcblx0ZmxleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gY3NzYFxuXHRmbGV4OiAwO1xuXHRmbGV4LWJhc2lzOiAzNnB4O1xuXHRtYXJnaW4tdG9wOiA3cHg7XG5gO1xuXG5jb25zdCBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoIGJvcmRlcnM/OiBCb3JkZXJzICkgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6IDIwcHg7XG5cdFx0cmlnaHQ6IDMwcHg7XG5cdFx0Ym90dG9tOiAyMHB4O1xuXHRcdGxlZnQ6IDMwcHg7XG5cdFx0Ym9yZGVyLXRvcDogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnRvcCApIH07XG5cdFx0Ym9yZGVyLWJvdHRvbTogJHsgQm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmJvdHRvbSApIH07XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJMZWZ0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ubGVmdCApLFxuXHRcdH0gKSgpIH1cblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlclJpZ2h0OiBCb3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8ucmlnaHQgKSxcblx0XHR9ICkoKSB9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQm9yZGVyQm94Q29udHJvbFNwbGl0Q29udHJvbHMgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiBzcGFjZSggMyApIH0sIHsgbWFyZ2luTGVmdDogc3BhY2UoIDMgKSB9ICkoKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG4iXX0= */",
64
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
65
+ };
66
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/border-box-control/styles.ts"],"names":["css","COLORS","CONFIG","rtl","space","BorderBoxControl","LinkedBorderControl","BorderBoxControlLinkedButton","BorderBoxStyleWithFallback","border","color","gray","style","width","borderWidth","clampedWidth","hasVisibleBorder","borderStyle","BorderBoxControlVisualizer","borders","top","bottom","borderLeft","left","borderRight","right","BorderBoxControlSplitControls","marginRight","marginLeft","CenteredBorderControl"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,GAAzB,QAAoC,UAApC;AACA,SAASC,KAAT,QAAsB,mBAAtB;AAKA,OAAO,MAAMC,gBAAgB,gBAAGL,GAAH,ywFAAtB;AAEP,OAAO,MAAMM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAzB;AAIP,OAAO,MAAMC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlC;;AAMP,MAAMC,0BAA0B,GAAKC,MAAF,IAAuB;AACzD,QAAM;AACLC,IAAAA,KAAK,GAAGT,MAAM,CAACU,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,KAAK,GAAG,OAFH;AAGLC,IAAAA,KAAK,GAAGX,MAAM,CAACY;AAHV,MAIFL,MAAM,IAAI,EAJd;AAMA,QAAMM,YAAY,GACjBF,KAAK,KAAKX,MAAM,CAACY,WAAjB,GAAgC,cAAcD,KAAO,SAArD,GAAgEA,KADjE;AAEA,QAAMG,gBAAgB,GAAK,CAAC,CAAEH,KAAH,IAAYA,KAAK,KAAK,GAAxB,IAAiC,CAAC,CAAEH,KAA7D;AACA,QAAMO,WAAW,GAAGD,gBAAgB,GAAGJ,KAAK,IAAI,OAAZ,GAAsBA,KAA1D;AAEA,SAAQ,GAAGF,KAAO,IAAIO,WAAa,IAAIF,YAAc,EAArD;AACA,CAbD;;AAeA,OAAO,MAAMG,0BAA0B,GAAKC,OAAF,IAAyB;AAClE,sBAAOnB,GAAP,4EAMgBQ,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,GAAX,CAN1C,qBAOmBZ,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,MAAX,CAP7C,OAQIlB,GAAG,CAAE;AACPmB,IAAAA,UAAU,EAAEd,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,IAAX;AAD/B,GAAF,CAAH,EARJ,OAWIpB,GAAG,CAAE;AACPqB,IAAAA,WAAW,EAAEhB,0BAA0B,CAAEW,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEM,KAAX;AADhC,GAAF,CAAH,EAXJ;AAeA,CAhBM;AAkBP,OAAO,MAAMC,6BAA6B,gBAAG1B,GAAH,8BAGtCG,GAAG,CAAE;AAAEwB,EAAAA,WAAW,EAAEvB,KAAK,CAAE,CAAF;AAApB,CAAF,EAA+B;AAAEwB,EAAAA,UAAU,EAAExB,KAAK,CAAE,CAAF;AAAnB,CAA/B,CAAH,EAHsC,+xFAAnC;AAMP,OAAO,MAAMyB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA3B","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\n\nimport type { Border } from '../border-control/types';\nimport type { Borders } from './types';\n\nexport const BorderBoxControl = css``;\n\nexport const LinkedBorderControl = css`\n\tflex: 1;\n`;\n\nexport const BorderBoxControlLinkedButton = css`\n\tflex: 0;\n\tflex-basis: 36px;\n\tmargin-top: 7px;\n`;\n\nconst BorderBoxStyleWithFallback = ( border?: Border ) => {\n\tconst {\n\t\tcolor = COLORS.gray[ 200 ],\n\t\tstyle = 'solid',\n\t\twidth = CONFIG.borderWidth,\n\t} = border || {};\n\n\tconst clampedWidth =\n\t\twidth !== CONFIG.borderWidth ? `clamp(1px, ${ width }, 10px)` : width;\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn `${ color } ${ borderStyle } ${ clampedWidth }`;\n};\n\nexport const BorderBoxControlVisualizer = ( borders?: Borders ) => {\n\treturn css`\n\t\tposition: absolute;\n\t\ttop: 20px;\n\t\tright: 30px;\n\t\tbottom: 20px;\n\t\tleft: 30px;\n\t\tborder-top: ${ BorderBoxStyleWithFallback( borders?.top ) };\n\t\tborder-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };\n\t\t${ rtl( {\n\t\t\tborderLeft: BorderBoxStyleWithFallback( borders?.left ),\n\t\t} )() }\n\t\t${ rtl( {\n\t\t\tborderRight: BorderBoxStyleWithFallback( borders?.right ),\n\t\t} )() }\n\t`;\n};\n\nexport const BorderBoxControlSplitControls = css`\n\tposition: relative;\n\tflex: 1;\n\t${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }\n`;\n\nexport const CenteredBorderControl = css`\n\tgrid-column: span 2;\n\tmargin: 0 auto;\n`;\n"]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -0,0 +1,127 @@
1
+ /**
2
+ * External dependencies
3
+ */
4
+
5
+ /**
6
+ * Internal dependencies
7
+ */
8
+ const sides = ['top', 'right', 'bottom', 'left'];
9
+ const borderProps = ['color', 'style', 'width'];
10
+ export const isEmptyBorder = border => {
11
+ if (!border) {
12
+ return true;
13
+ }
14
+
15
+ return !borderProps.some(prop => border[prop] !== undefined);
16
+ };
17
+ export const isDefinedBorder = border => {
18
+ // No border, no worries :)
19
+ if (!border) {
20
+ return false;
21
+ } // If we have individual borders per side within the border object we
22
+ // need to check whether any of those side borders have been set.
23
+
24
+
25
+ if (hasSplitBorders(border)) {
26
+ const allSidesEmpty = sides.every(side => isEmptyBorder(border[side]));
27
+ return !allSidesEmpty;
28
+ } // If we have a top-level border only, check if that is empty. e.g.
29
+ // { color: undefined, style: undefined, width: undefined }
30
+ // Border radius can still be set within the border object as it is
31
+ // handled separately.
32
+
33
+
34
+ return !isEmptyBorder(border);
35
+ };
36
+ export const isCompleteBorder = border => {
37
+ if (!border) {
38
+ return false;
39
+ }
40
+
41
+ return borderProps.every(prop => border[prop] !== undefined);
42
+ };
43
+ export const hasSplitBorders = function () {
44
+ let border = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
45
+ return Object.keys(border).some(side => sides.indexOf(side) !== -1);
46
+ };
47
+ export const hasMixedBorders = borders => {
48
+ if (!hasSplitBorders(borders)) {
49
+ return false;
50
+ }
51
+
52
+ const shorthandBorders = sides.map(side => getShorthandBorderStyle(borders === null || borders === void 0 ? void 0 : borders[side]));
53
+ return !shorthandBorders.every(border => border === shorthandBorders[0]);
54
+ };
55
+ export const getSplitBorders = border => {
56
+ if (!border || isEmptyBorder(border)) {
57
+ return undefined;
58
+ }
59
+
60
+ return {
61
+ top: border,
62
+ right: border,
63
+ bottom: border,
64
+ left: border
65
+ };
66
+ };
67
+ export const getBorderDiff = (original, updated) => {
68
+ const diff = {};
69
+
70
+ if (original.color !== updated.color) {
71
+ diff.color = updated.color;
72
+ }
73
+
74
+ if (original.style !== updated.style) {
75
+ diff.style = updated.style;
76
+ }
77
+
78
+ if (original.width !== updated.width) {
79
+ diff.width = updated.width;
80
+ }
81
+
82
+ return diff;
83
+ };
84
+ export const getCommonBorder = borders => {
85
+ if (!borders) {
86
+ return undefined;
87
+ }
88
+
89
+ const colors = [];
90
+ const styles = [];
91
+ const widths = [];
92
+ sides.forEach(side => {
93
+ var _borders$side, _borders$side2, _borders$side3;
94
+
95
+ colors.push((_borders$side = borders[side]) === null || _borders$side === void 0 ? void 0 : _borders$side.color);
96
+ styles.push((_borders$side2 = borders[side]) === null || _borders$side2 === void 0 ? void 0 : _borders$side2.style);
97
+ widths.push((_borders$side3 = borders[side]) === null || _borders$side3 === void 0 ? void 0 : _borders$side3.width);
98
+ });
99
+ const allColorsMatch = colors.every(value => value === colors[0]);
100
+ const allStylesMatch = styles.every(value => value === styles[0]);
101
+ const allWidthsMatch = widths.every(value => value === widths[0]);
102
+ return {
103
+ color: allColorsMatch ? colors[0] : undefined,
104
+ style: allStylesMatch ? styles[0] : undefined,
105
+ width: allWidthsMatch ? widths[0] : undefined
106
+ };
107
+ };
108
+ export const getShorthandBorderStyle = (border, fallbackBorder) => {
109
+ if (isEmptyBorder(border)) {
110
+ return fallbackBorder;
111
+ }
112
+
113
+ const {
114
+ color: fallbackColor,
115
+ style: fallbackStyle,
116
+ width: fallbackWidth
117
+ } = fallbackBorder || {};
118
+ const {
119
+ color = fallbackColor,
120
+ style = fallbackStyle,
121
+ width = fallbackWidth
122
+ } = border;
123
+ const hasVisibleBorder = !!width && width !== '0' || !!color;
124
+ const borderStyle = hasVisibleBorder ? style || 'solid' : style;
125
+ return [width, borderStyle, color].filter(Boolean).join(' ');
126
+ };
127
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/border-box-control/utils.ts"],"names":["sides","borderProps","isEmptyBorder","border","some","prop","undefined","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : undefined,\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst { color: fallbackColor, style: fallbackStyle, width: fallbackWidth } =\n\t\tfallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n"]}
@@ -0,0 +1,100 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import { createElement } from "@wordpress/element";
3
+
4
+ /**
5
+ * Internal dependencies
6
+ */
7
+ import BorderControlDropdown from '../border-control-dropdown';
8
+ import UnitControl from '../../unit-control';
9
+ import RangeControl from '../../range-control';
10
+ import { HStack } from '../../h-stack';
11
+ import { StyledLabel } from '../../base-control/styles/base-control-styles';
12
+ import { View } from '../../view';
13
+ import { VisuallyHidden } from '../../visually-hidden';
14
+ import { contextConnect } from '../../ui/context';
15
+ import { useBorderControl } from './hook';
16
+
17
+ const BorderLabel = props => {
18
+ const {
19
+ label,
20
+ hideLabelFromVision
21
+ } = props;
22
+
23
+ if (!label) {
24
+ return null;
25
+ }
26
+
27
+ return hideLabelFromVision ? createElement(VisuallyHidden, {
28
+ as: "label"
29
+ }, label) : createElement(StyledLabel, null, label);
30
+ };
31
+
32
+ const BorderControl = (props, forwardedRef) => {
33
+ const {
34
+ colors,
35
+ disableCustomColors,
36
+ enableAlpha,
37
+ enableStyle = true,
38
+ hideLabelFromVision,
39
+ innerWrapperClassName,
40
+ label,
41
+ onBorderChange,
42
+ onSliderChange,
43
+ onWidthChange,
44
+ placeholder,
45
+ popoverContentClassName,
46
+ previousStyleSelection,
47
+ showDropdownHeader,
48
+ sliderClassName,
49
+ value: border,
50
+ widthControlClassName,
51
+ widthUnit,
52
+ widthValue,
53
+ withSlider,
54
+ __experimentalHasMultipleOrigins,
55
+ __experimentalIsRenderedInSidebar,
56
+ ...otherProps
57
+ } = useBorderControl(props);
58
+ return createElement(View, _extends({}, otherProps, {
59
+ ref: forwardedRef
60
+ }), createElement(BorderLabel, {
61
+ label: label,
62
+ hideLabelFromVision: hideLabelFromVision
63
+ }), createElement(HStack, {
64
+ spacing: 3
65
+ }, createElement(HStack, {
66
+ className: innerWrapperClassName,
67
+ alignment: "stretch"
68
+ }, createElement(BorderControlDropdown, {
69
+ border: border,
70
+ colors: colors,
71
+ contentClassName: popoverContentClassName,
72
+ disableCustomColors: disableCustomColors,
73
+ enableAlpha: enableAlpha,
74
+ enableStyle: enableStyle,
75
+ onChange: onBorderChange,
76
+ previousStyleSelection: previousStyleSelection,
77
+ showDropdownHeader: showDropdownHeader,
78
+ __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
79
+ __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
80
+ }), createElement(UnitControl, {
81
+ className: widthControlClassName,
82
+ min: 0,
83
+ onChange: onWidthChange,
84
+ value: (border === null || border === void 0 ? void 0 : border.width) || '',
85
+ placeholder: placeholder
86
+ })), withSlider && createElement(RangeControl, {
87
+ className: sliderClassName,
88
+ initialPosition: 0,
89
+ max: 100,
90
+ min: 0,
91
+ onChange: onSliderChange,
92
+ step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
93
+ value: widthValue || undefined,
94
+ withInputField: false
95
+ })));
96
+ };
97
+
98
+ const ConnectedBorderControl = contextConnect(BorderControl, 'BorderControl');
99
+ export default ConnectedBorderControl;
100
+ //# sourceMappingURL=component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","BorderControl","forwardedRef","colors","disableCustomColors","enableAlpha","enableStyle","innerWrapperClassName","onBorderChange","onSliderChange","onWidthChange","placeholder","popoverContentClassName","previousStyleSelection","showDropdownHeader","sliderClassName","value","border","widthControlClassName","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","width","includes","undefined","ConnectedBorderControl"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,qBAAP,MAAkC,4BAAlC;AACA,OAAOC,WAAP,MAAwB,oBAAxB;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,SAASC,MAAT,QAAuB,eAAvB;AACA,SAASC,WAAT,QAA4B,+CAA5B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAA+B,uBAA/B;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,gBAAT,QAAiC,QAAjC;;AAIA,MAAMC,WAAW,GAAKC,KAAF,IAAyB;AAC5C,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAiCF,KAAvC;;AAEA,MAAK,CAAEC,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,SAAOC,mBAAmB,GACzB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BD,KAA7B,CADyB,GAGzB,cAAC,WAAD,QAAeA,KAAf,CAHD;AAKA,CAZD;;AAcA,MAAME,aAAa,GAAG,CACrBH,KADqB,EAErBI,YAFqB,KAGjB;AACJ,QAAM;AACLC,IAAAA,MADK;AAELC,IAAAA,mBAFK;AAGLC,IAAAA,WAHK;AAILC,IAAAA,WAAW,GAAG,IAJT;AAKLN,IAAAA,mBALK;AAMLO,IAAAA,qBANK;AAOLR,IAAAA,KAPK;AAQLS,IAAAA,cARK;AASLC,IAAAA,cATK;AAULC,IAAAA,aAVK;AAWLC,IAAAA,WAXK;AAYLC,IAAAA,uBAZK;AAaLC,IAAAA,sBAbK;AAcLC,IAAAA,kBAdK;AAeLC,IAAAA,eAfK;AAgBLC,IAAAA,KAAK,EAAEC,MAhBF;AAiBLC,IAAAA,qBAjBK;AAkBLC,IAAAA,SAlBK;AAmBLC,IAAAA,UAnBK;AAoBLC,IAAAA,UApBK;AAqBLC,IAAAA,gCArBK;AAsBLC,IAAAA,iCAtBK;AAuBL,OAAGC;AAvBE,MAwBF5B,gBAAgB,CAAEE,KAAF,CAxBpB;AA0BA,SACC,cAAC,IAAD,eAAW0B,UAAX;AAAwB,IAAA,GAAG,EAAGtB;AAA9B,MACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGH,KADT;AAEC,IAAA,mBAAmB,EAAGC;AAFvB,IADD,EAKC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,MAAD;AAAQ,IAAA,SAAS,EAAGO,qBAApB;AAA4C,IAAA,SAAS,EAAC;AAAtD,KACC,cAAC,qBAAD;AACC,IAAA,MAAM,EAAGU,MADV;AAEC,IAAA,MAAM,EAAGd,MAFV;AAGC,IAAA,gBAAgB,EAAGS,uBAHpB;AAIC,IAAA,mBAAmB,EAAGR,mBAJvB;AAKC,IAAA,WAAW,EAAGC,WALf;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAGE,cAPZ;AAQC,IAAA,sBAAsB,EAAGK,sBAR1B;AASC,IAAA,kBAAkB,EAAGC,kBATtB;AAUC,IAAA,gCAAgC,EAC/BQ,gCAXF;AAaC,IAAA,iCAAiC,EAChCC;AAdF,IADD,EAkBC,cAAC,WAAD;AACC,IAAA,SAAS,EAAGL,qBADb;AAEC,IAAA,GAAG,EAAG,CAFP;AAGC,IAAA,QAAQ,EAAGR,aAHZ;AAIC,IAAA,KAAK,EAAG,CAAAO,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEQ,KAAR,KAAiB,EAJ1B;AAKC,IAAA,WAAW,EAAGd;AALf,IAlBD,CADD,EA2BGU,UAAU,IACX,cAAC,YAAD;AACC,IAAA,SAAS,EAAGN,eADb;AAEC,IAAA,eAAe,EAAG,CAFnB;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGN,cALZ;AAMC,IAAA,IAAI,EAAG,CAAE,IAAF,EAAQ,GAAR,EAAciB,QAAd,CAAwBP,SAAxB,IAAsC,CAAtC,GAA0C,GANlD;AAOC,IAAA,KAAK,EAAGC,UAAU,IAAIO,SAPvB;AAQC,IAAA,cAAc,EAAG;AARlB,IA5BF,CALD,CADD;AAgDA,CA9ED;;AAgFA,MAAMC,sBAAsB,GAAGjC,cAAc,CAAEM,aAAF,EAAiB,eAAjB,CAA7C;AAEA,eAAe2B,sBAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\tpopoverContentClassName,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 3 }>\n\t\t\t\t<HStack className={ innerWrapperClassName } alignment=\"stretch\">\n\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tcontentClassName={ popoverContentClassName }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tclassName={ widthControlClassName }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControl = contextConnect( BorderControl, 'BorderControl' );\n\nexport default ConnectedBorderControl;\n"]}
@@ -0,0 +1,115 @@
1
+ /**
2
+ * WordPress dependencies
3
+ */
4
+ import { useCallback, useMemo, useState } from '@wordpress/element';
5
+ /**
6
+ * Internal dependencies
7
+ */
8
+
9
+ import * as styles from '../styles';
10
+ import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
11
+ import { useContextSystem } from '../../ui/context';
12
+ import { useCx } from '../../utils/hooks/use-cx';
13
+
14
+ const sanitizeBorder = border => {
15
+ const hasNoWidth = (border === null || border === void 0 ? void 0 : border.width) === undefined || border.width === '';
16
+ const hasNoColor = (border === null || border === void 0 ? void 0 : border.color) === undefined; // If width and color are undefined, unset any style selection as well.
17
+
18
+ if (hasNoWidth && hasNoColor) {
19
+ return undefined;
20
+ }
21
+
22
+ return border;
23
+ };
24
+
25
+ export function useBorderControl(props) {
26
+ const {
27
+ className,
28
+ isCompact,
29
+ onChange,
30
+ shouldSanitizeBorder = true,
31
+ value: border,
32
+ width,
33
+ ...otherProps
34
+ } = useContextSystem(props, 'BorderControl');
35
+ const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border === null || border === void 0 ? void 0 : border.width);
36
+ const widthUnit = originalWidthUnit || 'px';
37
+ const hadPreviousZeroWidth = widthValue === 0;
38
+ const [colorSelection, setColorSelection] = useState();
39
+ const [styleSelection, setStyleSelection] = useState();
40
+ const onBorderChange = useCallback(newBorder => {
41
+ if (shouldSanitizeBorder) {
42
+ return onChange(sanitizeBorder(newBorder));
43
+ }
44
+
45
+ onChange(newBorder);
46
+ }, [onChange, shouldSanitizeBorder, sanitizeBorder]);
47
+ const onWidthChange = useCallback(newWidth => {
48
+ const newWidthValue = newWidth === '' ? undefined : newWidth;
49
+ const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);
50
+ const hasZeroWidth = parsedValue === 0;
51
+ const updatedBorder = { ...border,
52
+ width: newWidthValue
53
+ }; // Setting the border width explicitly to zero will also set the
54
+ // border style to `none` and clear the border color.
55
+
56
+ if (hasZeroWidth && !hadPreviousZeroWidth) {
57
+ // Before clearing the color and style selections, keep track of
58
+ // the current selections so they can be restored when the width
59
+ // changes to a non-zero value.
60
+ setColorSelection(border === null || border === void 0 ? void 0 : border.color);
61
+ setStyleSelection(border === null || border === void 0 ? void 0 : border.style); // Clear the color and style border properties.
62
+
63
+ updatedBorder.color = undefined;
64
+ updatedBorder.style = 'none';
65
+ } // Selection has changed from zero border width to non-zero width.
66
+
67
+
68
+ if (!hasZeroWidth && hadPreviousZeroWidth) {
69
+ // Restore previous border color and style selections if width
70
+ // is now not zero.
71
+ if (updatedBorder.color === undefined) {
72
+ updatedBorder.color = colorSelection;
73
+ }
74
+
75
+ if (updatedBorder.style === 'none') {
76
+ updatedBorder.style = styleSelection;
77
+ }
78
+ }
79
+
80
+ onBorderChange(updatedBorder);
81
+ }, [border, hadPreviousZeroWidth, onBorderChange]);
82
+ const onSliderChange = useCallback(value => {
83
+ onWidthChange(`${value}${widthUnit}`);
84
+ }, [onWidthChange, widthUnit]); // Generate class names.
85
+
86
+ const cx = useCx();
87
+ const classes = useMemo(() => {
88
+ return cx(styles.borderControl, className);
89
+ }, [className, cx]);
90
+ const innerWrapperClassName = useMemo(() => {
91
+ const wrapperWidth = isCompact ? '90px' : width;
92
+ const widthStyle = !!wrapperWidth && styles.wrapperWidth(wrapperWidth);
93
+ return cx(styles.innerWrapper(), widthStyle);
94
+ }, [isCompact, width, cx]);
95
+ const widthControlClassName = useMemo(() => {
96
+ return cx(styles.borderWidthControl());
97
+ }, [cx]);
98
+ const sliderClassName = useMemo(() => {
99
+ return cx(styles.borderSlider());
100
+ }, [cx]);
101
+ return { ...otherProps,
102
+ className: classes,
103
+ innerWrapperClassName,
104
+ onBorderChange,
105
+ onSliderChange,
106
+ onWidthChange,
107
+ previousStyleSelection: styleSelection,
108
+ sliderClassName,
109
+ value: border,
110
+ widthControlClassName,
111
+ widthUnit,
112
+ widthValue
113
+ };
114
+ }
115
+ //# sourceMappingURL=hook.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder, sanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\tnewWidth\n\t\t\t);\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[ border, hadPreviousZeroWidth, onBorderChange ]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value: string ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle );\n\t}, [ isCompact, width, cx ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t};\n}\n"]}
@@ -0,0 +1,3 @@
1
+ export { default as BorderControl } from './component';
2
+ export { useBorderControl } from './hook';
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/border-control/border-control/index.ts"],"names":["default","BorderControl","useBorderControl"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,aAAzC;AACA,SAASC,gBAAT,QAAiC,QAAjC","sourcesContent":["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';\n"]}