@phillips/seldon 1.85.0 → 1.86.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/Accordion/AccordionItem.d.ts +8 -0
- package/dist/components/Accordion/AccordionItem.js +93 -82
- package/dist/components/Accordion/types.d.ts +8 -0
- package/dist/components/Search/Search.js +115 -104
- package/dist/node_modules/exenv/index.js +1 -1
- package/dist/node_modules/prop-types/node_modules/react-is/index.js +1 -1
- package/dist/scss/components/Input/_input.scss +10 -1
- package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss +6 -0
- package/dist/scss/components/Navigation/NavigationList/_navigationList.scss +0 -1
- package/dist/scss/site-furniture/Header/_header.scss +0 -1
- package/package.json +1 -1
|
@@ -33,6 +33,14 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
33
33
|
* Number of milliseconds for the expansion transition. Defaults to 250.
|
|
34
34
|
*/
|
|
35
35
|
transitionTimeInMs?: number;
|
|
36
|
+
/**
|
|
37
|
+
* Callback function that is called when the item is opened.
|
|
38
|
+
*/
|
|
39
|
+
onOpen?: () => void;
|
|
40
|
+
/**
|
|
41
|
+
* Callback function that is called when the item is closed.
|
|
42
|
+
*/
|
|
43
|
+
onClose?: () => void;
|
|
36
44
|
}
|
|
37
45
|
declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
46
|
export default AccordionItem;
|
|
@@ -1,125 +1,136 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Item as
|
|
3
|
-
import
|
|
4
|
-
import { forwardRef as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { getCommonProps as
|
|
9
|
-
import { AccordionItemVariant as
|
|
10
|
-
import { getIconClasses as
|
|
11
|
-
const
|
|
12
|
-
children:
|
|
1
|
+
import { jsxs as _, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { Item as A, Trigger as k, Content as x } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
|
|
3
|
+
import u from "../../node_modules/classnames/index.js";
|
|
4
|
+
import { forwardRef as N, useRef as R, useCallback as S } from "react";
|
|
5
|
+
import T from "../../assets/lock.svg.js";
|
|
6
|
+
import j from "../../assets/minus.svg.js";
|
|
7
|
+
import w from "../../assets/plus.svg.js";
|
|
8
|
+
import { getCommonProps as y } from "../../utils/index.js";
|
|
9
|
+
import { AccordionItemVariant as I } from "./types.js";
|
|
10
|
+
import { getIconClasses as v } from "./utils.js";
|
|
11
|
+
const P = ({
|
|
12
|
+
children: c,
|
|
13
13
|
className: r,
|
|
14
|
-
baseClassName:
|
|
14
|
+
baseClassName: t,
|
|
15
15
|
disable: i,
|
|
16
|
-
isLargeVariation:
|
|
17
|
-
id:
|
|
16
|
+
isLargeVariation: e,
|
|
17
|
+
id: n,
|
|
18
|
+
onOpen: d,
|
|
19
|
+
onClose: m
|
|
18
20
|
}) => {
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
+
const l = R(null), a = i, f = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
|
|
22
|
+
T,
|
|
21
23
|
{
|
|
22
|
-
className:
|
|
23
|
-
"data-testid": `${
|
|
24
|
+
className: v(t, e, "lock"),
|
|
25
|
+
"data-testid": `${n}-lockedIcon`,
|
|
24
26
|
"aria-hidden": !0
|
|
25
27
|
}
|
|
26
|
-
) }),
|
|
27
|
-
|
|
28
|
+
) }), g = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
|
|
29
|
+
w,
|
|
28
30
|
{
|
|
29
|
-
className:
|
|
30
|
-
"data-testid": `${
|
|
31
|
+
className: v(t, e, "plus"),
|
|
32
|
+
"data-testid": `${n}-plusIcon`,
|
|
31
33
|
"aria-hidden": !0
|
|
32
34
|
}
|
|
33
|
-
) }), p = /* @__PURE__ */
|
|
34
|
-
|
|
35
|
+
) }), p = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
|
|
36
|
+
j,
|
|
35
37
|
{
|
|
36
|
-
className:
|
|
37
|
-
"data-testid": `${
|
|
38
|
+
className: v(t, e, "minus"),
|
|
39
|
+
"data-testid": `${n}-minusIcon`,
|
|
38
40
|
"aria-hidden": !0
|
|
39
41
|
}
|
|
40
|
-
) })
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
) }), $ = S(() => {
|
|
43
|
+
var s;
|
|
44
|
+
((s = l.current) == null ? void 0 : s.getAttribute("data-state")) === "closed" ? d == null || d() : m == null || m();
|
|
45
|
+
}, [d, m]);
|
|
46
|
+
return /* @__PURE__ */ o(
|
|
47
|
+
k,
|
|
43
48
|
{
|
|
44
49
|
"data-disabled": i,
|
|
45
50
|
asChild: !0,
|
|
46
|
-
className:
|
|
47
|
-
|
|
48
|
-
{ [`${
|
|
49
|
-
{ [`${
|
|
51
|
+
className: u(
|
|
52
|
+
t,
|
|
53
|
+
{ [`${t}--large`]: e },
|
|
54
|
+
{ [`${t}--hoverable`]: !i },
|
|
50
55
|
r
|
|
51
56
|
),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
+
ref: l,
|
|
58
|
+
onClick: $,
|
|
59
|
+
children: /* @__PURE__ */ _("div", { "data-testid": `${n}-trigger`, children: [
|
|
60
|
+
/* @__PURE__ */ o("div", { className: u(`${t}__text`, { [`${t}__text--lg`]: e }), children: c }),
|
|
61
|
+
a && f,
|
|
62
|
+
!a && g,
|
|
63
|
+
!a && p
|
|
57
64
|
] })
|
|
58
65
|
}
|
|
59
66
|
);
|
|
60
|
-
},
|
|
61
|
-
children:
|
|
67
|
+
}, b = ({
|
|
68
|
+
children: c,
|
|
62
69
|
baseClassName: r,
|
|
63
|
-
disable:
|
|
70
|
+
disable: t,
|
|
64
71
|
hasTransition: i,
|
|
65
|
-
isLargeVariation:
|
|
66
|
-
className:
|
|
67
|
-
}) =>
|
|
72
|
+
isLargeVariation: e,
|
|
73
|
+
className: n
|
|
74
|
+
}) => t && c ? /* @__PURE__ */ o("div", { className: `${r}__content--locked`, children: c }) : /* @__PURE__ */ o(
|
|
68
75
|
x,
|
|
69
76
|
{
|
|
70
77
|
asChild: !0,
|
|
71
|
-
className:
|
|
78
|
+
className: u(
|
|
72
79
|
`${r}__content`,
|
|
73
|
-
{ [`${r}__content--lg`]:
|
|
80
|
+
{ [`${r}__content--lg`]: e },
|
|
74
81
|
{ [`${r}--transition`]: i },
|
|
75
|
-
|
|
82
|
+
n
|
|
76
83
|
),
|
|
77
|
-
children:
|
|
84
|
+
children: c
|
|
78
85
|
}
|
|
79
|
-
),
|
|
86
|
+
), C = N(
|
|
80
87
|
({
|
|
81
|
-
isLocked:
|
|
82
|
-
variant: r =
|
|
83
|
-
id:
|
|
88
|
+
isLocked: c = !1,
|
|
89
|
+
variant: r = I.sm,
|
|
90
|
+
id: t,
|
|
84
91
|
label: i,
|
|
85
|
-
isLastItem:
|
|
86
|
-
hasTransition:
|
|
92
|
+
isLastItem: e,
|
|
93
|
+
hasTransition: n = !1,
|
|
87
94
|
children: d,
|
|
88
|
-
className:
|
|
89
|
-
transitionTimeInMs:
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
+
className: m,
|
|
96
|
+
transitionTimeInMs: l = 250,
|
|
97
|
+
onOpen: a,
|
|
98
|
+
onClose: f,
|
|
99
|
+
...g
|
|
100
|
+
}, p) => {
|
|
101
|
+
const { className: $ } = y({ id: t }, "Accordion"), h = r === I.lg, s = `${$}-item`;
|
|
102
|
+
return /* @__PURE__ */ _(
|
|
103
|
+
A,
|
|
95
104
|
{
|
|
96
|
-
disabled:
|
|
97
|
-
value:
|
|
98
|
-
style: { "--seldon-accordion-transition-time": `${
|
|
99
|
-
className:
|
|
100
|
-
[`${s}__border-bottom`]: !
|
|
105
|
+
disabled: c,
|
|
106
|
+
value: t,
|
|
107
|
+
style: { "--seldon-accordion-transition-time": `${l}ms` },
|
|
108
|
+
className: u(s, m, {
|
|
109
|
+
[`${s}__border-bottom`]: !e
|
|
101
110
|
}),
|
|
102
|
-
ref:
|
|
103
|
-
...
|
|
111
|
+
ref: p,
|
|
112
|
+
...g,
|
|
104
113
|
children: [
|
|
105
|
-
/* @__PURE__ */
|
|
106
|
-
|
|
114
|
+
/* @__PURE__ */ o(
|
|
115
|
+
P,
|
|
107
116
|
{
|
|
108
|
-
disable:
|
|
109
|
-
isLargeVariation:
|
|
110
|
-
id:
|
|
117
|
+
disable: c,
|
|
118
|
+
isLargeVariation: h,
|
|
119
|
+
id: t,
|
|
111
120
|
baseClassName: `${s}-label`,
|
|
121
|
+
onOpen: a,
|
|
122
|
+
onClose: f,
|
|
112
123
|
children: i
|
|
113
124
|
}
|
|
114
125
|
),
|
|
115
|
-
/* @__PURE__ */
|
|
116
|
-
|
|
126
|
+
/* @__PURE__ */ o(
|
|
127
|
+
b,
|
|
117
128
|
{
|
|
118
|
-
disable:
|
|
119
|
-
hasTransition:
|
|
120
|
-
isLargeVariation:
|
|
129
|
+
disable: c,
|
|
130
|
+
hasTransition: n,
|
|
131
|
+
isLargeVariation: h,
|
|
121
132
|
baseClassName: s,
|
|
122
|
-
children: /* @__PURE__ */
|
|
133
|
+
children: /* @__PURE__ */ o("div", { className: "radix-accordion-content", children: d })
|
|
123
134
|
}
|
|
124
135
|
)
|
|
125
136
|
]
|
|
@@ -127,7 +138,7 @@ const j = ({
|
|
|
127
138
|
);
|
|
128
139
|
}
|
|
129
140
|
);
|
|
130
|
-
|
|
141
|
+
C.displayName = "AccordionItem";
|
|
131
142
|
export {
|
|
132
|
-
|
|
143
|
+
C as default
|
|
133
144
|
};
|
|
@@ -17,6 +17,14 @@ export interface AccordionHeaderType {
|
|
|
17
17
|
* Unique id for icon component testing
|
|
18
18
|
*/
|
|
19
19
|
id?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Callback function that is called when the header is opened.
|
|
22
|
+
*/
|
|
23
|
+
onOpen?: () => void;
|
|
24
|
+
/**
|
|
25
|
+
* Callback function that is called when the header is closed.
|
|
26
|
+
*/
|
|
27
|
+
onClose?: () => void;
|
|
20
28
|
}
|
|
21
29
|
export interface AccordionContentType {
|
|
22
30
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as t, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import c, { useEffect as V } from "react";
|
|
3
3
|
import { getCommonProps as j, px as D, encodeURLSearchParams as I } from "../../utils/index.js";
|
|
4
4
|
import _ from "../../node_modules/classnames/index.js";
|
|
5
5
|
import H from "../Input/Input.js";
|
|
@@ -13,28 +13,28 @@ import { SearchButton as q } from "./SearchButton.js";
|
|
|
13
13
|
import z from "../../node_modules/react-transition-group/esm/CSSTransition.js";
|
|
14
14
|
const ne = ({
|
|
15
15
|
onSearch: S,
|
|
16
|
-
onCancel:
|
|
16
|
+
onCancel: i,
|
|
17
17
|
searchResults: R = [],
|
|
18
|
-
state:
|
|
18
|
+
state: l = "idle",
|
|
19
19
|
defaultValue: E = "",
|
|
20
20
|
className: b,
|
|
21
21
|
placeholder: w = "",
|
|
22
|
-
searchButtonText:
|
|
22
|
+
searchButtonText: d = "Search",
|
|
23
23
|
loadingText: C = "Search In Progress...",
|
|
24
|
-
invalidText:
|
|
24
|
+
invalidText: k = "Invalid search",
|
|
25
25
|
getAllResultsText: P = (r) => `View all results for ${r}`,
|
|
26
26
|
getAllResultsLink: v = (r) => `/Search?Search=${r}`,
|
|
27
27
|
...x
|
|
28
28
|
}) => {
|
|
29
29
|
var N;
|
|
30
|
-
const { className: r, "data-testid":
|
|
30
|
+
const { className: r, "data-testid": m, ...L } = j(x, "Search"), p = c.useContext(U), f = c.useRef(null), h = c.useRef(null), g = c.useRef(null), a = p.isSearchExpanded, s = (N = f.current) == null ? void 0 : N.value, T = S ? (e) => {
|
|
31
31
|
S(e.target.value);
|
|
32
32
|
} : void 0;
|
|
33
|
-
M(
|
|
34
|
-
|
|
33
|
+
M(g, (e) => {
|
|
34
|
+
i == null || i(), n(!1), e.stopPropagation();
|
|
35
35
|
});
|
|
36
|
-
const
|
|
37
|
-
var
|
|
36
|
+
const $ = (e) => {
|
|
37
|
+
var o;
|
|
38
38
|
if (e.stopPropagation(), e.key === "Enter") {
|
|
39
39
|
if (e.preventDefault(), s && s.length > 2) {
|
|
40
40
|
const y = I(v(s));
|
|
@@ -42,113 +42,124 @@ const ne = ({
|
|
|
42
42
|
}
|
|
43
43
|
e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.click();
|
|
44
44
|
}
|
|
45
|
-
e.key === "Escape" && ((
|
|
45
|
+
e.key === "Escape" && ((o = h.current) == null || o.reset(), p.setIsSearchExpanded(!1));
|
|
46
46
|
};
|
|
47
47
|
V(() => {
|
|
48
48
|
var e;
|
|
49
|
-
if (
|
|
50
|
-
(e =
|
|
49
|
+
if (a) {
|
|
50
|
+
(e = f.current) == null || e.focus();
|
|
51
51
|
return;
|
|
52
52
|
}
|
|
53
|
-
}, [
|
|
54
|
-
const
|
|
55
|
-
var
|
|
56
|
-
(
|
|
53
|
+
}, [a]);
|
|
54
|
+
const n = (e) => {
|
|
55
|
+
var o;
|
|
56
|
+
(o = h.current) == null || o.reset(), p.setIsSearchExpanded(e);
|
|
57
57
|
};
|
|
58
|
-
return /* @__PURE__ */
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
"
|
|
58
|
+
return /* @__PURE__ */ t("div", { className: `${r}__container`, children: /* @__PURE__ */ u(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
className: `${r}__container__inner`,
|
|
62
|
+
ref: g,
|
|
63
|
+
onClick: (e) => {
|
|
64
|
+
a || (n(!0), e.stopPropagation());
|
|
65
|
+
},
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ t(K, { variant: F.heading4, className: `${r}__container__inner__label`, children: d }),
|
|
68
|
+
/* @__PURE__ */ t(
|
|
69
|
+
"div",
|
|
70
70
|
{
|
|
71
|
-
|
|
72
|
-
className: _(`${r}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
children:
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
{
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
{
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
71
|
+
...L,
|
|
72
|
+
className: _(r, b, { [`${r}--active`]: a }),
|
|
73
|
+
"data-testid": m,
|
|
74
|
+
role: "search",
|
|
75
|
+
...x,
|
|
76
|
+
children: /* @__PURE__ */ u(
|
|
77
|
+
"form",
|
|
78
|
+
{
|
|
79
|
+
"data-testid": `${m}-form`,
|
|
80
|
+
className: _(`${r}__form`, {
|
|
81
|
+
[`${r}__form--active`]: a
|
|
82
|
+
}),
|
|
83
|
+
ref: h,
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ u(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
className: _(`${r}__content-wrapper`, {
|
|
89
|
+
[`${r}__content-wrapper--active`]: a
|
|
90
|
+
}),
|
|
91
|
+
role: "combobox",
|
|
92
|
+
"aria-haspopup": "listbox",
|
|
93
|
+
children: [
|
|
94
|
+
/* @__PURE__ */ t(
|
|
95
|
+
z,
|
|
96
|
+
{
|
|
97
|
+
in: a,
|
|
98
|
+
classNames: `${D}-input`,
|
|
99
|
+
addEndListener: () => {
|
|
100
|
+
},
|
|
101
|
+
children: /* @__PURE__ */ t(
|
|
102
|
+
H,
|
|
103
|
+
{
|
|
104
|
+
"aria-hidden": !a,
|
|
105
|
+
className: `${r}__input`,
|
|
106
|
+
id: "search-input",
|
|
107
|
+
hideLabel: !0,
|
|
108
|
+
labelText: d,
|
|
109
|
+
placeholder: a ? w : "",
|
|
110
|
+
type: "text",
|
|
111
|
+
defaultValue: E,
|
|
112
|
+
invalid: l === "invalid",
|
|
113
|
+
invalidText: k,
|
|
114
|
+
onKeyDown: $,
|
|
115
|
+
onChange: T,
|
|
116
|
+
ref: f
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
/* @__PURE__ */ t(
|
|
122
|
+
q,
|
|
95
123
|
{
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
defaultValue: E,
|
|
104
|
-
invalid: c === "invalid",
|
|
105
|
-
invalidText: L,
|
|
106
|
-
onKeyDown: g,
|
|
107
|
-
onChange: k,
|
|
108
|
-
ref: h
|
|
124
|
+
className: r,
|
|
125
|
+
searchButtonText: d,
|
|
126
|
+
state: l,
|
|
127
|
+
testId: m,
|
|
128
|
+
isSearchExpanded: a,
|
|
129
|
+
setIsSearchExpanded: n,
|
|
130
|
+
onCancel: i
|
|
109
131
|
}
|
|
110
132
|
)
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
className: r,
|
|
117
|
-
searchButtonText: l,
|
|
118
|
-
state: c,
|
|
119
|
-
testId: d,
|
|
120
|
-
isSearchExpanded: t,
|
|
121
|
-
setIsSearchExpanded: u,
|
|
122
|
-
onCancel: o
|
|
123
|
-
}
|
|
124
|
-
)
|
|
125
|
-
]
|
|
126
|
-
}
|
|
127
|
-
),
|
|
128
|
-
s && s.length > 2 ? /* @__PURE__ */ a(
|
|
129
|
-
A,
|
|
130
|
-
{
|
|
131
|
-
autoCompleteResults: R,
|
|
132
|
-
isLoading: c === "loading",
|
|
133
|
-
loadingText: C,
|
|
134
|
-
onKeyDown: g,
|
|
135
|
-
userInputValue: s,
|
|
136
|
-
closeSearch: u,
|
|
137
|
-
children: /* @__PURE__ */ a("li", { className: `${r}__result`, children: /* @__PURE__ */ a(
|
|
138
|
-
O,
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
s && s.length > 2 ? /* @__PURE__ */ t(
|
|
137
|
+
A,
|
|
139
138
|
{
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
autoCompleteResults: R,
|
|
140
|
+
isLoading: l === "loading",
|
|
141
|
+
loadingText: C,
|
|
142
|
+
onKeyDown: $,
|
|
143
|
+
userInputValue: s,
|
|
144
|
+
closeSearch: n,
|
|
145
|
+
children: /* @__PURE__ */ t("li", { className: `${r}__result`, children: /* @__PURE__ */ t(
|
|
146
|
+
O,
|
|
147
|
+
{
|
|
148
|
+
onClick: () => n(!1),
|
|
149
|
+
href: ((e) => I(v(e)))(s),
|
|
150
|
+
children: /* @__PURE__ */ t("p", { children: P(s) })
|
|
151
|
+
}
|
|
152
|
+
) }, "viewAllSearchResults")
|
|
142
153
|
}
|
|
143
|
-
)
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
154
|
+
) : null
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
)
|
|
147
158
|
}
|
|
148
159
|
)
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
) });
|
|
152
163
|
};
|
|
153
164
|
export {
|
|
154
165
|
ne as default
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __module as e } from "../../../../_virtual/
|
|
1
|
+
import { __module as e } from "../../../../_virtual/index5.js";
|
|
2
2
|
import { __require as o } from "./cjs/react-is.production.min.js";
|
|
3
3
|
import { __require as t } from "./cjs/react-is.development.js";
|
|
4
4
|
var r;
|
|
@@ -30,9 +30,14 @@ $lg: #{$px}-input--lg;
|
|
|
30
30
|
border: 1px solid $keyline-gray;
|
|
31
31
|
border-radius: 0.1875rem;
|
|
32
32
|
font-size: 0.8125rem;
|
|
33
|
+
font-variation-settings: 'wght' 600;
|
|
33
34
|
margin-bottom: 0.25rem;
|
|
34
35
|
padding: $padding-xsm;
|
|
35
36
|
|
|
37
|
+
&::placeholder {
|
|
38
|
+
font-variation-settings: 'wght' 400;
|
|
39
|
+
}
|
|
40
|
+
|
|
36
41
|
&:focus-within {
|
|
37
42
|
outline: 1px solid $pure-black;
|
|
38
43
|
}
|
|
@@ -98,12 +103,16 @@ $lg: #{$px}-input--lg;
|
|
|
98
103
|
.#{$px}-input__input,
|
|
99
104
|
.#{$px}-input__input::placeholder,
|
|
100
105
|
.#{$px}-input__validation {
|
|
101
|
-
color:
|
|
106
|
+
color: $pure-black;
|
|
102
107
|
}
|
|
103
108
|
|
|
104
109
|
.#{$px}-input__input {
|
|
105
110
|
border: 1px solid $error-red;
|
|
106
111
|
box-shadow: inset 0 0 3px 3px $error-pink;
|
|
112
|
+
|
|
113
|
+
&:focus-within {
|
|
114
|
+
outline: 1px solid $error-red;
|
|
115
|
+
}
|
|
107
116
|
}
|
|
108
117
|
}
|
|
109
118
|
|