@navikt/ds-react 0.19.17 → 1.0.0-rc.2

package/cjs/stepper/Step.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepComponent = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const Stepper_1 = require("./Stepper");
 const __1 = require("..");
@@ -50,7 +50,7 @@ exports.StepComponent = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     const { activeStep } = context;
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: (0, classnames_1.default)("navds-stepper__step", className, {
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: (0, clsx_1.default)("navds-stepper__step", className, {
             "navds-stepper__step--active": activeStep === unsafe_index,
         }), onClick: (e) => {
             var _a;

package/cjs/stepper/Stepper.js

@@ -39,13 +39,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stepper = exports.StepperContext = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const Step_1 = __importDefault(require("./Step"));
 exports.StepperContext = (0, react_1.createContext)(null);
 exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, activeStep, orientation = "vertical", onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange"]);
     activeStep = activeStep - 1;
-    return (react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-stepper", orientation === "horizontal" ? "navds-stepper--horizontal" : "", className) }),
+    return (react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-stepper", orientation === "horizontal" ? "navds-stepper--horizontal" : "", className) }),
         react_1.default.createElement(exports.StepperContext.Provider, { value: {
                 activeStep,
                 onStepChange,
@@ -53,7 +53,7 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
                 orientation,
             } }, react_1.default.Children.map(children, (step, index) => {
             var _a, _b;
-            return (react_1.default.createElement("li", { className: (0, classnames_1.default)("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },
+            return (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },
                 react_1.default.createElement("span", { className: "navds-stepper__line navds-stepper__line--1" }),
                 react_1.default.isValidElement(step)
                     ? react_1.default.cloneElement(step, Object.assign(Object.assign({}, step.props), { unsafe_index: index }))

package/cjs/table/Body.js

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Body = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Body = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("tbody", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__body", className) })));
+    return (react_1.default.createElement("tbody", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__body", className) })));
 });
 exports.default = exports.Body;

package/cjs/table/DataCell.js

@@ -39,13 +39,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataCell = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 const Table_1 = require("./Table");
 exports.DataCell = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = (0, react_1.useContext)(Table_1.TableContext);
-    return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className, {
+    return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, clsx_1.default)("navds-table__data-cell", className, {
             [`navds-table__data-cell--align-${align}`]: align,
         }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });

package/cjs/table/ExpandableRow.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandableRow = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const Row_1 = __importDefault(require("./Row"));
 const DataCell_1 = __importDefault(require("./DataCell"));
 const react_collapse_1 = require("react-collapse");
@@ -48,14 +48,14 @@ const __1 = require("..");
 exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
-    const id = `expandable-${(0, __1.useId)()}`;
+    const id = (0, __1.useId)();
     const isOpen = open !== null && open !== void 0 ? open : internalOpen;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__expandable-row", className, {
+        react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__expandable-row", className, {
                 "navds-table__expandable-row--open": isOpen,
             }) }),
             togglePlacement === "right" && children,
-            react_1.default.createElement(DataCell_1.default, { className: (0, classnames_1.default)("navds-table__toggle-expand-cell", {
+            react_1.default.createElement(DataCell_1.default, { className: (0, clsx_1.default)("navds-table__toggle-expand-cell", {
                     "navds-table__toggle-expand-cell--open": isOpen,
                 }) }, !expansionDisabled && (react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
                     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);

package/cjs/table/Header.js

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Header = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("thead", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__header", className) })));
+    return (react_1.default.createElement("thead", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__header", className) })));
 });
 exports.default = exports.Header;

package/cjs/table/HeaderCell.js

@@ -39,13 +39,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderCell = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 const Table_1 = require("./Table");
 exports.HeaderCell = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = (0, react_1.useContext)(Table_1.TableContext);
-    return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className, {
+    return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, clsx_1.default)("navds-table__header-cell", className, {
             [`navds-table__header-cell--align-${align}`]: align,
         }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });

package/cjs/table/Row.js

@@ -39,10 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Row = (0, react_1.forwardRef)((_a, ref) => {
     var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
-    return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__row", className, {
+    return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__row", className, {
             "navds-table__row--selected": selected,
         }) })));
 });

package/cjs/table/Table.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = exports.TableContext = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const Header_1 = __importDefault(require("./Header"));
 const Body_1 = __importDefault(require("./Body"));
 const Row_1 = __importDefault(require("./Row"));
@@ -51,7 +51,7 @@ exports.TableContext = (0, react_1.createContext)(null);
 exports.Table = (0, react_1.forwardRef)((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
     return (react_1.default.createElement(exports.TableContext.Provider, { value: { size, onSortChange, sort } },
-        react_1.default.createElement("table", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table", `navds-table--${size}`, className, {
+        react_1.default.createElement("table", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table", `navds-table--${size}`, className, {
                 "navds-table--zebra-stripes": zebraStripes,
             }) }))));
 });

package/cjs/tabs/Tab.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
 const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const Tabs_1 = require("./Tabs");
@@ -52,10 +52,10 @@ exports.Tab = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     return (react_1.default.createElement(RadixTabs.Trigger, { value: value, asChild: true },
-        react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-tabs__tab", `navds-tabs__tab--${(_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "medium"}`, `navds-tabs__tab-icon--${iconPosition}`, className, {
+        react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-tabs__tab", `navds-tabs__tab--${(_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "medium"}`, `navds-tabs__tab-icon--${context === null || context === void 0 ? void 0 : context.iconPosition}`, className, {
                 "navds-tabs__tab--icon-only": icon && !label,
             }) }, rest),
-            react_1.default.createElement(__1.Label, { as: "span", className: "navds-tabs__tab-inner", size: context === null || context === void 0 ? void 0 : context.size },
+            react_1.default.createElement(__1.BodyShort, { as: "span", className: "navds-tabs__tab-inner", size: context === null || context === void 0 ? void 0 : context.size },
                 icon,
                 label))));
 });

package/cjs/tabs/TabList.js

@@ -38,21 +38,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabList = void 0;
-const core_1 = require("@material-ui/core");
 const ds_icons_1 = require("@navikt/ds-icons");
 const react_tabs_1 = require("@radix-ui/react-tabs");
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const __1 = require("..");
+const Tabs_1 = require("./Tabs");
 exports.TabList = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
+    const context = (0, react_1.useContext)(Tabs_1.TabsContext);
     const listRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_merge_refs_1.default)([listRef, ref]);
+    const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([listRef, ref]), [ref]);
     const [displayScroll, setDisplayScroll] = (0, react_1.useState)({
         start: false,
         end: false,
     });
-    const updateScrollButtonState = (0, react_1.useMemo)(() => (0, core_1.debounce)(() => {
+    const updateScrollButtonState = (0, react_1.useMemo)(() => (0, __1.debounce)(() => {
         var _a;
         if (!(listRef === null || listRef === void 0 ? void 0 : listRef.current))
             return;
@@ -93,7 +94,7 @@ exports.TabList = (0, react_1.forwardRef)((_a, ref) => {
             updateScrollButtonState.clear();
         };
     }, [updateScrollButtonState]);
-    const ScrollButton = ({ dir, hidden, }) => (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-tabs__scroll-button", {
+    const ScrollButton = ({ dir, hidden, }) => (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-tabs__scroll-button", {
             "navds-tabs__scroll-button--hidden": hidden,
         }), onClick: () => {
             if (!listRef.current)
@@ -103,7 +104,7 @@ exports.TabList = (0, react_1.forwardRef)((_a, ref) => {
     const showSteppers = displayScroll.end || displayScroll.start;
     return (react_1.default.createElement("div", { className: "navds-tabs__tablist-wrapper" },
         showSteppers && (react_1.default.createElement(ScrollButton, { dir: -1, hidden: !displayScroll.start })),
-        react_1.default.createElement(react_tabs_1.TabsList, Object.assign({}, rest, { ref: mergedRef, onScroll: updateScrollButtonState, className: (0, classnames_1.default)("navds-tabs__tablist", className) })),
+        react_1.default.createElement(react_tabs_1.TabsList, Object.assign({}, rest, { ref: mergedRef, onScroll: updateScrollButtonState, loop: context === null || context === void 0 ? void 0 : context.loop, className: (0, clsx_1.default)("navds-tabs__tablist", className) })),
         showSteppers && react_1.default.createElement(ScrollButton, { dir: 1, hidden: !displayScroll.end })));
 });
 exports.default = exports.TabList;

package/cjs/tabs/TabPanel.js

@@ -38,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_tabs_1 = require("@radix-ui/react-tabs");
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const TabPanel = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement(react_tabs_1.TabsContent, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-tabs__tabpanel", className) })));
+    return (react_1.default.createElement(react_tabs_1.TabsContent, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-tabs__tabpanel", className) })));
 });
 exports.default = TabPanel;

package/cjs/tabs/Tabs.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = exports.TabsContext = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
 const Tab_1 = __importDefault(require("./Tab"));
@@ -46,10 +46,12 @@ const TabList_1 = __importDefault(require("./TabList"));
 const TabPanel_1 = __importDefault(require("./TabPanel"));
 exports.TabsContext = (0, react_1.createContext)(null);
 exports.Tabs = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, onChange, size = "medium", selectionFollowsFocus = false } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "selectionFollowsFocus"]);
-    return (react_1.default.createElement(RadixTabs.Root, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-tabs", className, `navds-tabs--${size}`), activationMode: selectionFollowsFocus ? "automatic" : "manual", onValueChange: onChange }),
+    var { className, children, onChange, size = "medium", selectionFollowsFocus = false, loop = false, iconPosition = "left" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "selectionFollowsFocus", "loop", "iconPosition"]);
+    return (react_1.default.createElement(RadixTabs.Root, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-tabs", className, `navds-tabs--${size}`), activationMode: selectionFollowsFocus ? "automatic" : "manual", onValueChange: onChange }),
         react_1.default.createElement(exports.TabsContext.Provider, { value: {
                 size,
+                loop,
+                iconPosition,
             } }, children)));
 });
 exports.Tabs.Tab = Tab_1.default;

package/cjs/tag/Tag.js

@@ -39,11 +39,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 exports.Tag = (0, react_1.forwardRef)((_a, ref) => {
     var { className, variant, size = "medium" } = _a, rest = __rest(_a, ["className", "variant", "size"]);
     const Component = size === "medium" ? __1.BodyShort : __1.Detail;
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, as: "span", size: size, className: (0, classnames_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, as: "span", size: size, className: (0, clsx_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
 });
 exports.default = exports.Tag;

package/cjs/toggle-group/ToggleGroup.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleGroup = exports.ToggleGroupContext = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const ToggleItem_1 = __importDefault(require("./ToggleItem"));
 const RadixToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
@@ -47,7 +47,7 @@ exports.ToggleGroupContext = (0, react_1.createContext)(null);
 exports.ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, onChange, size = "medium", label, value, defaultValue, id, "aria-describedby": desc } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "id", "aria-describedby"]);
     const [groupValue, setGroupValue] = (0, react_1.useState)(defaultValue);
-    const labelId = `toggle-group-label-${(0, __1.useId)()}`;
+    const labelId = (0, __1.useId)();
     const handleValueChange = (v) => {
         if (v !== "") {
             setGroupValue(v);
@@ -57,9 +57,9 @@ exports.ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
     if (!value && !defaultValue) {
         console.error("ToggleGroup without value/defaultvalue is not allowed");
     }
-    const describeBy = (0, classnames_1.default)({
+    const describeBy = (0, clsx_1.default)({
         [desc !== null && desc !== void 0 ? desc : ""]: !!desc,
-        [labelId]: !!label,
+        [labelId !== null && labelId !== void 0 ? labelId : ""]: !!label,
     });
     if (!value && !defaultValue) {
         console.error("ToggleGroup needs either a value or defaultValue");
@@ -69,7 +69,7 @@ exports.ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
         } },
         react_1.default.createElement("div", null,
             label && (react_1.default.createElement(__1.Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
-            react_1.default.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: (0, classnames_1.default)("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
+            react_1.default.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: (0, clsx_1.default)("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
 });
 exports.ToggleGroup.Item = ToggleItem_1.default;
 exports.default = exports.ToggleGroup;

package/cjs/toggle-group/ToggleItem.js

@@ -38,14 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 const RadixToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
 const ToggleGroup_1 = require("./ToggleGroup");
 const ToggleItem = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
     const context = (0, react_1.useContext)(ToggleGroup_1.ToggleGroupContext);
-    return (react_1.default.createElement(RadixToggleGroup.Item, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-toggle-group__button", className) }),
+    return (react_1.default.createElement(RadixToggleGroup.Item, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-toggle-group__button", className) }),
         react_1.default.createElement(__1.Label, { as: "span", className: "navds-toggle-group__button-inner", size: context === null || context === void 0 ? void 0 : context.size }, children)));
 });
 exports.default = ToggleItem;

package/cjs/tooltip/Tooltip.js

@@ -38,67 +38,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const react_dom_interactions_1 = require("@floating-ui/react-dom-interactions");
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
-const react_dom_1 = require("@floating-ui/react-dom");
-const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
-const portal_1 = __importDefault(require("./portal"));
 const util_1 = require("../util");
 exports.Tooltip = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, arrow: _arrow = true, placement: _placement = "top", open, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
+    var { children, className, arrow: _arrow = true, placement: _placement = "top", open: userOpen, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
+    const [open, setOpen] = (0, react_1.useState)(defaultOpen);
     const arrowRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
-    const openTimerRef = (0, react_1.useRef)(0);
-    const leaveTimerRef = (0, react_1.useRef)(0);
-    const isMouseDownRef = (0, react_1.useRef)(false);
-    const ariaId = (0, util_1.useId)(id);
-    const { x, y, update, placement, refs, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, } = (0, react_dom_1.useFloating)({
+    const { x, y, reference, floating, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, } = (0, react_dom_interactions_1.useFloating)({
         placement: _placement,
+        open: userOpen !== null && userOpen !== void 0 ? userOpen : open,
+        onOpenChange: setOpen,
         middleware: [
-            (0, react_dom_1.shift)(),
-            (0, react_dom_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
-            (0, react_dom_1.arrow)({ element: arrowRef, padding: 5 }),
-            (0, react_dom_1.hide)(),
+            (0, react_dom_interactions_1.offset)(_offset ? _offset : _arrow ? 10 : 2),
+            (0, react_dom_interactions_1.shift)(),
+            (0, react_dom_interactions_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            (0, react_dom_interactions_1.arrow)({ element: arrowRef, padding: 5 }),
         ],
+        whileElementsMounted: react_dom_interactions_1.autoUpdate,
     });
-    /* https://floating-ui.com/docs/react-dom#updating */
-    (0, react_1.useEffect)(() => {
-        if (!refs.reference.current || !refs.floating.current) {
-            return;
-        }
-        // Only call this when the floating element is rendered
-        return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
-    }, [refs.reference, refs.floating, update, open, isOpen]);
-    const handleOpen = (0, react_1.useCallback)(() => {
-        window.clearTimeout(openTimerRef.current);
-        window.clearTimeout(leaveTimerRef.current);
-        setIsOpen(true);
-    }, [setIsOpen]);
-    const handleDelayedOpen = (0, react_1.useCallback)(() => {
-        window.clearTimeout(openTimerRef.current);
-        window.clearTimeout(leaveTimerRef.current);
-        openTimerRef.current = window.setTimeout(() => {
-            setIsOpen(true);
-        }, delay);
-    }, [delay, setIsOpen]);
-    const handleClose = (0, react_1.useCallback)(() => {
-        window.clearTimeout(openTimerRef.current);
-        leaveTimerRef.current = window.setTimeout(() => {
-            setIsOpen(false);
-        }, 50);
-    }, [setIsOpen]);
-    const handleMouseUp = (0, react_1.useCallback)(() => (isMouseDownRef.current = false), []);
-    (0, react_1.useEffect)(() => {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        return () => window.clearTimeout(openTimerRef.current);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        return () => document.removeEventListener("mouseup", handleMouseUp);
-    }, [handleMouseUp]);
-    (0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => e.key === "Escape" && handleClose(), [handleClose]));
-    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
-    const stableRef = (0, react_1.useMemo)(() => (0, react_merge_refs_1.default)([ref, refs.floating]), [ref, refs.floating]);
+    const { getReferenceProps, getFloatingProps } = (0, react_dom_interactions_1.useInteractions)([
+        (0, react_dom_interactions_1.useHover)(context, { handleClose: (0, react_dom_interactions_1.safePolygon)(), restMs: delay }),
+        (0, react_dom_interactions_1.useFocus)(context),
+        (0, react_dom_interactions_1.useDismiss)(context),
+    ]);
+    const ariaId = (0, util_1.useId)(id);
+    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([ref, floating]), [floating, ref]);
+    const childMergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([children.ref, reference]), [children, reference]);
     if (!children ||
         (children === null || children === void 0 ? void 0 : children.type) === react_1.default.Fragment ||
         children === react_1.default.Fragment) {
@@ -110,45 +78,30 @@ exports.Tooltip = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        (0, react_1.cloneElement)(children, Object.assign(Object.assign({}, children.props), { "aria-describedby": open || isOpen
-                ? (0, classnames_1.default)(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
-                : children === null || children === void 0 ? void 0 : children.props["aria-describedby"], ref: (0, react_merge_refs_1.default)([children.ref, refs.reference]), onMouseEnter: (0, __1.composeEventHandlers)(children.props.onMouseEnter, handleDelayedOpen), onMouseLeave: (0, __1.composeEventHandlers)(children.props.onMouseLeave, handleClose), onMouseDown: (0, __1.composeEventHandlers)(children.props.onMouseDown, () => {
-                isMouseDownRef.current = true;
-                document &&
-                    document.addEventListener("mouseup", handleMouseUp, {
-                        once: true,
-                    });
-            }), onFocus: (0, __1.composeEventHandlers)(children.props.onFocus, () => !isMouseDownRef.current && handleOpen()), onBlur: (0, __1.composeEventHandlers)(children.props.onBlur, handleClose) })),
-        (open !== null && open !== void 0 ? open : isOpen) && (react_1.default.createElement(portal_1.default, null,
-            react_1.default.createElement("div", Object.assign({ ref: stableRef }, rest, { onMouseEnter: handleOpen, onMouseLeave: handleClose, role: "tooltip", id: ariaId, style: {
-                    position: "absolute",
-                    top: y !== null && y !== void 0 ? y : "",
-                    left: x !== null && x !== void 0 ? x : "",
-                    visibility: referenceHidden ? "hidden" : "visible",
-                }, "data-side": placement, className: (0, classnames_1.default)("navds-tooltip", "navds-detail navds-detail--small", className) }),
-                react_1.default.createElement("div", { className: "navds-tooltip__inner", style: {
-                        [{
-                            top: "marginBottom",
-                            right: "marginLeft",
-                            bottom: "marginTop",
-                            left: "marginRight",
-                        }[placement]]: _offset ? _offset : _arrow ? 10 : 2,
-                    } },
-                    content,
-                    keys && (react_1.default.createElement("span", { className: "navds-tooltip__keys" }, keys.map((key) => (react_1.default.createElement(__1.Detail, { size: "small", as: "kbd", key: key, className: "navds-tooltip__key" }, key))))),
-                    _arrow && (react_1.default.createElement("div", { ref: (node) => {
-                            arrowRef.current = node;
-                        }, className: "navds-tooltip__arrow", style: {
-                            left: arrowX != null ? `${arrowX}px` : "",
-                            top: arrowY != null ? `${arrowY}px` : "",
-                            right: "",
-                            bottom: "",
-                            [{
-                                top: "bottom",
-                                right: "left",
-                                bottom: "top",
-                                left: "right",
-                            }[placement]]: "-3.5px",
-                        } }))))))));
+        (0, react_1.cloneElement)(children, getReferenceProps(Object.assign(Object.assign({}, children.props), { ref: childMergedRef, "aria-describedby": (userOpen !== null && userOpen !== void 0 ? userOpen : open)
+                ? (0, clsx_1.default)(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
+                : children === null || children === void 0 ? void 0 : children.props["aria-describedby"] }))),
+        react_1.default.createElement(react_dom_interactions_1.FloatingPortal, null, (userOpen !== null && userOpen !== void 0 ? userOpen : open) && (react_1.default.createElement("div", Object.assign({}, getFloatingProps(Object.assign(Object.assign({}, rest), { ref: mergedRef, style: {
+                position: strategy,
+                top: y !== null && y !== void 0 ? y : 0,
+                left: x !== null && x !== void 0 ? x : 0,
+                visibility: referenceHidden ? "hidden" : "visible",
+            }, role: "tooltip", id: ariaId, className: (0, clsx_1.default)("navds-tooltip", "navds-detail navds-detail--small", className) })), { "data-side": placement }),
+            content,
+            keys && (react_1.default.createElement("span", { className: "navds-tooltip__keys" }, keys.map((key) => (react_1.default.createElement(__1.Detail, { size: "small", as: "kbd", key: key, className: "navds-tooltip__key" }, key))))),
+            _arrow && (react_1.default.createElement("div", { ref: (node) => {
+                    arrowRef.current = node;
+                }, className: "navds-tooltip__arrow", style: {
+                    left: arrowX != null ? `${arrowX}px` : "",
+                    top: arrowY != null ? `${arrowY}px` : "",
+                    right: "",
+                    bottom: "",
+                    [{
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right",
+                    }[placement]]: "-3.5px",
+                } })))))));
 });
 exports.default = exports.Tooltip;

package/cjs/typography/BodyLong.js

@@ -39,10 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyLong = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.BodyLong = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-body-long", {
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-body-long", {
             "navds-body-long--small": size === "small",
             "navds-typo--spacing": !!spacing,
         }) })));

package/cjs/typography/BodyShort.js

@@ -39,10 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyShort = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.BodyShort = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-body-short", {
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-body-short", {
             "navds-body-short--small": size === "small",
             "navds-typo--spacing": !!spacing,
         }) })));

package/cjs/typography/Detail.js

@@ -39,10 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Detail = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Detail = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = "medium", spacing, uppercase, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "uppercase", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-detail", {
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-detail", {
             "navds-detail--small": size === "small",
             "navds-typo--spacing": !!spacing,
             "navds-typo--uppercase": !!uppercase,

package/cjs/typography/ErrorMessage.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
-const ErrorMessage = (props) => (react_1.default.createElement(__1.Label, Object.assign({}, props, { as: "div", className: (0, classnames_1.default)("navds-error-message", props.className) })));
+const ErrorMessage = (props) => (react_1.default.createElement(__1.Label, Object.assign({}, props, { as: "div", className: (0, clsx_1.default)("navds-error-message", props.className) })));
 exports.default = ErrorMessage;

package/cjs/typography/Heading.js

@@ -39,11 +39,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Heading = (0, react_1.forwardRef)((_a, ref) => {
     var { level = "1", size, spacing = false, className, as } = _a, rest = __rest(_a, ["level", "size", "spacing", "className", "as"]);
     let HeadingTag = as !== null && as !== void 0 ? as : `h${level}`;
-    return (react_1.default.createElement(HeadingTag, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-heading", `navds-heading--${size}`, {
+    return (react_1.default.createElement(HeadingTag, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-heading", `navds-heading--${size}`, {
             "navds-typo--spacing": spacing,
         }) })));
 });

package/cjs/typography/Ingress.js

@@ -39,10 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Ingress = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Ingress = (0, react_1.forwardRef)((_a, ref) => {
     var { className, spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "spacing", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-ingress", {
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-ingress", {
             "navds-typo--spacing": !!spacing,
         }) })));
 });