@eightshift/ui-components 5.0.10 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/dist/{Collection-uTAXq9Br.js → Collection-BRJOMbOa.js} +12 -7
  2. package/dist/{Dialog-CmAxaSUv.js → Dialog-D6EdDPeu.js} +8 -8
  3. package/dist/{useFormValidation-Dy0PXJg5.js → Form-Bnyyv3Im.js} +6 -4
  4. package/dist/{Group-DDPhPPTQ.js → Group-LBogWgyp.js} +2 -2
  5. package/dist/{Input-BmDS8Juy.js → Input-DfSBLhDx.js} +1 -1
  6. package/dist/List-BLeHBkfx.js +590 -0
  7. package/dist/{ListBox-_nDFq8-H.js → ListBox-BY3gwI8c.js} +3 -3
  8. package/dist/Select-BebwUgKB.js +764 -0
  9. package/dist/Separator-CTQWg_HO.js +1111 -0
  10. package/dist/TextField-o2U-uBWv.js +133 -0
  11. package/dist/assets/style-admin.css +268 -150
  12. package/dist/assets/style-editor.css +268 -150
  13. package/dist/assets/style.css +268 -150
  14. package/dist/assets/wp-font-enhancements.css +1 -1
  15. package/dist/assets/wp-ui-enhancements.css +1 -1
  16. package/dist/components/breakpoint-preview/breakpoint-preview.js +3 -4
  17. package/dist/components/button/button.js +3 -3
  18. package/dist/components/checkbox/checkbox.js +1 -2
  19. package/dist/components/color-pickers/color-picker.js +7 -9
  20. package/dist/components/color-pickers/color-swatch.js +1 -1
  21. package/dist/components/color-pickers/gradient-editor.js +19 -25
  22. package/dist/components/color-pickers/solid-color-picker.js +27 -27
  23. package/dist/components/component-toggle/component-toggle.js +1 -1
  24. package/dist/components/draggable/draggable-handle.js +2 -2
  25. package/dist/components/draggable/draggable.js +5 -5
  26. package/dist/components/draggable-list/draggable-list-item.js +2 -2
  27. package/dist/components/draggable-list/draggable-list.js +5 -5
  28. package/dist/components/expandable/expandable.js +1 -1
  29. package/dist/components/index.js +5 -5
  30. package/dist/components/input-field/input-field.js +13 -129
  31. package/dist/components/item-collection/item-collection.js +1 -1
  32. package/dist/components/link-input/link-input.js +1463 -17
  33. package/dist/components/matrix-align/matrix-align.js +11 -14
  34. package/dist/components/menu/menu.js +4 -8
  35. package/dist/components/modal/modal.js +3 -3
  36. package/dist/components/number-picker/number-picker.js +9 -10
  37. package/dist/components/option-select/option-select.js +140 -156
  38. package/dist/components/placeholders/file-placeholder.js +1 -1
  39. package/dist/components/placeholders/image-placeholder.js +3 -3
  40. package/dist/components/placeholders/media-placeholder.js +2 -2
  41. package/dist/components/popover/popover.js +10 -5
  42. package/dist/components/radio/radio.js +4 -5
  43. package/dist/components/repeater/repeater-item.js +1 -1
  44. package/dist/components/repeater/repeater.js +6 -6
  45. package/dist/components/responsive/mini-responsive.js +45 -47
  46. package/dist/components/responsive/responsive-legacy.js +51 -55
  47. package/dist/components/responsive/responsive.js +47 -49
  48. package/dist/components/responsive-preview/responsive-preview.js +12 -15
  49. package/dist/components/select/async-multi-select.js +4 -4
  50. package/dist/components/select/async-single-select.js +1 -1
  51. package/dist/components/select/multi-select-components.js +1 -1
  52. package/dist/components/select/multi-select.js +4 -4
  53. package/dist/components/select/shared.js +2 -2
  54. package/dist/components/select/single-select.js +1 -1
  55. package/dist/components/select/styles.js +3 -3
  56. package/dist/components/select/v2/async-select.js +215 -158
  57. package/dist/components/select/v2/shared.js +29 -20
  58. package/dist/components/select/v2/single-select.js +202 -851
  59. package/dist/components/slider/column-config-slider.js +2 -2
  60. package/dist/components/slider/slider.js +2 -2
  61. package/dist/components/slider/utils.js +1 -1
  62. package/dist/components/tabs/tabs.js +7 -8
  63. package/dist/components/toggle/switch.js +4 -3
  64. package/dist/components/toggle-button/toggle-button.js +1 -1
  65. package/dist/{default-i18n-CT_oS1Fy.js → default-i18n-OFa3zAyB.js} +5 -9
  66. package/dist/icons/jsx-svg.js +3 -4
  67. package/dist/index.js +4 -4
  68. package/dist/{multi-select-components-Sp-JEFEX.js → multi-select-components-BcKzA24f.js} +3 -3
  69. package/dist/{react-jsx-parser.min-DZCiis5V.js → react-jsx-parser.min-LF707GK8.js} +312 -332
  70. package/dist/useAsyncList-fLtZMvJO.js +420 -0
  71. package/dist/useFilter-BR5z1A4Q.js +50 -0
  72. package/dist/{useListState-9Hq_FiRF.js → useListState-BrZ2XvDS.js} +1 -1
  73. package/dist/{useNumberField-D0u2bh8g.js → useNumberField-y0dLc_6m.js} +2 -2
  74. package/dist/{useSingleSelectListState-DqhemUIh.js → useSingleSelectListState-Bh46cRXs.js} +1 -1
  75. package/dist/utilities/array-helpers.js +4 -7
  76. package/dist/utilities/es-dash.js +21 -3
  77. package/dist/utilities/index.js +2 -1
  78. package/dist/utilities/text-helpers.js +3 -3
  79. package/package.json +9 -9
  80. package/dist/ComboBox-BANSEKnb.js +0 -1915
  81. package/dist/Form-Cq3fu75_.js +0 -5
  82. package/dist/List-CZMUbkFU.js +0 -593
  83. package/dist/Separator-BN3mjL6q.js +0 -332
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
2
+ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
3
3
  import { icons } from "../../icons/icons.js";
4
4
  import { pascalCase, upperFirst, camelCase } from "../../utilities/es-dash.js";
5
5
  import { Menu, MenuItem } from "../menu/menu.js";
@@ -111,19 +111,16 @@ const MatrixAlign = (props) => {
111
111
  triggerProps: { "aria-label": ariaLabel },
112
112
  tooltip,
113
113
  keepOpen: true,
114
- children: sizeOptions.map(({ value: itemValue, label: label2 }) => {
115
- var _a;
116
- return /* @__PURE__ */ jsx(
117
- MenuItem,
118
- {
119
- endIcon: (_a = icons) == null ? void 0 : _a[`position${size}${pascalCase(itemValue)}`],
120
- selected: value === itemValue,
121
- onClick: () => onChange(itemValue),
122
- children: label2
123
- },
124
- itemValue
125
- );
126
- })
114
+ children: sizeOptions.map(({ value: itemValue, label: label2 }) => /* @__PURE__ */ jsx(
115
+ MenuItem,
116
+ {
117
+ endIcon: icons?.[`position${size}${pascalCase(itemValue)}`],
118
+ selected: value === itemValue,
119
+ onClick: () => onChange(itemValue),
120
+ children: label2
121
+ },
122
+ itemValue
123
+ ))
127
124
  }
128
125
  )
129
126
  }
@@ -1,12 +1,12 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
- import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-BN3mjL6q.js";
3
- import { a as $3674c52c6b3c5bce$export$27d2ad3c5815583e, b as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, c as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, d as $3674c52c6b3c5bce$export$4b1545b4f2016d26, e as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-CmAxaSUv.js";
2
+ import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-CTQWg_HO.js";
3
+ import { $ as $3674c52c6b3c5bce$export$27d2ad3c5815583e, a as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, b as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-D6EdDPeu.js";
4
4
  import { icons } from "../../icons/icons.js";
5
5
  import { Button } from "../button/button.js";
6
6
  import { Popover } from "../popover/popover.js";
7
7
  import { c as clsx } from "../../lite-DVmmD_-j.js";
8
8
  import { cloneElement } from "react";
9
- import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
9
+ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
10
10
  /**
11
11
  * A simple menu component.
12
12
  *
@@ -60,7 +60,6 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
60
60
  * @preserve
61
61
  */
62
62
  const Menu = (props) => {
63
- var _a;
64
63
  const {
65
64
  children,
66
65
  triggerLabel,
@@ -90,10 +89,7 @@ const Menu = (props) => {
90
89
  if (openOnLongPress) {
91
90
  additionalProps.trigger = "longPress";
92
91
  }
93
- const hasSubmenuItems = Array.isArray(children) ? children.some((child) => {
94
- var _a2;
95
- return ((_a2 = child == null ? void 0 : child.type) == null ? void 0 : _a2.displayName) === "SubMenuItem";
96
- }) : ((_a = children == null ? void 0 : children.type) == null ? void 0 : _a.displayName) === "SubMenuItem";
92
+ const hasSubmenuItems = Array.isArray(children) ? children.some((child) => child?.type?.displayName === "SubMenuItem") : children?.type?.displayName === "SubMenuItem";
97
93
  return /* @__PURE__ */ jsxs(
98
94
  $3674c52c6b3c5bce$export$27d2ad3c5815583e,
99
95
  {
@@ -1,15 +1,15 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { h as $a11501f3d1d39e6c$export$ea8f71083e90600f, i as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, j as $337b884510726a0d$export$14c98a7594375490, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, n as $337b884510726a0d$export$c6fdb837b070b4ff, g as $de32f1b87079253c$export$2e1e1122cf0cba88, f as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-CmAxaSUv.js";
2
+ import { h as $a11501f3d1d39e6c$export$ea8f71083e90600f, i as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, j as $337b884510726a0d$export$14c98a7594375490, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, n as $337b884510726a0d$export$c6fdb837b070b4ff, g as $de32f1b87079253c$export$2e1e1122cf0cba88, f as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-D6EdDPeu.js";
3
3
  import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-ba38ScjJ.js";
4
4
  import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
5
5
  import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
6
6
  import React__default, { useState, useEffect, forwardRef, useContext, createContext, useRef, useMemo } from "react";
7
7
  import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-BUfV-5P3.js";
8
8
  import { Button } from "../button/button.js";
9
- import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
9
+ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
10
10
  import { c as clsx } from "../../lite-DVmmD_-j.js";
11
11
  import { icons } from "../../icons/icons.js";
12
- import "../../react-jsx-parser.min-DZCiis5V.js";
12
+ import "../../react-jsx-parser.min-LF707GK8.js";
13
13
  import { HStack } from "../layout/hstack.js";
14
14
  let $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
15
15
  function $5df64b3807dc15ee$export$d699905dd57c73ca() {
@@ -1,17 +1,17 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import React__default, { forwardRef, createContext, useRef, useState, cloneElement } from "react";
3
- import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
4
- import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DDPhPPTQ.js";
5
- import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
3
+ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
4
+ import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-LBogWgyp.js";
5
+ import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-DfSBLhDx.js";
6
6
  import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
7
7
  import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DH22t_SM.js";
8
8
  import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
9
9
  import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
10
- import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
10
+ import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Bnyyv3Im.js";
11
11
  import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
12
12
  import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
13
13
  import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
14
- import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D0u2bh8g.js";
14
+ import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-y0dLc_6m.js";
15
15
  import { Button } from "../button/button.js";
16
16
  import { icons } from "../../icons/icons.js";
17
17
  import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -170,7 +170,6 @@ const NumberPicker = ({
170
170
  hidden,
171
171
  ...props
172
172
  }) => {
173
- var _a, _b, _c, _d, _e;
174
173
  const [isInputFocused, setIsInputFocused] = useState(false);
175
174
  if (hidden) {
176
175
  return null;
@@ -221,8 +220,8 @@ const NumberPicker = ({
221
220
  "es:group es:flex es:w-fit es:items-center es:rounded-10 es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-sm es:focus-within:shadow-md es:transition",
222
221
  "es:inset-ring es:inset-ring-secondary-100",
223
222
  isInputFocused && "es:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
224
- !prefix && (((_a = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _a.noPrefixPadding) ?? sizes.default.noPrefixPadding),
225
- ((_b = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _b.field) ?? sizes.default.field,
223
+ !prefix && (sizes?.[size]?.noPrefixPadding ?? sizes.default.noPrefixPadding),
224
+ sizes?.[size]?.field ?? sizes.default.field,
226
225
  "es:disabled:shadow-none es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50"
227
226
  ),
228
227
  children: [
@@ -242,7 +241,7 @@ const NumberPicker = ({
242
241
  className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:any-focus:outline-hidden",
243
242
  placeholder,
244
243
  style: {
245
- width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(_d = (_c = max ?? 1e3) == null ? void 0 : _c.toString()) == null ? void 0 : _d.length} * 1ch)`
244
+ width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(max ?? 1e3)?.toString()?.length} * 1ch)`
246
245
  },
247
246
  "aria-label": ariaLabel ?? __("Enter a number", "eightshift-ui-components")
248
247
  }
@@ -276,7 +275,7 @@ const NumberPicker = ({
276
275
  }
277
276
  ),
278
277
  children && /* @__PURE__ */ jsxs(Fragment, { children: [
279
- /* @__PURE__ */ jsx("div", { className: clsx("es:w-px es:bg-secondary-300", ((_e = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _e.extraContentSeparator) ?? sizes.default.extraContentSeparator) }),
278
+ /* @__PURE__ */ jsx("div", { className: clsx("es:w-px es:bg-secondary-300", sizes?.[size]?.extraContentSeparator ?? sizes.default.extraContentSeparator) }),
280
279
  /* @__PURE__ */ jsx("div", { className: "es:p-0.5 es:pr-0", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
281
280
  ] })
282
281
  ]
@@ -7,7 +7,7 @@ import { SubMenuItem, MenuSeparator, MenuItem, Menu } from "../menu/menu.js";
7
7
  import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
8
8
  import { RichLabel } from "../rich-label/rich-label.js";
9
9
  import { ToggleButton } from "../toggle-button/toggle-button.js";
10
- import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
10
+ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
11
11
  /**
12
12
  * A component that allows the user to select an option from a list of options.
13
13
  *
@@ -55,7 +55,6 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
55
55
  * @preserve
56
56
  */
57
57
  const OptionSelect = (props) => {
58
- var _a, _b;
59
58
  const {
60
59
  icon,
61
60
  label,
@@ -87,10 +86,10 @@ const OptionSelect = (props) => {
87
86
  return null;
88
87
  }
89
88
  let tooltip = rawTooltip;
90
- if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
89
+ if (rawTooltip === true && ariaLabel?.length > 0) {
91
90
  tooltip = ariaLabel;
92
91
  }
93
- const currentItem = options == null ? void 0 : options.find(({ value: optionValue }) => optionValue === value);
92
+ const currentItem = options?.find(({ value: optionValue }) => optionValue === value);
94
93
  const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es:leading-3 es:opacity-50", children: __("Not set", "eightshift-ui-components") });
95
94
  let radioDesign = "default";
96
95
  if (type === "radiosSegmented") {
@@ -104,12 +103,12 @@ const OptionSelect = (props) => {
104
103
  MenuItem,
105
104
  {
106
105
  icon: !noTriggerIcon && (icon ?? // eslint-disable-next-line no-nested-ternary
107
- (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel)),
106
+ (currentItem ? typeof currentItem?.icon === "string" ? icons?.[currentItem?.icon] : currentItem?.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel)),
108
107
  children: /* @__PURE__ */ jsx(
109
108
  RichLabel,
110
109
  {
111
- label: noTriggerLabel ? null : label ?? (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
112
- subtitle: subtitle === true ? currentItem == null ? void 0 : currentItem.label : subtitle,
110
+ label: noTriggerLabel ? null : label ?? currentItem?.label ?? notSetLabel,
111
+ subtitle: subtitle === true ? currentItem?.label : subtitle,
113
112
  noColor: true
114
113
  }
115
114
  )
@@ -129,39 +128,36 @@ const OptionSelect = (props) => {
129
128
  sectionTitle: optionSectionTitle,
130
129
  shortcut: optionShortcut,
131
130
  disabled: optionDisabled
132
- }) => {
133
- var _a2, _b2;
134
- return /* @__PURE__ */ jsxs(Fragment, { children: [
135
- (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
136
- optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
137
- /* @__PURE__ */ jsxs(
138
- MenuItem,
139
- {
140
- selected: value === optionValue,
141
- disabled: optionDisabled || disabled,
142
- className: itemClassName,
143
- icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
144
- endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
145
- "aria-label": optionAriaLabel ?? optionLabel,
146
- onClick: () => onChange(optionValue),
147
- shortcut: optionShortcut,
148
- ...itemProps,
149
- children: [
150
- !noItemLabel && !optionSubtitle && optionLabel,
151
- !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
152
- RichLabel,
153
- {
154
- label: optionLabel,
155
- subtitle: optionSubtitle,
156
- noColor: true
157
- }
158
- )
159
- ]
160
- }
161
- ),
162
- optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
163
- ] }, optionValue);
164
- }
131
+ }) => /* @__PURE__ */ jsxs(Fragment, { children: [
132
+ (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
133
+ optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
134
+ /* @__PURE__ */ jsxs(
135
+ MenuItem,
136
+ {
137
+ selected: value === optionValue,
138
+ disabled: optionDisabled || disabled,
139
+ className: itemClassName,
140
+ icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
141
+ endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? icons?.[optionEndIcon] : optionEndIcon),
142
+ "aria-label": optionAriaLabel ?? optionLabel,
143
+ onClick: () => onChange(optionValue),
144
+ shortcut: optionShortcut,
145
+ ...itemProps,
146
+ children: [
147
+ !noItemLabel && !optionSubtitle && optionLabel,
148
+ !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
149
+ RichLabel,
150
+ {
151
+ label: optionLabel,
152
+ subtitle: optionSubtitle,
153
+ noColor: true
154
+ }
155
+ )
156
+ ]
157
+ }
158
+ ),
159
+ optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
160
+ ] }, optionValue)
165
161
  ),
166
162
  children
167
163
  ]
@@ -182,39 +178,36 @@ const OptionSelect = (props) => {
182
178
  sectionTitle: optionSectionTitle,
183
179
  shortcut: optionShortcut,
184
180
  disabled: optionDisabled
185
- }) => {
186
- var _a2, _b2;
187
- return /* @__PURE__ */ jsxs(Fragment, { children: [
188
- (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
189
- optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
190
- /* @__PURE__ */ jsxs(
191
- MenuItem,
192
- {
193
- selected: value === optionValue,
194
- disabled: optionDisabled || disabled,
195
- className: itemClassName,
196
- icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
197
- endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
198
- "aria-label": optionAriaLabel ?? optionLabel,
199
- onClick: () => onChange(optionValue),
200
- shortcut: optionShortcut,
201
- ...itemProps,
202
- children: [
203
- !noItemLabel && !optionSubtitle && optionLabel,
204
- !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
205
- RichLabel,
206
- {
207
- label: optionLabel,
208
- subtitle: optionSubtitle,
209
- noColor: true
210
- }
211
- )
212
- ]
213
- }
214
- ),
215
- optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
216
- ] }, optionValue);
217
- }
181
+ }) => /* @__PURE__ */ jsxs(Fragment, { children: [
182
+ (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
183
+ optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
184
+ /* @__PURE__ */ jsxs(
185
+ MenuItem,
186
+ {
187
+ selected: value === optionValue,
188
+ disabled: optionDisabled || disabled,
189
+ className: itemClassName,
190
+ icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
191
+ endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? icons?.[optionEndIcon] : optionEndIcon),
192
+ "aria-label": optionAriaLabel ?? optionLabel,
193
+ onClick: () => onChange(optionValue),
194
+ shortcut: optionShortcut,
195
+ ...itemProps,
196
+ children: [
197
+ !noItemLabel && !optionSubtitle && optionLabel,
198
+ !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
199
+ RichLabel,
200
+ {
201
+ label: optionLabel,
202
+ subtitle: optionSubtitle,
203
+ noColor: true
204
+ }
205
+ )
206
+ ]
207
+ }
208
+ ),
209
+ optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
210
+ ] }, optionValue)
218
211
  ),
219
212
  children
220
213
  ] });
@@ -247,34 +240,31 @@ const OptionSelect = (props) => {
247
240
  ariaLabel: optionAriaLabel,
248
241
  subtitle: optionSubtitle,
249
242
  disabled: optionDisabled
250
- }) => {
251
- var _a2;
252
- return /* @__PURE__ */ jsxs(
253
- ToggleButton,
254
- {
255
- selected: optionValue === value,
256
- onChange: () => onChange(optionValue),
257
- disabled: optionDisabled || disabled,
258
- className: itemClassName,
259
- icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
260
- tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
261
- "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
262
- ...itemProps,
263
- children: [
264
- !noItemLabel && !optionSubtitle && optionLabel,
265
- !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
266
- RichLabel,
267
- {
268
- label: optionLabel,
269
- subtitle: optionSubtitle,
270
- noColor: true
271
- }
272
- )
273
- ]
274
- },
275
- optionValue
276
- );
277
- }
243
+ }) => /* @__PURE__ */ jsxs(
244
+ ToggleButton,
245
+ {
246
+ selected: optionValue === value,
247
+ onChange: () => onChange(optionValue),
248
+ disabled: optionDisabled || disabled,
249
+ className: itemClassName,
250
+ icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
251
+ tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
252
+ "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
253
+ ...itemProps,
254
+ children: [
255
+ !noItemLabel && !optionSubtitle && optionLabel,
256
+ !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
257
+ RichLabel,
258
+ {
259
+ label: optionLabel,
260
+ subtitle: optionSubtitle,
261
+ noColor: true
262
+ }
263
+ )
264
+ ]
265
+ },
266
+ optionValue
267
+ )
278
268
  )
279
269
  }
280
270
  ),
@@ -287,41 +277,38 @@ const OptionSelect = (props) => {
287
277
  "aria-label": typeof label !== "undefined" ? null : ariaLabel,
288
278
  value,
289
279
  ...wrapperProps,
290
- children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => {
291
- var _a2;
292
- return /* @__PURE__ */ jsx(
293
- RadioButton,
294
- {
295
- value: optionValue,
296
- disabled: optionDisabled || disabled,
297
- className: itemClassName,
298
- subtitle: !noItemLabel && optionSubtitle,
299
- icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
300
- "aria-label": optionAriaLabel ?? optionLabel,
301
- label: !noItemLabel && optionLabel,
302
- ...itemProps
303
- },
304
- optionValue
305
- );
306
- })
280
+ children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => /* @__PURE__ */ jsx(
281
+ RadioButton,
282
+ {
283
+ value: optionValue,
284
+ disabled: optionDisabled || disabled,
285
+ className: itemClassName,
286
+ subtitle: !noItemLabel && optionSubtitle,
287
+ icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
288
+ "aria-label": optionAriaLabel ?? optionLabel,
289
+ label: !noItemLabel && optionLabel,
290
+ ...itemProps
291
+ },
292
+ optionValue
293
+ ))
307
294
  }
308
295
  ),
309
296
  type === "menu" && /* @__PURE__ */ jsxs(
310
297
  Menu,
311
298
  {
312
- triggerLabel: noTriggerLabel ? null : (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
299
+ triggerLabel: noTriggerLabel ? null : currentItem?.label ?? notSetLabel,
313
300
  triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
314
- (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_b = icons) == null ? void 0 : _b[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
301
+ (currentItem ? typeof currentItem?.icon === "string" ? icons?.[currentItem?.icon] : currentItem?.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
315
302
  tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
316
303
  RichLabel,
317
304
  {
318
- label: tooltip ? tooltip : (currentItem == null ? void 0 : currentItem.tooltip) ?? (currentItem == null ? void 0 : currentItem.label),
319
- subtitle: tooltip && ((currentItem == null ? void 0 : currentItem.tooltip) ?? (currentItem == null ? void 0 : currentItem.label)),
305
+ label: tooltip ? tooltip : currentItem?.tooltip ?? currentItem?.label,
306
+ subtitle: tooltip && (currentItem?.tooltip ?? currentItem?.label),
320
307
  noColor: true
321
308
  }
322
309
  ) : tooltip,
323
310
  triggerProps: {
324
- ...wrapperProps == null ? void 0 : wrapperProps.triggerProps,
311
+ ...wrapperProps?.triggerProps,
325
312
  "aria-label": typeof label !== "undefined" ? null : ariaLabel ?? label ?? tooltip
326
313
  },
327
314
  keepOpen: true,
@@ -340,39 +327,36 @@ const OptionSelect = (props) => {
340
327
  sectionTitle: optionSectionTitle,
341
328
  shortcut: optionShortcut,
342
329
  disabled: optionDisabled
343
- }) => {
344
- var _a2, _b2;
345
- return /* @__PURE__ */ jsxs(Fragment, { children: [
346
- (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
347
- optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
348
- /* @__PURE__ */ jsxs(
349
- MenuItem,
350
- {
351
- selected: value === optionValue,
352
- disabled: optionDisabled || disabled,
353
- className: itemClassName,
354
- icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
355
- endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
356
- "aria-label": optionAriaLabel ?? optionLabel,
357
- onClick: () => onChange(optionValue),
358
- shortcut: optionShortcut,
359
- ...itemProps,
360
- children: [
361
- !noItemLabel && !optionSubtitle && optionLabel,
362
- !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
363
- RichLabel,
364
- {
365
- label: optionLabel,
366
- subtitle: optionSubtitle,
367
- noColor: true
368
- }
369
- )
370
- ]
371
- }
372
- ),
373
- optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
374
- ] }, optionValue);
375
- }
330
+ }) => /* @__PURE__ */ jsxs(Fragment, { children: [
331
+ (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
332
+ optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
333
+ /* @__PURE__ */ jsxs(
334
+ MenuItem,
335
+ {
336
+ selected: value === optionValue,
337
+ disabled: optionDisabled || disabled,
338
+ className: itemClassName,
339
+ icon: !noItemIcon && (typeof optionIcon === "string" ? icons?.[optionIcon] : optionIcon),
340
+ endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? icons?.[optionEndIcon] : optionEndIcon),
341
+ "aria-label": optionAriaLabel ?? optionLabel,
342
+ onClick: () => onChange(optionValue),
343
+ shortcut: optionShortcut,
344
+ ...itemProps,
345
+ children: [
346
+ !noItemLabel && !optionSubtitle && optionLabel,
347
+ !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
348
+ RichLabel,
349
+ {
350
+ label: optionLabel,
351
+ subtitle: optionSubtitle,
352
+ noColor: true
353
+ }
354
+ )
355
+ ]
356
+ }
357
+ ),
358
+ optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
359
+ ] }, optionValue)
376
360
  ),
377
361
  children
378
362
  ]
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
2
+ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
3
3
  import { icons } from "../../icons/icons.js";
4
4
  import { RichLabel } from "../rich-label/rich-label.js";
5
5
  import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -50,8 +50,8 @@ const ImagePlaceholder = (props) => {
50
50
  className: clsx(
51
51
  "es:grid es:grid-cols-1 es:grid-rows-1 es:overflow-hidden",
52
52
  "es:*:col-start-1 es:*:col-end-1 es:*:row-start-1 es:*:row-end-1",
53
- styleClassName[style] ?? (styleClassName == null ? void 0 : styleClassName.default),
54
- sizeClassName[size] ?? (sizeClassName == null ? void 0 : sizeClassName.default),
53
+ styleClassName[style] ?? styleClassName?.default,
54
+ sizeClassName[size] ?? sizeClassName?.default,
55
55
  className
56
56
  ),
57
57
  children: [
@@ -63,7 +63,7 @@ const ImagePlaceholder = (props) => {
63
63
  imageMode === "cover" && "es:object-cover",
64
64
  imageMode === "contain" && "es:object-contain",
65
65
  imageMode === "fill" && "es:object-fill",
66
- (url == null ? void 0 : url.length) > 0 ? "es:motion-opacity-in es:motion-scale-in-125 es:motion-blur-in-xs es:motion-delay-300/blur es:motion-duration-300 es:motion-ease-spring-snappy/scale" : "es:hidden"
66
+ url?.length > 0 ? "es:motion-opacity-in es:motion-scale-in-125 es:motion-blur-in-xs es:motion-delay-300/blur es:motion-duration-300 es:motion-ease-spring-snappy/scale" : "es:hidden"
67
67
  ),
68
68
  src: url,
69
69
  alt
@@ -46,8 +46,8 @@ const MediaPlaceholder = (props) => {
46
46
  {
47
47
  className: clsx(
48
48
  "es:flex es:flex-col es:items-center es:justify-center es:gap-2 es:overflow-hidden es:p-2",
49
- styleClassName[style] ?? (styleClassName == null ? void 0 : styleClassName.default),
50
- sizeClassName[size] ?? (sizeClassName == null ? void 0 : sizeClassName.default),
49
+ styleClassName[style] ?? styleClassName?.default,
50
+ sizeClassName[size] ?? sizeClassName?.default,
51
51
  className
52
52
  ),
53
53
  children: [
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-CmAxaSUv.js";
2
+ import { e as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-D6EdDPeu.js";
3
3
  import { c as clsx } from "../../lite-DVmmD_-j.js";
4
- import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
4
+ import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
5
5
  import { Button } from "../button/button.js";
6
6
  /**
7
7
  * A popover component.
@@ -103,9 +103,14 @@ const Popover = (props) => {
103
103
  containerPadding,
104
104
  className: ({ isEntering, isExiting }) => clsx(
105
105
  "es:rounded-2xl es:border es:border-secondary-300 es:bg-white es:inset-ring es:inset-ring-secondary-100 es:shadow-xl es:outline-hidden",
106
- "es:motion-safe:motion-ease-spring-smooth",
107
- isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
108
- isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200",
106
+ "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
107
+ "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
108
+ "es:placement-left:origin-right es:placement-right:origin-left",
109
+ isEntering || isExiting && "es:pointer-events-none",
110
+ isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
111
+ isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
112
+ isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
113
+ 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%]",
109
114
  wrapperClassName
110
115
  ),
111
116
  style,