@uniformdev/design-system 20.36.1 → 20.37.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.
package/dist/index.js CHANGED
@@ -1481,11 +1481,15 @@ __export(src_exports, {
1481
1481
  ParameterMultiSelect: () => ParameterMultiSelect,
1482
1482
  ParameterMultiSelectInner: () => ParameterMultiSelectInner,
1483
1483
  ParameterNameAndPublicIdInput: () => ParameterNameAndPublicIdInput,
1484
+ ParameterNumberSlider: () => ParameterNumberSlider,
1485
+ ParameterNumberSliderInner: () => ParameterNumberSliderInner,
1484
1486
  ParameterOverrideMarker: () => ParameterOverrideMarker,
1485
1487
  ParameterRichText: () => ParameterRichText,
1486
1488
  ParameterRichTextInner: () => ParameterRichTextInner,
1487
1489
  ParameterSelect: () => ParameterSelect,
1488
1490
  ParameterSelectInner: () => ParameterSelectInner,
1491
+ ParameterSelectSlider: () => ParameterSelectSlider,
1492
+ ParameterSelectSliderInner: () => ParameterSelectSliderInner,
1489
1493
  ParameterShell: () => ParameterShell,
1490
1494
  ParameterShellContext: () => ParameterShellContext,
1491
1495
  ParameterShellPlaceholder: () => ParameterShellPlaceholder,
@@ -1507,6 +1511,8 @@ __export(src_exports, {
1507
1511
  SegmentedControl: () => SegmentedControl,
1508
1512
  SelectableMenuItem: () => SelectableMenuItem,
1509
1513
  Skeleton: () => Skeleton,
1514
+ Slider: () => Slider,
1515
+ SliderLabels: () => SliderLabels,
1510
1516
  Spinner: () => Spinner,
1511
1517
  StatusBullet: () => StatusBullet,
1512
1518
  SuccessMessage: () => SuccessMessage,
@@ -5274,7 +5280,7 @@ var avatarSizeStylesMap = {
5274
5280
  };
5275
5281
  var Avatar = ({
5276
5282
  src,
5277
- label = "",
5283
+ label: label2 = "",
5278
5284
  children,
5279
5285
  size = "md",
5280
5286
  as = "div",
@@ -5286,7 +5292,7 @@ var Avatar = ({
5286
5292
  src ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { role: "presentation", src, css: avatarImageStyles, referrerPolicy: "no-referrer" }) : children ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_CgProfile2.CgProfile, { css: avatarImageStyles }),
5287
5293
  children
5288
5294
  ] });
5289
- return src || children ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip, { title: label, withoutPortal: labelWithoutPortal, children: body }) : body;
5295
+ return src || children ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip, { title: label2, withoutPortal: labelWithoutPortal, children: body }) : body;
5290
5296
  };
5291
5297
 
5292
5298
  // src/components/Avatar/AvatarGroup.tsx
@@ -6175,11 +6181,11 @@ var InfoDialog = ({ message }) => {
6175
6181
  ] });
6176
6182
  };
6177
6183
  var CheckboxWithInfo = (0, import_react41.forwardRef)(
6178
- ({ label, name, info, ...props }, ref) => {
6184
+ ({ label: label2, name, info, ...props }, ref) => {
6179
6185
  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
6180
6186
  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
6181
6187
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
6182
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label })
6188
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label2 })
6183
6189
  ] }),
6184
6190
  info ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoDialog, { message: info }) : null
6185
6191
  ] });
@@ -6399,7 +6405,7 @@ var Label = ({ children, className, testId, ...props }) => {
6399
6405
  var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
6400
6406
  var Input = React8.forwardRef(
6401
6407
  ({
6402
- label,
6408
+ label: label2,
6403
6409
  icon,
6404
6410
  id,
6405
6411
  caption,
@@ -6431,7 +6437,7 @@ var Input = React8.forwardRef(
6431
6437
  css: [labelText, typeof classNameLabel === "object" ? classNameLabel : void 0],
6432
6438
  className: typeof classNameLabel === "string" ? classNameLabel : "",
6433
6439
  testId: labelTestId,
6434
- children: label
6440
+ children: label2
6435
6441
  }
6436
6442
  ) : null,
6437
6443
  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
@@ -6450,7 +6456,7 @@ var Input = React8.forwardRef(
6450
6456
  errorMessage ? inputError : void 0,
6451
6457
  icon ? inputWithIcon : ""
6452
6458
  ],
6453
- "aria-label": showLabel || typeof label !== "string" ? void 0 : label,
6459
+ "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
6454
6460
  className: typeof classNameControl === "string" ? classNameControl : "",
6455
6461
  onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
6456
6462
  ...props,
@@ -6964,7 +6970,7 @@ var import_react50 = require("react");
6964
6970
  var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
6965
6971
  var InputSelect = (0, import_react50.forwardRef)(
6966
6972
  ({
6967
- label,
6973
+ label: label2,
6968
6974
  defaultOption,
6969
6975
  options,
6970
6976
  caption,
@@ -6991,7 +6997,7 @@ var InputSelect = (0, import_react50.forwardRef)(
6991
6997
  css: [labelText, typeof classNameLabel === "object" ? classNameLabel : void 0],
6992
6998
  className: typeof classNameLabel === "string" ? classNameLabel : "",
6993
6999
  children: [
6994
- label,
7000
+ label2,
6995
7001
  labelCta
6996
7002
  ]
6997
7003
  }
@@ -7000,8 +7006,8 @@ var InputSelect = (0, import_react50.forwardRef)(
7000
7006
  "select",
7001
7007
  {
7002
7008
  ref,
7003
- title: label,
7004
- "aria-label": !showLabel ? label : void 0,
7009
+ title: label2,
7010
+ "aria-label": !showLabel ? label2 : void 0,
7005
7011
  css: [
7006
7012
  input("wrap"),
7007
7013
  inputSelect,
@@ -7090,7 +7096,7 @@ function tryParseTime(isoTime) {
7090
7096
  var InputTime = React9.forwardRef(
7091
7097
  ({
7092
7098
  id,
7093
- label,
7099
+ label: label2,
7094
7100
  caption,
7095
7101
  name,
7096
7102
  showLabel = true,
@@ -7134,7 +7140,7 @@ var InputTime = React9.forwardRef(
7134
7140
  ),
7135
7141
  ...props,
7136
7142
  children: [
7137
- showLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components.Label, { elementType: "label", css: [labelText], "data-testid": labelTestId, children: label }) : null,
7143
+ showLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components.Label, { elementType: "label", css: [labelText], "data-testid": labelTestId, children: label2 }) : null,
7138
7144
  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { css: [inputContainer], children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
7139
7145
  import_react_aria_components.DateInput,
7140
7146
  {
@@ -7174,7 +7180,7 @@ var React10 = __toESM(require("react"));
7174
7180
  var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
7175
7181
  var InputToggle = React10.forwardRef(
7176
7182
  ({
7177
- label,
7183
+ label: label2,
7178
7184
  type,
7179
7185
  disabled: disabled2,
7180
7186
  checked,
@@ -7207,11 +7213,11 @@ var InputToggle = React10.forwardRef(
7207
7213
  checked,
7208
7214
  name,
7209
7215
  disabled: disabled2,
7210
- "aria-label": !showLabel && typeof label === "string" ? label : void 0,
7216
+ "aria-label": !showLabel && typeof label2 === "string" ? label2 : void 0,
7211
7217
  ...props
7212
7218
  }
7213
7219
  ),
7214
- !showLabel ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
7220
+ !showLabel ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label2 }),
7215
7221
  caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: inputToggleMessageContainer, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
7216
7222
  FieldMessage,
7217
7223
  {
@@ -7267,9 +7273,9 @@ init_emotion_jsx_shim();
7267
7273
  var import_react54 = require("react");
7268
7274
  var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
7269
7275
  var Textarea = (0, import_react54.forwardRef)(
7270
- ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
7276
+ ({ label: label2, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
7271
7277
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
7272
- showLabel ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
7278
+ showLabel ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: id, css: [labelText], children: label2 }) : null,
7273
7279
  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { css: [inputContainer], children: [
7274
7280
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
7275
7281
  "textarea",
@@ -7282,7 +7288,7 @@ var Textarea = (0, import_react54.forwardRef)(
7282
7288
  icon ? inputWithIcon : "",
7283
7289
  scrollbarStyles
7284
7290
  ],
7285
- "aria-label": !showLabel ? label : void 0,
7291
+ "aria-label": !showLabel ? label2 : void 0,
7286
7292
  ...props
7287
7293
  }
7288
7294
  ),
@@ -9055,7 +9061,7 @@ function useDateTimePickerContext() {
9055
9061
  }
9056
9062
  var DateTimePicker = ({
9057
9063
  id,
9058
- label,
9064
+ label: label2,
9059
9065
  triggerIcon = import_CgCalendar2.CgCalendar,
9060
9066
  value,
9061
9067
  minVisible,
@@ -9139,7 +9145,7 @@ var DateTimePicker = ({
9139
9145
  [handleClearClick, handleDateChange, handleTimeChange]
9140
9146
  );
9141
9147
  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DateTimePickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { "data-testid": testId, "data-variant": variant, ...props, children: [
9142
- showLabel ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label }) : null,
9148
+ showLabel ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label2 }) : null,
9143
9149
  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: inputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react73.PopoverProvider, { store: popover2, children: [
9144
9150
  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
9145
9151
  "div",
@@ -9290,10 +9296,10 @@ var DescriptionList = import_react76.default.forwardRef(
9290
9296
  ref,
9291
9297
  css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
9292
9298
  ...listProps,
9293
- children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react76.default.Fragment, { children: [
9294
- /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("dt", { css: descriptionListLabelStyles, children: label }),
9299
+ children: items == null ? void 0 : items.map(({ label: label2, value }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react76.default.Fragment, { children: [
9300
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("dt", { css: descriptionListLabelStyles, children: label2 }),
9295
9301
  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DescriptionListValueBoolean, { value }) : value })
9296
- ] }, label))
9302
+ ] }, label2))
9297
9303
  }
9298
9304
  );
9299
9305
  }
@@ -11223,10 +11229,7 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
11223
11229
  // src/components/KeyValueInput/KeyValueInput.styles.ts
11224
11230
  init_emotion_jsx_shim();
11225
11231
  var import_react105 = require("@emotion/react");
11226
- var LabelStyles = import_react105.css`
11227
- text-transform: uppercase;
11228
- font-weight: var(--fw-medium);
11229
- `;
11232
+ var LabelStyles = import_react105.css``;
11230
11233
  var SelectKeyValueRowStyles = import_react105.css`
11231
11234
  animation: var(--duration-fast) var(--timing-ease-out);
11232
11235
  align-items: flex-start;
@@ -11249,15 +11252,19 @@ var generateItemId = (item, index) => item.uniqueId || item.value || item.key ||
11249
11252
  var KeyValueInput = ({
11250
11253
  value,
11251
11254
  onChange,
11252
- label = "Options",
11255
+ label: label2 = "Options",
11253
11256
  newItemDefault = initialSelectOptionValue,
11254
11257
  keyLabel = "Text",
11255
11258
  valueLabel = "Value",
11259
+ iconLabel = "Icon",
11256
11260
  keyInfoPopover,
11257
11261
  valueInfoPopover,
11262
+ iconInfoPopover,
11258
11263
  disabled: disabled2,
11259
11264
  errors,
11260
- onFocusChange
11265
+ onFocusChange,
11266
+ showIconColumn = false,
11267
+ renderIconSelector
11261
11268
  }) => {
11262
11269
  const [isDragging, setIsDragging] = (0, import_react106.useState)(false);
11263
11270
  const popoverStoresMap = (0, import_react106.useRef)({});
@@ -11329,35 +11336,58 @@ var KeyValueInput = ({
11329
11336
  }
11330
11337
  }, [value.length]);
11331
11338
  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(VerticalRhythm, { gap: "xs", children: [
11332
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { css: LabelStyles, children: label }) }),
11333
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: [SelectKeyValueRowStyles, { paddingLeft: "var(--spacing-base)" }], children: [
11334
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
11335
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: keyLabel }),
11336
- !keyInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11337
- Popover3,
11338
- {
11339
- buttonText: `${keyLabel} info`,
11340
- iconColor: "gray",
11341
- placement: "bottom-start",
11342
- onInit: ({ store }) => popoverStoresMap.current.label = store,
11343
- children: keyInfoPopover
11344
- }
11345
- )
11346
- ] }),
11347
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
11348
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: valueLabel }),
11349
- !valueInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11350
- Popover3,
11351
- {
11352
- buttonText: `${valueLabel} info`,
11353
- iconColor: "gray",
11354
- placement: "bottom-start",
11355
- onInit: ({ store }) => popoverStoresMap.current.value = store,
11356
- children: valueInfoPopover
11357
- }
11358
- )
11359
- ] })
11360
- ] }),
11339
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { css: LabelStyles, children: label2 }) }),
11340
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
11341
+ "div",
11342
+ {
11343
+ css: [
11344
+ SelectKeyValueRowStyles,
11345
+ { paddingLeft: "var(--spacing-base)" },
11346
+ showIconColumn && { gridTemplateColumns: "1fr 1fr 1fr" }
11347
+ ],
11348
+ children: [
11349
+ showIconColumn && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
11350
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: iconLabel }),
11351
+ !iconInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11352
+ Popover3,
11353
+ {
11354
+ buttonText: `${iconLabel} info`,
11355
+ iconColor: "gray",
11356
+ placement: "bottom-start",
11357
+ onInit: ({ store }) => popoverStoresMap.current.icon = store,
11358
+ children: iconInfoPopover
11359
+ }
11360
+ )
11361
+ ] }),
11362
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
11363
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: keyLabel }),
11364
+ !keyInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11365
+ Popover3,
11366
+ {
11367
+ buttonText: `${keyLabel} info`,
11368
+ iconColor: "gray",
11369
+ placement: "bottom-start",
11370
+ onInit: ({ store }) => popoverStoresMap.current.label = store,
11371
+ children: keyInfoPopover
11372
+ }
11373
+ )
11374
+ ] }),
11375
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
11376
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: valueLabel }),
11377
+ !valueInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11378
+ Popover3,
11379
+ {
11380
+ buttonText: `${valueLabel} info`,
11381
+ iconColor: "gray",
11382
+ placement: "bottom-start",
11383
+ onInit: ({ store }) => popoverStoresMap.current.value = store,
11384
+ children: valueInfoPopover
11385
+ }
11386
+ )
11387
+ ] })
11388
+ ]
11389
+ }
11390
+ ),
11361
11391
  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(VerticalRhythm, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11362
11392
  import_core.DndContext,
11363
11393
  {
@@ -11375,6 +11405,7 @@ var KeyValueInput = ({
11375
11405
  value: item,
11376
11406
  keyLabel: `${keyLabel}, row ${index}`,
11377
11407
  valueLabel: `${valueLabel}, row ${index}`,
11408
+ iconLabel: `${iconLabel}, row ${index}`,
11378
11409
  disabled: disabled2,
11379
11410
  disabledDelete: value.length <= 1,
11380
11411
  disabledDnd: value.length === 1,
@@ -11383,25 +11414,21 @@ var KeyValueInput = ({
11383
11414
  onDelete: () => handleDeleteOptionRow(index),
11384
11415
  onFocusChange: handleFocusChange,
11385
11416
  "data-testid": "key-value-input-item",
11386
- onEnter: handleAddOptionRow
11417
+ onEnter: handleAddOptionRow,
11418
+ showIconColumn,
11419
+ renderIconSelector
11387
11420
  },
11388
11421
  isDragging ? id : index
11389
11422
  )) })
11390
11423
  }
11391
11424
  ) }),
11392
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
11393
- Button,
11425
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11426
+ AddListButton,
11394
11427
  {
11395
- "data-testid": "add-input-row-action",
11396
- buttonType: "secondaryInvert",
11397
- size: "xs",
11398
- onClick: handleAddOptionRow,
11428
+ onButtonClick: handleAddOptionRow,
11399
11429
  disabled: disabled2,
11400
- css: { marginTop: "var(--spacing-base)" },
11401
- children: [
11402
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.85rem" }),
11403
- " Add option"
11404
- ]
11430
+ "data-testid": "add-input-row-action",
11431
+ css: { marginTop: "var(--spacing-sm)", marginLeft: "var(--spacing-base)" }
11405
11432
  }
11406
11433
  )
11407
11434
  ] });
@@ -11412,6 +11439,7 @@ var KeyValueInputItem = ({
11412
11439
  keyLabel,
11413
11440
  value,
11414
11441
  valueLabel,
11442
+ iconLabel,
11415
11443
  disabled: disabled2,
11416
11444
  onChange,
11417
11445
  onDelete,
@@ -11419,7 +11447,9 @@ var KeyValueInputItem = ({
11419
11447
  onFocusChange,
11420
11448
  disabledDelete = false,
11421
11449
  disabledDnd = false,
11422
- onEnter
11450
+ onEnter,
11451
+ showIconColumn = false,
11452
+ renderIconSelector
11423
11453
  }) => {
11424
11454
  const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = (0, import_sortable.useSortable)({
11425
11455
  id,
@@ -11436,62 +11466,98 @@ var KeyValueInputItem = ({
11436
11466
  };
11437
11467
  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: rowWrapper, ref: setNodeRef, style, children: [
11438
11468
  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
11439
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
11440
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11441
- Input,
11442
- {
11443
- ref: firstInputRef,
11444
- label: keyLabel,
11445
- showLabel: false,
11446
- disabled: disabled2,
11447
- onChange: (e) => {
11448
- const hasStoredValue = value.value !== value.key;
11449
- onChange == null ? void 0 : onChange({
11450
- key: e.currentTarget.value,
11451
- value: hasStoredValue ? value.value : e.currentTarget.value
11452
- });
11453
- },
11454
- onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
11455
- onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
11456
- onKeyDown: handleEnter,
11457
- value: value.key,
11458
- errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
11459
- "data-testid": "key"
11460
- }
11461
- ),
11462
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11463
- Input,
11464
- {
11465
- label: valueLabel,
11466
- showLabel: false,
11467
- disabled: disabled2,
11468
- onChange: (e) => {
11469
- onChange == null ? void 0 : onChange({
11470
- key: value.key,
11471
- value: e.currentTarget.value
11472
- });
11473
- },
11474
- onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
11475
- onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
11476
- onKeyDown: handleEnter,
11477
- value: value.value,
11478
- errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
11479
- "data-testid": "value"
11480
- }
11481
- ),
11482
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11483
- Button,
11484
- {
11485
- type: "button",
11486
- buttonType: "ghostDestructive",
11487
- "data-testid": "delete-row",
11488
- onClick: onDelete,
11489
- disabled: disabled2 || disabledDelete,
11490
- size: "zero",
11491
- children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
11492
- }
11493
- ) })
11494
- ] })
11469
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
11470
+ "div",
11471
+ {
11472
+ css: [
11473
+ SelectKeyValueRowStyles,
11474
+ showIconColumn && { gridTemplateColumns: "1fr 1fr 1fr 1.5rem" }
11475
+ ],
11476
+ "data-testid": "key-value-input-item",
11477
+ children: [
11478
+ showIconColumn && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { children: renderIconSelector ? renderIconSelector({
11479
+ value: value.icon,
11480
+ onChange: (icon) => onChange == null ? void 0 : onChange({ ...value, icon }),
11481
+ disabled: disabled2
11482
+ }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11483
+ Input,
11484
+ {
11485
+ label: iconLabel,
11486
+ showLabel: false,
11487
+ disabled: disabled2,
11488
+ onChange: (e) => {
11489
+ onChange == null ? void 0 : onChange({
11490
+ ...value,
11491
+ icon: e.currentTarget.value
11492
+ });
11493
+ },
11494
+ onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
11495
+ onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
11496
+ onKeyDown: handleEnter,
11497
+ value: value.icon || "",
11498
+ errorMessage: isSorting ? void 0 : error == null ? void 0 : error.icon,
11499
+ "data-testid": "icon"
11500
+ }
11501
+ ) }),
11502
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11503
+ Input,
11504
+ {
11505
+ ref: firstInputRef,
11506
+ label: keyLabel,
11507
+ showLabel: false,
11508
+ disabled: disabled2,
11509
+ onChange: (e) => {
11510
+ const hasStoredValue = value.value !== value.key;
11511
+ onChange == null ? void 0 : onChange({
11512
+ key: e.currentTarget.value,
11513
+ value: hasStoredValue ? value.value : e.currentTarget.value,
11514
+ icon: value.icon
11515
+ });
11516
+ },
11517
+ onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
11518
+ onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
11519
+ onKeyDown: handleEnter,
11520
+ value: value.key,
11521
+ errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
11522
+ "data-testid": "key"
11523
+ }
11524
+ ),
11525
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11526
+ Input,
11527
+ {
11528
+ label: valueLabel,
11529
+ showLabel: false,
11530
+ disabled: disabled2,
11531
+ onChange: (e) => {
11532
+ onChange == null ? void 0 : onChange({
11533
+ key: value.key,
11534
+ value: e.currentTarget.value,
11535
+ icon: value.icon
11536
+ });
11537
+ },
11538
+ onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
11539
+ onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
11540
+ onKeyDown: handleEnter,
11541
+ value: value.value,
11542
+ errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
11543
+ "data-testid": "value"
11544
+ }
11545
+ ),
11546
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
11547
+ Button,
11548
+ {
11549
+ type: "button",
11550
+ buttonType: "ghostDestructive",
11551
+ "data-testid": "delete-row",
11552
+ onClick: onDelete,
11553
+ disabled: disabled2 || disabledDelete,
11554
+ size: "zero",
11555
+ children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
11556
+ }
11557
+ ) })
11558
+ ]
11559
+ }
11560
+ )
11495
11561
  ] });
11496
11562
  };
11497
11563
 
@@ -11697,15 +11763,15 @@ var ScrollableListInner = import_react111.css`
11697
11763
 
11698
11764
  // src/components/List/ScrollableList.tsx
11699
11765
  var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
11700
- var ScrollableList = ({ label, children, ...props }) => {
11766
+ var ScrollableList = ({ label: label2, children, ...props }) => {
11701
11767
  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
11702
- label ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
11768
+ label2 ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
11703
11769
  "span",
11704
11770
  {
11705
11771
  css: import_react112.css`
11706
11772
  ${labelText}
11707
11773
  `,
11708
- children: label
11774
+ children: label2
11709
11775
  }
11710
11776
  ) : null,
11711
11777
  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
@@ -11784,7 +11850,7 @@ var ScrollableListIconVisible = import_react113.css`
11784
11850
  // src/components/List/ScrollableListInputItem.tsx
11785
11851
  var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
11786
11852
  var ScrollableListInputItem = ({
11787
- label,
11853
+ label: label2,
11788
11854
  icon,
11789
11855
  active: active2,
11790
11856
  disableShadow = false,
@@ -11804,7 +11870,7 @@ var ScrollableListInputItem = ({
11804
11870
  children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
11805
11871
  /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { css: ScrollableListInputText, children: [
11806
11872
  icon,
11807
- label
11873
+ label2
11808
11874
  ] }),
11809
11875
  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { css: ScrollableListHiddenInput, children }),
11810
11876
  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
@@ -12194,20 +12260,20 @@ var LoadingOverlay = ({
12194
12260
  );
12195
12261
  };
12196
12262
  var LoadingAnimation = ({
12197
- label,
12263
+ label: label2,
12198
12264
  width,
12199
- css: css111,
12265
+ css: css112,
12200
12266
  isPaused
12201
12267
  }) => {
12202
12268
  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
12203
12269
  "div",
12204
12270
  {
12205
- "aria-label": label,
12271
+ "aria-label": label2,
12206
12272
  style: {
12207
12273
  width: typeof width === "number" ? `${width}px` : width,
12208
12274
  height: typeof width === "number" ? `${width}px` : width
12209
12275
  },
12210
- css: [loaderAnimationContainer, css111],
12276
+ css: [loaderAnimationContainer, css112],
12211
12277
  className: `loader-container${isPaused ? " paused" : ""}`,
12212
12278
  children: [
12213
12279
  /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "bottom-cubes", children: [
@@ -13321,10 +13387,10 @@ var ParameterShellContext = (0, import_react129.createContext)({
13321
13387
  }
13322
13388
  });
13323
13389
  var useParameterShell = () => {
13324
- const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react129.useContext)(ParameterShellContext);
13390
+ const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react129.useContext)(ParameterShellContext);
13325
13391
  return {
13326
13392
  id,
13327
- label,
13393
+ label: label2,
13328
13394
  hiddenLabel,
13329
13395
  errorMessage,
13330
13396
  handleManuallySetErrorMessage
@@ -13840,16 +13906,6 @@ var toggleInput2 = import_react138.css`
13840
13906
  color: var(--white);
13841
13907
  }
13842
13908
 
13843
- &:indeterminate,
13844
- &:indeterminate:hover,
13845
- &:indeterminate:focus {
13846
- background: var(--accent-dark-active)
13847
- url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
13848
- no-repeat center center;
13849
- border-color: var(--accent-dark-active);
13850
- color: var(--white);
13851
- }
13852
-
13853
13909
  &:hover {
13854
13910
  border-color: var(--accent-dark-hover);
13855
13911
  }
@@ -13860,6 +13916,17 @@ var toggleInput2 = import_react138.css`
13860
13916
  border-color: var(--gray-300);
13861
13917
  }
13862
13918
  `;
13919
+ var toggleInputIndeterminateState = import_react138.css`
13920
+ &:indeterminate,
13921
+ &:indeterminate:hover,
13922
+ &:indeterminate:focus {
13923
+ background: var(--accent-dark-active)
13924
+ url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
13925
+ no-repeat center center;
13926
+ border-color: var(--accent-dark-active);
13927
+ color: var(--white);
13928
+ }
13929
+ `;
13863
13930
  var inlineLabel2 = import_react138.css`
13864
13931
  color: var(--inline-label-color);
13865
13932
  padding-left: var(--spacing-md);
@@ -14003,7 +14070,7 @@ init_emotion_jsx_shim();
14003
14070
  var import_react139 = require("react");
14004
14071
  var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
14005
14072
  var ParameterMenuButton = (0, import_react139.forwardRef)(
14006
- ({ label, children, disabled: disabled2 }, ref) => {
14073
+ ({ label: label2, children, disabled: disabled2 }, ref) => {
14007
14074
  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
14008
14075
  Menu,
14009
14076
  {
@@ -14014,7 +14081,7 @@ var ParameterMenuButton = (0, import_react139.forwardRef)(
14014
14081
  className: "parameter-menu",
14015
14082
  css: [inputMenu, inputMenuHover],
14016
14083
  type: "button",
14017
- "aria-label": `${label} options`,
14084
+ "aria-label": `${label2} options`,
14018
14085
  ref,
14019
14086
  disabled: disabled2,
14020
14087
  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
@@ -14058,7 +14125,7 @@ var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
14058
14125
  var extractParameterProps = (props) => {
14059
14126
  const {
14060
14127
  id,
14061
- label,
14128
+ label: label2,
14062
14129
  caption,
14063
14130
  captionTestId,
14064
14131
  errorMessage,
@@ -14076,7 +14143,7 @@ var extractParameterProps = (props) => {
14076
14143
  return {
14077
14144
  shellProps: {
14078
14145
  id,
14079
- label,
14146
+ label: label2,
14080
14147
  caption,
14081
14148
  captionTestId,
14082
14149
  errorMessage,
@@ -14094,7 +14161,7 @@ var extractParameterProps = (props) => {
14094
14161
  };
14095
14162
  };
14096
14163
  var ParameterShell = ({
14097
- label,
14164
+ label: label2,
14098
14165
  labelLeadingIcon,
14099
14166
  labelTrailingIcon,
14100
14167
  hiddenLabel,
@@ -14120,7 +14187,7 @@ var ParameterShell = ({
14120
14187
  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: inputContainer2, ...props, id, children: [
14121
14188
  hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterLabel, { id, css: labelText2, children: [
14122
14189
  labelLeadingIcon != null ? labelLeadingIcon : null,
14123
- label,
14190
+ label2,
14124
14191
  labelTrailingIcon != null ? labelTrailingIcon : null
14125
14192
  ] }),
14126
14193
  !title ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
@@ -14143,13 +14210,13 @@ var ParameterShell = ({
14143
14210
  children: actionItems
14144
14211
  }
14145
14212
  ) : null,
14146
- menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterMenuButton, { label: `${label} menu`, disabled: props.disabled, children: menuItems }) : null,
14213
+ menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterMenuButton, { label: `${label2} menu`, disabled: props.disabled, children: menuItems }) : null,
14147
14214
  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
14148
14215
  ParameterShellContext.Provider,
14149
14216
  {
14150
14217
  value: {
14151
14218
  id,
14152
- label,
14219
+ label: label2,
14153
14220
  hiddenLabel,
14154
14221
  errorMessage: errorMessaging,
14155
14222
  handleManuallySetErrorMessage: (message) => setErrorMessage(message)
@@ -14192,7 +14259,7 @@ var ParameterImage = (0, import_react143.forwardRef)(
14192
14259
  );
14193
14260
  var ParameterImageInner = (0, import_react143.forwardRef)((props, ref) => {
14194
14261
  const { value } = props;
14195
- const { id, label, hiddenLabel, errorMessage } = useParameterShell();
14262
+ const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
14196
14263
  const deferredValue = (0, import_react143.useDeferredValue)(value);
14197
14264
  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
14198
14265
  /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
@@ -14202,7 +14269,7 @@ var ParameterImageInner = (0, import_react143.forwardRef)((props, ref) => {
14202
14269
  type: "text",
14203
14270
  id,
14204
14271
  ref,
14205
- "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
14272
+ "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
14206
14273
  autoComplete: "off",
14207
14274
  ...props
14208
14275
  }
@@ -14220,7 +14287,7 @@ var ParameterInput = (0, import_react144.forwardRef)((props, ref) => {
14220
14287
  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterInputInner, { ref, ...innerProps }) });
14221
14288
  });
14222
14289
  var ParameterInputInner = (0, import_react144.forwardRef)(({ enableMouseWheel = false, ...props }, ref) => {
14223
- const { id, label, hiddenLabel } = useParameterShell();
14290
+ const { id, label: label2, hiddenLabel } = useParameterShell();
14224
14291
  const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
14225
14292
  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
14226
14293
  "input",
@@ -14228,7 +14295,7 @@ var ParameterInputInner = (0, import_react144.forwardRef)(({ enableMouseWheel =
14228
14295
  css: input3,
14229
14296
  id,
14230
14297
  type: props.type || "text",
14231
- "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
14298
+ "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
14232
14299
  autoComplete: "off",
14233
14300
  ref,
14234
14301
  onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
@@ -14266,7 +14333,7 @@ var ParameterLink = (0, import_react145.forwardRef)(
14266
14333
  );
14267
14334
  var ParameterLinkInner = (0, import_react145.forwardRef)(
14268
14335
  ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
14269
- const { id, label, hiddenLabel } = useParameterShell();
14336
+ const { id, label: label2, hiddenLabel } = useParameterShell();
14270
14337
  if (!props.value)
14271
14338
  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
14272
14339
  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { css: inputWrapper, children: [
@@ -14278,7 +14345,7 @@ var ParameterLinkInner = (0, import_react145.forwardRef)(
14278
14345
  readOnly: Boolean(props.value),
14279
14346
  id,
14280
14347
  ref,
14281
- "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
14348
+ "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
14282
14349
  ...props
14283
14350
  }
14284
14351
  ),
@@ -14320,7 +14387,7 @@ var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
14320
14387
  };
14321
14388
  var ParameterMultiSelectInner = (props) => {
14322
14389
  var _a;
14323
- const { id, label } = useParameterShell();
14390
+ const { id, label: label2 } = useParameterShell();
14324
14391
  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
14325
14392
  InputComboBox,
14326
14393
  {
@@ -14330,7 +14397,7 @@ var ParameterMultiSelectInner = (props) => {
14330
14397
  isMulti: true,
14331
14398
  isClearable: (_a = props.isClearable) != null ? _a : false,
14332
14399
  id,
14333
- "aria-label": typeof label === "string" ? label : void 0,
14400
+ "aria-label": typeof label2 === "string" ? label2 : void 0,
14334
14401
  classNamePrefix: "parameter-multi-select-combobox",
14335
14402
  styles: {
14336
14403
  menuPortal: (base) => ({
@@ -14383,7 +14450,7 @@ var ParameterNameAndPublicIdInput = ({
14383
14450
  publicIdError,
14384
14451
  readOnly = false,
14385
14452
  hasInitialPublicIdField,
14386
- label = "Name",
14453
+ label: label2 = "Name",
14387
14454
  warnOverLength,
14388
14455
  nameIdField = "name",
14389
14456
  nameCaption,
@@ -14404,7 +14471,7 @@ var ParameterNameAndPublicIdInput = ({
14404
14471
  {
14405
14472
  id: nameIdField,
14406
14473
  name: nameIdField,
14407
- label,
14474
+ label: label2,
14408
14475
  "data-testid": "name-field",
14409
14476
  autoComplete: "off",
14410
14477
  "data-af": "true",
@@ -14448,9 +14515,658 @@ var ParameterNameAndPublicIdInput = ({
14448
14515
  ] });
14449
14516
  };
14450
14517
 
14518
+ // src/components/ParameterInputs/ParameterNumberSlider.tsx
14519
+ init_emotion_jsx_shim();
14520
+ var import_react149 = require("react");
14521
+
14522
+ // src/components/Slider/index.ts
14523
+ init_emotion_jsx_shim();
14524
+
14525
+ // src/components/Slider/Slider.tsx
14526
+ init_emotion_jsx_shim();
14527
+ var import_react148 = require("react");
14528
+
14529
+ // src/components/Slider/SliderLabels.tsx
14530
+ init_emotion_jsx_shim();
14531
+ var import_react147 = require("react");
14532
+
14533
+ // src/components/Slider/styles/Slider.styles.ts
14534
+ init_emotion_jsx_shim();
14535
+ var import_react146 = require("@emotion/react");
14536
+ var thumbSize = "20px";
14537
+ var disabledThumbStyles = import_react146.css`
14538
+ background: var(--gray-500);
14539
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cline x1='4' y1='9' x2='16' y2='9' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
14540
+ background-repeat: no-repeat;
14541
+ background-position: center;
14542
+ background-size: 12px 12px;
14543
+ `;
14544
+ var container3 = import_react146.css`
14545
+ display: flex;
14546
+ align-items: flex-start;
14547
+ gap: var(--spacing-base);
14548
+ width: 100%;
14549
+ `;
14550
+ var sliderContainer = import_react146.css`
14551
+ flex: 1;
14552
+ display: flex;
14553
+ flex-direction: column;
14554
+ `;
14555
+ var sliderTrackContainer = import_react146.css`
14556
+ position: relative;
14557
+ padding: var(--spacing-xs) 0;
14558
+ `;
14559
+ var progressTrack = import_react146.css`
14560
+ position: absolute;
14561
+ top: 50%;
14562
+ left: 0;
14563
+ right: 0;
14564
+ height: 4px;
14565
+ transform: translateY(-50%);
14566
+ margin-top: -3px;
14567
+ border-radius: var(--rounded-sm);
14568
+ `;
14569
+ var progressTrackBackground = import_react146.css`
14570
+ position: absolute;
14571
+ top: 0;
14572
+ left: 0;
14573
+ right: 0;
14574
+ bottom: 0;
14575
+ background: var(--gray-200);
14576
+ border-radius: var(--rounded-sm);
14577
+ box-shadow: 0 0 0 1px white;
14578
+ `;
14579
+ var progressTrackFill = import_react146.css`
14580
+ position: absolute;
14581
+ top: 0;
14582
+ left: 0;
14583
+ bottom: 0;
14584
+ background: var(--accent-light);
14585
+ border-radius: var(--rounded-sm);
14586
+ `;
14587
+ var tickMarksContainer = import_react146.css`
14588
+ position: relative;
14589
+ height: 1rem;
14590
+ margin-top: calc(-1 * var(--spacing-base) + var(--spacing-xs));
14591
+ `;
14592
+ var tickMark = import_react146.css`
14593
+ position: absolute;
14594
+ top: 0;
14595
+ width: 0.5px;
14596
+ height: 8px;
14597
+ background-color: var(--gray-300);
14598
+ `;
14599
+ var largeTickMark = import_react146.css`
14600
+ position: absolute;
14601
+ top: 0;
14602
+ width: 1px;
14603
+ height: 12px;
14604
+ background-color: var(--gray-400);
14605
+ transform: translateX(-50%);
14606
+ `;
14607
+ var slider = import_react146.css`
14608
+ appearance: none;
14609
+ width: 100%;
14610
+ width: calc(100% + ${thumbSize});
14611
+ left: calc(-${thumbSize} / 2);
14612
+ height: ${thumbSize};
14613
+ background: transparent;
14614
+ outline: none;
14615
+ cursor: pointer;
14616
+ position: relative;
14617
+ z-index: 3;
14618
+
14619
+ &:disabled {
14620
+ cursor: not-allowed;
14621
+ }
14622
+
14623
+ /* Webkit (Chrome, Safari) */
14624
+ &::-webkit-slider-track {
14625
+ width: 100%;
14626
+ height: 4px;
14627
+ background: transparent;
14628
+ border-radius: var(--rounded-sm);
14629
+ }
14630
+
14631
+ &::-webkit-slider-thumb {
14632
+ appearance: none;
14633
+ height: ${thumbSize};
14634
+ width: ${thumbSize};
14635
+ border-radius: 50%;
14636
+ background: var(--accent-dark);
14637
+ cursor: pointer;
14638
+ border: 2px solid var(--white);
14639
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
14640
+ position: relative;
14641
+ z-index: 2;
14642
+
14643
+ &:hover {
14644
+ background: var(--accent-dark-hover);
14645
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
14646
+ }
14647
+
14648
+ &:active {
14649
+ background: var(--accent-dark-active);
14650
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
14651
+ }
14652
+ }
14653
+
14654
+ &:disabled::-webkit-slider-thumb {
14655
+ ${disabledThumbStyles}
14656
+
14657
+ &:hover,
14658
+ &:active {
14659
+ ${disabledThumbStyles}
14660
+ }
14661
+ }
14662
+
14663
+ /* Firefox */
14664
+ &::-moz-range-track {
14665
+ width: 100%;
14666
+ height: 4px;
14667
+ background: transparent;
14668
+ border-radius: var(--rounded-sm);
14669
+ border: none;
14670
+ }
14671
+
14672
+ &::-moz-range-thumb {
14673
+ height: ${thumbSize};
14674
+ width: ${thumbSize};
14675
+ border-radius: 50%;
14676
+ background: var(--accent-dark);
14677
+ cursor: pointer;
14678
+ border: 2px solid var(--white);
14679
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
14680
+
14681
+ &:hover {
14682
+ background: var(--accent-dark-hover);
14683
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
14684
+ }
14685
+
14686
+ &:active {
14687
+ background: var(--accent-dark-active);
14688
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
14689
+ }
14690
+ }
14691
+
14692
+ &:disabled::-moz-range-thumb {
14693
+ ${disabledThumbStyles}
14694
+
14695
+ &:hover,
14696
+ &:active {
14697
+ ${disabledThumbStyles}
14698
+ }
14699
+ }
14700
+
14701
+ /* Focus states */
14702
+ &:focus {
14703
+ outline: none;
14704
+ }
14705
+
14706
+ &:focus::-webkit-slider-thumb {
14707
+ box-shadow:
14708
+ 0 2px 4px rgba(0, 0, 0, 0.1),
14709
+ 0 0 0 3px var(--accent-light);
14710
+ }
14711
+
14712
+ &:focus::-moz-range-thumb {
14713
+ box-shadow:
14714
+ 0 2px 4px rgba(0, 0, 0, 0.1),
14715
+ 0 0 0 3px var(--accent-light);
14716
+ }
14717
+ `;
14718
+ var labelsContainer = import_react146.css`
14719
+ position: relative;
14720
+ height: 1.5rem;
14721
+ width: 100%;
14722
+ `;
14723
+ var label = import_react146.css`
14724
+ position: absolute;
14725
+ top: 0;
14726
+ font-size: var(--text-sm);
14727
+ color: var(--gray-500);
14728
+ text-align: center;
14729
+
14730
+ /* Truncation for long labels */
14731
+ white-space: nowrap;
14732
+ overflow: hidden;
14733
+ text-overflow: ellipsis;
14734
+
14735
+ /* Set max width to prevent labels from extending too far */
14736
+ max-width: 25%;
14737
+
14738
+ /* Default centering transform */
14739
+ transform: translateX(-50%);
14740
+
14741
+ /* Smooth transitions for label changes */
14742
+ transition:
14743
+ opacity var(--duration-fast) var(--timing-ease-out),
14744
+ transform var(--duration-fast) var(--timing-ease-out);
14745
+
14746
+ /* Handle edge cases for first and last labels */
14747
+ &[data-position='0'] {
14748
+ transform: translateX(0);
14749
+ text-align: left;
14750
+ max-width: 50%;
14751
+ }
14752
+
14753
+ &[data-position='100'] {
14754
+ transform: translateX(-100%);
14755
+ text-align: right;
14756
+ max-width: 50%;
14757
+ }
14758
+
14759
+ /* Handle single label case by centering it */
14760
+ &:only-child {
14761
+ left: 50% !important;
14762
+ transform: translateX(-50%);
14763
+ text-align: center;
14764
+ max-width: 100%;
14765
+ }
14766
+ `;
14767
+ var numberInputContainer = import_react146.css`
14768
+ flex-shrink: 0;
14769
+ min-width: 2rem;
14770
+ margin-top: var(--spacing-sm);
14771
+ `;
14772
+ var numberInput2 = import_react146.css`
14773
+ appearance: none;
14774
+ background-color: var(--white);
14775
+ border: 1px solid var(--gray-300);
14776
+ border-radius: var(--rounded-sm);
14777
+ color: var(--gray-700);
14778
+ padding: var(--spacing-sm);
14779
+ width: 100%;
14780
+ font-size: var(--text-sm);
14781
+ text-align: center;
14782
+ transition:
14783
+ background var(--duration-fast) var(--timing-ease-out),
14784
+ border-color var(--duration-fast) var(--timing-ease-out),
14785
+ color var(--duration-fast) var(--timing-ease-out),
14786
+ box-shadow var(--duration-fast) var(--timing-ease-out);
14787
+
14788
+ &::placeholder {
14789
+ color: var(--gray-400);
14790
+ }
14791
+
14792
+ &:hover {
14793
+ border-color: var(--accent-dark-hover);
14794
+ }
14795
+
14796
+ &:focus {
14797
+ border-color: var(--accent-dark-active);
14798
+ box-shadow: var(--elevation-100);
14799
+ outline: none;
14800
+ }
14801
+
14802
+ &:disabled {
14803
+ cursor: not-allowed;
14804
+ color: var(--gray-300);
14805
+ border-color: var(--gray-300);
14806
+ background-color: var(--gray-50);
14807
+ }
14808
+
14809
+ /* Hide number input spinners */
14810
+ &::-webkit-outer-spin-button,
14811
+ &::-webkit-inner-spin-button {
14812
+ appearance: none;
14813
+ margin: 0;
14814
+ }
14815
+
14816
+ &[type='number'] {
14817
+ -moz-appearance: textfield;
14818
+ }
14819
+ `;
14820
+
14821
+ // src/components/Slider/SliderLabels.tsx
14822
+ var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
14823
+ function estimateLabelWidth(text) {
14824
+ const fontSize = 14;
14825
+ const avgCharWidthRatio = 0.7;
14826
+ const avgCharWidth = fontSize * avgCharWidthRatio;
14827
+ const basePadding = 24;
14828
+ return Math.ceil(text.length * avgCharWidth + basePadding);
14829
+ }
14830
+ function generateSymmetricIndices(totalCount) {
14831
+ if (totalCount <= 0) return [];
14832
+ if (totalCount === 1) return [[0]];
14833
+ if (totalCount === 2) return [[0, totalCount - 1]];
14834
+ const levels = [];
14835
+ levels.push([0, totalCount - 1]);
14836
+ if (totalCount % 2 === 1) {
14837
+ levels.push([Math.floor(totalCount / 2)]);
14838
+ } else {
14839
+ const mid1 = Math.floor(totalCount / 2) - 1;
14840
+ const mid2 = Math.floor(totalCount / 2);
14841
+ levels.push([mid1, mid2]);
14842
+ }
14843
+ let currentDivisions = 4;
14844
+ while (currentDivisions <= totalCount) {
14845
+ const newIndices = [];
14846
+ for (let i = 1; i < currentDivisions; i += 2) {
14847
+ const index = Math.round(i / currentDivisions * (totalCount - 1));
14848
+ if (index > 0 && index < totalCount - 1) {
14849
+ newIndices.push(index);
14850
+ }
14851
+ }
14852
+ if (newIndices.length > 0) {
14853
+ levels.push(newIndices);
14854
+ }
14855
+ currentDivisions *= 2;
14856
+ }
14857
+ return levels;
14858
+ }
14859
+ function labelsWouldOverlap(pos1, width1, pos2, width2, containerWidth) {
14860
+ const pixelPos1 = pos1 / 100 * containerWidth;
14861
+ const pixelPos2 = pos2 / 100 * containerWidth;
14862
+ const buffer = 8;
14863
+ const left1 = pixelPos1 - width1 / 2 - buffer / 2;
14864
+ const right1 = pixelPos1 + width1 / 2 + buffer / 2;
14865
+ const left2 = pixelPos2 - width2 / 2 - buffer / 2;
14866
+ const right2 = pixelPos2 + width2 / 2 + buffer / 2;
14867
+ return !(right1 < left2 || right2 < left1);
14868
+ }
14869
+ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
14870
+ const labelsWithTicks = ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label);
14871
+ if (labelsWithTicks.length === 0) {
14872
+ return [];
14873
+ }
14874
+ const currentSelectionIndex = labelsWithTicks.findIndex(({ tick }) => tick.position === currentValue);
14875
+ const distributionLevels = generateSymmetricIndices(labelsWithTicks.length);
14876
+ let visibleIndices = new Set(distributionLevels[0] || []);
14877
+ if (currentSelectionIndex !== -1) {
14878
+ visibleIndices.add(currentSelectionIndex);
14879
+ }
14880
+ for (let levelIndex = 1; levelIndex < distributionLevels.length; levelIndex++) {
14881
+ const candidateIndices = new Set(visibleIndices);
14882
+ for (const index of distributionLevels[levelIndex]) {
14883
+ candidateIndices.add(index);
14884
+ }
14885
+ const maxLabelsForWidth = Math.max(2, Math.floor(containerWidth / 100));
14886
+ if (candidateIndices.size > maxLabelsForWidth) {
14887
+ break;
14888
+ }
14889
+ const candidateArray = Array.from(candidateIndices).sort((a, b) => a - b);
14890
+ let hasOverlap = false;
14891
+ for (let i = 0; i < candidateArray.length - 1; i++) {
14892
+ const curr = labelsWithTicks[candidateArray[i]];
14893
+ const next = labelsWithTicks[candidateArray[i + 1]];
14894
+ const currWidth = estimateLabelWidth(curr.tick.label || "");
14895
+ const nextWidth = estimateLabelWidth(next.tick.label || "");
14896
+ if (labelsWouldOverlap(curr.tick.percentage, currWidth, next.tick.percentage, nextWidth, containerWidth)) {
14897
+ hasOverlap = true;
14898
+ break;
14899
+ }
14900
+ }
14901
+ if (!hasOverlap) {
14902
+ visibleIndices = candidateIndices;
14903
+ } else {
14904
+ break;
14905
+ }
14906
+ }
14907
+ if (currentSelectionIndex !== -1 && visibleIndices.has(currentSelectionIndex)) {
14908
+ const currentTick = labelsWithTicks[currentSelectionIndex].tick;
14909
+ const currentWidth = estimateLabelWidth(currentTick.label || "");
14910
+ const sortedVisible = Array.from(visibleIndices).sort((a, b) => a - b);
14911
+ const currentIndexInVisible = sortedVisible.indexOf(currentSelectionIndex);
14912
+ if (currentIndexInVisible > 0) {
14913
+ const leftIndex = sortedVisible[currentIndexInVisible - 1];
14914
+ const leftTick = labelsWithTicks[leftIndex].tick;
14915
+ const leftWidth = estimateLabelWidth(leftTick.label || "");
14916
+ if (labelsWouldOverlap(
14917
+ leftTick.percentage,
14918
+ leftWidth,
14919
+ currentTick.percentage,
14920
+ currentWidth,
14921
+ containerWidth
14922
+ )) {
14923
+ visibleIndices.delete(leftIndex);
14924
+ }
14925
+ }
14926
+ if (currentIndexInVisible < sortedVisible.length - 1) {
14927
+ const rightIndex = sortedVisible[currentIndexInVisible + 1];
14928
+ const rightTick = labelsWithTicks[rightIndex].tick;
14929
+ const rightWidth = estimateLabelWidth(rightTick.label || "");
14930
+ if (labelsWouldOverlap(
14931
+ currentTick.percentage,
14932
+ currentWidth,
14933
+ rightTick.percentage,
14934
+ rightWidth,
14935
+ containerWidth
14936
+ )) {
14937
+ visibleIndices.delete(rightIndex);
14938
+ }
14939
+ }
14940
+ }
14941
+ return labelsWithTicks.map(({ index }, arrayIndex) => ({
14942
+ tickIndex: index,
14943
+ isVisible: visibleIndices.has(arrayIndex),
14944
+ priority: visibleIndices.has(arrayIndex) ? 1 : 10
14945
+ // Simple priority for visible vs hidden
14946
+ }));
14947
+ }
14948
+ function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
14949
+ const containerRef = (0, import_react147.useRef)(null);
14950
+ const [measuredWidth, setMeasuredWidth] = (0, import_react147.useState)(containerWidth);
14951
+ (0, import_react147.useEffect)(() => {
14952
+ if (containerRef.current) {
14953
+ const resizeObserver = new ResizeObserver((entries) => {
14954
+ for (const entry of entries) {
14955
+ setMeasuredWidth(entry.contentRect.width);
14956
+ }
14957
+ });
14958
+ resizeObserver.observe(containerRef.current);
14959
+ setMeasuredWidth(containerRef.current.offsetWidth);
14960
+ return () => resizeObserver.disconnect();
14961
+ }
14962
+ }, []);
14963
+ const labelVisibilities = calculateLabelVisibility(ticks, currentValue, measuredWidth);
14964
+ const visibilityMap = new Map(labelVisibilities.map((lv) => [lv.tickIndex, lv.isVisible]));
14965
+ return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ref: containerRef, css: labelsContainer, children: ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label).map(({ tick, index }) => {
14966
+ var _a;
14967
+ const isVisible = (_a = visibilityMap.get(index)) != null ? _a : false;
14968
+ return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
14969
+ "div",
14970
+ {
14971
+ css: label,
14972
+ style: {
14973
+ left: `${tick.percentage}%`,
14974
+ opacity: isVisible ? 1 : 0,
14975
+ pointerEvents: isVisible ? "auto" : "none"
14976
+ },
14977
+ "data-position": tick.percentage === 0 ? "0" : tick.percentage === 100 ? "100" : void 0,
14978
+ title: tick.label,
14979
+ children: tick.label
14980
+ },
14981
+ `label-${index}-${tick.position}`
14982
+ );
14983
+ }) });
14984
+ }
14985
+
14986
+ // src/components/Slider/Slider.tsx
14987
+ var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
14988
+ var Slider = (0, import_react148.forwardRef)(
14989
+ ({
14990
+ value,
14991
+ onChange,
14992
+ onBlur,
14993
+ min: propMin,
14994
+ max: propMax,
14995
+ step: propStep,
14996
+ options,
14997
+ showNumberInput = !options,
14998
+ // Default: show for numeric mode, hide for options mode
14999
+ disabled: disabled2 = false,
15000
+ "aria-label": ariaLabel,
15001
+ id,
15002
+ name
15003
+ }, ref) => {
15004
+ const isOptionsMode = Boolean(options && options.length > 0);
15005
+ const { min, max, step, smallTicks, largeTicks } = (0, import_react148.useMemo)(() => {
15006
+ if (isOptionsMode && options) {
15007
+ return {
15008
+ min: 0,
15009
+ max: options.length - 1,
15010
+ step: 1,
15011
+ smallTicks: [],
15012
+ // No small ticks for options mode
15013
+ largeTicks: options.map((option, index) => ({
15014
+ position: index,
15015
+ percentage: index / (options.length - 1) * 100,
15016
+ label: option.text,
15017
+ isLarge: true
15018
+ }))
15019
+ };
15020
+ }
15021
+ const numericMin = propMin != null ? propMin : 0;
15022
+ const numericMax = propMax != null ? propMax : 100;
15023
+ const numericStep = propStep != null ? propStep : numericMax - numericMin > 20 ? Math.ceil((numericMax - numericMin) / 20) : 1;
15024
+ const range = numericMax - numericMin;
15025
+ const totalSteps = Math.floor(range / numericStep);
15026
+ const smallTicks2 = [];
15027
+ if (totalSteps <= 100) {
15028
+ for (let i = 0; i <= totalSteps; i++) {
15029
+ const position = numericMin + i * numericStep;
15030
+ const percentage = (position - numericMin) / range * 100;
15031
+ smallTicks2.push({
15032
+ position,
15033
+ percentage,
15034
+ isLarge: false
15035
+ });
15036
+ }
15037
+ } else {
15038
+ const tickInterval = Math.ceil(totalSteps / 100);
15039
+ for (let i = 0; i <= totalSteps; i += tickInterval) {
15040
+ const position = numericMin + i * numericStep;
15041
+ const percentage = (position - numericMin) / range * 100;
15042
+ smallTicks2.push({
15043
+ position,
15044
+ percentage,
15045
+ isLarge: false
15046
+ });
15047
+ }
15048
+ }
15049
+ const largeTicks2 = [
15050
+ { position: numericMin, percentage: 0, label: numericMin.toString(), isLarge: true },
15051
+ { position: numericMax, percentage: 100, label: numericMax.toString(), isLarge: true }
15052
+ ];
15053
+ if (range >= 20) {
15054
+ const middlePosition = numericMin + range / 2;
15055
+ largeTicks2.push({
15056
+ position: middlePosition,
15057
+ percentage: 50,
15058
+ label: Math.round(middlePosition).toString(),
15059
+ isLarge: true
15060
+ });
15061
+ }
15062
+ return {
15063
+ min: numericMin,
15064
+ max: numericMax,
15065
+ step: numericStep,
15066
+ smallTicks: smallTicks2,
15067
+ largeTicks: largeTicks2
15068
+ };
15069
+ }, [isOptionsMode, options, propMin, propMax, propStep]);
15070
+ const clampedValue = Math.min(Math.max(value, min), max);
15071
+ const handleSliderChange = (0, import_react148.useCallback)(
15072
+ (event) => {
15073
+ const newValue = Number(event.target.value);
15074
+ onChange(newValue);
15075
+ },
15076
+ [onChange]
15077
+ );
15078
+ const handleNumberInputChange = (0, import_react148.useCallback)(
15079
+ (event) => {
15080
+ const newValue = event.target.value === "" ? min : Number(event.target.value);
15081
+ onChange(newValue);
15082
+ },
15083
+ [onChange, min]
15084
+ );
15085
+ const fillPercentage = (clampedValue - min) / (max - min) * 100;
15086
+ return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: container3, children: [
15087
+ /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: sliderContainer, children: [
15088
+ /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: sliderTrackContainer, children: [
15089
+ /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: progressTrack, children: [
15090
+ /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: progressTrackBackground }),
15091
+ /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: progressTrackFill, style: { width: `${fillPercentage}%` } })
15092
+ ] }),
15093
+ /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
15094
+ "input",
15095
+ {
15096
+ ref,
15097
+ type: "range",
15098
+ id,
15099
+ name,
15100
+ min,
15101
+ max,
15102
+ step,
15103
+ value: clampedValue,
15104
+ onChange: handleSliderChange,
15105
+ onBlur,
15106
+ disabled: disabled2,
15107
+ "aria-label": ariaLabel,
15108
+ css: slider
15109
+ }
15110
+ )
15111
+ ] }),
15112
+ /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: tickMarksContainer, children: [
15113
+ smallTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: tickMark, style: { left: `${tick.percentage}%` } }, `small-${index}`)),
15114
+ largeTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
15115
+ "div",
15116
+ {
15117
+ css: largeTickMark,
15118
+ style: { left: `${tick.percentage}%` }
15119
+ },
15120
+ `large-${index}`
15121
+ ))
15122
+ ] }),
15123
+ largeTicks.some((tick) => tick.label) && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SliderLabels, { ticks: largeTicks, currentValue: clampedValue })
15124
+ ] }),
15125
+ showNumberInput && !isOptionsMode && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: numberInputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
15126
+ "input",
15127
+ {
15128
+ type: "number",
15129
+ value: clampedValue,
15130
+ onChange: handleNumberInputChange,
15131
+ onBlur,
15132
+ disabled: disabled2,
15133
+ min,
15134
+ max,
15135
+ step,
15136
+ css: numberInput2
15137
+ }
15138
+ ) })
15139
+ ] });
15140
+ }
15141
+ );
15142
+ Slider.displayName = "Slider";
15143
+
15144
+ // src/components/ParameterInputs/ParameterNumberSlider.tsx
15145
+ var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
15146
+ var ParameterNumberSlider = (0, import_react149.forwardRef)(
15147
+ (props, ref) => {
15148
+ const { shellProps, innerProps } = extractParameterProps(props);
15149
+ return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ParameterShell, { "data-testid": "parameter-number-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ParameterNumberSliderInner, { ref, ...innerProps }) });
15150
+ }
15151
+ );
15152
+ var ParameterNumberSliderInner = (0, import_react149.forwardRef)(({ ...props }, ref) => {
15153
+ const { id, label: label2, hiddenLabel } = useParameterShell();
15154
+ return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
15155
+ Slider,
15156
+ {
15157
+ ref,
15158
+ id,
15159
+ "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
15160
+ ...props
15161
+ }
15162
+ );
15163
+ });
15164
+ ParameterNumberSlider.displayName = "ParameterNumberSlider";
15165
+ ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
15166
+
14451
15167
  // src/components/ParameterInputs/ParameterRichText.tsx
14452
15168
  init_emotion_jsx_shim();
14453
- var import_react159 = require("@emotion/react");
15169
+ var import_react163 = require("@emotion/react");
14454
15170
  var import_list3 = require("@lexical/list");
14455
15171
  var import_markdown = require("@lexical/markdown");
14456
15172
  var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -14587,7 +15303,7 @@ var defaultParameterConfiguration = {
14587
15303
  // src/components/ParameterInputs/ParameterRichText.tsx
14588
15304
  var import_fast_equals2 = require("fast-equals");
14589
15305
  var import_lexical10 = require("lexical");
14590
- var import_react160 = require("react");
15306
+ var import_react164 = require("react");
14591
15307
 
14592
15308
  // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
14593
15309
  init_emotion_jsx_shim();
@@ -14610,10 +15326,10 @@ init_emotion_jsx_shim();
14610
15326
  var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
14611
15327
  var import_utils4 = require("@lexical/utils");
14612
15328
  var import_lexical = require("lexical");
14613
- var import_react146 = require("react");
15329
+ var import_react150 = require("react");
14614
15330
  function DisableStylesPlugin() {
14615
15331
  const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
14616
- (0, import_react146.useEffect)(() => {
15332
+ (0, import_react150.useEffect)(() => {
14617
15333
  return (0, import_utils4.mergeRegister)(
14618
15334
  // Disable text alignment on paragraph nodes
14619
15335
  editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
@@ -14874,10 +15590,10 @@ init_emotion_jsx_shim();
14874
15590
  var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
14875
15591
  var import_utils5 = require("@lexical/utils");
14876
15592
  var import_lexical2 = require("lexical");
14877
- var import_react147 = require("react");
15593
+ var import_react151 = require("react");
14878
15594
  var ImprovedAssetSelectionPlugin = () => {
14879
15595
  const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
14880
- (0, import_react147.useEffect)(() => {
15596
+ (0, import_react151.useEffect)(() => {
14881
15597
  editor.getRootElement();
14882
15598
  const onRootClick = (event) => {
14883
15599
  if (event.target !== editor.getRootElement()) {
@@ -14926,13 +15642,13 @@ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
14926
15642
 
14927
15643
  // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
14928
15644
  init_emotion_jsx_shim();
14929
- var import_react148 = require("@emotion/react");
15645
+ var import_react152 = require("@emotion/react");
14930
15646
  var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
14931
15647
  var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
14932
15648
  var import_utils6 = require("@lexical/utils");
14933
15649
  var import_fast_equals = require("fast-equals");
14934
15650
  var import_lexical4 = require("lexical");
14935
- var import_react149 = require("react");
15651
+ var import_react153 = require("react");
14936
15652
 
14937
15653
  // src/components/ParameterInputs/rich-text/utils.ts
14938
15654
  init_emotion_jsx_shim();
@@ -14991,7 +15707,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
14991
15707
  };
14992
15708
 
14993
15709
  // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
14994
- var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
15710
+ var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
14995
15711
  var isProjectMapLinkValue = (value) => {
14996
15712
  return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
14997
15713
  value.nodeId && value.path && value.projectMapId
@@ -15280,17 +15996,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
15280
15996
  );
15281
15997
  var LINK_POPOVER_OFFSET_X = 0;
15282
15998
  var LINK_POPOVER_OFFSET_Y = 8;
15283
- var linkPopover = import_react148.css`
15999
+ var linkPopover = import_react152.css`
15284
16000
  position: absolute;
15285
16001
  z-index: 11;
15286
16002
  `;
15287
- var linkPopoverContainer = import_react148.css`
16003
+ var linkPopoverContainer = import_react152.css`
15288
16004
  ${Popover};
15289
16005
  ${PopoverVariantSmall};
15290
16006
  align-items: center;
15291
16007
  display: flex;
15292
16008
  `;
15293
- var linkPopoverAnchor = import_react148.css`
16009
+ var linkPopoverAnchor = import_react152.css`
15294
16010
  ${link}
15295
16011
  ${linkColorDefault}
15296
16012
  `;
@@ -15303,17 +16019,17 @@ function LinkNodePlugin({
15303
16019
  return path;
15304
16020
  };
15305
16021
  const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
15306
- const [linkPopoverState, setLinkPopoverState] = (0, import_react149.useState)();
15307
- const linkPopoverElRef = (0, import_react149.useRef)(null);
15308
- const [isEditorFocused, setIsEditorFocused] = (0, import_react149.useState)(false);
15309
- const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react149.useState)(false);
15310
- (0, import_react149.useEffect)(() => {
16022
+ const [linkPopoverState, setLinkPopoverState] = (0, import_react153.useState)();
16023
+ const linkPopoverElRef = (0, import_react153.useRef)(null);
16024
+ const [isEditorFocused, setIsEditorFocused] = (0, import_react153.useState)(false);
16025
+ const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react153.useState)(false);
16026
+ (0, import_react153.useEffect)(() => {
15311
16027
  if (!isEditorFocused && !isLinkPopoverFocused) {
15312
16028
  setLinkPopoverState(void 0);
15313
16029
  return;
15314
16030
  }
15315
16031
  }, [isEditorFocused, isLinkPopoverFocused]);
15316
- (0, import_react149.useEffect)(() => {
16032
+ (0, import_react153.useEffect)(() => {
15317
16033
  if (!editor.hasNodes([LinkNode])) {
15318
16034
  throw new Error("LinkNode not registered on editor");
15319
16035
  }
@@ -15417,7 +16133,7 @@ function LinkNodePlugin({
15417
16133
  )
15418
16134
  );
15419
16135
  }, [editor, onConnectLink]);
15420
- const maybeShowLinkToolbar = (0, import_react149.useCallback)(() => {
16136
+ const maybeShowLinkToolbar = (0, import_react153.useCallback)(() => {
15421
16137
  if (!editor.isEditable()) {
15422
16138
  return;
15423
16139
  }
@@ -15451,7 +16167,7 @@ function LinkNodePlugin({
15451
16167
  }
15452
16168
  });
15453
16169
  }, [editor, positioningAnchorEl]);
15454
- (0, import_react149.useEffect)(() => {
16170
+ (0, import_react153.useEffect)(() => {
15455
16171
  return editor.registerUpdateListener(({ editorState }) => {
15456
16172
  requestAnimationFrame(() => {
15457
16173
  editorState.read(() => {
@@ -15478,8 +16194,8 @@ function LinkNodePlugin({
15478
16194
  });
15479
16195
  });
15480
16196
  };
15481
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
15482
- /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
16197
+ return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
16198
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
15483
16199
  import_LexicalNodeEventPlugin.NodeEventPlugin,
15484
16200
  {
15485
16201
  nodeType: LinkNode,
@@ -15489,7 +16205,7 @@ function LinkNodePlugin({
15489
16205
  }
15490
16206
  }
15491
16207
  ),
15492
- linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
16208
+ linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
15493
16209
  "div",
15494
16210
  {
15495
16211
  css: linkPopover,
@@ -15498,8 +16214,8 @@ function LinkNodePlugin({
15498
16214
  top: linkPopoverState.position.y
15499
16215
  },
15500
16216
  ref: linkPopoverElRef,
15501
- children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { css: linkPopoverContainer, children: [
15502
- linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
16217
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: linkPopoverContainer, children: [
16218
+ linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
15503
16219
  "a",
15504
16220
  {
15505
16221
  href: parsePath(
@@ -15511,7 +16227,7 @@ function LinkNodePlugin({
15511
16227
  children: parsePath(linkPopoverState.node.__link.path)
15512
16228
  }
15513
16229
  ),
15514
- /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
16230
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
15515
16231
  Button,
15516
16232
  {
15517
16233
  size: "xs",
@@ -15519,7 +16235,7 @@ function LinkNodePlugin({
15519
16235
  onEditLinkNode(linkPopoverState.node);
15520
16236
  },
15521
16237
  buttonType: "ghost",
15522
- children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
16238
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
15523
16239
  }
15524
16240
  )
15525
16241
  ] })
@@ -15539,7 +16255,7 @@ var import_list = require("@lexical/list");
15539
16255
  var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
15540
16256
  var import_utils9 = require("@lexical/utils");
15541
16257
  var import_lexical5 = require("lexical");
15542
- var import_react150 = require("react");
16258
+ var import_react154 = require("react");
15543
16259
  function isIndentPermitted(maxDepth) {
15544
16260
  const selection = (0, import_lexical5.$getSelection)();
15545
16261
  if (!(0, import_lexical5.$isRangeSelection)(selection)) {
@@ -15594,8 +16310,8 @@ function $indentOverTab(selection) {
15594
16310
  }
15595
16311
  function ListIndentPlugin({ maxDepth }) {
15596
16312
  const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
15597
- const isInListItemNode = (0, import_react150.useRef)(false);
15598
- (0, import_react150.useEffect)(() => {
16313
+ const isInListItemNode = (0, import_react154.useRef)(false);
16314
+ (0, import_react154.useEffect)(() => {
15599
16315
  return editor.registerCommand(
15600
16316
  import_lexical5.SELECTION_CHANGE_COMMAND,
15601
16317
  () => {
@@ -15612,7 +16328,7 @@ function ListIndentPlugin({ maxDepth }) {
15612
16328
  import_lexical5.COMMAND_PRIORITY_NORMAL
15613
16329
  );
15614
16330
  }, [editor]);
15615
- (0, import_react150.useEffect)(() => {
16331
+ (0, import_react154.useEffect)(() => {
15616
16332
  return (0, import_utils9.mergeRegister)(
15617
16333
  editor.registerCommand(
15618
16334
  import_lexical5.INDENT_CONTENT_COMMAND,
@@ -15642,13 +16358,13 @@ function ListIndentPlugin({ maxDepth }) {
15642
16358
 
15643
16359
  // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
15644
16360
  init_emotion_jsx_shim();
15645
- var import_react151 = require("@emotion/react");
16361
+ var import_react155 = require("@emotion/react");
15646
16362
  var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
15647
16363
  var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
15648
16364
  var import_table = require("@lexical/table");
15649
16365
  var import_lexical6 = require("lexical");
15650
- var import_react152 = require("react");
15651
- var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
16366
+ var import_react156 = require("react");
16367
+ var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
15652
16368
  function computeSelectionCount(selection) {
15653
16369
  const selectionShape = selection.getShape();
15654
16370
  return {
@@ -15656,21 +16372,21 @@ function computeSelectionCount(selection) {
15656
16372
  rows: selectionShape.toY - selectionShape.fromY + 1
15657
16373
  };
15658
16374
  }
15659
- var tableActionMenuTrigger = import_react151.css`
16375
+ var tableActionMenuTrigger = import_react155.css`
15660
16376
  position: absolute;
15661
16377
  transform: translate(calc(-100% - 1px), 1px);
15662
16378
  `;
15663
- var TableActionMenuTrigger = (0, import_react152.forwardRef)((props, ref) => {
16379
+ var TableActionMenuTrigger = (0, import_react156.forwardRef)((props, ref) => {
15664
16380
  const { tableCellEl, positioningAnchorEl, ...rest } = props;
15665
- const [coordinates, setCoordinates] = (0, import_react152.useState)({ x: 0, y: 0 });
15666
- (0, import_react152.useLayoutEffect)(() => {
16381
+ const [coordinates, setCoordinates] = (0, import_react156.useState)({ x: 0, y: 0 });
16382
+ (0, import_react156.useLayoutEffect)(() => {
15667
16383
  const rect = tableCellEl.getBoundingClientRect();
15668
16384
  const parentRect = positioningAnchorEl.getBoundingClientRect();
15669
16385
  const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
15670
16386
  const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
15671
16387
  setCoordinates({ x: relativeX, y: relativeY });
15672
16388
  }, [tableCellEl, positioningAnchorEl]);
15673
- return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
16389
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
15674
16390
  IconButton,
15675
16391
  {
15676
16392
  ref,
@@ -15684,7 +16400,7 @@ var TableActionMenuTrigger = (0, import_react152.forwardRef)((props, ref) => {
15684
16400
  size: "xs",
15685
16401
  buttonType: "unimportant",
15686
16402
  ...rest,
15687
- children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
16403
+ children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
15688
16404
  }
15689
16405
  );
15690
16406
  });
@@ -15696,16 +16412,16 @@ function TableActionMenu({
15696
16412
  positioningAnchorEl
15697
16413
  }) {
15698
16414
  const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
15699
- const [tableCellNode, updateTableCellNode] = (0, import_react152.useState)(_tableCellNode);
15700
- const [selectionCounts, updateSelectionCounts] = (0, import_react152.useState)({
16415
+ const [tableCellNode, updateTableCellNode] = (0, import_react156.useState)(_tableCellNode);
16416
+ const [selectionCounts, updateSelectionCounts] = (0, import_react156.useState)({
15701
16417
  columns: 1,
15702
16418
  rows: 1
15703
16419
  });
15704
- const [menuTriggerKey, setMenuTriggerKey] = (0, import_react152.useState)(0);
16420
+ const [menuTriggerKey, setMenuTriggerKey] = (0, import_react156.useState)(0);
15705
16421
  const incrementMenuTriggerKey = () => {
15706
16422
  setMenuTriggerKey((key) => key += 1);
15707
16423
  };
15708
- (0, import_react152.useEffect)(() => {
16424
+ (0, import_react156.useEffect)(() => {
15709
16425
  return editor.registerMutationListener(
15710
16426
  import_table.TableCellNode,
15711
16427
  (nodeMutations) => {
@@ -15719,7 +16435,7 @@ function TableActionMenu({
15719
16435
  { skipInitialization: true }
15720
16436
  );
15721
16437
  }, [editor, tableCellNode]);
15722
- (0, import_react152.useEffect)(() => {
16438
+ (0, import_react156.useEffect)(() => {
15723
16439
  editor.getEditorState().read(() => {
15724
16440
  const selection = (0, import_lexical6.$getSelection)();
15725
16441
  if ((0, import_table.$isTableSelection)(selection)) {
@@ -15727,7 +16443,7 @@ function TableActionMenu({
15727
16443
  }
15728
16444
  });
15729
16445
  }, [editor]);
15730
- const clearTableSelection = (0, import_react152.useCallback)(() => {
16446
+ const clearTableSelection = (0, import_react156.useCallback)(() => {
15731
16447
  editor.update(() => {
15732
16448
  if (tableCellNode.isAttached()) {
15733
16449
  const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
@@ -15748,7 +16464,7 @@ function TableActionMenu({
15748
16464
  rootNode.selectStart();
15749
16465
  });
15750
16466
  }, [editor, tableCellNode]);
15751
- const insertTableRowAtSelection = (0, import_react152.useCallback)(
16467
+ const insertTableRowAtSelection = (0, import_react156.useCallback)(
15752
16468
  (shouldInsertAfter) => {
15753
16469
  editor.update(() => {
15754
16470
  (0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
@@ -15757,7 +16473,7 @@ function TableActionMenu({
15757
16473
  },
15758
16474
  [editor]
15759
16475
  );
15760
- const insertTableColumnAtSelection = (0, import_react152.useCallback)(
16476
+ const insertTableColumnAtSelection = (0, import_react156.useCallback)(
15761
16477
  (shouldInsertAfter) => {
15762
16478
  editor.update(() => {
15763
16479
  for (let i = 0; i < selectionCounts.columns; i++) {
@@ -15768,26 +16484,26 @@ function TableActionMenu({
15768
16484
  },
15769
16485
  [editor, selectionCounts.columns]
15770
16486
  );
15771
- const deleteTableRowAtSelection = (0, import_react152.useCallback)(() => {
16487
+ const deleteTableRowAtSelection = (0, import_react156.useCallback)(() => {
15772
16488
  editor.update(() => {
15773
16489
  (0, import_table.$deleteTableRow__EXPERIMENTAL)();
15774
16490
  });
15775
16491
  incrementMenuTriggerKey();
15776
16492
  }, [editor]);
15777
- const deleteTableAtSelection = (0, import_react152.useCallback)(() => {
16493
+ const deleteTableAtSelection = (0, import_react156.useCallback)(() => {
15778
16494
  editor.update(() => {
15779
16495
  const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
15780
16496
  tableNode.remove();
15781
16497
  clearTableSelection();
15782
16498
  });
15783
16499
  }, [editor, tableCellNode, clearTableSelection]);
15784
- const deleteTableColumnAtSelection = (0, import_react152.useCallback)(() => {
16500
+ const deleteTableColumnAtSelection = (0, import_react156.useCallback)(() => {
15785
16501
  editor.update(() => {
15786
16502
  (0, import_table.$deleteTableColumn__EXPERIMENTAL)();
15787
16503
  });
15788
16504
  incrementMenuTriggerKey();
15789
16505
  }, [editor]);
15790
- const toggleTableRowIsHeader = (0, import_react152.useCallback)(() => {
16506
+ const toggleTableRowIsHeader = (0, import_react156.useCallback)(() => {
15791
16507
  editor.update(() => {
15792
16508
  const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
15793
16509
  const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -15808,7 +16524,7 @@ function TableActionMenu({
15808
16524
  clearTableSelection();
15809
16525
  });
15810
16526
  }, [editor, tableCellNode, clearTableSelection]);
15811
- const toggleTableColumnIsHeader = (0, import_react152.useCallback)(() => {
16527
+ const toggleTableColumnIsHeader = (0, import_react156.useCallback)(() => {
15812
16528
  editor.update(() => {
15813
16529
  const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
15814
16530
  const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -15835,13 +16551,13 @@ function TableActionMenu({
15835
16551
  clearTableSelection();
15836
16552
  });
15837
16553
  }, [editor, tableCellNode, clearTableSelection]);
15838
- const menuItemCss = (0, import_react151.css)({
16554
+ const menuItemCss = (0, import_react155.css)({
15839
16555
  fontSize: "var(--fs-sm)"
15840
16556
  });
15841
- return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
16557
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
15842
16558
  Menu,
15843
16559
  {
15844
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
16560
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
15845
16561
  TableActionMenuTrigger,
15846
16562
  {
15847
16563
  tableCellEl,
@@ -15852,7 +16568,7 @@ function TableActionMenu({
15852
16568
  portalElement: menuPortalEl,
15853
16569
  maxMenuHeight: "300px",
15854
16570
  children: [
15855
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
16571
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
15856
16572
  MenuItem,
15857
16573
  {
15858
16574
  onClick: () => {
@@ -15866,33 +16582,33 @@ function TableActionMenu({
15866
16582
  ]
15867
16583
  }
15868
16584
  ),
15869
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
16585
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
15870
16586
  "Insert ",
15871
16587
  selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
15872
16588
  " below"
15873
16589
  ] }),
15874
- /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItemSeparator, {}),
15875
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
16590
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
16591
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
15876
16592
  "Insert ",
15877
16593
  selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
15878
16594
  " left"
15879
16595
  ] }),
15880
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
16596
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
15881
16597
  "Insert ",
15882
16598
  selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
15883
16599
  " right"
15884
16600
  ] }),
15885
- /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItemSeparator, {}),
15886
- /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
15887
- /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
15888
- /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
15889
- /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItemSeparator, {}),
15890
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
16601
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
16602
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
16603
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
16604
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
16605
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
16606
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
15891
16607
  (tableCellNode.__headerState & import_table.TableCellHeaderStates.ROW) === import_table.TableCellHeaderStates.ROW ? "Remove" : "Add",
15892
16608
  " ",
15893
16609
  "row header"
15894
16610
  ] }),
15895
- /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
16611
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
15896
16612
  (tableCellNode.__headerState & import_table.TableCellHeaderStates.COLUMN) === import_table.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
15897
16613
  " ",
15898
16614
  "column header"
@@ -15906,10 +16622,10 @@ function TableCellActionMenuContainer({
15906
16622
  positioningAnchorEl
15907
16623
  }) {
15908
16624
  const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
15909
- const [tableCellNode, setTableMenuCellNode] = (0, import_react152.useState)(null);
15910
- const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react152.useState)(null);
15911
- const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react152.useState)(null);
15912
- (0, import_react152.useEffect)(() => {
16625
+ const [tableCellNode, setTableMenuCellNode] = (0, import_react156.useState)(null);
16626
+ const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react156.useState)(null);
16627
+ const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react156.useState)(null);
16628
+ (0, import_react156.useEffect)(() => {
15913
16629
  const newPortalEl = document.createElement("div");
15914
16630
  setTableMenuCellMenuPortalEl(newPortalEl);
15915
16631
  menuPortalEl.appendChild(newPortalEl);
@@ -15917,14 +16633,14 @@ function TableCellActionMenuContainer({
15917
16633
  newPortalEl.remove();
15918
16634
  };
15919
16635
  }, [menuPortalEl]);
15920
- const setTableMenuCellNodeElem = (0, import_react152.useCallback)((elem) => {
16636
+ const setTableMenuCellNodeElem = (0, import_react156.useCallback)((elem) => {
15921
16637
  if (elem) {
15922
16638
  _setTableMenuCellNodeEl(elem);
15923
16639
  } else {
15924
16640
  _setTableMenuCellNodeEl(null);
15925
16641
  }
15926
16642
  }, []);
15927
- const $moveMenu = (0, import_react152.useCallback)(() => {
16643
+ const $moveMenu = (0, import_react156.useCallback)(() => {
15928
16644
  const selection = (0, import_lexical6.$getSelection)();
15929
16645
  const nativeSelection = window.getSelection();
15930
16646
  const activeElement = document.activeElement;
@@ -15953,14 +16669,14 @@ function TableCellActionMenuContainer({
15953
16669
  setTableMenuCellNodeElem(null);
15954
16670
  }
15955
16671
  }, [editor, setTableMenuCellNodeElem]);
15956
- (0, import_react152.useEffect)(() => {
16672
+ (0, import_react156.useEffect)(() => {
15957
16673
  return editor.registerUpdateListener(() => {
15958
16674
  editor.getEditorState().read(() => {
15959
16675
  $moveMenu();
15960
16676
  });
15961
16677
  });
15962
16678
  });
15963
- return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
16679
+ return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
15964
16680
  TableActionMenu,
15965
16681
  {
15966
16682
  tableCellNode,
@@ -15976,23 +16692,23 @@ function TableActionMenuPlugin({
15976
16692
  menuPortalEl
15977
16693
  }) {
15978
16694
  const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
15979
- return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
16695
+ return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
15980
16696
  }
15981
16697
 
15982
16698
  // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
15983
16699
  init_emotion_jsx_shim();
15984
- var import_react153 = require("@emotion/react");
16700
+ var import_react157 = require("@emotion/react");
15985
16701
  var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
15986
16702
  var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
15987
16703
  var import_table2 = require("@lexical/table");
15988
16704
  var import_utils11 = require("@lexical/utils");
15989
16705
  var import_lexical7 = require("lexical");
15990
- var import_react154 = require("react");
16706
+ var import_react158 = require("react");
15991
16707
  var import_react_dom3 = require("react-dom");
15992
- var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
16708
+ var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
15993
16709
  var MIN_ROW_HEIGHT = 33;
15994
16710
  var MIN_COLUMN_WIDTH = 50;
15995
- var tableResizer = import_react153.css`
16711
+ var tableResizer = import_react157.css`
15996
16712
  position: absolute;
15997
16713
  z-index: var(--z-10);
15998
16714
  `;
@@ -16014,15 +16730,15 @@ var fixedGetDOMCellFromTarget = (node) => {
16014
16730
  return null;
16015
16731
  };
16016
16732
  function TableCellResizer({ editor, positioningAnchorEl }) {
16017
- const targetRef = (0, import_react154.useRef)(null);
16018
- const resizerRef = (0, import_react154.useRef)(null);
16019
- const tableRectRef = (0, import_react154.useRef)(null);
16020
- const mouseStartPosRef = (0, import_react154.useRef)(null);
16021
- const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react154.useState)(null);
16022
- const [activeCell, updateActiveCell] = (0, import_react154.useState)(null);
16023
- const [isMouseDown, updateIsMouseDown] = (0, import_react154.useState)(false);
16024
- const [draggingDirection, updateDraggingDirection] = (0, import_react154.useState)(null);
16025
- const resetState = (0, import_react154.useCallback)(() => {
16733
+ const targetRef = (0, import_react158.useRef)(null);
16734
+ const resizerRef = (0, import_react158.useRef)(null);
16735
+ const tableRectRef = (0, import_react158.useRef)(null);
16736
+ const mouseStartPosRef = (0, import_react158.useRef)(null);
16737
+ const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react158.useState)(null);
16738
+ const [activeCell, updateActiveCell] = (0, import_react158.useState)(null);
16739
+ const [isMouseDown, updateIsMouseDown] = (0, import_react158.useState)(false);
16740
+ const [draggingDirection, updateDraggingDirection] = (0, import_react158.useState)(null);
16741
+ const resetState = (0, import_react158.useCallback)(() => {
16026
16742
  updateActiveCell(null);
16027
16743
  targetRef.current = null;
16028
16744
  updateDraggingDirection(null);
@@ -16032,7 +16748,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16032
16748
  const isMouseDownOnEvent = (event) => {
16033
16749
  return (event.buttons & 1) === 1;
16034
16750
  };
16035
- (0, import_react154.useEffect)(() => {
16751
+ (0, import_react158.useEffect)(() => {
16036
16752
  const onMouseMove = (event) => {
16037
16753
  setTimeout(() => {
16038
16754
  const target = event.target;
@@ -16099,7 +16815,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16099
16815
  }
16100
16816
  return false;
16101
16817
  };
16102
- const updateRowHeight = (0, import_react154.useCallback)(
16818
+ const updateRowHeight = (0, import_react158.useCallback)(
16103
16819
  (heightChange) => {
16104
16820
  if (!activeCell) {
16105
16821
  throw new Error("TableCellResizer: Expected active cell.");
@@ -16161,7 +16877,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16161
16877
  }
16162
16878
  }
16163
16879
  };
16164
- const updateColumnWidth = (0, import_react154.useCallback)(
16880
+ const updateColumnWidth = (0, import_react158.useCallback)(
16165
16881
  (widthChange) => {
16166
16882
  if (!activeCell) {
16167
16883
  throw new Error("TableCellResizer: Expected active cell.");
@@ -16195,7 +16911,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16195
16911
  },
16196
16912
  [activeCell, editor]
16197
16913
  );
16198
- const mouseUpHandler = (0, import_react154.useCallback)(
16914
+ const mouseUpHandler = (0, import_react158.useCallback)(
16199
16915
  (direction) => {
16200
16916
  const handler = (event) => {
16201
16917
  event.preventDefault();
@@ -16224,7 +16940,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16224
16940
  },
16225
16941
  [activeCell, resetState, updateColumnWidth, updateRowHeight]
16226
16942
  );
16227
- const toggleResize = (0, import_react154.useCallback)(
16943
+ const toggleResize = (0, import_react158.useCallback)(
16228
16944
  (direction) => (event) => {
16229
16945
  event.preventDefault();
16230
16946
  event.stopPropagation();
@@ -16241,7 +16957,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16241
16957
  },
16242
16958
  [activeCell, mouseUpHandler]
16243
16959
  );
16244
- const getResizers = (0, import_react154.useCallback)(() => {
16960
+ const getResizers = (0, import_react158.useCallback)(() => {
16245
16961
  if (activeCell) {
16246
16962
  const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
16247
16963
  const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16290,8 +17006,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16290
17006
  };
16291
17007
  }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
16292
17008
  const resizerStyles = getResizers();
16293
- return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
16294
- /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
17009
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
17010
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
16295
17011
  "div",
16296
17012
  {
16297
17013
  css: tableResizer,
@@ -16299,7 +17015,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16299
17015
  onMouseDown: toggleResize("right")
16300
17016
  }
16301
17017
  ),
16302
- /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
17018
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
16303
17019
  "div",
16304
17020
  {
16305
17021
  css: tableResizer,
@@ -16312,9 +17028,9 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
16312
17028
  function TableCellResizerPlugin({ positioningAnchorEl }) {
16313
17029
  const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
16314
17030
  const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
16315
- return (0, import_react154.useMemo)(
17031
+ return (0, import_react158.useMemo)(
16316
17032
  () => isEditable ? (0, import_react_dom3.createPortal)(
16317
- /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
17033
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
16318
17034
  positioningAnchorEl
16319
17035
  ) : null,
16320
17036
  [editor, isEditable, positioningAnchorEl]
@@ -16326,11 +17042,11 @@ init_emotion_jsx_shim();
16326
17042
  var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
16327
17043
  var import_table3 = require("@lexical/table");
16328
17044
  var import_lexical8 = require("lexical");
16329
- var import_react155 = require("react");
17045
+ var import_react159 = require("react");
16330
17046
  var TableSelectionPlugin = () => {
16331
17047
  const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
16332
- const [closestTableCellNode, setClosestTableCellNode] = (0, import_react155.useState)(null);
16333
- (0, import_react155.useEffect)(() => {
17048
+ const [closestTableCellNode, setClosestTableCellNode] = (0, import_react159.useState)(null);
17049
+ (0, import_react159.useEffect)(() => {
16334
17050
  return editor.registerCommand(
16335
17051
  import_lexical8.SELECTION_CHANGE_COMMAND,
16336
17052
  () => {
@@ -16352,7 +17068,7 @@ var TableSelectionPlugin = () => {
16352
17068
  import_lexical8.COMMAND_PRIORITY_NORMAL
16353
17069
  );
16354
17070
  }, [editor]);
16355
- (0, import_react155.useEffect)(() => {
17071
+ (0, import_react159.useEffect)(() => {
16356
17072
  const onControlA = (event) => {
16357
17073
  if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
16358
17074
  if (!closestTableCellNode) {
@@ -16376,7 +17092,7 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
16376
17092
 
16377
17093
  // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
16378
17094
  init_emotion_jsx_shim();
16379
- var import_react157 = require("@emotion/react");
17095
+ var import_react161 = require("@emotion/react");
16380
17096
  var import_code2 = require("@lexical/code");
16381
17097
  var import_list2 = require("@lexical/list");
16382
17098
  var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
@@ -16385,7 +17101,7 @@ var import_selection2 = require("@lexical/selection");
16385
17101
  var import_table4 = require("@lexical/table");
16386
17102
  var import_utils12 = require("@lexical/utils");
16387
17103
  var import_lexical9 = require("lexical");
16388
- var import_react158 = require("react");
17104
+ var import_react162 = require("react");
16389
17105
 
16390
17106
  // src/components/ParameterInputs/rich-text/toolbar/constants.ts
16391
17107
  init_emotion_jsx_shim();
@@ -16403,29 +17119,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
16403
17119
 
16404
17120
  // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
16405
17121
  init_emotion_jsx_shim();
16406
- var import_react156 = require("react");
17122
+ var import_react160 = require("react");
16407
17123
  var useRichTextToolbarState = ({ config }) => {
16408
17124
  var _a;
16409
- const enabledBuiltInFormats = (0, import_react156.useMemo)(() => {
17125
+ const enabledBuiltInFormats = (0, import_react160.useMemo)(() => {
16410
17126
  return richTextBuiltInFormats.filter((format) => {
16411
17127
  var _a2, _b;
16412
17128
  return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
16413
17129
  });
16414
17130
  }, [config]);
16415
- const enabledBuiltInElements = (0, import_react156.useMemo)(() => {
17131
+ const enabledBuiltInElements = (0, import_react160.useMemo)(() => {
16416
17132
  return richTextBuiltInElements.filter((element) => {
16417
17133
  var _a2, _b;
16418
17134
  return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
16419
17135
  });
16420
17136
  }, [config]);
16421
- const enabledBuiltInFormatsWithIcon = (0, import_react156.useMemo)(() => {
17137
+ const enabledBuiltInFormatsWithIcon = (0, import_react160.useMemo)(() => {
16422
17138
  return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
16423
17139
  }, [enabledBuiltInFormats]);
16424
17140
  const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
16425
17141
  (format) => !FORMATS_WITH_ICON.has(format.type)
16426
17142
  );
16427
- const [activeFormats, setActiveFormats] = (0, import_react156.useState)([]);
16428
- const visibleFormatsWithIcon = (0, import_react156.useMemo)(() => {
17143
+ const [activeFormats, setActiveFormats] = (0, import_react160.useState)([]);
17144
+ const visibleFormatsWithIcon = (0, import_react160.useMemo)(() => {
16429
17145
  const visibleFormats = /* @__PURE__ */ new Set();
16430
17146
  activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
16431
17147
  visibleFormats.add(type);
@@ -16435,7 +17151,7 @@ var useRichTextToolbarState = ({ config }) => {
16435
17151
  });
16436
17152
  return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
16437
17153
  }, [activeFormats, enabledBuiltInFormatsWithIcon]);
16438
- const visibleFormatsWithoutIcon = (0, import_react156.useMemo)(() => {
17154
+ const visibleFormatsWithoutIcon = (0, import_react160.useMemo)(() => {
16439
17155
  const visibleFormats = /* @__PURE__ */ new Set();
16440
17156
  activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
16441
17157
  visibleFormats.add(type);
@@ -16445,11 +17161,11 @@ var useRichTextToolbarState = ({ config }) => {
16445
17161
  });
16446
17162
  return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
16447
17163
  }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
16448
- const [activeElement, setActiveElement] = (0, import_react156.useState)("paragraph");
17164
+ const [activeElement, setActiveElement] = (0, import_react160.useState)("paragraph");
16449
17165
  const enabledTextualElements = enabledBuiltInElements.filter(
16450
17166
  (element) => TEXTUAL_ELEMENTS.includes(element.type)
16451
17167
  );
16452
- const visibleTextualElements = (0, import_react156.useMemo)(() => {
17168
+ const visibleTextualElements = (0, import_react160.useMemo)(() => {
16453
17169
  if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
16454
17170
  return enabledTextualElements;
16455
17171
  }
@@ -16460,30 +17176,30 @@ var useRichTextToolbarState = ({ config }) => {
16460
17176
  }
16461
17177
  );
16462
17178
  }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
16463
- const [isLink, setIsLink] = (0, import_react156.useState)(false);
16464
- const linkElementVisible = (0, import_react156.useMemo)(() => {
17179
+ const [isLink, setIsLink] = (0, import_react160.useState)(false);
17180
+ const linkElementVisible = (0, import_react160.useMemo)(() => {
16465
17181
  return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
16466
17182
  }, [isLink, enabledBuiltInElements]);
16467
- const visibleLists = (0, import_react156.useMemo)(() => {
17183
+ const visibleLists = (0, import_react160.useMemo)(() => {
16468
17184
  return new Set(
16469
17185
  ["orderedList", "unorderedList"].filter(
16470
17186
  (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
16471
17187
  )
16472
17188
  );
16473
17189
  }, [activeElement, enabledBuiltInElements]);
16474
- const quoteElementVisible = (0, import_react156.useMemo)(() => {
17190
+ const quoteElementVisible = (0, import_react160.useMemo)(() => {
16475
17191
  return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
16476
17192
  }, [activeElement, enabledBuiltInElements]);
16477
- const codeElementVisible = (0, import_react156.useMemo)(() => {
17193
+ const codeElementVisible = (0, import_react160.useMemo)(() => {
16478
17194
  return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
16479
17195
  }, [activeElement, enabledBuiltInElements]);
16480
- const tableElementVisible = (0, import_react156.useMemo)(() => {
17196
+ const tableElementVisible = (0, import_react160.useMemo)(() => {
16481
17197
  return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
16482
17198
  }, [activeElement, enabledBuiltInElements]);
16483
- const assetElementVisible = (0, import_react156.useMemo)(() => {
17199
+ const assetElementVisible = (0, import_react160.useMemo)(() => {
16484
17200
  return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
16485
17201
  }, [activeElement, enabledBuiltInElements]);
16486
- const visibleElementsWithIcons = (0, import_react156.useMemo)(() => {
17202
+ const visibleElementsWithIcons = (0, import_react160.useMemo)(() => {
16487
17203
  const visibleElements = /* @__PURE__ */ new Set();
16488
17204
  if (linkElementVisible) {
16489
17205
  visibleElements.add("link");
@@ -16495,7 +17211,7 @@ var useRichTextToolbarState = ({ config }) => {
16495
17211
  }
16496
17212
  return visibleElements;
16497
17213
  }, [linkElementVisible, visibleLists]);
16498
- const visibleInsertElementsWithIcons = (0, import_react156.useMemo)(() => {
17214
+ const visibleInsertElementsWithIcons = (0, import_react160.useMemo)(() => {
16499
17215
  const visibleElements = /* @__PURE__ */ new Set();
16500
17216
  if (quoteElementVisible) {
16501
17217
  visibleElements.add("quote");
@@ -16533,8 +17249,8 @@ var useRichTextToolbarState = ({ config }) => {
16533
17249
  };
16534
17250
 
16535
17251
  // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
16536
- var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
16537
- var toolbar = import_react157.css`
17252
+ var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
17253
+ var toolbar = import_react161.css`
16538
17254
  ${scrollbarStyles}
16539
17255
  background: var(--gray-50);
16540
17256
  border-radius: var(--rounded-base);
@@ -16548,7 +17264,7 @@ var toolbar = import_react157.css`
16548
17264
  top: calc(var(--spacing-sm) * -2);
16549
17265
  z-index: 10;
16550
17266
  `;
16551
- var toolbarGroup = import_react157.css`
17267
+ var toolbarGroup = import_react161.css`
16552
17268
  display: flex;
16553
17269
  flex-shrink: 0;
16554
17270
  gap: var(--spacing-xs);
@@ -16565,7 +17281,7 @@ var toolbarGroup = import_react157.css`
16565
17281
  width: 1px;
16566
17282
  }
16567
17283
  `;
16568
- var richTextToolbarButton = import_react157.css`
17284
+ var richTextToolbarButton = import_react161.css`
16569
17285
  align-items: center;
16570
17286
  appearance: none;
16571
17287
  border: 0;
@@ -16579,21 +17295,21 @@ var richTextToolbarButton = import_react157.css`
16579
17295
  min-width: 32px;
16580
17296
  padding: 0 var(--spacing-sm);
16581
17297
  `;
16582
- var richTextToolbarButtonActive = import_react157.css`
17298
+ var richTextToolbarButtonActive = import_react161.css`
16583
17299
  background: var(--gray-200);
16584
17300
  `;
16585
- var textStyleButton = import_react157.css`
17301
+ var textStyleButton = import_react161.css`
16586
17302
  justify-content: space-between;
16587
17303
  min-width: 7rem;
16588
17304
  `;
16589
- var toolbarIcon = import_react157.css`
17305
+ var toolbarIcon = import_react161.css`
16590
17306
  color: inherit;
16591
17307
  `;
16592
- var toolbarChevron = import_react157.css`
17308
+ var toolbarChevron = import_react161.css`
16593
17309
  margin-left: var(--spacing-xs);
16594
17310
  `;
16595
17311
  var RichTextToolbarIcon = ({ icon }) => {
16596
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
17312
+ return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
16597
17313
  };
16598
17314
  var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
16599
17315
  const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
@@ -16649,7 +17365,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16649
17365
  });
16650
17366
  });
16651
17367
  };
16652
- const updateToolbar = (0, import_react158.useCallback)(() => {
17368
+ const updateToolbar = (0, import_react162.useCallback)(() => {
16653
17369
  const selection = (0, import_lexical9.$getSelection)();
16654
17370
  if (!(0, import_lexical9.$isRangeSelection)(selection)) {
16655
17371
  return;
@@ -16688,7 +17404,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16688
17404
  setIsLink(false);
16689
17405
  }
16690
17406
  }, [editor, setActiveElement, setActiveFormats, setIsLink]);
16691
- (0, import_react158.useEffect)(() => {
17407
+ (0, import_react162.useEffect)(() => {
16692
17408
  return editor.registerCommand(
16693
17409
  import_lexical9.SELECTION_CHANGE_COMMAND,
16694
17410
  (_payload) => {
@@ -16698,7 +17414,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16698
17414
  import_lexical9.COMMAND_PRIORITY_CRITICAL
16699
17415
  );
16700
17416
  }, [editor, updateToolbar]);
16701
- (0, import_react158.useEffect)(() => {
17417
+ (0, import_react162.useEffect)(() => {
16702
17418
  return editor.registerUpdateListener(({ editorState }) => {
16703
17419
  requestAnimationFrame(() => {
16704
17420
  editorState.read(() => {
@@ -16707,14 +17423,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16707
17423
  });
16708
17424
  });
16709
17425
  }, [editor, updateToolbar]);
16710
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
16711
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
17426
+ return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
17427
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
16712
17428
  Menu,
16713
17429
  {
16714
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
17430
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
16715
17431
  visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
16716
17432
  " ",
16717
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
17433
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
16718
17434
  ] }),
16719
17435
  placement: "bottom-start",
16720
17436
  children: [
@@ -16724,7 +17440,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16724
17440
  type: "paragraph"
16725
17441
  },
16726
17442
  ...visibleTextualElements
16727
- ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17443
+ ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16728
17444
  MenuItem,
16729
17445
  {
16730
17446
  "data-testid": "menu-item",
@@ -16735,12 +17451,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16735
17451
  },
16736
17452
  element.type
16737
17453
  )),
16738
- visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
17454
+ visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
16739
17455
  ]
16740
17456
  }
16741
17457
  ),
16742
- visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
16743
- visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17458
+ visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
17459
+ visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16744
17460
  "button",
16745
17461
  {
16746
17462
  "data-testid": `formatting-button-${format.type}`,
@@ -16752,15 +17468,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16752
17468
  richTextToolbarButton,
16753
17469
  activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
16754
17470
  ],
16755
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
17471
+ children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
16756
17472
  }
16757
17473
  ) }, format.type)),
16758
- visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17474
+ visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16759
17475
  Menu,
16760
17476
  {
16761
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
17477
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
16762
17478
  placement: "bottom-start",
16763
- children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17479
+ children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16764
17480
  MenuItem,
16765
17481
  {
16766
17482
  onClick: () => {
@@ -16773,8 +17489,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16773
17489
  }
16774
17490
  ) : null
16775
17491
  ] }) : null,
16776
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
16777
- linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17492
+ visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
17493
+ linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16778
17494
  "button",
16779
17495
  {
16780
17496
  "data-testid": "element-link",
@@ -16787,11 +17503,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16787
17503
  }
16788
17504
  },
16789
17505
  css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
16790
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "link" })
17506
+ children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: "link" })
16791
17507
  }
16792
17508
  ) }) : null,
16793
- visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
16794
- visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17509
+ visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
17510
+ visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16795
17511
  "button",
16796
17512
  {
16797
17513
  "data-testid": "element-unordered-list",
@@ -16807,10 +17523,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16807
17523
  richTextToolbarButton,
16808
17524
  activeElement === "unorderedList" ? richTextToolbarButtonActive : null
16809
17525
  ],
16810
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
17526
+ children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
16811
17527
  }
16812
17528
  ) }) : null,
16813
- visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17529
+ visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16814
17530
  "button",
16815
17531
  {
16816
17532
  "data-testid": "element-ordered-list",
@@ -16826,58 +17542,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16826
17542
  richTextToolbarButton,
16827
17543
  activeElement === "orderedList" ? richTextToolbarButtonActive : null
16828
17544
  ],
16829
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
17545
+ children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
16830
17546
  }
16831
17547
  ) }) : null
16832
17548
  ] }) : null,
16833
17549
  customControls ? customControls : null
16834
17550
  ] }) : null,
16835
- visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
17551
+ visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
16836
17552
  Menu,
16837
17553
  {
16838
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
17554
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
16839
17555
  "Insert",
16840
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
17556
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
16841
17557
  ] }),
16842
17558
  placement: "bottom-start",
16843
17559
  children: [
16844
- quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17560
+ quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16845
17561
  MenuItem,
16846
17562
  {
16847
17563
  onClick: () => {
16848
17564
  onSelectElement("quote");
16849
17565
  },
16850
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
17566
+ icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
16851
17567
  children: "Quote"
16852
17568
  }
16853
17569
  ) : null,
16854
- codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17570
+ codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16855
17571
  MenuItem,
16856
17572
  {
16857
17573
  onClick: () => {
16858
17574
  onSelectElement("code");
16859
17575
  },
16860
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
17576
+ icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
16861
17577
  children: "Code"
16862
17578
  }
16863
17579
  ) : null,
16864
- tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17580
+ tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16865
17581
  MenuItem,
16866
17582
  {
16867
17583
  onClick: () => {
16868
17584
  onSelectElement("table");
16869
17585
  },
16870
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
17586
+ icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
16871
17587
  children: "Table"
16872
17588
  }
16873
17589
  ) : null,
16874
- assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
17590
+ assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
16875
17591
  MenuItem,
16876
17592
  {
16877
17593
  onClick: () => {
16878
17594
  onSelectElement("asset");
16879
17595
  },
16880
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
17596
+ icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
16881
17597
  children: "Asset"
16882
17598
  }
16883
17599
  ) : null
@@ -16889,9 +17605,9 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
16889
17605
  var RichTextToolbar_default = RichTextToolbar;
16890
17606
 
16891
17607
  // src/components/ParameterInputs/ParameterRichText.tsx
16892
- var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
17608
+ var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
16893
17609
  var ParameterRichText = ({
16894
- label,
17610
+ label: label2,
16895
17611
  labelLeadingIcon,
16896
17612
  hiddenLabel,
16897
17613
  id,
@@ -16903,11 +17619,11 @@ var ParameterRichText = ({
16903
17619
  children,
16904
17620
  ...innerProps
16905
17621
  }) => {
16906
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
17622
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
16907
17623
  ParameterShell,
16908
17624
  {
16909
17625
  "data-testid": "parameter-richtext",
16910
- label,
17626
+ label: label2,
16911
17627
  hiddenLabel,
16912
17628
  labelLeadingIcon,
16913
17629
  id,
@@ -16917,13 +17633,13 @@ var ParameterRichText = ({
16917
17633
  captionTestId,
16918
17634
  menuItems,
16919
17635
  children: [
16920
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterRichTextInner, { ...innerProps, children }),
16921
- menuItems ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children: menuItems }) }) : null
17636
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterRichTextInner, { ...innerProps, children }),
17637
+ menuItems ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children: menuItems }) }) : null
16922
17638
  ]
16923
17639
  }
16924
17640
  );
16925
17641
  };
16926
- var editorContainerWrapper = import_react159.css`
17642
+ var editorContainerWrapper = import_react163.css`
16927
17643
  position: relative;
16928
17644
 
16929
17645
  &::before {
@@ -16939,12 +17655,12 @@ var editorContainerWrapper = import_react159.css`
16939
17655
  z-index: 2;
16940
17656
  }
16941
17657
  `;
16942
- var editorWrapper = import_react159.css`
17658
+ var editorWrapper = import_react163.css`
16943
17659
  display: flex;
16944
17660
  flex-flow: column;
16945
17661
  flex-grow: 1;
16946
17662
  `;
16947
- var editorContainer = import_react159.css`
17663
+ var editorContainer = import_react163.css`
16948
17664
  ${scrollbarStyles}
16949
17665
  background: var(--white);
16950
17666
  border-radius: var(--rounded-sm);
@@ -16976,7 +17692,7 @@ var editorContainer = import_react159.css`
16976
17692
  max-height: unset;
16977
17693
  }
16978
17694
  `;
16979
- var editorContainerOverflowWrapper = import_react159.css`
17695
+ var editorContainerOverflowWrapper = import_react163.css`
16980
17696
  overflow: hidden;
16981
17697
  pointer-events: none;
16982
17698
 
@@ -16984,7 +17700,7 @@ var editorContainerOverflowWrapper = import_react159.css`
16984
17700
  pointer-events: auto;
16985
17701
  }
16986
17702
  `;
16987
- var editorPlaceholder = import_react159.css`
17703
+ var editorPlaceholder = import_react163.css`
16988
17704
  color: var(--gray-500);
16989
17705
  font-style: italic;
16990
17706
  /* 1px is added to make sure caret is clearly visible when field is focused
@@ -16995,7 +17711,7 @@ var editorPlaceholder = import_react159.css`
16995
17711
  top: calc(1rem + var(--spacing-sm));
16996
17712
  user-select: none;
16997
17713
  `;
16998
- var editorInput = import_react159.css`
17714
+ var editorInput = import_react163.css`
16999
17715
  min-height: 100%;
17000
17716
  flex-grow: 1;
17001
17717
 
@@ -17068,8 +17784,8 @@ var ParameterRichTextInner = ({
17068
17784
  },
17069
17785
  editable: !richTextProps.readOnly
17070
17786
  };
17071
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
17072
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichText, { ...richTextProps, children }) }) }),
17787
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
17788
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(RichText, { ...richTextProps, children }) }) }),
17073
17789
  editorFooter ? editorFooter : null
17074
17790
  ] });
17075
17791
  };
@@ -17099,12 +17815,12 @@ var RichText = ({
17099
17815
  placeholder
17100
17816
  }) => {
17101
17817
  const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
17102
- (0, import_react160.useEffect)(() => {
17818
+ (0, import_react164.useEffect)(() => {
17103
17819
  if (onRichTextInit) {
17104
17820
  onRichTextInit(editor);
17105
17821
  }
17106
17822
  }, [editor, onRichTextInit]);
17107
- (0, import_react160.useEffect)(() => {
17823
+ (0, import_react164.useEffect)(() => {
17108
17824
  const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
17109
17825
  requestAnimationFrame(() => {
17110
17826
  const previousEditorState = prevEditorState.toJSON();
@@ -17121,23 +17837,23 @@ var RichText = ({
17121
17837
  removeUpdateListener();
17122
17838
  };
17123
17839
  }, [editor, onChange]);
17124
- (0, import_react160.useEffect)(() => {
17840
+ (0, import_react164.useEffect)(() => {
17125
17841
  editor.setEditable(!readOnly);
17126
17842
  }, [editor, readOnly]);
17127
- const [editorContainerRef, setEditorContainerRef] = (0, import_react160.useState)(null);
17843
+ const [editorContainerRef, setEditorContainerRef] = (0, import_react164.useState)(null);
17128
17844
  const onEditorContainerRef = (_editorContainerRef) => {
17129
17845
  if (_editorContainerRef !== null) {
17130
17846
  setEditorContainerRef(_editorContainerRef);
17131
17847
  }
17132
17848
  };
17133
- const [portalContainerRef, setPortalContainerRef] = (0, import_react160.useState)(null);
17849
+ const [portalContainerRef, setPortalContainerRef] = (0, import_react164.useState)(null);
17134
17850
  const onPortalContainerRef = (_portalContainerRef) => {
17135
17851
  if (_portalContainerRef !== null) {
17136
17852
  setPortalContainerRef(_portalContainerRef);
17137
17853
  }
17138
17854
  };
17139
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
17140
- readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
17855
+ return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
17856
+ readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
17141
17857
  RichTextToolbar_default,
17142
17858
  {
17143
17859
  config,
@@ -17146,8 +17862,8 @@ var RichText = ({
17146
17862
  onInsertAsset
17147
17863
  }
17148
17864
  ),
17149
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
17150
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
17865
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
17866
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
17151
17867
  "div",
17152
17868
  {
17153
17869
  css: editorContainer,
@@ -17155,33 +17871,33 @@ var RichText = ({
17155
17871
  ref: onEditorContainerRef,
17156
17872
  "data-testid": "value-container",
17157
17873
  children: [
17158
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
17874
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
17159
17875
  import_LexicalRichTextPlugin.RichTextPlugin,
17160
17876
  {
17161
- contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
17162
- placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
17877
+ contentEditable: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
17878
+ placeholder: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
17163
17879
  ErrorBoundary: import_LexicalErrorBoundary.default
17164
17880
  }
17165
17881
  ),
17166
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
17167
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
17168
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
17169
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
17882
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalListPlugin.ListPlugin, {}),
17883
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ListIndentPlugin, { maxDepth: 4 }),
17884
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
17885
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
17170
17886
  TableActionMenuPlugin,
17171
17887
  {
17172
17888
  positioningAnchorEl: editorContainerRef,
17173
17889
  menuPortalEl: portalContainerRef
17174
17890
  }
17175
17891
  ) : null }),
17176
- editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
17177
- readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
17178
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
17179
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
17892
+ editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
17893
+ readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
17894
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DisableStylesPlugin, {}),
17895
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
17180
17896
  ]
17181
17897
  }
17182
17898
  ),
17183
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children }),
17184
- editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
17899
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children }),
17900
+ editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
17185
17901
  LinkNodePlugin,
17186
17902
  {
17187
17903
  onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -17192,38 +17908,38 @@ var RichText = ({
17192
17908
  positioningAnchorEl: editorContainerRef
17193
17909
  }
17194
17910
  ) : null,
17195
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableSelectionPlugin_default, {}),
17196
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ImprovedAssetSelectionPlugin_default, {})
17911
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableSelectionPlugin_default, {}),
17912
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ImprovedAssetSelectionPlugin_default, {})
17197
17913
  ] })
17198
17914
  ] });
17199
17915
  };
17200
17916
 
17201
17917
  // src/components/ParameterInputs/ParameterSelect.tsx
17202
17918
  init_emotion_jsx_shim();
17203
- var import_react161 = require("react");
17204
- var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
17205
- var ParameterSelect = (0, import_react161.forwardRef)(
17919
+ var import_react165 = require("react");
17920
+ var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
17921
+ var ParameterSelect = (0, import_react165.forwardRef)(
17206
17922
  ({ defaultOption, options, ...props }, ref) => {
17207
17923
  const { shellProps, innerProps } = extractParameterProps(props);
17208
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
17924
+ return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
17209
17925
  }
17210
17926
  );
17211
- var ParameterSelectInner = (0, import_react161.forwardRef)(
17927
+ var ParameterSelectInner = (0, import_react165.forwardRef)(
17212
17928
  ({ defaultOption, options, ...props }, ref) => {
17213
- const { id, label, hiddenLabel } = useParameterShell();
17214
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
17929
+ const { id, label: label2, hiddenLabel } = useParameterShell();
17930
+ return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
17215
17931
  "select",
17216
17932
  {
17217
17933
  css: [input3, selectInput],
17218
17934
  id,
17219
- "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
17935
+ "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
17220
17936
  ref,
17221
17937
  ...props,
17222
17938
  children: [
17223
- defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
17939
+ defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("option", { value: "", children: defaultOption }) : null,
17224
17940
  options.map((option) => {
17225
17941
  var _a;
17226
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
17942
+ return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
17227
17943
  })
17228
17944
  ]
17229
17945
  }
@@ -17231,23 +17947,65 @@ var ParameterSelectInner = (0, import_react161.forwardRef)(
17231
17947
  }
17232
17948
  );
17233
17949
 
17950
+ // src/components/ParameterInputs/ParameterSelectSlider.tsx
17951
+ init_emotion_jsx_shim();
17952
+ var import_react166 = require("react");
17953
+ var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
17954
+ var ParameterSelectSlider = (0, import_react166.forwardRef)(
17955
+ (props, ref) => {
17956
+ const { shellProps, innerProps } = extractParameterProps(props);
17957
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterShell, { "data-testid": "parameter-select-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterSelectSliderInner, { ref, ...innerProps }) });
17958
+ }
17959
+ );
17960
+ var ParameterSelectSliderInner = (0, import_react166.forwardRef)(({ options, value, onChange, ...props }, ref) => {
17961
+ const { id, label: label2, hiddenLabel } = useParameterShell();
17962
+ const numericValue = (0, import_react166.useMemo)(() => {
17963
+ const index = options.findIndex((option) => option.value === value);
17964
+ return index >= 0 ? index : 0;
17965
+ }, [options, value]);
17966
+ const handleChange = (0, import_react166.useCallback)(
17967
+ (newIndex) => {
17968
+ const selectedOption = options[newIndex];
17969
+ if (selectedOption) {
17970
+ onChange(selectedOption.value);
17971
+ }
17972
+ },
17973
+ [options, onChange]
17974
+ );
17975
+ return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
17976
+ Slider,
17977
+ {
17978
+ ref,
17979
+ id,
17980
+ "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
17981
+ value: numericValue,
17982
+ onChange: handleChange,
17983
+ options,
17984
+ showNumberInput: false,
17985
+ ...props
17986
+ }
17987
+ );
17988
+ });
17989
+ ParameterSelectSlider.displayName = "ParameterSelectSlider";
17990
+ ParameterSelectSliderInner.displayName = "ParameterSelectSliderInner";
17991
+
17234
17992
  // src/components/ParameterInputs/ParameterTextarea.tsx
17235
17993
  init_emotion_jsx_shim();
17236
- var import_react162 = require("react");
17237
- var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
17238
- var ParameterTextarea = (0, import_react162.forwardRef)((props, ref) => {
17994
+ var import_react167 = require("react");
17995
+ var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
17996
+ var ParameterTextarea = (0, import_react167.forwardRef)((props, ref) => {
17239
17997
  const { shellProps, innerProps } = extractParameterProps(props);
17240
- return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
17998
+ return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
17241
17999
  });
17242
- var ParameterTextareaInner = (0, import_react162.forwardRef)(({ ...props }, ref) => {
17243
- const { id, label, hiddenLabel } = useParameterShell();
17244
- return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
18000
+ var ParameterTextareaInner = (0, import_react167.forwardRef)(({ ...props }, ref) => {
18001
+ const { id, label: label2, hiddenLabel } = useParameterShell();
18002
+ return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
17245
18003
  "textarea",
17246
18004
  {
17247
18005
  css: [input3, textarea2],
17248
18006
  id,
17249
18007
  ref,
17250
- "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
18008
+ "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
17251
18009
  ...props
17252
18010
  }
17253
18011
  );
@@ -17255,30 +18013,45 @@ var ParameterTextareaInner = (0, import_react162.forwardRef)(({ ...props }, ref)
17255
18013
 
17256
18014
  // src/components/ParameterInputs/ParameterToggle.tsx
17257
18015
  init_emotion_jsx_shim();
17258
- var import_react163 = require("react");
17259
- var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
17260
- var ParameterToggle = (0, import_react163.forwardRef)((props, ref) => {
18016
+ var import_react168 = require("react");
18017
+ var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
18018
+ var ParameterToggle = (0, import_react168.forwardRef)((props, ref) => {
17261
18019
  const { shellProps, innerProps } = extractParameterProps(props);
17262
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
18020
+ return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
17263
18021
  });
17264
- var ParameterToggleInner = (0, import_react163.forwardRef)(
18022
+ ParameterToggle.displayName = "ParameterToggle";
18023
+ var ParameterToggleInner = (0, import_react168.forwardRef)(
17265
18024
  ({ children, ...props }, ref) => {
17266
- const { id, label } = useParameterShell();
17267
- return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
17268
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
17269
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
18025
+ const { type, withoutIndeterminateState, ...otherProps } = props;
18026
+ const { id, label: label2 } = useParameterShell();
18027
+ return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("label", { css: inputToggleLabel2, children: [
18028
+ /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
18029
+ "input",
18030
+ {
18031
+ css: [
18032
+ toggleInput2,
18033
+ !props.withoutIndeterminateState ? toggleInputIndeterminateState : void 0
18034
+ ],
18035
+ type,
18036
+ id,
18037
+ ref,
18038
+ ...otherProps
18039
+ }
18040
+ ),
18041
+ /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { css: inlineLabel2, children: label2 }),
17270
18042
  children
17271
18043
  ] });
17272
18044
  }
17273
18045
  );
18046
+ ParameterToggleInner.displayName = "ParameterToggleInner";
17274
18047
 
17275
18048
  // src/components/ProgressBar/ProgressBar.tsx
17276
18049
  init_emotion_jsx_shim();
17277
18050
 
17278
18051
  // src/components/ProgressBar/ProgressBar.styles.ts
17279
18052
  init_emotion_jsx_shim();
17280
- var import_react164 = require("@emotion/react");
17281
- var container3 = import_react164.css`
18053
+ var import_react169 = require("@emotion/react");
18054
+ var container4 = import_react169.css`
17282
18055
  background: var(--gray-50);
17283
18056
  margin-block: var(--spacing-sm);
17284
18057
  position: relative;
@@ -17288,17 +18061,17 @@ var container3 = import_react164.css`
17288
18061
  border: solid 1px var(--gray-300);
17289
18062
  `;
17290
18063
  var themeMap = {
17291
- primary: import_react164.css`
18064
+ primary: import_react169.css`
17292
18065
  --progress-color: var(--accent-light);
17293
18066
  `,
17294
- secondary: import_react164.css`
18067
+ secondary: import_react169.css`
17295
18068
  --progress-color: var(--accent-alt-light);
17296
18069
  `,
17297
- destructive: import_react164.css`
18070
+ destructive: import_react169.css`
17298
18071
  --progress-color: var(--brand-secondary-5);
17299
18072
  `
17300
18073
  };
17301
- var slidingBackgroundPosition = import_react164.keyframes`
18074
+ var slidingBackgroundPosition = import_react169.keyframes`
17302
18075
  from {
17303
18076
  background-position: 0 0;
17304
18077
  }
@@ -17306,10 +18079,10 @@ var slidingBackgroundPosition = import_react164.keyframes`
17306
18079
  background-position: 64px 0;
17307
18080
  }
17308
18081
  `;
17309
- var determinate = import_react164.css`
18082
+ var determinate = import_react169.css`
17310
18083
  background-color: var(--progress-color);
17311
18084
  `;
17312
- var indeterminate = import_react164.css`
18085
+ var indeterminate = import_react169.css`
17313
18086
  background-image: linear-gradient(
17314
18087
  45deg,
17315
18088
  var(--progress-color) 25%,
@@ -17323,7 +18096,7 @@ var indeterminate = import_react164.css`
17323
18096
  background-size: 64px 64px;
17324
18097
  animation: ${slidingBackgroundPosition} 1s linear infinite;
17325
18098
  `;
17326
- var bar = import_react164.css`
18099
+ var bar = import_react169.css`
17327
18100
  position: absolute;
17328
18101
  inset: 0;
17329
18102
  transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -17331,7 +18104,7 @@ var bar = import_react164.css`
17331
18104
  `;
17332
18105
 
17333
18106
  // src/components/ProgressBar/ProgressBar.tsx
17334
- var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
18107
+ var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
17335
18108
  function ProgressBar({
17336
18109
  current,
17337
18110
  max,
@@ -17341,10 +18114,10 @@ function ProgressBar({
17341
18114
  }) {
17342
18115
  const valueNow = Math.min(current, max);
17343
18116
  const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
17344
- return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
18117
+ return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
17345
18118
  "div",
17346
18119
  {
17347
- css: container3,
18120
+ css: container4,
17348
18121
  role: "progressbar",
17349
18122
  "aria-busy": valuePercentage !== 100,
17350
18123
  "aria-invalid": false,
@@ -17352,7 +18125,7 @@ function ProgressBar({
17352
18125
  "aria-valuemax": max,
17353
18126
  "aria-valuenow": valueNow,
17354
18127
  ...props,
17355
- children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
18128
+ children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
17356
18129
  "div",
17357
18130
  {
17358
18131
  css: [
@@ -17372,31 +18145,31 @@ function ProgressBar({
17372
18145
 
17373
18146
  // src/components/ProgressList/ProgressList.tsx
17374
18147
  init_emotion_jsx_shim();
17375
- var import_react166 = require("@emotion/react");
18148
+ var import_react171 = require("@emotion/react");
17376
18149
  var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
17377
18150
  var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
17378
18151
  var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
17379
- var import_react167 = require("react");
18152
+ var import_react172 = require("react");
17380
18153
 
17381
18154
  // src/components/ProgressList/styles/ProgressList.styles.ts
17382
18155
  init_emotion_jsx_shim();
17383
- var import_react165 = require("@emotion/react");
17384
- var progressListStyles = import_react165.css`
18156
+ var import_react170 = require("@emotion/react");
18157
+ var progressListStyles = import_react170.css`
17385
18158
  display: flex;
17386
18159
  flex-direction: column;
17387
18160
  gap: var(--spacing-sm);
17388
18161
  list-style-type: none;
17389
18162
  `;
17390
- var progressListItemStyles = import_react165.css`
18163
+ var progressListItemStyles = import_react170.css`
17391
18164
  display: flex;
17392
18165
  gap: var(--spacing-base);
17393
18166
  align-items: center;
17394
18167
  `;
17395
18168
 
17396
18169
  // src/components/ProgressList/ProgressList.tsx
17397
- var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
18170
+ var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
17398
18171
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
17399
- const itemsWithStatus = (0, import_react167.useMemo)(() => {
18172
+ const itemsWithStatus = (0, import_react172.useMemo)(() => {
17400
18173
  const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
17401
18174
  return items.map((item, index) => {
17402
18175
  let status = "queued";
@@ -17408,15 +18181,15 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
17408
18181
  return { ...item, status };
17409
18182
  });
17410
18183
  }, [items, inProgressId]);
17411
- return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
17412
- return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
18184
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label: label2, status, error, errorLevel }) => {
18185
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
17413
18186
  ProgressListItem,
17414
18187
  {
17415
18188
  status,
17416
18189
  error,
17417
18190
  errorLevel,
17418
18191
  autoEllipsis,
17419
- children: label
18192
+ children: label2
17420
18193
  },
17421
18194
  id
17422
18195
  );
@@ -17429,7 +18202,7 @@ var ProgressListItem = ({
17429
18202
  errorLevel = "danger",
17430
18203
  autoEllipsis = false
17431
18204
  }) => {
17432
- const icon = (0, import_react167.useMemo)(() => {
18205
+ const icon = (0, import_react172.useMemo)(() => {
17433
18206
  if (error) {
17434
18207
  return warningIcon;
17435
18208
  }
@@ -17440,14 +18213,14 @@ var ProgressListItem = ({
17440
18213
  };
17441
18214
  return iconPerStatus[status];
17442
18215
  }, [status, error]);
17443
- const statusStyles = (0, import_react167.useMemo)(() => {
18216
+ const statusStyles = (0, import_react172.useMemo)(() => {
17444
18217
  if (error) {
17445
- return errorLevel === "caution" ? import_react166.css`
18218
+ return errorLevel === "caution" ? import_react171.css`
17446
18219
  color: rgb(161, 98, 7);
17447
18220
  & svg {
17448
18221
  color: rgb(250, 204, 21);
17449
18222
  }
17450
- ` : import_react166.css`
18223
+ ` : import_react171.css`
17451
18224
  color: rgb(185, 28, 28);
17452
18225
  & svg {
17453
18226
  color: var(--brand-primary-2);
@@ -17455,40 +18228,40 @@ var ProgressListItem = ({
17455
18228
  `;
17456
18229
  }
17457
18230
  const colorPerStatus = {
17458
- completed: import_react166.css`
18231
+ completed: import_react171.css`
17459
18232
  opacity: 0.75;
17460
18233
  `,
17461
- inProgress: import_react166.css`
18234
+ inProgress: import_react171.css`
17462
18235
  -webkit-text-stroke-width: thin;
17463
18236
  `,
17464
- queued: import_react166.css`
18237
+ queued: import_react171.css`
17465
18238
  opacity: 0.5;
17466
18239
  `
17467
18240
  };
17468
18241
  return colorPerStatus[status];
17469
18242
  }, [status, error, errorLevel]);
17470
- return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
17471
- /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
17472
- /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
18243
+ return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
18244
+ /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
18245
+ /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { children: [
17473
18246
  children,
17474
- /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
18247
+ /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
17475
18248
  ] })
17476
18249
  ] });
17477
18250
  };
17478
18251
 
17479
18252
  // src/components/SegmentedControl/SegmentedControl.tsx
17480
18253
  init_emotion_jsx_shim();
17481
- var import_react169 = require("@emotion/react");
18254
+ var import_react174 = require("@emotion/react");
17482
18255
  var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
17483
- var import_react170 = require("react");
18256
+ var import_react175 = require("react");
17484
18257
 
17485
18258
  // src/components/SegmentedControl/SegmentedControl.styles.ts
17486
18259
  init_emotion_jsx_shim();
17487
- var import_react168 = require("@emotion/react");
17488
- var segmentedControlRootStyles = import_react168.css`
18260
+ var import_react173 = require("@emotion/react");
18261
+ var segmentedControlRootStyles = import_react173.css`
17489
18262
  position: relative;
17490
18263
  `;
17491
- var segmentedControlScrollIndicatorsStyles = import_react168.css`
18264
+ var segmentedControlScrollIndicatorsStyles = import_react173.css`
17492
18265
  position: absolute;
17493
18266
  inset: 0;
17494
18267
  z-index: 1;
@@ -17516,17 +18289,17 @@ var segmentedControlScrollIndicatorsStyles = import_react168.css`
17516
18289
  background: linear-gradient(to left, var(--background-color) 10%, transparent);
17517
18290
  }
17518
18291
  `;
17519
- var segmentedControlScrollIndicatorStartVisibleStyles = import_react168.css`
18292
+ var segmentedControlScrollIndicatorStartVisibleStyles = import_react173.css`
17520
18293
  &::before {
17521
18294
  opacity: 1;
17522
18295
  }
17523
18296
  `;
17524
- var segmentedControlScrollIndicatorEndVisibleStyles = import_react168.css`
18297
+ var segmentedControlScrollIndicatorEndVisibleStyles = import_react173.css`
17525
18298
  &::after {
17526
18299
  opacity: 1;
17527
18300
  }
17528
18301
  `;
17529
- var segmentedControlWrapperStyles = import_react168.css`
18302
+ var segmentedControlWrapperStyles = import_react173.css`
17530
18303
  overflow-y: auto;
17531
18304
  scroll-behavior: smooth;
17532
18305
  scrollbar-width: none;
@@ -17535,7 +18308,7 @@ var segmentedControlWrapperStyles = import_react168.css`
17535
18308
  height: 0px;
17536
18309
  }
17537
18310
  `;
17538
- var segmentedControlStyles = import_react168.css`
18311
+ var segmentedControlStyles = import_react173.css`
17539
18312
  --segmented-control-rounded-value: var(--rounded-base);
17540
18313
  --segmented-control-border-width: 1px;
17541
18314
  --segmented-control-selected-color: var(--brand-secondary-3);
@@ -17554,14 +18327,14 @@ var segmentedControlStyles = import_react168.css`
17554
18327
  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
17555
18328
  font-size: var(--fs-xs);
17556
18329
  `;
17557
- var segmentedControlVerticalStyles = import_react168.css`
18330
+ var segmentedControlVerticalStyles = import_react173.css`
17558
18331
  flex-direction: column;
17559
18332
  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
17560
18333
  var(--segmented-control-rounded-value) 0 0;
17561
18334
  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
17562
18335
  var(--segmented-control-rounded-value);
17563
18336
  `;
17564
- var segmentedControlItemStyles = import_react168.css`
18337
+ var segmentedControlItemStyles = import_react173.css`
17565
18338
  &:first-of-type label {
17566
18339
  border-radius: var(--segmented-control-first-border-radius);
17567
18340
  }
@@ -17569,10 +18342,10 @@ var segmentedControlItemStyles = import_react168.css`
17569
18342
  border-radius: var(--segmented-control-last-border-radius);
17570
18343
  }
17571
18344
  `;
17572
- var segmentedControlInputStyles = import_react168.css`
18345
+ var segmentedControlInputStyles = import_react173.css`
17573
18346
  ${accessibleHidden}
17574
18347
  `;
17575
- var segmentedControlLabelStyles = (checked, disabled2) => import_react168.css`
18348
+ var segmentedControlLabelStyles = (checked, disabled2) => import_react173.css`
17576
18349
  position: relative;
17577
18350
  display: flex;
17578
18351
  align-items: center;
@@ -17636,25 +18409,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react168.css`
17636
18409
  `}
17637
18410
  }
17638
18411
  `;
17639
- var segmentedControlLabelIconOnlyStyles = import_react168.css`
18412
+ var segmentedControlLabelIconOnlyStyles = import_react173.css`
17640
18413
  padding-inline: 0.5em;
17641
18414
  `;
17642
- var segmentedControlLabelCheckStyles = import_react168.css`
18415
+ var segmentedControlLabelCheckStyles = import_react173.css`
17643
18416
  opacity: 0.5;
17644
18417
  `;
17645
- var segmentedControlLabelContentStyles = import_react168.css`
18418
+ var segmentedControlLabelContentStyles = import_react173.css`
17646
18419
  display: flex;
17647
18420
  align-items: center;
17648
18421
  justify-content: center;
17649
18422
  gap: var(--spacing-sm);
17650
18423
  height: 100%;
17651
18424
  `;
17652
- var segmentedControlLabelTextStyles = import_react168.css`
18425
+ var segmentedControlLabelTextStyles = import_react173.css`
17653
18426
  white-space: nowrap;
17654
18427
  `;
17655
18428
 
17656
18429
  // src/components/SegmentedControl/SegmentedControl.tsx
17657
- var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
18430
+ var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
17658
18431
  var SegmentedControl = ({
17659
18432
  name,
17660
18433
  options,
@@ -17669,10 +18442,10 @@ var SegmentedControl = ({
17669
18442
  currentBackgroundColor = "white",
17670
18443
  ...props
17671
18444
  }) => {
17672
- const wrapperRef = (0, import_react170.useRef)(null);
17673
- const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react170.useState)(false);
17674
- const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react170.useState)(false);
17675
- const onOptionChange = (0, import_react170.useCallback)(
18445
+ const wrapperRef = (0, import_react175.useRef)(null);
18446
+ const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react175.useState)(false);
18447
+ const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react175.useState)(false);
18448
+ const onOptionChange = (0, import_react175.useCallback)(
17676
18449
  (event) => {
17677
18450
  if (event.target.checked) {
17678
18451
  onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -17680,19 +18453,19 @@ var SegmentedControl = ({
17680
18453
  },
17681
18454
  [options, onChange]
17682
18455
  );
17683
- const sizeStyles = (0, import_react170.useMemo)(() => {
18456
+ const sizeStyles = (0, import_react175.useMemo)(() => {
17684
18457
  const map = {
17685
- sm: (0, import_react169.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
17686
- md: (0, import_react169.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
17687
- lg: (0, import_react169.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
17688
- xl: (0, import_react169.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
18458
+ sm: (0, import_react174.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
18459
+ md: (0, import_react174.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
18460
+ lg: (0, import_react174.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
18461
+ xl: (0, import_react174.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
17689
18462
  };
17690
18463
  return map[size];
17691
18464
  }, [size]);
17692
- const isIconOnly = (0, import_react170.useMemo)(() => {
18465
+ const isIconOnly = (0, import_react175.useMemo)(() => {
17693
18466
  return options.every((option) => option && option.icon && !option.label);
17694
18467
  }, [options]);
17695
- (0, import_react170.useEffect)(() => {
18468
+ (0, import_react175.useEffect)(() => {
17696
18469
  const wrapperElement = wrapperRef.current;
17697
18470
  const onScroll = () => {
17698
18471
  if (!wrapperElement) {
@@ -17713,8 +18486,8 @@ var SegmentedControl = ({
17713
18486
  wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
17714
18487
  };
17715
18488
  }, []);
17716
- return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
17717
- /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
18489
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
18490
+ /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
17718
18491
  "div",
17719
18492
  {
17720
18493
  css: [
@@ -17731,12 +18504,12 @@ var SegmentedControl = ({
17731
18504
  const text = option.label ? option.label : option.icon ? null : String(option.value);
17732
18505
  const isDisabled = disabled2 || option.disabled;
17733
18506
  const isChecked = option.value === value;
17734
- return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
18507
+ return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
17735
18508
  "div",
17736
18509
  {
17737
18510
  css: segmentedControlItemStyles,
17738
18511
  "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
17739
- children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
18512
+ children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
17740
18513
  "label",
17741
18514
  {
17742
18515
  css: [
@@ -17745,7 +18518,7 @@ var SegmentedControl = ({
17745
18518
  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
17746
18519
  ],
17747
18520
  children: [
17748
- /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
18521
+ /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
17749
18522
  "input",
17750
18523
  {
17751
18524
  css: segmentedControlInputStyles,
@@ -17757,10 +18530,10 @@ var SegmentedControl = ({
17757
18530
  disabled: isDisabled
17758
18531
  }
17759
18532
  ),
17760
- option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
17761
- /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
17762
- !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
17763
- !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
18533
+ option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
18534
+ /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
18535
+ !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
18536
+ !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
17764
18537
  ] })
17765
18538
  ]
17766
18539
  }
@@ -17770,7 +18543,7 @@ var SegmentedControl = ({
17770
18543
  })
17771
18544
  }
17772
18545
  ) }),
17773
- /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
18546
+ /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
17774
18547
  "div",
17775
18548
  {
17776
18549
  css: [
@@ -17788,18 +18561,18 @@ init_emotion_jsx_shim();
17788
18561
 
17789
18562
  // src/components/Skeleton/Skeleton.styles.ts
17790
18563
  init_emotion_jsx_shim();
17791
- var import_react171 = require("@emotion/react");
17792
- var lightFadingOut = import_react171.keyframes`
18564
+ var import_react176 = require("@emotion/react");
18565
+ var lightFadingOut = import_react176.keyframes`
17793
18566
  from { opacity: 0.1; }
17794
18567
  to { opacity: 0.025; }
17795
18568
  `;
17796
- var skeletonStyles = import_react171.css`
18569
+ var skeletonStyles = import_react176.css`
17797
18570
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
17798
18571
  background-color: var(--gray-900);
17799
18572
  `;
17800
18573
 
17801
18574
  // src/components/Skeleton/Skeleton.tsx
17802
- var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
18575
+ var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
17803
18576
  var Skeleton = ({
17804
18577
  width = "100%",
17805
18578
  height = "1.25rem",
@@ -17807,7 +18580,7 @@ var Skeleton = ({
17807
18580
  circle = false,
17808
18581
  children,
17809
18582
  ...otherProps
17810
- }) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
18583
+ }) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
17811
18584
  "div",
17812
18585
  {
17813
18586
  css: [
@@ -17831,12 +18604,12 @@ init_emotion_jsx_shim();
17831
18604
 
17832
18605
  // src/components/Spinner/Spinner.tsx
17833
18606
  init_emotion_jsx_shim();
17834
- var import_react173 = require("react");
18607
+ var import_react178 = require("react");
17835
18608
 
17836
18609
  // src/components/Spinner/Spinner.styles.ts
17837
18610
  init_emotion_jsx_shim();
17838
- var import_react172 = require("@emotion/react");
17839
- var SpinnerStyles = import_react172.css`
18611
+ var import_react177 = require("@emotion/react");
18612
+ var SpinnerStyles = import_react177.css`
17840
18613
  --color: #00b4ff;
17841
18614
  --speed: 5s;
17842
18615
  --red: rgb(218, 63, 50);
@@ -18266,22 +19039,22 @@ var SpinnerStyles = import_react172.css`
18266
19039
  `;
18267
19040
 
18268
19041
  // src/components/Spinner/Spinner.tsx
18269
- var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
19042
+ var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
18270
19043
  var Spinner = ({
18271
19044
  width,
18272
- label,
19045
+ label: label2,
18273
19046
  isPaused
18274
19047
  }) => {
18275
- const ref = (0, import_react173.useRef)(null);
18276
- (0, import_react173.useEffect)(() => {
19048
+ const ref = (0, import_react178.useRef)(null);
19049
+ (0, import_react178.useEffect)(() => {
18277
19050
  var _a, _b, _c;
18278
19051
  (_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
18279
19052
  }, [width]);
18280
- return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
19053
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
18281
19054
  "div",
18282
19055
  {
18283
19056
  ref,
18284
- "aria-label": label,
19057
+ "aria-label": label2,
18285
19058
  style: {
18286
19059
  width: typeof width === "number" ? `${width}px` : width,
18287
19060
  height: typeof width === "number" ? `${width}px` : width
@@ -18289,51 +19062,51 @@ var Spinner = ({
18289
19062
  css: SpinnerStyles,
18290
19063
  className: `container${isPaused ? " paused" : ""}`,
18291
19064
  children: [
18292
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "pyramid-container", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pyramid top", children: [
18293
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side one" }),
18294
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side two" }),
18295
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side three" }),
18296
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side four" }),
18297
- /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "bottom-pyramid", children: [
18298
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side five" }),
18299
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side six" }),
18300
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side seven" }),
18301
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side eight" })
19065
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "pyramid-container", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pyramid top", children: [
19066
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side one" }),
19067
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side two" }),
19068
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side three" }),
19069
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side four" }),
19070
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "bottom-pyramid", children: [
19071
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side five" }),
19072
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side six" }),
19073
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side seven" }),
19074
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "side eight" })
18302
19075
  ] })
18303
19076
  ] }) }),
18304
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "turning-circle" }),
18305
- /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-top-right", children: [
18306
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-center" }),
18307
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
18308
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
18309
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
18310
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
19077
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "turning-circle" }),
19078
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-top-right", children: [
19079
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-center" }),
19080
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
19081
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
19082
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
19083
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
18311
19084
  ] }),
18312
- /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-top-left-2", children: [
18313
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-center" }),
18314
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
18315
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
18316
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
18317
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
19085
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-top-left-2", children: [
19086
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-center" }),
19087
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
19088
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
19089
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
19090
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
18318
19091
  ] }),
18319
- /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-top-left", children: [
18320
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
18321
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
18322
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
18323
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
19092
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-top-left", children: [
19093
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
19094
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
19095
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
19096
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
18324
19097
  ] }),
18325
- /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-bottom-right", children: [
18326
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
18327
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
18328
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
18329
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
19098
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-bottom-right", children: [
19099
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
19100
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
19101
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
19102
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
18330
19103
  ] }),
18331
- /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-bottom-left", children: [
18332
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-center" }),
18333
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
18334
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
18335
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
18336
- /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
19104
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "pulsating-star delay-bottom-left", children: [
19105
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-center" }),
19106
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-top" }),
19107
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-bottom" }),
19108
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-left" }),
19109
+ /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "star-inner star-right" })
18337
19110
  ] })
18338
19111
  ]
18339
19112
  }
@@ -18342,12 +19115,12 @@ var Spinner = ({
18342
19115
 
18343
19116
  // src/components/Switch/Switch.tsx
18344
19117
  init_emotion_jsx_shim();
18345
- var import_react175 = require("react");
19118
+ var import_react180 = require("react");
18346
19119
 
18347
19120
  // src/components/Switch/Switch.styles.ts
18348
19121
  init_emotion_jsx_shim();
18349
- var import_react174 = require("@emotion/react");
18350
- var SwitchInputContainer = import_react174.css`
19122
+ var import_react179 = require("@emotion/react");
19123
+ var SwitchInputContainer = import_react179.css`
18351
19124
  cursor: pointer;
18352
19125
  display: inline-flex;
18353
19126
  position: relative;
@@ -18357,7 +19130,7 @@ var SwitchInputContainer = import_react174.css`
18357
19130
  user-select: none;
18358
19131
  z-index: 0;
18359
19132
  `;
18360
- var SwitchInput = (size) => import_react174.css`
19133
+ var SwitchInput = (size) => import_react179.css`
18361
19134
  appearance: none;
18362
19135
  border-radius: var(--rounded-full);
18363
19136
  background-color: var(--white);
@@ -18396,18 +19169,18 @@ var SwitchInput = (size) => import_react174.css`
18396
19169
  cursor: not-allowed;
18397
19170
  }
18398
19171
  `;
18399
- var SwitchInputCheckedDirectionLeft = import_react174.css`
19172
+ var SwitchInputCheckedDirectionLeft = import_react179.css`
18400
19173
  &:checked {
18401
19174
  transform: translateX(var(--spacing-base));
18402
19175
  }
18403
19176
  `;
18404
- var SwitchInputCheckedDirectionRight = import_react174.css`
19177
+ var SwitchInputCheckedDirectionRight = import_react179.css`
18405
19178
  transform: translateX(-var(--spacing-base));
18406
19179
  &:checked {
18407
19180
  transform: translateX(0);
18408
19181
  }
18409
19182
  `;
18410
- var SwitchInputDisabled = import_react174.css`
19183
+ var SwitchInputDisabled = import_react179.css`
18411
19184
  opacity: var(--opacity-50);
18412
19185
  cursor: not-allowed;
18413
19186
 
@@ -18415,19 +19188,19 @@ var SwitchInputDisabled = import_react174.css`
18415
19188
  cursor: not-allowed;
18416
19189
  }
18417
19190
  `;
18418
- var SwitchInputLabelAlignmentLeft = (size) => import_react174.css`
19191
+ var SwitchInputLabelAlignmentLeft = (size) => import_react179.css`
18419
19192
  padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
18420
19193
  &:before {
18421
19194
  left: 0;
18422
19195
  }
18423
19196
  `;
18424
- var SwitchInputLabelAlignmentRight = (size) => import_react174.css`
19197
+ var SwitchInputLabelAlignmentRight = (size) => import_react179.css`
18425
19198
  padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
18426
19199
  &:before {
18427
19200
  right: 0;
18428
19201
  }
18429
19202
  `;
18430
- var SwitchInputLabel = (size) => import_react174.css`
19203
+ var SwitchInputLabel = (size) => import_react179.css`
18431
19204
  align-items: center;
18432
19205
  color: var(--typography-base);
18433
19206
  display: inline-flex;
@@ -18447,28 +19220,28 @@ var SwitchInputLabel = (size) => import_react174.css`
18447
19220
  top: 0;
18448
19221
  }
18449
19222
  `;
18450
- var SwitchTextAlignmentLeft = (size) => import_react174.css`
19223
+ var SwitchTextAlignmentLeft = (size) => import_react179.css`
18451
19224
  padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
18452
19225
  `;
18453
- var SwitchTextAlignmentRight = (size) => import_react174.css`
19226
+ var SwitchTextAlignmentRight = (size) => import_react179.css`
18454
19227
  padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
18455
19228
  `;
18456
- var SwitchText = import_react174.css`
19229
+ var SwitchText = import_react179.css`
18457
19230
  color: var(--gray-500);
18458
19231
  font-size: var(--fs-sm);
18459
19232
  `;
18460
- var SwitchInputContainerAlignmentLeft = import_react174.css`
19233
+ var SwitchInputContainerAlignmentLeft = import_react179.css`
18461
19234
  flex-direction: row;
18462
19235
  `;
18463
- var SwitchInputContainerAlignmentRight = import_react174.css`
19236
+ var SwitchInputContainerAlignmentRight = import_react179.css`
18464
19237
  flex-direction: row-reverse;
18465
19238
  `;
18466
19239
 
18467
19240
  // src/components/Switch/Switch.tsx
18468
- var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
18469
- var Switch = (0, import_react175.forwardRef)(
19241
+ var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
19242
+ var Switch = (0, import_react180.forwardRef)(
18470
19243
  ({
18471
- label,
19244
+ label: label2,
18472
19245
  infoText,
18473
19246
  toggleText,
18474
19247
  children,
@@ -18477,7 +19250,7 @@ var Switch = (0, import_react175.forwardRef)(
18477
19250
  ...inputProps
18478
19251
  }, ref) => {
18479
19252
  let additionalText = infoText;
18480
- const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0, import_react175.useMemo)(() => {
19253
+ const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0, import_react180.useMemo)(() => {
18481
19254
  if (alignment === "left") {
18482
19255
  return {
18483
19256
  SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
@@ -18494,8 +19267,8 @@ var Switch = (0, import_react175.forwardRef)(
18494
19267
  if (infoText && toggleText) {
18495
19268
  additionalText = inputProps.checked ? toggleText : infoText;
18496
19269
  }
18497
- return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
18498
- /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
19270
+ return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
19271
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
18499
19272
  "label",
18500
19273
  {
18501
19274
  css: [
@@ -18505,7 +19278,7 @@ var Switch = (0, import_react175.forwardRef)(
18505
19278
  inputProps.disabled ? SwitchInputDisabled : void 0
18506
19279
  ],
18507
19280
  children: [
18508
- /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
19281
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
18509
19282
  "input",
18510
19283
  {
18511
19284
  type: "checkbox",
@@ -18514,11 +19287,11 @@ var Switch = (0, import_react175.forwardRef)(
18514
19287
  ref
18515
19288
  }
18516
19289
  ),
18517
- /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label })
19290
+ /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
18518
19291
  ]
18519
19292
  }
18520
19293
  ),
18521
- additionalText ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
19294
+ additionalText ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
18522
19295
  "p",
18523
19296
  {
18524
19297
  css: [
@@ -18538,8 +19311,8 @@ init_emotion_jsx_shim();
18538
19311
 
18539
19312
  // src/components/Table/Table.styles.ts
18540
19313
  init_emotion_jsx_shim();
18541
- var import_react176 = require("@emotion/react");
18542
- var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react176.css`
19314
+ var import_react181 = require("@emotion/react");
19315
+ var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react181.css`
18543
19316
  border-bottom: 1px solid var(--gray-400);
18544
19317
  border-collapse: collapse;
18545
19318
  min-width: 100%;
@@ -18559,21 +19332,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react176.css`
18559
19332
  background-color: var(--gray-50);
18560
19333
  }
18561
19334
  `;
18562
- var tableHead = import_react176.css`
19335
+ var tableHead = import_react181.css`
18563
19336
  color: var(--typography-base);
18564
19337
  text-align: left;
18565
19338
  `;
18566
- var tableRow = import_react176.css`
19339
+ var tableRow = import_react181.css`
18567
19340
  border-bottom: 1px solid var(--gray-200);
18568
19341
  font-size: var(--fs-sm);
18569
19342
  `;
18570
- var tableCellHead = import_react176.css`
19343
+ var tableCellHead = import_react181.css`
18571
19344
  font-size: var(--fs-sm);
18572
19345
  font-weight: var(--fw-regular);
18573
19346
  line-height: 1.2;
18574
19347
  }
18575
19348
  `;
18576
- var responsiveTableContainer = import_react176.css`
19349
+ var responsiveTableContainer = import_react181.css`
18577
19350
  max-width: calc(100vw - var(--spacing-md) * 2);
18578
19351
  overflow-x: auto;
18579
19352
  ${scrollbarStyles}
@@ -18592,60 +19365,60 @@ var responsiveTableContainer = import_react176.css`
18592
19365
  `;
18593
19366
 
18594
19367
  // src/components/Table/ResponsiveTableContainer.tsx
18595
- var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
19368
+ var import_jsx_runtime145 = require("@emotion/react/jsx-runtime");
18596
19369
  var ResponsiveTableContainer = ({ children }) => {
18597
- return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { css: responsiveTableContainer, children });
19370
+ return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("div", { css: responsiveTableContainer, children });
18598
19371
  };
18599
19372
 
18600
19373
  // src/components/Table/Table.tsx
18601
19374
  init_emotion_jsx_shim();
18602
19375
  var React22 = __toESM(require("react"));
18603
- var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
19376
+ var import_jsx_runtime146 = require("@emotion/react/jsx-runtime");
18604
19377
  var Table = React22.forwardRef(
18605
19378
  ({ children, cellPadding, ...otherProps }, ref) => {
18606
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
19379
+ return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
18607
19380
  }
18608
19381
  );
18609
19382
  var TableHead = React22.forwardRef(
18610
19383
  ({ children, ...otherProps }, ref) => {
18611
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
19384
+ return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
18612
19385
  }
18613
19386
  );
18614
19387
  var TableBody = React22.forwardRef(
18615
19388
  ({ children, ...otherProps }, ref) => {
18616
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tbody", { ref, ...otherProps, children });
19389
+ return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("tbody", { ref, ...otherProps, children });
18617
19390
  }
18618
19391
  );
18619
19392
  var TableFoot = React22.forwardRef(
18620
19393
  ({ children, ...otherProps }, ref) => {
18621
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tfoot", { ref, ...otherProps, children });
19394
+ return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("tfoot", { ref, ...otherProps, children });
18622
19395
  }
18623
19396
  );
18624
19397
  var TableRow = React22.forwardRef(
18625
19398
  ({ children, ...otherProps }, ref) => {
18626
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
19399
+ return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
18627
19400
  }
18628
19401
  );
18629
19402
  var TableCellHead = React22.forwardRef(
18630
19403
  ({ children, ...otherProps }, ref) => {
18631
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
19404
+ return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
18632
19405
  }
18633
19406
  );
18634
19407
  var TableCellData = React22.forwardRef(
18635
19408
  ({ children, ...otherProps }, ref) => {
18636
- return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("td", { ref, ...otherProps, children });
19409
+ return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("td", { ref, ...otherProps, children });
18637
19410
  }
18638
19411
  );
18639
19412
 
18640
19413
  // src/components/Tabs/Tabs.tsx
18641
19414
  init_emotion_jsx_shim();
18642
- var import_react178 = require("@ariakit/react");
18643
- var import_react179 = require("react");
19415
+ var import_react183 = require("@ariakit/react");
19416
+ var import_react184 = require("react");
18644
19417
 
18645
19418
  // src/components/Tabs/Tabs.styles.ts
18646
19419
  init_emotion_jsx_shim();
18647
- var import_react177 = require("@emotion/react");
18648
- var tabButtonStyles = import_react177.css`
19420
+ var import_react182 = require("@emotion/react");
19421
+ var tabButtonStyles = import_react182.css`
18649
19422
  align-items: center;
18650
19423
  border: 0;
18651
19424
  height: 2.5rem;
@@ -18662,16 +19435,16 @@ var tabButtonStyles = import_react177.css`
18662
19435
  box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
18663
19436
  }
18664
19437
  `;
18665
- var tabButtonGroupStyles = import_react177.css`
19438
+ var tabButtonGroupStyles = import_react182.css`
18666
19439
  display: flex;
18667
19440
  gap: var(--spacing-base);
18668
19441
  border-bottom: 1px solid var(--gray-300);
18669
19442
  `;
18670
19443
 
18671
19444
  // src/components/Tabs/Tabs.tsx
18672
- var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
19445
+ var import_jsx_runtime147 = require("@emotion/react/jsx-runtime");
18673
19446
  var useCurrentTab = () => {
18674
- const context = (0, import_react178.useTabStore)();
19447
+ const context = (0, import_react183.useTabStore)();
18675
19448
  if (!context) {
18676
19449
  throw new Error("This component can only be used inside <Tabs>");
18677
19450
  }
@@ -18685,11 +19458,11 @@ var Tabs = ({
18685
19458
  manual,
18686
19459
  ...props
18687
19460
  }) => {
18688
- const selected = (0, import_react179.useMemo)(() => {
19461
+ const selected = (0, import_react184.useMemo)(() => {
18689
19462
  if (selectedId) return selectedId;
18690
19463
  return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
18691
19464
  }, [selectedId, useHashForState]);
18692
- const onTabSelect = (0, import_react179.useCallback)(
19465
+ const onTabSelect = (0, import_react184.useCallback)(
18693
19466
  (value) => {
18694
19467
  const selectedValueWithoutNull = value != null ? value : void 0;
18695
19468
  onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -18700,23 +19473,23 @@ var Tabs = ({
18700
19473
  },
18701
19474
  [onSelectedIdChange, useHashForState]
18702
19475
  );
18703
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.TabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
19476
+ return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.TabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
18704
19477
  };
18705
19478
  var TabButtonGroup = ({ children, ...props }) => {
18706
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.TabList, { ...props, css: tabButtonGroupStyles, children });
19479
+ return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.TabList, { ...props, css: tabButtonGroupStyles, children });
18707
19480
  };
18708
19481
  var TabButton = ({
18709
19482
  children,
18710
19483
  id,
18711
19484
  ...props
18712
19485
  }) => {
18713
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
19486
+ return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
18714
19487
  };
18715
19488
  var TabContent = ({
18716
19489
  children,
18717
19490
  ...props
18718
19491
  }) => {
18719
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.TabPanel, { ...props, children });
19492
+ return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_react183.TabPanel, { ...props, children });
18720
19493
  };
18721
19494
 
18722
19495
  // src/components/Validation/StatusBullet.tsx
@@ -18724,8 +19497,8 @@ init_emotion_jsx_shim();
18724
19497
 
18725
19498
  // src/components/Validation/StatusBullet.styles.ts
18726
19499
  init_emotion_jsx_shim();
18727
- var import_react180 = require("@emotion/react");
18728
- var StatusBulletContainer = import_react180.css`
19500
+ var import_react185 = require("@emotion/react");
19501
+ var StatusBulletContainer = import_react185.css`
18729
19502
  align-items: center;
18730
19503
  align-self: center;
18731
19504
  color: var(--gray-500);
@@ -18741,33 +19514,33 @@ var StatusBulletContainer = import_react180.css`
18741
19514
  display: block;
18742
19515
  }
18743
19516
  `;
18744
- var StatusBulletBase = import_react180.css`
19517
+ var StatusBulletBase = import_react185.css`
18745
19518
  font-size: var(--fs-sm);
18746
19519
  &:before {
18747
19520
  width: var(--fs-xs);
18748
19521
  height: var(--fs-xs);
18749
19522
  }
18750
19523
  `;
18751
- var StatusBulletSmall = import_react180.css`
19524
+ var StatusBulletSmall = import_react185.css`
18752
19525
  font-size: var(--fs-xs);
18753
19526
  &:before {
18754
19527
  width: var(--fs-xxs);
18755
19528
  height: var(--fs-xxs);
18756
19529
  }
18757
19530
  `;
18758
- var StatusDraft = import_react180.css`
19531
+ var StatusDraft = import_react185.css`
18759
19532
  &:before {
18760
19533
  background: var(--white);
18761
19534
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
18762
19535
  }
18763
19536
  `;
18764
- var StatusModified = import_react180.css`
19537
+ var StatusModified = import_react185.css`
18765
19538
  &:before {
18766
19539
  background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
18767
19540
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
18768
19541
  }
18769
19542
  `;
18770
- var StatusError = import_react180.css`
19543
+ var StatusError = import_react185.css`
18771
19544
  color: var(--error);
18772
19545
  &:before {
18773
19546
  /* TODO: replace this with an svg icon */
@@ -18780,29 +19553,29 @@ var StatusError = import_react180.css`
18780
19553
  );
18781
19554
  }
18782
19555
  `;
18783
- var StatusPublished = import_react180.css`
19556
+ var StatusPublished = import_react185.css`
18784
19557
  &:before {
18785
19558
  background: var(--accent-dark);
18786
19559
  }
18787
19560
  `;
18788
- var StatusOrphan = import_react180.css`
19561
+ var StatusOrphan = import_react185.css`
18789
19562
  &:before {
18790
19563
  background: var(--brand-secondary-5);
18791
19564
  }
18792
19565
  `;
18793
- var StatusUnknown = import_react180.css`
19566
+ var StatusUnknown = import_react185.css`
18794
19567
  &:before {
18795
19568
  background: var(--gray-800);
18796
19569
  }
18797
19570
  `;
18798
- var StatusDeleted = import_react180.css`
19571
+ var StatusDeleted = import_react185.css`
18799
19572
  &:before {
18800
19573
  background: var(--error);
18801
19574
  }
18802
19575
  `;
18803
19576
 
18804
19577
  // src/components/Validation/StatusBullet.tsx
18805
- var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
19578
+ var import_jsx_runtime148 = require("@emotion/react/jsx-runtime");
18806
19579
  var currentStateStyles = {
18807
19580
  Error: StatusError,
18808
19581
  Modified: StatusModified,
@@ -18826,7 +19599,7 @@ var StatusBullet = ({
18826
19599
  compact = false,
18827
19600
  ...props
18828
19601
  }) => {
18829
- const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
19602
+ const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
18830
19603
  "span",
18831
19604
  {
18832
19605
  role: "status",
@@ -18836,9 +19609,9 @@ var StatusBullet = ({
18836
19609
  }
18837
19610
  );
18838
19611
  if (compact) {
18839
- return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {});
19612
+ return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(StatusComponent, {});
18840
19613
  }
18841
- return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {}) }) });
19614
+ return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(StatusComponent, {}) }) });
18842
19615
  };
18843
19616
  // Annotate the CommonJS export names for ESM import in node:
18844
19617
  0 && (module.exports = {
@@ -18963,11 +19736,15 @@ var StatusBullet = ({
18963
19736
  ParameterMultiSelect,
18964
19737
  ParameterMultiSelectInner,
18965
19738
  ParameterNameAndPublicIdInput,
19739
+ ParameterNumberSlider,
19740
+ ParameterNumberSliderInner,
18966
19741
  ParameterOverrideMarker,
18967
19742
  ParameterRichText,
18968
19743
  ParameterRichTextInner,
18969
19744
  ParameterSelect,
18970
19745
  ParameterSelectInner,
19746
+ ParameterSelectSlider,
19747
+ ParameterSelectSliderInner,
18971
19748
  ParameterShell,
18972
19749
  ParameterShellContext,
18973
19750
  ParameterShellPlaceholder,
@@ -18989,6 +19766,8 @@ var StatusBullet = ({
18989
19766
  SegmentedControl,
18990
19767
  SelectableMenuItem,
18991
19768
  Skeleton,
19769
+ Slider,
19770
+ SliderLabels,
18992
19771
  Spinner,
18993
19772
  StatusBullet,
18994
19773
  SuccessMessage,