@salt-ds/lab 1.0.0-alpha.90 → 1.0.0-alpha.92

package/dist-types/side-panel/SidePanel.d.ts

@@ -1,5 +1,4 @@
-import { FloatingFocusManager } from "@floating-ui/react";
-import { type ComponentProps, type ComponentPropsWithRef } from "react";
+import { type ComponentPropsWithRef, type RefObject } from "react";
 export interface SidePanelProps extends ComponentPropsWithRef<"div"> {
     /**
      * Disable the panel's own open/close animation.
@@ -15,9 +14,9 @@ export interface SidePanelProps extends ComponentPropsWithRef<"div"> {
     /**
      * Which element receives focus when the panel opens.
      * Pass a number for the tabbable element index (0 = first), or a ref to a specific element.
-     * Defaults to the side panel close button.
+     * Defaults to the first tabbable element inside the panel (close button if present).
      */
-    initialFocus?: ComponentProps<typeof FloatingFocusManager>["initialFocus"];
+    initialFocus?: number | RefObject<HTMLElement | null>;
     /**
      * The background color palette. Options are 'primary', 'secondary', 'tertiary' and 'none'.
      * @default "primary"

package/dist-types/side-panel/SidePanelCloseButton.d.ts

@@ -0,0 +1,2 @@
+import { type ButtonProps } from "@salt-ds/core";
+export declare const SidePanelCloseButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/side-panel/SidePanelContent.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef } from "react";
-export interface SidePanelContentProps extends ComponentPropsWithRef<"div"> {
-}
-export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<SidePanelContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SidePanelContentProps = ComponentPropsWithRef<"div">;
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/side-panel/SidePanelHeader.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef } from "react";
-export interface SidePanelHeaderProps extends ComponentPropsWithRef<"div"> {
-}
-export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<Omit<SidePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SidePanelHeaderProps = ComponentPropsWithRef<"div">;
+export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/side-panel/SidePanelTitle.d.ts

@@ -1,4 +1,3 @@
 import { type TextProps } from "@salt-ds/core";
-export interface SidePanelTitleProps extends TextProps<"div"> {
-}
+export type SidePanelTitleProps = TextProps<"div">;
 export declare const SidePanelTitle: import("react").ForwardRefExoticComponent<Omit<SidePanelTitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/side-panel/SidePanelTrigger.d.ts

@@ -1,5 +1,3 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from "react";
-export interface SidePanelTriggerProps extends ComponentPropsWithoutRef<"button"> {
-    children?: ReactNode;
-}
-export declare const SidePanelTrigger: import("react").ForwardRefExoticComponent<SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+import { type ComponentPropsWithoutRef } from "react";
+export type SidePanelTriggerProps = ComponentPropsWithoutRef<"button">;
+export declare const SidePanelTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/side-panel/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./SidePanel";
+export * from "./SidePanelCloseButton";
 export * from "./SidePanelContent";
 export * from "./SidePanelHeader";
 export * from "./SidePanelProvider";

package/dist-types/side-panel/internal/SidePanelContext.d.ts

@@ -43,6 +43,10 @@ export interface SidePanelContextValue {
      * so that SidePanel and SidePanelContent can use it for aria-labelledby.
      */
     setTitleId: Dispatch<SetStateAction<string | undefined>>;
+    /**
+     * Edge the panel is anchored to. Set by SidePanel for its own subtree.
+     */
+    position?: "right" | "left";
 }
 export declare const SidePanelContext: import("react").Context<SidePanelContextValue>;
 export declare function useSidePanelContext(): SidePanelContextValue;

package/dist-types/side-panel/internal/index.d.ts

@@ -1 +1,3 @@
 export { SidePanelContext, type SidePanelContextValue, useSidePanelContext, } from "./SidePanelContext";
+export * from "./useIsScrollable";
+export * from "./useSidePanelTabOrder";

package/dist-types/side-panel/internal/useIsScrollable.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useIsScrollable(ref: RefObject<HTMLElement>): boolean;

package/dist-types/side-panel/internal/useSidePanelTabOrder.d.ts

@@ -0,0 +1,7 @@
+interface UseSidePanelTabOrderProps {
+    floating: HTMLElement | null;
+    open: boolean;
+    reference: HTMLElement | null;
+}
+export declare function useSidePanelTabOrder(props: UseSidePanelTabOrderProps): void;
+export {};

package/dist-types/side-panel/useSidePanel.d.ts

@@ -1,3 +1,20 @@
+import type { ComponentPropsWithoutRef, MouseEvent, MutableRefObject, RefCallback } from "react";
+export interface SidePanelTriggerExtraProps {
+    /**
+     * Optional ref to forward alongside the focus-return registration.
+     */
+    ref?: RefCallback<HTMLElement | null> | MutableRefObject<HTMLElement | null> | null;
+    /**
+     * Click handler. Runs before the built-in toggle so consumers can
+     * preventDefault to skip the toggle.
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export type SidePanelTriggerPropsResult = ComponentPropsWithoutRef<"button"> & {
+    "aria-expanded": boolean;
+    "aria-controls": string | undefined;
+    ref: RefCallback<HTMLElement | null>;
+};
 export interface SidePanelValue {
     /**
      * Whether the side panel is currently open.
@@ -8,19 +25,28 @@ export interface SidePanelValue {
      */
     setOpen: (open: boolean) => void;
     /**
-     * Props getter for a single trigger element.
-     * Merges `aria-expanded`, `aria-controls`, a `ref` callback (to register
-     * the trigger for focus-return), and user-provided props.
-     * Best for the common case where one button toggles one panel.
+     * Props getter for a trigger element outside of `SidePanelTrigger`.
+     * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),
+     * and an `onClick` that toggles the panel.
+     *
+     * Spread the result onto a Button to get full trigger behavior:
+     * ```tsx
+     * <Button {...getTriggerProps()}>Toggle panel</Button>
+     * ```
+     *
+     * You can pass additional props which are merged in. If you provide your
+     * own `onClick`, it runs before the built-in toggle. If you provide your
+     * own `ref`, it is forwarded alongside the internal focus-return ref.
      *
      * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and
      * manage ARIA attributes yourself instead.
      */
-    getTriggerProps: (userProps?: Record<string, unknown>) => Record<string, unknown>;
+    getTriggerProps: (userProps?: SidePanelTriggerExtraProps) => SidePanelTriggerPropsResult;
     /**
      * Registers the element that should receive focus when the panel closes.
      * Use this in multi-trigger scenarios (e.g. table rows) where each trigger
-     * needs explicit control over which element is the reference.
+     * needs explicit control over which element is the reference. Pass `null`
+     * to clear the previously-registered trigger.
      */
     setTriggerRef: (element: HTMLElement | null) => void;
     /**

package/dist-types/tree/TreeContext.d.ts

@@ -1,4 +1,4 @@
-import { type Dispatch, type ReactNode, type SetStateAction, type SyntheticEvent } from "react";
+import { type Dispatch, type ReactNode, type Ref, type RefObject, type SetStateAction, type SyntheticEvent } from "react";
 import type { TreeModel, TreeNodeMeta } from "./useTree";
 export interface TreeContextValue {
     expandedState: Set<string>;
@@ -10,6 +10,8 @@ export interface TreeContextValue {
     selectedSet: Set<string>;
     /** Set selected state directly */
     setSelectedState: Dispatch<SetStateAction<string[]>>;
+    /** Set selected state without expanding selection through hidden descendants */
+    setVisibleSelectionState: (selected: string[]) => void;
     /** Select node */
     select: (event: SyntheticEvent, value: string) => void;
     /** Whether multiselect mode with checkboxes is enabled */
@@ -60,6 +62,10 @@ export interface TreeNodeContextValue {
     disabled: boolean;
     /** Node id for the li element */
     id: string;
+    /** Ref for the li element rendered by TreeNodeTrigger */
+    nodeRef: RefObject<HTMLLIElement>;
+    /** Callback ref that connects TreeNode's forwarded ref to the li element */
+    setNodeRef: Ref<HTMLLIElement> | null;
     /** Whether node is selected */
     selected: boolean;
     /** Whether node is in indeterminate state (partially selected children) */

package/dist-types/tree/treeModel.d.ts

@@ -0,0 +1,24 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface TreeNodeMeta {
+    value: string;
+    parentValue: string | undefined;
+    hasChildren: boolean;
+    disabled: boolean;
+}
+export interface TreeModel {
+    /** All nodes indexed by value */
+    nodes: Map<string, TreeNodeMeta>;
+    /** Ordered list of root node values */
+    rootValues: string[];
+    /** Maps parent value to ordered list of child values */
+    childrenOf: Map<string, string[]>;
+}
+interface TreeNodeElementProps {
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+export declare function isTreeNodeElement(child: ReactNode): child is ReactElement<TreeNodeElementProps>;
+export declare function flattenTreeNodeChildren(children: ReactNode): ReactNode[];
+export declare function buildTreeModel(children: ReactNode): TreeModel;
+export {};

package/dist-types/tree/useTree.d.ts

@@ -1,4 +1,6 @@
 import { type ReactNode, type SyntheticEvent } from "react";
+import { type TreeModel, type TreeNodeMeta } from "./treeModel";
+export type { TreeModel, TreeNodeMeta } from "./treeModel";
 export interface UseTreeProps {
     /**
      * Default expanded nodes (uncontrolled)
@@ -37,20 +39,6 @@ export interface UseTreeProps {
      */
     children?: ReactNode;
 }
-export interface TreeNodeMeta {
-    value: string;
-    parentValue: string | undefined;
-    hasChildren: boolean;
-    disabled: boolean;
-}
-export interface TreeModel {
-    /** All nodes indexed by value */
-    nodes: Map<string, TreeNodeMeta>;
-    /** Ordered list of root node values */
-    rootValues: string[];
-    /** Maps parent value to ordered list of child values */
-    childrenOf: Map<string, string[]>;
-}
 export declare function useTree(props: UseTreeProps): {
     expandedArray: string[];
     setExpandedArray: import("react").Dispatch<import("react").SetStateAction<string[]>>;
@@ -59,6 +47,7 @@ export declare function useTree(props: UseTreeProps): {
     selectedState: string[];
     selectedSet: Set<string>;
     setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    setVisibleSelectionState: (selection: string[]) => void;
     select: (event: SyntheticEvent, value: string) => void;
     multiselect: boolean;
     disabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.90",
+  "version": "1.0.0-alpha.92",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
-    "@salt-ds/core": "^1.60.0",
+    "@salt-ds/core": "^1.61.0",
     "@salt-ds/date-components": "0.1.0",
     "@salt-ds/icons": "^1.18.0",
     "@salt-ds/styles": "0.3.0",
@@ -31,11 +31,9 @@
     "clsx": "^2.0.0",
     "compute-scroll-into-view": "^3.0.0",
     "deepmerge": "^4.2.2",
-    "dom-accessibility-api": "^0.7.1",
     "react-color": "^2.19.3",
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
-    "tabbable": "^6.0.0",
     "tinycolor2": "^1.4.2"
   },
   "peerDependencies": {

package/dist-cjs/rating/Rating.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltRating {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n  height: var(--salt-size-base);\n  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n  min-height: var(--salt-size-base);\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelBottom {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--salt-spacing-75);\n}\n\n.saltRating-labelRight {\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n}\n\n.saltRating-container {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  padding-top: var(--salt-spacing-fixed-100);\n  padding-bottom: var(--salt-spacing-fixed-100);\n  box-sizing: border-box;\n}\n\n.saltRating-label {\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  box-sizing: border-box;\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Rating.css.js.map

package/dist-cjs/rating/Rating.css.js.map

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

package/dist-cjs/rating/Rating.js

@@ -1,132 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var clsx = require('clsx');
-var react = require('react');
-var Rating$1 = require('./Rating.css.js');
-var RatingItem = require('./RatingItem.js');
-
-const withBaseName = core.makePrefixer("saltRating");
-const defaultGetLabel = (value) => `${value} Star${value > 1 ? "s" : ""}`;
-const Rating = react.forwardRef(function Rating2({
-  value: valueProp,
-  defaultValue = 0,
-  name: nameProp,
-  onChange,
-  className,
-  readOnly: readOnlyProp,
-  disabled: disabledProp,
-  max = 5,
-  getLabel = defaultGetLabel,
-  getVisibleLabel,
-  labelPlacement = "right",
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
-  ...restProps
-}, ref) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-rating",
-    css: Rating$1,
-    window: targetWindow
-  });
-  const {
-    disabled: formFieldDisabled,
-    readOnly: formFieldReadOnly,
-    a11yProps: {
-      "aria-describedby": formFieldDescribedBy,
-      "aria-labelledby": formFieldLabelledBy
-    } = {}
-  } = core.useFormFieldProps();
-  const disabled = formFieldDisabled || disabledProp;
-  const readOnly = formFieldReadOnly || readOnlyProp;
-  const [hoveredValue, setHoveredValue] = react.useState(0);
-  const [selected, setSelected] = core.useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: "Rating",
-    state: "value"
-  });
-  const name = core.useId(nameProp);
-  const handleMouseEnter = (event) => {
-    if (readOnly || disabled) return;
-    const itemValue = Number.parseInt(event.currentTarget.value, 10);
-    setHoveredValue(itemValue);
-  };
-  const handleChange = (event) => {
-    if (readOnly) {
-      event.preventDefault();
-      return;
-    }
-    const itemValue = Number.parseInt(event.currentTarget.value, 10);
-    setSelected(itemValue);
-    onChange == null ? void 0 : onChange(event, itemValue);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      className: clsx.clsx(
-        withBaseName(),
-        withBaseName(`label${core.capitalize(labelPlacement)}`),
-        className
-      ),
-      ...restProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "radiogroup",
-            className: withBaseName("container"),
-            "aria-readonly": readOnly || void 0,
-            "aria-label": ariaLabel,
-            "aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
-            "aria-describedby": clsx.clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
-            onMouseLeave: () => setHoveredValue(0),
-            children: Array.from({ length: max }, (_, index) => {
-              const itemValue = index + 1;
-              const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;
-              const isSelected = hoveredValue === 0 && itemValue <= selected;
-              const isUnselecting = hoveredValue > 0 && itemValue > hoveredValue && itemValue <= selected;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                RatingItem.RatingItem,
-                {
-                  currentRating: selected,
-                  isHovered,
-                  isSelected,
-                  isUnselecting,
-                  onMouseEnter: handleMouseEnter,
-                  onChange: handleChange,
-                  value: itemValue,
-                  readOnly,
-                  disabled,
-                  name,
-                  "aria-label": getLabel == null ? void 0 : getLabel(itemValue)
-                },
-                itemValue
-              );
-            })
-          }
-        ),
-        getVisibleLabel && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: clsx.clsx(
-              withBaseName("label"),
-              withBaseName(`label-${labelPlacement}`)
-            ),
-            "aria-hidden": true,
-            children: getVisibleLabel(hoveredValue || selected, max)
-          }
-        )
-      ]
-    }
-  );
-});
-
-exports.Rating = Rating;
-//# sourceMappingURL=Rating.js.map

package/dist-cjs/rating/Rating.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Rating.js","sources":["../src/rating/Rating.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  useState,\n} from \"react\";\nimport ratingCss from \"./Rating.css\";\nimport { RatingItem } from \"./RatingItem\";\n\nconst withBaseName = makePrefixer(\"saltRating\");\n\nexport interface RatingProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * When provided, the component is controlled.\n   */\n  value?: number;\n  /**\n   * Default rating value for uncontrolled mode.\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Callback function for rating change.\n   * The first parameter is the event, and the second is the selected rating value.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: number) => void;\n  /**\n   * If true, the rating component will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating component will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Total number of icons displayed.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Function used to provide a user-friendly name for the current value of the rating. Primarily used by screen readers.\n   */\n  getLabel?: (value: number) => string;\n  /**\n   * Function used to provide a visible label for the rating.\n   */\n  getVisibleLabel?: (value: number, max: number) => string;\n  /**\n   * Position of the label relative to the rating component.\n   * @default \"right\"\n   */\n  labelPlacement?: \"right\" | \"bottom\";\n  /**\n   * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n   */\n  name?: string;\n}\n\nconst defaultGetLabel = (value: number) =>\n  `${value} Star${value > 1 ? \"s\" : \"\"}`;\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n  {\n    value: valueProp,\n    defaultValue = 0,\n    name: nameProp,\n    onChange,\n    className,\n    readOnly: readOnlyProp,\n    disabled: disabledProp,\n    max = 5,\n    getLabel = defaultGetLabel,\n    getVisibleLabel,\n    labelPlacement = \"right\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rating\",\n    css: ratingCss,\n    window: targetWindow,\n  });\n  const {\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const readOnly = formFieldReadOnly || readOnlyProp;\n\n  const [hoveredValue, setHoveredValue] = useState(0);\n  const [selected, setSelected] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Rating\",\n    state: \"value\",\n  });\n  const name = useId(nameProp);\n\n  const handleMouseEnter = (event: MouseEvent<HTMLInputElement>) => {\n    if (readOnly || disabled) return;\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setHoveredValue(itemValue);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setSelected(itemValue);\n    onChange?.(event, itemValue);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`label${capitalize(labelPlacement)}`),\n        className,\n      )}\n      {...restProps}\n    >\n      <div\n        role=\"radiogroup\"\n        className={withBaseName(\"container\")}\n        aria-readonly={readOnly || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        onMouseLeave={() => setHoveredValue(0)}\n      >\n        {Array.from({ length: max }, (_, index) => {\n          const itemValue = index + 1;\n          const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;\n          const isSelected = hoveredValue === 0 && itemValue <= selected;\n          const isUnselecting =\n            hoveredValue > 0 &&\n            itemValue > hoveredValue &&\n            itemValue <= selected;\n          return (\n            <RatingItem\n              key={itemValue}\n              currentRating={selected}\n              isHovered={isHovered}\n              isSelected={isSelected}\n              isUnselecting={isUnselecting}\n              onMouseEnter={handleMouseEnter}\n              onChange={handleChange}\n              value={itemValue}\n              readOnly={readOnly}\n              disabled={disabled}\n              name={name}\n              aria-label={getLabel?.(itemValue)}\n            />\n          );\n        })}\n      </div>\n      {getVisibleLabel && (\n        <div\n          className={clsx(\n            withBaseName(\"label\"),\n            withBaseName(`label-${labelPlacement}`),\n          )}\n          aria-hidden\n        >\n          {getVisibleLabel(hoveredValue || selected, max)}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Rating","useWindow","useComponentCssInjection","ratingCss","useFormFieldProps","useState","useControlled","useId","jsxs","clsx","capitalize","jsx","RatingItem"],"mappings":"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"}

package/dist-cjs/rating/RatingItem.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltRatingItem {\n  height: var(--salt-size-icon);\n  width: var(--salt-size-icon);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltRatingItem-disabled,\n.saltRatingItem-readOnly {\n  cursor: default;\n}\n\n.saltRatingItem-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  cursor: inherit;\n  z-index: 1;\n}\n\n.saltRatingItem-input::before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: var(--salt-spacing-fixed-600);\n  transform: translate(-50%, -50%);\n  top: 50%;\n  left: 50%;\n  box-sizing: content-box;\n}\n\n.saltRatingItem-icon {\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--salt-sentiment-neutral-dataviz);\n}\n\n.saltRatingItem-icon .saltIcon {\n  --saltIcon-size: var(--salt-size-icon);\n}\n\n.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: var(--salt-spacing-fixed-600);\n  transform: translate(-50%, -50%);\n  top: 50%;\n  left: 50%;\n  box-sizing: content-box;\n\n  border-radius: var(--salt-palette-corner-strongest);\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-spacing-fixed-200));\n}\n\n.saltRatingItem-disabled {\n  cursor: var(--salt-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n}\n\n.saltRatingItem-disabled .saltRatingItem-input {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltRatingItem-selected .saltRatingItem-icon,\n.saltRatingItem-hovered .saltRatingItem-icon,\n.saltRatingItem-unselecting .saltRatingItem-icon {\n  color: var(--salt-sentiment-accent-dataviz);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=RatingItem.css.js.map

package/dist-cjs/rating/RatingItem.css.js.map

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

package/dist-cjs/rating/RatingItem.js

@@ -1,70 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var clsx = require('clsx');
-var react = require('react');
-var RatingItem$1 = require('./RatingItem.css.js');
-
-const withBaseName = core.makePrefixer("saltRatingItem");
-const RatingItem = react.forwardRef(
-  function RatingItem2(props, ref) {
-    const {
-      "aria-label": ariaLabel,
-      value,
-      currentRating,
-      isHovered,
-      isSelected,
-      isUnselecting,
-      onMouseEnter,
-      onChange,
-      readOnly = false,
-      disabled = false,
-      name
-    } = props;
-    const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = core.useIcon();
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-rating-item",
-      css: RatingItem$1,
-      window: targetWindow
-    });
-    const icon = isHovered || isSelected ? /* @__PURE__ */ jsxRuntime.jsx(RatingSelectedIcon, { "aria-hidden": true }) : isUnselecting ? /* @__PURE__ */ jsxRuntime.jsx(RatingUnselectingIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(RatingIcon, { "aria-hidden": true });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: clsx.clsx(withBaseName(), {
-          [withBaseName("hovered")]: isHovered,
-          [withBaseName("selected")]: isSelected,
-          [withBaseName("unselecting")]: isUnselecting,
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("readOnly")]: readOnly
-        }),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref,
-              type: "radio",
-              name,
-              value,
-              checked: currentRating === value,
-              onChange,
-              onMouseEnter,
-              disabled,
-              readOnly,
-              className: withBaseName("input"),
-              "aria-label": ariaLabel
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("icon"), "aria-hidden": true, children: icon })
-        ]
-      }
-    );
-  }
-);
-
-exports.RatingItem = RatingItem;
-//# sourceMappingURL=RatingItem.js.map

package/dist-cjs/rating/RatingItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RatingItem.js","sources":["../src/rating/RatingItem.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n} from \"react\";\nimport ratingItemCss from \"./RatingItem.css\";\n\nconst withBaseName = makePrefixer(\"saltRatingItem\");\n\nexport interface RatingItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * specifies the value of the feedback item.\n   */\n  value: number;\n  /**\n   * To define if the current star is being hovered.\n   */\n  isHovered?: boolean;\n  /**\n   * To specify if the item is selected.\n   */\n  isSelected?: boolean;\n  /**\n   * defines the current selected rating.\n   */\n  currentRating?: number;\n  /**\n   *  callback function when feedback item is hovered.\n   */\n  onMouseEnter: (event: MouseEvent<HTMLInputElement>) => void;\n  /**\n   *  callback function when feedback item is clicked.\n   */\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * If true, the rating item will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating item will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates whether the current rating item is in an active state.\n   * An active state typically means that the item is visually highlighted\n   * or styled differently to indicate that it is part of the current selection\n   * or interaction (e.g., hover or focus).\n   */\n  isUnselecting?: boolean;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n}\n\nexport const RatingItem = forwardRef<HTMLInputElement, RatingItemProps>(\n  function RatingItem(props, ref) {\n    const {\n      \"aria-label\": ariaLabel,\n      value,\n      currentRating,\n      isHovered,\n      isSelected,\n      isUnselecting,\n      onMouseEnter,\n      onChange,\n      readOnly = false,\n      disabled = false,\n      name,\n    } = props;\n\n    const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = useIcon();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-rating-item\",\n      css: ratingItemCss,\n      window: targetWindow,\n    });\n\n    const icon =\n      isHovered || isSelected ? (\n        <RatingSelectedIcon aria-hidden />\n      ) : isUnselecting ? (\n        <RatingUnselectingIcon aria-hidden />\n      ) : (\n        <RatingIcon aria-hidden />\n      );\n\n    return (\n      <div\n        className={clsx(withBaseName(), {\n          [withBaseName(\"hovered\")]: isHovered,\n          [withBaseName(\"selected\")]: isSelected,\n          [withBaseName(\"unselecting\")]: isUnselecting,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n        })}\n      >\n        <input\n          ref={ref}\n          type=\"radio\"\n          name={name}\n          value={value}\n          checked={currentRating === value}\n          onChange={onChange}\n          onMouseEnter={onMouseEnter}\n          disabled={disabled}\n          readOnly={readOnly}\n          className={withBaseName(\"input\")}\n          aria-label={ariaLabel}\n        />\n        <span className={withBaseName(\"icon\")} aria-hidden>\n          {icon}\n        </span>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","RatingItem","useIcon","useWindow","useComponentCssInjection","ratingItemCss","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAgD3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,YAAA,EAAc,SAAA;AAAA,MACd,KAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,QAAA,GAAW,KAAA;AAAA,MACX;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,EAAoB,qBAAA,KAA0BC,YAAA,EAAQ;AAE1E,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OACJ,SAAA,IAAa,UAAA,mBACXC,cAAA,CAAC,kBAAA,EAAA,EAAmB,eAAW,IAAA,EAAC,CAAA,GAC9B,aAAA,mBACFA,cAAA,CAAC,yBAAsB,aAAA,EAAW,IAAA,EAAC,oBAEnCA,cAAA,CAAC,UAAA,EAAA,EAAW,eAAW,IAAA,EAAC,CAAA;AAG5B,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,UAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,SAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,aAAA;AAAA,UAC/B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAED,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,IAAA,EAAK,OAAA;AAAA,cACL,IAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAS,aAAA,KAAkB,KAAA;AAAA,cAC3B,QAAA;AAAA,cACA,YAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,YAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACAA,cAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,aAAA,EAAW,MAC/C,QAAA,EAAA,IAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/tabs-next/TabBar.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltTabBar {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.saltTabBar-strip {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex: 1 1 auto;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.saltTabBar-divider::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-fixed-100);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabBar-inset {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=TabBar.css.js.map

package/dist-cjs/tabs-next/TabBar.css.js.map

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

package/dist-cjs/tabs-next/TabBar.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var clsx = require('clsx');
-var react = require('react');
-var TabBar$1 = require('./TabBar.css.js');
-
-const withBaseName = core.makePrefixer("saltTabBar");
-const TabBar = react.forwardRef(
-  function TabBar2(props, ref) {
-    const { className, children, divider, inset, ...rest } = props;
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-tab-bar",
-      css: TabBar$1,
-      window: targetWindow
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx.clsx(
-          withBaseName(),
-          {
-            [withBaseName("divider")]: divider,
-            [withBaseName("inset")]: inset
-          },
-          className
-        ),
-        ...rest,
-        ref,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("strip"), children })
-      }
-    );
-  }
-);
-
-exports.TabBar = TabBar;
-//# sourceMappingURL=TabBar.js.map

package/dist-cjs/tabs-next/TabBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Styling variant with a bottom separator. Defaults to false\n   */\n  divider?: boolean;\n  /**\n   * Styling variant with left and right padding. Defaults to false\n   */\n  inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  function TabBar(props, ref) {\n    const { className, children, divider, inset, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-bar\",\n      css: tabBarCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"divider\")]: divider,\n            [withBaseName(\"inset\")]: inset,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        <div className={withBaseName(\"strip\")}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA;AAAA,EACpB,SAASC,OAAAA,CAAO,KAAA,EAAO,GAAA,EAAK;AAC1B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,KACnD;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/tabs-next/TabListLayoutContext.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var core = require('@salt-ds/core');
-var react = require('react');
-
-const TabListLayoutContext = core.createContext("TabListLayoutContext", null);
-function useTabListLayout() {
-  return react.useContext(TabListLayoutContext);
-}
-
-exports.TabListLayoutContext = TabListLayoutContext;
-exports.useTabListLayout = useTabListLayout;
-//# sourceMappingURL=TabListLayoutContext.js.map

package/dist-cjs/tabs-next/TabListLayoutContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabListLayoutContext.js","sources":["../src/tabs-next/TabListLayoutContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport type TabSlotLocation = \"hidden\" | \"main\" | \"overflow\";\n\nexport interface TabListLayoutContextValue {\n  getLocation: (value: string) => TabSlotLocation;\n  overflowActiveValue: string | null;\n  setOverflowActiveValue: (value: string | null) => void;\n  moveOverflowFocus: (\n    key: \"ArrowDown\" | \"ArrowUp\" | \"Home\" | \"End\",\n    value: string,\n  ) => boolean;\n}\n\nexport const TabListLayoutContext =\n  createContext<TabListLayoutContextValue | null>(\"TabListLayoutContext\", null);\n\nexport function useTabListLayout() {\n  return useContext(TabListLayoutContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAeO,MAAM,oBAAA,GACXA,kBAAA,CAAgD,sBAAA,EAAwB,IAAI;AAEvE,SAAS,gBAAA,GAAmB;AACjC,EAAA,OAAOC,iBAAW,oBAAoB,CAAA;AACxC;;;;;"}

package/dist-cjs/tabs-next/TabListNext.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n  min-width: 0;\n  flex: 0 1 auto;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-measureContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 0;\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n  white-space: nowrap;\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=TabListNext.css.js.map

package/dist-cjs/tabs-next/TabListNext.css.js.map

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