@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.70

package/dist-es/packages/lab/src/portal/Portal.js

@@ -1,60 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, isValidElement, cloneElement } from 'react';
-import { createPortal } from 'react-dom';
-import { useForkRef, useIsomorphicLayoutEffect, ownerDocument, SaltProvider } from '@salt-ds/core';
-
-function getContainer(container) {
-  return typeof container === "function" ? container() : container;
-}
-const DEFAULT_ID = "portal-root";
-const Portal = forwardRef(function Portal2({
-  children,
-  container: containerProp = document.body,
-  disablePortal = false,
-  id = DEFAULT_ID
-}, ref) {
-  var _a;
-  const [mounted, setMounted] = useState(false);
-  const portalRef = useRef(null);
-  const handleRef = useForkRef(
-    isValidElement(children) ? children.ref : null,
-    ref
-  );
-  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
-  useIsomorphicLayoutEffect(() => {
-    const root = ownerDocument(container).getElementById(id);
-    if (root) {
-      portalRef.current = root;
-    } else {
-      portalRef.current = ownerDocument(container).createElement("div");
-      portalRef.current.id = id;
-    }
-    const el = portalRef.current;
-    if (!container.contains(el)) {
-      container.appendChild(el);
-    }
-    setMounted(true);
-  }, [id, container]);
-  if (disablePortal) {
-    if (isValidElement(children)) {
-      return cloneElement(children, {
-        ref: handleRef
-      });
-    }
-    return /* @__PURE__ */ jsx(Fragment, {
-      children
-    });
-  }
-  if (mounted && portalRef.current && children) {
-    return createPortal(
-      /* @__PURE__ */ jsx(SaltProvider, {
-        children
-      }),
-      portalRef.current
-    );
-  }
-  return null;
-});
-
-export { Portal };
-//# sourceMappingURL=Portal.js.map

package/dist-es/packages/lab/src/portal/Portal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Portal.js","sources":["../src/portal/Portal.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  SaltProvider,\n  ownerDocument,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\n\nexport interface PortalProps {\n  /**\n   * The children to render into the `container`.\n   */\n  children?: ReactNode;\n  /**\n   * An HTML element, component instance, or function that returns either.\n   * The `container` will have the portal children appended to it.\n   *\n   * By default, it uses the body of the top-level document object,\n   * so it's simply `document.body` most of the time.\n   */\n  container?: Element | (() => Element | null) | null;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If this node does not exist on the document, it will be created for you.\n   */\n  id?: string;\n}\n\nfunction getContainer(container: PortalProps[\"container\"]) {\n  return typeof container === \"function\" ? container() : container;\n}\n\nconst DEFAULT_ID = \"portal-root\";\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal = forwardRef<HTMLElement, PortalProps>(function Portal(\n  {\n    children,\n    container: containerProp = document.body,\n    disablePortal = false,\n    id = DEFAULT_ID,\n  },\n  ref\n) {\n  const [mounted, setMounted] = useState(false);\n  const portalRef = useRef<HTMLElement | null>(null);\n  const handleRef = useForkRef(\n    // @ts-ignore\n    isValidElement(children) ? children.ref : null,\n    ref\n  );\n\n  const container = getContainer(containerProp) ?? document.body;\n\n  useIsomorphicLayoutEffect(() => {\n    const root = ownerDocument(container).getElementById(id);\n\n    if (root) {\n      portalRef.current = root;\n    } else {\n      portalRef.current = ownerDocument(container).createElement(\"div\");\n      portalRef.current.id = id;\n    }\n\n    const el = portalRef.current;\n\n    if (!container.contains(el)) {\n      container.appendChild(el);\n    }\n\n    setMounted(true);\n  }, [id, container]);\n\n  if (disablePortal) {\n    if (isValidElement(children)) {\n      return cloneElement(children, {\n        ref: handleRef,\n      });\n    }\n    return <>{children}</>;\n  }\n\n  if (mounted && portalRef.current && children) {\n    return createPortal(\n      <SaltProvider>{children}</SaltProvider>,\n      portalRef.current\n    );\n  }\n\n  return null;\n});\n"],"names":["Portal"],"mappings":";;;;;AAwCA,SAAS,aAAa,SAAqC,EAAA;AACzD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAa,GAAA,SAAA,EAAc,GAAA,SAAA,CAAA;AACzD,CAAA;AAEA,MAAM,UAAa,GAAA,aAAA,CAAA;AAMN,MAAA,MAAA,GAAS,UAAqC,CAAA,SAASA,OAClE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA,EAAW,gBAAgB,QAAS,CAAA,IAAA;AAAA,EACpC,aAAgB,GAAA,KAAA;AAAA,EAChB,EAAK,GAAA,UAAA;AACP,CAAA,EACA,GACA,EAAA;AA1DF,EAAA,IAAA,EAAA,CAAA;AA2DE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAEhB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,IAC1C,GAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,CAAA,EAAA,GAAA,YAAA,CAAa,aAAa,CAAA,KAA1B,YAA+B,QAAS,CAAA,IAAA,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,IAAO,GAAA,aAAA,CAAc,SAAS,CAAA,CAAE,eAAe,EAAE,CAAA,CAAA;AAEvD,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AAAA,KACf,MAAA;AACL,MAAA,SAAA,CAAU,OAAU,GAAA,aAAA,CAAc,SAAS,CAAA,CAAE,cAAc,KAAK,CAAA,CAAA;AAChE,MAAA,SAAA,CAAU,QAAQ,EAAK,GAAA,EAAA,CAAA;AAAA,KACzB;AAEA,IAAA,MAAM,KAAK,SAAU,CAAA,OAAA,CAAA;AAErB,IAAA,IAAI,CAAC,SAAA,CAAU,QAAS,CAAA,EAAE,CAAG,EAAA;AAC3B,MAAA,SAAA,CAAU,YAAY,EAAE,CAAA,CAAA;AAAA,KAC1B;AAEA,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACd,EAAA,CAAC,EAAI,EAAA,SAAS,CAAC,CAAA,CAAA;AAElB,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAA,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC5B,MAAA,OAAO,aAAa,QAAU,EAAA;AAAA,QAC5B,GAAK,EAAA,SAAA;AAAA,OACN,CAAA,CAAA;AAAA,KACH;AACA,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EAAI,IAAA,OAAA,IAAW,SAAU,CAAA,OAAA,IAAW,QAAU,EAAA;AAC5C,IAAO,OAAA,YAAA;AAAA,sBACJ,GAAA,CAAA,YAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAS,CAAA;AAAA,MACxB,SAAU,CAAA,OAAA;AAAA,KACZ,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,IAAA,CAAA;AACT,CAAC;;;;"}

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgress.css.js

@@ -1,7 +0,0 @@
-import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".saltCircularProgress {\n  --circularProgress-gradient-color: var(--salt-accent-background);\n\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-progressValue,\n.saltCircularProgress-disabled circle {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n  stroke-width: 2px;\n}\n\n.saltCircularProgress-small {\n  font-size: 11px;\n}\n\n.saltCircularProgress-medium {\n  font-size: 14px;\n}\n\n.saltCircularProgress-large {\n  font-size: 16px;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-disabled {\n}\n\n.saltCircularProgress-completed {\n}\n\n.saltCircularProgress-railCircle {\n  stroke: var(--salt-track-borderColor);\n  stroke-width: var(--salt-size-border);\n}\n\n.saltCircularProgress-gradientStart,\n.saltCircularProgress-gradientStop {\n  stop-color: var(--saltCircularProgress-gradient-color, var(--circularProgress-gradient-color));\n}\n\n.saltCircularProgress-container {\n  display: inline-block;\n}\n\n.saltCircularProgress-static {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-indeterminate {\n  animation: circular-rotate 1.4s linear infinite;\n}\n\n.saltCircularProgress-svg {\n  fill: var(--salt-accent-background);\n  display: block;\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n}\n\n.saltCircularProgress-circleStatic {\n  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-circleIndeterminate {\n  animation: circular-dash 1.4s ease-in-out infinite;\n}\n\n@keyframes circular-rotate {\n  0% {\n    transform-origin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes circular-dash {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };
-//# sourceMappingURL=CircularProgress.css.js.map

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgress.css.js.map

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

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgress.js

@@ -1,132 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useEffect } from 'react';
-import { clsx } from 'clsx';
-import { makePrefixer } from '@salt-ds/core';
-import { Info } from '../Info.js';
-import { ViewBox, LinearGradient, Circle, SIZE } from './CircularProgressParts.js';
-import './CircularProgress.css.js';
-
-const MAX = 100;
-const MIN = 0;
-const withBaseName = makePrefixer("saltCircularProgress");
-const SIZE_OPTIONS = {
-  small: {
-    container: 36
-  },
-  medium: {
-    container: 48
-  },
-  large: {
-    container: 60
-  }
-};
-function getRelativeValue(value, min, max) {
-  return (Math.min(Math.max(min, value), max) - min) / (max - min);
-}
-function easeOut(t) {
-  t = getRelativeValue(t, 0, 1);
-  t = (t -= 1) * t * t + 1;
-  return t;
-}
-function easeIn(t) {
-  return t * t;
-}
-const CircularProgress = forwardRef(function CircularProgress2({
-  "aria-label": ariaLabel,
-  className,
-  disabled,
-  showInfo = true,
-  size = "small",
-  renderInfo,
-  value = 0,
-  unit = "%",
-  variant = "static",
-  ...rest
-}, ref) {
-  const circleStyle = {};
-  const rootStyle = {};
-  if (variant === "determinate" || variant === "static") {
-    const circumference = 2 * Math.PI * ((SIZE - 2) * 0.5);
-    circleStyle.strokeDasharray = circumference.toFixed(3);
-    if (variant === "static") {
-      circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
-      rootStyle.transform = "rotate(-90deg)";
-    } else {
-      circleStyle.strokeDashoffset = `${(easeIn((100 - value) / 100) * circumference).toFixed(3)}px`;
-      rootStyle.transform = `rotate(${(easeOut(value / 70) * 270).toFixed(
-        3
-      )}deg)`;
-    }
-  }
-  useEffect(() => {
-    if (process.env.NODE_ENV !== "production" && !ariaLabel) {
-      console.error(
-        "Salt: aria-label value not supplied to CircularProgress. This may affect the ADA compliance level of the component and owning application, and may generate errors in automated accessibility testing software"
-      );
-    }
-  }, [ariaLabel]);
-  const containerSize = SIZE_OPTIONS[size].container;
-  const getValueProps = () => ({
-    unit,
-    value,
-    getValueProps: (valueProps = {}) => ({
-      className: withBaseName("progressValue"),
-      ...valueProps
-    })
-  });
-  let progressInfo = null;
-  if (showInfo) {
-    progressInfo = renderInfo ? renderInfo(getValueProps()) : /* @__PURE__ */ jsx(Info, {
-      className: withBaseName("progressValue"),
-      unit,
-      value,
-      ...rest
-    });
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(className, "saltCircularProgress", {
-      [withBaseName("small")]: size === "small",
-      [withBaseName("medium")]: size === "medium",
-      [withBaseName("large")]: size === "large",
-      [withBaseName("disabled")]: disabled
-    }),
-    "data-testid": "circular-progress",
-    ref,
-    role: "progressbar",
-    "aria-label": ariaLabel,
-    "aria-valuemax": MAX,
-    "aria-valuemin": MIN,
-    "aria-valuenow": value,
-    ...rest,
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: clsx(withBaseName("container"), {
-          [withBaseName("indeterminate")]: variant === "indeterminate",
-          [withBaseName("static")]: variant === "static"
-        }),
-        style: { width: containerSize, height: containerSize, ...rootStyle },
-        children: /* @__PURE__ */ jsxs(ViewBox, {
-          children: [
-            /* @__PURE__ */ jsx(LinearGradient, {}),
-            /* @__PURE__ */ jsx(Circle, {
-              className: withBaseName("railCircle"),
-              strokeWidth: 1
-            }),
-            /* @__PURE__ */ jsx(Circle, {
-              strokeWidth: 2,
-              style: circleStyle,
-              className: clsx(withBaseName("circle"), {
-                [withBaseName("circleIndeterminate")]: variant === "indeterminate",
-                [withBaseName("circleStatic")]: variant === "static"
-              })
-            })
-          ]
-        })
-      }),
-      progressInfo
-    ]
-  });
-});
-
-export { CircularProgress, SIZE_OPTIONS };
-//# sourceMappingURL=CircularProgress.js.map

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info as DefaultInfo } from \"../Info\";\nimport { Circle, LinearGradient, SIZE, ViewBox } from \"./CircularProgressParts\";\nimport { InfoRendererProps } from \"../LinearProgress/LinearProgress\";\nimport \"./CircularProgress.css\";\n\nconst MAX = 100;\nconst MIN = 0;\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport const SIZE_OPTIONS = {\n  small: {\n    container: 36,\n  },\n  medium: {\n    container: 48,\n  },\n  large: {\n    container: 60,\n  },\n};\n\nfunction getRelativeValue(value: number, min: number, max: number): number {\n  return (Math.min(Math.max(min, value), max) - min) / (max - min);\n}\n\nfunction easeOut(t: number): number {\n  t = getRelativeValue(t, 0, 1);\n  t = (t -= 1) * t * t + 1;\n  return t;\n}\n\nfunction easeIn(t: number): number {\n  return t * t;\n}\n\nexport interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A label for accessibility\n   */\n  \"aria-label\"?: string;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Disabled flag, true when the component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Render props callback to render info panel.\n   * @param function({ value, unit, getValueProps })\n   */\n  renderInfo?: (\n    props: Pick<InfoRendererProps<any, any>, \"value\" | \"unit\" | \"getValueProps\">\n  ) => ReactElement<InfoRendererProps<any, any>>;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * The size of the circle\n   * (small, medium, large)\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Default unit is`%`\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator for the determinate and static variants.\n   * Value between 0 and 100.\n   */\n  value?: number;\n  /**\n   * The variant to use.\n   * Use indeterminate or query when there is no progress value.\n   */\n  variant?: \"determinate\" | \"indeterminate\" | \"static\";\n}\n\n/**\n * Circular progress bar with an optional Info element, showing the current value\n * The default Info element can be rendered by setting `unit` and `value` props.\n * A custom Info element can be rendered using the `renderInfo` callback.\n * The render props callback is of the form\n * @param {string} unit the unit of the progress info\n * @param {number} value the value of the progress info\n * @param {string} variant the variant to use.\n * @param {function} getValueProps function callback that returns the value props\n */\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    \"aria-label\": ariaLabel,\n    className,\n    disabled,\n    showInfo = true,\n    size = \"small\",\n    renderInfo,\n    value = 0,\n    unit = \"%\",\n    variant = \"static\",\n    ...rest\n  },\n  ref\n) {\n  const circleStyle: CSSProperties = {};\n  const rootStyle: CSSProperties = {};\n  const rootProps: HTMLAttributes<any> = {};\n\n  if (variant === \"determinate\" || variant === \"static\") {\n    const circumference = 2 * Math.PI * ((SIZE - 2) * 0.5);\n    circleStyle.strokeDasharray = circumference.toFixed(3);\n    rootProps[\"aria-valuenow\"] = Math.round(value);\n\n    if (variant === \"static\") {\n      circleStyle.strokeDashoffset = `${(\n        ((100 - value) / 100) *\n        circumference\n      ).toFixed(3)}px`;\n      rootStyle.transform = \"rotate(-90deg)\";\n    } else {\n      circleStyle.strokeDashoffset = `${(\n        easeIn((100 - value) / 100) * circumference\n      ).toFixed(3)}px`;\n      rootStyle.transform = `rotate(${(easeOut(value / 70) * 270).toFixed(\n        3\n      )}deg)`;\n    }\n  }\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\" && !ariaLabel) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Salt: aria-label value not supplied to CircularProgress. This may affect the ADA compliance level of the component and owning application, and may generate errors in automated accessibility testing software\"\n      );\n    }\n  }, [ariaLabel]);\n\n  const containerSize = SIZE_OPTIONS[size].container;\n\n  const getValueProps = () => ({\n    unit,\n    value,\n    getValueProps: (valueProps = {}) => ({\n      className: withBaseName(\"progressValue\"),\n      ...valueProps,\n    }),\n  });\n\n  let progressInfo: ReactNode = null;\n  if (showInfo) {\n    progressInfo = renderInfo ? (\n      renderInfo(getValueProps())\n    ) : (\n      <DefaultInfo\n        className={withBaseName(\"progressValue\")}\n        unit={unit}\n        value={value}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={clsx(className, \"saltCircularProgress\", {\n        [withBaseName(\"small\")]: size === \"small\",\n        [withBaseName(\"medium\")]: size === \"medium\",\n        [withBaseName(\"large\")]: size === \"large\",\n        [withBaseName(\"disabled\")]: disabled,\n      })}\n      data-testid=\"circular-progress\"\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemax={MAX}\n      aria-valuemin={MIN}\n      aria-valuenow={value}\n      {...rest}\n    >\n      <div\n        className={clsx(withBaseName(\"container\"), {\n          [withBaseName(\"indeterminate\")]: variant === \"indeterminate\",\n          [withBaseName(\"static\")]: variant === \"static\",\n        })}\n        style={{ width: containerSize, height: containerSize, ...rootStyle }}\n      >\n        <ViewBox>\n          <LinearGradient />\n          <Circle className={withBaseName(\"railCircle\")} strokeWidth={1} />\n          <Circle\n            strokeWidth={2}\n            style={circleStyle}\n            className={clsx(withBaseName(\"circle\"), {\n              [withBaseName(\"circleIndeterminate\")]:\n                variant === \"indeterminate\",\n              [withBaseName(\"circleStatic\")]: variant === \"static\",\n            })}\n          />\n        </ViewBox>\n      </div>\n      {progressInfo}\n    </div>\n  );\n});\n"],"names":["CircularProgress","DefaultInfo"],"mappings":"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"}

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgressParts.js

@@ -1,42 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import './CircularProgress.css.js';
-
-const SIZE = 44;
-const circularGradientId = "salt-circular-progress-gradient";
-const ViewBox = (props) => {
-  return /* @__PURE__ */ jsx("svg", {
-    className: "saltCircularProgress-svg",
-    viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-    children: props.children
-  });
-};
-const LinearGradient = () => /* @__PURE__ */ jsx("defs", {
-  children: /* @__PURE__ */ jsxs("linearGradient", {
-    gradientTransform: "rotate(90)",
-    id: circularGradientId,
-    children: [
-      /* @__PURE__ */ jsx("stop", {
-        className: "saltCircularProgress-gradientStart",
-        offset: "0%"
-      }),
-      /* @__PURE__ */ jsx("stop", {
-        className: "saltCircularProgress-gradientStop",
-        offset: "100%"
-      })
-    ]
-  })
-});
-const Circle = ({ strokeWidth, style, className }) => {
-  return /* @__PURE__ */ jsx("circle", {
-    cx: SIZE,
-    cy: SIZE,
-    fill: "none",
-    r: (SIZE - strokeWidth) / 2,
-    strokeWidth,
-    style,
-    className
-  });
-};
-
-export { Circle, LinearGradient, SIZE, ViewBox, circularGradientId };
-//# sourceMappingURL=CircularProgressParts.js.map

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgressParts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CircularProgressParts.js","sources":["../src/progress/CircularProgress/CircularProgressParts.tsx"],"sourcesContent":["import { CSSProperties, ReactNode } from \"react\";\nimport \"./CircularProgress.css\";\n\nexport const SIZE = 44;\n\nexport const circularGradientId = \"salt-circular-progress-gradient\";\n\nexport const ViewBox = (props: { children?: ReactNode }) => {\n  return (\n    <svg\n      className=\"saltCircularProgress-svg\"\n      viewBox={`${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`}\n    >\n      {props.children}\n    </svg>\n  );\n};\n\nexport const LinearGradient = () => (\n  <defs>\n    <linearGradient gradientTransform=\"rotate(90)\" id={circularGradientId}>\n      <stop className=\"saltCircularProgress-gradientStart\" offset=\"0%\" />\n      <stop className=\"saltCircularProgress-gradientStop\" offset=\"100%\" />\n    </linearGradient>\n  </defs>\n);\n\nexport interface CircleProps {\n  strokeWidth: number;\n  style?: CSSProperties;\n  className?: string;\n}\n\nexport const Circle = ({ strokeWidth, style, className }: CircleProps) => {\n  return (\n    <circle\n      cx={SIZE}\n      cy={SIZE}\n      fill=\"none\"\n      r={(SIZE - strokeWidth) / 2}\n      strokeWidth={strokeWidth}\n      style={style}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAO,GAAA,GAAA;AAEb,MAAM,kBAAqB,GAAA,kCAAA;AAErB,MAAA,OAAA,GAAU,CAAC,KAAoC,KAAA;AAC1D,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAU,EAAA,0BAAA;AAAA,IACV,SAAS,CAAG,EAAA,IAAA,GAAO,CAAK,CAAA,CAAA,EAAA,IAAA,GAAO,KAAK,IAAQ,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA;AAAA,IAE3C,QAAM,EAAA,KAAA,CAAA,QAAA;AAAA,GACT,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,cAAA,GAAiB,sBAC3B,GAAA,CAAA,MAAA,EAAA;AAAA,EACC,QAAC,kBAAA,IAAA,CAAA,gBAAA,EAAA;AAAA,IAAe,iBAAkB,EAAA,YAAA;AAAA,IAAa,EAAI,EAAA,kBAAA;AAAA,IACjD,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAU,EAAA,oCAAA;AAAA,QAAqC,MAAO,EAAA,IAAA;AAAA,OAAK,CAAA;AAAA,sBAChE,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAU,EAAA,mCAAA;AAAA,QAAoC,MAAO,EAAA,MAAA;AAAA,OAAO,CAAA;AAAA,KAAA;AAAA,GACpE,CAAA;AAAA,CACF,EAAA;AASK,MAAM,SAAS,CAAC,EAAE,WAAa,EAAA,KAAA,EAAO,WAA6B,KAAA;AACxE,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,EAAI,EAAA,IAAA;AAAA,IACJ,EAAI,EAAA,IAAA;AAAA,IACJ,IAAK,EAAA,MAAA;AAAA,IACL,CAAA,EAAA,CAAI,OAAO,WAAe,IAAA,CAAA;AAAA,IAC1B,WAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/progress/Info.js

@@ -1,15 +0,0 @@
-import { jsxs } from 'react/jsx-runtime';
-
-const Info = ({ className, value, unit }) => {
-  return /* @__PURE__ */ jsxs("span", {
-    "aria-hidden": "true",
-    className,
-    children: [
-      value,
-      unit
-    ]
-  });
-};
-
-export { Info };
-//# sourceMappingURL=Info.js.map

package/dist-es/packages/lab/src/progress/Info.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Info.js","sources":["../src/progress/Info.tsx"],"sourcesContent":["export interface InfoProps {\n  className: string;\n  unit: string;\n  value: number;\n}\n\nexport const Info = ({ className, value, unit }: InfoProps) => {\n  return (\n    <span aria-hidden=\"true\" className={className}>\n      {value}\n      {unit}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;AAMO,MAAM,OAAO,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,MAAsB,KAAA;AAC7D,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,IAAO,SAAA;AAAA,IACtB,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/progress/LinearProgress/LinearProgress.css.js

@@ -1,7 +0,0 @@
-import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  min-width: 200px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n/* TODO: Odyssey now has only 2 sizes */\n.saltLinearProgress-large {\n  --linearProgress-after-top: 3px;\n  --linearProgress-value-paddingLeft: 12px;\n  --linearProgress-height: 7px;\n  --linearProgress-fontSize: 16px;\n}\n\n.saltLinearProgress-medium {\n  --linearProgress-after-top: 2px;\n  --linearProgress-value-paddingLeft: 8px;\n  --linearProgress-height: 5px;\n  --linearProgress-fontSize: 14px;\n}\n\n.saltLinearProgress-small {\n  --linearProgress-after-top: 1px;\n  --linearProgress-value-paddingLeft: 4px;\n  --linearProgress-height: 3px;\n  --linearProgress-fontSize: 11px;\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-bar {\n  background: var(--salt-accent-background-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-barContainer :after {\n  background: var(--salt-accent-background-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-progressValue {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: calc(100% - 10px);\n  overflow: hidden;\n  height: var(--linearProgress-height);\n}\n\n/* Horizontal line under the progress indicator bar */\n.saltLinearProgress-barContainer:after {\n  top: var(--linearProgress-after-top);\n  background: var(--salt-track-borderColor);\n  content: \"\";\n  display: block;\n  height: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n}\n\n.saltLinearProgress-determinate {\n}\n\n.saltLinearProgress-indeterminate {\n}\n\n.saltLinearProgress-query {\n  transform: rotate(180deg);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-determinate .saltLinearProgress-bar1 {\n  transition: transform 0.4s linear;\n}\n\n.saltLinearProgress-indeterminate .saltLinearProgress-bar1 {\n  width: auto;\n  animation: Indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.saltLinearProgress-query .saltLinearProgress-bar1 {\n  width: auto;\n  animation: Indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.saltLinearProgress-bar2 {\n  width: auto;\n  animation: Indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--linearProgress-value-paddingLeft);\n}\n\n@keyframes Indeterminate1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes Indeterminate2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };
-//# sourceMappingURL=LinearProgress.css.js.map

package/dist-es/packages/lab/src/progress/LinearProgress/LinearProgress.css.js.map

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

package/dist-es/packages/lab/src/progress/LinearProgress/LinearProgress.js

@@ -1,102 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
-import { makePrefixer } from '@salt-ds/core';
-import './LinearProgress.css.js';
-import { Info } from '../Info.js';
-
-const withBaseName = makePrefixer("saltLinearProgress");
-const getUnitAndValueProps = ({ unit, value }, { progressUnit, progressValue }) => ({
-  unit,
-  value,
-  getUnitProps: (props = {}) => ({
-    className: progressUnit,
-    ...props
-  }),
-  getValueProps: (props = {}) => ({
-    className: progressValue,
-    ...props
-  })
-});
-const LinearProgress = forwardRef(
-  function LinearProgress2({
-    className,
-    disabled,
-    renderInfo,
-    showInfo = true,
-    size = "small",
-    variant = "determinate",
-    unit = "%",
-    value = 0,
-    ...rest
-  }, ref) {
-    let progressInfo = null;
-    const progressUnit = withBaseName("progressUnit");
-    const progressValue = withBaseName("progressValue");
-    if (showInfo) {
-      progressInfo = renderInfo ? renderInfo(
-        getUnitAndValueProps(
-          {
-            unit,
-            value
-          },
-          {
-            progressUnit,
-            progressValue
-          }
-        )
-      ) : /* @__PURE__ */ jsx(Info, {
-        unit,
-        value,
-        className: progressValue
-      });
-    }
-    const rootProps = {};
-    const barStyle = {};
-    if (variant === "determinate") {
-      rootProps["aria-valuenow"] = Math.round(value);
-      rootProps["aria-valuemin"] = 0;
-      rootProps["aria-valuemax"] = 100;
-      barStyle.transform = `translateX(${value - 100}%)`;
-    }
-    return /* @__PURE__ */ jsxs("div", {
-      className: clsx(
-        withBaseName(),
-        {
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("small")]: size === "small",
-          [withBaseName("medium")]: size === "medium",
-          [withBaseName("large")]: size === "large"
-        },
-        className
-      ),
-      ref,
-      "data-testid": "linear-progress",
-      role: "progressbar",
-      ...rootProps,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          className: clsx(withBaseName("barContainer"), {
-            [withBaseName("determinate")]: variant === "determinate",
-            [withBaseName("indeterminate")]: variant === "indeterminate",
-            [withBaseName("query")]: variant === "query"
-          }),
-          children: [
-            /* @__PURE__ */ jsx("div", {
-              className: clsx(withBaseName("bar"), withBaseName("bar1")),
-              style: barStyle
-            }),
-            variant === "determinate" ? null : /* @__PURE__ */ jsx("div", {
-              className: clsx(withBaseName("bar"), withBaseName("bar2"))
-            })
-          ]
-        }),
-        progressInfo
-      ]
-    });
-  }
-);
-
-export { LinearProgress };
-//# sourceMappingURL=LinearProgress.js.map

package/dist-es/packages/lab/src/progress/LinearProgress/LinearProgress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport \"./LinearProgress.css\";\n\nimport { Info as DefaultInfo } from \"../Info\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface InfoRendererProps<T, U> {\n  unit: string;\n  value: number;\n  getUnitProps?: (props: T) => { className: string } & T;\n  getValueProps: (props: U) => { className: string } & U;\n}\n\ntype UnitAndValuePropsGetter<T, U> = (\n  a: {\n    unit: string;\n    value: number;\n  },\n  b: {\n    progressUnit: string;\n    progressValue: string;\n  }\n) => InfoRendererProps<T, U>;\n\nconst getUnitAndValueProps: UnitAndValuePropsGetter<any, any> = (\n  { unit, value },\n  { progressUnit, progressValue }\n) => ({\n  unit,\n  value,\n  getUnitProps: (props = {}) => ({\n    className: progressUnit,\n    ...props,\n  }),\n  getValueProps: (props = {}) => ({\n    className: progressValue,\n    ...props,\n  }),\n});\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * Disabled flag, true when the component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * render props callback to render info panel.\n   */\n  renderInfo?: (\n    props: Pick<\n      InfoRendererProps<any, any>,\n      \"value\" | \"unit\" | \"getValueProps\" | \"getUnitProps\"\n    >\n  ) => ReactElement<InfoRendererProps<any, any>>;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * The size of the line, default is 'small'.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Default unit is`%`.\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator for the determinate and static variants.\n   * Value between 0 and 100.\n   */\n  value?: number;\n  /**\n   * The variant to use.\n   * Use indeterminate or query when there is no progress value.\n   */\n  variant?: \"determinate\" | \"indeterminate\" | \"query\";\n}\n\n/**\n * Linear progress bar with an optional Info element, showing the current value\n * The default Info element can be rendered by setting `unit` and `value` props.\n * A custom Info element can be rendered using the `renderInfo` callback.\n * The render props callback is of the form\n * @param {string} unit the unit of the progress info\n * @param {number} value the value of the progress info\n * @param {function} getUnitProps function callback that returns the unit props\n * @param {function} getValueProps function callback that returns the value props\n */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    {\n      className,\n      disabled,\n      renderInfo,\n      showInfo = true,\n      size = \"small\",\n      variant = \"determinate\",\n      unit = \"%\",\n      value = 0,\n      ...rest\n    },\n    ref\n  ) {\n    let progressInfo: ReactNode = null;\n\n    const progressUnit = withBaseName(\"progressUnit\");\n    const progressValue = withBaseName(\"progressValue\");\n\n    if (showInfo) {\n      progressInfo = renderInfo ? (\n        renderInfo(\n          getUnitAndValueProps(\n            {\n              unit,\n              value,\n            },\n            {\n              progressUnit,\n              progressValue,\n            }\n          )\n        )\n      ) : (\n        <DefaultInfo unit={unit} value={value} className={progressValue} />\n      );\n    }\n\n    const rootProps: HTMLAttributes<HTMLDivElement> = {};\n    const barStyle: CSSProperties = {};\n\n    if (variant === \"determinate\") {\n      rootProps[\"aria-valuenow\"] = Math.round(value);\n      rootProps[\"aria-valuemin\"] = 0;\n      rootProps[\"aria-valuemax\"] = 100;\n      barStyle.transform = `translateX(${value - 100}%)`;\n    }\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"small\")]: size === \"small\",\n            [withBaseName(\"medium\")]: size === \"medium\",\n            [withBaseName(\"large\")]: size === \"large\",\n          },\n          className\n        )}\n        ref={ref}\n        data-testid=\"linear-progress\"\n        role=\"progressbar\"\n        {...rootProps}\n        {...rest}\n      >\n        <div\n          className={clsx(withBaseName(\"barContainer\"), {\n            [withBaseName(\"determinate\")]: variant === \"determinate\",\n            [withBaseName(\"indeterminate\")]: variant === \"indeterminate\",\n            [withBaseName(\"query\")]: variant === \"query\",\n          })}\n        >\n          <div\n            className={clsx(withBaseName(\"bar\"), withBaseName(\"bar1\"))}\n            style={barStyle}\n          />\n          {variant === \"determinate\" ? null : (\n            <div className={clsx(withBaseName(\"bar\"), withBaseName(\"bar2\"))} />\n          )}\n        </div>\n        {progressInfo}\n      </div>\n    );\n  }\n);\n"],"names":["LinearProgress","DefaultInfo"],"mappings":"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"}

package/dist-es/packages/lab/src/query-input/QueryInput.css.js

@@ -1,7 +0,0 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".saltQueryInput {\n}\n\n.saltQueryInputBody {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.saltQueryInputBody > .saltIcon {\n  padding: var(--salt-size-unit);\n  align-self: start;\n}\n\n.saltQueryInputBody-separator {\n  width: 1px;\n  background: var(--salt-separable-secondary-borderColor);\n  margin: 0 var(--salt-size-unit);\n  align-self: stretch;\n}\n\n.saltQueryInputBody-buttonGroup {\n  flex-shrink: 0;\n  align-self: start;\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltQueryInputBody-input {\n  flex-grow: 1;\n}\n\n.saltQueryInputValueSelector {\n}\n\n.saltQueryInputValueSelector-content {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltCategoryList-categoryWidthMeasure {\n  position: fixed;\n  left: -1000px;\n  top: 0;\n  border: solid 1px black;\n}\n\n.saltCategoryList-category {\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltCategoryListItem-text {\n  flex-shrink: 0;\n  margin-right: calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltCategoryListItem-valuesContainer {\n  font-style: italic;\n  color: var(--salt-text-secondary-foreground);\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n\n.saltCategoryListItem-values {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltCategoryListItem-chevron {\n  flex-shrink: 0;\n  margin-left: var(--salt-size-unit);\n}\n\n.saltListItem-selected .saltIcon {\n  fill: var(--list-item-text-color-active);\n}\n\n.saltQueryInputValueList {\n  border: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.saltQueryInputValueList-back {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  cursor: pointer;\n}\n\n.saltQueryInputValueList-back .saltIcon {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltQueryInputValueList-category {\n  font-size: var(--salt-text-fontSize);\n  flex-grow: 1;\n}\n\n.saltQueryInputSearchList {\n}\n\n.saltQueryInputSearchList-group {\n}\n\n.saltQueryInputSearchList-addKeyword {\n  border-top: solid 1px var(--salt-separable-secondary-borderColor);\n}\n\n.saltQueryInputSearchList-categoryTitle {\n  color: var(--salt-text-primary-foreground);\n  background: var(--salt-container-primary-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-size-unit);\n  position: sticky;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltQueryInputSearchList-value {\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };
-//# sourceMappingURL=QueryInput.css.js.map

package/dist-es/packages/lab/src/query-input/QueryInput.css.js.map

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

package/dist-es/packages/lab/src/query-input/QueryInput.js

@@ -1,60 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import './internal/CategoryList.js';
-import './internal/CategoryListContext.js';
-import './internal/CategoryListItem.js';
-import { QueryInputBody } from './internal/QueryInputBody.js';
-import './internal/SearchList.js';
-import './internal/ValueList.js';
-import { ValueSelector } from './internal/ValueSelector.js';
-import { useQueryInput } from './useQueryInput.js';
-import './QueryInput.css.js';
-
-const withBaseName = makePrefixer("saltQueryInput");
-const QueryInput = forwardRef(
-  function QueryInput2(props, externalRef) {
-    const {
-      disabled,
-      categories,
-      selectedItems,
-      onChange,
-      defaultSelectedItems,
-      showCategory,
-      autoClose,
-      displayedItemCount,
-      booleanOperator,
-      onBooleanOperatorChange,
-      defaultBooleanOperator,
-      className,
-      ...restProps
-    } = props;
-    const {
-      queryInputProps,
-      queryInputBodyRef,
-      queryInputBodyProps,
-      valueSelectorProps
-    } = useQueryInput(props, externalRef);
-    return /* @__PURE__ */ jsxs("div", {
-      className: clsx(withBaseName(), className),
-      onBlur: queryInputProps.onBlur,
-      onFocus: queryInputProps.onFocus,
-      "data-testid": "query-input",
-      ...restProps,
-      children: [
-        /* @__PURE__ */ jsx(QueryInputBody, {
-          ref: queryInputBodyRef,
-          ...queryInputBodyProps,
-          showCategory
-        }),
-        /* @__PURE__ */ jsx(ValueSelector, {
-          ...valueSelectorProps
-        })
-      ]
-    });
-  }
-);
-
-export { QueryInput };
-//# sourceMappingURL=QueryInput.js.map

package/dist-es/packages/lab/src/query-input/QueryInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"QueryInput.js","sources":["../src/query-input/QueryInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { QueryInputBody, ValueSelector } from \"./internal\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { BooleanOperator, useQueryInput } from \"./useQueryInput\";\n\nimport \"./QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInput\");\n\nexport interface QueryInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  disabled?: boolean;\n  categories: QueryInputCategory[];\n  selectedItems?: QueryInputItem[];\n  onChange?: (items: QueryInputItem[]) => void;\n  defaultSelectedItems?: QueryInputItem[];\n  showCategory?: boolean;\n  autoClose?: boolean;\n  displayedItemCount?: number;\n  booleanOperator?: BooleanOperator;\n  onBooleanOperatorChange?: (newOperator: BooleanOperator) => void;\n  defaultBooleanOperator?: BooleanOperator;\n}\n\nexport const QueryInput = forwardRef<HTMLDivElement, QueryInputProps>(\n  function QueryInput(props, externalRef) {\n    const {\n      disabled,\n      categories,\n      selectedItems,\n      onChange,\n      defaultSelectedItems,\n      showCategory,\n      autoClose,\n      displayedItemCount,\n      booleanOperator,\n      onBooleanOperatorChange,\n      defaultBooleanOperator,\n      className,\n      ...restProps\n    } = props;\n\n    const {\n      queryInputProps,\n      queryInputBodyRef,\n      queryInputBodyProps,\n      valueSelectorProps,\n    } = useQueryInput(props, externalRef);\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        onBlur={queryInputProps.onBlur}\n        onFocus={queryInputProps.onFocus}\n        data-testid=\"query-input\"\n        {...restProps}\n      >\n        <QueryInputBody\n          ref={queryInputBodyRef}\n          {...queryInputBodyProps}\n          showCategory={showCategory}\n        />\n        <ValueSelector {...valueSelectorProps} />\n      </div>\n    );\n  }\n);\n"],"names":["QueryInput"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,WAAa,EAAA;AACtC,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAA;AAAA,MACA,oBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,kBAAA;AAAA,MACA,eAAA;AAAA,MACA,uBAAA;AAAA,MACA,sBAAA;AAAA,MACA,SAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,mBAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,aAAc,CAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAEpC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,QAAQ,eAAgB,CAAA,MAAA;AAAA,MACxB,SAAS,eAAgB,CAAA,OAAA;AAAA,MACzB,aAAY,EAAA,aAAA;AAAA,MACX,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,UACC,GAAK,EAAA,iBAAA;AAAA,UACJ,GAAG,mBAAA;AAAA,UACJ,YAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UAAe,GAAG,kBAAA;AAAA,SAAoB,CAAA;AAAA,OAAA;AAAA,KACzC,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/query-input/internal/CategoryList.js

@@ -1,76 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useCallback } from 'react';
-import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import '../../list/Highlighter.js';
-import '../../list/ListItem.js';
-import { List } from '../../list/List.js';
-import '../../common-hooks/collectionProvider.js';
-import '../../common-hooks/keyUtils.js';
-import '../../utils/useFloatingUI.js';
-import '../../responsive/useResizeObserver.js';
-import '../../list/VirtualizedList.js';
-import { CategoryListItem } from './CategoryListItem.js';
-import { CategoryListContext } from './CategoryListContext.js';
-
-const withBaseName = makePrefixer("saltCategoryList");
-const getCategoryLabel = (category) => category.name;
-function CategoryList(props) {
-  const {
-    categories,
-    rootWidth,
-    onCategorySelect,
-    highlightedCategoryIndex,
-    setHighlightedCategoryIndex
-  } = props;
-  const measureRef = useRef(null);
-  const [measuredCategories, setMeasuredCategories] = useState([]);
-  const [contextValue, setContextValue] = useState({
-    width: 0
-  });
-  useIsomorphicLayoutEffect(() => {
-    setTimeout(() => {
-      if (measureRef.current) {
-        const width = measureRef.current.offsetWidth;
-        setMeasuredCategories(categories);
-        setContextValue({
-          width
-        });
-      }
-    }, 0);
-  }, [categories, setMeasuredCategories, setContextValue]);
-  const onSelect = useCallback(
-    (_, item) => {
-      onCategorySelect(item);
-    },
-    [onCategorySelect]
-  );
-  const isMeasuring = measuredCategories !== categories;
-  if (isMeasuring) {
-    return /* @__PURE__ */ jsx("div", {
-      ref: measureRef,
-      className: withBaseName("categoryWidthMeasure"),
-      children: categories.map((c, i) => {
-        return /* @__PURE__ */ jsx("div", {
-          className: withBaseName("category"),
-          children: c.name
-        }, i);
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(CategoryListContext.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsx(List, {
-      ListItem: CategoryListItem,
-      "data-testid": "category-list",
-      highlightedIndex: highlightedCategoryIndex,
-      itemToString: getCategoryLabel,
-      onHighlight: setHighlightedCategoryIndex,
-      onSelect,
-      source: categories,
-      width: rootWidth
-    })
-  });
-}
-
-export { CategoryList };
-//# sourceMappingURL=CategoryList.js.map

package/dist-es/packages/lab/src/query-input/internal/CategoryList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CategoryList.js","sources":["../src/query-input/internal/CategoryList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useRef, useState } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { SelectHandler } from \"../../common-hooks\";\nimport { List } from \"../../list\";\nimport { CategoryListItem } from \"./CategoryListItem\";\nimport { CategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryList\");\n\nexport interface CategoryListProps {\n  categories: QueryInputCategory[];\n  rootWidth: number;\n  onCategorySelect: (category: QueryInputCategory | null) => void;\n  highlightedCategoryIndex?: number;\n  setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n}\n\nconst getCategoryLabel = (category: QueryInputCategory) => category.name;\n\nexport function CategoryList(props: CategoryListProps) {\n  const {\n    categories,\n    rootWidth,\n    onCategorySelect,\n    highlightedCategoryIndex,\n    setHighlightedCategoryIndex,\n  } = props;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [measuredCategories, setMeasuredCategories] = useState<\n    QueryInputCategory[]\n  >([]);\n  const [contextValue, setContextValue] = useState<CategoryListContext>({\n    width: 0,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    setTimeout(() => {\n      if (measureRef.current) {\n        const width = measureRef.current.offsetWidth;\n        setMeasuredCategories(categories);\n        setContextValue({\n          width,\n        });\n      }\n    }, 0);\n  }, [categories, setMeasuredCategories, setContextValue]);\n\n  const onSelect: SelectHandler<QueryInputCategory> = useCallback(\n    (_, item) => {\n      onCategorySelect(item);\n    },\n    [onCategorySelect]\n  );\n\n  const isMeasuring = measuredCategories !== categories;\n\n  if (isMeasuring) {\n    return (\n      <div ref={measureRef} className={withBaseName(\"categoryWidthMeasure\")}>\n        {categories.map((c, i) => {\n          return (\n            <div key={i} className={withBaseName(\"category\")}>\n              {c.name}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <CategoryListContext.Provider value={contextValue}>\n      <List<QueryInputCategory>\n        ListItem={CategoryListItem}\n        data-testid=\"category-list\"\n        highlightedIndex={highlightedCategoryIndex}\n        itemToString={getCategoryLabel}\n        onHighlight={setHighlightedCategoryIndex}\n        onSelect={onSelect}\n        source={categories}\n        width={rootWidth}\n      />\n    </CategoryListContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAS,CAAA,IAAA,CAAA;AAE7D,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAA,QAAA,CAElD,EAAE,CAAA,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAA8B,CAAA;AAAA,IACpE,KAAO,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,WAAW,OAAQ,CAAA,WAAA,CAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA,CAAA;AAChC,QAAgB,eAAA,CAAA;AAAA,UACd,KAAA;AAAA,SACD,CAAA,CAAA;AAAA,OACH;AAAA,OACC,CAAC,CAAA,CAAA;AAAA,GACH,EAAA,CAAC,UAAY,EAAA,qBAAA,EAAuB,eAAe,CAAC,CAAA,CAAA;AAEvD,EAAA,MAAM,QAA8C,GAAA,WAAA;AAAA,IAClD,CAAC,GAAG,IAAS,KAAA;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAuB,KAAA,UAAA,CAAA;AAE3C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,UAAA;AAAA,MAAY,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,MACjE,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACxB,QAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,UAAY,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAC5C,QAAE,EAAA,CAAA,CAAA,IAAA;AAAA,SAAA,EADK,CAEV,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAoB,QAApB,EAAA;AAAA,IAA6B,KAAO,EAAA,YAAA;AAAA,IACnC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAU,EAAA,gBAAA;AAAA,MACV,aAAY,EAAA,eAAA;AAAA,MACZ,gBAAkB,EAAA,wBAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,WAAa,EAAA,2BAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,KAAO,EAAA,SAAA;AAAA,KACT,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}