@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/slider/internal/styles.js

@@ -0,0 +1,91 @@
+import { isLabeledMark } from './utils.js';
+
+function widthToPercentage(w, range) {
+  return `${Math.round(1e3 * w / range) * 0.1}%`;
+}
+function createGridTemplateColumns(min, max, values) {
+  const range = max - min;
+  const colWidths = [];
+  let prev = min;
+  for (let v of values) {
+    colWidths.push(v - prev);
+    prev = v;
+  }
+  colWidths.push(max - prev);
+  let auto = false;
+  const colTemplates = colWidths.map((w) => {
+    if (w === 0) {
+      return "0";
+    }
+    if (!auto) {
+      auto = true;
+      return "auto";
+    }
+    return widthToPercentage(w, range);
+  });
+  return colTemplates.join(" ");
+}
+function createTrackStyle(min, max, value) {
+  const values = Array.isArray(value) ? value : [value];
+  return {
+    gridTemplateColumns: createGridTemplateColumns(min, max, values)
+  };
+}
+function createHandleStyles(count) {
+  return [...Array(count).keys()].map((i) => ({
+    gridColumnStart: `${i + 2}`
+  }));
+}
+function createSliderRailMarksStyle(min, max, marks) {
+  return {
+    gridTemplateColumns: createGridTemplateColumns(
+      min,
+      max,
+      marks.map((mark) => isLabeledMark(mark) ? mark.value : mark)
+    )
+  };
+}
+function createSliderMarkLabelsStyle(min, max, marks) {
+  const range = max - min;
+  const colWidths = [];
+  let prev = min;
+  for (let m of marks) {
+    const w = isLabeledMark(m) ? m.value : m;
+    colWidths.push(w - prev);
+    colWidths.push(0);
+    prev = w;
+  }
+  colWidths.push(max - prev);
+  let auto = false;
+  const colTemplates = colWidths.map((w) => {
+    if (w === 0) {
+      return "0";
+    }
+    if (!auto) {
+      auto = true;
+      return "auto";
+    }
+    return widthToPercentage(w, range);
+  });
+  return {
+    gridTemplateColumns: colTemplates.join(" ")
+  };
+}
+function createSliderMarkLabelStyles(marks) {
+  const styles = [];
+  marks.forEach((mark, i) => {
+    styles.push({
+      gridColumnStart: 2 * i + 2
+    });
+  });
+  if (marks.length > 0) {
+    styles[0].justifySelf = "left";
+  }
+  if (marks.length > 1) {
+    styles[marks.length - 1].justifySelf = "right";
+  }
+  return styles;
+}
+
+export { createHandleStyles, createSliderMarkLabelStyles, createSliderMarkLabelsStyle, createSliderRailMarksStyle, createTrackStyle };
+//# sourceMappingURL=styles.js.map

package/dist-es/packages/lab/src/slider/internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../src/slider/internal/styles.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { SliderValue } from \"../types\";\nimport { SliderMark } from \"./SliderRailMarks\";\nimport { isLabeledMark } from \"./utils\";\n\nfunction widthToPercentage(w: number, range: number) {\n  return `${Math.round((1000 * w) / range) * 0.1}%`;\n}\n\nfunction createGridTemplateColumns(\n  min: number,\n  max: number,\n  values: number[]\n): string {\n  const range = max - min;\n  const colWidths: number[] = [];\n  let prev = min;\n  for (let v of values) {\n    colWidths.push(v - prev);\n    prev = v;\n  }\n  colWidths.push(max - prev);\n  let auto = false;\n  const colTemplates = colWidths.map((w) => {\n    if (w === 0) {\n      return \"0\";\n    }\n    if (!auto) {\n      auto = true;\n      return \"auto\";\n    }\n    return widthToPercentage(w, range);\n  });\n  return colTemplates.join(\" \");\n}\n\nexport function createTrackStyle(\n  min: number,\n  max: number,\n  value: SliderValue\n): CSSProperties {\n  const values = Array.isArray(value) ? value : [value];\n  return {\n    gridTemplateColumns: createGridTemplateColumns(min, max, values),\n  };\n}\n\nexport function createHandleStyles(count: number) {\n  return [...Array(count).keys()].map((i) => ({\n    gridColumnStart: `${i + 2}`,\n  }));\n}\n\nexport function createSliderRailMarksStyle(\n  min: number,\n  max: number,\n  marks: SliderMark[]\n): CSSProperties {\n  return {\n    gridTemplateColumns: createGridTemplateColumns(\n      min,\n      max,\n      marks.map((mark) => (isLabeledMark(mark) ? mark.value : mark))\n    ),\n  };\n}\n\nexport function createSliderMarkLabelsStyle(\n  min: number,\n  max: number,\n  marks: SliderMark[]\n): CSSProperties {\n  const range = max - min;\n  const colWidths: number[] = [];\n  let prev = min;\n  for (let m of marks) {\n    const w = isLabeledMark(m) ? m.value : m;\n    colWidths.push(w - prev);\n    colWidths.push(0);\n    prev = w;\n  }\n  colWidths.push(max - prev);\n  let auto = false;\n  const colTemplates = colWidths.map((w) => {\n    if (w === 0) {\n      return \"0\";\n    }\n    if (!auto) {\n      auto = true;\n      return \"auto\";\n    }\n    return widthToPercentage(w, range);\n  });\n\n  return {\n    gridTemplateColumns: colTemplates.join(\" \"),\n  };\n}\n\nexport function createSliderMarkLabelStyles(\n  marks: SliderMark[]\n): CSSProperties[] {\n  const styles: CSSProperties[] = [];\n  marks.forEach((mark, i) => {\n    styles.push({\n      gridColumnStart: 2 * i + 2,\n    });\n  });\n  if (marks.length > 0) {\n    styles[0].justifySelf = \"left\";\n  }\n  if (marks.length > 1) {\n    styles[marks.length - 1].justifySelf = \"right\";\n  }\n  return styles;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/slider/internal/useSliderKeyDown.js

@@ -0,0 +1,46 @@
+import { getHandleIndex, roundValue, clampValue } from './utils.js';
+
+function useSliderKeyDown(value, min, max, pageStep, step, updateValueItem, setValue, onChange) {
+  return (event) => {
+    const handleElement = event.target;
+    const handleIndex = getHandleIndex(handleElement);
+    let valueItem = Array.isArray(value) ? value[handleIndex] : value;
+    switch (event.key) {
+      case "Home":
+        valueItem = min;
+        break;
+      case "End":
+        valueItem = max;
+        break;
+      case "PageUp":
+        valueItem += pageStep;
+        break;
+      case "PageDown":
+        valueItem -= pageStep;
+        break;
+      case "ArrowUp":
+      case "ArrowRight":
+        valueItem += step;
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        valueItem -= step;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    valueItem = roundValue(valueItem, step);
+    valueItem = clampValue(valueItem, min, max);
+    const newValue = updateValueItem(value, handleIndex, valueItem);
+    if (newValue !== value) {
+      setValue(newValue);
+      if (onChange) {
+        onChange(newValue);
+      }
+    }
+  };
+}
+
+export { useSliderKeyDown };
+//# sourceMappingURL=useSliderKeyDown.js.map

package/dist-es/packages/lab/src/slider/internal/useSliderKeyDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderKeyDown.js","sources":["../src/slider/internal/useSliderKeyDown.ts"],"sourcesContent":["import { SliderChangeHandler, SliderValue } from \"../types\";\nimport {\n  clampValue,\n  getHandleIndex,\n  roundValue,\n  UpdateValueItem,\n} from \"./utils\";\n\nexport function useSliderKeyDown(\n  value: SliderValue,\n  min: number,\n  max: number,\n  pageStep: number,\n  step: number,\n  updateValueItem: UpdateValueItem,\n  setValue: SliderChangeHandler,\n  onChange?: SliderChangeHandler\n) {\n  return (event: React.KeyboardEvent) => {\n    const handleElement = event.target as HTMLDivElement;\n    const handleIndex = getHandleIndex(handleElement);\n    let valueItem: number = Array.isArray(value) ? value[handleIndex] : value;\n    switch (event.key) {\n      case \"Home\":\n        valueItem = min;\n        break;\n      case \"End\":\n        valueItem = max;\n        break;\n      case \"PageUp\":\n        valueItem += pageStep;\n        break;\n      case \"PageDown\":\n        valueItem -= pageStep;\n        break;\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        valueItem += step;\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        valueItem -= step;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    valueItem = roundValue(valueItem, step);\n    valueItem = clampValue(valueItem, min, max);\n    const newValue = updateValueItem(value, handleIndex, valueItem);\n    if (newValue !== value) {\n      setValue(newValue);\n      if (onChange) {\n        onChange(newValue);\n      }\n    }\n  };\n}\n"],"names":[],"mappings":";;AAQgB,SAAA,gBAAA,CACd,OACA,GACA,EAAA,GAAA,EACA,UACA,IACA,EAAA,eAAA,EACA,UACA,QACA,EAAA;AACA,EAAA,OAAO,CAAC,KAA+B,KAAA;AACrC,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA;AAC5B,IAAM,MAAA,WAAA,GAAc,eAAe,aAAa,CAAA,CAAA;AAChD,IAAA,IAAI,YAAoB,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,GAAI,MAAM,WAAe,CAAA,GAAA,KAAA,CAAA;AACpE,IAAA,QAAQ,KAAM,CAAA,GAAA;AAAA,MACP,KAAA,MAAA;AACH,QAAY,SAAA,GAAA,GAAA,CAAA;AACZ,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QAAY,SAAA,GAAA,GAAA,CAAA;AACZ,QAAA,MAAA;AAAA,MACG,KAAA,QAAA;AACH,QAAa,SAAA,IAAA,QAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,UAAA;AACH,QAAa,SAAA,IAAA,QAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,SAAA,CAAA;AAAA,MACA,KAAA,YAAA;AACH,QAAa,SAAA,IAAA,IAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,WAAA,CAAA;AAAA,MACA,KAAA,WAAA;AACH,QAAa,SAAA,IAAA,IAAA,CAAA;AACb,QAAA,MAAA;AAAA,MAAA;AAEA,QAAA,OAAA;AAAA,KAAA;AAEJ,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAY,SAAA,GAAA,UAAA,CAAW,WAAW,IAAI,CAAA,CAAA;AACtC,IAAY,SAAA,GAAA,UAAA,CAAW,SAAW,EAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AAC1C,IAAA,MAAM,QAAW,GAAA,eAAA,CAAgB,KAAO,EAAA,WAAA,EAAa,SAAS,CAAA,CAAA;AAC9D,IAAA,IAAI,aAAa,KAAO,EAAA;AACtB,MAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/packages/lab/src/slider/internal/useSliderMouseDown.js

@@ -0,0 +1,89 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { roundValue, clampValue } from './utils.js';
+
+const valueFromClientX = (context, x) => {
+  const { min, max, step, trackRef } = context;
+  const rect = trackRef.current.getBoundingClientRect();
+  const localX = x - rect.x;
+  let v = localX / rect.width * (max - min) + min;
+  v = roundValue(v, step);
+  v = clampValue(v, min, max);
+  return v;
+};
+function getNearestHandle(value, clickValue) {
+  if (!Array.isArray(value)) {
+    return 0;
+  }
+  let minDistance = Number.MAX_VALUE;
+  let handleIndex = -1;
+  value.forEach((v, i) => {
+    const d = Math.abs(clickValue - v);
+    if (d < minDistance) {
+      minDistance = d;
+      handleIndex = i;
+    }
+  });
+  return handleIndex;
+}
+function useSliderMouseDown(trackRef, value, min, max, step, updateValueItem, setValue, onChange) {
+  const mouseContext = useRef({
+    min,
+    max,
+    step,
+    value,
+    trackRef,
+    updateValueItem,
+    setValue,
+    onChange
+  });
+  useEffect(() => {
+    const c = mouseContext.current;
+    c.min = min;
+    c.max = max;
+    c.step = step;
+    c.value = value;
+    c.updateValueItem = updateValueItem;
+    c.onChange = onChange;
+    c.setValue = setValue;
+  }, [min, max, step, value, setValue, updateValueItem, onChange]);
+  const onMouseMove = useCallback((event) => {
+    const { handleIndex, value: value2, updateValueItem: updateValueItem2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
+    if (handleIndex === void 0) {
+      return;
+    }
+    const { clientX } = event;
+    const clickValue = valueFromClientX(mouseContext.current, clientX);
+    const newValue = updateValueItem2(value2, handleIndex, clickValue);
+    if (newValue !== value2) {
+      setValue2(newValue);
+      if (onChange2) {
+        onChange2(newValue);
+      }
+    }
+  }, []);
+  const onMouseUp = useCallback((event) => {
+    document.removeEventListener("mouseup", onMouseUp);
+    document.removeEventListener("mousemove", onMouseMove);
+    mouseContext.current.handleIndex = void 0;
+  }, []);
+  return useCallback((event) => {
+    const { value: value2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("mousemove", onMouseMove);
+    const { clientX } = event;
+    const clickValue = valueFromClientX(mouseContext.current, clientX);
+    const handleIndex = getNearestHandle(value2, clickValue);
+    mouseContext.current.handleIndex = handleIndex;
+    const newValue = updateValueItem(value2, handleIndex, clickValue);
+    if (newValue !== value2) {
+      setValue2(newValue);
+      if (onChange2) {
+        onChange2(newValue);
+      }
+    }
+    event.preventDefault();
+  }, []);
+}
+
+export { useSliderMouseDown };
+//# sourceMappingURL=useSliderMouseDown.js.map

package/dist-es/packages/lab/src/slider/internal/useSliderMouseDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderMouseDown.js","sources":["../src/slider/internal/useSliderMouseDown.ts"],"sourcesContent":["import {\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { SliderChangeHandler, SliderValue } from \"../types\";\nimport { clampValue, roundValue, UpdateValueItem } from \"./utils\";\n\ninterface MouseContext {\n  min: number;\n  max: number;\n  step: number;\n  value: SliderValue;\n  trackRef: RefObject<HTMLDivElement>;\n  handleIndex?: number;\n  updateValueItem: UpdateValueItem;\n  setValue: SliderChangeHandler;\n  onChange?: SliderChangeHandler;\n}\n\nconst valueFromClientX = (context: MouseContext, x: number) => {\n  const { min, max, step, trackRef } = context;\n  const rect = trackRef.current!.getBoundingClientRect();\n  const localX = x - rect.x;\n  let v = (localX / rect.width) * (max - min) + min;\n  v = roundValue(v, step);\n  v = clampValue(v, min, max);\n  return v;\n};\n\nfunction getNearestHandle(value: SliderValue, clickValue: number): number {\n  if (!Array.isArray(value)) {\n    return 0;\n  }\n  let minDistance = Number.MAX_VALUE;\n  let handleIndex = -1;\n  value.forEach((v, i) => {\n    const d = Math.abs(clickValue - v);\n    if (d < minDistance) {\n      minDistance = d;\n      handleIndex = i;\n    }\n  });\n  return handleIndex;\n}\n\nexport function useSliderMouseDown(\n  trackRef: RefObject<HTMLDivElement>,\n  value: SliderValue,\n  min: number,\n  max: number,\n  step: number,\n  updateValueItem: UpdateValueItem,\n  setValue: SliderChangeHandler,\n  onChange?: SliderChangeHandler\n) {\n  const mouseContext = useRef<MouseContext>({\n    min,\n    max,\n    step,\n    value,\n    trackRef,\n    updateValueItem,\n    setValue,\n    onChange,\n  });\n\n  useEffect(() => {\n    const c = mouseContext.current;\n    c.min = min;\n    c.max = max;\n    c.step = step;\n    c.value = value;\n    c.updateValueItem = updateValueItem;\n    c.onChange = onChange;\n    c.setValue = setValue;\n  }, [min, max, step, value, setValue, updateValueItem, onChange]);\n\n  const onMouseMove = useCallback((event: MouseEvent) => {\n    const { handleIndex, value, updateValueItem, setValue, onChange } =\n      mouseContext.current;\n    if (handleIndex === undefined) {\n      return;\n    }\n    const { clientX } = event;\n    const clickValue = valueFromClientX(mouseContext.current, clientX);\n    const newValue = updateValueItem(value, handleIndex, clickValue);\n    if (newValue !== value) {\n      setValue(newValue);\n      if (onChange) {\n        onChange(newValue);\n      }\n    }\n  }, []);\n\n  const onMouseUp = useCallback((event: MouseEvent) => {\n    document.removeEventListener(\"mouseup\", onMouseUp);\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    mouseContext.current.handleIndex = undefined;\n  }, []);\n\n  return useCallback((event: ReactMouseEvent) => {\n    const { value, setValue, onChange } = mouseContext.current;\n    document.addEventListener(\"mouseup\", onMouseUp);\n    document.addEventListener(\"mousemove\", onMouseMove);\n\n    const { clientX } = event;\n    const clickValue = valueFromClientX(mouseContext.current, clientX);\n\n    const handleIndex = getNearestHandle(value, clickValue);\n    mouseContext.current.handleIndex = handleIndex;\n    const newValue = updateValueItem(value, handleIndex, clickValue);\n\n    if (newValue !== value) {\n      setValue(newValue);\n      if (onChange) {\n        onChange(newValue);\n      }\n    }\n\n    event.preventDefault();\n  }, []);\n}\n"],"names":["value","updateValueItem","setValue","onChange"],"mappings":"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"}

package/dist-es/packages/lab/src/slider/internal/utils.js

@@ -0,0 +1,121 @@
+import { useMemo } from 'react';
+
+const updateValueItemNotPushable = (oldValue, index, valueItem, min, max) => {
+  const newValue = [...oldValue];
+  if (valueItem < oldValue[index]) {
+    const constraint = index === 0 ? min : newValue[index - 1];
+    newValue[index] = Math.max(constraint, valueItem);
+  } else {
+    const constraint = index === newValue.length - 1 ? max : newValue[index + 1];
+    newValue[index] = Math.min(constraint, valueItem);
+  }
+  return newValue;
+};
+const updateValueItemPushable = (oldValue, index, valueItem, min, max, pushDistance) => {
+  const newValue = [...oldValue];
+  newValue[index] = valueItem;
+  if (valueItem < oldValue[index]) {
+    for (let i = index - 1; i >= 0; --i) {
+      if (newValue[i + 1] - newValue[i] < pushDistance) {
+        newValue[i] = newValue[i + 1] - pushDistance;
+      } else {
+        break;
+      }
+    }
+    const distToMin = newValue[0] - min;
+    if (distToMin < 0) {
+      for (let i = index; i >= 0; --i) {
+        newValue[i] -= distToMin;
+      }
+    }
+  } else {
+    for (let i = index + 1; i < newValue.length; ++i) {
+      if (newValue[i] - newValue[i - 1] < pushDistance) {
+        newValue[i] = newValue[i - 1] + pushDistance;
+      } else {
+        break;
+      }
+    }
+    const distToMax = max - newValue[newValue.length - 1];
+    if (distToMax < 0) {
+      for (let i = index; i < newValue.length; ++i) {
+        newValue[i] += distToMax;
+      }
+    }
+  }
+  return newValue;
+};
+function useValueUpdater(pushable, pushDistance, min, max) {
+  return useMemo(() => {
+    const updater = pushable ? (oldValue, index, valueItem) => updateValueItemPushable(
+      oldValue,
+      index,
+      valueItem,
+      min,
+      max,
+      pushDistance
+    ) : (oldValue, index, valueItem) => updateValueItemNotPushable(oldValue, index, valueItem, min, max);
+    return (oldValue, index, valueItem) => {
+      if (!Array.isArray(oldValue)) {
+        return valueItem;
+      }
+      if (oldValue[index] === valueItem) {
+        return oldValue;
+      }
+      const newValue = updater(oldValue, index, valueItem);
+      if (-1 === newValue.findIndex((v, i) => oldValue[i] !== v)) {
+        return oldValue;
+      }
+      return newValue;
+    };
+  }, [pushable, pushDistance, min, max]);
+}
+const roundValue = (v, step) => Math.round(v / step) * step;
+const clampValue = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+function getSliderAriaLabel(count, index) {
+  if (count < 2) {
+    return;
+  }
+  if (count === 2) {
+    return index === 0 ? "Min" : "Max";
+  }
+  if (index >= 0 && index < 10) {
+    return [
+      "First",
+      "Second",
+      "Third",
+      "Fourth",
+      "Fifth",
+      "Sixth",
+      "Seventh",
+      "Eighth",
+      "Ninth",
+      "Tenth"
+    ][index];
+  }
+  return;
+}
+function getHandleIndex(element) {
+  const handleIndexAttribute = element.getAttribute("data-handle-index");
+  if (handleIndexAttribute) {
+    return parseInt(handleIndexAttribute, 10);
+  }
+  return getHandleIndex(element.parentElement);
+}
+function isLabeledMark(mark) {
+  return typeof mark !== "number";
+}
+function isMarkAtMax(max, mark) {
+  return max === (isLabeledMark(mark) ? mark.value : mark);
+}
+
+export { clampValue, getHandleIndex, getSliderAriaLabel, isLabeledMark, isMarkAtMax, roundValue, useValueUpdater };
+//# sourceMappingURL=utils.js.map

package/dist-es/packages/lab/src/slider/internal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { SliderValue } from \"../types\";\nimport { LabeledMark, SliderMark } from \"./SliderRailMarks\";\n\nconst updateValueItemNotPushable = (\n  oldValue: number[],\n  index: number,\n  valueItem: number,\n  min: number,\n  max: number\n) => {\n  const newValue = [...oldValue];\n  if (valueItem < oldValue[index]) {\n    const constraint = index === 0 ? min : newValue[index - 1];\n    newValue[index] = Math.max(constraint, valueItem);\n  } else {\n    const constraint =\n      index === newValue.length - 1 ? max : newValue[index + 1];\n    newValue[index] = Math.min(constraint, valueItem);\n  }\n  return newValue;\n};\n\nconst updateValueItemPushable = (\n  oldValue: number[],\n  index: number,\n  valueItem: number,\n  min: number,\n  max: number,\n  pushDistance: number\n) => {\n  const newValue = [...oldValue];\n  newValue[index] = valueItem;\n  if (valueItem < oldValue[index]) {\n    for (let i = index - 1; i >= 0; --i) {\n      if (newValue[i + 1] - newValue[i] < pushDistance) {\n        newValue[i] = newValue[i + 1] - pushDistance;\n      } else {\n        break;\n      }\n    }\n    const distToMin = newValue[0] - min;\n    if (distToMin < 0) {\n      for (let i = index; i >= 0; --i) {\n        newValue[i] -= distToMin;\n      }\n    }\n  } else {\n    for (let i = index + 1; i < newValue.length; ++i) {\n      if (newValue[i] - newValue[i - 1] < pushDistance) {\n        newValue[i] = newValue[i - 1] + pushDistance;\n      } else {\n        break;\n      }\n    }\n    const distToMax = max - newValue[newValue.length - 1];\n    if (distToMax < 0) {\n      for (let i = index; i < newValue.length; ++i) {\n        newValue[i] += distToMax;\n      }\n    }\n  }\n  return newValue;\n};\n\nexport type UpdateValueItem = (\n  oldValue: SliderValue,\n  index: number,\n  valueItem: number\n) => SliderValue;\n\nexport function useValueUpdater(\n  pushable: boolean | undefined,\n  pushDistance: number,\n  min: number,\n  max: number\n): UpdateValueItem {\n  return useMemo(() => {\n    const updater = pushable\n      ? (oldValue: number[], index: number, valueItem: number) =>\n          updateValueItemPushable(\n            oldValue,\n            index,\n            valueItem,\n            min,\n            max,\n            pushDistance\n          )\n      : (oldValue: number[], index: number, valueItem: number) =>\n          updateValueItemNotPushable(oldValue, index, valueItem, min, max);\n    return (oldValue: SliderValue, index: number, valueItem: number) => {\n      if (!Array.isArray(oldValue)) {\n        return valueItem;\n      }\n      if (oldValue[index] === valueItem) {\n        return oldValue;\n      }\n      const newValue = updater(oldValue, index, valueItem);\n      if (-1 === newValue.findIndex((v, i) => oldValue[i] !== v)) {\n        return oldValue;\n      }\n      return newValue;\n    };\n  }, [pushable, pushDistance, min, max]);\n}\n\nexport const roundValue = (v: number, step: number) =>\n  Math.round(v / step) * step;\n\nexport const clampValue = (v: number, min: number, max: number) => {\n  if (v < min) {\n    return min;\n  }\n  if (v > max) {\n    return max;\n  }\n  return v;\n};\n\nexport function getSliderAriaLabel(count: number, index: number) {\n  if (count < 2) {\n    return;\n  }\n  if (count === 2) {\n    return index === 0 ? \"Min\" : \"Max\";\n  }\n  if (index >= 0 && index < 10) {\n    return [\n      \"First\",\n      \"Second\",\n      \"Third\",\n      \"Fourth\",\n      \"Fifth\",\n      \"Sixth\",\n      \"Seventh\",\n      \"Eighth\",\n      \"Ninth\",\n      \"Tenth\",\n    ][index];\n  }\n  return;\n}\n\nexport function getHandleIndex(element: HTMLElement): number {\n  const handleIndexAttribute = element.getAttribute(\"data-handle-index\");\n  if (handleIndexAttribute) {\n    return parseInt(handleIndexAttribute, 10);\n  }\n  return getHandleIndex(element.parentElement as HTMLElement);\n}\n\nexport function isLabeledMark(mark: SliderMark): mark is LabeledMark {\n  return typeof mark !== \"number\";\n}\n\nexport function isMarkAtMax(max: number, mark: SliderMark) {\n  return max === (isLabeledMark(mark) ? mark.value : mark);\n}\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/spinner/Spinner.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltSvgSpinner-gradientStop1,\n.saltSvgSpinner-gradientStop2,\n.saltSvgSpinner-gradientStop3,\n.saltSvgSpinner-gradientStop4 {\n  stop-color: var(--saltSpinner-gradient-color, var(--spinner-gradient-color));\n}\n\n.saltSvgSpinner {\n  --spinner-gradient-color: var(--salt-measured-fill);\n\n  position: relative;\n}\n\n.saltSvgSpinner-small {\n  height: var(--salt-size-graphic-small);\n  width: var(--salt-size-graphic-small);\n}\n\n.saltSvgSpinner-medium {\n  height: var(--salt-size-graphic-medium);\n  width: var(--salt-size-graphic-medium);\n}\n\n.saltSvgSpinner-large {\n  height: var(--salt-size-graphic-large);\n  width: var(--salt-size-graphic-large);\n}\n\n.saltSvgSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Spinner.css.js.map

package/dist-es/packages/lab/src/spinner/Spinner.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/spinner/Spinner.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId, useAriaAnnouncer } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef, useEffect } from 'react';
+import { getSvgSpinner } from './svgSpinners/index.js';
+import './Spinner.css.js';
+
+const SpinnerSizeValues = ["small", "medium", "large"];
+const baseName = "saltSvgSpinner";
+const Spinner = forwardRef(
+  function Spinner2({
+    "aria-label": ariaLabel = "loading",
+    announcerInterval = 5e3,
+    announcerTimeout = 2e4,
+    completionAnnouncement = `finished ${ariaLabel}`,
+    disableAnnouncer,
+    role = "img",
+    className,
+    size = "medium",
+    id: idProps,
+    ...rest
+  }, ref) {
+    const generatedId = useId(idProps);
+    const SvgSpinner = getSvgSpinner(size);
+    const { announce } = useAriaAnnouncer();
+    useEffect(() => {
+      if (disableAnnouncer)
+        return;
+      announce(ariaLabel);
+      const startTime = new Date().getTime();
+      const interval = setInterval(() => {
+        if (new Date().getTime() - startTime > announcerTimeout) {
+          announce(
+            `${ariaLabel} is still in progress, but will no longer announce.`
+          );
+          clearInterval(interval);
+          return;
+        }
+        announce(ariaLabel);
+      }, announcerInterval);
+      return () => {
+        if (disableAnnouncer)
+          return;
+        clearInterval(interval);
+        if (completionAnnouncement) {
+          announce(completionAnnouncement);
+        }
+      };
+    }, [
+      announce,
+      announcerInterval,
+      announcerTimeout,
+      ariaLabel,
+      completionAnnouncement,
+      disableAnnouncer
+    ]);
+    return /* @__PURE__ */ jsx("div", {
+      "aria-label": ariaLabel,
+      className: cx(`${baseName}-${size}`, className, baseName),
+      ref,
+      role,
+      ...rest,
+      children: /* @__PURE__ */ jsx(SvgSpinner, {
+        id: generatedId
+      })
+    });
+  }
+);
+
+export { Spinner, SpinnerSizeValues };
+//# sourceMappingURL=Spinner.js.map

package/dist-es/packages/lab/src/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useAriaAnnouncer, useId } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { getSvgSpinner } from \"./svgSpinners\";\n\nimport \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small | medium | large\" />\n */\n\n// TODO: documentation -- add line about best practices:\n// - Improve accessibility by customizing the aria-label to provide additional context about *what* is loading, e.g. `aria-label=\"loading settings panel\"`.\n\nexport const SpinnerSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport type SpinnerSize = typeof SpinnerSizeValues[number];\nconst baseName = \"saltSvgSpinner\";\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'small', 'medium', 'large'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProps,\n      ...rest\n    },\n    ref\n  ) {\n    const generatedId = useId(idProps);\n    const SvgSpinner = getSvgSpinner(size);\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        // announcerInterval > 0 &&\n        // above line was causing typescript type error that I didn't manage to sort out right away\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // the announcer will stop after 20s\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`\n            );\n            clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={cx(`${baseName}-${size}`, className, baseName)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SvgSpinner id={generatedId} />\n      </div>\n    );\n  }\n);\n"],"names":["Spinner"],"mappings":";;;;;;;AAiBO,MAAM,iBAAoB,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,OAAO,EAAA;AAE5D,MAAM,QAAW,GAAA,gBAAA,CAAA;AAqCV,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,yBAAyB,CAAY,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACrC,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,OAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,WAAA,GAAc,MAAM,OAAO,CAAA,CAAA;AACjC,IAAM,MAAA,UAAA,GAAa,cAAc,IAAI,CAAA,CAAA;AAErC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,CAAA;AAErC,MAAM,MAAA,QAAA,GAGJ,YAAY,MAAM;AAChB,QAAA,IAAI,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,CAAG,EAAA,SAAA,CAAA,mDAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,UAAA,OAAA;AAAA,SACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,SACjB,iBAAiB,CAAA,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAI,IAAA,gBAAA;AAAkB,UAAA,OAAA;AAEtB,QAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA,CAAA;AAAA,SACjC;AAAA,OACF,CAAA;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAW,EAAG,CAAA,CAAA,EAAG,QAAY,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,EAAQ,WAAW,QAAQ,CAAA;AAAA,MACxD,GAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,EAAI,EAAA,WAAA;AAAA,OAAa,CAAA;AAAA,KAC/B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/spinner/svgSpinners/SpinnerLarge.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const baseName = "saltSvgSpinner";
+const SpinnerLarge = (props) => /* @__PURE__ */ jsxs("svg", {
+  className: `${baseName}-spinner`,
+  viewBox: "0 0 48 48",
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxs("defs", {
+      children: [
+        /* @__PURE__ */ jsxs("linearGradient", {
+          id: `${props.id}-1`,
+          x1: "13%",
+          x2: "100%",
+          y1: "0%",
+          y2: "87%",
+          children: [
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop1`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop2`,
+              offset: "100%",
+              stopOpacity: "0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("linearGradient", {
+          id: `${props.id}-2`,
+          x1: "100%",
+          x2: "0%",
+          y1: "78%",
+          y2: "78%",
+          children: [
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop3`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop4`,
+              offset: "100%"
+            })
+          ]
+        })
+      ]
+    }),
+    /* @__PURE__ */ jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M2,24 L0,24 C0,37.255 10.745,48 24,48 L24,46 C11.869,46 2,36.131 2,24",
+          fill: `url(#${props.id}-1)`
+        }),
+        /* @__PURE__ */ jsx("path", {
+          d: "M24,0 C10.745,0 0,10.745 0,24 L2,24 C2,11.869 11.869,2 24,2 C36.131,2 46,11.869 46,24 L48,24 C48,10.745 37.255,0 24,0",
+          fill: `url(#${props.id}-2)`
+        })
+      ]
+    })
+  ]
+});
+
+export { SpinnerLarge };
+//# sourceMappingURL=SpinnerLarge.js.map

package/dist-es/packages/lab/src/spinner/svgSpinners/SpinnerLarge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerLarge.js","sources":["../src/spinner/svgSpinners/SpinnerLarge.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\n\nconst baseName = \"saltSvgSpinner\";\n\nexport const SpinnerLarge = (props: SVGAttributes<SVGSVGElement>) => (\n  <svg className={`${baseName}-spinner`} viewBox=\"0 0 48 48\" {...props}>\n    <defs>\n      <linearGradient id={`${props.id}-1`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n        <stop className={`${baseName}-gradientStop1`} offset=\"0%\" />\n        <stop\n          className={`${baseName}-gradientStop2`}\n          offset=\"100%\"\n          stopOpacity=\"0\"\n        />\n      </linearGradient>\n      <linearGradient id={`${props.id}-2`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n        <stop className={`${baseName}-gradientStop3`} offset=\"0%\" />\n        <stop className={`${baseName}-gradientStop4`} offset=\"100%\" />\n      </linearGradient>\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth=\"1\">\n      <path\n        d=\"M2,24 L0,24 C0,37.255 10.745,48 24,48 L24,46 C11.869,46 2,36.131 2,24\"\n        fill={`url(#${props.id}-1)`}\n      />\n      <path\n        d=\"M24,0 C10.745,0 0,10.745 0,24 L2,24 C2,11.869 11.869,2 24,2 C36.131,2 46,11.869 46,24 L48,24 C48,10.745 37.255,0 24,0\"\n        fill={`url(#${props.id}-2)`}\n      />\n    </g>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEA,MAAM,QAAW,GAAA,gBAAA,CAAA;AAEJ,MAAA,YAAA,GAAe,CAAC,KAAA,qBAC1B,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,WAAW,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,EAAoB,OAAQ,EAAA,WAAA;AAAA,EAAa,GAAG,KAAA;AAAA,EAC7D,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,gBAAA,EAAA;AAAA,UAAe,EAAA,EAAI,GAAG,KAAM,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,UAAQ,EAAG,EAAA,KAAA;AAAA,UAAM,EAAG,EAAA,MAAA;AAAA,UAAO,EAAG,EAAA,IAAA;AAAA,UAAK,EAAG,EAAA,KAAA;AAAA,UACjE,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzD,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cACd,MAAO,EAAA,MAAA;AAAA,cACP,WAAY,EAAA,GAAA;AAAA,aACd,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACC,IAAA,CAAA,gBAAA,EAAA;AAAA,UAAe,EAAA,EAAI,GAAG,KAAM,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,UAAQ,EAAG,EAAA,MAAA;AAAA,UAAO,EAAG,EAAA,IAAA;AAAA,UAAK,EAAG,EAAA,KAAA;AAAA,UAAM,EAAG,EAAA,KAAA;AAAA,UACjE,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzD,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,MAAA;AAAA,aAAO,CAAA;AAAA,WAAA;AAAA,SAC9D,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,GAAA,EAAA;AAAA,MAAE,IAAK,EAAA,MAAA;AAAA,MAAO,QAAS,EAAA,SAAA;AAAA,MAAU,WAAY,EAAA,GAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,uEAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,uHAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF;;;;"}

package/dist-es/packages/lab/src/spinner/svgSpinners/SpinnerMedium.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const baseName = "saltSvgSpinner";
+const SpinnerMedium = (props) => /* @__PURE__ */ jsxs("svg", {
+  className: `${baseName}-spinner`,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxs("defs", {
+      children: [
+        /* @__PURE__ */ jsxs("linearGradient", {
+          id: `${props.id}-1`,
+          x1: "100%",
+          x2: "0%",
+          y1: "75.6597923%",
+          y2: "75.6597923%",
+          children: [
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop1`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop2`,
+              offset: "100%"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("linearGradient", {
+          id: `${props.id}-2`,
+          x1: "25.4178365%",
+          x2: "100%",
+          y1: "8.36237837%",
+          y2: "74.0069615%",
+          children: [
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop3`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop4`,
+              offset: "100%",
+              stopOpacity: "0"
+            })
+          ]
+        })
+      ]
+    }),
+    /* @__PURE__ */ jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M12,0 C5.373,0 0,5.373 0,12 L2,12 C2,6.486 6.486,2 12,2 C17.514,2 22,6.486 22,12 L24,12 C24,5.373 18.627,0 12,0",
+          fill: `url(#${props.id}-1)`
+        }),
+        /* @__PURE__ */ jsx("path", {
+          d: "M0,12.0005 C0,18.6275 5.373,24.0005 12,24.0005 L12,22.0005 C6.486,22.0005 2,17.5145 2,12.0005 L0,12.0005 Z",
+          fill: `url(#${props.id}-2)`
+        })
+      ]
+    })
+  ]
+});
+
+export { SpinnerMedium };
+//# sourceMappingURL=SpinnerMedium.js.map

package/dist-es/packages/lab/src/spinner/svgSpinners/SpinnerMedium.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerMedium.js","sources":["../src/spinner/svgSpinners/SpinnerMedium.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\n\nconst baseName = \"saltSvgSpinner\";\n\n// Note: the structure here is mainly for backwards compatibility where 2 colors were used\nexport const SpinnerMedium = (props: SVGAttributes<SVGSVGElement>) => (\n  <svg className={`${baseName}-spinner`} viewBox=\"0 0 24 24\" {...props}>\n    <defs>\n      <linearGradient\n        id={`${props.id}-1`}\n        x1=\"100%\"\n        x2=\"0%\"\n        y1=\"75.6597923%\"\n        y2=\"75.6597923%\"\n      >\n        <stop className={`${baseName}-gradientStop1`} offset=\"0%\" />\n        <stop className={`${baseName}-gradientStop2`} offset=\"100%\" />\n      </linearGradient>\n      <linearGradient\n        id={`${props.id}-2`}\n        x1=\"25.4178365%\"\n        x2=\"100%\"\n        y1=\"8.36237837%\"\n        y2=\"74.0069615%\"\n      >\n        <stop className={`${baseName}-gradientStop3`} offset=\"0%\" />\n        <stop\n          className={`${baseName}-gradientStop4`}\n          offset=\"100%\"\n          stopOpacity=\"0\"\n        />\n      </linearGradient>\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth=\"1\">\n      <path\n        d=\"M12,0 C5.373,0 0,5.373 0,12 L2,12 C2,6.486 6.486,2 12,2 C17.514,2 22,6.486 22,12 L24,12 C24,5.373 18.627,0 12,0\"\n        fill={`url(#${props.id}-1)`}\n      />\n      <path\n        d=\"M0,12.0005 C0,18.6275 5.373,24.0005 12,24.0005 L12,22.0005 C6.486,22.0005 2,17.5145 2,12.0005 L0,12.0005 Z\"\n        fill={`url(#${props.id}-2)`}\n      />\n    </g>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEA,MAAM,QAAW,GAAA,gBAAA,CAAA;AAGJ,MAAA,aAAA,GAAgB,CAAC,KAAA,qBAC3B,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,WAAW,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,EAAoB,OAAQ,EAAA,WAAA;AAAA,EAAa,GAAG,KAAA;AAAA,EAC7D,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,gBAAA,EAAA;AAAA,UACC,EAAA,EAAI,GAAG,KAAM,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,UACb,EAAG,EAAA,MAAA;AAAA,UACH,EAAG,EAAA,IAAA;AAAA,UACH,EAAG,EAAA,aAAA;AAAA,UACH,EAAG,EAAA,aAAA;AAAA,UAEH,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzD,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,MAAA;AAAA,aAAO,CAAA;AAAA,WAAA;AAAA,SAC9D,CAAA;AAAA,wBACC,IAAA,CAAA,gBAAA,EAAA;AAAA,UACC,EAAA,EAAI,GAAG,KAAM,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,UACb,EAAG,EAAA,aAAA;AAAA,UACH,EAAG,EAAA,MAAA;AAAA,UACH,EAAG,EAAA,aAAA;AAAA,UACH,EAAG,EAAA,aAAA;AAAA,UAEH,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzD,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cACd,MAAO,EAAA,MAAA;AAAA,cACP,WAAY,EAAA,GAAA;AAAA,aACd,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,GAAA,EAAA;AAAA,MAAE,IAAK,EAAA,MAAA;AAAA,MAAO,QAAS,EAAA,SAAA;AAAA,MAAU,WAAY,EAAA,GAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,iHAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,4GAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF;;;;"}