prime-ui-kit 0.7.3 → 0.7.7
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/index.css +326 -34
- package/dist/components/index.css.map +4 -4
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1363 -588
- package/dist/components/index.js.map +4 -4
- package/dist/components/select/Select.d.ts +26 -9
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/examples/pattern-multiple.d.ts +3 -0
- package/dist/components/select/examples/pattern-multiple.d.ts.map +1 -0
- package/dist/components/tag-select/TagSelect.d.ts +43 -0
- package/dist/components/tag-select/TagSelect.d.ts.map +1 -0
- package/dist/components/tag-select/examples/pattern-canonical.d.ts +3 -0
- package/dist/components/tag-select/examples/pattern-canonical.d.ts.map +1 -0
- package/dist/components/tag-select/examples/pattern-features.d.ts +3 -0
- package/dist/components/tag-select/examples/pattern-features.d.ts.map +1 -0
- package/dist/hooks/usePosition.d.ts.map +1 -1
- package/dist/index.css +328 -36
- package/dist/index.css.map +4 -4
- package/dist/index.js +1363 -588
- package/dist/index.js.map +4 -4
- package/dist/layout/index.d.ts +1 -0
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/sidebar/Sidebar.d.ts +2 -0
- package/dist/layout/sidebar/Sidebar.d.ts.map +1 -1
- package/dist/layout/sidebar/SidebarRoot.d.ts +10 -0
- package/dist/layout/sidebar/SidebarRoot.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebarDesktopStorage.d.ts +5 -0
- package/dist/layout/sidebar/sidebarDesktopStorage.d.ts.map +1 -0
- package/dist/layout/sidebar/useSidebarNarrowViewport.d.ts +6 -0
- package/dist/layout/sidebar/useSidebarNarrowViewport.d.ts.map +1 -0
- package/dist/tokens/semantic.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/select/COMPONENT.md +91 -32
- package/src/components/select/examples/pattern-multiple.tsx +30 -0
- package/src/components/tag-select/COMPONENT.md +108 -0
- package/src/components/tag-select/examples/examples.module.css +14 -0
- package/src/components/tag-select/examples/pattern-canonical.tsx +28 -0
- package/src/components/tag-select/examples/pattern-features.tsx +32 -0
- package/src/styles/theme-dark.css +1 -1
- package/src/styles/theme-light.css +1 -1
|
@@ -1,20 +1,37 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { SelectSize } from "@/internal/states";
|
|
3
|
-
|
|
3
|
+
type SelectRootBase = {
|
|
4
4
|
size?: SelectSize;
|
|
5
|
-
value?: string;
|
|
6
|
-
defaultValue?: string;
|
|
7
|
-
onChange?: (value: string) => void;
|
|
8
5
|
disabled?: boolean;
|
|
9
6
|
placeholder?: string;
|
|
10
7
|
hasError?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* When `true`, renders a native `<select>` (options from `Select.Item` / groups in the tree).
|
|
13
|
-
* Default `false` — custom combobox with portaled listbox.
|
|
14
|
-
*/
|
|
15
|
-
native?: boolean;
|
|
16
8
|
children: React.ReactNode;
|
|
17
9
|
};
|
|
10
|
+
export type SelectRootProps = (SelectRootBase & {
|
|
11
|
+
multiple?: false;
|
|
12
|
+
native?: false;
|
|
13
|
+
value?: string;
|
|
14
|
+
defaultValue?: string;
|
|
15
|
+
onChange?: (value: string) => void;
|
|
16
|
+
}) | (SelectRootBase & {
|
|
17
|
+
multiple: true;
|
|
18
|
+
native?: false;
|
|
19
|
+
value?: string[];
|
|
20
|
+
defaultValue?: string[];
|
|
21
|
+
onChange?: (value: string[]) => void;
|
|
22
|
+
}) | (SelectRootBase & {
|
|
23
|
+
multiple?: false;
|
|
24
|
+
native: true;
|
|
25
|
+
value?: string;
|
|
26
|
+
defaultValue?: string;
|
|
27
|
+
onChange?: (value: string) => void;
|
|
28
|
+
}) | (SelectRootBase & {
|
|
29
|
+
multiple: true;
|
|
30
|
+
native: true;
|
|
31
|
+
value?: string[];
|
|
32
|
+
defaultValue?: string[];
|
|
33
|
+
onChange?: (value: string[]) => void;
|
|
34
|
+
});
|
|
18
35
|
declare function SelectRoot(props: SelectRootProps): import("react/jsx-runtime").JSX.Element;
|
|
19
36
|
declare namespace SelectRoot {
|
|
20
37
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pattern-multiple.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/examples/pattern-multiple.tsx"],"names":[],"mappings":"AAOA,kGAAkG;AAClG,MAAM,CAAC,OAAO,UAAU,4BAA4B,4CAqBnD"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type BadgeColor } from "@/components/badge/Badge";
|
|
3
|
+
import type { SelectSize } from "@/internal/states";
|
|
4
|
+
export type TagSelectOption = {
|
|
5
|
+
value: string;
|
|
6
|
+
label: string;
|
|
7
|
+
color?: BadgeColor;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export type TagSelectRootProps = {
|
|
11
|
+
/** Доступные теги (значение + подпись + цвет Badge `filled`). */
|
|
12
|
+
options: TagSelectOption[];
|
|
13
|
+
value?: string[];
|
|
14
|
+
defaultValue?: string[];
|
|
15
|
+
onValueChange?: (next: string[]) => void;
|
|
16
|
+
/** Разрешить ввод нового значения, если его нет в списке. */
|
|
17
|
+
creatable?: boolean;
|
|
18
|
+
/** Только для creatable: значение добавлено через Create / Enter, не выбрано из `options` (сохранение в БД и т.п.). */
|
|
19
|
+
onCreated?: (value: string) => void;
|
|
20
|
+
/** Цвет чипа для созданных вручную значений (если нет в `options`). */
|
|
21
|
+
defaultTagColor?: BadgeColor;
|
|
22
|
+
/** Текст над списком. */
|
|
23
|
+
hint?: React.ReactNode;
|
|
24
|
+
/** Подпись действия создания (перед превью тега). */
|
|
25
|
+
createActionLabel?: string;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
placeholder?: string;
|
|
28
|
+
hasError?: boolean;
|
|
29
|
+
/** Как у `Select`: одна ось для поля (`data-size` на контроле) и панели списка; `Badge` без своего `size` берёт размер из этого контекста. */
|
|
30
|
+
size?: SelectSize;
|
|
31
|
+
id?: string;
|
|
32
|
+
className?: string;
|
|
33
|
+
"aria-label"?: string;
|
|
34
|
+
"aria-labelledby"?: string;
|
|
35
|
+
};
|
|
36
|
+
export declare function TagSelectRoot({ options, value: valueProp, defaultValue, onValueChange, creatable, onCreated, defaultTagColor, hint, createActionLabel, disabled, placeholder, hasError, size, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: TagSelectRootProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare namespace TagSelectRoot {
|
|
38
|
+
var displayName: string;
|
|
39
|
+
}
|
|
40
|
+
export declare const TagSelect: {
|
|
41
|
+
Root: typeof TagSelectRoot;
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=TagSelect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TagSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-select/TagSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAalE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iEAAiE;IACjE,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uHAAuH;IACvH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uEAAuE;IACvE,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,yBAAyB;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8IAA8I;IAC9I,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAmDF,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAiB,EACjB,aAAa,EACb,SAAiB,EACjB,SAAS,EACT,eAAwB,EACxB,IAAuC,EACvC,iBAA4B,EAC5B,QAAgB,EAChB,WAAgB,EAChB,QAAgB,EAChB,IAAU,EACV,EAAE,EAAE,MAAM,EACV,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,kBAAkB,2CAqapB;yBAvbe,aAAa;;;AA2b7B,eAAO,MAAM,SAAS;;CAErB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pattern-canonical.d.ts","sourceRoot":"","sources":["../../../../../src/components/tag-select/examples/pattern-canonical.tsx"],"names":[],"mappings":"AAKA,6FAA6F;AAC7F,MAAM,CAAC,OAAO,UAAU,gCAAgC,4CAqBvD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pattern-features.d.ts","sourceRoot":"","sources":["../../../../../src/components/tag-select/examples/pattern-features.tsx"],"names":[],"mappings":"AAOA,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,+BAA+B,4CAuBtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePosition.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAUF,MAAM,MAAM,kBAAkB,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC;AAShE,MAAM,MAAM,sBAAsB,GAAG;IACnC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsBF,mGAAmG;AACnG,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,eAAe,EAC3B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,sBAAsB,GAC3B,qBAAqB,CAwCvB;AAED,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,MAAM,kBAAkB,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,wBAAgB,WAAW,CACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC/C,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,
|
|
1
|
+
{"version":3,"file":"usePosition.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAUF,MAAM,MAAM,kBAAkB,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC;AAShE,MAAM,MAAM,sBAAsB,GAAG;IACnC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsBF,mGAAmG;AACnG,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,eAAe,EAC3B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,sBAAsB,GAC3B,qBAAqB,CAwCvB;AAED,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,MAAM,kBAAkB,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,wBAAgB,WAAW,CACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC/C,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAqEnB"}
|
package/dist/index.css
CHANGED
|
@@ -609,7 +609,7 @@ select {
|
|
|
609
609
|
--prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
|
|
610
610
|
--prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
|
|
611
611
|
--prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
|
|
612
|
-
--prime-sys-size-modal-titleGap: var(--prime-sys-spacing-
|
|
612
|
+
--prime-sys-size-modal-titleGap: var(--prime-sys-spacing-x1);
|
|
613
613
|
--prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
|
|
614
614
|
--prime-sys-size-switch-l-trackHeight: 1.25rem;
|
|
615
615
|
--prime-sys-size-switch-l-trackWidth: 2.25rem;
|
|
@@ -1075,7 +1075,7 @@ select {
|
|
|
1075
1075
|
--prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
|
|
1076
1076
|
--prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
|
|
1077
1077
|
--prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
|
|
1078
|
-
--prime-sys-size-modal-titleGap: var(--prime-sys-spacing-
|
|
1078
|
+
--prime-sys-size-modal-titleGap: var(--prime-sys-spacing-x1);
|
|
1079
1079
|
--prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
|
|
1080
1080
|
--prime-sys-size-switch-l-trackHeight: 1.25rem;
|
|
1081
1081
|
--prime-sys-size-switch-l-trackWidth: 2.25rem;
|
|
@@ -5148,12 +5148,6 @@ textarea::-moz-focus-inner {
|
|
|
5148
5148
|
display: block;
|
|
5149
5149
|
}
|
|
5150
5150
|
.Select_content {
|
|
5151
|
-
--select-item-min-height: var(--prime-sys-size-control-m-height);
|
|
5152
|
-
--select-item-text: var(--prime-sys-typography-control-s);
|
|
5153
|
-
--select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
|
|
5154
|
-
--select-item-icon-size: var(--prime-sys-size-control-m-icon);
|
|
5155
|
-
--select-item-gap: var(--prime-sys-size-control-m-gap);
|
|
5156
|
-
--select-item-radius: var(--prime-sys-size-control-m-radius);
|
|
5157
5151
|
display: flex;
|
|
5158
5152
|
flex-direction: column;
|
|
5159
5153
|
gap: var(--prime-sys-spacing-x1);
|
|
@@ -5169,6 +5163,9 @@ textarea::-moz-focus-inner {
|
|
|
5169
5163
|
font-family: inherit;
|
|
5170
5164
|
color: var(--prime-sys-color-content-primary);
|
|
5171
5165
|
}
|
|
5166
|
+
.Select_content[aria-hidden=true] {
|
|
5167
|
+
pointer-events: none;
|
|
5168
|
+
}
|
|
5172
5169
|
.Select_content[data-overlay-portal-layer=page] {
|
|
5173
5170
|
z-index: var(--prime-sys-elevation-zIndex-dropdown);
|
|
5174
5171
|
}
|
|
@@ -5181,7 +5178,33 @@ textarea::-moz-focus-inner {
|
|
|
5181
5178
|
.Select_content[data-overlay-portal-layer=drawerInModal] {
|
|
5182
5179
|
z-index: var(--prime-sys-elevation-zIndex-dropdownInDrawerInModal);
|
|
5183
5180
|
}
|
|
5184
|
-
.
|
|
5181
|
+
.Select_item {
|
|
5182
|
+
--select-item-min-height: var(--prime-sys-size-control-m-height);
|
|
5183
|
+
--select-item-text: var(--prime-sys-typography-control-s);
|
|
5184
|
+
--select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
|
|
5185
|
+
--select-item-icon-size: var(--prime-sys-size-control-m-icon);
|
|
5186
|
+
--select-item-gap: var(--prime-sys-size-control-m-gap);
|
|
5187
|
+
--select-item-radius: var(--prime-sys-size-control-m-radius);
|
|
5188
|
+
display: flex;
|
|
5189
|
+
align-items: center;
|
|
5190
|
+
gap: var(--select-item-gap);
|
|
5191
|
+
box-sizing: border-box;
|
|
5192
|
+
width: 100%;
|
|
5193
|
+
min-height: var(--select-item-min-height);
|
|
5194
|
+
padding-block: 0;
|
|
5195
|
+
padding-inline: var(--select-item-pad-x);
|
|
5196
|
+
border-radius: var(--select-item-radius);
|
|
5197
|
+
cursor: pointer;
|
|
5198
|
+
font-size: var(--select-item-text);
|
|
5199
|
+
font-weight: var(--prime-sys-typography-weight-medium);
|
|
5200
|
+
line-height: 1.2;
|
|
5201
|
+
color: var(--prime-sys-color-content-primary);
|
|
5202
|
+
text-align: start;
|
|
5203
|
+
transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
|
|
5204
|
+
outline: none;
|
|
5205
|
+
user-select: none;
|
|
5206
|
+
}
|
|
5207
|
+
.Select_item[data-size=s] {
|
|
5185
5208
|
--select-item-min-height: var(--prime-sys-size-control-s-height);
|
|
5186
5209
|
--select-item-text: var(--prime-sys-typography-support-2xs);
|
|
5187
5210
|
--select-item-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
|
|
@@ -5189,7 +5212,7 @@ textarea::-moz-focus-inner {
|
|
|
5189
5212
|
--select-item-gap: var(--prime-sys-size-control-s-gap);
|
|
5190
5213
|
--select-item-radius: var(--prime-sys-size-control-s-radius);
|
|
5191
5214
|
}
|
|
5192
|
-
.
|
|
5215
|
+
.Select_item[data-size=m] {
|
|
5193
5216
|
--select-item-min-height: var(--prime-sys-size-control-m-height);
|
|
5194
5217
|
--select-item-text: var(--prime-sys-typography-control-s);
|
|
5195
5218
|
--select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
|
|
@@ -5197,7 +5220,7 @@ textarea::-moz-focus-inner {
|
|
|
5197
5220
|
--select-item-gap: var(--prime-sys-size-control-m-gap);
|
|
5198
5221
|
--select-item-radius: var(--prime-sys-size-control-m-radius);
|
|
5199
5222
|
}
|
|
5200
|
-
.
|
|
5223
|
+
.Select_item[data-size=l] {
|
|
5201
5224
|
--select-item-min-height: var(--prime-sys-size-control-l-height);
|
|
5202
5225
|
--select-item-text: var(--prime-sys-typography-control-m);
|
|
5203
5226
|
--select-item-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
|
|
@@ -5205,7 +5228,7 @@ textarea::-moz-focus-inner {
|
|
|
5205
5228
|
--select-item-gap: var(--prime-sys-size-control-l-gap);
|
|
5206
5229
|
--select-item-radius: var(--prime-sys-size-control-l-radius);
|
|
5207
5230
|
}
|
|
5208
|
-
.
|
|
5231
|
+
.Select_item[data-size=xl] {
|
|
5209
5232
|
--select-item-min-height: var(--prime-sys-size-control-xl-height);
|
|
5210
5233
|
--select-item-text: var(--prime-sys-typography-control-l);
|
|
5211
5234
|
--select-item-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
|
|
@@ -5213,26 +5236,6 @@ textarea::-moz-focus-inner {
|
|
|
5213
5236
|
--select-item-gap: var(--prime-sys-size-control-xl-gap);
|
|
5214
5237
|
--select-item-radius: var(--prime-sys-size-control-xl-radius);
|
|
5215
5238
|
}
|
|
5216
|
-
.Select_item {
|
|
5217
|
-
display: flex;
|
|
5218
|
-
align-items: center;
|
|
5219
|
-
gap: var(--select-item-gap);
|
|
5220
|
-
box-sizing: border-box;
|
|
5221
|
-
width: 100%;
|
|
5222
|
-
min-height: var(--select-item-min-height);
|
|
5223
|
-
padding-block: 0;
|
|
5224
|
-
padding-inline: var(--select-item-pad-x);
|
|
5225
|
-
border-radius: var(--select-item-radius);
|
|
5226
|
-
cursor: pointer;
|
|
5227
|
-
font-size: var(--select-item-text);
|
|
5228
|
-
font-weight: var(--prime-sys-typography-weight-medium);
|
|
5229
|
-
line-height: 1.2;
|
|
5230
|
-
color: var(--prime-sys-color-content-primary);
|
|
5231
|
-
text-align: start;
|
|
5232
|
-
transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
|
|
5233
|
-
outline: none;
|
|
5234
|
-
user-select: none;
|
|
5235
|
-
}
|
|
5236
5239
|
.Select_item:hover,
|
|
5237
5240
|
.Select_item[data-highlighted=true] {
|
|
5238
5241
|
background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
|
|
@@ -5292,12 +5295,24 @@ textarea::-moz-focus-inner {
|
|
|
5292
5295
|
.Select_groupLabel {
|
|
5293
5296
|
display: flex;
|
|
5294
5297
|
align-items: center;
|
|
5295
|
-
padding-inline: var(--
|
|
5298
|
+
padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
|
|
5296
5299
|
padding-block: var(--prime-sys-spacing-x1);
|
|
5297
5300
|
font-size: var(--prime-sys-typography-support-2xs);
|
|
5298
5301
|
color: var(--prime-sys-color-content-muted);
|
|
5299
5302
|
font-weight: var(--prime-sys-typography-weight-medium);
|
|
5300
5303
|
}
|
|
5304
|
+
.Select_groupLabel[data-size=s] {
|
|
5305
|
+
padding-inline: var(--prime-sys-size-control-s-inputPaddingX);
|
|
5306
|
+
}
|
|
5307
|
+
.Select_groupLabel[data-size=m] {
|
|
5308
|
+
padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
|
|
5309
|
+
}
|
|
5310
|
+
.Select_groupLabel[data-size=l] {
|
|
5311
|
+
padding-inline: var(--prime-sys-size-control-l-inputPaddingX);
|
|
5312
|
+
}
|
|
5313
|
+
.Select_groupLabel[data-size=xl] {
|
|
5314
|
+
padding-inline: var(--prime-sys-size-control-xl-inputPaddingX);
|
|
5315
|
+
}
|
|
5301
5316
|
.Select_separator {
|
|
5302
5317
|
flex-shrink: 0;
|
|
5303
5318
|
align-self: stretch;
|
|
@@ -5627,24 +5642,30 @@ textarea::-moz-focus-inner {
|
|
|
5627
5642
|
align-items: center;
|
|
5628
5643
|
}
|
|
5629
5644
|
.Modal_title {
|
|
5645
|
+
margin: 0;
|
|
5630
5646
|
line-height: 1.2;
|
|
5631
5647
|
font-weight: var(--prime-sys-typography-title-weight);
|
|
5632
5648
|
font-size: var(--prime-sys-size-control-m-text);
|
|
5633
5649
|
}
|
|
5634
5650
|
.Modal_description {
|
|
5651
|
+
margin: 0;
|
|
5635
5652
|
color: var(--prime-sys-color-content-secondary);
|
|
5636
|
-
font-size: var(--prime-sys-size-control-
|
|
5653
|
+
font-size: var(--prime-sys-size-control-s-text);
|
|
5654
|
+
line-height: 1.4;
|
|
5637
5655
|
}
|
|
5638
5656
|
.Modal_headText {
|
|
5639
|
-
display:
|
|
5657
|
+
display: flex;
|
|
5658
|
+
flex-direction: column;
|
|
5659
|
+
align-items: stretch;
|
|
5640
5660
|
gap: var(--prime-sys-size-modal-titleGap);
|
|
5661
|
+
min-width: 0;
|
|
5641
5662
|
padding-right: var(--prime-sys-size-modal-headTextPaddingRight);
|
|
5642
5663
|
}
|
|
5643
5664
|
.Modal_headerIcon {
|
|
5644
5665
|
display: inline-flex;
|
|
5645
5666
|
align-items: center;
|
|
5646
5667
|
justify-content: center;
|
|
5647
|
-
background: var(--prime-sys-color-surface-
|
|
5668
|
+
background: var(--prime-sys-color-surface-default);
|
|
5648
5669
|
color: var(--prime-sys-color-content-secondary);
|
|
5649
5670
|
flex: 0 0 auto;
|
|
5650
5671
|
width: var(--prime-sys-size-modal-headerIconSize);
|
|
@@ -9911,6 +9932,277 @@ textarea::-moz-focus-inner {
|
|
|
9911
9932
|
flex-shrink: 0;
|
|
9912
9933
|
}
|
|
9913
9934
|
|
|
9935
|
+
/* src/components/tag-select/TagSelect.module.css */
|
|
9936
|
+
.TagSelect_control {
|
|
9937
|
+
--ts-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
|
|
9938
|
+
--ts-pad-y: var(--prime-sys-size-control-m-inputPaddingY);
|
|
9939
|
+
--ts-gap: var(--prime-sys-size-control-m-gap);
|
|
9940
|
+
--ts-chevron: var(--prime-sys-size-control-m-icon);
|
|
9941
|
+
position: relative;
|
|
9942
|
+
box-sizing: border-box;
|
|
9943
|
+
display: flex;
|
|
9944
|
+
flex-wrap: wrap;
|
|
9945
|
+
align-items: flex-start;
|
|
9946
|
+
gap: var(--ts-gap);
|
|
9947
|
+
width: 100%;
|
|
9948
|
+
min-width: 0;
|
|
9949
|
+
padding-inline-start: var(--ts-pad-x);
|
|
9950
|
+
padding-inline-end: calc(var(--ts-pad-x) + var(--ts-chevron) + var(--ts-gap));
|
|
9951
|
+
padding-block: var(--ts-pad-y);
|
|
9952
|
+
border-radius: var(--prime-sys-size-control-m-radius);
|
|
9953
|
+
border: var(--prime-sys-border-width-control) solid var(--prime-sys-color-field-border);
|
|
9954
|
+
background: var(--prime-sys-color-field-bg);
|
|
9955
|
+
color: var(--prime-sys-color-field-text);
|
|
9956
|
+
font-size: var(--prime-sys-size-control-m-text);
|
|
9957
|
+
font-family: inherit;
|
|
9958
|
+
box-shadow: var(--prime-sys-elevation-shadow-surface);
|
|
9959
|
+
cursor: text;
|
|
9960
|
+
text-align: left;
|
|
9961
|
+
outline: none;
|
|
9962
|
+
transition:
|
|
9963
|
+
border-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
|
|
9964
|
+
box-shadow var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
|
|
9965
|
+
background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
|
|
9966
|
+
}
|
|
9967
|
+
.TagSelect_control[data-size=s] {
|
|
9968
|
+
--ts-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
|
|
9969
|
+
--ts-pad-y: var(--prime-sys-size-control-s-inputPaddingY);
|
|
9970
|
+
--ts-gap: var(--prime-sys-size-control-s-gap);
|
|
9971
|
+
--ts-chevron: var(--prime-sys-size-control-s-icon);
|
|
9972
|
+
border-radius: var(--prime-sys-size-control-s-radius);
|
|
9973
|
+
font-size: var(--prime-sys-size-control-s-text);
|
|
9974
|
+
}
|
|
9975
|
+
.TagSelect_control[data-size=m] {
|
|
9976
|
+
--ts-gap: var(--prime-sys-size-control-m-gap);
|
|
9977
|
+
--ts-chevron: var(--prime-sys-size-control-m-icon);
|
|
9978
|
+
border-radius: var(--prime-sys-size-control-m-radius);
|
|
9979
|
+
font-size: var(--prime-sys-size-control-m-text);
|
|
9980
|
+
}
|
|
9981
|
+
.TagSelect_control[data-size=l] {
|
|
9982
|
+
--ts-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
|
|
9983
|
+
--ts-pad-y: var(--prime-sys-size-control-l-inputPaddingY);
|
|
9984
|
+
--ts-gap: var(--prime-sys-size-control-l-gap);
|
|
9985
|
+
--ts-chevron: var(--prime-sys-size-control-l-icon);
|
|
9986
|
+
border-radius: var(--prime-sys-size-control-l-radius);
|
|
9987
|
+
font-size: var(--prime-sys-size-control-l-text);
|
|
9988
|
+
}
|
|
9989
|
+
.TagSelect_control[data-size=xl] {
|
|
9990
|
+
--ts-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
|
|
9991
|
+
--ts-pad-y: var(--prime-sys-size-control-xl-inputPaddingY);
|
|
9992
|
+
--ts-gap: var(--prime-sys-size-control-xl-gap);
|
|
9993
|
+
--ts-chevron: var(--prime-sys-size-control-xl-icon);
|
|
9994
|
+
border-radius: var(--prime-sys-size-control-xl-radius);
|
|
9995
|
+
font-size: var(--prime-sys-size-control-xl-text);
|
|
9996
|
+
}
|
|
9997
|
+
.TagSelect_control[data-empty=true] {
|
|
9998
|
+
min-height: var(--prime-sys-size-control-m-height);
|
|
9999
|
+
}
|
|
10000
|
+
.TagSelect_control[data-empty=true][data-size=s] {
|
|
10001
|
+
min-height: var(--prime-sys-size-control-s-height);
|
|
10002
|
+
}
|
|
10003
|
+
.TagSelect_control[data-empty=true][data-size=m] {
|
|
10004
|
+
min-height: var(--prime-sys-size-control-m-height);
|
|
10005
|
+
}
|
|
10006
|
+
.TagSelect_control[data-empty=true][data-size=l] {
|
|
10007
|
+
min-height: var(--prime-sys-size-control-l-height);
|
|
10008
|
+
}
|
|
10009
|
+
.TagSelect_control[data-empty=true][data-size=xl] {
|
|
10010
|
+
min-height: var(--prime-sys-size-control-xl-height);
|
|
10011
|
+
}
|
|
10012
|
+
.TagSelect_control:hover:not([data-disabled=true]) {
|
|
10013
|
+
border-color: var(--prime-sys-color-field-borderHover);
|
|
10014
|
+
background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
|
|
10015
|
+
box-shadow: none;
|
|
10016
|
+
}
|
|
10017
|
+
.TagSelect_control:focus-within:not([data-disabled=true]) {
|
|
10018
|
+
border-color: var(--prime-sys-color-field-borderFocus);
|
|
10019
|
+
box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
|
|
10020
|
+
}
|
|
10021
|
+
.TagSelect_control[data-has-error=true] {
|
|
10022
|
+
border-color: var(--prime-sys-color-field-borderError);
|
|
10023
|
+
}
|
|
10024
|
+
.TagSelect_control[data-has-error=true]:focus-within {
|
|
10025
|
+
box-shadow: var(--prime-sys-elevation-shadow-errorFocus);
|
|
10026
|
+
}
|
|
10027
|
+
.TagSelect_control[data-disabled=true] {
|
|
10028
|
+
background: var(--prime-sys-color-surface-accentSoft);
|
|
10029
|
+
border-color: transparent;
|
|
10030
|
+
box-shadow: none;
|
|
10031
|
+
cursor: not-allowed;
|
|
10032
|
+
color: var(--prime-sys-color-content-disabled);
|
|
10033
|
+
}
|
|
10034
|
+
.TagSelect_chips {
|
|
10035
|
+
display: flex;
|
|
10036
|
+
flex: 1 1 auto;
|
|
10037
|
+
flex-wrap: wrap;
|
|
10038
|
+
align-items: center;
|
|
10039
|
+
gap: var(--ts-gap);
|
|
10040
|
+
box-sizing: border-box;
|
|
10041
|
+
width: 100%;
|
|
10042
|
+
min-width: 0;
|
|
10043
|
+
}
|
|
10044
|
+
.TagSelect_chip {
|
|
10045
|
+
display: inline-flex;
|
|
10046
|
+
max-width: 100%;
|
|
10047
|
+
}
|
|
10048
|
+
.TagSelect_chipBadge {
|
|
10049
|
+
max-width: 100%;
|
|
10050
|
+
min-width: 0;
|
|
10051
|
+
}
|
|
10052
|
+
.TagSelect_chipLabel {
|
|
10053
|
+
min-width: 0;
|
|
10054
|
+
overflow: hidden;
|
|
10055
|
+
text-overflow: ellipsis;
|
|
10056
|
+
}
|
|
10057
|
+
.TagSelect_chipRemove {
|
|
10058
|
+
display: inline-flex;
|
|
10059
|
+
flex-shrink: 0;
|
|
10060
|
+
align-items: center;
|
|
10061
|
+
justify-content: center;
|
|
10062
|
+
margin: 0;
|
|
10063
|
+
padding: 0;
|
|
10064
|
+
border: none;
|
|
10065
|
+
border-radius: var(--prime-sys-shape-radius-s);
|
|
10066
|
+
background: transparent;
|
|
10067
|
+
color: inherit;
|
|
10068
|
+
opacity: 0.8;
|
|
10069
|
+
cursor: pointer;
|
|
10070
|
+
transition: opacity var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
|
|
10071
|
+
}
|
|
10072
|
+
.TagSelect_chipRemove:hover:not(:disabled) {
|
|
10073
|
+
opacity: 1;
|
|
10074
|
+
}
|
|
10075
|
+
.TagSelect_chipRemove:focus-visible {
|
|
10076
|
+
outline: none;
|
|
10077
|
+
box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
|
|
10078
|
+
}
|
|
10079
|
+
.TagSelect_chipRemove:disabled {
|
|
10080
|
+
cursor: not-allowed;
|
|
10081
|
+
opacity: 0.45;
|
|
10082
|
+
}
|
|
10083
|
+
.TagSelect_removeIcon {
|
|
10084
|
+
display: block;
|
|
10085
|
+
width: 0.625rem;
|
|
10086
|
+
height: 0.625rem;
|
|
10087
|
+
}
|
|
10088
|
+
.TagSelect_input {
|
|
10089
|
+
flex: 1 1 4rem;
|
|
10090
|
+
min-width: 2rem;
|
|
10091
|
+
margin: 0;
|
|
10092
|
+
padding: 0;
|
|
10093
|
+
border: none;
|
|
10094
|
+
background: transparent;
|
|
10095
|
+
color: inherit;
|
|
10096
|
+
font: inherit;
|
|
10097
|
+
line-height: var(--prime-sys-typography-body-lineHeight);
|
|
10098
|
+
outline: none;
|
|
10099
|
+
}
|
|
10100
|
+
.TagSelect_inputCollapsed {
|
|
10101
|
+
flex: 0 1 0;
|
|
10102
|
+
min-width: 0;
|
|
10103
|
+
width: 0;
|
|
10104
|
+
height: 0;
|
|
10105
|
+
min-height: 0;
|
|
10106
|
+
overflow: hidden;
|
|
10107
|
+
opacity: 0;
|
|
10108
|
+
line-height: 0;
|
|
10109
|
+
font-size: 0;
|
|
10110
|
+
}
|
|
10111
|
+
.TagSelect_input::placeholder {
|
|
10112
|
+
color: var(--prime-sys-color-field-placeholder);
|
|
10113
|
+
}
|
|
10114
|
+
.TagSelect_control[data-disabled=true] .TagSelect_input::placeholder {
|
|
10115
|
+
color: var(--prime-sys-color-content-disabled);
|
|
10116
|
+
}
|
|
10117
|
+
.TagSelect_chevronSlot {
|
|
10118
|
+
position: absolute;
|
|
10119
|
+
top: 50%;
|
|
10120
|
+
right: var(--ts-pad-x);
|
|
10121
|
+
display: inline-flex;
|
|
10122
|
+
align-items: center;
|
|
10123
|
+
justify-content: center;
|
|
10124
|
+
width: var(--ts-chevron);
|
|
10125
|
+
min-width: var(--ts-chevron);
|
|
10126
|
+
pointer-events: none;
|
|
10127
|
+
transform: translateY(-50%);
|
|
10128
|
+
}
|
|
10129
|
+
.TagSelect_chevron {
|
|
10130
|
+
display: block;
|
|
10131
|
+
flex-shrink: 0;
|
|
10132
|
+
width: var(--prime-sys-unit-0p45rem);
|
|
10133
|
+
height: var(--prime-sys-unit-0p45rem);
|
|
10134
|
+
border-right: var(--prime-sys-unit-1p5px) solid currentColor;
|
|
10135
|
+
border-bottom: var(--prime-sys-unit-1p5px) solid currentColor;
|
|
10136
|
+
transform: rotate(45deg) translateY(-10%);
|
|
10137
|
+
opacity: 0.6;
|
|
10138
|
+
transition: transform var(--prime-sys-motion-medium) var(--prime-sys-motion-standard), opacity var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
|
|
10139
|
+
}
|
|
10140
|
+
.TagSelect_control[data-open=true] .TagSelect_chevron {
|
|
10141
|
+
transform: rotate(225deg) translateY(-10%);
|
|
10142
|
+
}
|
|
10143
|
+
.TagSelect_panelInner {
|
|
10144
|
+
display: flex;
|
|
10145
|
+
flex-direction: column;
|
|
10146
|
+
gap: 0;
|
|
10147
|
+
min-width: 0;
|
|
10148
|
+
}
|
|
10149
|
+
.TagSelect_hint {
|
|
10150
|
+
padding-inline: var(--prime-sys-spacing-x3);
|
|
10151
|
+
padding-block: var(--prime-sys-spacing-x2) var(--prime-sys-spacing-x1);
|
|
10152
|
+
}
|
|
10153
|
+
.TagSelect_optionRow {
|
|
10154
|
+
display: flex;
|
|
10155
|
+
align-items: center;
|
|
10156
|
+
gap: var(--prime-sys-spacing-x2);
|
|
10157
|
+
width: 100%;
|
|
10158
|
+
min-width: 0;
|
|
10159
|
+
cursor: pointer;
|
|
10160
|
+
border: none;
|
|
10161
|
+
background: none;
|
|
10162
|
+
text-align: left;
|
|
10163
|
+
font: inherit;
|
|
10164
|
+
color: inherit;
|
|
10165
|
+
padding-inline: var(--prime-sys-spacing-x3);
|
|
10166
|
+
padding-block: var(--prime-sys-spacing-x2);
|
|
10167
|
+
border-radius: var(--prime-sys-shape-radius-m);
|
|
10168
|
+
transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
|
|
10169
|
+
}
|
|
10170
|
+
.TagSelect_optionRow:hover:not([data-disabled=true]) {
|
|
10171
|
+
background: var(--prime-sys-color-action-neutralBackgroundHover);
|
|
10172
|
+
}
|
|
10173
|
+
.TagSelect_optionRow[data-highlighted=true]:not([data-disabled=true]) {
|
|
10174
|
+
background: var(--prime-sys-color-action-neutralBackgroundHover);
|
|
10175
|
+
}
|
|
10176
|
+
.TagSelect_optionRow[data-disabled=true] {
|
|
10177
|
+
opacity: 0.45;
|
|
10178
|
+
cursor: not-allowed;
|
|
10179
|
+
}
|
|
10180
|
+
.TagSelect_createRow {
|
|
10181
|
+
display: flex;
|
|
10182
|
+
align-items: center;
|
|
10183
|
+
flex-wrap: wrap;
|
|
10184
|
+
gap: var(--prime-sys-spacing-x2);
|
|
10185
|
+
width: 100%;
|
|
10186
|
+
min-width: 0;
|
|
10187
|
+
cursor: pointer;
|
|
10188
|
+
border: none;
|
|
10189
|
+
background: none;
|
|
10190
|
+
text-align: left;
|
|
10191
|
+
font: inherit;
|
|
10192
|
+
color: inherit;
|
|
10193
|
+
padding-inline: var(--prime-sys-spacing-x3);
|
|
10194
|
+
padding-block: var(--prime-sys-spacing-x2);
|
|
10195
|
+
border-radius: var(--prime-sys-shape-radius-m);
|
|
10196
|
+
transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
|
|
10197
|
+
}
|
|
10198
|
+
.TagSelect_createRow:hover:not([data-disabled=true]),
|
|
10199
|
+
.TagSelect_createRow[data-highlighted=true]:not([data-disabled=true]) {
|
|
10200
|
+
background: var(--prime-sys-color-action-neutralBackgroundHover);
|
|
10201
|
+
}
|
|
10202
|
+
.TagSelect_createLabel {
|
|
10203
|
+
flex-shrink: 0;
|
|
10204
|
+
}
|
|
10205
|
+
|
|
9914
10206
|
/* src/components/textarea/Textarea.module.css */
|
|
9915
10207
|
.Textarea_field {
|
|
9916
10208
|
--prime-textarea-body-size: var(--prime-sys-size-control-m-text);
|