@eightshift/ui-components 5.1.0 → 5.1.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.
@@ -1207,10 +1207,6 @@
1207
1207
  max-height: calc(var(--es-spacing) * 40);
1208
1208
  }
1209
1209
 
1210
- :is(body, body #wpwrap) .es\:max-h-72 {
1211
- max-height: calc(var(--es-spacing) * 72);
1212
- }
1213
-
1214
1210
  :is(body, body #wpwrap) .es\:min-h-5 {
1215
1211
  min-height: calc(var(--es-spacing) * 5);
1216
1212
  }
@@ -1207,10 +1207,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
1207
1207
  max-height: calc(var(--es-spacing) * 40);
1208
1208
  }
1209
1209
 
1210
- :is(body, #wpwrap #editor) .es\:max-h-72 {
1211
- max-height: calc(var(--es-spacing) * 72);
1212
- }
1213
-
1214
1210
  :is(body, #wpwrap #editor) .es\:min-h-5 {
1215
1211
  min-height: calc(var(--es-spacing) * 5);
1216
1212
  }
@@ -1692,10 +1692,6 @@
1692
1692
  max-height: calc(var(--es-spacing) * 40);
1693
1693
  }
1694
1694
 
1695
- .es\:max-h-72 {
1696
- max-height: calc(var(--es-spacing) * 72);
1697
- }
1698
-
1699
1695
  .es\:min-h-5 {
1700
1696
  min-height: calc(var(--es-spacing) * 5);
1701
1697
  }
@@ -74,7 +74,7 @@ const BaseControl = (props) => {
74
74
  help && /* @__PURE__ */ jsx(
75
75
  $514c0188e459b4c0$export$5f1af8db9871e1d6,
76
76
  {
77
- className: "es:inline-block es:text-sm es:text-secondary-500",
77
+ className: "es:inline-block es:text-sm es:text-secondary-500 es:mt-0.5",
78
78
  slot: "description",
79
79
  children: help
80
80
  }
@@ -100,6 +100,7 @@ const InputField = (props) => {
100
100
  "es:focus-visible:border-accent-500",
101
101
  "es:inset-ring es:inset-ring-secondary-100",
102
102
  "es:disabled:shadow-none! es:readonly:shadow-xs! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
103
+ monospaceFont && "es:font-mono",
103
104
  className
104
105
  )
105
106
  }
@@ -19,6 +19,7 @@ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
19
19
  * @param {boolean} [props.keepOpen=false] - If `true`, the menu will not close when an item is selected.
20
20
  * @param {boolean} [props.openOnLongPress=false] - If `true`, the menu will open on long press instead of click. If enabled, a regular `onPress` event can also be passed to the trigger button to enable dual behavior.
21
21
  * @param {Object} [props.popoverProps] - Props to pass to the popover.
22
+ * @param {boolean} [props.disabled] - If `true`, the trigger button is disabled.
22
23
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
23
24
  *
24
25
  * @returns {JSX.Element} The Menu component.
@@ -70,6 +71,7 @@ const Menu = (props) => {
70
71
  keepOpen = false,
71
72
  "aria-label": ariaLabel = triggerLabel ?? __("Menu", "eightshift-ui-components"),
72
73
  openOnLongPress = false,
74
+ disabled,
73
75
  hidden
74
76
  } = props;
75
77
  if (hidden) {
@@ -101,6 +103,7 @@ const Menu = (props) => {
101
103
  {
102
104
  icon: triggerIcon,
103
105
  tooltip,
106
+ disabled,
104
107
  ...triggerProps,
105
108
  children: triggerLabel
106
109
  }
@@ -192,6 +192,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
192
192
  * @param {boolean} [props.open] - **Controlled mode ** - whether the modal is open.
193
193
  * @param {boolean} [props.defaultOpen] - **Uncontrolled mode ** - whether the modal is initially open.
194
194
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the modal footer, typically buttons.
195
+ * @param {JSX.Element|JSX.Element[]} [props.headerActions] - Actions to display in the modal header, next to the close button (if enabled).
195
196
  * @param {string|JSX.Element} [props.triggerLabel] - Label for the trigger button.
196
197
  * @param {JSX.Element} [props.triggerIcon] - Trigger button icon.
197
198
  * @param {Object} [props.triggerProps] - Props to pass to the trigger button.
@@ -244,6 +245,7 @@ const ModalInternal = (props) => {
244
245
  onOpenChange,
245
246
  title,
246
247
  actions,
248
+ headerActions,
247
249
  noCloseButton,
248
250
  noClickToDismiss,
249
251
  noKeyboardDismiss,
@@ -286,34 +288,31 @@ const ModalInternal = (props) => {
286
288
  className: "es:relative es:text-sm es:outline-hidden",
287
289
  "aria-label": ariaLabel,
288
290
  children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
289
- /* @__PURE__ */ jsxs(
290
- HStack,
291
- {
292
- className: clsx(!title && "es:relative", title && "es:px-5 es:py-3 es:justify-between es:bg-secondary-50 es:border-b es:border-secondary-200", headerClassName),
293
- children: [
294
- title && /* @__PURE__ */ jsx(
295
- $5cb03073d3f54797$export$a8a3e93435678ff9,
296
- {
297
- className: "es:text-balance es:text-base! es:my-0! es:font-medium!",
298
- slot: "title",
299
- children: title
300
- }
301
- ),
302
- !noCloseButton && /* @__PURE__ */ jsx(
303
- Button,
304
- {
305
- className: !title && "es:absolute es:top-4 es:right-4 es:bg-white/60 es:backdrop-blur-lg",
306
- onPress: close,
307
- type: "ghost",
308
- size: "small",
309
- icon: icons.clear,
310
- "aria-label": __("Close", "eightshift-frontend-libs"),
311
- tooltip: true
312
- }
313
- )
314
- ]
315
- }
316
- ),
291
+ /* @__PURE__ */ jsxs(HStack, { className: clsx(title && "es:px-5 es:py-3 es:justify-between es:bg-secondary-50 es:border-b es:border-secondary-200", headerClassName), children: [
292
+ title && /* @__PURE__ */ jsx(
293
+ $5cb03073d3f54797$export$a8a3e93435678ff9,
294
+ {
295
+ className: "es:text-balance es:text-base! es:my-0! es:font-medium!",
296
+ slot: "title",
297
+ children: title
298
+ }
299
+ ),
300
+ (!noCloseButton || headerActions) && /* @__PURE__ */ jsxs(HStack, { className: !title && "es:absolute es:top-4 es:right-4 es:z-20", children: [
301
+ headerActions,
302
+ !noCloseButton && /* @__PURE__ */ jsx(
303
+ Button,
304
+ {
305
+ className: !title && "es:bg-white/60 es:backdrop-blur-lg",
306
+ onPress: close,
307
+ type: "ghost",
308
+ size: "small",
309
+ icon: icons.clear,
310
+ "aria-label": __("Close", "eightshift-frontend-libs"),
311
+ tooltip: true
312
+ }
313
+ )
314
+ ] })
315
+ ] }),
317
316
  children && /* @__PURE__ */ jsx("div", { className: clsx("es:p-5 es:space-y-2.5", contentContainerClassName), children }),
318
317
  actions && /* @__PURE__ */ jsx(HStack, { className: clsx("es:justify-end es:px-5 es:py-3 es:border-t es:border-secondary-100", actionsClassName), children: actions })
319
318
  ] })
@@ -240,6 +240,7 @@ const AsyncSelectNext = (props) => {
240
240
  isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]"
241
241
  ),
242
242
  placement: "bottom left",
243
+ maxHeight: 300,
243
244
  triggerRef: ref,
244
245
  children: /* @__PURE__ */ jsxs(
245
246
  $d2f53cda644affe3$export$2f2b9559550c7bbc,
@@ -281,7 +282,7 @@ const AsyncSelectNext = (props) => {
281
282
  /* @__PURE__ */ jsx(
282
283
  $eed445e0843c11d0$export$41f133550aa26f48,
283
284
  {
284
- className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:overflow-y-auto es:max-h-72", list.isLoading && "es:hidden"),
285
+ className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:min-h-16", list.isLoading && "es:hidden", list?.items?.length > 0 && "es:overflow-y-auto"),
285
286
  items: list.items,
286
287
  renderEmptyState: () => /* @__PURE__ */ jsx(
287
288
  RichLabel,
@@ -289,7 +290,7 @@ const AsyncSelectNext = (props) => {
289
290
  icon: icons.searchEmpty,
290
291
  label: __("No results", "eightshift-ui-components"),
291
292
  subtitle: __("Try a different search term", "eightshift-ui-components"),
292
- className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200",
293
+ className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
293
294
  iconClassName: "es:text-accent-700 es:icon:size-7!",
294
295
  noColor: true
295
296
  }
@@ -302,7 +303,7 @@ const AsyncSelectNext = (props) => {
302
303
  return /* @__PURE__ */ jsxs(
303
304
  OptionItemBase,
304
305
  {
305
- id: item.value,
306
+ id: item?.value,
306
307
  className: item?.className,
307
308
  children: [
308
309
  customMenuOption && customMenuOption(item),
@@ -311,7 +312,7 @@ const AsyncSelectNext = (props) => {
311
312
  {
312
313
  icon: icon2,
313
314
  label: item?.label,
314
- subtitle: item.subtitle,
315
+ subtitle: item?.subtitle,
315
316
  noColor: true
316
317
  }
317
318
  )
@@ -38,6 +38,7 @@ import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilte
38
38
  * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
39
39
  * @param {string} [props.className] - Classes to pass to the select menu.
40
40
  * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
41
+ * @param {boolean} [props.searchable] - If `true`, the menu will allow searching through the options.
41
42
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
42
43
  *
43
44
  * @returns {JSX.Element} The SelectNext component.
@@ -159,7 +160,7 @@ const SelectNext = (props) => {
159
160
  {
160
161
  icon: icon2,
161
162
  label: selectedItem?.label,
162
- subtitle: selectedItem.subtitle,
163
+ subtitle: selectedItem?.subtitle,
163
164
  className: clsx("es:pr-6 es:grow es:w-full", disabled && "es:grayscale es:pointer-events-none"),
164
165
  iconClassName: "es:pointer-events-none es:select-none"
165
166
  }
@@ -205,6 +206,7 @@ const SelectNext = (props) => {
205
206
  isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]"
206
207
  ),
207
208
  placement: "bottom left",
209
+ maxHeight: 300,
208
210
  triggerRef: ref,
209
211
  children: [
210
212
  searchable && /* @__PURE__ */ jsxs($d2f53cda644affe3$export$2f2b9559550c7bbc, { filter: contains, children: [
@@ -241,7 +243,7 @@ const SelectNext = (props) => {
241
243
  /* @__PURE__ */ jsx(
242
244
  $eed445e0843c11d0$export$41f133550aa26f48,
243
245
  {
244
- className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:max-h-72 es:overflow-y-auto",
246
+ className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:min-h-16", options?.length > 0 && "es:overflow-y-auto"),
245
247
  items: options,
246
248
  renderEmptyState: () => /* @__PURE__ */ jsx(
247
249
  RichLabel,
@@ -249,7 +251,7 @@ const SelectNext = (props) => {
249
251
  icon: icons.searchEmpty,
250
252
  label: __("No results", "eightshift-ui-components"),
251
253
  subtitle: __("Try a different search term", "eightshift-ui-components"),
252
- className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200",
254
+ className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
253
255
  iconClassName: "es:text-accent-700 es:icon:size-7!",
254
256
  noColor: true
255
257
  }
@@ -271,7 +273,7 @@ const SelectNext = (props) => {
271
273
  {
272
274
  icon: icon2,
273
275
  label: item?.label,
274
- subtitle: item.subtitle
276
+ subtitle: item?.subtitle
275
277
  }
276
278
  )
277
279
  ]
@@ -284,7 +286,7 @@ const SelectNext = (props) => {
284
286
  !searchable && /* @__PURE__ */ jsx(
285
287
  $eed445e0843c11d0$export$41f133550aa26f48,
286
288
  {
287
- className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden",
289
+ className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:overflow-y-auto",
288
290
  items: options,
289
291
  renderEmptyState: () => /* @__PURE__ */ jsx(
290
292
  RichLabel,
@@ -314,7 +316,7 @@ const SelectNext = (props) => {
314
316
  {
315
317
  icon: icon2,
316
318
  label: item?.label,
317
- subtitle: item.subtitle,
319
+ subtitle: item?.subtitle,
318
320
  noColor: true
319
321
  }
320
322
  )
@@ -1,4 +1,4 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { GenericColorSwatch } from "./generic-color-swatch.js";
3
3
  const icons = {
4
4
  width: /* @__PURE__ */ jsxs(
@@ -4770,27 +4770,25 @@ const icons = {
4770
4770
  /* @__PURE__ */ jsx(
4771
4771
  "path",
4772
4772
  {
4773
- d: "M1.174 16.71 8.675 1.835a1.469 1.469 0 0 1 2.65 0l7.5 14.875c.525 1.04-.198 2.29-1.324 2.29H2.499c-1.126 0-1.85-1.25-1.325-2.29Z",
4773
+ d: "m.684 17.082 7.918-15.7a1.55 1.55 0 0 1 2.796 0l7.918 15.7c.554 1.099-.21 2.418-1.398 2.418H2.082C.893 19.5.13 18.18.684 17.082Z",
4774
4774
  stroke: "currentColor",
4775
4775
  fill: "none"
4776
4776
  }
4777
4777
  ),
4778
4778
  /* @__PURE__ */ jsx(
4779
- "circle",
4779
+ "path",
4780
4780
  {
4781
- cx: "10",
4782
- cy: "15.25",
4783
- r: "0.75",
4781
+ d: "M11 7a.842.842 0 0 0-.236-.707A1.081 1.081 0 0 0 10 6a1.08 1.08 0 0 0-.764.293A.842.842 0 0 0 9 7l.031.275.563 4.95.031.275c.01.089.059.174.129.237a.37.37 0 0 0 .246.098.37.37 0 0 0 .246-.098.384.384 0 0 0 .129-.237l.031-.275.563-4.95L11 7Z",
4784
4782
  fill: "currentColor"
4785
4783
  }
4786
4784
  ),
4787
4785
  /* @__PURE__ */ jsx(
4788
- "path",
4786
+ "circle",
4789
4787
  {
4790
- d: "M10 12.5v-5",
4791
- stroke: "currentColor",
4792
- strokeLinecap: "round",
4793
- fill: "none"
4788
+ cx: "10",
4789
+ cy: "15.5",
4790
+ r: "1",
4791
+ fill: "currentColor"
4794
4792
  }
4795
4793
  )
4796
4794
  ]
@@ -4808,29 +4806,28 @@ const icons = {
4808
4806
  /* @__PURE__ */ jsx(
4809
4807
  "circle",
4810
4808
  {
4811
- cx: "10",
4812
- cy: "10",
4813
- r: "9",
4809
+ cx: "8.5",
4810
+ cy: "8.5",
4811
+ r: "8.5",
4812
+ transform: "matrix(1 0 0 -1 1.5 18.5)",
4814
4813
  stroke: "currentColor",
4815
4814
  fill: "none"
4816
4815
  }
4817
4816
  ),
4818
4817
  /* @__PURE__ */ jsx(
4819
- "circle",
4818
+ "path",
4820
4819
  {
4821
- cx: "10",
4822
- cy: "13.75",
4823
- r: "0.75",
4820
+ d: "M11 6a.842.842 0 0 0-.236-.707A1.081 1.081 0 0 0 10 5a1.08 1.08 0 0 0-.764.293A.842.842 0 0 0 9 6l.031.275.563 4.95.031.275c.01.089.059.174.129.237a.37.37 0 0 0 .246.098.37.37 0 0 0 .246-.098.384.384 0 0 0 .129-.237l.031-.275.563-4.95L11 6Z",
4824
4821
  fill: "currentColor"
4825
4822
  }
4826
4823
  ),
4827
4824
  /* @__PURE__ */ jsx(
4828
- "path",
4825
+ "circle",
4829
4826
  {
4830
- d: "M10 11V6",
4831
- stroke: "currentColor",
4832
- strokeLinecap: "round",
4833
- fill: "none"
4827
+ cx: "10",
4828
+ cy: "14.5",
4829
+ r: "1",
4830
+ fill: "currentColor"
4834
4831
  }
4835
4832
  )
4836
4833
  ]
@@ -4839,29 +4836,28 @@ const icons = {
4839
4836
  errorCircle: /* @__PURE__ */ jsxs(
4840
4837
  "svg",
4841
4838
  {
4842
- xmlns: "http://www.w3.org/2000/svg",
4843
- viewBox: "0 0 20 20",
4844
4839
  width: "20",
4845
4840
  height: "20",
4841
+ viewBox: "0 0 20 20",
4846
4842
  fill: "none",
4843
+ xmlns: "http://www.w3.org/2000/svg",
4847
4844
  children: [
4848
4845
  /* @__PURE__ */ jsx(
4849
4846
  "circle",
4850
4847
  {
4851
- cx: "10",
4852
- cy: "10",
4853
- r: "9",
4854
- stroke: "currentColor",
4855
- fill: "none"
4848
+ cx: "8.5",
4849
+ cy: "8.5",
4850
+ r: "8.5",
4851
+ transform: "matrix(1 0 0 -1 1.5 18.5)",
4852
+ stroke: "#0D3636"
4856
4853
  }
4857
4854
  ),
4858
4855
  /* @__PURE__ */ jsx(
4859
4856
  "path",
4860
4857
  {
4861
- d: "m13 13-3-3m0 0L7 7m3 3-3 3m3-3 3-3",
4862
- stroke: "currentColor",
4863
- strokeLinecap: "round",
4864
- fill: "none"
4858
+ d: "M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5",
4859
+ stroke: "#0D3636",
4860
+ "stroke-linecap": "round"
4865
4861
  }
4866
4862
  )
4867
4863
  ]
@@ -4878,9 +4874,7 @@ const icons = {
4878
4874
  children: /* @__PURE__ */ jsx(
4879
4875
  "path",
4880
4876
  {
4881
- clipRule: "evenodd",
4882
- fillRule: "evenodd",
4883
- d: "m.684 17.082 7.918-15.7a1.55 1.55 0 0 1 2.796 0l7.918 15.7c.554 1.099-.21 2.418-1.398 2.418H2.082C.893 19.5.13 18.18.684 17.082ZM10.75 15.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM10.5 7.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0v-5Z",
4877
+ d: "M17.573 19a1.5 1.5 0 0 0 1.342-2.17L11.342 1.683c-.553-1.106-2.13-1.106-2.683 0L1.086 16.829A1.5 1.5 0 0 0 2.428 19h15.145ZM10 12.907a.464.464 0 0 1-.303-.119.486.486 0 0 1-.166-.288l-.039-.275-.703-4.95L8.75 7c-.048-.331.042-.65.277-.884.234-.234.594-.366.973-.366.38 0 .739.132.973.366.235.235.325.553.277.884l-.04.275-.702 4.95-.04.275a.485.485 0 0 1-.165.288.464.464 0 0 1-.303.12Zm0 3.593a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z",
4884
4878
  fill: "currentColor"
4885
4879
  }
4886
4880
  )
@@ -4897,9 +4891,7 @@ const icons = {
4897
4891
  children: /* @__PURE__ */ jsx(
4898
4892
  "path",
4899
4893
  {
4900
- clipRule: "evenodd",
4901
- fillRule: "evenodd",
4902
- d: "M19.5 10a9.5 9.5 0 1 1-19 0 9.5 9.5 0 0 1 19 0Zm-8.75 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM10.5 6a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0V6Z",
4894
+ d: "M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-7.093a.464.464 0 0 1-.303-.119.485.485 0 0 1-.166-.288l-.039-.275-.703-4.95L8.75 6c-.048-.332.042-.65.277-.884.234-.234.594-.366.973-.366.38 0 .739.132.973.366.235.235.325.553.277.884l-.04.275-.702 4.95-.04.275a.486.486 0 0 1-.165.288.464.464 0 0 1-.303.12Zm0 3.593a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z",
4903
4895
  fill: "currentColor"
4904
4896
  }
4905
4897
  )
@@ -4916,9 +4908,7 @@ const icons = {
4916
4908
  children: /* @__PURE__ */ jsx(
4917
4909
  "path",
4918
4910
  {
4919
- clipRule: "evenodd",
4920
- fillRule: "evenodd",
4921
- d: "M10 19.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM7.354 6.646a.5.5 0 1 0-.708.708L9.293 10l-2.647 2.646a.5.5 0 0 0 .708.708L10 10.707l2.646 2.647a.5.5 0 0 0 .708-.708L10.707 10l2.647-2.646a.5.5 0 0 0-.708-.708L10 9.293 7.354 6.646Z",
4911
+ d: "M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-3.111-5.111a.55.55 0 1 1-.778-.778L9.223 10 6.11 6.889a.55.55 0 1 1 .778-.778L10 9.223l3.111-3.112a.55.55 0 1 1 .778.778L10.777 10l3.112 3.111.07.086a.55.55 0 0 1-.762.762l-.086-.07L10 10.777 6.889 13.89Z",
4922
4912
  fill: "currentColor"
4923
4913
  }
4924
4914
  )
@@ -4936,28 +4926,19 @@ const icons = {
4936
4926
  /* @__PURE__ */ jsx(
4937
4927
  "circle",
4938
4928
  {
4939
- r: "9",
4940
- transform: "matrix(1 0 0 -1 10 10)",
4929
+ cx: "8.5",
4930
+ cy: "8.5",
4931
+ r: "8.5",
4932
+ transform: "matrix(1 0 0 -1 1.5 18.5)",
4941
4933
  stroke: "currentColor",
4942
4934
  fill: "none"
4943
4935
  }
4944
4936
  ),
4945
- /* @__PURE__ */ jsx(
4946
- "circle",
4947
- {
4948
- r: "0.75",
4949
- transform: "matrix(1 0 0 -1 10 6.25)",
4950
- fill: "currentColor"
4951
- }
4952
- ),
4953
4937
  /* @__PURE__ */ jsx(
4954
4938
  "path",
4955
4939
  {
4956
- d: "M11 14c-.91 1.149-1.5.5-1.343-1.445l.356-3.622L9 9.5",
4957
- stroke: "currentColor",
4958
- strokeLinecap: "round",
4959
- strokeLinejoin: "round",
4960
- fill: "none"
4940
+ fill: "currentColor",
4941
+ d: "M9 5h2v2H9zm2 4v5h1v1H8v-1h1v-4H8V9h3Z"
4961
4942
  }
4962
4943
  )
4963
4944
  ]
@@ -5216,22 +5197,23 @@ const icons = {
5216
5197
  fill: "none",
5217
5198
  children: [
5218
5199
  /* @__PURE__ */ jsx(
5219
- "path",
5200
+ "circle",
5220
5201
  {
5221
- d: "M6 10.792 8.667 13.5 14 7",
5202
+ cx: "8.5",
5203
+ cy: "8.5",
5204
+ r: "8.5",
5205
+ transform: "matrix(1 0 0 -1 1.5 18.5)",
5222
5206
  stroke: "currentColor",
5223
- strokeLinecap: "round",
5224
- strokeLinejoin: "round",
5225
5207
  fill: "none"
5226
5208
  }
5227
5209
  ),
5228
5210
  /* @__PURE__ */ jsx(
5229
- "circle",
5211
+ "path",
5230
5212
  {
5231
- cx: "10",
5232
- cy: "10",
5233
- r: "9",
5213
+ d: "m6 11 3 3 5-7",
5234
5214
  stroke: "currentColor",
5215
+ strokeLinecap: "round",
5216
+ strokeLinejoin: "round",
5235
5217
  fill: "none"
5236
5218
  }
5237
5219
  )
@@ -5249,7 +5231,7 @@ const icons = {
5249
5231
  children: /* @__PURE__ */ jsx(
5250
5232
  "path",
5251
5233
  {
5252
- d: "M1 11.167 7 17 19 3",
5234
+ d: "m4 11 4.5 4.5L16 5",
5253
5235
  stroke: "currentColor",
5254
5236
  strokeLinecap: "round",
5255
5237
  strokeLinejoin: "round",
@@ -7250,7 +7232,7 @@ const icons = {
7250
7232
  children: /* @__PURE__ */ jsx(
7251
7233
  "path",
7252
7234
  {
7253
- d: "M5.225 6.625 1.489 9.609a.5.5 0 0 0 0 .782l3.736 2.984m9.55-6.75 3.736 2.984a.5.5 0 0 1 0 .782l-3.736 2.984M11.087 5.5l-2.817 9",
7235
+ d: "m5.5 6.5-4 4 4 4m9-8 4 4-4 4m-6 2 3-12",
7254
7236
  stroke: "currentColor",
7255
7237
  strokeLinecap: "round",
7256
7238
  strokeLinejoin: "round",
@@ -8625,9 +8607,10 @@ const icons = {
8625
8607
  /* @__PURE__ */ jsx(
8626
8608
  "circle",
8627
8609
  {
8628
- cx: "10",
8629
- cy: "10",
8630
- r: "9",
8610
+ cx: "8.5",
8611
+ cy: "8.5",
8612
+ r: "8.5",
8613
+ transform: "matrix(1 0 0 -1 1.5 18.5)",
8631
8614
  stroke: "currentColor",
8632
8615
  fill: "none"
8633
8616
  }
@@ -8635,7 +8618,7 @@ const icons = {
8635
8618
  /* @__PURE__ */ jsx(
8636
8619
  "path",
8637
8620
  {
8638
- d: "M10 14.25V10m0 0V5.75M10 10H5.75M10 10h4.25",
8621
+ d: "M6 10h4m0 0h4m-4 0V6m0 4v4",
8639
8622
  stroke: "currentColor",
8640
8623
  strokeLinecap: "round",
8641
8624
  fill: "none"
@@ -8647,18 +8630,16 @@ const icons = {
8647
8630
  plusCircleFill: /* @__PURE__ */ jsx(
8648
8631
  "svg",
8649
8632
  {
8650
- xmlns: "http://www.w3.org/2000/svg",
8651
- viewBox: "0 0 20 20",
8652
8633
  width: "20",
8653
8634
  height: "20",
8635
+ viewBox: "0 0 20 20",
8654
8636
  fill: "none",
8637
+ xmlns: "http://www.w3.org/2000/svg",
8655
8638
  children: /* @__PURE__ */ jsx(
8656
8639
  "path",
8657
8640
  {
8658
- clipRule: "evenodd",
8659
- fillRule: "evenodd",
8660
- d: "M10 19.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19Zm.5-13.75a.5.5 0 1 0-1 0V9.5H5.75a.5.5 0 1 0 0 1H9.5v3.75a.5.5 0 0 0 1 0V10.5h3.75a.5.5 0 0 0 0-1H10.5V5.75Z",
8661
- fill: "currentColor"
8641
+ d: "M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19ZM10 14.75C9.58579 14.75 9.25 14.4142 9.25 14V10.75H6C5.58579 10.75 5.25 10.4142 5.25 10C5.25 9.58579 5.58579 9.25 6 9.25H9.25V6C9.25 5.58579 9.58579 5.25 10 5.25C10.4142 5.25 10.75 5.58579 10.75 6V9.25H14C14.4142 9.25 14.75 9.58579 14.75 10C14.75 10.4142 14.4142 10.75 14 10.75H10.75V14C10.75 14.4142 10.4142 14.75 10 14.75Z",
8642
+ fill: "#0D3636"
8662
8643
  }
8663
8644
  )
8664
8645
  }
@@ -9171,9 +9152,7 @@ const icons = {
9171
9152
  children: /* @__PURE__ */ jsx(
9172
9153
  "path",
9173
9154
  {
9174
- clipRule: "evenodd",
9175
- fillRule: "evenodd",
9176
- d: "M19.5 10a9.5 9.5 0 1 0-19 0 9.5 9.5 0 0 0 19 0Zm-8.75-3.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm-.24 2.732-.354 3.618c-.038.46-.028.823.011 1.089.027.178.064.287.092.347a1.56 1.56 0 0 0 .35-.347.5.5 0 1 1 .783.622c-.247.311-.522.569-.826.687a.935.935 0 0 1-.535.052.887.887 0 0 1-.47-.273c-.223-.242-.33-.59-.383-.94a5.916 5.916 0 0 1-.019-1.322v-.009l.263-2.67-.177.1a.5.5 0 1 1-.49-.872l1.014-.568a.5.5 0 0 1 .742.486Z",
9155
+ d: "M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18ZM8 9v1h1v4H8v1h4v-1h-1V9H8Zm1-4v2h2V5H9Z",
9177
9156
  fill: "currentColor"
9178
9157
  }
9179
9158
  )
@@ -11462,9 +11441,7 @@ const icons = {
11462
11441
  children: /* @__PURE__ */ jsx(
11463
11442
  "path",
11464
11443
  {
11465
- clipRule: "evenodd",
11466
- fillRule: "evenodd",
11467
- d: "M10 19.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19Zm4.386-12.183a.5.5 0 0 0-.772-.634l-4.981 6.07-2.277-2.312a.5.5 0 1 0-.712.701l2.666 2.709a.5.5 0 0 0 .743-.034l5.333-6.5Z",
11444
+ d: "M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-.955-4.452a.55.55 0 0 1-.434-.16l-3-3a.55.55 0 0 1 .692-.847l.086.07 2.54 2.541 4.624-6.471a.55.55 0 1 1 .894.638l-5 7a.55.55 0 0 1-.402.229Z",
11468
11445
  fill: "currentColor"
11469
11446
  }
11470
11447
  )
@@ -17145,21 +17122,19 @@ const icons = {
17145
17122
  fill: "none",
17146
17123
  children: [
17147
17124
  /* @__PURE__ */ jsx(
17148
- "circle",
17125
+ "path",
17149
17126
  {
17150
- cx: "10",
17151
- cy: "10",
17152
- r: "10",
17127
+ d: "M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z",
17153
17128
  fill: "currentColor",
17154
- fillOpacity: "0.12"
17129
+ fillOpacity: "0.25"
17155
17130
  }
17156
17131
  ),
17157
17132
  /* @__PURE__ */ jsx(
17158
17133
  "path",
17159
17134
  {
17135
+ d: "M6 10h4m0 0h4m-4 0V6m0 4v4",
17160
17136
  stroke: "currentColor",
17161
17137
  strokeLinecap: "round",
17162
- d: "M10 5.5v9M5.5 10h9",
17163
17138
  fill: "none"
17164
17139
  }
17165
17140
  )
@@ -19076,36 +19051,34 @@ const icons = {
19076
19051
  warningFillTransparent: /* @__PURE__ */ jsxs(
19077
19052
  "svg",
19078
19053
  {
19079
- xmlns: "http://www.w3.org/2000/svg",
19080
- viewBox: "0 0 20 20",
19081
19054
  width: "20",
19082
19055
  height: "20",
19056
+ viewBox: "0 0 20 20",
19083
19057
  fill: "none",
19058
+ xmlns: "http://www.w3.org/2000/svg",
19084
19059
  children: [
19085
19060
  /* @__PURE__ */ jsx(
19086
19061
  "path",
19087
19062
  {
19088
- d: "m.351 17.573 8.31-16.427c.556-1.097 2.122-1.097 2.678 0l8.31 16.427a1.5 1.5 0 0 1-1.339 2.177H1.69a1.5 1.5 0 0 1-1.34-2.177Z",
19089
- fill: "currentColor",
19090
- fillOpacity: "0.3"
19063
+ opacity: "0.25",
19064
+ d: "M8.65836 1.68328L1.08541 16.8292C0.586734 17.8265 1.31198 19 2.42705 19H17.573C18.688 19 19.4133 17.8265 18.9146 16.8292L11.3416 1.68328C10.7889 0.577709 9.21114 0.577712 8.65836 1.68328Z",
19065
+ fill: "#0D3636"
19091
19066
  }
19092
19067
  ),
19093
19068
  /* @__PURE__ */ jsx(
19094
19069
  "path",
19095
19070
  {
19096
- d: "M10 7.25v5",
19097
- stroke: "currentColor",
19098
- strokeLinecap: "round",
19099
- fill: "none"
19071
+ d: "M11 7C11.0306 6.73478 10.952 6.48043 10.7639 6.29289C10.5769 6.10536 10.2958 6 10 6C9.70423 6 9.4231 6.10536 9.23608 6.29289C9.04803 6.48043 8.96944 6.73478 9 7C9.01042 7.09167 9.02083 7.18333 9.03125 7.275C9.21875 8.925 9.40625 10.575 9.59375 12.225C9.60417 12.3167 9.61458 12.4083 9.625 12.5C9.63523 12.5888 9.6837 12.674 9.75386 12.7367C9.82435 12.7995 9.91077 12.8348 10 12.8348C10.0892 12.8348 10.1756 12.7995 10.2461 12.7367C10.3163 12.674 10.3648 12.5888 10.375 12.5C10.3854 12.4083 10.3958 12.3167 10.4062 12.225C10.5937 10.575 10.7812 8.925 10.9687 7.275C10.9792 7.18333 10.9896 7.09167 11 7Z",
19072
+ fill: "#0D3636"
19100
19073
  }
19101
19074
  ),
19102
19075
  /* @__PURE__ */ jsx(
19103
19076
  "circle",
19104
19077
  {
19105
19078
  cx: "10",
19106
- cy: "14.75",
19107
- r: "0.75",
19108
- fill: "currentColor"
19079
+ cy: "15.5",
19080
+ r: "1",
19081
+ fill: "#0D3636"
19109
19082
  }
19110
19083
  )
19111
19084
  ]
@@ -19121,30 +19094,26 @@ const icons = {
19121
19094
  fill: "none",
19122
19095
  children: [
19123
19096
  /* @__PURE__ */ jsx(
19124
- "circle",
19097
+ "path",
19125
19098
  {
19126
- cx: "10",
19127
- cy: "10",
19128
- r: "10",
19099
+ d: "M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z",
19129
19100
  fill: "currentColor",
19130
- fillOpacity: "0.3"
19101
+ fillOpacity: "0.25"
19131
19102
  }
19132
19103
  ),
19133
19104
  /* @__PURE__ */ jsx(
19134
19105
  "path",
19135
19106
  {
19136
- d: "M10 6.25v5",
19137
- stroke: "currentColor",
19138
- strokeLinecap: "round",
19139
- fill: "none"
19107
+ d: "M11 6a.842.842 0 0 0-.236-.707A1.081 1.081 0 0 0 10 5a1.08 1.08 0 0 0-.764.293A.842.842 0 0 0 9 6l.031.275.563 4.95.031.275c.01.089.059.174.129.237a.37.37 0 0 0 .246.098.37.37 0 0 0 .246-.098.384.384 0 0 0 .129-.237l.031-.275.563-4.95L11 6Z",
19108
+ fill: "currentColor"
19140
19109
  }
19141
19110
  ),
19142
19111
  /* @__PURE__ */ jsx(
19143
19112
  "circle",
19144
19113
  {
19145
19114
  cx: "10",
19146
- cy: "13.75",
19147
- r: "0.75",
19115
+ cy: "14.5",
19116
+ r: "1",
19148
19117
  fill: "currentColor"
19149
19118
  }
19150
19119
  )
@@ -19161,21 +19130,19 @@ const icons = {
19161
19130
  fill: "none",
19162
19131
  children: [
19163
19132
  /* @__PURE__ */ jsx(
19164
- "circle",
19133
+ "path",
19165
19134
  {
19166
- cx: "10",
19167
- cy: "10",
19168
- r: "10",
19135
+ d: "M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z",
19169
19136
  fill: "currentColor",
19170
- fillOpacity: "0.3"
19137
+ fillOpacity: "0.25"
19171
19138
  }
19172
19139
  ),
19173
19140
  /* @__PURE__ */ jsx(
19174
19141
  "path",
19175
19142
  {
19143
+ d: "m6.5 6.5 7 7m0-7-7 7",
19176
19144
  stroke: "currentColor",
19177
19145
  strokeLinecap: "round",
19178
- d: "m6.582 6.983 6.364 6.364m-5.892 0 6.364-6.364",
19179
19146
  fill: "none"
19180
19147
  }
19181
19148
  )
@@ -19192,30 +19159,18 @@ const icons = {
19192
19159
  fill: "none",
19193
19160
  children: [
19194
19161
  /* @__PURE__ */ jsx(
19195
- "circle",
19162
+ "path",
19196
19163
  {
19197
- r: "10",
19198
- transform: "matrix(1 0 0 -1 10 10)",
19164
+ d: "M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18ZM8 9v1h1v4H8v1h4v-1h-1V9H8Zm1-4v2h2V5H9Z",
19199
19165
  fill: "currentColor",
19200
19166
  fillOpacity: "0.3"
19201
19167
  }
19202
19168
  ),
19203
- /* @__PURE__ */ jsx(
19204
- "circle",
19205
- {
19206
- r: "0.75",
19207
- transform: "matrix(1 0 0 -1 10 6.25)",
19208
- fill: "currentColor"
19209
- }
19210
- ),
19211
19169
  /* @__PURE__ */ jsx(
19212
19170
  "path",
19213
19171
  {
19214
- d: "M11 14c-.91 1.149-1.5.5-1.343-1.445l.356-3.622L9 9.5",
19215
- stroke: "currentColor",
19216
- strokeLinecap: "round",
19217
- strokeLinejoin: "round",
19218
- fill: "none"
19172
+ d: "M9 5h2v2H9V5Zm2 4v5h1v1H8v-1h1v-4H8V9h3Z",
19173
+ fill: "currentColor"
19219
19174
  }
19220
19175
  )
19221
19176
  ]
@@ -19231,19 +19186,17 @@ const icons = {
19231
19186
  fill: "none",
19232
19187
  children: [
19233
19188
  /* @__PURE__ */ jsx(
19234
- "circle",
19189
+ "path",
19235
19190
  {
19236
- cx: "10",
19237
- cy: "10",
19238
- r: "10",
19191
+ d: "M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z",
19239
19192
  fill: "currentColor",
19240
- fillOpacity: "0.3"
19193
+ fillOpacity: "0.25"
19241
19194
  }
19242
19195
  ),
19243
19196
  /* @__PURE__ */ jsx(
19244
19197
  "path",
19245
19198
  {
19246
- d: "M6 10.792 8.667 13.5 14 7",
19199
+ d: "m6 11 3 3 5-7",
19247
19200
  stroke: "currentColor",
19248
19201
  strokeLinecap: "round",
19249
19202
  strokeLinejoin: "round",
@@ -30275,6 +30228,53 @@ const icons = {
30275
30228
  )
30276
30229
  ]
30277
30230
  }
30231
+ ),
30232
+ archiveFile: /* @__PURE__ */ jsxs(
30233
+ "svg",
30234
+ {
30235
+ xmlns: "http://www.w3.org/2000/svg",
30236
+ viewBox: "0 0 20 20",
30237
+ width: "20",
30238
+ height: "20",
30239
+ fill: "none",
30240
+ children: [
30241
+ /* @__PURE__ */ jsx(
30242
+ "path",
30243
+ {
30244
+ d: "M15.5 10.5V3A1.5 1.5 0 0 0 14 1.5H5A1.5 1.5 0 0 0 3.5 3v14A1.5 1.5 0 0 0 5 18.5h8.5m2-8 1.705 2.302a1.5 1.5 0 0 1 .295.893V17a1.5 1.5 0 0 1-1.5 1.5h-2.5m2-8-1.705 2.302a1.5 1.5 0 0 0-.295.893V18.5",
30245
+ stroke: "currentColor",
30246
+ strokeLinejoin: "round",
30247
+ fill: "none"
30248
+ }
30249
+ ),
30250
+ /* @__PURE__ */ jsx(
30251
+ "path",
30252
+ {
30253
+ d: "M7.5 2.5v1m1 1v1m-1 1v1m1 1v1m-1 1v1m1 1v1m-1 1v1m1 1v1",
30254
+ stroke: "currentColor",
30255
+ strokeLinecap: "square",
30256
+ fill: "none"
30257
+ }
30258
+ )
30259
+ ]
30260
+ }
30261
+ ),
30262
+ info: /* @__PURE__ */ jsx(
30263
+ "svg",
30264
+ {
30265
+ xmlns: "http://www.w3.org/2000/svg",
30266
+ viewBox: "0 0 20 20",
30267
+ width: "20",
30268
+ height: "20",
30269
+ fill: "none",
30270
+ children: /* @__PURE__ */ jsx(
30271
+ "path",
30272
+ {
30273
+ d: "M8.5 4a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V4Zm2 5a1 1 0 0 1 1 1v6.5h1a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5V17a.5.5 0 0 1 .5-.5h1V11a.5.5 0 0 0-.5-.5h-.5A.5.5 0 0 1 7 10v-.5a.5.5 0 0 1 .5-.5h3Z",
30274
+ fill: "currentColor"
30275
+ }
30276
+ )
30277
+ }
30278
30278
  )
30279
30279
  };
30280
30280
  const blockIcons = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eightshift/ui-components",
3
- "version": "5.1.0",
3
+ "version": "5.1.2",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -64,12 +64,12 @@
64
64
  "class-variance-authority": "^0.7.1",
65
65
  "clsx": "^2.1.1",
66
66
  "css-gradient-parser": "^0.0.16",
67
- "eslint": "^9.29.0",
67
+ "eslint": "^9.30.1",
68
68
  "eslint-config-prettier": "^10.1.5",
69
- "eslint-plugin-jsdoc": "^51.2.3",
69
+ "eslint-plugin-jsdoc": "^51.3.4",
70
70
  "eslint-plugin-prettier": "^5.5.1",
71
71
  "glob": "^11.0.3",
72
- "globals": "^16.2.0",
72
+ "globals": "^16.3.0",
73
73
  "just-camel-case": "^6.2.0",
74
74
  "just-debounce-it": "^3.2.0",
75
75
  "just-has": "^2.3.0",
@@ -79,7 +79,7 @@
79
79
  "lightningcss": "^1.30.1",
80
80
  "postcss": "^8.5.6",
81
81
  "prettier": "^3.6.2",
82
- "prettier-plugin-tailwindcss": "^0.6.13",
82
+ "prettier-plugin-tailwindcss": "^0.6.14",
83
83
  "react": "^18.3.1",
84
84
  "react-aria": "^3.41.1",
85
85
  "react-aria-components": "^1.10.1",
@@ -92,7 +92,7 @@
92
92
  "tailwindcss": "^4.1.11",
93
93
  "tailwindcss-motion": "^1.1.1",
94
94
  "tailwindcss-react-aria-components": "^2.0.0",
95
- "vite": "^7.0.0",
95
+ "vite": "^7.0.4",
96
96
  "vite-plugin-lib-inject-css": "^2.2.2"
97
97
  },
98
98
  "dependencies": {