@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.27

package/dist-es/navigation-item/NavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <ConditionalWrapper\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive && level !== 0,\n              [withBaseName(\"nested\")]: level !== 0,\n              [withBaseName(\"rootItem\")]: level === 0,\n              [withBaseName(\"expandButton\")]: parent,\n            },\n            withBaseName(orientation)\n          )}\n          parent={parent}\n          expanded={expanded}\n          onExpand={onExpand}\n          active={active}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent && (\n            <ExpansionIcon\n              expanded={expanded}\n              orientation={orientation}\n              className={withBaseName(\"expandIcon\")}\n            />\n          )}\n        </ConditionalWrapper>\n      </div>\n    );\n  }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAU,KAAA,CAAA;AAAA,YACtD,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACpC,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACtC,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,MAAA;AAAA,WAClC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,WACtC,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <ConditionalWrapper\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation)\n          )}\n          parent={parent}\n          expanded={expanded}\n          onExpand={onExpand}\n          active={active}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent && (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          )}\n        </ConditionalWrapper>\n      </div>\n    );\n  }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,WACxC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,QAAA;AAAA,YAAoB,WAAA;AAAA,WAA0B,CAAA;AAAA,SAAA;AAAA,OAEjE,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/option/Option.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  margin-top: var(--salt-size-border);\n  margin-bottom: var(--salt-size-border);\n  border-top: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  background: var(--salt-selectable-background-selected);\n  border-color: var(--salt-selectable-borderColor-selected);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Option.css.js.map

package/dist-es/option/Option.css.js.map

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

package/dist-es/option/Option.js

@@ -0,0 +1,109 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useEffect, Children } from 'react';
+import { makePrefixer, useId, useForkRef, Checkbox } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useListControlContext } from '../list-control/ListControlContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Option.css.js';
+
+const withBaseName = makePrefixer("saltOption");
+function getOptionText(textValue, children) {
+  if (textValue) {
+    return textValue;
+  }
+  let textString = "";
+  Children.forEach(children, (child) => {
+    if (typeof child === "string") {
+      textString += child;
+    }
+  });
+  return textString;
+}
+const Option = forwardRef(function Option2(props, ref) {
+  const {
+    className,
+    children,
+    disabled,
+    onClick,
+    id: idProp,
+    value,
+    textValue,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-option",
+    css: css_248z,
+    window: targetWindow
+  });
+  const optionRef = useRef(null);
+  const id = useId(idProp);
+  const optionText = getOptionText(textValue, children);
+  const {
+    setActive,
+    activeState,
+    multiselect,
+    setOpen,
+    select,
+    register,
+    selectedState,
+    focusVisibleState
+  } = useListControlContext();
+  const selected = selectedState.includes(value);
+  const active = (activeState == null ? void 0 : activeState.id) === id;
+  const optionValue = useMemo(
+    () => ({
+      id: String(id),
+      disabled: Boolean(disabled),
+      value,
+      text: optionText
+    }),
+    [id, disabled, value, optionText]
+  );
+  const handleClick = (event) => {
+    if (disabled || id == void 0) {
+      return;
+    }
+    setActive(optionValue);
+    select(event, optionValue);
+    if (!multiselect) {
+      setOpen(event, false);
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  useEffect(() => {
+    if (id && optionRef.current) {
+      return register(optionValue, optionRef.current);
+    }
+  }, [optionValue, id, register]);
+  const handleRef = useForkRef(optionRef, ref);
+  return /* @__PURE__ */ jsxs("div", {
+    "aria-disabled": disabled ? "true" : void 0,
+    "aria-selected": selected,
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("active")]: active,
+        [withBaseName("focusVisible")]: focusVisibleState && active
+      },
+      className
+    ),
+    ref: handleRef,
+    role: "option",
+    id,
+    onClick: handleClick,
+    ...rest,
+    children: [
+      multiselect && /* @__PURE__ */ jsx(Checkbox, {
+        checked: selected,
+        "aria-hidden": "true",
+        tabIndex: -1
+      }),
+      children
+    ]
+  });
+});
+
+export { Option };
+//# sourceMappingURL=Option.js.map

package/dist-es/option/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  useRef,\n  useEffect,\n  useMemo,\n  Children,\n} from \"react\";\nimport { Checkbox, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  OptionValue,\n  useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the option.\n   */\n  value: string;\n  /**\n   * The text value of the option. If not provided, the text value will be inferred from the children.\n   */\n  textValue?: string;\n  /**\n   * The content of the option.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nfunction getOptionText(textValue: string | undefined, children: ReactNode) {\n  if (textValue) {\n    return textValue;\n  }\n\n  let textString = \"\";\n  Children.forEach(children, (child) => {\n    if (typeof child === \"string\") {\n      textString += child;\n    }\n  });\n\n  return textString;\n}\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(function Option(\n  props,\n  ref\n) {\n  const {\n    className,\n    children,\n    disabled,\n    onClick,\n    id: idProp,\n    value,\n    textValue,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-option\",\n    css: optionCss,\n    window: targetWindow,\n  });\n\n  const optionRef = useRef(null);\n  const id = useId(idProp);\n  const optionText = getOptionText(textValue, children);\n\n  const {\n    setActive,\n    activeState,\n    multiselect,\n    setOpen,\n    select,\n    register,\n    selectedState,\n    focusVisibleState,\n  } = useListControlContext();\n\n  const selected = selectedState.includes(value);\n  const active = activeState?.id === id;\n\n  const optionValue: OptionValue = useMemo(\n    () => ({\n      id: String(id),\n      disabled: Boolean(disabled),\n      value,\n      text: optionText,\n    }),\n    [id, disabled, value, optionText]\n  );\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled || id == undefined) {\n      return;\n    }\n\n    // set active descendent\n    setActive(optionValue);\n\n    // handle selection\n    select(event, optionValue);\n\n    // handle close if multi-select\n    if (!multiselect) {\n      setOpen(event, false);\n    }\n\n    onClick?.(event);\n  };\n\n  useEffect(() => {\n    if (id && optionRef.current) {\n      return register(optionValue, optionRef.current);\n    }\n  }, [optionValue, id, register]);\n\n  const handleRef = useForkRef(optionRef, ref);\n\n  return (\n    <div\n      aria-disabled={disabled ? \"true\" : undefined}\n      aria-selected={selected}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"active\")]: active,\n          [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n        },\n        className\n      )}\n      ref={handleRef}\n      role=\"option\"\n      id={id}\n      onClick={handleClick}\n      {...rest}\n    >\n      {multiselect && (\n        <Checkbox checked={selected} aria-hidden=\"true\" tabIndex={-1} />\n      )}\n      {children}\n    </div>\n  );\n});\n"],"names":["Option","optionCss"],"mappings":"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"}

package/dist-es/option/OptionGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOptionGroup-label {\n  background: var(--salt-container-primary-background);\n  color: var(--salt-text-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  align-items: center;\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OptionGroup.css.js.map

package/dist-es/option/OptionGroup.css.js.map

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

package/dist-es/option/OptionGroup.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './OptionGroup.css.js';
+
+const withBaseName = makePrefixer("saltOptionGroup");
+const OptionGroup = forwardRef(
+  function OptionGroup2(props, ref) {
+    const { className, children, label, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-option-group",
+      css: css_248z,
+      window: targetWindow
+    });
+    const labelId = useId();
+    return /* @__PURE__ */ jsxs("div", {
+      "aria-labelledby": labelId,
+      className: clsx(withBaseName(), className),
+      role: "group",
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          "aria-hidden": true,
+          className: withBaseName("label"),
+          id: labelId,
+          children: label
+        }),
+        children
+      ]
+    });
+  }
+);
+
+export { OptionGroup };
+//# sourceMappingURL=OptionGroup.js.map

package/dist-es/option/OptionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGroup.js","sources":["../src/option/OptionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionGroupCss from \"./OptionGroup.css\";\n\nexport interface OptionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The label of the option group.\n   */\n  label?: string;\n  /**\n   * Options to be rendered inside the option group.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOptionGroup\");\nexport const OptionGroup = forwardRef<HTMLDivElement, OptionGroupProps>(\n  function OptionGroup(props, ref) {\n    const { className, children, label, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-option-group\",\n      css: optionGroupCss,\n      window: targetWindow,\n    });\n\n    const labelId = useId();\n\n    return (\n      <div\n        aria-labelledby={labelId}\n        className={clsx(withBaseName(), className)}\n        role=\"group\"\n        ref={ref}\n        {...rest}\n      >\n        <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n          {label}\n        </div>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["OptionGroup","optionGroupCss"],"mappings":";;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAC5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,EAAA,GAAU,MAAS,GAAA,KAAA,CAAA;AAEhD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AAEtB,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,iBAAiB,EAAA,OAAA;AAAA,MACjB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,OAAA;AAAA,MACL,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAG,EAAI,EAAA,OAAA;AAAA,UACpD,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,QAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/option/OptionList.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-popout);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OptionList.css.js.map

package/dist-es/option/OptionList.css.js.map

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

package/dist-es/option/OptionList.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './OptionList.css.js';
+
+const withBaseName = makePrefixer("saltOptionList");
+const OptionList = forwardRef(
+  function OptionList2(props, ref) {
+    const { children, className, collapsed, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-option-list",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      role: "listbox",
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("collapsed")]: collapsed
+        },
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { OptionList };
+//# sourceMappingURL=OptionList.js.map

package/dist-es/option/OptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.js","sources":["../src/option/OptionList.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionListCss from \"./OptionList.css\";\n\nexport interface OptionListProps extends ComponentPropsWithoutRef<\"div\"> {\n  collapsed?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltOptionList\");\n\nexport const OptionList = forwardRef<HTMLDivElement, OptionListProps>(\n  function OptionList(props, ref) {\n    const { children, className, collapsed, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-option-list\",\n      css: optionListCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        role=\"listbox\"\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"collapsed\")]: collapsed,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["OptionList","optionListCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,SAAA,EAAA,GAAc,MAAS,GAAA,KAAA,CAAA;AAEpD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,IAAK,EAAA,SAAA;AAAA,MACL,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,SAC/B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/scrim/Scrim.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltScrim {\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  bottom: 0;\n  height: 100%;\n  display: flex;\n  z-index: 1199;\n  position: fixed;\n  align-items: center;\n  justify-content: center;\n  background: var(--saltScrim-background, var(--salt-overlayable-background));\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n  outline: none;\n}\n\n/* Style applied to the root element when containerFix={true} */\n.saltScrim-containerFix {\n  position: absolute;\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltScrim {\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  bottom: 0;\n  height: 100%;\n  display: flex;\n  z-index: calc(var(--salt-zIndex-drawer) - 1);\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  background: var(--saltScrim-background, var(--salt-overlayable-background));\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n  outline: none;\n}\n\n/* Style applied to the root element when fixed={true} */\n.saltScrim-fixed {\n  position: fixed;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Scrim.css.js.map

package/dist-es/scrim/Scrim.js

@@ -1,160 +1,34 @@
 import { jsx } from 'react/jsx-runtime';
-import { hideOthers } from 'aria-hidden';
 import { clsx } from 'clsx';
-import noScroll from 'no-scroll';
-import { forwardRef, useRef, useEffect } from 'react';
-import { makePrefixer, useForkRef, useId, ownerDocument } from '@salt-ds/core';
-import { FocusManager } from '../focus-manager/FocusManager.js';
-import { preventFocusOthers } from './internal/PreventFocus.js';
-import { ScrimContext } from './ScrimContext.js';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './Scrim.css.js';
 
-const scrims = /* @__PURE__ */ new Set();
-const getDefaultParent = () => typeof document !== "undefined" ? document.body : null;
-const noop = () => {
-};
 const withBaseName = makePrefixer("saltScrim");
-function preventSelection(parent = getDefaultParent()) {
-  if (parent) {
-    const previous = parent.style.userSelect;
-    parent.style.userSelect = "none";
-    return () => {
-      parent.style.userSelect = previous;
-    };
-  }
-  return noop;
-}
-const defaultSelector = `
-[tabindex="0"],
-a:not([tabindex="-1"]),
-area:not([tabindex="-1"]),
-details:not([tabindex="-1"]),
-iframe:not([tabindex="-1"]),
-select:not([tabindex="-1"]),
-textarea:not([tabindex="-1"]),
-button:not([tabindex="-1"]),
-input:not([tabindex="-1"])
-`;
-const Scrim = forwardRef(function Scrim2({
-  autoFocusRef,
-  closeWithEscape = false,
-  className,
-  children,
-  disableAutoFocus,
-  disableFocusTrap,
-  disableReturnFocus,
-  fallbackFocusRef,
-  onBackDropClick,
-  onClose,
-  open,
-  containerRef,
-  enableContainerMode = false,
-  returnFocusOptions,
-  tabEnabledSelectors = defaultSelector,
-  zIndex,
-  ...rest
-}, ref) {
+const Scrim = forwardRef(function Scrim2({ className, children, fixed = false, open = true, ...rest }, ref) {
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-scrim",
     css: css_248z,
     window: targetWindow
   });
-  const scrimRef = useRef(null);
-  const setWrapperRef = useForkRef(ref, scrimRef);
-  const undoAria = useRef(noop);
-  const undoSelection = useRef(noop);
-  const undoTabIndex = useRef(noop);
-  const scrimId = useId();
-  useEffect(() => {
-    if (open && !(containerRef == null ? void 0 : containerRef.current)) {
-      scrims.add(scrimId);
-      noScroll.on();
-    }
-    return () => {
-      if (open) {
-        scrims.delete(scrimId);
-        if (scrims.size === 0) {
-          noScroll.off();
-        }
-      }
-    };
-  }, [open, containerRef, scrimId]);
-  useEffect(() => {
-    if (open) {
-      const parent = (containerRef == null ? void 0 : containerRef.current) || void 0;
-      if (scrimRef.current) {
-        undoAria.current = hideOthers(scrimRef.current, parent);
-      }
-    }
-    return () => {
-      var _a;
-      (_a = undoAria.current) == null ? void 0 : _a.call(undoAria);
-    };
-  }, [open, containerRef]);
-  useEffect(() => {
-    if (open) {
-      const parent = containerRef == null ? void 0 : containerRef.current;
-      if (parent) {
-        undoSelection.current = preventSelection(parent);
-        undoTabIndex.current = preventFocusOthers(
-          scrimRef.current,
-          tabEnabledSelectors,
-          parent
-        );
-      }
-    }
-    return () => {
-      var _a, _b;
-      (_a = undoSelection.current) == null ? void 0 : _a.call(undoSelection);
-      (_b = undoTabIndex.current) == null ? void 0 : _b.call(undoTabIndex);
-    };
-  }, [open, containerRef, tabEnabledSelectors]);
-  useEffect(() => {
-    if (closeWithEscape && open && scrimRef.current) {
-      const escapeHandler = (event) => {
-        if (event.key === "Escape") {
-          onClose == null ? void 0 : onClose();
-        }
-      };
-      const doc = ownerDocument(scrimRef.current);
-      doc.addEventListener("keydown", escapeHandler);
-      return () => {
-        doc.removeEventListener("keydown", escapeHandler);
-      };
-    }
-  }, [closeWithEscape, onClose, open]);
   if (!open) {
     return null;
   }
   return /* @__PURE__ */ jsx("div", {
-    "aria-modal": !enableContainerMode,
-    className: clsx(className, withBaseName(), {
-      [withBaseName("containerFix")]: enableContainerMode
-    }),
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("fixed")]: fixed
+      },
+      className
+    ),
     "data-testid": "scrim",
-    onClick: onBackDropClick,
-    ref: setWrapperRef,
-    role: "dialog",
-    style: {
-      zIndex
-    },
+    ref,
     ...rest,
-    children: /* @__PURE__ */ jsx(FocusManager, {
-      active: open,
-      autoFocusRef,
-      disableAutoFocus,
-      disableFocusTrap: disableFocusTrap || !!enableContainerMode,
-      disableReturnFocus,
-      returnFocusOptions,
-      tabEnabledSelectors,
-      children: /* @__PURE__ */ jsx(ScrimContext.Provider, {
-        value: onClose,
-        children
-      })
-    })
+    children
   });
 });
 

package/dist-es/scrim/Scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { hideOthers } from \"aria-hidden\";\nimport { clsx } from \"clsx\";\nimport noScroll from \"no-scroll\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  RefObject,\n  SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { makePrefixer, ownerDocument, useForkRef, useId } from \"@salt-ds/core\";\nimport { FocusManager, FocusManagerProps } from \"../focus-manager\";\nimport { preventFocusOthers } from \"./internal/PreventFocus\";\nimport { ScrimContext } from \"./ScrimContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst scrims = new Set();\n\nconst getDefaultParent = () =>\n  typeof document !== \"undefined\" ? document.body : null;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nfunction preventSelection(parent = getDefaultParent()): () => void {\n  if (parent) {\n    const previous = parent.style.userSelect;\n    parent.style.userSelect = \"none\";\n\n    return () => {\n      parent.style.userSelect = previous;\n    };\n  }\n  return noop;\n}\n\nconst defaultSelector = `\n[tabindex=\"0\"],\na:not([tabindex=\"-1\"]),\narea:not([tabindex=\"-1\"]),\ndetails:not([tabindex=\"-1\"]),\niframe:not([tabindex=\"-1\"]),\nselect:not([tabindex=\"-1\"]),\ntextarea:not([tabindex=\"-1\"]),\nbutton:not([tabindex=\"-1\"]),\ninput:not([tabindex=\"-1\"])\n`;\n\nexport interface ScrimProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Ref of the element that automatically receives focus when the Scrim is opened.\n   */\n  autoFocusRef?: FocusManagerProps[\"autoFocusRef\"];\n  /**\n   * Prop to enable escape key to close scrim.\n   * The default value of this props is false\n   */\n  closeWithEscape?: boolean;\n  /**\n   * If `true`, the trap focus will not automatically shift focus to itself when it opens, and\n   * replace it to the last focused element when it closes.\n   */\n  disableAutoFocus?: boolean;\n  /**\n   * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.\n   */\n  disableFocusTrap?: boolean;\n  /**\n   * If `true`, the trap focus will not restore focus to previously focused element once\n   * trap focus is hidden.\n   */\n  disableReturnFocus?: boolean;\n  /**\n   * By default, an error will be thrown if the focus trap contains no elements in its tab order.\n   * With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found.\n   * For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements.\n   */\n  fallbackFocusRef?: FocusManagerProps[\"fallbackFocusRef\"];\n  /**\n   * The handler for backdrop click on Scrim.\n   */\n  onBackDropClick?: (e: SyntheticEvent) => void;\n  /**\n   * The handler for onClose of Scrim.\n   */\n  onClose?: () => void;\n  /**\n   * To maintain open and close of the scrim.\n   */\n  open?: boolean;\n  /**\n   * Set to true to enable the container use case. If true the Scrim will be bound to a container ref you pass via the `parentRef` prop.\n   * Default value is false, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  enableContainerMode?: boolean;\n  /**\n   * Prop necessary to enable container use case. Pass the parent element ref that you want Scrim to be bound to.\n   * Default value is undefined, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  containerRef?: RefObject<HTMLElement>;\n  /**\n   * Options object to pass to the `focus()` method that is called on the previously focused element when Scrim is closed.\n   */\n  returnFocusOptions?: FocusManagerProps[\"returnFocusOptions\"];\n  /**\n   * comma separated string of query selectors which may need to be overridden for edge cases.\n   */\n  tabEnabledSelectors?: string;\n  /**\n   * Prop to pass z-index for Scrim.\n   */\n  zIndex?: number;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  {\n    autoFocusRef,\n    closeWithEscape = false,\n    className,\n    children,\n    disableAutoFocus,\n    disableFocusTrap,\n    disableReturnFocus,\n    fallbackFocusRef,\n    onBackDropClick,\n    onClose,\n    open,\n    containerRef,\n    enableContainerMode = false,\n    returnFocusOptions,\n    tabEnabledSelectors = defaultSelector,\n    zIndex,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrim\",\n    css: scrimCss,\n    window: targetWindow,\n  });\n\n  const scrimRef = useRef<HTMLDivElement>(null);\n  const setWrapperRef = useForkRef(ref, scrimRef);\n  const undoAria = useRef(noop);\n  const undoSelection = useRef(noop);\n  const undoTabIndex = useRef(noop);\n  const scrimId = useId();\n\n  useEffect(() => {\n    if (open && !containerRef?.current) {\n      scrims.add(scrimId);\n      noScroll.on();\n    }\n\n    return () => {\n      if (open) {\n        scrims.delete(scrimId);\n        if (scrims.size === 0) {\n          noScroll.off();\n        }\n      }\n    };\n  }, [open, containerRef, scrimId]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current || undefined;\n\n      if (scrimRef.current) {\n        undoAria.current = hideOthers(scrimRef.current, parent);\n      }\n    }\n\n    return () => {\n      undoAria.current?.();\n    };\n  }, [open, containerRef]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current;\n\n      if (parent) {\n        undoSelection.current = preventSelection(parent);\n        undoTabIndex.current = preventFocusOthers(\n          scrimRef.current,\n          tabEnabledSelectors,\n          parent\n        );\n      }\n    }\n\n    return () => {\n      undoSelection.current?.();\n      undoTabIndex.current?.();\n    };\n  }, [open, containerRef, tabEnabledSelectors]);\n\n  useEffect(() => {\n    if (closeWithEscape && open && scrimRef.current) {\n      const escapeHandler = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") {\n          onClose?.();\n        }\n      };\n\n      const doc = ownerDocument(scrimRef.current);\n      doc.addEventListener(\"keydown\", escapeHandler);\n\n      return () => {\n        doc.removeEventListener(\"keydown\", escapeHandler);\n      };\n    }\n  }, [closeWithEscape, onClose, open]);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-modal={!enableContainerMode}\n      className={clsx(className, withBaseName(), {\n        [withBaseName(\"containerFix\")]: enableContainerMode,\n      })}\n      data-testid=\"scrim\"\n      onClick={onBackDropClick}\n      ref={setWrapperRef}\n      role=\"dialog\"\n      style={{\n        zIndex,\n      }}\n      {...rest}\n    >\n      <FocusManager\n        active={open}\n        autoFocusRef={autoFocusRef}\n        disableAutoFocus={disableAutoFocus}\n        disableFocusTrap={disableFocusTrap || !!enableContainerMode}\n        disableReturnFocus={disableReturnFocus}\n        returnFocusOptions={returnFocusOptions}\n        tabEnabledSelectors={tabEnabledSelectors}\n      >\n        <ScrimContext.Provider value={onClose}>\n          {children}\n        </ScrimContext.Provider>\n      </FocusManager>\n    </div>\n  );\n});\n"],"names":["Scrim","scrimCss"],"mappings":"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"}
+{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true` the scrim is bound to the document viewport.\n   * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n   */\n  fixed?: boolean;\n  /**\n   * If `true` the scrim is shown.\n   */\n  open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  { className, children, fixed = false, open = true, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrim\",\n    css: scrimCss,\n    window: targetWindow,\n  });\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fixed\")]: fixed,\n        },\n        className\n      )}\n      data-testid=\"scrim\"\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["Scrim","scrimCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tokenized-input/internal/InputPill.js

@@ -1,11 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
-import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { makePrefixer, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
 import { getWidth } from './useWidth.js';
-import { Pill } from '../../pill/Pill.js';
-import '../../pill/ClosablePill.js';
-import '../../pill/SelectablePill.js';
+import { CloseIcon } from '@salt-ds/icons';
 
 const withBaseName = makePrefixer("saltInputPill");
 const InputPill = memo(function InputPill2(props) {
@@ -16,10 +14,10 @@ const InputPill = memo(function InputPill2(props) {
     hidden,
     highlighted,
     index,
+    label,
     lastVisible,
     onDelete,
     pillsRef,
-    tabIndex: tabIndexProp,
     ...restProps
   } = props;
   const ref = useRef(null);
@@ -38,7 +36,7 @@ const InputPill = memo(function InputPill2(props) {
   const handleDelete = () => {
     onDelete == null ? void 0 : onDelete(index);
   };
-  return /* @__PURE__ */ jsx(Pill, {
+  return /* @__PURE__ */ jsxs(Pill, {
     className: clsx(
       withBaseName(),
       {
@@ -49,12 +47,18 @@ const InputPill = memo(function InputPill2(props) {
       className
     ),
     disabled,
-    onDelete: isRemovable ? handleDelete : void 0,
+    tabIndex: -1,
+    onClick: isRemovable ? handleDelete : void 0,
     ref,
     role: "option",
-    tabIndex: void 0,
-    variant: isRemovable ? "closable" : "basic",
-    ...restProps
+    ...restProps,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: withBaseName("label"),
+        children: label
+      }),
+      isRemovable && /* @__PURE__ */ jsx(CloseIcon, {})
+    ]
   });
 });
 

package/dist-es/tokenized-input/internal/InputPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { memo, MutableRefObject, useRef } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { Pill, PillProps } from \"../../pill\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = Omit<\n  PillProps<\"basic\" | \"closable\">,\n  \"variant\" | \"onDelete\" | \"clickable\"\n> & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<{ [index: number]: number | undefined }>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    tabIndex: tabIndexProp,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className\n      )}\n      disabled={disabled}\n      onDelete={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      tabIndex={undefined}\n      variant={isRemovable ? \"closable\" : \"basic\"}\n      {...restProps}\n    />\n  );\n});\n"],"names":["InputPill"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAgC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACP,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAA8B,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEL,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,UAAa,GAAA,OAAA;AAAA,IACnC,GAAG,SAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { memo, MutableRefObject, useRef } from \"react\";\nimport {\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n  Pill,\n  PillProps,\n} from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<Record<number, number | undefined>>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Pill label.\n   */\n  label?: string;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    label,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLButtonElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className\n      )}\n      disabled={disabled}\n      tabIndex={-1}\n      onClick={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      {...restProps}\n    >\n      <span className={withBaseName(\"label\")}>{label}</span>\n      {isRemovable && <CloseIcon />}\n    </Pill>\n  );\n});\n"],"names":["InputPill"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAiC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACtC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEJ,GAAG,SAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAI,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7B,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tokenized-input-next/TokenizedInputNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Style applied to the root element */\n.saltTokenizedInputNext-container {\n  width: 100%;\n}\n.saltTokenizedInputNext {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);\n  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);\n  --tokenizedInput-border: none;\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--tokenizedInput-background);\n  border: var(--tokenizedInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: 100%;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Style applied on hover */\n.saltTokenizedInputNext:hover {\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--tokenizedInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltTokenizedInputNext:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--tokenizedInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltTokenizedInputNext-primary {\n  --tokenizedInput-background: var(--salt-editable-primary-background);\n  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);\n  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltTokenizedInputNext-secondary {\n  --tokenizedInput-background: var(--salt-editable-secondary-background);\n  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltTokenizedInputNext-error,\n.saltTokenizedInputNext-error:hover {\n  --tokenizedInput-background: var(--salt-status-error-background);\n  --tokenizedInput-background-active: var(--salt-status-error-background);\n  --tokenizedInput-background-hover: var(--salt-status-error-background);\n  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltTokenizedInputNext-warning,\n.saltTokenizedInputNext-warning:hover {\n  --tokenizedInput-background: var(--salt-status-warning-background);\n  --tokenizedInput-background-active: var(--salt-status-warning-background);\n  --tokenizedInput-background-hover: var(--salt-status-warning-background);\n  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltTokenizedInputNext-success,\n.saltTokenizedInputNext-success:hover {\n  --tokenizedInput-background: var(--salt-status-success-background);\n  --tokenizedInput-background-active: var(--salt-status-success-background);\n  --tokenizedInput-background-hover: var(--salt-status-success-background);\n  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltTokenizedInputNext-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  flex-basis: 0;\n  height: var(--salt-text-lineHeight);\n  font: inherit;\n  letter-spacing: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n  min-width: 1px; /* requires a min width to be visible */\n}\n.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {\n  flex-grow: 1;\n  min-width: 4em; /* on expanded, use the same min-width as input*/\n}\n\n/* Style applied to placeholder */\n.saltTokenizedInputNext-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltTokenizedInputNext-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltTokenizedInputNext-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltTokenizedInputNext-focused {\n  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltTokenizedInputNext-readOnly,\n.saltTokenizedInputNext-readOnly:active,\n.saltTokenizedInputNext-readOnly:hover {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltTokenizedInputNext-disabled,\n.saltTokenizedInputNext-disabled:hover,\n.saltTokenizedInputNext-disabled:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltTokenizedInputNext-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltTokenizedInputNext.saltTokenizedInputNext-bordered {\n  --tokenizedInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltTokenizedInputNext-bordered:active,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n.saltTokenizedInputNext-statusAdornment {\n  margin-left: auto;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: auto;\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: 0;\n}\n\n.saltTokenizedInputNext .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {\n  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;\n}\n.saltTokenizedInputNext-hidden {\n  display: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TokenizedInputNext.css.js.map

package/dist-es/tokenized-input-next/TokenizedInputNext.css.js.map

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