@salt-ds/core 1.8.0-rc.3 → 1.8.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist-cjs/accordion/Accordion.css.js +6 -0
  2. package/dist-cjs/accordion/Accordion.css.js.map +1 -0
  3. package/dist-cjs/accordion/Accordion.js +67 -0
  4. package/dist-cjs/accordion/Accordion.js.map +1 -0
  5. package/dist-cjs/accordion/AccordionContext.js +29 -0
  6. package/dist-cjs/accordion/AccordionContext.js.map +1 -0
  7. package/dist-cjs/accordion/AccordionGroup.js +27 -0
  8. package/dist-cjs/accordion/AccordionGroup.js.map +1 -0
  9. package/dist-cjs/accordion/AccordionHeader.css.js +6 -0
  10. package/dist-cjs/accordion/AccordionHeader.css.js.map +1 -0
  11. package/dist-cjs/accordion/AccordionHeader.js +54 -0
  12. package/dist-cjs/accordion/AccordionHeader.js.map +1 -0
  13. package/dist-cjs/accordion/AccordionPanel.css.js +6 -0
  14. package/dist-cjs/accordion/AccordionPanel.css.js.map +1 -0
  15. package/dist-cjs/accordion/AccordionPanel.js +49 -0
  16. package/dist-cjs/accordion/AccordionPanel.js.map +1 -0
  17. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  18. package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
  19. package/dist-cjs/index.js +14 -0
  20. package/dist-cjs/index.js.map +1 -1
  21. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  22. package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
  23. package/dist-cjs/toggle-button/ToggleButton.css.js +6 -0
  24. package/dist-cjs/toggle-button/ToggleButton.css.js.map +1 -0
  25. package/dist-cjs/toggle-button/ToggleButton.js +81 -0
  26. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -0
  27. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +6 -0
  28. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js.map +1 -0
  29. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +117 -0
  30. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -0
  31. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +20 -0
  32. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
  33. package/dist-es/accordion/Accordion.css.js +4 -0
  34. package/dist-es/accordion/Accordion.css.js.map +1 -0
  35. package/dist-es/accordion/Accordion.js +63 -0
  36. package/dist-es/accordion/Accordion.js.map +1 -0
  37. package/dist-es/accordion/AccordionContext.js +24 -0
  38. package/dist-es/accordion/AccordionContext.js.map +1 -0
  39. package/dist-es/accordion/AccordionGroup.js +23 -0
  40. package/dist-es/accordion/AccordionGroup.js.map +1 -0
  41. package/dist-es/accordion/AccordionHeader.css.js +4 -0
  42. package/dist-es/accordion/AccordionHeader.css.js.map +1 -0
  43. package/dist-es/accordion/AccordionHeader.js +50 -0
  44. package/dist-es/accordion/AccordionHeader.js.map +1 -0
  45. package/dist-es/accordion/AccordionPanel.css.js +4 -0
  46. package/dist-es/accordion/AccordionPanel.css.js.map +1 -0
  47. package/dist-es/accordion/AccordionPanel.js +45 -0
  48. package/dist-es/accordion/AccordionPanel.js.map +1 -0
  49. package/dist-es/checkbox/Checkbox.css.js +1 -1
  50. package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
  51. package/dist-es/index.js +7 -0
  52. package/dist-es/index.js.map +1 -1
  53. package/dist-es/radio-button/RadioButton.css.js +1 -1
  54. package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
  55. package/dist-es/toggle-button/ToggleButton.css.js +4 -0
  56. package/dist-es/toggle-button/ToggleButton.css.js.map +1 -0
  57. package/dist-es/toggle-button/ToggleButton.js +77 -0
  58. package/dist-es/toggle-button/ToggleButton.js.map +1 -0
  59. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +4 -0
  60. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js.map +1 -0
  61. package/dist-es/toggle-button-group/ToggleButtonGroup.js +113 -0
  62. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -0
  63. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +15 -0
  64. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -0
  65. package/dist-types/accordion/Accordion.d.ts +25 -0
  66. package/dist-types/accordion/AccordionContext.d.ts +10 -0
  67. package/dist-types/accordion/AccordionGroup.d.ts +3 -0
  68. package/dist-types/accordion/AccordionHeader.d.ts +3 -0
  69. package/dist-types/accordion/AccordionPanel.d.ts +3 -0
  70. package/dist-types/accordion/index.d.ts +4 -0
  71. package/dist-types/index.d.ts +3 -0
  72. package/dist-types/toggle-button/ToggleButton.d.ts +7 -0
  73. package/dist-types/toggle-button/index.d.ts +1 -0
  74. package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +25 -0
  75. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +10 -0
  76. package/dist-types/toggle-button-group/index.d.ts +2 -0
  77. package/package.json +2 -2
@@ -0,0 +1,4 @@
1
+ var css_248z = ".saltToggleButtonGroup {\n display: flex;\n background: var(--salt-container-primary-background);\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n width: fit-content;\n gap: var(--salt-spacing-50);\n padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n flex-direction: row;\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n justify-content: start;\n}\n";
2
+
3
+ export { css_248z as default };
4
+ //# sourceMappingURL=ToggleButtonGroup.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButtonGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,113 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
3
+ import { clsx } from 'clsx';
4
+ import { useWindow } from '@salt-ds/window';
5
+ import { useComponentCssInjection } from '@salt-ds/styles';
6
+ import { makePrefixer } from '../utils/makePrefixer.js';
7
+ import { useControlled } from '../utils/useControlled.js';
8
+ import '../utils/useFloatingUI.js';
9
+ import { useForkRef } from '../utils/useForkRef.js';
10
+ import '../utils/useId.js';
11
+ import '../salt-provider/SaltProvider.js';
12
+ import '../viewport/ViewportProvider.js';
13
+ import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
14
+ import css_248z from './ToggleButtonGroup.css.js';
15
+
16
+ const withBaseName = makePrefixer("saltToggleButtonGroup");
17
+ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
18
+ const {
19
+ children,
20
+ className,
21
+ value: valueProp,
22
+ defaultValue,
23
+ disabled,
24
+ onChange,
25
+ onKeyDown,
26
+ orientation = "horizontal",
27
+ ...rest
28
+ } = props;
29
+ const targetWindow = useWindow();
30
+ useComponentCssInjection({
31
+ testId: "salt-toggle-button-group",
32
+ css: css_248z,
33
+ window: targetWindow
34
+ });
35
+ const groupRef = useRef(null);
36
+ const handleRef = useForkRef(ref, groupRef);
37
+ const [value, setValue] = useControlled({
38
+ default: defaultValue,
39
+ controlled: valueProp,
40
+ name: "ToggleButtonGroup",
41
+ state: "value"
42
+ });
43
+ const [focused, setFocused] = useState(value);
44
+ const select = useCallback(
45
+ (event) => {
46
+ const newValue = event.currentTarget.value;
47
+ setValue(newValue);
48
+ if (value !== newValue) {
49
+ onChange == null ? void 0 : onChange(event);
50
+ }
51
+ },
52
+ [onChange, value, setValue]
53
+ );
54
+ const isSelected = useCallback(
55
+ (id) => {
56
+ return value === id;
57
+ },
58
+ [value]
59
+ );
60
+ const focus = (id) => {
61
+ setFocused(id);
62
+ };
63
+ const isFocused = useCallback(
64
+ (id) => {
65
+ return focused === id || !focused;
66
+ },
67
+ [focused]
68
+ );
69
+ const contextValue = useMemo(
70
+ () => ({
71
+ select,
72
+ isSelected,
73
+ focus,
74
+ isFocused,
75
+ disabled
76
+ }),
77
+ [select, isSelected, isFocused, disabled]
78
+ );
79
+ const handleKeyDown = (event) => {
80
+ var _a, _b, _c, _d;
81
+ const elements = Array.from(
82
+ (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) != null ? _b : []
83
+ );
84
+ const currentIndex = elements.findIndex(
85
+ (element) => element === document.activeElement
86
+ );
87
+ switch (event.key) {
88
+ case "ArrowDown":
89
+ case "ArrowRight":
90
+ (_c = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _c.focus();
91
+ break;
92
+ case "ArrowUp":
93
+ case "ArrowLeft":
94
+ (_d = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _d.focus();
95
+ break;
96
+ }
97
+ onKeyDown == null ? void 0 : onKeyDown(event);
98
+ };
99
+ return /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, {
100
+ value: contextValue,
101
+ children: /* @__PURE__ */ jsx("div", {
102
+ className: clsx(withBaseName(), withBaseName(orientation), className),
103
+ role: "radiogroup",
104
+ ref: handleRef,
105
+ onKeyDown: handleKeyDown,
106
+ ...rest,
107
+ children
108
+ })
109
+ });
110
+ });
111
+
112
+ export { ToggleButtonGroup };
113
+ //# sourceMappingURL=ToggleButtonGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: string | ReadonlyArray<string> | number | undefined;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: string | ReadonlyArray<string> | number | undefined;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<\n string | ReadonlyArray<string> | number | undefined\n >(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: string | ReadonlyArray<string> | number | undefined) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n }),\n [select, isSelected, isFocused, disabled]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import { useContext } from 'react';
2
+ import { createContext } from '../utils/createContext.js';
3
+ import '../utils/useFloatingUI.js';
4
+ import '../utils/useId.js';
5
+ import '../salt-provider/SaltProvider.js';
6
+ import '../viewport/ViewportProvider.js';
7
+ import 'clsx';
8
+
9
+ const ToggleButtonGroupContext = createContext("ToggleButtonGroupContext", void 0);
10
+ function useToggleButtonGroup() {
11
+ return useContext(ToggleButtonGroupContext);
12
+ }
13
+
14
+ export { ToggleButtonGroupContext, useToggleButtonGroup };
15
+ //# sourceMappingURL=ToggleButtonGroupContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\n focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n isFocused: (\n id: string | ReadonlyArray<string> | number | undefined\n ) => boolean;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;AAca,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;"}
@@ -0,0 +1,25 @@
1
+ import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
2
+ export interface AccordionProps extends ComponentPropsWithoutRef<"div"> {
3
+ /**
4
+ * AccordionGroup value.
5
+ */
6
+ value: string;
7
+ /**
8
+ * Whether the accordion is expanded.
9
+ */
10
+ expanded?: boolean;
11
+ /**
12
+ * Whether the accordion is expanded by default.
13
+ */
14
+ defaultExpanded?: boolean;
15
+ /**
16
+ * Callback fired when the accordion is toggled.
17
+ * @param event
18
+ */
19
+ onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;
20
+ /**
21
+ * Whether the accordion is disabled.
22
+ */
23
+ disabled?: boolean;
24
+ }
25
+ export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,10 @@
1
+ import { SyntheticEvent } from "react";
2
+ export interface AccordionContextValue {
3
+ value: string;
4
+ expanded: boolean;
5
+ toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;
6
+ disabled: boolean;
7
+ id: string;
8
+ }
9
+ export declare const AccordionContext: import("react").Context<AccordionContextValue>;
10
+ export declare function useAccordion(): AccordionContextValue;
@@ -0,0 +1,3 @@
1
+ import { ComponentPropsWithoutRef } from "react";
2
+ export declare type AccordionGroupProps = ComponentPropsWithoutRef<"div">;
3
+ export declare const AccordionGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,3 @@
1
+ import { ComponentPropsWithoutRef } from "react";
2
+ export declare type AccordionHeaderProps = ComponentPropsWithoutRef<"button">;
3
+ export declare const AccordionHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,3 @@
1
+ import { ComponentPropsWithoutRef } from "react";
2
+ export declare type AccordionPanelProps = ComponentPropsWithoutRef<"div">;
3
+ export declare const AccordionPanel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,4 @@
1
+ export * from "./AccordionGroup";
2
+ export * from "./AccordionPanel";
3
+ export * from "./Accordion";
4
+ export * from "./AccordionHeader";
@@ -1,3 +1,4 @@
1
+ export * from "./accordion";
1
2
  export * from "./aria-announcer";
2
3
  export * from "./avatar";
3
4
  export * from "./banner";
@@ -26,6 +27,8 @@ export * from "./text";
26
27
  export * from "./theme";
27
28
  export * from "./salt-provider";
28
29
  export * from "./split-layout";
30
+ export * from "./toggle-button";
31
+ export * from "./toggle-button-group";
29
32
  export * from "./tooltip";
30
33
  export * from "./utils";
31
34
  export * from "./viewport";
@@ -0,0 +1,7 @@
1
+ import { ComponentProps, MouseEvent } from "react";
2
+ export interface ToggleButtonProps extends ComponentProps<"button"> {
3
+ selected?: boolean;
4
+ onChange?: (event: MouseEvent<HTMLButtonElement>) => void;
5
+ value: string | ReadonlyArray<string> | number | undefined;
6
+ }
7
+ export declare const ToggleButton: import("react").ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1 @@
1
+ export * from "./ToggleButton";
@@ -0,0 +1,25 @@
1
+ import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
2
+ export interface ToggleButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
3
+ /**
4
+ * The default value. Use when the component is not controlled.
5
+ */
6
+ defaultValue?: string | ReadonlyArray<string> | number | undefined;
7
+ /**
8
+ * If `true`, the Toggle Button Group will be disabled.
9
+ */
10
+ disabled?: boolean;
11
+ /**
12
+ * The value. Use when the component is controlled.
13
+ */
14
+ value?: string | ReadonlyArray<string> | number | undefined;
15
+ /**
16
+ * Callback fired when the selection changes.
17
+ * @param event
18
+ */
19
+ onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;
20
+ /**
21
+ * The orientation of the toggle buttons.
22
+ */
23
+ orientation?: "horizontal" | "vertical";
24
+ }
25
+ export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,10 @@
1
+ import { SyntheticEvent } from "react";
2
+ export interface ToggleButtonGroupContextValue {
3
+ disabled?: boolean;
4
+ select: (event: SyntheticEvent<HTMLButtonElement>) => void;
5
+ isSelected: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
6
+ focus: (id: string | ReadonlyArray<string> | number | undefined) => void;
7
+ isFocused: (id: string | ReadonlyArray<string> | number | undefined) => boolean;
8
+ }
9
+ export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | undefined>;
10
+ export declare function useToggleButtonGroup(): ToggleButtonGroupContextValue | undefined;
@@ -0,0 +1,2 @@
1
+ export * from "./ToggleButtonGroup";
2
+ export { useToggleButtonGroup } from "./ToggleButtonGroupContext";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/core",
3
- "version": "1.8.0-rc.3",
3
+ "version": "1.8.0-rc.4",
4
4
  "license": "Apache-2.0",
5
5
  "main": "dist-cjs/index.js",
6
6
  "sideEffects": false,
@@ -21,8 +21,8 @@
21
21
  "module": "dist-es/index.js",
22
22
  "typings": "dist-types/index.d.ts",
23
23
  "dependencies": {
24
+ "clsx": "^2.0.0",
24
25
  "@floating-ui/react": "^0.23.0",
25
- "clsx": "^1.2.1",
26
26
  "@salt-ds/window": "^0.1.0",
27
27
  "@salt-ds/styles": "^0.1.0",
28
28
  "@salt-ds/icons": "^1.5.0"