reshaped 2.7.4 → 2.7.5-beta.0

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 (95) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/bin/cli.js +2 -4
  3. package/bundle.css +1 -1
  4. package/bundle.js +8 -8
  5. package/cli/theming/index.d.ts +3 -3
  6. package/cli/theming/index.js +4 -8
  7. package/components/Actionable/Actionable.module.css +1 -1
  8. package/components/Alert/Alert.types.d.ts +1 -1
  9. package/components/Alert/tests/Alert.stories.js +10 -0
  10. package/components/Avatar/Avatar.module.css +1 -1
  11. package/components/Avatar/Avatar.types.d.ts +1 -1
  12. package/components/Avatar/tests/Avatar.stories.js +6 -0
  13. package/components/Badge/Badge.module.css +1 -1
  14. package/components/Badge/Badge.types.d.ts +1 -1
  15. package/components/Badge/tests/Badge.stories.js +12 -0
  16. package/components/Button/Button.module.css +1 -1
  17. package/components/Calendar/useCalendarKeyboardNavigation.js +0 -1
  18. package/components/Carousel/Carousel.module.css +1 -1
  19. package/components/Checkbox/Checkbox.module.css +1 -1
  20. package/components/Divider/Divider.module.css +1 -1
  21. package/components/Hidden/Hidden.module.css +1 -1
  22. package/components/Icon/Icon.module.css +1 -1
  23. package/components/Icon/Icon.types.d.ts +1 -1
  24. package/components/Image/Image.module.css +1 -1
  25. package/components/Loader/Loader.module.css +1 -1
  26. package/components/MenuItem/MenuItem.module.css +1 -1
  27. package/components/Modal/Modal.module.css +1 -1
  28. package/components/Popover/Popover.module.css +1 -1
  29. package/components/Progress/Progress.module.css +1 -1
  30. package/components/Progress/Progress.types.d.ts +1 -1
  31. package/components/Progress/tests/Progress.stories.js +3 -0
  32. package/components/Radio/Radio.module.css +1 -1
  33. package/components/Reshaped/Reshaped.css +1 -1
  34. package/components/Select/Select.module.css +1 -1
  35. package/components/Slider/Slider.module.css +1 -1
  36. package/components/Slider/SliderThumb.js +2 -2
  37. package/components/Table/Table.module.css +1 -1
  38. package/components/Tabs/Tabs.module.css +1 -1
  39. package/components/Text/Text.module.css +1 -1
  40. package/components/Text/Text.types.d.ts +1 -1
  41. package/components/Text/tests/Text.stories.js +3 -0
  42. package/components/TextArea/TextArea.module.css +1 -1
  43. package/components/TextField/TextField.module.css +1 -1
  44. package/components/Theme/Theme.module.css +1 -1
  45. package/components/Toast/Toast.module.css +1 -1
  46. package/components/View/View.module.css +1 -1
  47. package/components/View/View.types.d.ts +2 -2
  48. package/components/View/tests/View.stories.js +22 -0
  49. package/config/postcss.d.ts +18 -3
  50. package/config/postcss.js +18 -4
  51. package/config/tailwind.d.ts +2 -2
  52. package/config/tailwind.js +1 -2
  53. package/package.json +5 -5
  54. package/styles/aspectRatio/aspectRatio.module.css +1 -1
  55. package/styles/bleed/bleed.module.css +1 -1
  56. package/styles/height/height.module.css +1 -1
  57. package/styles/inset/inset.module.css +1 -1
  58. package/styles/maxHeight/maxHeight.module.css +1 -1
  59. package/styles/maxWidth/maxWidth.module.css +1 -1
  60. package/styles/minWidth/minWidth.module.css +1 -1
  61. package/styles/padding/padding.module.css +1 -1
  62. package/styles/position/position.module.css +1 -1
  63. package/styles/radius/radius.module.css +1 -1
  64. package/styles/width/width.module.css +1 -1
  65. package/themes/_generator/constants.js +2 -0
  66. package/themes/_generator/definitions/figma.d.ts +2 -2
  67. package/themes/_generator/definitions/figma.js +6 -0
  68. package/themes/_generator/definitions/reshaped.d.ts +2 -2
  69. package/themes/_generator/definitions/reshaped.js +5 -0
  70. package/themes/_generator/definitions/slate.d.ts +2 -2
  71. package/themes/_generator/tests/themes.stories.js +25 -1
  72. package/themes/_generator/tokens/color/color.types.d.ts +3 -3
  73. package/themes/_generator/tokens/transforms.d.ts +1 -1
  74. package/themes/_generator/tokens/types.d.ts +13 -14
  75. package/themes/_generator/tokens/viewport/viewport.transforms.d.ts +1 -1
  76. package/themes/_generator/tokens/viewport/viewport.types.d.ts +6 -2
  77. package/themes/_generator/transform.js +7 -2
  78. package/themes/_generator/types.d.ts +0 -1
  79. package/themes/_generator/utilities/color.d.ts +5 -1
  80. package/themes/_generator/utilities/color.js +18 -13
  81. package/themes/_generator/utilities/generateColors.d.ts +2 -0
  82. package/themes/_generator/utilities/generateColors.js +15 -10
  83. package/themes/figma/media.css +1 -0
  84. package/themes/figma/theme.css +1 -1
  85. package/themes/index.d.ts +1 -1
  86. package/themes/index.js +2 -4
  87. package/themes/reshaped/media.css +1 -0
  88. package/themes/reshaped/theme.css +1 -1
  89. package/themes/slate/media.css +1 -0
  90. package/themes/slate/theme.css +1 -1
  91. package/types/config.d.ts +3 -3
  92. package/utilities/storybook/Example.js +1 -2
  93. package/themes/_generator/definitions/base.d.ts +0 -3
  94. package/themes/_generator/definitions/base.js +0 -11
  95. package/themes/media.css +0 -5
package/cli/theming/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { PartialUserThemeDefinition } from "../../themes/_generator/tokens/types";
1
+ import type { PartialThemeDefinition } from "../../themes/_generator/tokens/types";
2
2
  import type * as T from "../../themes/_generator/types";
3
- export declare const addThemeFragment: (name: string, definition: PartialUserThemeDefinition, options: T.CLIOptions) => void;
4
- export declare const addTheme: (name: string, definition: PartialUserThemeDefinition, options: T.CLIOptions) => void;
3
+ export declare const addThemeFragment: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;
4
+ export declare const addTheme: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;
package/cli/theming/index.js CHANGED
@@ -10,7 +10,6 @@ const chalk_1 = __importDefault(require("chalk"));
10
10
  const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
11
11
  const transform_1 = __importDefault(require("../../themes/_generator/transform"));
12
12
  const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
13
- const base_1 = __importDefault(require("../../themes/_generator/definitions/base"));
14
13
  const transformDefinition = (name, definition, options) => {
15
14
  const { isFragment, outputPath } = options;
16
15
  const code = (0, transform_1.default)(name, definition, options);
@@ -18,12 +17,11 @@ const transformDefinition = (name, definition, options) => {
18
17
  ? path_1.default.resolve(outputPath, "fragments", name)
19
18
  : path_1.default.resolve(outputPath, name);
20
19
  const themePath = path_1.default.resolve(themeFolderPath, "theme.css");
20
+ const themeMediaPath = path_1.default.resolve(themeFolderPath, "media.css");
21
21
  fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
22
22
  fs_1.default.writeFileSync(themePath, code.variables);
23
- if (code.media) {
24
- const mediaPath = path_1.default.resolve(outputPath, "media.css");
25
- fs_1.default.writeFileSync(mediaPath, code.media);
26
- }
23
+ if (code.media)
24
+ fs_1.default.writeFileSync(themeMediaPath, code.media);
27
25
  const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;
28
26
  // eslint-disable-next-line no-console
29
27
  console.log(chalk_1.default.green(logOutput));
@@ -33,8 +31,6 @@ const addThemeFragment = (name, definition, options) => {
33
31
  };
34
32
  exports.addThemeFragment = addThemeFragment;
35
33
  const addTheme = (name, definition, options) => {
36
- const withReshaped = (0, mergeDefinitions_1.default)(reshaped_1.default, definition);
37
- const withBase = (0, mergeDefinitions_1.default)(withReshaped, base_1.default);
38
- transformDefinition(name, withBase, options);
34
+ transformDefinition(name, (0, mergeDefinitions_1.default)(reshaped_1.default, definition), options);
39
35
  };
40
36
  exports.addTheme = addTheme;
package/components/Actionable/Actionable.module.css CHANGED
@@ -1 +1 @@
1
- .root{-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}
1
+ .root{-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}
package/components/Alert/Alert.types.d.ts CHANGED
@@ -6,7 +6,7 @@ export type Props = {
6
6
  title?: React.ReactNode;
7
7
  children?: React.ReactNode;
8
8
  actionsSlot?: React.ReactNode;
9
- color?: "neutral" | "critical" | "positive" | "primary";
9
+ color?: "neutral" | "critical" | "warning" | "positive" | "primary";
10
10
  inline?: boolean;
11
11
  bleed?: G.Responsive<number>;
12
12
  className?: G.ClassName;
package/components/Alert/tests/Alert.stories.js CHANGED
@@ -52,6 +52,16 @@ export const color = () => (<Example>
52
52
  been the industry's standard
53
53
  </Alert>
54
54
  </Example.Item>
55
+
56
+ <Example.Item title="color: warning">
57
+ <Alert color="warning" title="Alert title goes here" icon={IconZap} actionsSlot={<>
58
+ <Link variant="plain">View now</Link>
59
+ <Link variant="plain">Dismiss</Link>
60
+ </>}>
61
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
62
+ been the industry's standard
63
+ </Alert>
64
+ </Example.Item>
55
65
  </Example>);
56
66
  export const inline = () => (<Example>
57
67
  <Example.Item title="inline: true">
package/components/Avatar/Avatar.module.css CHANGED
@@ -1 +1 @@
1
- .root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:700;justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}
1
+ .root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:700;justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}
package/components/Avatar/Avatar.types.d.ts CHANGED
@@ -22,7 +22,7 @@ type WithContent = WithImage | WithInitials | WithIcon;
22
22
  export type Props = WithContent & {
23
23
  squared?: boolean;
24
24
  variant?: "solid" | "faded";
25
- color?: "neutral" | "critical" | "positive" | "primary";
25
+ color?: "neutral" | "critical" | "warning" | "positive" | "primary";
26
26
  size?: G.Responsive<number>;
27
27
  className?: G.ClassName;
28
28
  attributes?: G.Attributes<"div", Props>;
package/components/Avatar/tests/Avatar.stories.js CHANGED
@@ -74,6 +74,12 @@ export const colors = () => (<Example>
74
74
  <Example.Item title="color: positive, variant: faded">
75
75
  <Avatar color="positive" variant="faded" icon={IconZap}/>
76
76
  </Example.Item>
77
+ <Example.Item title="color: warning">
78
+ <Avatar color="warning" icon={IconZap}/>
79
+ </Example.Item>
80
+ <Example.Item title="color: warning, variant: faded">
81
+ <Avatar color="warning" variant="faded" icon={IconZap}/>
82
+ </Example.Item>
77
83
  <Example.Item title="color: critical">
78
84
  <Avatar color="critical" icon={IconZap}/>
79
85
  </Example.Item>
package/components/Badge/Badge.module.css CHANGED
@@ -1 +1 @@
1
- .root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.dismiss{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--actionable:hover{opacity:.8}.root .dismiss:hover{opacity:.72}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:0px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:999px}.root:empty{height:var(--rs-badge-empty-size);min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
1
+ .root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.dismiss{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--actionable:hover{opacity:.8}.root .dismiss:hover{opacity:.72}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:0px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:999px}.root:empty{height:var(--rs-badge-empty-size);min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
package/components/Badge/Badge.types.d.ts CHANGED
@@ -12,7 +12,7 @@ type BaseProps = {
12
12
  } & Pick<ActionableProps, "href" | "onClick" | "attributes">;
13
13
  type WithChildren = BaseProps & {
14
14
  children: React.ReactNode;
15
- color?: "critical" | "positive" | "primary";
15
+ color?: "critical" | "warning" | "positive" | "primary";
16
16
  variant?: "faded" | "outline";
17
17
  };
18
18
  type WithEmpty = BaseProps & {
package/components/Badge/tests/Badge.stories.js CHANGED
@@ -55,6 +55,18 @@ export const color = () => (<Example>
55
55
  </Badge>
56
56
  </View>
57
57
  </Example.Item>
58
+
59
+ <Example.Item title="color: warning, all variants">
60
+ <View direction="row" gap={3}>
61
+ <Badge color="warning">Badge</Badge>
62
+ <Badge variant="faded" color="warning">
63
+ Badge
64
+ </Badge>
65
+ <Badge variant="outline" color="warning">
66
+ Badge
67
+ </Badge>
68
+ </View>
69
+ </Example.Item>
58
70
  </Example>);
59
71
  export const sizes = () => (<Example>
60
72
  <Example.Item title="size: small, not rounded and rounded">
package/components/Button/Button.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);-webkit-tap-highlight-color:transparent;align-items:center;border:var(--rs-button-border-width) solid transparent;border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);justify-content:center;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));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}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{margin-inline-end:var(--rs-button-icon-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-icon-gap)}.icon:last-child{margin-inline-end:0}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded{--rs-button-border-width:0px}.root.--variant-faded.--color-neutral{--rs-button-border-width:1px;background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{--rs-button-border-width:0px;--rs-p-h:max(calc(var(--rs-button-p-h) - var(--rs-unit-x1)),var(--rs-unit-x2))}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){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:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!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:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (min-width:660px){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (min-width:900px){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (min-width:1280px){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-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);-webkit-tap-highlight-color:transparent;align-items:center;border:var(--rs-button-border-width) solid transparent;border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);justify-content:center;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));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}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{margin-inline-end:var(--rs-button-icon-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-icon-gap)}.icon:last-child{margin-inline-end:0}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded{--rs-button-border-width:0px}.root.--variant-faded.--color-neutral{--rs-button-border-width:1px;background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{--rs-button-border-width:0px;--rs-p-h:max(calc(var(--rs-button-p-h) - var(--rs-unit-x1)),var(--rs-unit-x2))}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){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:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!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:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.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-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-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-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-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-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
package/components/Calendar/useCalendarKeyboardNavigation.js CHANGED
@@ -32,7 +32,6 @@ const useCalendarKeyboardNavigation = (props) => {
32
32
  nextDate = new Date(year, month - 1 + delta + 1, 0);
33
33
  }
34
34
  const disabled = (min && nextDate < min) || (max && nextDate > max);
35
- console.log({ nextDate, disabled });
36
35
  if (disabled)
37
36
  return;
38
37
  if (nextEl) {
package/components/Carousel/Carousel.module.css CHANGED
@@ -1 +1 @@
1
- .root{position:relative}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);overflow:auto;overflow:-moz-scrollbars-none;padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:inline;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (hover:hover),(min-width:900px){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (min-width:660px) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (min-width:900px) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (min-width:1280px) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (min-width:660px){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (min-width:900px){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (min-width:1280px){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}
1
+ .root{position:relative}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);overflow:auto;overflow:-moz-scrollbars-none;padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:inline;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}
package/components/Checkbox/Checkbox.module.css CHANGED
@@ -1 +1 @@
1
- .root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;width:var(--rs-unit-x2)}.decorator:before,.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
1
+ .root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;width:var(--rs-unit-x2)}.decorator:before,.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
package/components/Divider/Divider.module.css CHANGED
@@ -1 +1 @@
1
- .root{background:var(--rs-color-border-neutral-faded);border:none;height:1px;margin:0}.--blank{margin-top:-1px;position:relative}.--vertical{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical.--blank{margin-top:0;margin-inline-start:-1px}@media (min-width:660px){.--vertical-true--m{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--m.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--m{display:block;height:1px;width:100%}.--vertical-false--m.--blank{margin-top:-1px;margin-inline-start:0}}@media (min-width:900px){.--vertical-true--l{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--l.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--l{display:block;height:1px;width:100%}.--vertical-false--l.--blank{margin-top:-1px;margin-inline-start:0}}@media (min-width:1280px){.--vertical-true--xl{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--xl.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--xl{display:block;height:1px;width:100%}.--vertical-false--xl.--blank{margin-top:-1px;margin-inline-start:0}}
1
+ .root{background:var(--rs-color-border-neutral-faded);border:none;height:1px;margin:0}.--blank{margin-top:-1px;position:relative}.--vertical{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical.--blank{margin-top:0;margin-inline-start:-1px}@media (--rs-viewport-m ){.--vertical-true--m{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--m.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--m{display:block;height:1px;width:100%}.--vertical-false--m.--blank{margin-top:-1px;margin-inline-start:0}}@media (--rs-viewport-l ){.--vertical-true--l{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--l.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--l{display:block;height:1px;width:100%}.--vertical-false--l.--blank{margin-top:-1px;margin-inline-start:0}}@media (--rs-viewport-xl ){.--vertical-true--xl{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--xl.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-false--xl{display:block;height:1px;width:100%}.--vertical-false--xl.--blank{margin-top:-1px;margin-inline-start:0}}
package/components/Hidden/Hidden.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-hidden-display:block;display:var(--rs-hidden-display)!important}.--display-inline{--rs-hidden-display:inline}.--display-flex{--rs-hidden-display:flex}.--hidden{display:none!important}.--hidden.--visibility{display:var(--rs-hidden-display)!important;visibility:hidden}@media (min-width:660px){.--hidden-true--m{display:none!important}.--hidden-true--m.--visibility{visibility:hidden}.--hidden-false--m,.--hidden-true--m.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--m.--visibility{visibility:visible}}@media (min-width:900px){.--hidden-true--l{display:none!important}.--hidden-true--l.--visibility{visibility:hidden}.--hidden-false--l,.--hidden-true--l.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--l.--visibility{visibility:visible}}@media (min-width:1280px){.--hidden-true--xl{display:none!important}.--hidden-true--xl.--visibility{visibility:hidden}.--hidden-false--xl,.--hidden-true--xl.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--xl.--visibility{visibility:visible}}
1
+ .root{--rs-hidden-display:block;display:var(--rs-hidden-display)!important}.--display-inline{--rs-hidden-display:inline}.--display-flex{--rs-hidden-display:flex}.--hidden{display:none!important}.--hidden.--visibility{display:var(--rs-hidden-display)!important;visibility:hidden}@media (--rs-viewport-m ){.--hidden-true--m{display:none!important}.--hidden-true--m.--visibility{visibility:hidden}.--hidden-false--m,.--hidden-true--m.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--m.--visibility{visibility:visible}}@media (--rs-viewport-l ){.--hidden-true--l{display:none!important}.--hidden-true--l.--visibility{visibility:hidden}.--hidden-false--l,.--hidden-true--l.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--l.--visibility{visibility:visible}}@media (--rs-viewport-xl ){.--hidden-true--xl{display:none!important}.--hidden-true--xl.--visibility{visibility:hidden}.--hidden-false--xl,.--hidden-true--xl.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--xl.--visibility{visibility:visible}}
package/components/Icon/Icon.module.css CHANGED
@@ -1 +1 @@
1
- .root{aspect-ratio:1;display:flex;justify-content:center}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}
1
+ .root{aspect-ratio:1;display:flex;justify-content:center}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}
package/components/Icon/Icon.types.d.ts CHANGED
@@ -3,7 +3,7 @@ import type * as G from "../../types/global";
3
3
  export type Props = {
4
4
  svg: React.ReactElement | React.ComponentType;
5
5
  size?: G.Responsive<number | string>;
6
- color?: "neutral" | "neutral-faded" | "positive" | "critical" | "primary" | "disabled";
6
+ color?: "neutral" | "neutral-faded" | "positive" | "critical" | "warning" | "primary" | "disabled";
7
7
  autoWidth?: boolean;
8
8
  className?: G.ClassName;
9
9
  attributes?: G.Attributes<"span", Props>;
package/components/Image/Image.module.css CHANGED
@@ -1 +1 @@
1
- .root{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--display-mode-cover{-o-object-fit:cover!important;object-fit:cover!important}.--display-mode-contain{-o-object-fit:scale-down!important;object-fit:scale-down!important}
1
+ .root{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--display-mode-cover{object-fit:cover!important}.--display-mode-contain{object-fit:scale-down!important}
package/components/Loader/Loader.module.css CHANGED
@@ -1 +1 @@
1
- @keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.445,.05,.55,.95) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.3}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}@media (min-width:660px){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (min-width:900px){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (min-width:1280px){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}
1
+ @keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.445,.05,.55,.95) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.3}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}
package/components/MenuItem/MenuItem.module.css CHANGED
@@ -1 +1 @@
1
- .root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (min-width:660px){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
1
+ .root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-unit-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
package/components/Modal/Modal.module.css CHANGED
@@ -1 +1 @@
1
- .root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}.--dragging{transition:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (min-width:660px){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}@media (min-width:900px){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}@media (min-width:1280px){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}
1
+ .root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}.--dragging{transition:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}
package/components/Popover/Popover.module.css CHANGED
@@ -1 +1 @@
1
- .content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content.content--has-width{max-width:none;min-width:0}@media (max-width:659px){.content{max-width:none}}
1
+ .content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
package/components/Progress/Progress.module.css CHANGED
@@ -1 +1 @@
1
- .root{align-items:flex-start;display:flex;overflow:hidden}.root,.value{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-unit-radius-small)}.value{height:100%;transform:translateX(var(--rs-progress-value));transition:transform var(--rs-easing-decelerate);transition-duration:var(--rs-progress-duration,var(--rs-duration-slow));width:100%}[dir=rtl] .value{transform:translateX(calc(var(--rs-progress-value) * -1))}.--duration .value{transition-timing-function:linear}.--size-small{height:var(--rs-unit-x1)}.--size-medium{height:var(--rs-unit-x2)}.--color-primary .value{background:var(--rs-color-background-primary)}.--color-critical .value{background:var(--rs-color-background-critical)}.--color-positive .value{background:var(--rs-color-background-positive)}.--color-white{background:rgba(var(--rs-color-rgb-white),32%)}.--color-white .value{background:var(--rs-color-white)}
1
+ .root{align-items:flex-start;display:flex;overflow:hidden}.root,.value{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-unit-radius-small)}.value{height:100%;transform:translateX(var(--rs-progress-value));transition:transform var(--rs-easing-decelerate);transition-duration:var(--rs-progress-duration,var(--rs-duration-slow));width:100%}[dir=rtl] .value{transform:translateX(calc(var(--rs-progress-value) * -1))}.--duration .value{transition-timing-function:linear}.--size-small{height:var(--rs-unit-x1)}.--size-medium{height:var(--rs-unit-x2)}.--color-primary .value{background:var(--rs-color-background-primary)}.--color-critical .value{background:var(--rs-color-background-critical)}.--color-warning .value{background:var(--rs-color-background-warning)}.--color-positive .value{background:var(--rs-color-background-positive)}.--color-white{background:rgba(var(--rs-color-rgb-white),32%)}.--color-white .value{background:var(--rs-color-white)}
package/components/Progress/Progress.types.d.ts CHANGED
@@ -4,7 +4,7 @@ export type Props = {
4
4
  max?: number;
5
5
  min?: number;
6
6
  size?: "small" | "medium";
7
- color?: "primary" | "critical" | "positive" | "white";
7
+ color?: "primary" | "critical" | "warning" | "positive" | "white";
8
8
  duration?: number;
9
9
  className?: G.ClassName;
10
10
  attributes?: G.Attributes<"div", Props>;
package/components/Progress/tests/Progress.stories.js CHANGED
@@ -27,6 +27,9 @@ export const color = () => (<Example>
27
27
  <Example.Item title="color: critical, value: 50">
28
28
  <Progress value={50} color="critical"/>
29
29
  </Example.Item>
30
+ <Example.Item title="color: warning, value: 50">
31
+ <Progress value={50} color="warning"/>
32
+ </Example.Item>
30
33
  <Example.Item title="color: positive, value: 50">
31
34
  <Progress value={50} color="positive"/>
32
35
  </Example.Item>
package/components/Radio/Radio.module.css CHANGED
@@ -1 +1 @@
1
- .root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
1
+ .root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
package/components/Reshaped/Reshaped.css CHANGED
@@ -1 +1 @@
1
- :root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}*{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}input::-moz-placeholder{color:var(--rs-color-neutral-faded);opacity:.5}input::placeholder{color:var(--rs-color-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation}body,html{height:100%}body{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);scroll-behavior:smooth;text-rendering:optimizespeed}[data-rs-theme],body{font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}a{color:var(--rs-color-foreground-primary);text-decoration:underline}a:hover{text-decoration:none}
1
+ :root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}*{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}input::placeholder{color:var(--rs-color-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation}body,html{height:100%}body{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);scroll-behavior:smooth;text-rendering:optimizespeed}[data-rs-theme],body{font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}a{color:var(--rs-color-foreground-primary);text-decoration:underline}a:hover{text-decoration:none}
package/components/Select/Select.module.css CHANGED
@@ -1 +1 @@
1
- .root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:900px){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:1280px){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}
1
+ .root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}
package/components/Slider/Slider.module.css CHANGED
@@ -1 +1 @@
1
- .root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
1
+ .root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);user-select:none}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
package/components/Slider/SliderThumb.js CHANGED
@@ -15,7 +15,7 @@ const SliderThumb = (props, ref) => {
15
15
  return (React.createElement(React.Fragment, null,
16
16
  React.createElement("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, "aria-labelledby": id }),
17
17
  React.createElement("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { insetInlineStart: `${position}%` }, id: id, "aria-hidden": "true" },
18
- React.createElement(Theme, { className: s.tooltip, colorMode: "inverted" },
19
- React.createElement(Text, { variant: "caption-1", weight: "medium" }, tooltipValue)))));
18
+ React.createElement(Theme, { colorMode: "inverted" },
19
+ React.createElement(Text, { variant: "caption-1", weight: "medium", className: s.tooltip }, tooltipValue)))));
20
20
  };
21
21
  export default React.forwardRef(SliderThumb);
package/components/Table/Table.module.css CHANGED
@@ -1 +1 @@
1
- .root{margin:0 calc(var(--rs-unit-x4) * -1);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;border-radius:var(--rs-unit-radius-medium);min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:first-child{padding-inline-end:0}.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:first-child{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}
1
+ .root{margin:0 calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;border-radius:var(--rs-unit-radius-medium);min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:first-child{padding-inline-end:0}.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:first-child{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}
package/components/Tabs/Tabs.module.css CHANGED
@@ -1 +1 @@
1
- .root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{--rs-tabs-gap:var(--rs-unit-x4);flex-shrink:0;position:relative}.button{-webkit-tap-highlight-color:transparent;overflow:hidden;position:relative;z-index:1}.button,.buttonContent{border-radius:var(--rs-unit-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}.buttonContent,.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-unit-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-raised)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height}.next,.prev{align-items:center;display:flex;inset-block:0;position:absolute;z-index:var(--rs-z-index-raised)}[dir=rtl] .next,[dir=rtl] .prev{transform:scaleX(-1)}.next{inset-inline-end:var(--rs-unit-x1)}.prev{inset-inline-start:var(--rs-unit-x1)}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row{margin:0 calc(var(--rs-unit-x2) * -1);overflow:hidden;padding:0 var(--rs-unit-x2)}.--direction-row .inner{-ms-overflow-style:none;margin:0 calc(var(--rs-unit-x2) * -1) -40px;overflow:auto;overflow:-moz-scrollbars-none;padding:0 var(--rs-unit-x2) 40px;scrollbar-width:none;white-space:nowrap}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .listItem+.listItem{margin-inline-start:var(--rs-tabs-gap)}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{bottom:0;height:100%;inset-inline-end:0;top:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .listItem+.listItem{margin-top:var(--rs-tabs-gap)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}.--variant-pills .listItem,.--variant-pills-elevated .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-unit-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--cut-off-end .inner,[dir=rtl] .--cut-off-start .inner{-webkit-mask-image:linear-gradient(to right,rgba(var(--rs-color-rgb-black),100%) 0,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%);mask-image:linear-gradient(to right,rgba(var(--rs-color-rgb-black),100%) 0,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%)}.--cut-off-start .inner,[dir=rtl] .--cut-off-end .inner{-webkit-mask-image:linear-gradient(to left,rgba(var(--rs-color-rgb-black),100%) 0,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%);mask-image:linear-gradient(to left,rgba(var(--rs-color-rgb-black),100%) 0,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%)}.--cut-off-both .inner{-webkit-mask-image:linear-gradient(to right,rgba(var(--rs-color-rgb-black),0) 0,rgba(var(--rs-color-rgb-black),10%) 5%,rgba(var(--rs-color-rgb-black),100%) 20%,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%);mask-image:linear-gradient(to right,rgba(var(--rs-color-rgb-black),0) 0,rgba(var(--rs-color-rgb-black),10%) 5%,rgba(var(--rs-color-rgb-black),100%) 20%,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%)}@media (max-width:659px){.next,.prev{display:none}}
1
+ .root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{--rs-tabs-gap:var(--rs-unit-x4);flex-shrink:0;position:relative}.button{-webkit-tap-highlight-color:transparent;overflow:hidden;position:relative;z-index:1}.button,.buttonContent{border-radius:var(--rs-unit-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}.buttonContent,.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-unit-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-raised)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height}.next,.prev{align-items:center;display:flex;inset-block:0;position:absolute;z-index:var(--rs-z-index-raised)}[dir=rtl] .next,[dir=rtl] .prev{transform:scaleX(-1)}.next{inset-inline-end:var(--rs-unit-x1)}.prev{inset-inline-start:var(--rs-unit-x1)}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row{margin:0 calc(var(--rs-unit-x2) * -1);overflow:hidden;padding:0 var(--rs-unit-x2)}.--direction-row .inner{-ms-overflow-style:none;margin:0 calc(var(--rs-unit-x2) * -1) -40px;overflow:auto;overflow:-moz-scrollbars-none;padding:0 var(--rs-unit-x2) 40px;scrollbar-width:none;white-space:nowrap}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .listItem+.listItem{margin-inline-start:var(--rs-tabs-gap)}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{bottom:0;height:100%;inset-inline-end:0;top:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .listItem+.listItem{margin-top:var(--rs-tabs-gap)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}.--variant-pills .listItem,.--variant-pills-elevated .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-unit-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--cut-off-end .inner,[dir=rtl] .--cut-off-start .inner{mask-image:linear-gradient(to right,rgba(var(--rs-color-rgb-black),100%) 0,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%)}.--cut-off-start .inner,[dir=rtl] .--cut-off-end .inner{mask-image:linear-gradient(to left,rgba(var(--rs-color-rgb-black),100%) 0,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%)}.--cut-off-both .inner{mask-image:linear-gradient(to right,rgba(var(--rs-color-rgb-black),0) 0,rgba(var(--rs-color-rgb-black),10%) 5%,rgba(var(--rs-color-rgb-black),100%) 20%,rgba(var(--rs-color-rgb-black),100%) 80%,rgba(var(--rs-color-rgb-black),10%) 95%,rgba(var(--rs-color-rgb-black),0) 100%)}@media (--rs-viewport-s ){.next,.prev{display:none}}