@infonomic/uikit 5.34.0 → 5.36.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.
- package/dist/components/button/button.module.css +1 -1
- package/dist/components/button/button_module.css +1 -1
- package/dist/components/button/combo-button.d.ts +11 -0
- package/dist/components/button/combo-button.d.ts.map +1 -0
- package/dist/components/button/combo-button.js +48 -0
- package/dist/components/button/combo-button.module.css +43 -0
- package/dist/components/button/combo-button.module.js +12 -0
- package/dist/components/button/combo-button_module.css +34 -0
- package/dist/components/dropdown/dropdown.module.css +1 -1
- package/dist/components/dropdown/dropdown_module.css +1 -1
- package/dist/components/notifications/toast.module.css +1 -1
- package/dist/components/notifications/toast_module.css +1 -1
- package/dist/react.d.ts +1 -0
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +1 -0
- package/dist/styles/components-vanilla.css +1 -1
- package/package.json +20 -20
- package/src/components/button/button.module.css +1 -1
- package/src/components/button/combo-button.module.css +43 -0
- package/src/components/button/combo-button.tsx +52 -0
- package/src/components/button/combo-buttons.stories.tsx +47 -0
- package/src/components/dropdown/dropdown.module.css +1 -1
- package/src/components/notifications/toast.module.css +1 -1
- package/src/react.ts +1 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
|
|
2
2
|
|
|
3
3
|
@layer infonomic-components {
|
|
4
|
-
:is(.button-IjDhC0, .infonomic-
|
|
4
|
+
:is(.button-IjDhC0, .infonomic-button) {
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
text-align: center;
|
|
7
7
|
gap: var(--gap-2);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ButtonProps } from './button';
|
|
2
|
+
export type ComboButtonProps = ButtonProps & {
|
|
3
|
+
options: {
|
|
4
|
+
label: string;
|
|
5
|
+
value: string;
|
|
6
|
+
}[];
|
|
7
|
+
onButtonClick?: () => void;
|
|
8
|
+
onOptionSelect?: (value: string) => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, ...rest }: ComboButtonProps) => import("react").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=combo-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,qDAKzB,gBAAgB,gCAiClB,CAAA"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
|
|
4
|
+
import { Dropdown } from "../dropdown/dropdown.js";
|
|
5
|
+
import { Button } from "./button.js";
|
|
6
|
+
import combo_button_module from "./combo-button.module.js";
|
|
7
|
+
const ComboButton = ({ options, onButtonClick, onOptionSelect, ...rest })=>/*#__PURE__*/ jsxs("div", {
|
|
8
|
+
className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"]),
|
|
9
|
+
children: [
|
|
10
|
+
/*#__PURE__*/ jsx(Button, {
|
|
11
|
+
className: classnames('combo-button-button', combo_button_module["combo-button-button"]),
|
|
12
|
+
...rest,
|
|
13
|
+
onClick: onButtonClick,
|
|
14
|
+
children: "Combo Button"
|
|
15
|
+
}),
|
|
16
|
+
/*#__PURE__*/ jsxs(Dropdown.Root, {
|
|
17
|
+
children: [
|
|
18
|
+
/*#__PURE__*/ jsx(Dropdown.Trigger, {
|
|
19
|
+
asChild: true,
|
|
20
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
21
|
+
className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"]),
|
|
22
|
+
...rest,
|
|
23
|
+
children: /*#__PURE__*/ jsx(ChevronDownIcon, {
|
|
24
|
+
width: "16px",
|
|
25
|
+
height: "16px"
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
}),
|
|
29
|
+
/*#__PURE__*/ jsx(Dropdown.Portal, {
|
|
30
|
+
children: /*#__PURE__*/ jsx(Dropdown.Content, {
|
|
31
|
+
className: classnames('combo-button-options', combo_button_module["combo-button-options"]),
|
|
32
|
+
align: "end",
|
|
33
|
+
"data-side": "top",
|
|
34
|
+
sideOffset: 5,
|
|
35
|
+
children: options.map((option)=>/*#__PURE__*/ jsx(Dropdown.Item, {
|
|
36
|
+
onSelect: ()=>onOptionSelect?.(option.value),
|
|
37
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
38
|
+
className: classnames('combo-button-options-item', combo_button_module["combo-button-options-item"]),
|
|
39
|
+
children: option.label
|
|
40
|
+
})
|
|
41
|
+
}, option.value))
|
|
42
|
+
})
|
|
43
|
+
})
|
|
44
|
+
]
|
|
45
|
+
})
|
|
46
|
+
]
|
|
47
|
+
});
|
|
48
|
+
export { ComboButton };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
|
|
2
|
+
|
|
3
|
+
@layer infonomic-components {
|
|
4
|
+
|
|
5
|
+
.combo-button-wrapper,
|
|
6
|
+
:global(.infonomic-combo-button-wrapper) {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: 0.1rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.combo-button-button,
|
|
13
|
+
:global(.infonomic-combo-button-button) {
|
|
14
|
+
box-shadow: none;
|
|
15
|
+
border-bottom-right-radius: 0;
|
|
16
|
+
border-top-right-radius: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.combo-button-button:focus,
|
|
20
|
+
.combo-button-button:active {
|
|
21
|
+
box-shadow: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.combo-button-trigger,
|
|
25
|
+
:global(.infonomic-combo-button-trigger) {
|
|
26
|
+
box-shadow: none;
|
|
27
|
+
border-bottom-left-radius: 0;
|
|
28
|
+
border-top-left-radius: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.combo-button-trigger:focus,
|
|
32
|
+
.combo-button-trigger:active {
|
|
33
|
+
box-shadow: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.combo-button-options,
|
|
37
|
+
:global(.infonomic-combo-button-options) {
|
|
38
|
+
min-width: 120px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.combo-button-options-item,
|
|
42
|
+
:global(.infonomic-combo-button-options-item) {}
|
|
43
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "./combo-button_module.css";
|
|
2
|
+
const combo_button_module = {
|
|
3
|
+
"combo-button-wrapper": "combo-button-wrapper-nRtH6j",
|
|
4
|
+
comboButtonWrapper: "combo-button-wrapper-nRtH6j",
|
|
5
|
+
"combo-button-button": "combo-button-button-Cb8qgF",
|
|
6
|
+
comboButtonButton: "combo-button-button-Cb8qgF",
|
|
7
|
+
"combo-button-trigger": "combo-button-trigger-mVb2fy",
|
|
8
|
+
comboButtonTrigger: "combo-button-trigger-mVb2fy",
|
|
9
|
+
"combo-button-options": "combo-button-options-T9vVC9",
|
|
10
|
+
comboButtonOptions: "combo-button-options-T9vVC9"
|
|
11
|
+
};
|
|
12
|
+
export { combo_button_module as default };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@layer infonomic-base, infonomic-utilities, infonomic-theme;
|
|
2
|
+
|
|
3
|
+
@layer infonomic-components {
|
|
4
|
+
:is(.combo-button-wrapper-nRtH6j, .infonomic-combo-button-wrapper) {
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: .1rem;
|
|
7
|
+
display: flex;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:is(.combo-button-button-Cb8qgF, .infonomic-combo-button-button) {
|
|
11
|
+
box-shadow: none;
|
|
12
|
+
border-top-right-radius: 0;
|
|
13
|
+
border-bottom-right-radius: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.combo-button-button-Cb8qgF:focus, .combo-button-button-Cb8qgF:active {
|
|
17
|
+
box-shadow: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:is(.combo-button-trigger-mVb2fy, .infonomic-combo-button-trigger) {
|
|
21
|
+
box-shadow: none;
|
|
22
|
+
border-top-left-radius: 0;
|
|
23
|
+
border-bottom-left-radius: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.combo-button-trigger-mVb2fy:focus, .combo-button-trigger-mVb2fy:active {
|
|
27
|
+
box-shadow: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:is(.combo-button-options-T9vVC9, .infonomic-combo-button-options) {
|
|
31
|
+
min-width: 120px;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
@@ -20,7 +20,7 @@ infonomic-components;
|
|
|
20
20
|
border-width: var(--border-width-thin);
|
|
21
21
|
border-color: var(--surface-panel-border);
|
|
22
22
|
border-style: var(--border-style-solid);
|
|
23
|
-
border-radius: var(--border-radius-
|
|
23
|
+
border-radius: var(--border-radius-sm);
|
|
24
24
|
box-shadow: var(--shadow-sm);
|
|
25
25
|
|
|
26
26
|
&[data-side="top"] {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
border-width: var(--border-width-thin);
|
|
9
9
|
border-color: var(--surface-panel-border);
|
|
10
10
|
border-style: var(--border-style-solid);
|
|
11
|
-
border-radius: var(--border-radius-
|
|
11
|
+
border-radius: var(--border-radius-sm);
|
|
12
12
|
box-shadow: var(--shadow-sm);
|
|
13
13
|
padding: 4px;
|
|
14
14
|
animation-duration: .4s;
|
package/dist/react.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from './components/badge/badge.js';
|
|
|
10
10
|
export { variant as buttonVariant } from './components/button/@types/button.js';
|
|
11
11
|
export * from './components/button/button.js';
|
|
12
12
|
export * from './components/button/button-group.js';
|
|
13
|
+
export * from './components/button/combo-button.js';
|
|
13
14
|
export * from './components/button/control-buttons.js';
|
|
14
15
|
export * from './components/button/copy-button.js';
|
|
15
16
|
export * from './components/button/icon-button.js';
|
package/dist/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}
|
package/dist/react.js
CHANGED
|
@@ -6,6 +6,7 @@ export * from "./components/avatar/avatar.js";
|
|
|
6
6
|
export * from "./components/badge/badge.js";
|
|
7
7
|
export * from "./components/button/button.js";
|
|
8
8
|
export * from "./components/button/button-group.js";
|
|
9
|
+
export * from "./components/button/combo-button.js";
|
|
9
10
|
export * from "./components/button/control-buttons.js";
|
|
10
11
|
export * from "./components/button/copy-button.js";
|
|
11
12
|
export * from "./components/button/icon-button.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer infonomic-base,infonomic-functional,infonomic-utilities,infonomic-theme,infonomic-typography;@layer infonomic-components{:is(.card-mqJaiW,.infonomic-card){width:100%;max-width:100%;color:var(--foreground);background:var(--canvas-25);border-width:var(--border-width-thin);border-color:var(--border-color);border-style:var(--border-style-solid);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);flex-direction:column;text-decoration:none;display:flex}:is(:is(.dark,[data-theme=dark]) .card-mqJaiW,:is(.dark,[data-theme=dark]) .infonomic-card){background:var(--canvas-800)}:is(.card-hover-hvT4d6,.infonomic-card-hover){transition:background .2s ease-in-out}:is(.card-hover-hvT4d6:hover,.infonomic-card-hover:hover){background:oklch(from var(--theme-50) 1 .03 h)}:is(:is(.dark,[data-theme=dark]) .card-hover-hvT4d6:hover,:is(.dark,[data-theme=dark]) .infonomic-card-hover:hover){background:oklch(from var(--canvas-800) .2 c h)}:is(.card-header-XnoBkP,.infonomic-card-header){flex-direction:column;gap:.5rem;padding:1rem;display:flex}:is(.card-title-JI7Lu3,.infonomic-card-title){color:var(--headings);letter-spacing:-.015em;font-size:1.8rem;font-weight:700;line-height:1}:is(.card-description-fwu7HE,.infonomic-card-description){color:var(--muted);font-size:.875rem}:is(.card-content-uhoZYJ,.infonomic-card-content){flex:1;padding:0 1rem 1rem}:is(.card-footer-BxTa4b,.infonomic-card-footer){align-items:center;padding:0 1rem 1rem;display:flex}:is(.container-tSpizY,.infonomic-container){width:100%;max-width:60rem;margin:0 auto;padding:0 1rem}@media (width>=66rem){:is(.container-tSpizY,.infonomic-container){max-width:64rem}}@media (width>=77rem){:is(.container-tSpizY,.infonomic-container){max-width:74.375rem}}@media (width>=94rem){:is(.container-tSpizY,.infonomic-container){max-width:87.5rem}}:is(.badge-8xVidp,.infonomic-badge){font-size:var(--font-size-sm);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--border-radius-sm);padding:.25em .4em;font-weight:400;line-height:1;display:inline-block}:is(.primary-oZyR_M,.infonomic-badge-primary){color:var(--text-on-primary-strong);background-color:var(--fill-primary-strong)}:is(.secondary-VsqJTm,.infonomic-badge-secondary){color:var(--text-on-secondary-strong);background-color:var(--fill-secondary-strong)}:is(.noeffect-R8eJtO,.infonomic-badge-noeffect){color:var(--text-on-noeffect-strong);background-color:var(--fill-noeffect-strong)}:is(.success-h2otET,.infonomic-badge-success){color:var(--text-on-success-strong);background-color:var(--fill-success-strong)}:is(.info-OG3F3u,.infonomic-badge-info){color:var(--text-on-info-strong);background-color:var(--fill-info-strong)}:is(.warning-zTXksZ,.infonomic-badge-warning){color:var(--text-on-warning-strong);background-color:var(--fill-warning-strong)}:is(.danger-hKF7l_,.infonomic-badge-danger){color:var(--text-on-danger-strong);background-color:var(--fill-danger-strong)}:is(.button-IjDhC0,.infonomic-infonomic-button){cursor:pointer;text-align:center;gap:var(--gap-2);white-space:nowrap;outline-offset:2px;transition:background-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--border-radius-sm);border:none;outline:2px solid #0000;justify-content:center;align-items:center;font-weight:400;line-height:0;display:inline-flex}:is(.button-IjDhC0:disabled,.button-IjDhC0[disabled],.infonomic-button:disabled,.infonomic-button[disabled]){pointer-events:none}:is(.button-IjDhC0:focus,.button-IjDhC0:active,.infonomic-button:focus,.infonomic-button:active){--ring-offset-color:var(--background);--ring-offset-shadow:var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);--ring-shadow:var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);box-shadow:var(--ring-offset-shadow), var(--ring-shadow), var(--shadow,0 0 #0000)}.button-IjDhC0.square-P_6yde,.infonomic-button-square{aspect-ratio:1;border-radius:var(--border-radius-sm);padding:0}.button-IjDhC0.round-uqus3n,.infonomic-button-round{aspect-ratio:1;border-radius:var(--border-radius-full);padding:0}:is(.xs-jxTd5R,.infonomic-button-xs){min-height:26px;padding:.2rem .4rem;font-size:.7rem}:is(.sm-uD_Ugt,.infonomic-button-sm){min-height:32px;padding:.25rem .5rem;font-size:.775rem}:is(.md-Qp9ad6,.infonomic-button-md){min-height:38px;padding:.625rem 1.25rem;font-size:.95rem}:is(.lg-FAYTen,.infonomic-button-lg){min-height:46px;padding:.75rem 1.5rem;font-size:1.1rem}:is(.xl-Gwvhl4,.infonomic-button-xl){min-height:54px;padding:.75rem 1.5rem;font-size:1.2rem}:is(.filled-CwGsrO,.infonomic-button-filled){color:var(--button-variant-filled-foreground);background-color:var(--button-variant-filled)}:is(.filled-CwGsrO:hover,.infonomic-button-filled:hover){background-color:var(--button-variant-filled-hover)}:is(.filled-CwGsrO:focus,.filled-CwGsrO:active,.infonomic-button-filled:focus,.infonomic-button-filled:active){--ring-color:var(--button-ring-color)}:is(.filled-CwGsrO:disabled,.filled-CwGsrO[disabled],.infonomic-button-filled:disabled,.infonomic-button-filled[disabled]){background-color:var(--button-variant-filled-disabled,oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h));color:var(--button-variant-filled-foreground-disabled,oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h))}:is(.filled-weak-QLU8bA,.infonomic-button-filled-weak){color:var(--button-variant-filled-weak-foreground);background-color:var(--button-variant-filled-weak)}:is(.filled-weak-QLU8bA:hover,.infonomic-button-filled-weak:hover){background-color:var(--button-variant-filled-weak-hover)}:is(.filled-weak-QLU8bA:focus,.filled-weak-QLU8bA:active,.infonomic-button-filled-weak:focus,.infonomic-button-filled-weak:active){--ring-color:var(--button-ring-color)}:is(.filled-weak-QLU8bA:disabled,.filled-weak-QLU8bA[disabled],.infonomic-button-filled-weak:disabled,.infonomic-button-filled-weak[disabled]){background-color:var(--button-variant-filled-weak-disabled,oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));color:var(--button-variant-filled-weak-foreground-disabled,oklch(from var(--button-variant-filled-weak-foreground) calc(l * .9) calc(c * .85) h))}:is(.outlined-nZGbxu,.infonomic-button-outlined){border:1px solid var(--button-variant-outlined-border);color:var(--button-variant-outlined-foreground);background-color:var(--button-variant-outlined)}:is(.outlined-nZGbxu:disabled,.outlined-nZGbxu[disabled],.infonomic-button-outlined:disabled,.infonomic-button-outlined[disabled]){border-color:var(--button-variant-outlined-border-disabled,oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));color:var(--button-variant-outlined-foreground-disabled,oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h))}:is(.outlined-nZGbxu:hover,.infonomic-button-outlined:hover){background-color:var(--button-variant-outlined-hover)}:is(.outlined-nZGbxu:focus,.outlined-nZGbxu:active,.infonomic-button-outlined:focus,.infonomic-button-outlined:active){--ring-color:var(--button-ring-color)}:is(.gradient-ySC3O3,.infonomic-button-gradient){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:disabled,.gradient-ySC3O3[disabled],.infonomic-button-gradient:disabled,.infonomic-button-gradient[disabled]){background:unset;background-color:var(--button-variant-gradient-disabled,oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h));color:var(--button-variant-gradient-foreground-disabled,oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h))}:is(.gradient-ySC3O3:hover,.infonomic-button-gradient:hover){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:focus,.gradient-ySC3O3:active,.infonomic-button-gradient:focus,.infonomic-button-gradient:active){--ring-color:var(--button-ring-color)}:is(.text-GaxlcE,.infonomic-button-text){background-color:var(--button-variant-text);color:var(--button-variant-text-foreground)}:is(.text-GaxlcE:disabled,.text-GaxlcE[disabled],.infonomic-button-text:disabled,.infonomic-button-text[disabled]){color:oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * .5) h)}:is(.text-GaxlcE:hover,.infonomic-button-text:hover){background-color:var(--button-variant-text-hover)}:is(.text-GaxlcE:focus,.text-GaxlcE:active,.infonomic-button-text:focus,.infonomic-button-text:active){--ring-color:var(--button-ring-color)}:is(.primary-tUmczz,.infonomic-button-primary){--button-ring-color:var(--ring-primary);--button-variant-filled:var(--fill-primary-strong);--button-variant-filled-hover:var(--fill-primary-strong-hover);--button-variant-filled-disabled:var(--fill-primary-strong-disabled);--button-variant-filled-foreground:var(--text-on-primary-strong);--button-variant-filled-foreground-disabled:var(--text-on-primary-strong-disabled);--button-variant-filled-weak:var(--fill-primary-weak);--button-variant-filled-weak-hover:var(--fill-primary-weak-hover);--button-variant-filled-weak-disabled:var(--fill-primary-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-primary-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-primary-weak-disabled);--button-variant-outlined:var(--fill-primary-outlined);--button-variant-outlined-hover:var(--fill-primary-outlined-hover);--button-variant-outlined-border:var(--stroke-primary);--button-variant-outlined-border-disabled:var(--stroke-primary-disabled);--button-variant-outlined-foreground:var(--text-on-primary-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-primary-outlined-disabled);--button-variant-text:var(--fill-primary-text);--button-variant-text-hover:var(--fill-primary-text-hover);--button-variant-text-foreground:var(--text-primary);--button-variant-gradient-start:var(--gradient-primary-start);--button-variant-gradient-end:var(--gradient-primary-end);--button-variant-gradient-foreground:var(--gradient-primary-foreground);--button-variant-gradient-disabled:var(--gradient-primary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-primary-disabled)}:is(.secondary-UqT2AY,.infonomic-button-secondary){--button-ring-color:var(--ring-secondary);--button-variant-filled:var(--fill-secondary-strong);--button-variant-filled-hover:var(--fill-secondary-strong-hover);--button-variant-filled-disabled:var(--fill-secondary-strong-disabled);--button-variant-filled-foreground:var(--text-on-secondary-strong);--button-variant-filled-foreground-disabled:var(--text-on-secondary-strong-disabled);--button-variant-filled-weak:var(--fill-secondary-weak);--button-variant-filled-weak-hover:var(--fill-secondary-weak-hover);--button-variant-filled-weak-disabled:var(--fill-secondary-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-secondary-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-secondary-weak-disabled);--button-variant-outlined:var(--fill-secondary-outlined);--button-variant-outlined-border:var(--stroke-secondary);--button-variant-outlined-border-disabled:var(--stroke-secondary-disabled);--button-variant-outlined-hover:var(--fill-secondary-outlined-hover);--button-variant-outlined-foreground:var(--text-on-secondary-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-secondary-outlined-disabled);--button-variant-text:var(--fill-secondary-text);--button-variant-text-hover:var(--fill-secondary-text-hover);--button-variant-text-foreground:var(--text-secondary);--button-variant-gradient-start:var(--gradient-secondary-start);--button-variant-gradient-end:var(--gradient-secondary-end);--button-variant-gradient-foreground:var(--gradient-secondary-foreground);--button-variant-gradient-disabled:var(--gradient-secondary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-secondary-disabled)}:is(.noeffect-fpxSgg,.infonomic-button-noeffect){--button-ring-color:var(--ring-noeffect);--button-variant-filled:var(--fill-noeffect-strong);--button-variant-filled-hover:var(--fill-noeffect-strong-hover);--button-variant-filled-disabled:var(--fill-noeffect-strong-disabled);--button-variant-filled-foreground:var(--text-on-noeffect-strong);--button-variant-filled-foreground-disabled:var(--text-on-noeffect-strong-disabled);--button-variant-filled-weak:var(--fill-noeffect-weak);--button-variant-filled-weak-hover:var(--fill-noeffect-weak-hover);--button-variant-filled-weak-disabled:var(--fill-noeffect-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-noeffect-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-noeffect-weak-disabled);--button-variant-outlined:var(--fill-noeffect-outlined);--button-variant-outlined-hover:var(--fill-noeffect-outlined-hover);--button-variant-outlined-disabled:var(--fill-noeffect-outlined-disabled);--button-variant-outlined-border:var(--stroke-noeffect);--button-variant-outlined-border-disabled:var(--stroke-noeffect-disabled);--button-variant-outlined-foreground:var(--text-on-noeffect-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-noeffect-disabled);--button-variant-text:var(--fill-noeffect-text);--button-variant-text-hover:var(--fill-noeffect-text-hover);--button-variant-text-foreground:var(--text-noeffect);--button-variant-gradient-start:var(--gradient-noeffect-start);--button-variant-gradient-end:var(--gradient-noeffect-end);--button-variant-gradient-foreground:var(--gradient-noeffect-foreground);--button-variant-gradient-disabled:var(--gradient-noeffect-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-noeffect-disabled)}:is(.success-fTNDEn,.infonomic-button-success){--button-ring-color:var(--ring-success);--button-variant-filled:var(--fill-success-strong);--button-variant-filled-hover:var(--fill-success-strong-hover);--button-variant-filled-disabled:var(--fill-success-strong-disabled);--button-variant-filled-foreground:var(--text-on-success-strong);--button-variant-filled-foreground-disabled:var(--text-on-success-strong-disabled);--button-variant-filled-weak:var(--fill-success-weak);--button-variant-filled-weak-hover:var(--fill-success-weak-hover);--button-variant-filled-weak-disabled:var(--fill-success-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-success-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-success-weak-disabled);--button-variant-outlined:var(--fill-success-outlined);--button-variant-outlined-hover:var(--fill-success-outlined-hover);--button-variant-outlined-border:var(--stroke-success);--button-variant-outlined-border-disabled:var(--stroke-success-disabled);--button-variant-outlined-foreground:var(--text-on-success-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-success-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-success-text-hover);--button-variant-text-foreground:var(--text-success);--button-variant-gradient-start:var(--gradient-success-start);--button-variant-gradient-end:var(--gradient-success-end);--button-variant-gradient-foreground:var(--gradient-success-foreground);--button-variant-gradient-disabled:var(--gradient-success-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-success-disabled)}:is(.info-qrdXQD,.infonomic-button-info){--button-ring-color:var(--ring-info);--button-variant-filled:var(--fill-info-strong);--button-variant-filled-hover:var(--fill-info-strong-hover);--button-variant-filled-disabled:var(--fill-info-strong-disabled);--button-variant-filled-foreground:var(--text-on-info-strong);--button-variant-filled-foreground-disabled:var(--text-on-info-strong-disabled);--button-variant-filled-weak:var(--fill-info-weak);--button-variant-filled-weak-hover:var(--fill-info-weak-hover);--button-variant-filled-weak-disabled:var(--fill-info-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-info-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-info-weak-disabled);--button-variant-outlined:transparent;--button-variant-outlined-hover:var(--fill-info-outlined-hover);--button-variant-outlined-border:var(--stroke-info);--button-variant-outlined-border-disabled:var(--stroke-info-disabled);--button-variant-outlined-foreground:var(--text-on-info-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-info-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-info-text-hover);--button-variant-text-foreground:var(--text-info);--button-variant-gradient-start:var(--gradient-info-start);--button-variant-gradient-end:var(--gradient-info-end);--button-variant-gradient-foreground:var(--gradient-info-foreground);--button-variant-gradient-disabled:var(--gradient-info-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-info-disabled)}:is(.warning-a00T3A,.infonomic-button-warning){--button-ring-color:var(--ring-warning);--button-variant-filled:var(--fill-warning-strong);--button-variant-filled-hover:var(--fill-warning-strong-hover);--button-variant-filled-disabled:var(--fill-warning-strong-disabled);--button-variant-filled-foreground:var(--text-on-warning-strong);--button-variant-filled-foreground-disabled:var(--text-on-warning-strong-disabled);--button-variant-filled-weak:var(--fill-warning-weak);--button-variant-filled-weak-hover:var(--fill-warning-weak-hover);--button-variant-filled-weak-disabled:var(--fill-warning-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-warning-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-warning-weak-disabled);--button-variant-outlined:var(--fill-warning-outlined);--button-variant-outlined-hover:var(--fill-warning-outlined-hover);--button-variant-outlined-border:var(--stroke-warning);--button-variant-outlined-border-disabled:var(--stroke-warning-disabled);--button-variant-outlined-foreground:var(--text-on-warning-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-warning-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-warning-text-hover);--button-variant-text-foreground:var(--text-warning);--button-variant-gradient-start:var(--gradient-warning-start);--button-variant-gradient-end:var(--gradient-warning-end);--button-variant-gradient-foreground:var(--gradient-warning-foreground);--button-variant-gradient-disabled:var(--gradient-warning-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-warning-disabled)}:is(.danger-rwIV_i,.infonomic-button-danger){--button-ring-color:var(--ring-danger);--button-variant-filled:var(--fill-danger-strong);--button-variant-filled-hover:var(--fill-danger-strong-hover);--button-variant-filled-disabled:var(--fill-danger-strong-disabled);--button-variant-filled-foreground:var(--text-on-danger-strong);--button-variant-filled-foreground-disabled:var(--text-on-danger-strong-disabled);--button-variant-filled-weak:var(--fill-danger-weak);--button-variant-filled-weak-hover:var(--fill-danger-weak-hover);--button-variant-filled-weak-disabled:var(--fill-danger-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-danger-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-danger-weak-disabled);--button-variant-outlined:transparent;--button-variant-outlined-hover:var(--fill-danger-outlined-hover);--button-variant-outlined-border:var(--stroke-danger);--button-variant-outlined-border-disabled:var(--stroke-danger-disabled);--button-variant-outlined-foreground:var(--text-on-danger-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-danger-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-danger-text-hover);--button-variant-text-foreground:var(--text-danger);--button-variant-gradient-start:var(--gradient-danger-start);--button-variant-gradient-end:var(--gradient-danger-end);--button-variant-gradient-foreground:var(--gradient-danger-foreground);--button-variant-gradient-disabled:var(--gradient-danger-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-danger-disabled)}:is(.fullWidth-wXvP0v,.infonomic-button-full-width){width:100%;display:flex}:is(.button-group-uqvOi8,.infonomic-button-group){place-items:center;gap:var(--gap-2);flex-direction:column;display:flex}@media screen and (width>=40rem){:is(.button-group-uqvOi8,.infonomic-button-group){flex-direction:row}}:is(.copy-button-container-vCNz8o,.infonomic-copy-button-container){display:inline-block}:is(.copy-button-oa4bdj svg,.infonomic-copy-button svg){width:90%;height:90%;display:block}:is(.xs-lZmf78,.infonomic-copy-button-xs){width:26px;height:26px;min-height:26px;padding:.25rem}:is(.sm-KNN1e5,.infonomic-copy-button-sm){width:32px;height:32px;min-height:32px;padding:.35rem}:is(.md-OoH0l4,.infonomic-copy-button-md){width:38px;height:38px;min-height:38px;padding:.45rem}:is(.lg-uu5ujz,.infonomic-copy-button-lg){width:46px;height:46px;min-height:46px;padding:.55rem}:is(.xl-pFYyrS,.infonomic-copy-button-xl){width:54px;height:54px;min-height:54px;padding:.65rem}:is(.input-wrapper-xxN94z,.infonomic-input-wrapper){gap:var(--gap-1);flex-direction:column;display:flex}:is(.input-container-GveKcr,.infonomic-input-container){align-items:center;gap:var(--gap-2);width:100%;padding:0;display:flex;position:relative}:is(.input-voSL1w,.infonomic-input){gap:var(--gap-2);width:100%;transition:all var(--transition-normal);border-radius:var(--border-radius-sm);border:none;outline:none;align-items:center;font-weight:400;display:inline-flex}:is(.input-voSL1w:focus,.input-voSL1w:active,.infonomic-input:focus,.infonomic-input:active){--ring-offset-color:var(--background);--ring-offset-shadow:var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);--ring-shadow:var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);box-shadow:var(--ring-offset-shadow), var(--ring-shadow), var(--shadow,0 0 #0000)}:is(.input-voSL1w:disabled,.input-voSL1w[disabled],.infonomic-input:disabled,.infonomic-input[disabled]){pointer-events:none}:is(.label-a8k0oS,.infonomic-input-label){color:var(--label-color);font-size:.875rem;font-weight:500}:is(.sm-cI5ETu,.infonomic-input-sm){min-height:32px;padding:.25rem .5rem;font-size:.875rem;line-height:0}:is(.md-moqLi4,.infonomic-input-md){min-height:38px;padding:.4rem .5rem;font-size:1.1rem;line-height:0}:is(.lg-Tn3YZZ,.infonomic-input-lg){min-height:46px;padding:.5rem;font-size:1.2rem;line-height:0}:is(.start-adornment-H0sdmX,.end-adornment-xl3mid,.infonomic-input-start-adornment,.infonomic-input-end-adornment){align-items:center;display:flex;position:absolute}:is(.start-adornment-H0sdmX,.infonomic-input-start-adornment){left:5px}:is(.end-adornment-xl3mid,.infonomic-input-end-adornment){right:5px}:is(.help-text-MZW4yX,.infonomic-input-help-text){color:var(--help-text-color);font-size:.75rem}:is(.outlined-xbB8mE,.infonomic-input-outlined){border:1px solid var(--input-variant-outlined-border);background-color:#0000}:is(.outlined-xbB8mE:hover,.infonomic-input-outlined:hover){border:1px solid var(--input-variant-outlined-hover-border)}:is(.outlined-xbB8mE:focus,.outlined-xbB8mE:active,.infonomic-input-outlined:focus,.infonomic-input-outlined:active){--ring-color:var(--input-variant-outline-ring-color)}:is(.underlined-zAz2HP,.infonomic-input-underlined){border-bottom:1px solid var(--input-variant-underlined-border);gap:var(--gap-1);background-color:var(--input-variant-underlined);border-radius:0}.underlined-zAz2HP.sm-cI5ETu,.infonomic-input-underlined.input-sm{min-height:26px;padding:.25rem .1rem}.underlined-zAz2HP.md-moqLi4,.infonomic-input-underlined.input-md{min-height:30px;padding:.25rem .1rem}.underlined-zAz2HP.lg-Tn3YZZ,.infonomic-input-underlined.input-lg{min-height:34px;padding:0 .1rem}:is(.underlined-zAz2HP:hover,.infonomic-input-underlined:hover){border-bottom:1px solid var(--input-variant-underlined-hover-border)}:is(.filled-M1_LzJ,.infonomic-input-filled){background-color:var(--input-variant-filled)}:is(.error-n0kSb0,.infonomic-input-error),:is(.error-n0kSb0:hover,.infonomic-input-error:hover){border:1px solid var(--red-400)}:is(.error-n0kSb0:focus,.error-n0kSb0:active,.infonomic-input-error:focus,.infonomic-input-error:active){--ring-color:var(--red-300)}.underlined-zAz2HP.start-adornment-padding-YAcYOx,.start-adornment-padding-YAcYOx,.infonomic-input-underlined.input-start-adornment-padding,.infonomic-input-start-adornment-padding{padding-left:2rem}.underlined-zAz2HP.end-adornment-padding-nC63CK,.end-adornment-padding-nC63CK,.infonomic-input-underlined.input-end-adornment-padding,.infonomic-input-end-adornment-padding{padding-right:2rem}.underlined-zAz2HP.start-adornment-H0sdmX,.infonomic-input-underlined.input-start-adornment{left:0}.underlined-zAz2HP.end-adornment-xl3mid,.infonomic-input-underlined.input-end-adornment{right:0}:is(.primary-xZZpZI,.infonomic-input-primary){--input-variant-outlined-border:var(--stroke-primary);--input-variant-outlined-hover-border:var(--stroke-primary-hover);--input-variant-outline-ring-color:var(--ring-primary);--input-variant-underlined-border:var(--stroke-primary);--input-variant-underlined-hover-border:var(--stroke-primary-hover);--input-variant-filled:var(--fill-primary-weak)}:is(.secondary-WWDy2x,.infonomic-input-secondary){--input-variant-outlined-border:var(--stroke-secondary);--input-variant-outlined-hover-border:var(--stroke-secondary-hover);--input-variant-outline-ring-color:var(--ring-secondary);--input-variant-underlined-border:var(--stroke-secondary);--input-variant-underlined-hover-border:var(--stroke-secondary-hover);--input-variant-filled:var(--fill-secondary-weak)}:is(.noeffect-LHbgak,.infonomic-input-noeffect){--input-variant-outlined-border:var(--stroke-noeffect);--input-variant-outlined-hover-border:var(--stroke-noeffect-hover);--input-variant-outline-ring-color:var(--ring-noeffect);--input-variant-underlined-border:var(--stroke-noeffect);--input-variant-underlined-hover-border:var(--stroke-noeffect-hover);--input-variant-filled:var(--fill-noeffect-weak)}:is(.success-pMbTwx,.infonomic-input-success){--input-variant-outlined-border:var(--stroke-success);--input-variant-outlined-hover-border:var(--stroke-success-hover);--input-variant-outline-ring-color:var(--ring-success);--input-variant-underlined-border:var(--stroke-success);--input-variant-underlined-hover-border:var(--stroke-success-hover);--input-variant-filled:var(--fill-success-weak)}:is(.info-SRpUkb,.infonomic-input-info){--input-variant-outlined-border:var(--stroke-info);--input-variant-outlined-hover-border:var(--stroke-info-hover);--input-variant-outline-ring-color:var(--ring-info);--input-variant-underlined-border:var(--stroke-info);--input-variant-underlined-hover-border:var(--stroke-info-hover);--input-variant-filled:var(--fill-info-weak)}:is(.warning-mHL8O2,.infonomic-input-warning){--input-variant-outlined-border:var(--stroke-warning);--input-variant-outlined-hover-border:var(--stroke-warning-hover);--input-variant-outline-ring-color:var(--ring-warning);--input-variant-underlined-border:var(--stroke-warning);--input-variant-underlined-hover-border:var(--stroke-warning-hover);--input-variant-filled:var(--fill-warning-weak)}:is(.danger-Rzx3WQ,.infonomic-input-danger){--input-variant-outlined-border:var(--stroke-danger);--input-variant-outlined-hover-border:var(--stroke-danger-hover);--input-variant-outline-ring-color:var(--ring-danger);--input-variant-underlined-border:var(--stroke-danger);--input-variant-underlined-hover-border:var(--stroke-danger-hover);--input-variant-filled:var(--fill-danger-weak)}:is(.adornment-IbSUaL,.infonomic-input-adornment){white-space:nowrap;align-items:center;line-height:0;display:flex}:is(.start-hcDqEk,.infonomic-input-adornment-start){justify-content:flex-start}:is(.end-j0ZhyO,.infonomic-input-adornment-end){justify-content:flex-end}:is(.text-area-P_aQjC,.infonomic-text-area){width:100%;padding:.5rem;font-size:1.1rem}:is(.underlined-a9hkur,.infonomic-text-area--underlined){padding-left:0;padding-right:0}:is(.label-Q88hWY,.infonomic-label){color:var(--text);font-weight:500;display:block}:is(.required-uod5eu,.infonomic-label-required){color:var(--error)}:is(.text-xJE0DB,.infonomic-error-text){color:var(--error);font-size:.875rem}:is(.text-U6KD9f,.infonomic-help-text){color:var(--muted);font-size:.875rem}:is(.section-CEcZOp,.infonomic-section){width:100%;position:relative}:is(.scroll-to-top-WYqAAl,.infonomic-scroll-to-top){opacity:0;visibility:hidden;z-index:20;width:0;height:0;color:var(--text-on-primary);background-color:var(--fill-primary-strong);cursor:pointer;border-style:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.5,1),color 1ms;display:flex;position:fixed;bottom:45px;right:30px}.scroll-to-top-WYqAAl span,.infonomic-scroll-to-top span{width:18px;padding-bottom:3px}.scroll-to-top-WYqAAl span svg path,.infonomic-scroll-to-top span svg path{stroke:none;fill:var(--text-on-primary)}.scroll-to-top-WYqAAl:hover,.scroll-to-top-WYqAAl:focus,.infonomic-scroll-to-top:hover,.infonomic-scroll-to-top:focus{color:var(--text-on-primary);background-color:var(--fill-primary-strong-hover);transform:translateY(-5px)}:is(.scroll-to-top-shown-Wemu5m,.infonomic-scroll-to-top-shown){opacity:1;visibility:visible;border-radius:20px;width:40px;min-width:0;height:40px;padding:0;bottom:20px;right:10px}@media screen and (width>=587px){:is(.scroll-to-top-WYqAAl,.infonomic-scroll-to-top){bottom:45px;right:45px}.scroll-to-top-WYqAAl span,.infonomic-scroll-to-top span{width:18px}:is(.scroll-to-top-shown-Wemu5m,.infonomic-scroll-to-top-shown){border-radius:21px;width:42px;height:42px;bottom:22px;right:22px}}}
|
|
1
|
+
@layer infonomic-base,infonomic-functional,infonomic-utilities,infonomic-theme,infonomic-typography;@layer infonomic-components{:is(.card-mqJaiW,.infonomic-card){width:100%;max-width:100%;color:var(--foreground);background:var(--canvas-25);border-width:var(--border-width-thin);border-color:var(--border-color);border-style:var(--border-style-solid);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);flex-direction:column;text-decoration:none;display:flex}:is(:is(.dark,[data-theme=dark]) .card-mqJaiW,:is(.dark,[data-theme=dark]) .infonomic-card){background:var(--canvas-800)}:is(.card-hover-hvT4d6,.infonomic-card-hover){transition:background .2s ease-in-out}:is(.card-hover-hvT4d6:hover,.infonomic-card-hover:hover){background:oklch(from var(--theme-50) 1 .03 h)}:is(:is(.dark,[data-theme=dark]) .card-hover-hvT4d6:hover,:is(.dark,[data-theme=dark]) .infonomic-card-hover:hover){background:oklch(from var(--canvas-800) .2 c h)}:is(.card-header-XnoBkP,.infonomic-card-header){flex-direction:column;gap:.5rem;padding:1rem;display:flex}:is(.card-title-JI7Lu3,.infonomic-card-title){color:var(--headings);letter-spacing:-.015em;font-size:1.8rem;font-weight:700;line-height:1}:is(.card-description-fwu7HE,.infonomic-card-description){color:var(--muted);font-size:.875rem}:is(.card-content-uhoZYJ,.infonomic-card-content){flex:1;padding:0 1rem 1rem}:is(.card-footer-BxTa4b,.infonomic-card-footer){align-items:center;padding:0 1rem 1rem;display:flex}:is(.container-tSpizY,.infonomic-container){width:100%;max-width:60rem;margin:0 auto;padding:0 1rem}@media (width>=66rem){:is(.container-tSpizY,.infonomic-container){max-width:64rem}}@media (width>=77rem){:is(.container-tSpizY,.infonomic-container){max-width:74.375rem}}@media (width>=94rem){:is(.container-tSpizY,.infonomic-container){max-width:87.5rem}}:is(.badge-8xVidp,.infonomic-badge){font-size:var(--font-size-sm);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--border-radius-sm);padding:.25em .4em;font-weight:400;line-height:1;display:inline-block}:is(.primary-oZyR_M,.infonomic-badge-primary){color:var(--text-on-primary-strong);background-color:var(--fill-primary-strong)}:is(.secondary-VsqJTm,.infonomic-badge-secondary){color:var(--text-on-secondary-strong);background-color:var(--fill-secondary-strong)}:is(.noeffect-R8eJtO,.infonomic-badge-noeffect){color:var(--text-on-noeffect-strong);background-color:var(--fill-noeffect-strong)}:is(.success-h2otET,.infonomic-badge-success){color:var(--text-on-success-strong);background-color:var(--fill-success-strong)}:is(.info-OG3F3u,.infonomic-badge-info){color:var(--text-on-info-strong);background-color:var(--fill-info-strong)}:is(.warning-zTXksZ,.infonomic-badge-warning){color:var(--text-on-warning-strong);background-color:var(--fill-warning-strong)}:is(.danger-hKF7l_,.infonomic-badge-danger){color:var(--text-on-danger-strong);background-color:var(--fill-danger-strong)}:is(.button-IjDhC0,.infonomic-button){cursor:pointer;text-align:center;gap:var(--gap-2);white-space:nowrap;outline-offset:2px;transition:background-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--border-radius-sm);border:none;outline:2px solid #0000;justify-content:center;align-items:center;font-weight:400;line-height:0;display:inline-flex}:is(.button-IjDhC0:disabled,.button-IjDhC0[disabled],.infonomic-button:disabled,.infonomic-button[disabled]){pointer-events:none}:is(.button-IjDhC0:focus,.button-IjDhC0:active,.infonomic-button:focus,.infonomic-button:active){--ring-offset-color:var(--background);--ring-offset-shadow:var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);--ring-shadow:var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);box-shadow:var(--ring-offset-shadow), var(--ring-shadow), var(--shadow,0 0 #0000)}.button-IjDhC0.square-P_6yde,.infonomic-button-square{aspect-ratio:1;border-radius:var(--border-radius-sm);padding:0}.button-IjDhC0.round-uqus3n,.infonomic-button-round{aspect-ratio:1;border-radius:var(--border-radius-full);padding:0}:is(.xs-jxTd5R,.infonomic-button-xs){min-height:26px;padding:.2rem .4rem;font-size:.7rem}:is(.sm-uD_Ugt,.infonomic-button-sm){min-height:32px;padding:.25rem .5rem;font-size:.775rem}:is(.md-Qp9ad6,.infonomic-button-md){min-height:38px;padding:.625rem 1.25rem;font-size:.95rem}:is(.lg-FAYTen,.infonomic-button-lg){min-height:46px;padding:.75rem 1.5rem;font-size:1.1rem}:is(.xl-Gwvhl4,.infonomic-button-xl){min-height:54px;padding:.75rem 1.5rem;font-size:1.2rem}:is(.filled-CwGsrO,.infonomic-button-filled){color:var(--button-variant-filled-foreground);background-color:var(--button-variant-filled)}:is(.filled-CwGsrO:hover,.infonomic-button-filled:hover){background-color:var(--button-variant-filled-hover)}:is(.filled-CwGsrO:focus,.filled-CwGsrO:active,.infonomic-button-filled:focus,.infonomic-button-filled:active){--ring-color:var(--button-ring-color)}:is(.filled-CwGsrO:disabled,.filled-CwGsrO[disabled],.infonomic-button-filled:disabled,.infonomic-button-filled[disabled]){background-color:var(--button-variant-filled-disabled,oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h));color:var(--button-variant-filled-foreground-disabled,oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h))}:is(.filled-weak-QLU8bA,.infonomic-button-filled-weak){color:var(--button-variant-filled-weak-foreground);background-color:var(--button-variant-filled-weak)}:is(.filled-weak-QLU8bA:hover,.infonomic-button-filled-weak:hover){background-color:var(--button-variant-filled-weak-hover)}:is(.filled-weak-QLU8bA:focus,.filled-weak-QLU8bA:active,.infonomic-button-filled-weak:focus,.infonomic-button-filled-weak:active){--ring-color:var(--button-ring-color)}:is(.filled-weak-QLU8bA:disabled,.filled-weak-QLU8bA[disabled],.infonomic-button-filled-weak:disabled,.infonomic-button-filled-weak[disabled]){background-color:var(--button-variant-filled-weak-disabled,oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));color:var(--button-variant-filled-weak-foreground-disabled,oklch(from var(--button-variant-filled-weak-foreground) calc(l * .9) calc(c * .85) h))}:is(.outlined-nZGbxu,.infonomic-button-outlined){border:1px solid var(--button-variant-outlined-border);color:var(--button-variant-outlined-foreground);background-color:var(--button-variant-outlined)}:is(.outlined-nZGbxu:disabled,.outlined-nZGbxu[disabled],.infonomic-button-outlined:disabled,.infonomic-button-outlined[disabled]){border-color:var(--button-variant-outlined-border-disabled,oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));color:var(--button-variant-outlined-foreground-disabled,oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h))}:is(.outlined-nZGbxu:hover,.infonomic-button-outlined:hover){background-color:var(--button-variant-outlined-hover)}:is(.outlined-nZGbxu:focus,.outlined-nZGbxu:active,.infonomic-button-outlined:focus,.infonomic-button-outlined:active){--ring-color:var(--button-ring-color)}:is(.gradient-ySC3O3,.infonomic-button-gradient){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:disabled,.gradient-ySC3O3[disabled],.infonomic-button-gradient:disabled,.infonomic-button-gradient[disabled]){background:unset;background-color:var(--button-variant-gradient-disabled,oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h));color:var(--button-variant-gradient-foreground-disabled,oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h))}:is(.gradient-ySC3O3:hover,.infonomic-button-gradient:hover){color:var(--button-variant-gradient-foreground);background:linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end))}:is(.gradient-ySC3O3:focus,.gradient-ySC3O3:active,.infonomic-button-gradient:focus,.infonomic-button-gradient:active){--ring-color:var(--button-ring-color)}:is(.text-GaxlcE,.infonomic-button-text){background-color:var(--button-variant-text);color:var(--button-variant-text-foreground)}:is(.text-GaxlcE:disabled,.text-GaxlcE[disabled],.infonomic-button-text:disabled,.infonomic-button-text[disabled]){color:oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * .5) h)}:is(.text-GaxlcE:hover,.infonomic-button-text:hover){background-color:var(--button-variant-text-hover)}:is(.text-GaxlcE:focus,.text-GaxlcE:active,.infonomic-button-text:focus,.infonomic-button-text:active){--ring-color:var(--button-ring-color)}:is(.primary-tUmczz,.infonomic-button-primary){--button-ring-color:var(--ring-primary);--button-variant-filled:var(--fill-primary-strong);--button-variant-filled-hover:var(--fill-primary-strong-hover);--button-variant-filled-disabled:var(--fill-primary-strong-disabled);--button-variant-filled-foreground:var(--text-on-primary-strong);--button-variant-filled-foreground-disabled:var(--text-on-primary-strong-disabled);--button-variant-filled-weak:var(--fill-primary-weak);--button-variant-filled-weak-hover:var(--fill-primary-weak-hover);--button-variant-filled-weak-disabled:var(--fill-primary-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-primary-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-primary-weak-disabled);--button-variant-outlined:var(--fill-primary-outlined);--button-variant-outlined-hover:var(--fill-primary-outlined-hover);--button-variant-outlined-border:var(--stroke-primary);--button-variant-outlined-border-disabled:var(--stroke-primary-disabled);--button-variant-outlined-foreground:var(--text-on-primary-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-primary-outlined-disabled);--button-variant-text:var(--fill-primary-text);--button-variant-text-hover:var(--fill-primary-text-hover);--button-variant-text-foreground:var(--text-primary);--button-variant-gradient-start:var(--gradient-primary-start);--button-variant-gradient-end:var(--gradient-primary-end);--button-variant-gradient-foreground:var(--gradient-primary-foreground);--button-variant-gradient-disabled:var(--gradient-primary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-primary-disabled)}:is(.secondary-UqT2AY,.infonomic-button-secondary){--button-ring-color:var(--ring-secondary);--button-variant-filled:var(--fill-secondary-strong);--button-variant-filled-hover:var(--fill-secondary-strong-hover);--button-variant-filled-disabled:var(--fill-secondary-strong-disabled);--button-variant-filled-foreground:var(--text-on-secondary-strong);--button-variant-filled-foreground-disabled:var(--text-on-secondary-strong-disabled);--button-variant-filled-weak:var(--fill-secondary-weak);--button-variant-filled-weak-hover:var(--fill-secondary-weak-hover);--button-variant-filled-weak-disabled:var(--fill-secondary-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-secondary-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-secondary-weak-disabled);--button-variant-outlined:var(--fill-secondary-outlined);--button-variant-outlined-border:var(--stroke-secondary);--button-variant-outlined-border-disabled:var(--stroke-secondary-disabled);--button-variant-outlined-hover:var(--fill-secondary-outlined-hover);--button-variant-outlined-foreground:var(--text-on-secondary-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-secondary-outlined-disabled);--button-variant-text:var(--fill-secondary-text);--button-variant-text-hover:var(--fill-secondary-text-hover);--button-variant-text-foreground:var(--text-secondary);--button-variant-gradient-start:var(--gradient-secondary-start);--button-variant-gradient-end:var(--gradient-secondary-end);--button-variant-gradient-foreground:var(--gradient-secondary-foreground);--button-variant-gradient-disabled:var(--gradient-secondary-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-secondary-disabled)}:is(.noeffect-fpxSgg,.infonomic-button-noeffect){--button-ring-color:var(--ring-noeffect);--button-variant-filled:var(--fill-noeffect-strong);--button-variant-filled-hover:var(--fill-noeffect-strong-hover);--button-variant-filled-disabled:var(--fill-noeffect-strong-disabled);--button-variant-filled-foreground:var(--text-on-noeffect-strong);--button-variant-filled-foreground-disabled:var(--text-on-noeffect-strong-disabled);--button-variant-filled-weak:var(--fill-noeffect-weak);--button-variant-filled-weak-hover:var(--fill-noeffect-weak-hover);--button-variant-filled-weak-disabled:var(--fill-noeffect-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-noeffect-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-noeffect-weak-disabled);--button-variant-outlined:var(--fill-noeffect-outlined);--button-variant-outlined-hover:var(--fill-noeffect-outlined-hover);--button-variant-outlined-disabled:var(--fill-noeffect-outlined-disabled);--button-variant-outlined-border:var(--stroke-noeffect);--button-variant-outlined-border-disabled:var(--stroke-noeffect-disabled);--button-variant-outlined-foreground:var(--text-on-noeffect-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-noeffect-disabled);--button-variant-text:var(--fill-noeffect-text);--button-variant-text-hover:var(--fill-noeffect-text-hover);--button-variant-text-foreground:var(--text-noeffect);--button-variant-gradient-start:var(--gradient-noeffect-start);--button-variant-gradient-end:var(--gradient-noeffect-end);--button-variant-gradient-foreground:var(--gradient-noeffect-foreground);--button-variant-gradient-disabled:var(--gradient-noeffect-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-noeffect-disabled)}:is(.success-fTNDEn,.infonomic-button-success){--button-ring-color:var(--ring-success);--button-variant-filled:var(--fill-success-strong);--button-variant-filled-hover:var(--fill-success-strong-hover);--button-variant-filled-disabled:var(--fill-success-strong-disabled);--button-variant-filled-foreground:var(--text-on-success-strong);--button-variant-filled-foreground-disabled:var(--text-on-success-strong-disabled);--button-variant-filled-weak:var(--fill-success-weak);--button-variant-filled-weak-hover:var(--fill-success-weak-hover);--button-variant-filled-weak-disabled:var(--fill-success-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-success-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-success-weak-disabled);--button-variant-outlined:var(--fill-success-outlined);--button-variant-outlined-hover:var(--fill-success-outlined-hover);--button-variant-outlined-border:var(--stroke-success);--button-variant-outlined-border-disabled:var(--stroke-success-disabled);--button-variant-outlined-foreground:var(--text-on-success-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-success-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-success-text-hover);--button-variant-text-foreground:var(--text-success);--button-variant-gradient-start:var(--gradient-success-start);--button-variant-gradient-end:var(--gradient-success-end);--button-variant-gradient-foreground:var(--gradient-success-foreground);--button-variant-gradient-disabled:var(--gradient-success-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-success-disabled)}:is(.info-qrdXQD,.infonomic-button-info){--button-ring-color:var(--ring-info);--button-variant-filled:var(--fill-info-strong);--button-variant-filled-hover:var(--fill-info-strong-hover);--button-variant-filled-disabled:var(--fill-info-strong-disabled);--button-variant-filled-foreground:var(--text-on-info-strong);--button-variant-filled-foreground-disabled:var(--text-on-info-strong-disabled);--button-variant-filled-weak:var(--fill-info-weak);--button-variant-filled-weak-hover:var(--fill-info-weak-hover);--button-variant-filled-weak-disabled:var(--fill-info-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-info-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-info-weak-disabled);--button-variant-outlined:transparent;--button-variant-outlined-hover:var(--fill-info-outlined-hover);--button-variant-outlined-border:var(--stroke-info);--button-variant-outlined-border-disabled:var(--stroke-info-disabled);--button-variant-outlined-foreground:var(--text-on-info-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-info-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-info-text-hover);--button-variant-text-foreground:var(--text-info);--button-variant-gradient-start:var(--gradient-info-start);--button-variant-gradient-end:var(--gradient-info-end);--button-variant-gradient-foreground:var(--gradient-info-foreground);--button-variant-gradient-disabled:var(--gradient-info-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-info-disabled)}:is(.warning-a00T3A,.infonomic-button-warning){--button-ring-color:var(--ring-warning);--button-variant-filled:var(--fill-warning-strong);--button-variant-filled-hover:var(--fill-warning-strong-hover);--button-variant-filled-disabled:var(--fill-warning-strong-disabled);--button-variant-filled-foreground:var(--text-on-warning-strong);--button-variant-filled-foreground-disabled:var(--text-on-warning-strong-disabled);--button-variant-filled-weak:var(--fill-warning-weak);--button-variant-filled-weak-hover:var(--fill-warning-weak-hover);--button-variant-filled-weak-disabled:var(--fill-warning-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-warning-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-warning-weak-disabled);--button-variant-outlined:var(--fill-warning-outlined);--button-variant-outlined-hover:var(--fill-warning-outlined-hover);--button-variant-outlined-border:var(--stroke-warning);--button-variant-outlined-border-disabled:var(--stroke-warning-disabled);--button-variant-outlined-foreground:var(--text-on-warning-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-warning-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-warning-text-hover);--button-variant-text-foreground:var(--text-warning);--button-variant-gradient-start:var(--gradient-warning-start);--button-variant-gradient-end:var(--gradient-warning-end);--button-variant-gradient-foreground:var(--gradient-warning-foreground);--button-variant-gradient-disabled:var(--gradient-warning-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-warning-disabled)}:is(.danger-rwIV_i,.infonomic-button-danger){--button-ring-color:var(--ring-danger);--button-variant-filled:var(--fill-danger-strong);--button-variant-filled-hover:var(--fill-danger-strong-hover);--button-variant-filled-disabled:var(--fill-danger-strong-disabled);--button-variant-filled-foreground:var(--text-on-danger-strong);--button-variant-filled-foreground-disabled:var(--text-on-danger-strong-disabled);--button-variant-filled-weak:var(--fill-danger-weak);--button-variant-filled-weak-hover:var(--fill-danger-weak-hover);--button-variant-filled-weak-disabled:var(--fill-danger-weak-disabled);--button-variant-filled-weak-foreground:var(--text-on-danger-weak);--button-variant-filled-weak-foreground-disabled:var(--text-on-danger-weak-disabled);--button-variant-outlined:transparent;--button-variant-outlined-hover:var(--fill-danger-outlined-hover);--button-variant-outlined-border:var(--stroke-danger);--button-variant-outlined-border-disabled:var(--stroke-danger-disabled);--button-variant-outlined-foreground:var(--text-on-danger-outlined);--button-variant-outlined-foreground-disabled:var(--text-on-danger-outlined-disabled);--button-variant-text:transparent;--button-variant-text-hover:var(--fill-danger-text-hover);--button-variant-text-foreground:var(--text-danger);--button-variant-gradient-start:var(--gradient-danger-start);--button-variant-gradient-end:var(--gradient-danger-end);--button-variant-gradient-foreground:var(--gradient-danger-foreground);--button-variant-gradient-disabled:var(--gradient-danger-disabled);--button-variant-gradient-foreground-disabled:var(--text-on-danger-disabled)}:is(.fullWidth-wXvP0v,.infonomic-button-full-width){width:100%;display:flex}:is(.button-group-uqvOi8,.infonomic-button-group){place-items:center;gap:var(--gap-2);flex-direction:column;display:flex}@media screen and (width>=40rem){:is(.button-group-uqvOi8,.infonomic-button-group){flex-direction:row}}:is(.copy-button-container-vCNz8o,.infonomic-copy-button-container){display:inline-block}:is(.copy-button-oa4bdj svg,.infonomic-copy-button svg){width:90%;height:90%;display:block}:is(.xs-lZmf78,.infonomic-copy-button-xs){width:26px;height:26px;min-height:26px;padding:.25rem}:is(.sm-KNN1e5,.infonomic-copy-button-sm){width:32px;height:32px;min-height:32px;padding:.35rem}:is(.md-OoH0l4,.infonomic-copy-button-md){width:38px;height:38px;min-height:38px;padding:.45rem}:is(.lg-uu5ujz,.infonomic-copy-button-lg){width:46px;height:46px;min-height:46px;padding:.55rem}:is(.xl-pFYyrS,.infonomic-copy-button-xl){width:54px;height:54px;min-height:54px;padding:.65rem}:is(.input-wrapper-xxN94z,.infonomic-input-wrapper){gap:var(--gap-1);flex-direction:column;display:flex}:is(.input-container-GveKcr,.infonomic-input-container){align-items:center;gap:var(--gap-2);width:100%;padding:0;display:flex;position:relative}:is(.input-voSL1w,.infonomic-input){gap:var(--gap-2);width:100%;transition:all var(--transition-normal);border-radius:var(--border-radius-sm);border:none;outline:none;align-items:center;font-weight:400;display:inline-flex}:is(.input-voSL1w:focus,.input-voSL1w:active,.infonomic-input:focus,.infonomic-input:active){--ring-offset-color:var(--background);--ring-offset-shadow:var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);--ring-shadow:var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);box-shadow:var(--ring-offset-shadow), var(--ring-shadow), var(--shadow,0 0 #0000)}:is(.input-voSL1w:disabled,.input-voSL1w[disabled],.infonomic-input:disabled,.infonomic-input[disabled]){pointer-events:none}:is(.label-a8k0oS,.infonomic-input-label){color:var(--label-color);font-size:.875rem;font-weight:500}:is(.sm-cI5ETu,.infonomic-input-sm){min-height:32px;padding:.25rem .5rem;font-size:.875rem;line-height:0}:is(.md-moqLi4,.infonomic-input-md){min-height:38px;padding:.4rem .5rem;font-size:1.1rem;line-height:0}:is(.lg-Tn3YZZ,.infonomic-input-lg){min-height:46px;padding:.5rem;font-size:1.2rem;line-height:0}:is(.start-adornment-H0sdmX,.end-adornment-xl3mid,.infonomic-input-start-adornment,.infonomic-input-end-adornment){align-items:center;display:flex;position:absolute}:is(.start-adornment-H0sdmX,.infonomic-input-start-adornment){left:5px}:is(.end-adornment-xl3mid,.infonomic-input-end-adornment){right:5px}:is(.help-text-MZW4yX,.infonomic-input-help-text){color:var(--help-text-color);font-size:.75rem}:is(.outlined-xbB8mE,.infonomic-input-outlined){border:1px solid var(--input-variant-outlined-border);background-color:#0000}:is(.outlined-xbB8mE:hover,.infonomic-input-outlined:hover){border:1px solid var(--input-variant-outlined-hover-border)}:is(.outlined-xbB8mE:focus,.outlined-xbB8mE:active,.infonomic-input-outlined:focus,.infonomic-input-outlined:active){--ring-color:var(--input-variant-outline-ring-color)}:is(.underlined-zAz2HP,.infonomic-input-underlined){border-bottom:1px solid var(--input-variant-underlined-border);gap:var(--gap-1);background-color:var(--input-variant-underlined);border-radius:0}.underlined-zAz2HP.sm-cI5ETu,.infonomic-input-underlined.input-sm{min-height:26px;padding:.25rem .1rem}.underlined-zAz2HP.md-moqLi4,.infonomic-input-underlined.input-md{min-height:30px;padding:.25rem .1rem}.underlined-zAz2HP.lg-Tn3YZZ,.infonomic-input-underlined.input-lg{min-height:34px;padding:0 .1rem}:is(.underlined-zAz2HP:hover,.infonomic-input-underlined:hover){border-bottom:1px solid var(--input-variant-underlined-hover-border)}:is(.filled-M1_LzJ,.infonomic-input-filled){background-color:var(--input-variant-filled)}:is(.error-n0kSb0,.infonomic-input-error),:is(.error-n0kSb0:hover,.infonomic-input-error:hover){border:1px solid var(--red-400)}:is(.error-n0kSb0:focus,.error-n0kSb0:active,.infonomic-input-error:focus,.infonomic-input-error:active){--ring-color:var(--red-300)}.underlined-zAz2HP.start-adornment-padding-YAcYOx,.start-adornment-padding-YAcYOx,.infonomic-input-underlined.input-start-adornment-padding,.infonomic-input-start-adornment-padding{padding-left:2rem}.underlined-zAz2HP.end-adornment-padding-nC63CK,.end-adornment-padding-nC63CK,.infonomic-input-underlined.input-end-adornment-padding,.infonomic-input-end-adornment-padding{padding-right:2rem}.underlined-zAz2HP.start-adornment-H0sdmX,.infonomic-input-underlined.input-start-adornment{left:0}.underlined-zAz2HP.end-adornment-xl3mid,.infonomic-input-underlined.input-end-adornment{right:0}:is(.primary-xZZpZI,.infonomic-input-primary){--input-variant-outlined-border:var(--stroke-primary);--input-variant-outlined-hover-border:var(--stroke-primary-hover);--input-variant-outline-ring-color:var(--ring-primary);--input-variant-underlined-border:var(--stroke-primary);--input-variant-underlined-hover-border:var(--stroke-primary-hover);--input-variant-filled:var(--fill-primary-weak)}:is(.secondary-WWDy2x,.infonomic-input-secondary){--input-variant-outlined-border:var(--stroke-secondary);--input-variant-outlined-hover-border:var(--stroke-secondary-hover);--input-variant-outline-ring-color:var(--ring-secondary);--input-variant-underlined-border:var(--stroke-secondary);--input-variant-underlined-hover-border:var(--stroke-secondary-hover);--input-variant-filled:var(--fill-secondary-weak)}:is(.noeffect-LHbgak,.infonomic-input-noeffect){--input-variant-outlined-border:var(--stroke-noeffect);--input-variant-outlined-hover-border:var(--stroke-noeffect-hover);--input-variant-outline-ring-color:var(--ring-noeffect);--input-variant-underlined-border:var(--stroke-noeffect);--input-variant-underlined-hover-border:var(--stroke-noeffect-hover);--input-variant-filled:var(--fill-noeffect-weak)}:is(.success-pMbTwx,.infonomic-input-success){--input-variant-outlined-border:var(--stroke-success);--input-variant-outlined-hover-border:var(--stroke-success-hover);--input-variant-outline-ring-color:var(--ring-success);--input-variant-underlined-border:var(--stroke-success);--input-variant-underlined-hover-border:var(--stroke-success-hover);--input-variant-filled:var(--fill-success-weak)}:is(.info-SRpUkb,.infonomic-input-info){--input-variant-outlined-border:var(--stroke-info);--input-variant-outlined-hover-border:var(--stroke-info-hover);--input-variant-outline-ring-color:var(--ring-info);--input-variant-underlined-border:var(--stroke-info);--input-variant-underlined-hover-border:var(--stroke-info-hover);--input-variant-filled:var(--fill-info-weak)}:is(.warning-mHL8O2,.infonomic-input-warning){--input-variant-outlined-border:var(--stroke-warning);--input-variant-outlined-hover-border:var(--stroke-warning-hover);--input-variant-outline-ring-color:var(--ring-warning);--input-variant-underlined-border:var(--stroke-warning);--input-variant-underlined-hover-border:var(--stroke-warning-hover);--input-variant-filled:var(--fill-warning-weak)}:is(.danger-Rzx3WQ,.infonomic-input-danger){--input-variant-outlined-border:var(--stroke-danger);--input-variant-outlined-hover-border:var(--stroke-danger-hover);--input-variant-outline-ring-color:var(--ring-danger);--input-variant-underlined-border:var(--stroke-danger);--input-variant-underlined-hover-border:var(--stroke-danger-hover);--input-variant-filled:var(--fill-danger-weak)}:is(.adornment-IbSUaL,.infonomic-input-adornment){white-space:nowrap;align-items:center;line-height:0;display:flex}:is(.start-hcDqEk,.infonomic-input-adornment-start){justify-content:flex-start}:is(.end-j0ZhyO,.infonomic-input-adornment-end){justify-content:flex-end}:is(.text-area-P_aQjC,.infonomic-text-area){width:100%;padding:.5rem;font-size:1.1rem}:is(.underlined-a9hkur,.infonomic-text-area--underlined){padding-left:0;padding-right:0}:is(.label-Q88hWY,.infonomic-label){color:var(--text);font-weight:500;display:block}:is(.required-uod5eu,.infonomic-label-required){color:var(--error)}:is(.text-xJE0DB,.infonomic-error-text){color:var(--error);font-size:.875rem}:is(.text-U6KD9f,.infonomic-help-text){color:var(--muted);font-size:.875rem}:is(.section-CEcZOp,.infonomic-section){width:100%;position:relative}:is(.scroll-to-top-WYqAAl,.infonomic-scroll-to-top){opacity:0;visibility:hidden;z-index:20;width:0;height:0;color:var(--text-on-primary);background-color:var(--fill-primary-strong);cursor:pointer;border-style:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.5,1),color 1ms;display:flex;position:fixed;bottom:45px;right:30px}.scroll-to-top-WYqAAl span,.infonomic-scroll-to-top span{width:18px;padding-bottom:3px}.scroll-to-top-WYqAAl span svg path,.infonomic-scroll-to-top span svg path{stroke:none;fill:var(--text-on-primary)}.scroll-to-top-WYqAAl:hover,.scroll-to-top-WYqAAl:focus,.infonomic-scroll-to-top:hover,.infonomic-scroll-to-top:focus{color:var(--text-on-primary);background-color:var(--fill-primary-strong-hover);transform:translateY(-5px)}:is(.scroll-to-top-shown-Wemu5m,.infonomic-scroll-to-top-shown){opacity:1;visibility:visible;border-radius:20px;width:40px;min-width:0;height:40px;padding:0;bottom:20px;right:10px}@media screen and (width>=587px){:is(.scroll-to-top-WYqAAl,.infonomic-scroll-to-top){bottom:45px;right:45px}.scroll-to-top-WYqAAl span,.infonomic-scroll-to-top span{width:18px}:is(.scroll-to-top-shown-Wemu5m,.infonomic-scroll-to-top-shown){border-radius:21px;width:42px;height:42px;bottom:22px;right:22px}}}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@infonomic/uikit",
|
|
3
3
|
"private": false,
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "5.
|
|
5
|
+
"version": "5.36.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
|
|
8
8
|
"keywords": [
|
|
@@ -58,17 +58,17 @@
|
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@mantine/hooks": "^8.3.
|
|
61
|
+
"@mantine/hooks": "^8.3.15",
|
|
62
62
|
"@radix-ui/react-icons": "^1.3.2",
|
|
63
63
|
"@radix-ui/react-slot": "^1.2.4",
|
|
64
64
|
"classnames": "^2.5.1",
|
|
65
65
|
"date-fns": "^4.1.0",
|
|
66
66
|
"material-ripple-effects": "^2.0.1",
|
|
67
|
-
"motion": "^12.
|
|
67
|
+
"motion": "^12.34.2",
|
|
68
68
|
"npm-run-all": "^4.1.5",
|
|
69
69
|
"prism-react-renderer": "^2.4.1",
|
|
70
70
|
"radix-ui": "^1.4.3",
|
|
71
|
-
"react-day-picker": "^9.13.
|
|
71
|
+
"react-day-picker": "^9.13.2",
|
|
72
72
|
"zod": "^4.3.6",
|
|
73
73
|
"zod-form-data": "^3.0.1"
|
|
74
74
|
},
|
|
@@ -78,29 +78,29 @@
|
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
80
|
"@astrojs/check": "0.9.6",
|
|
81
|
-
"@astrojs/node": "9.5.
|
|
82
|
-
"@biomejs/biome": "2.3
|
|
83
|
-
"@rsbuild/plugin-react": "^1.4.
|
|
84
|
-
"@rslib/core": "^0.19.
|
|
85
|
-
"@storybook/addon-a11y": "^10.2.
|
|
86
|
-
"@storybook/addon-docs": "^10.2.
|
|
87
|
-
"@storybook/addon-links": "^10.2.
|
|
88
|
-
"@storybook/addon-themes": "^10.2.
|
|
89
|
-
"@storybook/react-vite": "^10.2.
|
|
81
|
+
"@astrojs/node": "9.5.4",
|
|
82
|
+
"@biomejs/biome": "2.4.3",
|
|
83
|
+
"@rsbuild/plugin-react": "^1.4.5",
|
|
84
|
+
"@rslib/core": "^0.19.6",
|
|
85
|
+
"@storybook/addon-a11y": "^10.2.10",
|
|
86
|
+
"@storybook/addon-docs": "^10.2.10",
|
|
87
|
+
"@storybook/addon-links": "^10.2.10",
|
|
88
|
+
"@storybook/addon-themes": "^10.2.10",
|
|
89
|
+
"@storybook/react-vite": "^10.2.10",
|
|
90
90
|
"@types/lodash": "^4.17.23",
|
|
91
|
-
"@types/node": "^25.
|
|
92
|
-
"@types/react": "19.2.
|
|
91
|
+
"@types/node": "^25.3.0",
|
|
92
|
+
"@types/react": "19.2.14",
|
|
93
93
|
"@types/react-dom": "19.2.3",
|
|
94
|
-
"@vitejs/plugin-react": "^5.1.
|
|
95
|
-
"astro": "5.17.
|
|
94
|
+
"@vitejs/plugin-react": "^5.1.4",
|
|
95
|
+
"astro": "5.17.3",
|
|
96
96
|
"chokidar": "^5.0.0",
|
|
97
|
-
"eslint-plugin-storybook": "^10.2.
|
|
97
|
+
"eslint-plugin-storybook": "^10.2.10",
|
|
98
98
|
"lightningcss": "^1.31.1",
|
|
99
99
|
"lightningcss-cli": "^1.31.1",
|
|
100
100
|
"react": "19.2.4",
|
|
101
101
|
"react-dom": "19.2.4",
|
|
102
|
-
"rimraf": "^6.1.
|
|
103
|
-
"storybook": "^10.2.
|
|
102
|
+
"rimraf": "^6.1.3",
|
|
103
|
+
"storybook": "^10.2.10",
|
|
104
104
|
"typescript": "5.9.3",
|
|
105
105
|
"typescript-plugin-css-modules": "^5.2.0",
|
|
106
106
|
"vite": "^7.3.1",
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
|
|
2
|
+
|
|
3
|
+
@layer infonomic-components {
|
|
4
|
+
|
|
5
|
+
.combo-button-wrapper,
|
|
6
|
+
:global(.infonomic-combo-button-wrapper) {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: 0.1rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.combo-button-button,
|
|
13
|
+
:global(.infonomic-combo-button-button) {
|
|
14
|
+
box-shadow: none;
|
|
15
|
+
border-bottom-right-radius: 0;
|
|
16
|
+
border-top-right-radius: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.combo-button-button:focus,
|
|
20
|
+
.combo-button-button:active {
|
|
21
|
+
box-shadow: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.combo-button-trigger,
|
|
25
|
+
:global(.infonomic-combo-button-trigger) {
|
|
26
|
+
box-shadow: none;
|
|
27
|
+
border-bottom-left-radius: 0;
|
|
28
|
+
border-top-left-radius: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.combo-button-trigger:focus,
|
|
32
|
+
.combo-button-trigger:active {
|
|
33
|
+
box-shadow: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.combo-button-options,
|
|
37
|
+
:global(.infonomic-combo-button-options) {
|
|
38
|
+
min-width: 120px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.combo-button-options-item,
|
|
42
|
+
:global(.infonomic-combo-button-options-item) {}
|
|
43
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import cx from 'classnames'
|
|
2
|
+
|
|
3
|
+
import { ChevronDownIcon } from '../../icons/chevron-down-icon'
|
|
4
|
+
import { Dropdown as DropdownComponent } from '../dropdown/dropdown'
|
|
5
|
+
import { Button, type ButtonProps } from './button'
|
|
6
|
+
import styles from './combo-button.module.css'
|
|
7
|
+
|
|
8
|
+
export type ComboButtonProps = ButtonProps & {
|
|
9
|
+
options: { label: string; value: string }[]
|
|
10
|
+
onButtonClick?: () => void
|
|
11
|
+
onOptionSelect?: (value: string) => void
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const ComboButton = ({
|
|
15
|
+
options,
|
|
16
|
+
onButtonClick,
|
|
17
|
+
onOptionSelect,
|
|
18
|
+
...rest
|
|
19
|
+
}: ComboButtonProps) => {
|
|
20
|
+
return (
|
|
21
|
+
<div className={cx('combo-button-wrapper', styles['combo-button-wrapper'])}>
|
|
22
|
+
<Button className={cx('combo-button-button', styles['combo-button-button'])} {...rest} onClick={onButtonClick}>
|
|
23
|
+
Combo Button
|
|
24
|
+
</Button>
|
|
25
|
+
<DropdownComponent.Root>
|
|
26
|
+
<DropdownComponent.Trigger asChild>
|
|
27
|
+
<Button className={cx('combo-button-trigger', styles['combo-button-trigger'])} {...rest}>
|
|
28
|
+
<ChevronDownIcon width="16px" height="16px" />
|
|
29
|
+
</Button>
|
|
30
|
+
</DropdownComponent.Trigger>
|
|
31
|
+
|
|
32
|
+
<DropdownComponent.Portal>
|
|
33
|
+
<DropdownComponent.Content
|
|
34
|
+
className={cx('combo-button-options', styles['combo-button-options'])}
|
|
35
|
+
align="end"
|
|
36
|
+
data-side="top"
|
|
37
|
+
sideOffset={5}
|
|
38
|
+
>
|
|
39
|
+
{options.map((option) => (
|
|
40
|
+
<DropdownComponent.Item
|
|
41
|
+
key={option.value}
|
|
42
|
+
onSelect={() => onOptionSelect?.(option.value)}
|
|
43
|
+
>
|
|
44
|
+
<div className={cx('combo-button-options-item', styles['combo-button-options-item'])}>{option.label}</div>
|
|
45
|
+
</DropdownComponent.Item>
|
|
46
|
+
))}
|
|
47
|
+
</DropdownComponent.Content>
|
|
48
|
+
</DropdownComponent.Portal>
|
|
49
|
+
</DropdownComponent.Root>
|
|
50
|
+
</div>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite'
|
|
2
|
+
|
|
3
|
+
import { ComboButton } from './combo-button.js'
|
|
4
|
+
|
|
5
|
+
type Story = StoryObj<typeof ComboButton>
|
|
6
|
+
|
|
7
|
+
const options = [
|
|
8
|
+
{ label: 'Item 1', value: 'item1' },
|
|
9
|
+
{ label: 'Item 2', value: 'item2' },
|
|
10
|
+
{ label: 'Item 3', value: 'item3' },
|
|
11
|
+
]
|
|
12
|
+
|
|
13
|
+
const handleButtonClick = () => {
|
|
14
|
+
alert('Button clicked!')
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const handleOptionSelect = (value: string) => {
|
|
18
|
+
alert(`Selected option: ${value}`)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const ComboButtonDemo = (): React.JSX.Element => {
|
|
22
|
+
return (
|
|
23
|
+
<div style={{ maxWidth: '600px', margin: '2rem auto' }}>
|
|
24
|
+
<div className="ml-12 mb-6">
|
|
25
|
+
<h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Combo Button</h2>
|
|
26
|
+
<div className="flex items-center gap-4 mb-6">
|
|
27
|
+
<ComboButton size="sm" options={options} onButtonClick={handleButtonClick} onOptionSelect={handleOptionSelect} />
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export const ComboButtons: Story = {
|
|
35
|
+
render: () => <ComboButtonDemo />,
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const meta: Meta<typeof ComboButton> = {
|
|
39
|
+
/* 👇 The title prop is optional.
|
|
40
|
+
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
|
41
|
+
* to learn how to generate automatic titles
|
|
42
|
+
*/
|
|
43
|
+
title: 'Components/Button',
|
|
44
|
+
component: ComboButtonDemo,
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export default meta
|
|
@@ -20,7 +20,7 @@ infonomic-components;
|
|
|
20
20
|
border-width: var(--border-width-thin);
|
|
21
21
|
border-color: var(--surface-panel-border);
|
|
22
22
|
border-style: var(--border-style-solid);
|
|
23
|
-
border-radius: var(--border-radius-
|
|
23
|
+
border-radius: var(--border-radius-sm);
|
|
24
24
|
box-shadow: var(--shadow-sm);
|
|
25
25
|
|
|
26
26
|
&[data-side="top"] {
|
package/src/react.ts
CHANGED
|
@@ -13,6 +13,7 @@ export * from './components/badge/badge.js'
|
|
|
13
13
|
export { variant as buttonVariant } from './components/button/@types/button.js'
|
|
14
14
|
export * from './components/button/button.js'
|
|
15
15
|
export * from './components/button/button-group.js'
|
|
16
|
+
export * from './components/button/combo-button.js'
|
|
16
17
|
export * from './components/button/control-buttons.js'
|
|
17
18
|
export * from './components/button/copy-button.js'
|
|
18
19
|
export * from './components/button/icon-button.js'
|