reshaped 3.8.3 → 3.8.4-canary.1
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.
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +8 -8
- package/dist/components/Accordion/Accordion.d.ts +1 -6
- package/dist/components/Accordion/Accordion.js +0 -4
- package/dist/components/Accordion/index.d.ts +8 -1
- package/dist/components/Accordion/index.js +7 -1
- package/dist/components/Actionable/Actionable.types.d.ts +1 -1
- package/dist/components/Autocomplete/Autocomplete.d.ts +2 -4
- package/dist/components/Autocomplete/Autocomplete.js +1 -2
- package/dist/components/Autocomplete/index.d.ts +5 -1
- package/dist/components/Autocomplete/index.js +4 -1
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +1 -1
- package/dist/components/Badge/Badge.d.ts +2 -1
- package/dist/components/Badge/Badge.js +0 -2
- package/dist/components/Badge/Badge.types.d.ts +1 -6
- package/dist/components/Badge/index.d.ts +6 -1
- package/dist/components/Badge/index.js +5 -1
- package/dist/components/Badge/tests/Badge.stories.d.ts +3 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +1 -4
- package/dist/components/Breadcrumbs/Breadcrumbs.js +0 -2
- package/dist/components/Breadcrumbs/index.d.ts +6 -1
- package/dist/components/Breadcrumbs/index.js +5 -1
- package/dist/components/Button/Button.d.ts +14 -1
- package/dist/components/Button/Button.js +0 -4
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Button/Button.types.d.ts +1 -7
- package/dist/components/Button/index.d.ts +8 -1
- package/dist/components/Button/index.js +7 -1
- package/dist/components/Button/tests/Button.stories.d.ts +16 -1
- package/dist/components/Carousel/Carousel.types.d.ts +2 -1
- package/dist/components/Carousel/CarouselControl.d.ts +2 -1
- package/dist/components/ContextMenu/ContextMenu.d.ts +1 -8
- package/dist/components/ContextMenu/ContextMenu.js +0 -5
- package/dist/components/ContextMenu/index.d.ts +10 -1
- package/dist/components/ContextMenu/index.js +9 -1
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +7 -15
- package/dist/components/DropdownMenu/DropdownMenu.js +7 -14
- package/dist/components/DropdownMenu/index.d.ts +12 -1
- package/dist/components/DropdownMenu/index.js +11 -1
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +5 -5
- package/dist/components/FileUpload/FileUpload.d.ts +2 -4
- package/dist/components/FileUpload/FileUpload.js +1 -2
- package/dist/components/FileUpload/index.d.ts +5 -1
- package/dist/components/FileUpload/index.js +4 -1
- package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +1 -1
- package/dist/components/Flyout/Flyout.d.ts +1 -6
- package/dist/components/Flyout/Flyout.js +0 -4
- package/dist/components/Flyout/index.d.ts +8 -1
- package/dist/components/Flyout/index.js +7 -1
- package/dist/components/FormControl/FormControl.d.ts +1 -8
- package/dist/components/FormControl/FormControl.js +0 -6
- package/dist/components/FormControl/index.d.ts +10 -1
- package/dist/components/FormControl/index.js +9 -1
- package/dist/components/Grid/Grid.d.ts +4 -4
- package/dist/components/Grid/Grid.js +1 -2
- package/dist/components/Grid/index.d.ts +5 -1
- package/dist/components/Grid/index.js +4 -1
- package/dist/components/Grid/tests/Grid.stories.d.ts +2 -4
- package/dist/components/MenuItem/MenuItem.d.ts +12 -1
- package/dist/components/MenuItem/MenuItem.js +0 -2
- package/dist/components/MenuItem/MenuItem.types.d.ts +1 -6
- package/dist/components/MenuItem/index.d.ts +6 -1
- package/dist/components/MenuItem/index.js +5 -1
- package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +13 -1
- package/dist/components/Modal/Modal.d.ts +3 -6
- package/dist/components/Modal/Modal.js +2 -4
- package/dist/components/Modal/index.d.ts +6 -1
- package/dist/components/Modal/index.js +5 -1
- package/dist/components/Modal/tests/Modal.stories.d.ts +2 -2
- package/dist/components/Popover/Popover.d.ts +2 -7
- package/dist/components/Popover/Popover.js +1 -4
- package/dist/components/Popover/index.d.ts +8 -1
- package/dist/components/Popover/index.js +7 -1
- package/dist/components/Popover/tests/Popover.stories.d.ts +1 -1
- package/dist/components/Resizable/Resizable.d.ts +2 -4
- package/dist/components/Resizable/Resizable.js +4 -5
- package/dist/components/Resizable/index.d.ts +7 -1
- package/dist/components/Resizable/index.js +6 -1
- package/dist/components/Resizable/tests/Resizable.stories.d.ts +2 -2
- package/dist/components/Select/Select.d.ts +1 -8
- package/dist/components/Select/Select.js +0 -6
- package/dist/components/Select/index.d.ts +10 -1
- package/dist/components/Select/index.js +9 -1
- package/dist/components/Stepper/Stepper.d.ts +2 -4
- package/dist/components/Stepper/Stepper.js +1 -2
- package/dist/components/Stepper/index.d.ts +5 -1
- package/dist/components/Stepper/index.js +4 -1
- package/dist/components/Stepper/tests/Stepper.stories.d.ts +1 -4
- package/dist/components/Table/Table.d.ts +6 -12
- package/dist/components/Table/Table.js +5 -10
- package/dist/components/Table/index.d.ts +9 -1
- package/dist/components/Table/index.js +8 -1
- package/dist/components/Table/tests/Table.stories.d.ts +5 -5
- package/dist/components/Tabs/Tabs.d.ts +1 -8
- package/dist/components/Tabs/Tabs.js +0 -6
- package/dist/components/Tabs/index.d.ts +10 -1
- package/dist/components/Tabs/index.js +9 -1
- package/dist/components/TextArea/TextArea.d.ts +1 -4
- package/dist/components/TextArea/TextArea.js +0 -2
- package/dist/components/TextArea/index.d.ts +6 -1
- package/dist/components/TextArea/index.js +5 -1
- package/dist/components/TextField/TextField.d.ts +1 -4
- package/dist/components/TextField/TextField.js +0 -2
- package/dist/components/TextField/index.d.ts +6 -1
- package/dist/components/TextField/index.js +5 -1
- package/dist/components/Timeline/Timeline.d.ts +2 -4
- package/dist/components/Timeline/Timeline.js +1 -2
- package/dist/components/Timeline/index.d.ts +5 -1
- package/dist/components/Timeline/index.js +4 -1
- package/dist/components/Timeline/tests/Timeline.stories.d.ts +1 -1
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +4 -0
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +15 -0
- package/dist/components/View/View.d.ts +4 -4
- package/dist/components/View/View.js +1 -2
- package/dist/components/View/index.d.ts +5 -1
- package/dist/components/View/index.js +4 -1
- package/dist/components/View/tests/View.stories.d.ts +2 -4
- package/dist/components/_private/Portal/Portal.d.ts +3 -5
- package/dist/components/_private/Portal/Portal.js +1 -2
- package/dist/components/_private/Portal/index.d.ts +5 -1
- package/dist/components/_private/Portal/index.js +4 -1
- package/dist/{cjs/config/postcss.js → config/postcss.cjs} +4 -4
- package/dist/{cjs/config/postcss.d.ts → config/postcss.d.cts} +3 -3
- package/dist/config/postcss.js +3 -0
- package/dist/hooks/useOnClickOutside.js +7 -3
- package/package.json +6 -6
- package/dist/cjs/cli/theming/index.d.ts +0 -4
- package/dist/cjs/cli/theming/index.js +0 -40
- package/dist/cjs/cli/theming/reshaped.config.d.ts +0 -3
- package/dist/cjs/cli/theming/reshaped.config.js +0 -25
- package/dist/cjs/cli/theming/tailwind.d.ts +0 -2
- package/dist/cjs/cli/theming/tailwind.js +0 -83
- package/dist/cjs/config/tailwind.d.ts +0 -2
- package/dist/cjs/config/tailwind.js +0 -86
- package/dist/cjs/constants/breakpoints.d.ts +0 -6
- package/dist/cjs/constants/breakpoints.js +0 -7
- package/dist/cjs/themes/_generator/constants.d.ts +0 -2
- package/dist/cjs/themes/_generator/constants.js +0 -11
- package/dist/cjs/themes/_generator/definitions/figma.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/figma.js +0 -197
- package/dist/cjs/themes/_generator/definitions/reshaped.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/reshaped.js +0 -210
- package/dist/cjs/themes/_generator/definitions/slate.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/slate.js +0 -12
- package/dist/cjs/themes/_generator/tokens/color/color.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/color.transforms.js +0 -44
- package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts +0 -33
- package/dist/cjs/themes/_generator/tokens/color/color.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.d.ts +0 -20
- package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.js +0 -64
- package/dist/cjs/themes/_generator/tokens/color/utilities/convert.d.ts +0 -11
- package/dist/cjs/themes/_generator/tokens/color/utilities/convert.js +0 -33
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +0 -152
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.js +0 -68
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.js +0 -38
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.js +0 -48
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.js +0 -21
- package/dist/cjs/themes/_generator/tokens/css.d.ts +0 -6
- package/dist/cjs/themes/_generator/tokens/css.js +0 -52
- package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/duration/duration.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/duration/duration.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/easing/easing.types.d.ts +0 -7
- package/dist/cjs/themes/_generator/tokens/easing/easing.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/font/font.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/font/font.transforms.js +0 -43
- package/dist/cjs/themes/_generator/tokens/font/font.types.d.ts +0 -11
- package/dist/cjs/themes/_generator/tokens/font/font.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/radius/radius.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/radius/radius.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.js +0 -22
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.d.ts +0 -13
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/transforms.d.ts +0 -13
- package/dist/cjs/themes/_generator/tokens/transforms.js +0 -30
- package/dist/cjs/themes/_generator/tokens/types.d.ts +0 -62
- package/dist/cjs/themes/_generator/tokens/types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/unit/unit.types.d.ts +0 -5
- package/dist/cjs/themes/_generator/tokens/unit/unit.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.d.ts +0 -5
- package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.js +0 -16
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.js +0 -27
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.d.ts +0 -9
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.js +0 -2
- package/dist/cjs/themes/_generator/transform.d.ts +0 -8
- package/dist/cjs/themes/_generator/transform.js +0 -108
- package/dist/cjs/themes/_generator/types.d.ts +0 -15
- package/dist/cjs/themes/_generator/types.js +0 -2
- package/dist/cjs/themes/_generator/utilities/mergeDefinitions.d.ts +0 -3
- package/dist/cjs/themes/_generator/utilities/mergeDefinitions.js +0 -19
- package/dist/cjs/themes/figma/media.css +0 -1
- package/dist/cjs/themes/figma/tailwind.css +0 -1
- package/dist/cjs/themes/figma/theme.css +0 -1
- package/dist/cjs/themes/fragments/twitter/tailwind.css +0 -1
- package/dist/cjs/themes/fragments/twitter/theme.css +0 -1
- package/dist/cjs/themes/index.d.ts +0 -23
- package/dist/cjs/themes/index.js +0 -21
- package/dist/cjs/themes/reshaped/media.css +0 -1
- package/dist/cjs/themes/reshaped/tailwind.css +0 -1
- package/dist/cjs/themes/reshaped/theme.css +0 -1
- package/dist/cjs/themes/slate/media.css +0 -1
- package/dist/cjs/themes/slate/tailwind.css +0 -1
- package/dist/cjs/themes/slate/theme.css +0 -1
- package/dist/cjs/types/config.d.ts +0 -20
- package/dist/cjs/types/config.js +0 -2
- package/dist/cjs/utilities/string.d.ts +0 -2
- package/dist/cjs/utilities/string.js +0 -15
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import AccordionTrigger from "./AccordionTrigger";
|
|
2
|
-
import AccordionContent from "./AccordionContent";
|
|
3
1
|
import * as T from "./Accordion.types";
|
|
4
|
-
declare const Accordion: React.FC<T.Props
|
|
5
|
-
Trigger: typeof AccordionTrigger;
|
|
6
|
-
Content: typeof AccordionContent;
|
|
7
|
-
};
|
|
2
|
+
declare const Accordion: React.FC<T.Props>;
|
|
8
3
|
export default Accordion;
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import AccordionControlled from "./AccordionControlled.js";
|
|
3
3
|
import AccordionUncontrolled from "./AccordionUncontrolled.js";
|
|
4
|
-
import AccordionTrigger from "./AccordionTrigger.js";
|
|
5
|
-
import AccordionContent from "./AccordionContent.js";
|
|
6
4
|
const Accordion = (props) => {
|
|
7
5
|
const { active } = props;
|
|
8
6
|
if (active !== undefined)
|
|
9
7
|
return _jsx(AccordionControlled, { ...props });
|
|
10
8
|
return _jsx(AccordionUncontrolled, { ...props });
|
|
11
9
|
};
|
|
12
|
-
Accordion.Trigger = AccordionTrigger;
|
|
13
|
-
Accordion.Content = AccordionContent;
|
|
14
10
|
Accordion.displayName = "Accordion";
|
|
15
11
|
export default Accordion;
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import Accordion from "./Accordion";
|
|
2
|
+
import AccordionTrigger from "./AccordionTrigger";
|
|
3
|
+
import AccordionContent from "./AccordionContent";
|
|
4
|
+
declare const AccordionRoot: typeof Accordion & {
|
|
5
|
+
Trigger: typeof AccordionTrigger;
|
|
6
|
+
Content: typeof AccordionContent;
|
|
7
|
+
};
|
|
8
|
+
export default AccordionRoot;
|
|
2
9
|
export type { Props as AccordionProps } from "./Accordion.types";
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import Accordion from "./Accordion.js";
|
|
2
|
+
import AccordionTrigger from "./AccordionTrigger.js";
|
|
3
|
+
import AccordionContent from "./AccordionContent.js";
|
|
4
|
+
const AccordionRoot = Accordion;
|
|
5
|
+
AccordionRoot.Trigger = AccordionTrigger;
|
|
6
|
+
AccordionRoot.Content = AccordionContent;
|
|
7
|
+
export default AccordionRoot;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import * as T from "./Autocomplete.types";
|
|
3
|
-
declare const Autocomplete: React.FC<T.Props
|
|
4
|
-
|
|
5
|
-
};
|
|
6
|
-
declare const AutocompleteItem: React.FC<T.ItemProps>;
|
|
3
|
+
declare const Autocomplete: React.FC<T.Props>;
|
|
4
|
+
export declare const AutocompleteItem: React.FC<T.ItemProps>;
|
|
7
5
|
export default Autocomplete;
|
|
@@ -145,7 +145,7 @@ const Autocomplete = (props) => {
|
|
|
145
145
|
"aria-autocomplete": "list",
|
|
146
146
|
} })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick, role: "listbox", ref: contentRef }, children: children })] }) }));
|
|
147
147
|
};
|
|
148
|
-
const AutocompleteItem = (props) => {
|
|
148
|
+
export const AutocompleteItem = (props) => {
|
|
149
149
|
const { value, data, onClick, disabled, ...menuItemProps } = props;
|
|
150
150
|
const { onItemClick, highlightedId } = React.useContext(AutocompleteContext);
|
|
151
151
|
const id = useElementId();
|
|
@@ -161,7 +161,6 @@ const AutocompleteItem = (props) => {
|
|
|
161
161
|
tabIndex: highlighted ? 0 : -1,
|
|
162
162
|
}, onClick: handleClick }));
|
|
163
163
|
};
|
|
164
|
-
Autocomplete.Item = AutocompleteItem;
|
|
165
164
|
Autocomplete.displayName = "Autocomplete";
|
|
166
165
|
AutocompleteItem.displayName = "Autocomplete.Item";
|
|
167
166
|
export default Autocomplete;
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import Autocomplete, { AutocompleteItem } from "./Autocomplete";
|
|
2
|
+
declare const AutocompleteRoot: typeof Autocomplete & {
|
|
3
|
+
Item: typeof AutocompleteItem;
|
|
4
|
+
};
|
|
5
|
+
export default AutocompleteRoot;
|
|
2
6
|
export type { Props as AutocompleteProps, Instance as AutocompleteInstance, } from "./Autocomplete.types";
|
|
@@ -4,7 +4,7 @@ import { Mock } from "storybook/test";
|
|
|
4
4
|
declare const _default: {
|
|
5
5
|
title: string;
|
|
6
6
|
component: React.FC<import("./..").AutocompleteProps> & {
|
|
7
|
-
Item:
|
|
7
|
+
Item: typeof import("../Autocomplete").AutocompleteItem;
|
|
8
8
|
};
|
|
9
9
|
parameters: {
|
|
10
10
|
iframe: {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type ActionableRef } from "../Actionable";
|
|
1
2
|
import type * as T from "./Badge.types";
|
|
2
|
-
declare const Badge: T.
|
|
3
|
+
declare const Badge: import("react").ForwardRefExoticComponent<T.Props & import("react").RefAttributes<ActionableRef>>;
|
|
3
4
|
export default Badge;
|
|
@@ -4,7 +4,6 @@ import Text from "../Text/index.js";
|
|
|
4
4
|
import Icon from "../Icon/index.js";
|
|
5
5
|
import IconClose from "../../icons/Close.js";
|
|
6
6
|
import Actionable from "../Actionable/index.js";
|
|
7
|
-
import BadgeContainer from "./BadgeContainer.js";
|
|
8
7
|
import s from "./Badge.module.css";
|
|
9
8
|
import { forwardRef } from "react";
|
|
10
9
|
const Badge = forwardRef((props, ref) => {
|
|
@@ -20,6 +19,5 @@ const Badge = forwardRef((props, ref) => {
|
|
|
20
19
|
"aria-hidden": hidden ? "true" : undefined,
|
|
21
20
|
}, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
|
|
22
21
|
});
|
|
23
|
-
Badge.Container = BadgeContainer;
|
|
24
22
|
Badge.displayName = "Badge";
|
|
25
23
|
export default Badge;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
|
-
import type { ActionableProps
|
|
2
|
+
import type { ActionableProps } from "../Actionable";
|
|
3
3
|
import type { IconProps } from "../Icon";
|
|
4
4
|
import type * as G from "../../types/global";
|
|
5
5
|
type BaseProps = {
|
|
@@ -62,9 +62,4 @@ export type ContainerProps = {
|
|
|
62
62
|
/** Additional attributes for the root element */
|
|
63
63
|
attributes?: G.Attributes<"div">;
|
|
64
64
|
};
|
|
65
|
-
export type Export = React.ForwardRefExoticComponent<Props & {
|
|
66
|
-
ref?: ActionableRef;
|
|
67
|
-
}> & {
|
|
68
|
-
Container: React.ComponentType<ContainerProps>;
|
|
69
|
-
};
|
|
70
65
|
export {};
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import Badge from "./Badge";
|
|
2
|
+
import BadgeContainer from "./BadgeContainer";
|
|
3
|
+
declare const BadgeRoot: typeof Badge & {
|
|
4
|
+
Container: typeof BadgeContainer;
|
|
5
|
+
};
|
|
6
|
+
export default BadgeRoot;
|
|
2
7
|
export type { Props as BadgeProps } from "./Badge.types";
|
|
@@ -3,7 +3,9 @@ import { StoryObj } from "@storybook/react-vite";
|
|
|
3
3
|
import { fn } from "storybook/test";
|
|
4
4
|
declare const _default: {
|
|
5
5
|
title: string;
|
|
6
|
-
component: import("
|
|
6
|
+
component: React.ForwardRefExoticComponent<import("./..").BadgeProps & React.RefAttributes<import("../../Actionable").ActionableRef>> & {
|
|
7
|
+
Container: React.FC<import("../Badge.types").ContainerProps>;
|
|
8
|
+
};
|
|
7
9
|
parameters: {
|
|
8
10
|
iframe: {
|
|
9
11
|
url: string;
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import BreadcrumbsItem from "./BreadcrumbsItem";
|
|
3
2
|
import * as T from "./Breadcrumbs.types";
|
|
4
|
-
declare const Breadcrumbs: React.FC<T.Props
|
|
5
|
-
Item: typeof BreadcrumbsItem;
|
|
6
|
-
};
|
|
3
|
+
declare const Breadcrumbs: React.FC<T.Props>;
|
|
7
4
|
export default Breadcrumbs;
|
|
@@ -8,7 +8,6 @@ import Text from "../Text/index.js";
|
|
|
8
8
|
import Button from "../Button/index.js";
|
|
9
9
|
import IconChevronRight from "../../icons/ChevronRight.js";
|
|
10
10
|
import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
|
|
11
|
-
import BreadcrumbsItem from "./BreadcrumbsItem.js";
|
|
12
11
|
const Breadcrumbs = (props) => {
|
|
13
12
|
const { children, separator, color, defaultVisibleItems, expandAriaLabel, disableExpand, ariaLabel, className, attributes, } = props;
|
|
14
13
|
const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
|
|
@@ -41,6 +40,5 @@ const Breadcrumbs = (props) => {
|
|
|
41
40
|
return (_jsxs(View, { as: "li", gap: 2, direction: "row", align: "center", children: [index > 0 && (isDisplayed || isCollapseButton) && (_jsx(Text, { color: "neutral-faded", children: separator || _jsx(Icon, { svg: IconChevronRight, size: 3 }) })), _jsx(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded", children: itemNode })] }, index));
|
|
42
41
|
}) }) }));
|
|
43
42
|
};
|
|
44
|
-
Breadcrumbs.Item = BreadcrumbsItem;
|
|
45
43
|
Breadcrumbs.displayName = "Breadcrumbs";
|
|
46
44
|
export default Breadcrumbs;
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import Breadcrumbs from "./Breadcrumbs";
|
|
2
|
+
import BreadcrumbsItem from "./BreadcrumbsItem";
|
|
3
|
+
declare const BreadcrumbsRoot: typeof Breadcrumbs & {
|
|
4
|
+
Item: typeof BreadcrumbsItem;
|
|
5
|
+
};
|
|
6
|
+
export default BreadcrumbsRoot;
|
|
2
7
|
export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types";
|
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
import { type ActionableRef } from "../Actionable";
|
|
1
2
|
import type * as T from "./Button.types";
|
|
2
|
-
declare const Button:
|
|
3
|
+
declare const Button: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "children" | "className" | "attributes" | "as" | "render" | "type" | "href" | "onClick" | "stopPropagation"> & {
|
|
4
|
+
color?: "primary" | "critical" | "positive" | "neutral" | "media" | "inherit";
|
|
5
|
+
variant?: "solid" | "outline" | "ghost" | "faded";
|
|
6
|
+
icon?: import("../Icon").IconProps["svg"];
|
|
7
|
+
endIcon?: import("../Icon").IconProps["svg"];
|
|
8
|
+
size?: import("../..").Responsive<T.Size>;
|
|
9
|
+
rounded?: boolean;
|
|
10
|
+
loading?: boolean;
|
|
11
|
+
loadingAriaLabel?: string;
|
|
12
|
+
elevated?: boolean;
|
|
13
|
+
fullWidth?: import("../..").Responsive<boolean>;
|
|
14
|
+
highlighted?: boolean;
|
|
15
|
+
} & import("react").RefAttributes<ActionableRef>>;
|
|
3
16
|
export default Button;
|
|
@@ -4,8 +4,6 @@ import { classNames, responsiveClassNames, responsivePropDependency } from "../.
|
|
|
4
4
|
import Icon from "../Icon/index.js";
|
|
5
5
|
import Loader from "../Loader/index.js";
|
|
6
6
|
import Actionable from "../Actionable/index.js";
|
|
7
|
-
import ButtonGroup from "./ButtonGroup.js";
|
|
8
|
-
import ButtonAligner from "./ButtonAligner.js";
|
|
9
7
|
import s from "./Button.module.css";
|
|
10
8
|
const Button = forwardRef((props, ref) => {
|
|
11
9
|
const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, render, className, attributes, } = props;
|
|
@@ -32,7 +30,5 @@ const Button = forwardRef((props, ref) => {
|
|
|
32
30
|
"data-rs-aligner-target": true,
|
|
33
31
|
}, type: type, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, render: render, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { color: "inherit", attributes: { "aria-label": loadingAriaLabel } }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
|
|
34
32
|
});
|
|
35
|
-
Button.Group = ButtonGroup;
|
|
36
|
-
Button.Aligner = ButtonAligner;
|
|
37
33
|
Button.displayName = "Button";
|
|
38
34
|
export default Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-highlight-opacity:0;--rs-button-highlight-opacity-base:0;--rs-button-border-color:transparent;--rs-button-border-width:0px;align-items:center;border:var(--rs-button-border-width) solid var(--rs-button-border-color);border-radius:var(--rs-button-radius);cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-p-v) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;background-color:var(--rs-button-background-color);box-sizing:content-box;color:var(--rs-button-foreground-color);font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:var(--rs-button-line-height);min-width:calc(var(--rs-button-line-height) - (var(--rs-p-h) - var(--rs-p-v)) * 2)}.root:before{background:var(--rs-button-highlight-color,var(--rs-button-foreground-color));content:"";inset:0;opacity:var(--rs-button-highlight-opacity-base);position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading,.--highlighted,.--disabled):before{opacity:var(--rs-button-highlight-opacity)}}.root.--highlighted:before,.root:active:not(.--loading,.--disabled):before{opacity:calc(var(--rs-button-highlight-opacity) + max(.04, var(--rs-button-highlight-opacity) / 2))}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-solid.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-foreground-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-primary);--rs-button-foreground-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-critical);--rs-button-foreground-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-positive);--rs-button-foreground-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-highlight-opacity:0.06;--rs-button-background-color:var(--rs-color-white);--rs-button-foreground-color:var(--rs-color-black)}.root.--variant-faded.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral-faded);--rs-button-foreground-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-primary{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-primary-faded);--rs-button-foreground-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-critical{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-critical-faded);--rs-button-foreground-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-positive{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-positive-faded);--rs-button-foreground-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-media{--rs-button-highlight-opacity-base:0.24;--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-white);--rs-button-highlight-color:var(--rs-color-black)}.root.--variant-faded.--color-inherit{--rs-button-highlight-opacity-base:0.12;--rs-button-highlight-opacity:0.16;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline{--rs-button-border-width:1px;--rs-button-highlight-opacity:0.06}.root.--variant-outline.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-border-color:var(--rs-color-border-primary-faded);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-outline.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-border-color:var(--rs-color-border-critical-faded);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-outline.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-border-color:var(--rs-color-border-positive-faded);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-outline.--color-neutral{--rs-button-highlight-opacity:0.24;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-border-color:var(--rs-color-border-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-outline.--color-inherit{--rs-button-border-width:0px;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.28;pointer-events:none;position:absolute}.root.--variant-ghost{--rs-button-highlight-opacity:0.12}.root.--variant-ghost.--color-neutral{--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-inherit{--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--elevated:not(:focus),[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:active,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:active,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:active,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:active,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:active,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:active:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:active:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:active:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:active:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:active:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:active.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:active.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:active.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:active.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:active.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:active.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:active.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:active.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:active.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:active.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:active.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:active.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:active.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:active.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:active.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:active,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-outline:not(:last-child){border-inline-end-width:0}.group .root.--variant-outline.--highlighted:not(:last-child){border-inline-end-width:1px}.group .root.--variant-outline.--highlighted:not(:last-child)+.root{border-inline-start-width:0}.group .root:not(.--variant-outline){border-inline-end:0 solid var(--rs-button-group-separator-color)}.group .root:not(.--variant-outline):not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:not(.--variant-outline).--highlighted:not(:last-child){border-inline-end-width:1px}.group .root:not(.--variant-outline).--highlighted:not(:last-child)+.root{border-inline-start-width:0}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-faded.--color-neutral,.group .root.--variant-outline.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-faded.--color-positive,.group .root.--variant-outline.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical,.group .root.--variant-outline.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary,.group .root.--variant-outline.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-media{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.12)}.group .root.--variant-faded.--color-media{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.12)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
|
|
1
|
+
.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-highlight-opacity:0;--rs-button-highlight-opacity-base:0;--rs-button-border-color:transparent;--rs-button-border-width:0px;align-items:center;border:var(--rs-button-border-width) solid var(--rs-button-border-color);border-radius:var(--rs-button-radius);cursor:pointer;display:inline-flex;justify-content:center;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;background-color:var(--rs-button-background-color);box-sizing:border-box;color:var(--rs-button-foreground-color);font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:before{background:var(--rs-button-highlight-color,var(--rs-button-foreground-color));border-radius:var(--rs-button-radius);content:"";inset:0;opacity:var(--rs-button-highlight-opacity-base);position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading,.--highlighted,.--disabled):before{opacity:var(--rs-button-highlight-opacity)}}.root.--highlighted:before,.root:active:not(.--loading,.--disabled):before{opacity:calc(var(--rs-button-highlight-opacity) + max(.04, var(--rs-button-highlight-opacity) / 2))}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-solid.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-foreground-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-primary);--rs-button-foreground-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-critical);--rs-button-foreground-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-highlight-opacity:0.08;--rs-button-background-color:var(--rs-color-background-positive);--rs-button-foreground-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-highlight-opacity:0.06;--rs-button-background-color:var(--rs-color-white);--rs-button-foreground-color:var(--rs-color-black)}.root.--variant-faded.--color-neutral{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-neutral-faded);--rs-button-foreground-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-primary{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-primary-faded);--rs-button-foreground-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-critical{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-critical-faded);--rs-button-foreground-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-positive{--rs-button-highlight-opacity:0.04;--rs-button-background-color:var(--rs-color-background-positive-faded);--rs-button-foreground-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-media{--rs-button-highlight-opacity-base:0.24;--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-white);--rs-button-highlight-color:var(--rs-color-black)}.root.--variant-faded.--color-inherit{--rs-button-highlight-opacity-base:0.12;--rs-button-highlight-opacity:0.16;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline{--rs-button-border-width:1px;--rs-button-highlight-opacity:0.06}.root.--variant-outline.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-border-color:var(--rs-color-border-primary-faded);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-outline.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-border-color:var(--rs-color-border-critical-faded);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-outline.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-border-color:var(--rs-color-border-positive-faded);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-outline.--color-neutral{--rs-button-highlight-opacity:0.24;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-border-color:var(--rs-color-border-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-outline.--color-inherit{--rs-button-border-width:0px;--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.28;pointer-events:none;position:absolute}.root.--variant-ghost{--rs-button-highlight-opacity:0.12}.root.--variant-ghost.--color-neutral{--rs-button-highlight-opacity:0.32;--rs-button-foreground-color:var(--rs-color-foreground-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-primary{--rs-button-foreground-color:var(--rs-color-foreground-primary);--rs-button-highlight-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-critical{--rs-button-foreground-color:var(--rs-color-foreground-critical);--rs-button-highlight-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-positive{--rs-button-foreground-color:var(--rs-color-foreground-positive);--rs-button-highlight-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-inherit{--rs-button-foreground-color:inherit;--rs-button-highlight-color:currentcolor}.root.--elevated:not(:focus),[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:active,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:active,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:active,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:active,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:active,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:active:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:active:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:active:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:active:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:active:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:active.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:active.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:active.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:active.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:active.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:active.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:active.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:active.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:active.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:active.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:active.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:active.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:active.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:active.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:active.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:active,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root,.group .root:before{border-radius:0}.group .root:first-child,.group .root:first-child:before{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:last-child,.group .root:last-child:before{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:not(:last-child){border-inline-end:0;border-inline-end:0 solid var(--rs-button-group-separator-color)}.group .root.--highlighted:not(:last-child):after{border-inline-end:1px solid var(--rs-button-group-separator-color);content:"";inset-block:0;inset-inline-end:-1px;pointer-events:none;position:absolute}.group .root.--highlighted:not(:last-child)+.root{border-inline-start-width:0;padding-inline-start:var(--rs-p-h)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-faded.--color-neutral,.group .root.--variant-outline.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-faded.--color-positive,.group .root.--variant-outline.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical,.group .root.--variant-outline.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary,.group .root.--variant-outline.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-media{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.12)}.group .root.--variant-faded.--color-media{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.12)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
2
|
import type { IconProps } from "../Icon";
|
|
3
|
-
import type { ActionableProps
|
|
3
|
+
import type { ActionableProps } from "../Actionable";
|
|
4
4
|
import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
|
|
5
5
|
import type * as G from "../../types/global";
|
|
6
6
|
export type Size = "xlarge" | "large" | "medium" | "small";
|
|
@@ -48,9 +48,3 @@ export type AlignerProps = BaseAlignerProps & {
|
|
|
48
48
|
*/
|
|
49
49
|
position?: BaseAlignerProps["side"];
|
|
50
50
|
};
|
|
51
|
-
export type Export = React.ForwardRefExoticComponent<Props & {
|
|
52
|
-
ref?: ActionableRef;
|
|
53
|
-
}> & {
|
|
54
|
-
Aligner: React.ComponentType<AlignerProps>;
|
|
55
|
-
Group: React.ComponentType<GroupProps>;
|
|
56
|
-
};
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import Button from "./Button";
|
|
2
|
+
import ButtonAligner from "./ButtonAligner";
|
|
3
|
+
import ButtonGroup from "./ButtonGroup";
|
|
4
|
+
declare const ButtonRoot: typeof Button & {
|
|
5
|
+
Aligner: typeof ButtonAligner;
|
|
6
|
+
Group: typeof ButtonGroup;
|
|
7
|
+
};
|
|
8
|
+
export default ButtonRoot;
|
|
2
9
|
export type { Props as ButtonProps, AlignerProps as ButtonAlignerProps, GroupProps as ButtonGroupProps, } from "./Button.types";
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import Button from "./Button.js";
|
|
2
|
+
import ButtonAligner from "./ButtonAligner.js";
|
|
3
|
+
import ButtonGroup from "./ButtonGroup.js";
|
|
4
|
+
const ButtonRoot = Button;
|
|
5
|
+
ButtonRoot.Aligner = ButtonAligner;
|
|
6
|
+
ButtonRoot.Group = ButtonGroup;
|
|
7
|
+
export default ButtonRoot;
|
|
@@ -2,7 +2,22 @@ import { StoryObj } from "@storybook/react-vite";
|
|
|
2
2
|
import { fn } from "storybook/test";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: import("
|
|
5
|
+
component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "as" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
|
|
6
|
+
color?: "primary" | "critical" | "positive" | "neutral" | "media" | "inherit";
|
|
7
|
+
variant?: "solid" | "outline" | "ghost" | "faded";
|
|
8
|
+
icon?: import("../../Icon").IconProps["svg"];
|
|
9
|
+
endIcon?: import("../../Icon").IconProps["svg"];
|
|
10
|
+
size?: import("../../../types/global").Responsive<import("../Button.types").Size>;
|
|
11
|
+
rounded?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
loadingAriaLabel?: string;
|
|
14
|
+
elevated?: boolean;
|
|
15
|
+
fullWidth?: import("../../../types/global").Responsive<boolean>;
|
|
16
|
+
highlighted?: boolean;
|
|
17
|
+
} & import("react").RefAttributes<import("../../Actionable").ActionableRef>> & {
|
|
18
|
+
Aligner: import("react").FC<import("./..").ButtonAlignerProps>;
|
|
19
|
+
Group: import("react").FC<import("./..").ButtonGroupProps>;
|
|
20
|
+
};
|
|
6
21
|
parameters: {
|
|
7
22
|
iframe: {
|
|
8
23
|
url: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
2
|
import type * as G from "../../types/global";
|
|
3
|
+
import type { ActionableRef } from "../Actionable";
|
|
3
4
|
export type Instance = {
|
|
4
5
|
/** Scroll to the previous item */
|
|
5
6
|
navigateBack: () => void;
|
|
@@ -10,7 +11,7 @@ export type Instance = {
|
|
|
10
11
|
} | undefined;
|
|
11
12
|
export type ControlProps = {
|
|
12
13
|
type: "back" | "forward";
|
|
13
|
-
oppositeControlElRef: React.RefObject<
|
|
14
|
+
oppositeControlElRef: React.RefObject<ActionableRef | null>;
|
|
14
15
|
scrollElRef: React.RefObject<HTMLElement | null>;
|
|
15
16
|
scrollPosition: number;
|
|
16
17
|
onClick: () => void;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ActionableRef } from "../Actionable";
|
|
1
2
|
import * as T from "./Carousel.types";
|
|
2
|
-
declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<
|
|
3
|
+
declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<ActionableRef>>;
|
|
3
4
|
export default CarouselControl;
|
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import DropdownMenu from "../DropdownMenu";
|
|
3
2
|
import type * as T from "./ContextMenu.types";
|
|
4
|
-
declare const ContextMenu: React.FC<T.Props
|
|
5
|
-
Content: typeof DropdownMenu.Content;
|
|
6
|
-
Item: typeof DropdownMenu.Item;
|
|
7
|
-
Section: typeof DropdownMenu.Section;
|
|
8
|
-
SubMenu: typeof DropdownMenu.SubMenu;
|
|
9
|
-
SubTrigger: typeof DropdownMenu.SubTrigger;
|
|
10
|
-
};
|
|
3
|
+
declare const ContextMenu: React.FC<T.Props>;
|
|
11
4
|
export default ContextMenu;
|
|
@@ -33,10 +33,5 @@ const ContextMenu = (props) => {
|
|
|
33
33
|
onClose?.(args);
|
|
34
34
|
} }) }));
|
|
35
35
|
};
|
|
36
|
-
ContextMenu.Content = DropdownMenu.Content;
|
|
37
|
-
ContextMenu.Item = DropdownMenu.Item;
|
|
38
|
-
ContextMenu.Section = DropdownMenu.Section;
|
|
39
|
-
ContextMenu.SubMenu = DropdownMenu.SubMenu;
|
|
40
|
-
ContextMenu.SubTrigger = DropdownMenu.SubTrigger;
|
|
41
36
|
ContextMenu.displayName = "ContextMenu";
|
|
42
37
|
export default ContextMenu;
|
|
@@ -1,2 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
import DropdownMenu from "../DropdownMenu";
|
|
2
|
+
import ContextMenu from "./ContextMenu";
|
|
3
|
+
declare const ContextMenuRoot: typeof ContextMenu & {
|
|
4
|
+
Content: typeof DropdownMenu.Content;
|
|
5
|
+
Item: typeof DropdownMenu.Item;
|
|
6
|
+
Section: typeof DropdownMenu.Section;
|
|
7
|
+
SubMenu: typeof DropdownMenu.SubMenu;
|
|
8
|
+
SubTrigger: typeof DropdownMenu.SubTrigger;
|
|
9
|
+
};
|
|
10
|
+
export default ContextMenuRoot;
|
|
2
11
|
export type { Props as ContextMenuProps } from "./ContextMenu.types";
|
|
@@ -1 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import DropdownMenu from "../DropdownMenu/index.js";
|
|
2
|
+
import ContextMenu from "./ContextMenu.js";
|
|
3
|
+
const ContextMenuRoot = ContextMenu;
|
|
4
|
+
ContextMenuRoot.Content = DropdownMenu.Content;
|
|
5
|
+
ContextMenuRoot.Item = DropdownMenu.Item;
|
|
6
|
+
ContextMenuRoot.Section = DropdownMenu.Section;
|
|
7
|
+
ContextMenuRoot.SubMenu = DropdownMenu.SubMenu;
|
|
8
|
+
ContextMenuRoot.SubTrigger = DropdownMenu.SubTrigger;
|
|
9
|
+
export default ContextMenuRoot;
|
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import Popover from "../Popover";
|
|
3
2
|
import type * as T from "./DropdownMenu.types";
|
|
4
|
-
declare const DropdownMenu: React.FC<T.Props
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
SubTrigger: typeof DropdownMenuSubTrigger;
|
|
12
|
-
};
|
|
13
|
-
declare const DropdownMenuContent: React.FC<T.ContentProps>;
|
|
14
|
-
declare const DropdownMenuSection: React.FC<T.SectionProps>;
|
|
15
|
-
declare const DropdownMenuItem: React.FC<T.ItemProps>;
|
|
16
|
-
declare const DropdownMenuSubMenu: React.FC<T.SubMenuProps>;
|
|
17
|
-
declare const DropdownMenuSubTrigger: React.FC<T.SubTriggerProps>;
|
|
3
|
+
declare const DropdownMenu: React.FC<T.Props>;
|
|
4
|
+
export declare const DropdownMenuContent: React.FC<T.ContentProps>;
|
|
5
|
+
export declare const DropdownMenuSection: React.FC<T.SectionProps>;
|
|
6
|
+
export declare const DropdownMenuItem: React.FC<T.ItemProps>;
|
|
7
|
+
export declare const DropdownMenuSubMenu: React.FC<T.SubMenuProps>;
|
|
8
|
+
export declare const DropdownMenuSubTriggerItem: React.FC<T.SubTriggerProps>;
|
|
9
|
+
export declare const DropdownMenuSubTrigger: React.FC<T.SubTriggerProps>;
|
|
18
10
|
export default DropdownMenu;
|
|
@@ -17,7 +17,7 @@ const DropdownMenu = (props) => {
|
|
|
17
17
|
const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", borderRadius = "small", ...popoverProps } = props;
|
|
18
18
|
return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, borderRadius: borderRadius, disableHideAnimation: true, children: children }));
|
|
19
19
|
};
|
|
20
|
-
const DropdownMenuContent = (props) => {
|
|
20
|
+
export const DropdownMenuContent = (props) => {
|
|
21
21
|
const { children, attributes, className } = props;
|
|
22
22
|
const { flyout } = useFlyoutContext();
|
|
23
23
|
const subMenuInstance = React.useContext(DropdownMenuSubContext);
|
|
@@ -41,11 +41,11 @@ const DropdownMenuContent = (props) => {
|
|
|
41
41
|
};
|
|
42
42
|
return (_jsx(Popover.Content, { className: contentClassName, attributes: { ...attributes, ref, onClick: handleClick }, children: children }));
|
|
43
43
|
};
|
|
44
|
-
const DropdownMenuSection = (props) => {
|
|
44
|
+
export const DropdownMenuSection = (props) => {
|
|
45
45
|
const { children } = props;
|
|
46
46
|
return (_jsx("div", { className: s.section, role: "group", children: children }));
|
|
47
47
|
};
|
|
48
|
-
const DropdownMenuItem = (props) => {
|
|
48
|
+
export const DropdownMenuItem = (props) => {
|
|
49
49
|
const { onClick } = props;
|
|
50
50
|
const { handleClose } = useFlyoutContext();
|
|
51
51
|
const subTriggerContext = React.useContext(DropdownMenuSubTriggerContext);
|
|
@@ -61,12 +61,12 @@ const DropdownMenuItem = (props) => {
|
|
|
61
61
|
};
|
|
62
62
|
return (_jsx(MenuItem, { ...props, roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
|
|
63
63
|
};
|
|
64
|
-
const DropdownMenuSubMenu = (props) => {
|
|
64
|
+
export const DropdownMenuSubMenu = (props) => {
|
|
65
65
|
const { children, position = "end-top", contentGap = 0.5, ...dropdownMenuProps } = props;
|
|
66
66
|
const dropdownMenuRef = React.useRef(null);
|
|
67
67
|
return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, triggerType: "hover", position: position, contentGap: contentGap, instanceRef: dropdownMenuRef, children: children }) }));
|
|
68
68
|
};
|
|
69
|
-
const DropdownMenuSubTriggerItem = (props) => {
|
|
69
|
+
export const DropdownMenuSubTriggerItem = (props) => {
|
|
70
70
|
const { children, attributes, ...menuItemProps } = props;
|
|
71
71
|
const subMenuInstance = React.useContext(DropdownMenuSubContext);
|
|
72
72
|
const [rtl] = useRTL();
|
|
@@ -77,22 +77,15 @@ const DropdownMenuSubTriggerItem = (props) => {
|
|
|
77
77
|
}, [], { ref: attributes?.ref, preventDefault: true });
|
|
78
78
|
return (_jsx(DropdownMenuItem, { ...menuItemProps, attributes: { ...attributes, ref: ref }, endSlot: _jsx(Icon, { autoWidth: true, svg: IconChevronRight, className: s.arrow }), children: children }));
|
|
79
79
|
};
|
|
80
|
-
const DropdownMenuSubTrigger = (props) => {
|
|
80
|
+
export const DropdownMenuSubTrigger = (props) => {
|
|
81
81
|
const { attributes, ...menuItemProps } = props;
|
|
82
|
-
return (_jsx(DropdownMenuSubTriggerContext.Provider, { value: true, children: _jsx(
|
|
82
|
+
return (_jsx(DropdownMenuSubTriggerContext.Provider, { value: true, children: _jsx(Popover.Trigger, { children: (triggerAttributes) => {
|
|
83
83
|
return (_jsx(DropdownMenuSubTriggerItem, { ...menuItemProps, attributes: {
|
|
84
84
|
...attributes,
|
|
85
85
|
...triggerAttributes,
|
|
86
86
|
} }));
|
|
87
87
|
} }) }));
|
|
88
88
|
};
|
|
89
|
-
DropdownMenu.Dismissible = Popover.Dismissible;
|
|
90
|
-
DropdownMenu.Trigger = Popover.Trigger;
|
|
91
|
-
DropdownMenu.Content = DropdownMenuContent;
|
|
92
|
-
DropdownMenu.Section = DropdownMenuSection;
|
|
93
|
-
DropdownMenu.Item = DropdownMenuItem;
|
|
94
|
-
DropdownMenu.SubMenu = DropdownMenuSubMenu;
|
|
95
|
-
DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
|
|
96
89
|
DropdownMenu.displayName = "DropdownMenu";
|
|
97
90
|
DropdownMenuContent.displayName = "DropdownMenu.Content";
|
|
98
91
|
DropdownMenuSection.displayName = "DropdownMenu.Section";
|
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import Popover from "../Popover";
|
|
2
|
+
import DropdownMenu, { DropdownMenuContent, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubMenu, DropdownMenuSubTrigger } from "./DropdownMenu";
|
|
3
|
+
declare const DropdownMenuRoot: typeof DropdownMenu & {
|
|
4
|
+
Dismissible: typeof Popover.Dismissible;
|
|
5
|
+
Trigger: typeof Popover.Trigger;
|
|
6
|
+
Content: typeof DropdownMenuContent;
|
|
7
|
+
Section: typeof DropdownMenuSection;
|
|
8
|
+
Item: typeof DropdownMenuItem;
|
|
9
|
+
SubMenu: typeof DropdownMenuSubMenu;
|
|
10
|
+
SubTrigger: typeof DropdownMenuSubTrigger;
|
|
11
|
+
};
|
|
12
|
+
export default DropdownMenuRoot;
|
|
2
13
|
export type { Props as DropdownMenuProps, Instance as DropdownMenuInstance, } from "./DropdownMenu.types";
|