@salt-ds/lab 1.0.0-alpha.0

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

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('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 React.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);
+}
+
+exports.clampValue = clampValue;
+exports.getHandleIndex = getHandleIndex;
+exports.getSliderAriaLabel = getSliderAriaLabel;
+exports.isLabeledMark = isLabeledMark;
+exports.isMarkAtMax = isMarkAtMax;
+exports.roundValue = roundValue;
+exports.useValueUpdater = useValueUpdater;
+//# sourceMappingURL=utils.js.map

package/dist-cjs/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":["useMemo"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../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_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Spinner.css.js.map

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

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

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

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('classnames');
+var React = require('react');
+var index = require('./svgSpinners/index.js');
+require('./Spinner.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const SpinnerSizeValues = ["small", "medium", "large"];
+const baseName = "saltSvgSpinner";
+const Spinner = React.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 = core.useId(idProps);
+    const SvgSpinner = index.getSvgSpinner(size);
+    const { announce } = core.useAriaAnnouncer();
+    React.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__ */ jsxRuntime.jsx("div", {
+      "aria-label": ariaLabel,
+      className: cx__default["default"](`${baseName}-${size}`, className, baseName),
+      ref,
+      role,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(SvgSpinner, {
+        id: generatedId
+      })
+    });
+  }
+);
+
+exports.Spinner = Spinner;
+exports.SpinnerSizeValues = SpinnerSizeValues;
+//# sourceMappingURL=Spinner.js.map

package/dist-cjs/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":["forwardRef","Spinner","useId","getSvgSpinner","useAriaAnnouncer","useEffect","jsx","cx"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,iBAAoB,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,OAAO,EAAA;AAE5D,MAAM,QAAW,GAAA,gBAAA,CAAA;AAqCV,MAAM,OAAU,GAAAA,gBAAA;AAAA,EACrB,SAASC,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,GAAcC,WAAM,OAAO,CAAA,CAAA;AACjC,IAAM,MAAA,UAAA,GAAaC,oBAAc,IAAI,CAAA,CAAA;AAErC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,qBAAiB,EAAA,CAAA;AAEtC,IAAAC,eAAA,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,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAWC,sBAAG,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,kBAAAD,cAAA,CAAA,UAAA,EAAA;AAAA,QAAW,EAAI,EAAA,WAAA;AAAA,OAAa,CAAA;AAAA,KAC/B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

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

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const baseName = "saltSvgSpinner";
+const SpinnerLarge = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+  className: `${baseName}-spinner`,
+  viewBox: "0 0 48 48",
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
+          id: `${props.id}-1`,
+          x1: "13%",
+          x2: "100%",
+          y1: "0%",
+          y2: "87%",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop1`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop2`,
+              offset: "100%",
+              stopOpacity: "0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
+          id: `${props.id}-2`,
+          x1: "100%",
+          x2: "0%",
+          y1: "78%",
+          y2: "78%",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop3`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop4`,
+              offset: "100%"
+            })
+          ]
+        })
+      ]
+    }),
+    /* @__PURE__ */ jsxRuntime.jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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)`
+        })
+      ]
+    })
+  ]
+});
+
+exports.SpinnerLarge = SpinnerLarge;
+//# sourceMappingURL=SpinnerLarge.js.map

package/dist-cjs/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":["jsxs","jsx"],"mappings":";;;;;;AAEA,MAAM,QAAW,GAAA,gBAAA,CAAA;AAEJ,MAAA,YAAA,GAAe,CAAC,KAAA,qBAC1BA,eAAA,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,oBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAA,EAAA;AAAA,wBAACA,eAAA,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,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzDA,cAAA,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,wBACCD,eAAA,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,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzDA,cAAA,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,oBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,MAAE,IAAK,EAAA,MAAA;AAAA,MAAO,QAAS,EAAA,SAAA;AAAA,MAAU,WAAY,EAAA,GAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,uEAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,wBACCA,cAAA,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-cjs/packages/lab/src/spinner/svgSpinners/SpinnerMedium.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const baseName = "saltSvgSpinner";
+const SpinnerMedium = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+  className: `${baseName}-spinner`,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
+          id: `${props.id}-1`,
+          x1: "100%",
+          x2: "0%",
+          y1: "75.6597923%",
+          y2: "75.6597923%",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop1`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop2`,
+              offset: "100%"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
+          id: `${props.id}-2`,
+          x1: "25.4178365%",
+          x2: "100%",
+          y1: "8.36237837%",
+          y2: "74.0069615%",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop3`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop4`,
+              offset: "100%",
+              stopOpacity: "0"
+            })
+          ]
+        })
+      ]
+    }),
+    /* @__PURE__ */ jsxRuntime.jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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)`
+        })
+      ]
+    })
+  ]
+});
+
+exports.SpinnerMedium = SpinnerMedium;
+//# sourceMappingURL=SpinnerMedium.js.map

package/dist-cjs/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":["jsxs","jsx"],"mappings":";;;;;;AAEA,MAAM,QAAW,GAAA,gBAAA,CAAA;AAGJ,MAAA,aAAA,GAAgB,CAAC,KAAA,qBAC3BA,eAAA,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,oBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAA,EAAA;AAAA,wBAACA,eAAA,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,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzDA,cAAA,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,wBACCD,eAAA,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,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzDA,cAAA,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,oBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,MAAE,IAAK,EAAA,MAAA;AAAA,MAAO,QAAS,EAAA,SAAA;AAAA,MAAU,WAAY,EAAA,GAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,iHAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,wBACCA,cAAA,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;;;;"}

package/dist-cjs/packages/lab/src/spinner/svgSpinners/SpinnerSmall.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const baseName = "saltSvgSpinner";
+const SpinnerSmall = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+  className: `${baseName}-spinner`,
+  viewBox: "0 0 12 12",
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
+          id: `${props.id}-1`,
+          x1: "50%",
+          x2: "100%",
+          y1: "0%",
+          y2: "50%",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop1`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop2`,
+              offset: "100%",
+              stopOpacity: "0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
+          id: `${props.id}-2`,
+          x1: "100%",
+          x2: "0%",
+          y1: "100%",
+          y2: "100%",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop3`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", {
+              className: `${baseName}-gradientStop4`,
+              offset: "100%"
+            })
+          ]
+        })
+      ]
+    }),
+    /* @__PURE__ */ jsxRuntime.jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", {
+          d: "M2,6 L2,6 L0,6 C0,9.313 2.687,12 6,12 L6,10 C3.794,10 2,8.206 2,6",
+          fill: `url(#${props.id}-1)`
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", {
+          d: "M2,6 C2,3.794 3.794,2 6,2 C8.206,2 10,3.794 10,6 L12,6 C12,2.686 9.314,0 6,0 C2.687,0 0,2.686 0,6 L2,6 Z",
+          fill: `url(#${props.id}-2)`
+        })
+      ]
+    })
+  ]
+});
+
+exports.SpinnerSmall = SpinnerSmall;
+//# sourceMappingURL=SpinnerSmall.js.map

package/dist-cjs/packages/lab/src/spinner/svgSpinners/SpinnerSmall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerSmall.js","sources":["../src/spinner/svgSpinners/SpinnerSmall.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\n\nconst baseName = \"saltSvgSpinner\";\n\nexport const SpinnerSmall = (props: SVGAttributes<SVGSVGElement>) => (\n  <svg className={`${baseName}-spinner`} viewBox=\"0 0 12 12\" {...props}>\n    <defs>\n      <linearGradient id={`${props.id}-1`} x1=\"50%\" x2=\"100%\" y1=\"0%\" y2=\"50%\">\n        <stop className={`${baseName}-gradientStop1`} offset=\"0%\" />\n        <stop\n          className={`${baseName}-gradientStop2`}\n          offset=\"100%\"\n          stopOpacity=\"0\"\n        />\n      </linearGradient>\n      <linearGradient\n        id={`${props.id}-2`}\n        x1=\"100%\"\n        x2=\"0%\"\n        y1=\"100%\"\n        y2=\"100%\"\n      >\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,6 L2,6 L0,6 C0,9.313 2.687,12 6,12 L6,10 C3.794,10 2,8.206 2,6\"\n        fill={`url(#${props.id}-1)`}\n      />\n      <path\n        d=\"M2,6 C2,3.794 3.794,2 6,2 C8.206,2 10,3.794 10,6 L12,6 C12,2.686 9.314,0 6,0 C2.687,0 0,2.686 0,6 L2,6 Z\"\n        fill={`url(#${props.id}-2)`}\n      />\n    </g>\n  </svg>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;;;;AAEA,MAAM,QAAW,GAAA,gBAAA,CAAA;AAEJ,MAAA,YAAA,GAAe,CAAC,KAAA,qBAC1BA,eAAA,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,oBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAA,EAAA;AAAA,wBAACA,eAAA,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,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzDA,cAAA,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,wBACCD,eAAA,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,MAAA;AAAA,UACH,EAAG,EAAA,MAAA;AAAA,UAEH,QAAA,EAAA;AAAA,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzDA,cAAA,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,oBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,MAAE,IAAK,EAAA,MAAA;AAAA,MAAO,QAAS,EAAA,SAAA;AAAA,MAAU,WAAY,EAAA,GAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,mEAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,wBACCA,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,0GAAA;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-cjs/packages/lab/src/spinner/svgSpinners/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SpinnerSmall = require('./SpinnerSmall.js');
+var SpinnerMedium = require('./SpinnerMedium.js');
+var SpinnerLarge = require('./SpinnerLarge.js');
+
+const getSvgSpinner = (size) => {
+  switch (size) {
+    case "small":
+      return SpinnerSmall.SpinnerSmall;
+    case "large":
+      return SpinnerLarge.SpinnerLarge;
+    default:
+      return SpinnerMedium.SpinnerMedium;
+  }
+};
+
+exports.getSvgSpinner = getSvgSpinner;
+//# sourceMappingURL=index.js.map

package/dist-cjs/packages/lab/src/spinner/svgSpinners/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/spinner/svgSpinners/index.ts"],"sourcesContent":["import { SpinnerSmall } from \"./SpinnerSmall\";\nimport { SpinnerMedium } from \"./SpinnerMedium\";\nimport { SpinnerLarge } from \"./SpinnerLarge\";\n\nexport const getSvgSpinner = (size: string) => {\n  switch (size) {\n    case \"small\":\n      return SpinnerSmall;\n    case \"large\":\n      return SpinnerLarge;\n    default:\n      return SpinnerMedium;\n  }\n};\n"],"names":["SpinnerSmall","SpinnerLarge","SpinnerMedium"],"mappings":";;;;;;;;AAIa,MAAA,aAAA,GAAgB,CAAC,IAAiB,KAAA;AAC7C,EAAQ,QAAA,IAAA;AAAA,IACD,KAAA,OAAA;AACH,MAAO,OAAAA,yBAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAAC,yBAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAAC,2BAAA,CAAA;AAAA,GAAA;AAEb;;;;"}

package/dist-cjs/packages/lab/src/split-layout/SplitLayout.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Style applied to the separator */\n.saltSplitLayout-separator {\n  --saltFlexLayout-gap: calc(var(--salt-size-unit) * var(--saltFlexLayout-gap-multiplier) + var(--saltFlexLayout-separator));\n}\n\n.saltSplitLayout-separator > *:first-child::after,\n.saltSplitLayout-separator > *:last-child::before,\n.saltSplitLayout-separator-center::after {\n  background-color: var(--salt-separable-secondary-borderColor);\n  width: var(--saltFlexLayout-separator);\n  top: 0;\n  height: 100%;\n}\n\n.saltSplitLayout-separator-start > *:first-child::after {\n  content: \"\";\n  right: calc(var(--saltFlexLayout-separator) * -1);\n}\n\n.saltSplitLayout-separator-end > *:last-child::before {\n  content: \"\";\n  right: calc(var(--saltFlexLayout-separator) * -1);\n}\n.saltSplitLayout-separator-center {\n  position: relative;\n}\n.saltSplitLayout-separator-center::after {\n  position: absolute;\n  content: \"\";\n  right: calc(var(--saltFlexLayout-separator) * -1);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=SplitLayout.css.js.map

package/dist-cjs/packages/lab/src/split-layout/SplitLayout.css.js.map

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

package/dist-cjs/packages/lab/src/split-layout/SplitLayout.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+require('./SplitLayout.css.js');
+
+const SplitItem = React.forwardRef(function SplitItem2({ children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
+    ...rest,
+    ref,
+    children
+  });
+});
+const SplitLayout = React.forwardRef(
+  function SplitLayout2({ align, leftSplitItem, rightSplitItem, wrap = true, gap, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.FlexLayout, {
+      align,
+      direction: "row",
+      ref,
+      wrap,
+      gap,
+      justify: "space-between",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SplitItem, {
+          children: leftSplitItem
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(SplitItem, {
+          children: rightSplitItem
+        })
+      ]
+    });
+  }
+);
+
+exports.SplitLayout = SplitLayout;
+//# sourceMappingURL=SplitLayout.js.map

package/dist-cjs/packages/lab/src/split-layout/SplitLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { forwardRef, ReactNode, HTMLAttributes, ElementType } from \"react\";\nimport {\n  FlexLayout,\n  FlexLayoutProps,\n  FlexItem,\n  FlexItemProps,\n} from \"@salt-ds/core\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitItemProps extends FlexItemProps<ElementType> {\n  /**\n   * A list of items. Required to have some children.\n   */\n  children: ReactNode;\n}\n\nexport interface SplitLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n   */\n  align?: FlexLayoutProps<ElementType>[\"align\"];\n  /**\n   * Allow the items to wrap as needed, default is true.\n   */\n  wrap?: FlexLayoutProps<ElementType>[\"wrap\"];\n  /**\n   * Controls the space between items.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  leftSplitItem: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  rightSplitItem: ReactNode;\n}\n\nconst SplitItem = forwardRef<HTMLDivElement, SplitItemProps>(function SplitItem(\n  { children, ...rest },\n  ref\n) {\n  return (\n    <FlexItem {...rest} ref={ref}>\n      {children}\n    </FlexItem>\n  );\n});\n\nexport const SplitLayout = forwardRef<HTMLDivElement, SplitLayoutProps>(\n  function SplitLayout(\n    { align, leftSplitItem, rightSplitItem, wrap = true, gap, ...rest },\n    ref\n  ) {\n    return (\n      <FlexLayout\n        align={align}\n        direction=\"row\"\n        ref={ref}\n        wrap={wrap}\n        gap={gap}\n        justify=\"space-between\"\n        {...rest}\n      >\n        <SplitItem>{leftSplitItem}</SplitItem>\n        <SplitItem>{rightSplitItem}</SplitItem>\n      </FlexLayout>\n    );\n  }\n);\n"],"names":["forwardRef","SplitItem","jsx","FlexItem","SplitLayout","jsxs","FlexLayout"],"mappings":";;;;;;;;;AAuCA,MAAM,SAAA,GAAYA,iBAA2C,SAASC,UAAAA,CACpE,EAAE,QAAa,EAAA,GAAA,IAAA,IACf,GACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,IAAU,GAAG,IAAA;AAAA,IAAM,GAAA;AAAA,IACjB,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAEM,MAAM,WAAc,GAAAH,gBAAA;AAAA,EACzB,SAASI,YACP,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,cAAgB,EAAA,IAAA,GAAO,IAAM,EAAA,GAAA,EAAA,GAAQ,IAAK,EAAA,EAClE,GACA,EAAA;AACA,IAAA,uBACGC,eAAA,CAAAC,eAAA,EAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAU,EAAA,KAAA;AAAA,MACV,GAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAQ,EAAA,eAAA;AAAA,MACP,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACJ,cAAA,CAAA,SAAA,EAAA;AAAA,UAAW,QAAA,EAAA,aAAA;AAAA,SAAc,CAAA;AAAA,wBACzBA,cAAA,CAAA,SAAA,EAAA;AAAA,UAAW,QAAA,EAAA,cAAA;AAAA,SAAe,CAAA;AAAA,OAAA;AAAA,KAC7B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/stepper-input/StepperInput.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  margin-top: 0;\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=StepperInput.css.js.map

package/dist-cjs/packages/lab/src/stepper-input/StepperInput.css.js.map

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