@adam-milo/ui 1.0.16 → 1.0.18
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/index.cjs +1 -1
- package/dist/index.js +45 -41
- package/dist/index10.cjs +1 -1
- package/dist/index10.js +59 -82
- package/dist/index11.cjs +1 -1
- package/dist/index11.js +107 -30
- package/dist/index12.cjs +1 -1
- package/dist/index12.js +84 -107
- package/dist/index13.cjs +1 -1
- package/dist/index13.js +32 -33
- package/dist/index14.cjs +1 -1
- package/dist/index14.js +113 -9
- package/dist/index15.cjs +1 -0
- package/dist/index15.js +43 -0
- package/dist/index16.cjs +1 -0
- package/dist/index16.js +11 -0
- package/dist/index2.cjs +1 -1
- package/dist/index2.js +1 -1
- package/dist/index3.cjs +1 -1
- package/dist/index3.js +1 -1
- package/dist/index4.cjs +1 -1
- package/dist/index4.js +1 -1
- package/dist/index5.cjs +1 -1
- package/dist/index5.js +1 -1
- package/dist/index6.cjs +1 -1
- package/dist/index6.js +1 -1
- package/dist/index7.cjs +1 -1
- package/dist/index7.js +88 -52
- package/dist/index8.cjs +1 -1
- package/dist/index8.js +69 -49
- package/dist/index9.cjs +1 -1
- package/dist/index9.js +42 -100
- package/dist/src/components/forms/checkbox/Checkbox.component.d.ts +102 -0
- package/dist/src/components/forms/checkbox/Checkbox.component.d.ts.map +1 -0
- package/dist/src/components/forms/radio/Radio.component.d.ts +100 -0
- package/dist/src/components/forms/radio/Radio.component.d.ts.map +1 -0
- package/dist/src/index.d.ts +4 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
4
|
+
/**
|
|
5
|
+
* Label text for the radio button
|
|
6
|
+
*/
|
|
7
|
+
label?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Error message to display below the radio button
|
|
10
|
+
*/
|
|
11
|
+
error?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Helper text to display below the radio button (only shown when no error)
|
|
14
|
+
*/
|
|
15
|
+
helperText?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Callback fired when the radio button state changes
|
|
18
|
+
* @param event - The change event from the input element
|
|
19
|
+
*/
|
|
20
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Callback fired when the radio button loses focus
|
|
23
|
+
* @param event - The blur event from the input element
|
|
24
|
+
*/
|
|
25
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Callback fired when the radio button gains focus
|
|
28
|
+
* @param event - The focus event from the input element
|
|
29
|
+
*/
|
|
30
|
+
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Callback fired when the radio button is clicked
|
|
33
|
+
* @param event - The mouse event from the input element
|
|
34
|
+
*/
|
|
35
|
+
onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
|
|
36
|
+
/**
|
|
37
|
+
* Callback fired when a key is pressed on the radio button
|
|
38
|
+
* @param event - The keyboard event from the input element
|
|
39
|
+
*/
|
|
40
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
41
|
+
/**
|
|
42
|
+
* Callback fired when a key is released on the radio button
|
|
43
|
+
* @param event - The keyboard event from the input element
|
|
44
|
+
*/
|
|
45
|
+
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Custom data-cy attribute for Cypress testing
|
|
48
|
+
* Auto-generates as "radio" if not provided
|
|
49
|
+
*/
|
|
50
|
+
'data-cy'?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Custom data-testid attribute for unit testing
|
|
53
|
+
* Auto-generates as "radio" if not provided
|
|
54
|
+
*/
|
|
55
|
+
'data-testid'?: string;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Radio - Accessible radio button component for the Adam Milo Design System
|
|
59
|
+
*
|
|
60
|
+
* A fully accessible radio button component that supports:
|
|
61
|
+
* - Standard checked/unchecked states
|
|
62
|
+
* - Hover and focus states
|
|
63
|
+
* - Disabled state
|
|
64
|
+
* - Error states with messages
|
|
65
|
+
* - Helper text
|
|
66
|
+
* - Required field indicator (asterisk)
|
|
67
|
+
* - Full keyboard accessibility
|
|
68
|
+
* - RTL support
|
|
69
|
+
*
|
|
70
|
+
* @example
|
|
71
|
+
* ```tsx
|
|
72
|
+
* // Simple radio button
|
|
73
|
+
* <Radio label="Option A" name="choice" value="a" />
|
|
74
|
+
*
|
|
75
|
+
* // Required radio button (asterisk added automatically)
|
|
76
|
+
* <Radio
|
|
77
|
+
* label="Option B"
|
|
78
|
+
* name="choice"
|
|
79
|
+
* value="b"
|
|
80
|
+
* required
|
|
81
|
+
* />
|
|
82
|
+
*
|
|
83
|
+
* // With error
|
|
84
|
+
* <Radio
|
|
85
|
+
* label="Option C"
|
|
86
|
+
* name="choice"
|
|
87
|
+
* value="c"
|
|
88
|
+
* error="Please select an option"
|
|
89
|
+
* />
|
|
90
|
+
*
|
|
91
|
+
* // Radio group
|
|
92
|
+
* <div>
|
|
93
|
+
* <Radio label="Small" name="size" value="small" />
|
|
94
|
+
* <Radio label="Medium" name="size" value="medium" defaultChecked />
|
|
95
|
+
* <Radio label="Large" name="size" value="large" />
|
|
96
|
+
* </div>
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
100
|
+
//# sourceMappingURL=Radio.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Radio.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/radio/Radio.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAA8B,MAAM,OAAO,CAAC;AAEpF,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACrF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEhE;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEnE;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEjE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK,yGA4GjB,CAAC"}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -10,6 +10,10 @@ export { NumericInput } from './components/forms/numeric-input/NumericInput.comp
|
|
|
10
10
|
export type { NumericInputProps } from './components/forms/numeric-input/NumericInput.component';
|
|
11
11
|
export { AlphanumericInput } from './components/forms/alphanumeric-input/AlphanumericInput.component';
|
|
12
12
|
export type { AlphanumericInputProps } from './components/forms/alphanumeric-input/AlphanumericInput.component';
|
|
13
|
+
export { Checkbox } from './components/forms/checkbox/Checkbox.component';
|
|
14
|
+
export type { CheckboxProps } from './components/forms/checkbox/Checkbox.component';
|
|
15
|
+
export { Radio } from './components/forms/radio/Radio.component';
|
|
16
|
+
export type { RadioProps } from './components/forms/radio/Radio.component';
|
|
13
17
|
export { Tabs, TabsList, TabsTrigger, TabsContent, } from './components/navigation/tabs/Tabs.component';
|
|
14
18
|
export { Alert } from './components/feedback/alert/Alert.component';
|
|
15
19
|
export type { AlertProps } from './components/feedback/alert/Alert.component';
|
package/dist/src/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC7E,YAAY,EACV,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,MAAM,uCAAuC,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,qDAAqD,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAE3F,OAAO,EAAE,aAAa,EAAE,MAAM,2DAA2D,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAEpG,OAAO,EAAE,YAAY,EAAE,MAAM,yDAAyD,CAAC;AACvF,YAAY,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAEjG,OAAO,EAAE,iBAAiB,EAAE,MAAM,mEAAmE,CAAC;AACtG,YAAY,EAAE,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC7E,YAAY,EACV,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,MAAM,uCAAuC,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,qDAAqD,CAAC;AACjF,YAAY,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAE3F,OAAO,EAAE,aAAa,EAAE,MAAM,2DAA2D,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAEpG,OAAO,EAAE,YAAY,EAAE,MAAM,yDAAyD,CAAC;AACvF,YAAY,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAEjG,OAAO,EAAE,iBAAiB,EAAE,MAAM,mEAAmE,CAAC;AACtG,YAAY,EAAE,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAEhH,OAAO,EAAE,QAAQ,EAAE,MAAM,gDAAgD,CAAC;AAC1E,YAAY,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAC;AAEpF,OAAO,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAC;AACjE,YAAY,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAG3E,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,WAAW,GACZ,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EAAE,KAAK,EAAE,MAAM,6CAA6C,CAAC;AACpE,YAAY,EAAE,UAAU,EAAE,MAAM,6CAA6C,CAAC;AAG9E,OAAO,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,EACX,UAAU,GACX,MAAM,+CAA+C,CAAC;AACvD,YAAY,EACV,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,GAChB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,yDAAyD,CAAC;AACpF,YAAY,EACV,cAAc,EACd,eAAe,GAChB,MAAM,yDAAyD,CAAC;AAEjE,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAC;AACrE,YAAY,EAAE,SAAS,EAAE,MAAM,+CAA+C,CAAC;AAG/E,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,GACd,MAAM,+CAA+C,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAClE,YAAY,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAG5E,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC"}
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.btn{display:inline-flex;align-items:center;justify-content:center;block-size:2.5rem;padding-block:var(--spacing-3);padding-inline:var(--spacing-4);gap:var(--spacing-2);font-family:Almoni DL AAA,sans-serif;font-weight:400;font-size:var(--font-size-8);line-height:1.5rem;text-align:center;white-space:nowrap;border:none;border-radius:var(--radius-default);transition-property:background-color,color,border-color,transform;transition-duration:.2s;transition-timing-function:ease-in-out;will-change:transform;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.btn:focus-visible{outline:2px solid;outline-offset:2px}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{cursor:not-allowed;opacity:1;pointer-events:none}.btn--primary-workspace{background-color:var(--color-popup);color:var(--color-card);outline-color:var(--color-popup)}.btn--primary-workspace:hover:not(:disabled){background-color:var(--color-action)}.btn--primary-workspace:disabled{background-color:var(--color-bg-secondary);color:var(--color-icon-secondary);border:1px solid var(--color-border)}.btn--primary-builder{background-color:var(--color-action);color:var(--color-card);outline-color:var(--color-action)}.btn--primary-builder:hover:not(:disabled){background-color:var(--color-text)}.btn--primary-builder:disabled{background-color:var(--color-bg-secondary);color:var(--color-icon-secondary);border:1px solid var(--color-border)}.btn--secondary{background-color:var(--color-card);color:var(--color-text);border:1px solid var(--color-system-text);outline-color:var(--color-border)}.btn--secondary:hover:not(:disabled){background-color:var(--color-bg-secondary)}.btn--secondary:disabled{background-color:transparent;color:var(--color-icon-secondary);border:1px solid var(--color-border)}.btn--ghost{background-color:transparent;color:var(--color-text);outline-color:var(--color-border)}.btn--ghost:hover:not(:disabled){background-color:var(--color-bg-secondary)}.btn--ghost:disabled{background-color:transparent;color:var(--color-icon-secondary)}.btn--full-width{inline-size:100%}.btn__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;flex-shrink:0}.password-input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:100%}.password-input__toggle{position:absolute;inset-block-start:var(--spacing-3);inset-inline-end:var(--spacing-3-5);display:flex;align-items:center;justify-content:center;inline-size:var(--spacing-5);block-size:var(--spacing-5);padding:0;background:transparent;border:none;color:var(--color-system-text);cursor:pointer;transition-property:color,transform;transition-duration:.2s;transition-timing-function:ease-in-out}.password-input__toggle:hover{color:var(--color-text)}.password-input__toggle:focus{outline:2px solid var(--color-clickable);outline-offset:2px;border-radius:var(--radius-sm)}.password-input__toggle:focus:not(:focus-visible){outline:none}.password-input__toggle:active{transform:scale(.95)}.password-input__toggle svg{inline-size:100%;block-size:100%}.password-input-wrapper:has(.input__label) .password-input__toggle{inset-block-start:2.125rem}.password-input{padding-inline-end:var(--spacing-12)}@media (min-width: 768px){.input{block-size:var(--spacing-11)}.password-input__toggle{inset-block-start:var(--spacing-3)}.password-input-wrapper:has(.input__label) .password-input__toggle{inset-block-start:2.125rem}}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:100%}.input-wrapper--full-width{inline-size:100%}.input__label{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);font-weight:400;color:var(--color-grey-07);line-height:1}.input{display:block;inline-size:100%;block-size:var(--spacing-11);padding-inline:var(--spacing-3-5);padding-block:var(--spacing-3-5);font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-8);line-height:1;color:var(--color-text);background-color:var(--color-card);border:1px solid var(--color-icon-secondary);border-radius:var(--radius-5px);transition-property:border-color,box-shadow;transition-duration:.2s;transition-timing-function:ease-in-out;cursor:text}.input:focus{outline:none;border-color:var(--color-clickable);box-shadow:none}.input:hover:not(:disabled):not(:focus){border-color:var(--color-clickable)}.input:disabled{cursor:not-allowed;opacity:.5;background-color:var(--color-card);color:var(--color-text);pointer-events:none}.input::placeholder{color:var(--color-icon-secondary)}.input--error{border-color:var(--color-error)}.input--error:focus{border-color:var(--color-error);box-shadow:none}.input--error:hover:not(:disabled){border-color:var(--color-error)}.input--full-width{inline-size:100%}.input__helper{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-10);line-height:1;color:var(--color-grey-07);padding-inline-start:var(--spacing-3-5);padding-block-start:var(--spacing-1-5)}.input__error{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-10);line-height:1;color:var(--color-error);padding-inline-start:var(--spacing-3-5);padding-block-start:var(--spacing-1-5)}@media (min-width: 768px){.input{block-size:var(--spacing-11)}}.tabs-list{display:inline-flex;align-items:center;justify-content:center;block-size:2.5rem;padding:var(--spacing-1);gap:var(--spacing-1);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);color:var(--color-icon-secondary)}.tabs-trigger{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding-inline:var(--spacing-3);padding-block:var(--spacing-1-5);font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);font-weight:500;line-height:1.5;border:none;border-radius:var(--radius-default);background-color:transparent;color:var(--color-icon-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color,color,box-shadow;transition-duration:.2s;transition-timing-function:ease-in-out}.tabs-trigger:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px;z-index:1}.tabs-trigger:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.tabs-trigger[data-state=active]{background-color:var(--color-card);color:var(--color-text);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.tabs-trigger:hover:not([data-state=active]):not(:disabled){background-color:var(--color-border);color:var(--color-text)}.tabs-content{margin-block-start:var(--spacing-2)}.tabs-content:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px;border-radius:var(--radius-default)}@media (max-width: 639px){.tabs-list{inline-size:100%;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs-list::-webkit-scrollbar{display:none}.tabs-trigger{padding-inline:var(--spacing-4);padding-block:var(--spacing-2)}}.alert{position:relative;display:flex;gap:var(--spacing-3);padding-inline:var(--spacing-4);padding-block:var(--spacing-3);font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;border:1px solid;border-radius:var(--radius-md)}.alert--info{background-color:var(--color-clickable-light, rgba(47, 157, 178, .05));border-color:var(--color-clickable-light, rgba(47, 157, 178, .2));color:var(--color-clickable)}.alert--success{background-color:var(--color-success-light, rgba(76, 175, 80, .05));border-color:var(--color-success-light, rgba(76, 175, 80, .2));color:var(--color-success, #4caf50)}.alert--warning{background-color:var(--color-warning-light, rgba(255, 152, 0, .05));border-color:var(--color-warning-light, rgba(255, 152, 0, .2));color:var(--color-warning, #ff9800)}.alert--error{background-color:var(--color-error-light, rgba(255, 104, 104, .05));border-color:var(--color-error-light, rgba(255, 104, 104, .2));color:var(--color-error)}.alert__icon{display:inline-flex;align-items:flex-start;justify-content:center;flex-shrink:0;margin-block-start:.125rem}.alert--info .alert__icon{color:var(--color-clickable)}.alert--success .alert__icon{color:var(--color-success, #4caf50)}.alert--warning .alert__icon{color:var(--color-warning, #ff9800)}.alert--error .alert__icon{color:var(--color-error)}.alert__content{flex:1;min-inline-size:0}.alert__title{font-weight:600;margin-block-end:var(--spacing-1);line-height:1.3}@media (min-width: 768px){.alert{padding-inline:var(--spacing-5);padding-block:var(--spacing-4)}}.card{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-card);overflow:hidden}.card--default{border:1px solid var(--color-border);background-color:var(--color-card)}.card--outlined{border:2px solid var(--color-system-text);background-color:var(--color-card)}.card--elevated{border:1px solid var(--color-border);background-color:var(--color-card);box-shadow:0 .625rem 1.875rem -.1875rem #0000001a,0 .25rem .375rem -.125rem #0000000d}.card-header{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-6)}.card-title{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-6);font-weight:600;line-height:1.2;color:var(--color-text)}.card-description{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;color:var(--color-icon-secondary)}.card-content{padding-inline:var(--spacing-6);padding-block:var(--spacing-6);padding-block-start:0}.card-footer{display:flex;align-items:center;gap:var(--spacing-4);padding-inline:var(--spacing-6);padding-block:var(--spacing-6);padding-block-start:0}@media (max-width: 639px){.card-header,.card-content,.card-footer{padding-inline:var(--spacing-4);padding-block:var(--spacing-4)}.card-content,.card-footer{padding-block-start:0}}.datatable-wrapper{inline-size:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-border) var(--color-bg-secondary)}.datatable{inline-size:100%;border-collapse:collapse;font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;color:var(--color-text)}.datatable__head{border-block-end:1px solid var(--color-border);background-color:var(--color-bg-secondary)}.datatable__header-cell{padding-inline:var(--spacing-4);padding-block:var(--spacing-3);text-align:start;font-weight:600;color:var(--color-system-text)}.datatable__body-row{border-block-end:1px solid var(--color-border)}.datatable__body-row.datatable__body-row--hoverable:hover{background-color:var(--color-bg)}.datatable__body-row.datatable__body-row--striped:nth-child(2n){background-color:var(--color-bg)}.datatable__body-cell{padding-inline:var(--spacing-4);padding-block:var(--spacing-3);color:var(--color-text)}.datatable__empty{padding:var(--spacing-12);text-align:center;color:var(--color-icon-secondary);font-style:italic}@media (max-width: 639px){.datatable__header-cell,.datatable__body-cell{padding-inline:var(--spacing-2);padding-block:var(--spacing-2);font-size:var(--font-size-10)}.datatable__empty{padding:var(--spacing-8)}}.chip{display:inline-flex;align-items:center;justify-content:center;padding-block:var(--spacing-1);padding-inline:var(--spacing-3);border-radius:var(--radius-default);border-width:var(--border-width-default);border-style:solid;font-size:var(--font-size-9);line-height:1;font-weight:400;transition:all .2s ease-in-out;cursor:default;-webkit-user-select:none;user-select:none}.chip__label{white-space:nowrap}.chip--primary{background-color:color-mix(in srgb,var(--color-clickable) 10%,transparent);border-color:color-mix(in srgb,var(--color-clickable) 30%,transparent);color:var(--color-clickable)}.chip--primary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-clickable) 15%,transparent);border-color:color-mix(in srgb,var(--color-clickable) 40%,transparent)}.chip--primary.chip--selected{background-color:var(--color-clickable);border-color:var(--color-clickable);color:var(--color-card)}.chip--secondary{background-color:color-mix(in srgb,var(--color-toggle) 10%,transparent);border-color:color-mix(in srgb,var(--color-toggle) 30%,transparent);color:var(--color-toggle)}.chip--secondary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-toggle) 15%,transparent);border-color:color-mix(in srgb,var(--color-toggle) 40%,transparent)}.chip--secondary.chip--selected{background-color:var(--color-toggle);border-color:var(--color-toggle);color:var(--color-card)}.chip--tertiary{background-color:color-mix(in srgb,var(--color-popup) 10%,transparent);border-color:color-mix(in srgb,var(--color-popup) 30%,transparent);color:var(--color-popup)}.chip--tertiary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-popup) 15%,transparent);border-color:color-mix(in srgb,var(--color-popup) 40%,transparent)}.chip--tertiary.chip--selected{background-color:var(--color-popup);border-color:var(--color-popup);color:var(--color-card)}.chip--quaternary{background-color:color-mix(in srgb,var(--color-secondary) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary) 30%,transparent);color:var(--color-secondary)}.chip--quaternary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-secondary) 15%,transparent);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.chip--quaternary.chip--selected{background-color:var(--color-secondary);border-color:var(--color-secondary);color:var(--color-card)}.chip--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}@media (min-width: 768px){.chip{padding-inline:var(--spacing-3-5)}}@media (min-width: 1024px){.chip{padding-inline:var(--spacing-3)}}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background-color:#191a3980;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}.dialog-overlay[data-state=open]{animation-name:dialog-overlay-fade-in}.dialog-overlay[data-state=closed]{animation-name:dialog-overlay-fade-out}.dialog-content{position:fixed;inset-inline-start:50%;inset-block-start:50%;z-index:50;transform:translate(-50%,-50%);display:grid;gap:var(--spacing-4);inline-size:100%;max-inline-size:32rem;padding:var(--spacing-6);background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 .625rem 1.875rem -.1875rem #0000001a,0 .25rem .375rem -.125rem #0000000d;animation-duration:.2s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards}.dialog-content[data-state=open]{animation-name:dialog-content-show}.dialog-content[data-state=closed]{animation-name:dialog-content-hide}.dialog-content:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px}.dialog-header{display:flex;flex-direction:column;gap:var(--spacing-1-5);text-align:center}@media (min-width: 640px){.dialog-header{text-align:start}}.dialog-footer{display:flex;flex-direction:column-reverse;gap:var(--spacing-2)}@media (min-width: 640px){.dialog-footer{flex-direction:row;justify-content:flex-end;gap:var(--spacing-2)}}.dialog-title{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-6);font-weight:600;line-height:1.2;color:var(--color-text);letter-spacing:-.01em}.dialog-description{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;color:var(--color-icon-secondary)}@keyframes dialog-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dialog-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes dialog-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes dialog-content-hide{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-48%) scale(.95)}}@media (max-width: 639px){.dialog-content{inline-size:calc(100% - var(--spacing-8));max-inline-size:calc(100% - var(--spacing-8));padding:var(--spacing-5)}}.stack{display:flex}.stack--horizontal{flex-direction:row}.stack--vertical{flex-direction:column}.stack--spacing-0{gap:0}.stack--spacing-1{gap:var(--spacing-1)}.stack--spacing-2{gap:var(--spacing-2)}.stack--spacing-3{gap:var(--spacing-3)}.stack--spacing-4{gap:var(--spacing-4)}.stack--spacing-5{gap:var(--spacing-5)}.stack--spacing-6{gap:var(--spacing-6)}.stack--spacing-8{gap:var(--spacing-8)}.stack--spacing-10{gap:var(--spacing-10)}.stack--spacing-12{gap:var(--spacing-12)}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-between{justify-content:space-between}.stack--justify-around{justify-content:space-around}.stack--wrap{flex-wrap:wrap}@media (max-width: 639px){.stack--horizontal.stack--responsive{flex-direction:column}}
|
|
1
|
+
.btn{display:inline-flex;align-items:center;justify-content:center;block-size:2.5rem;padding-block:var(--spacing-3);padding-inline:var(--spacing-4);gap:var(--spacing-2);font-family:Almoni DL AAA,sans-serif;font-weight:400;font-size:var(--font-size-8);line-height:1.5rem;text-align:center;white-space:nowrap;border:none;border-radius:var(--radius-default);transition-property:background-color,color,border-color,transform;transition-duration:.2s;transition-timing-function:ease-in-out;will-change:transform;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.btn:focus-visible{outline:2px solid;outline-offset:2px}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{cursor:not-allowed;opacity:1;pointer-events:none}.btn--primary-workspace{background-color:var(--color-popup);color:var(--color-card);outline-color:var(--color-popup)}.btn--primary-workspace:hover:not(:disabled){background-color:var(--color-action)}.btn--primary-workspace:disabled{background-color:var(--color-bg-secondary);color:var(--color-icon-secondary);border:1px solid var(--color-border)}.btn--primary-builder{background-color:var(--color-action);color:var(--color-card);outline-color:var(--color-action)}.btn--primary-builder:hover:not(:disabled){background-color:var(--color-text)}.btn--primary-builder:disabled{background-color:var(--color-bg-secondary);color:var(--color-icon-secondary);border:1px solid var(--color-border)}.btn--secondary{background-color:var(--color-card);color:var(--color-text);border:1px solid var(--color-system-text);outline-color:var(--color-border)}.btn--secondary:hover:not(:disabled){background-color:var(--color-bg-secondary)}.btn--secondary:disabled{background-color:transparent;color:var(--color-icon-secondary);border:1px solid var(--color-border)}.btn--ghost{background-color:transparent;color:var(--color-text);outline-color:var(--color-border)}.btn--ghost:hover:not(:disabled){background-color:var(--color-bg-secondary)}.btn--ghost:disabled{background-color:transparent;color:var(--color-icon-secondary)}.btn--full-width{inline-size:100%}.btn__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;flex-shrink:0}.password-input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:100%}.password-input__toggle{position:absolute;inset-block-start:var(--spacing-3);inset-inline-end:var(--spacing-3-5);display:flex;align-items:center;justify-content:center;inline-size:var(--spacing-5);block-size:var(--spacing-5);padding:0;background:transparent;border:none;color:var(--color-system-text);cursor:pointer;transition-property:color,transform;transition-duration:.2s;transition-timing-function:ease-in-out}.password-input__toggle:hover{color:var(--color-text)}.password-input__toggle:focus{outline:2px solid var(--color-clickable);outline-offset:2px;border-radius:var(--radius-sm)}.password-input__toggle:focus:not(:focus-visible){outline:none}.password-input__toggle:active{transform:scale(.95)}.password-input__toggle svg{inline-size:100%;block-size:100%}.password-input-wrapper:has(.input__label) .password-input__toggle{inset-block-start:2.125rem}.password-input{padding-inline-end:var(--spacing-12)}@media (min-width: 768px){.input{block-size:var(--spacing-11)}.password-input__toggle{inset-block-start:var(--spacing-3)}.password-input-wrapper:has(.input__label) .password-input__toggle{inset-block-start:2.125rem}}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:100%}.input-wrapper--full-width{inline-size:100%}.input__label{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);font-weight:400;color:var(--color-grey-07);line-height:1}.input{display:block;inline-size:100%;block-size:var(--spacing-11);padding-inline:var(--spacing-3-5);padding-block:var(--spacing-3-5);font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-8);line-height:1;color:var(--color-text);background-color:var(--color-card);border:1px solid var(--color-icon-secondary);border-radius:var(--radius-5px);transition-property:border-color,box-shadow;transition-duration:.2s;transition-timing-function:ease-in-out;cursor:text}.input:focus{outline:none;border-color:var(--color-clickable);box-shadow:none}.input:hover:not(:disabled):not(:focus){border-color:var(--color-clickable)}.input:disabled{cursor:not-allowed;opacity:.5;background-color:var(--color-card);color:var(--color-text);pointer-events:none}.input::placeholder{color:var(--color-icon-secondary)}.input--error{border-color:var(--color-error)}.input--error:focus{border-color:var(--color-error);box-shadow:none}.input--error:hover:not(:disabled){border-color:var(--color-error)}.input--full-width{inline-size:100%}.input__helper{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-10);line-height:1;color:var(--color-grey-07);padding-inline-start:var(--spacing-3-5);padding-block-start:var(--spacing-1-5)}.input__error{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-10);line-height:1;color:var(--color-error);padding-inline-start:var(--spacing-3-5);padding-block-start:var(--spacing-1-5)}@media (min-width: 768px){.input{block-size:var(--spacing-11)}}.checkbox-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1-5)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed}.checkbox__container{display:flex;align-items:center;gap:var(--spacing-2)}.checkbox__input{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;margin:0;border:1px solid var(--color-icon-secondary);border-radius:.1875rem;background-color:var(--color-card);cursor:pointer;position:relative;flex-shrink:0;transition:all .15s ease-in-out}.checkbox__input:hover:not(:disabled){border-color:var(--color-icon-secondary);background-color:var(--color-bg)}.checkbox__input:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px}.checkbox__input:checked{background-color:var(--color-clickable);border-color:var(--color-clickable)}.checkbox__input:checked:before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:50%;transform:translate(-50%,-50%) rotate(45deg);width:.3125rem;height:.625rem;border:solid var(--color-card);border-width:0 .125rem .125rem 0;border-inline-start-width:0;border-block-start-width:0}.checkbox__input[data-indeterminate=true]{background-color:var(--color-clickable);border-color:var(--color-clickable)}.checkbox__input[data-indeterminate=true]:before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:50%;transform:translate(-50%,-50%);width:.625rem;height:.125rem;background-color:var(--color-card);border:none;border-radius:.0625rem}.checkbox__input:disabled{border-color:var(--color-border);background-color:var(--color-bg-secondary);cursor:not-allowed}.checkbox__input:disabled:checked{background-color:var(--color-border);border-color:var(--color-border)}.checkbox__input--error{border-color:var(--color-error)}.checkbox__input--error:checked{background-color:var(--color-error);border-color:var(--color-error)}.checkbox__label{color:var(--color-text);font-size:var(--font-size-9);line-height:1.5;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-wrapper--disabled .checkbox__label{cursor:not-allowed}.checkbox__error{display:block;color:var(--color-error);font-size:var(--font-size-10);line-height:1.4;margin-inline-start:calc(1rem + var(--spacing-2))}.checkbox__helper{display:block;color:var(--color-system-text);font-size:var(--font-size-10);line-height:1.4;margin-inline-start:calc(1rem + var(--spacing-2))}@media (min-width: 768px){.checkbox__label{font-size:var(--font-size-9)}}.radio-wrapper{display:inline-flex;flex-direction:column;gap:var(--spacing-2)}.radio-wrapper--disabled{opacity:1;cursor:not-allowed}.radio__container{display:inline-flex;align-items:center;gap:var(--spacing-2);position:relative}.radio__input{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1.25rem;height:1.25rem;border:1px solid var(--color-icon-secondary);border-radius:50%;background-color:transparent;cursor:pointer;flex-shrink:0;position:relative;transition:all .2s ease}.radio__input:not(:disabled):hover{border-color:var(--color-action)}.radio__input:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px}.radio__input:checked{border-color:var(--color-action);border-width:1px}.radio__input:checked:before{content:"";position:absolute;inset-inline-start:22%;inset-block-start:22%;width:56%;height:56%;background-color:var(--color-clickable);border-radius:50%;transition:all .2s ease}.radio__input:disabled{border-color:var(--color-border);background-color:transparent;cursor:not-allowed}.radio__input:disabled:checked{border-color:var(--color-icon-secondary)}.radio__input:disabled:checked:before{background-color:var(--color-icon-secondary)}.radio__input--error{border-color:var(--color-error)}.radio__input--error:checked{border-color:var(--color-error)}.radio__label{color:var(--color-text);font-size:var(--font-size-9);font-weight:400;line-height:1.5;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-wrapper--disabled .radio__label{color:var(--color-system-text);cursor:not-allowed}.radio__error{color:var(--color-error);font-size:var(--font-size-8);line-height:1.5;margin-inline-start:calc(1.25rem + var(--spacing-2))}.radio__helper{color:var(--color-system-text);font-size:var(--font-size-8);line-height:1.5;margin-inline-start:calc(1.25rem + var(--spacing-2))}@media (min-width: 768px){.radio__input{width:1.25rem;height:1.25rem}}@media (prefers-contrast: high){.radio__input{border-width:2px}.radio__input:checked:before{border:1px solid var(--color-bg)}}@media (prefers-reduced-motion: reduce){.radio__input,.radio__input:before{transition:none}}.tabs-list{display:inline-flex;align-items:center;justify-content:center;block-size:2.5rem;padding:var(--spacing-1);gap:var(--spacing-1);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);color:var(--color-icon-secondary)}.tabs-trigger{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding-inline:var(--spacing-3);padding-block:var(--spacing-1-5);font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);font-weight:500;line-height:1.5;border:none;border-radius:var(--radius-default);background-color:transparent;color:var(--color-icon-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color,color,box-shadow;transition-duration:.2s;transition-timing-function:ease-in-out}.tabs-trigger:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px;z-index:1}.tabs-trigger:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.tabs-trigger[data-state=active]{background-color:var(--color-card);color:var(--color-text);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.tabs-trigger:hover:not([data-state=active]):not(:disabled){background-color:var(--color-border);color:var(--color-text)}.tabs-content{margin-block-start:var(--spacing-2)}.tabs-content:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px;border-radius:var(--radius-default)}@media (max-width: 639px){.tabs-list{inline-size:100%;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs-list::-webkit-scrollbar{display:none}.tabs-trigger{padding-inline:var(--spacing-4);padding-block:var(--spacing-2)}}.alert{position:relative;display:flex;gap:var(--spacing-3);padding-inline:var(--spacing-4);padding-block:var(--spacing-3);font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;border:1px solid;border-radius:var(--radius-md)}.alert--info{background-color:var(--color-clickable-light, rgba(47, 157, 178, .05));border-color:var(--color-clickable-light, rgba(47, 157, 178, .2));color:var(--color-clickable)}.alert--success{background-color:var(--color-success-light, rgba(76, 175, 80, .05));border-color:var(--color-success-light, rgba(76, 175, 80, .2));color:var(--color-success, #4caf50)}.alert--warning{background-color:var(--color-warning-light, rgba(255, 152, 0, .05));border-color:var(--color-warning-light, rgba(255, 152, 0, .2));color:var(--color-warning, #ff9800)}.alert--error{background-color:var(--color-error-light, rgba(255, 104, 104, .05));border-color:var(--color-error-light, rgba(255, 104, 104, .2));color:var(--color-error)}.alert__icon{display:inline-flex;align-items:flex-start;justify-content:center;flex-shrink:0;margin-block-start:.125rem}.alert--info .alert__icon{color:var(--color-clickable)}.alert--success .alert__icon{color:var(--color-success, #4caf50)}.alert--warning .alert__icon{color:var(--color-warning, #ff9800)}.alert--error .alert__icon{color:var(--color-error)}.alert__content{flex:1;min-inline-size:0}.alert__title{font-weight:600;margin-block-end:var(--spacing-1);line-height:1.3}@media (min-width: 768px){.alert{padding-inline:var(--spacing-5);padding-block:var(--spacing-4)}}.card{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-card);overflow:hidden}.card--default{border:1px solid var(--color-border);background-color:var(--color-card)}.card--outlined{border:2px solid var(--color-system-text);background-color:var(--color-card)}.card--elevated{border:1px solid var(--color-border);background-color:var(--color-card);box-shadow:0 .625rem 1.875rem -.1875rem #0000001a,0 .25rem .375rem -.125rem #0000000d}.card-header{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-6)}.card-title{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-6);font-weight:600;line-height:1.2;color:var(--color-text)}.card-description{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;color:var(--color-icon-secondary)}.card-content{padding-inline:var(--spacing-6);padding-block:var(--spacing-6);padding-block-start:0}.card-footer{display:flex;align-items:center;gap:var(--spacing-4);padding-inline:var(--spacing-6);padding-block:var(--spacing-6);padding-block-start:0}@media (max-width: 639px){.card-header,.card-content,.card-footer{padding-inline:var(--spacing-4);padding-block:var(--spacing-4)}.card-content,.card-footer{padding-block-start:0}}.datatable-wrapper{inline-size:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-border) var(--color-bg-secondary)}.datatable{inline-size:100%;border-collapse:collapse;font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;color:var(--color-text)}.datatable__head{border-block-end:1px solid var(--color-border);background-color:var(--color-bg-secondary)}.datatable__header-cell{padding-inline:var(--spacing-4);padding-block:var(--spacing-3);text-align:start;font-weight:600;color:var(--color-system-text)}.datatable__body-row{border-block-end:1px solid var(--color-border)}.datatable__body-row.datatable__body-row--hoverable:hover{background-color:var(--color-bg)}.datatable__body-row.datatable__body-row--striped:nth-child(2n){background-color:var(--color-bg)}.datatable__body-cell{padding-inline:var(--spacing-4);padding-block:var(--spacing-3);color:var(--color-text)}.datatable__empty{padding:var(--spacing-12);text-align:center;color:var(--color-icon-secondary);font-style:italic}@media (max-width: 639px){.datatable__header-cell,.datatable__body-cell{padding-inline:var(--spacing-2);padding-block:var(--spacing-2);font-size:var(--font-size-10)}.datatable__empty{padding:var(--spacing-8)}}.chip{display:inline-flex;align-items:center;justify-content:center;padding-block:var(--spacing-1);padding-inline:var(--spacing-3);border-radius:var(--radius-default);border-width:var(--border-width-default);border-style:solid;font-size:var(--font-size-9);line-height:1;font-weight:400;transition:all .2s ease-in-out;cursor:default;-webkit-user-select:none;user-select:none}.chip__label{white-space:nowrap}.chip--primary{background-color:color-mix(in srgb,var(--color-clickable) 10%,transparent);border-color:color-mix(in srgb,var(--color-clickable) 30%,transparent);color:var(--color-clickable)}.chip--primary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-clickable) 15%,transparent);border-color:color-mix(in srgb,var(--color-clickable) 40%,transparent)}.chip--primary.chip--selected{background-color:var(--color-clickable);border-color:var(--color-clickable);color:var(--color-card)}.chip--secondary{background-color:color-mix(in srgb,var(--color-toggle) 10%,transparent);border-color:color-mix(in srgb,var(--color-toggle) 30%,transparent);color:var(--color-toggle)}.chip--secondary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-toggle) 15%,transparent);border-color:color-mix(in srgb,var(--color-toggle) 40%,transparent)}.chip--secondary.chip--selected{background-color:var(--color-toggle);border-color:var(--color-toggle);color:var(--color-card)}.chip--tertiary{background-color:color-mix(in srgb,var(--color-popup) 10%,transparent);border-color:color-mix(in srgb,var(--color-popup) 30%,transparent);color:var(--color-popup)}.chip--tertiary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-popup) 15%,transparent);border-color:color-mix(in srgb,var(--color-popup) 40%,transparent)}.chip--tertiary.chip--selected{background-color:var(--color-popup);border-color:var(--color-popup);color:var(--color-card)}.chip--quaternary{background-color:color-mix(in srgb,var(--color-secondary) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary) 30%,transparent);color:var(--color-secondary)}.chip--quaternary:hover:not(.chip--disabled):not(.chip--selected){background-color:color-mix(in srgb,var(--color-secondary) 15%,transparent);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.chip--quaternary.chip--selected{background-color:var(--color-secondary);border-color:var(--color-secondary);color:var(--color-card)}.chip--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}@media (min-width: 768px){.chip{padding-inline:var(--spacing-3-5)}}@media (min-width: 1024px){.chip{padding-inline:var(--spacing-3)}}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background-color:#191a3980;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}.dialog-overlay[data-state=open]{animation-name:dialog-overlay-fade-in}.dialog-overlay[data-state=closed]{animation-name:dialog-overlay-fade-out}.dialog-content{position:fixed;inset-inline-start:50%;inset-block-start:50%;z-index:50;transform:translate(-50%,-50%);display:grid;gap:var(--spacing-4);inline-size:100%;max-inline-size:32rem;padding:var(--spacing-6);background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 .625rem 1.875rem -.1875rem #0000001a,0 .25rem .375rem -.125rem #0000000d;animation-duration:.2s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards}.dialog-content[data-state=open]{animation-name:dialog-content-show}.dialog-content[data-state=closed]{animation-name:dialog-content-hide}.dialog-content:focus-visible{outline:2px solid var(--color-clickable);outline-offset:2px}.dialog-header{display:flex;flex-direction:column;gap:var(--spacing-1-5);text-align:center}@media (min-width: 640px){.dialog-header{text-align:start}}.dialog-footer{display:flex;flex-direction:column-reverse;gap:var(--spacing-2)}@media (min-width: 640px){.dialog-footer{flex-direction:row;justify-content:flex-end;gap:var(--spacing-2)}}.dialog-title{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-6);font-weight:600;line-height:1.2;color:var(--color-text);letter-spacing:-.01em}.dialog-description{font-family:Almoni DL AAA,sans-serif;font-size:var(--font-size-9);line-height:1.5;color:var(--color-icon-secondary)}@keyframes dialog-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dialog-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes dialog-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes dialog-content-hide{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-48%) scale(.95)}}@media (max-width: 639px){.dialog-content{inline-size:calc(100% - var(--spacing-8));max-inline-size:calc(100% - var(--spacing-8));padding:var(--spacing-5)}}.stack{display:flex}.stack--horizontal{flex-direction:row}.stack--vertical{flex-direction:column}.stack--spacing-0{gap:0}.stack--spacing-1{gap:var(--spacing-1)}.stack--spacing-2{gap:var(--spacing-2)}.stack--spacing-3{gap:var(--spacing-3)}.stack--spacing-4{gap:var(--spacing-4)}.stack--spacing-5{gap:var(--spacing-5)}.stack--spacing-6{gap:var(--spacing-6)}.stack--spacing-8{gap:var(--spacing-8)}.stack--spacing-10{gap:var(--spacing-10)}.stack--spacing-12{gap:var(--spacing-12)}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-between{justify-content:space-between}.stack--justify-around{justify-content:space-around}.stack--wrap{flex-wrap:wrap}@media (max-width: 639px){.stack--horizontal.stack--responsive{flex-direction:column}}
|