@telia/teddy 0.2.14 → 0.2.16
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.
|
@@ -2,44 +2,44 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const clsx = require("clsx");
|
|
4
4
|
const styles = {
|
|
5
|
-
"date-picker": "_date-
|
|
6
|
-
"date-picker__container": "_date-
|
|
7
|
-
"date-picker__input": "_date-
|
|
8
|
-
"date-picker__input--touched": "_date-picker__input--
|
|
9
|
-
"date-picker__input-icon-container": "_date-picker__input-icon-
|
|
10
|
-
"date-picker__toggle-button": "_date-picker__toggle-
|
|
11
|
-
"date-picker__additional": "_date-
|
|
12
|
-
"date-picker__error": "_date-
|
|
13
|
-
"date-picker__toggle-icon": "_date-picker__toggle-
|
|
14
|
-
"date-picker__dialog-container": "_date-picker__dialog-
|
|
15
|
-
"date-picker__dialog": "_date-
|
|
16
|
-
"is-active": "_is-
|
|
17
|
-
"date-picker__dialog-content": "_date-picker__dialog-
|
|
18
|
-
"date-picker__table-scrollable": "_date-picker__table-
|
|
19
|
-
"date-picker__table-wrapper": "_date-picker__table-
|
|
20
|
-
"date-picker__table": "_date-
|
|
21
|
-
"date-picker__table-header": "_date-picker__table-
|
|
22
|
-
"date-picker__row": "_date-
|
|
23
|
-
"date-picker__cell": "_date-
|
|
24
|
-
"date-picker__year-button": "_date-picker__year-
|
|
25
|
-
"date-picker__year-chevron": "_date-picker__year-
|
|
26
|
-
"date-picker__year": "_date-
|
|
27
|
-
"is-today": "_is-
|
|
28
|
-
"is-focused": "_is-
|
|
29
|
-
"date-picker__day": "_date-
|
|
30
|
-
"is-month": "_is-
|
|
31
|
-
"date-picker__header": "_date-
|
|
32
|
-
"date-picker__nav": "_date-
|
|
33
|
-
"date-picker__nav-month": "_date-picker__nav-
|
|
34
|
-
"date-picker__prev": "_date-
|
|
35
|
-
"date-picker__next": "_date-
|
|
36
|
-
"date-picker__prev-icon": "_date-picker__prev-
|
|
37
|
-
"date-picker__next-icon": "_date-picker__next-
|
|
38
|
-
"date-picker__select": "_date-
|
|
39
|
-
"date-picker__select-label": "_date-picker__select-
|
|
40
|
-
"date-picker__select-icon": "_date-picker__select-
|
|
41
|
-
"date-picker__close_year": "_date-
|
|
42
|
-
"date-picker__vhidden": "_date-
|
|
5
|
+
"date-picker": "_date-picker_yt3fh_1",
|
|
6
|
+
"date-picker__container": "_date-picker__container_yt3fh_7",
|
|
7
|
+
"date-picker__input": "_date-picker__input_yt3fh_20",
|
|
8
|
+
"date-picker__input--touched": "_date-picker__input--touched_yt3fh_44",
|
|
9
|
+
"date-picker__input-icon-container": "_date-picker__input-icon-container_yt3fh_52",
|
|
10
|
+
"date-picker__toggle-button": "_date-picker__toggle-button_yt3fh_58",
|
|
11
|
+
"date-picker__additional": "_date-picker__additional_yt3fh_65",
|
|
12
|
+
"date-picker__error": "_date-picker__error_yt3fh_68",
|
|
13
|
+
"date-picker__toggle-icon": "_date-picker__toggle-icon_yt3fh_76",
|
|
14
|
+
"date-picker__dialog-container": "_date-picker__dialog-container_yt3fh_85",
|
|
15
|
+
"date-picker__dialog": "_date-picker__dialog_yt3fh_85",
|
|
16
|
+
"is-active": "_is-active_yt3fh_118",
|
|
17
|
+
"date-picker__dialog-content": "_date-picker__dialog-content_yt3fh_123",
|
|
18
|
+
"date-picker__table-scrollable": "_date-picker__table-scrollable_yt3fh_147",
|
|
19
|
+
"date-picker__table-wrapper": "_date-picker__table-wrapper_yt3fh_152",
|
|
20
|
+
"date-picker__table": "_date-picker__table_yt3fh_147",
|
|
21
|
+
"date-picker__table-header": "_date-picker__table-header_yt3fh_166",
|
|
22
|
+
"date-picker__row": "_date-picker__row_yt3fh_177",
|
|
23
|
+
"date-picker__cell": "_date-picker__cell_yt3fh_180",
|
|
24
|
+
"date-picker__year-button": "_date-picker__year-button_yt3fh_191",
|
|
25
|
+
"date-picker__year-chevron": "_date-picker__year-chevron_yt3fh_220",
|
|
26
|
+
"date-picker__year": "_date-picker__year_yt3fh_191",
|
|
27
|
+
"is-today": "_is-today_yt3fh_242",
|
|
28
|
+
"is-focused": "_is-focused_yt3fh_246",
|
|
29
|
+
"date-picker__day": "_date-picker__day_yt3fh_275",
|
|
30
|
+
"is-month": "_is-month_yt3fh_303",
|
|
31
|
+
"date-picker__header": "_date-picker__header_yt3fh_334",
|
|
32
|
+
"date-picker__nav": "_date-picker__nav_yt3fh_345",
|
|
33
|
+
"date-picker__nav-month": "_date-picker__nav-month_yt3fh_351",
|
|
34
|
+
"date-picker__prev": "_date-picker__prev_yt3fh_359",
|
|
35
|
+
"date-picker__next": "_date-picker__next_yt3fh_359",
|
|
36
|
+
"date-picker__prev-icon": "_date-picker__prev-icon_yt3fh_390",
|
|
37
|
+
"date-picker__next-icon": "_date-picker__next-icon_yt3fh_395",
|
|
38
|
+
"date-picker__select": "_date-picker__select_yt3fh_400",
|
|
39
|
+
"date-picker__select-label": "_date-picker__select-label_yt3fh_414",
|
|
40
|
+
"date-picker__select-icon": "_date-picker__select-icon_yt3fh_417",
|
|
41
|
+
"date-picker__close_year": "_date-picker__close_year_yt3fh_436",
|
|
42
|
+
"date-picker__vhidden": "_date-picker__vhidden_yt3fh_450"
|
|
43
43
|
};
|
|
44
44
|
const rootClassName = "date-picker";
|
|
45
45
|
const css = (suffix) => {
|
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
import clsx from "clsx";
|
|
2
2
|
const styles = {
|
|
3
|
-
"date-picker": "_date-
|
|
4
|
-
"date-picker__container": "_date-
|
|
5
|
-
"date-picker__input": "_date-
|
|
6
|
-
"date-picker__input--touched": "_date-picker__input--
|
|
7
|
-
"date-picker__input-icon-container": "_date-picker__input-icon-
|
|
8
|
-
"date-picker__toggle-button": "_date-picker__toggle-
|
|
9
|
-
"date-picker__additional": "_date-
|
|
10
|
-
"date-picker__error": "_date-
|
|
11
|
-
"date-picker__toggle-icon": "_date-picker__toggle-
|
|
12
|
-
"date-picker__dialog-container": "_date-picker__dialog-
|
|
13
|
-
"date-picker__dialog": "_date-
|
|
14
|
-
"is-active": "_is-
|
|
15
|
-
"date-picker__dialog-content": "_date-picker__dialog-
|
|
16
|
-
"date-picker__table-scrollable": "_date-picker__table-
|
|
17
|
-
"date-picker__table-wrapper": "_date-picker__table-
|
|
18
|
-
"date-picker__table": "_date-
|
|
19
|
-
"date-picker__table-header": "_date-picker__table-
|
|
20
|
-
"date-picker__row": "_date-
|
|
21
|
-
"date-picker__cell": "_date-
|
|
22
|
-
"date-picker__year-button": "_date-picker__year-
|
|
23
|
-
"date-picker__year-chevron": "_date-picker__year-
|
|
24
|
-
"date-picker__year": "_date-
|
|
25
|
-
"is-today": "_is-
|
|
26
|
-
"is-focused": "_is-
|
|
27
|
-
"date-picker__day": "_date-
|
|
28
|
-
"is-month": "_is-
|
|
29
|
-
"date-picker__header": "_date-
|
|
30
|
-
"date-picker__nav": "_date-
|
|
31
|
-
"date-picker__nav-month": "_date-picker__nav-
|
|
32
|
-
"date-picker__prev": "_date-
|
|
33
|
-
"date-picker__next": "_date-
|
|
34
|
-
"date-picker__prev-icon": "_date-picker__prev-
|
|
35
|
-
"date-picker__next-icon": "_date-picker__next-
|
|
36
|
-
"date-picker__select": "_date-
|
|
37
|
-
"date-picker__select-label": "_date-picker__select-
|
|
38
|
-
"date-picker__select-icon": "_date-picker__select-
|
|
39
|
-
"date-picker__close_year": "_date-
|
|
40
|
-
"date-picker__vhidden": "_date-
|
|
3
|
+
"date-picker": "_date-picker_yt3fh_1",
|
|
4
|
+
"date-picker__container": "_date-picker__container_yt3fh_7",
|
|
5
|
+
"date-picker__input": "_date-picker__input_yt3fh_20",
|
|
6
|
+
"date-picker__input--touched": "_date-picker__input--touched_yt3fh_44",
|
|
7
|
+
"date-picker__input-icon-container": "_date-picker__input-icon-container_yt3fh_52",
|
|
8
|
+
"date-picker__toggle-button": "_date-picker__toggle-button_yt3fh_58",
|
|
9
|
+
"date-picker__additional": "_date-picker__additional_yt3fh_65",
|
|
10
|
+
"date-picker__error": "_date-picker__error_yt3fh_68",
|
|
11
|
+
"date-picker__toggle-icon": "_date-picker__toggle-icon_yt3fh_76",
|
|
12
|
+
"date-picker__dialog-container": "_date-picker__dialog-container_yt3fh_85",
|
|
13
|
+
"date-picker__dialog": "_date-picker__dialog_yt3fh_85",
|
|
14
|
+
"is-active": "_is-active_yt3fh_118",
|
|
15
|
+
"date-picker__dialog-content": "_date-picker__dialog-content_yt3fh_123",
|
|
16
|
+
"date-picker__table-scrollable": "_date-picker__table-scrollable_yt3fh_147",
|
|
17
|
+
"date-picker__table-wrapper": "_date-picker__table-wrapper_yt3fh_152",
|
|
18
|
+
"date-picker__table": "_date-picker__table_yt3fh_147",
|
|
19
|
+
"date-picker__table-header": "_date-picker__table-header_yt3fh_166",
|
|
20
|
+
"date-picker__row": "_date-picker__row_yt3fh_177",
|
|
21
|
+
"date-picker__cell": "_date-picker__cell_yt3fh_180",
|
|
22
|
+
"date-picker__year-button": "_date-picker__year-button_yt3fh_191",
|
|
23
|
+
"date-picker__year-chevron": "_date-picker__year-chevron_yt3fh_220",
|
|
24
|
+
"date-picker__year": "_date-picker__year_yt3fh_191",
|
|
25
|
+
"is-today": "_is-today_yt3fh_242",
|
|
26
|
+
"is-focused": "_is-focused_yt3fh_246",
|
|
27
|
+
"date-picker__day": "_date-picker__day_yt3fh_275",
|
|
28
|
+
"is-month": "_is-month_yt3fh_303",
|
|
29
|
+
"date-picker__header": "_date-picker__header_yt3fh_334",
|
|
30
|
+
"date-picker__nav": "_date-picker__nav_yt3fh_345",
|
|
31
|
+
"date-picker__nav-month": "_date-picker__nav-month_yt3fh_351",
|
|
32
|
+
"date-picker__prev": "_date-picker__prev_yt3fh_359",
|
|
33
|
+
"date-picker__next": "_date-picker__next_yt3fh_359",
|
|
34
|
+
"date-picker__prev-icon": "_date-picker__prev-icon_yt3fh_390",
|
|
35
|
+
"date-picker__next-icon": "_date-picker__next-icon_yt3fh_395",
|
|
36
|
+
"date-picker__select": "_date-picker__select_yt3fh_400",
|
|
37
|
+
"date-picker__select-label": "_date-picker__select-label_yt3fh_414",
|
|
38
|
+
"date-picker__select-icon": "_date-picker__select-icon_yt3fh_417",
|
|
39
|
+
"date-picker__close_year": "_date-picker__close_year_yt3fh_436",
|
|
40
|
+
"date-picker__vhidden": "_date-picker__vhidden_yt3fh_450"
|
|
41
41
|
};
|
|
42
42
|
const rootClassName = "date-picker";
|
|
43
43
|
const css = (suffix) => {
|
|
@@ -4,12 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const clsx = require("clsx");
|
|
6
6
|
const components_meterBar_utils = require("./utils.cjs");
|
|
7
|
-
const slideInFromLeft = "
|
|
7
|
+
const slideInFromLeft = "_slideInFromLeft_1wiil_1";
|
|
8
8
|
const styles = {
|
|
9
|
-
"teddy-meter-bar": "_teddy-meter-
|
|
10
|
-
"teddy-meter-bar__indicator": "_teddy-meter-
|
|
9
|
+
"teddy-meter-bar": "_teddy-meter-bar_1wiil_1",
|
|
10
|
+
"teddy-meter-bar__indicator": "_teddy-meter-bar__indicator_1wiil_14",
|
|
11
11
|
slideInFromLeft,
|
|
12
|
-
"teddy-meter-bar--negative": "_teddy-meter-bar--
|
|
12
|
+
"teddy-meter-bar--negative": "_teddy-meter-bar--negative_1wiil_27"
|
|
13
13
|
};
|
|
14
14
|
const Indicator = React.forwardRef(
|
|
15
15
|
({ className, value: valueProp, getValueLabel = components_meterBar_utils.defaultGetValueLabel, color, max: propMax, ...props }, forwardRef) => {
|
|
@@ -17,16 +17,18 @@ const Indicator = React.forwardRef(
|
|
|
17
17
|
const maxInternal = propMax || (context == null ? void 0 : context.max);
|
|
18
18
|
const classes = clsx([styles[`${rootClassName}__indicator`]], className);
|
|
19
19
|
const max = components_meterBar_utils.isValidMaxNumber(maxInternal) ? maxInternal : components_meterBar_utils.DEFAULT_MAX;
|
|
20
|
+
const transformMaxValue = components_meterBar_utils.isValidMaxNumber(context == null ? void 0 : context.max) ? context.max : components_meterBar_utils.DEFAULT_MAX;
|
|
20
21
|
const value = components_meterBar_utils.isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
21
22
|
const valueLabel = components_meterBar_utils.isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
22
23
|
const progress = components_meterBar_utils.getProgress(value, max);
|
|
24
|
+
const transform = components_meterBar_utils.getProgress(value, transformMaxValue);
|
|
23
25
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
26
|
"div",
|
|
25
27
|
{
|
|
26
28
|
...props,
|
|
27
29
|
style: {
|
|
28
30
|
zIndex: 100 - Math.round(progress),
|
|
29
|
-
|
|
31
|
+
width: `${transform}%`,
|
|
30
32
|
backgroundColor: color,
|
|
31
33
|
...props.style
|
|
32
34
|
},
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import React__default from "react";
|
|
3
3
|
import clsx from "clsx";
|
|
4
|
-
import {
|
|
5
|
-
const slideInFromLeft = "
|
|
4
|
+
import { isValidMaxNumber, DEFAULT_MAX, isNumber, defaultGetValueLabel, isValidValueNumber, getProgress } from "./utils.js";
|
|
5
|
+
const slideInFromLeft = "_slideInFromLeft_1wiil_1";
|
|
6
6
|
const styles = {
|
|
7
|
-
"teddy-meter-bar": "_teddy-meter-
|
|
8
|
-
"teddy-meter-bar__indicator": "_teddy-meter-
|
|
7
|
+
"teddy-meter-bar": "_teddy-meter-bar_1wiil_1",
|
|
8
|
+
"teddy-meter-bar__indicator": "_teddy-meter-bar__indicator_1wiil_14",
|
|
9
9
|
slideInFromLeft,
|
|
10
|
-
"teddy-meter-bar--negative": "_teddy-meter-bar--
|
|
10
|
+
"teddy-meter-bar--negative": "_teddy-meter-bar--negative_1wiil_27"
|
|
11
11
|
};
|
|
12
12
|
const Indicator = React__default.forwardRef(
|
|
13
13
|
({ className, value: valueProp, getValueLabel = defaultGetValueLabel, color, max: propMax, ...props }, forwardRef) => {
|
|
@@ -15,16 +15,18 @@ const Indicator = React__default.forwardRef(
|
|
|
15
15
|
const maxInternal = propMax || (context == null ? void 0 : context.max);
|
|
16
16
|
const classes = clsx([styles[`${rootClassName}__indicator`]], className);
|
|
17
17
|
const max = isValidMaxNumber(maxInternal) ? maxInternal : DEFAULT_MAX;
|
|
18
|
+
const transformMaxValue = isValidMaxNumber(context == null ? void 0 : context.max) ? context.max : DEFAULT_MAX;
|
|
18
19
|
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
19
20
|
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
20
21
|
const progress = getProgress(value, max);
|
|
22
|
+
const transform = getProgress(value, transformMaxValue);
|
|
21
23
|
return /* @__PURE__ */ jsx(
|
|
22
24
|
"div",
|
|
23
25
|
{
|
|
24
26
|
...props,
|
|
25
27
|
style: {
|
|
26
28
|
zIndex: 100 - Math.round(progress),
|
|
27
|
-
|
|
29
|
+
width: `${transform}%`,
|
|
28
30
|
backgroundColor: color,
|
|
29
31
|
...props.style
|
|
30
32
|
},
|
package/dist/style.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@charset 'UTF-8';._teddy-meter-
|
|
1
|
+
@charset 'UTF-8';._teddy-meter-bar_1wiil_1 {
|
|
2
2
|
background: var(--teddy-color-transparent-black-100);
|
|
3
3
|
overflow: hidden;
|
|
4
4
|
border-radius: var(--teddy-border-radius-full);
|
|
@@ -6,33 +6,34 @@
|
|
|
6
6
|
position: relative;
|
|
7
7
|
/* create a stacking context */
|
|
8
8
|
z-index: 0;
|
|
9
|
+
display: flex;
|
|
9
10
|
/* Fix overflow clipping in Safari */
|
|
10
11
|
/* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
|
|
11
12
|
transform: translateZ(0);
|
|
12
13
|
}
|
|
13
|
-
._teddy-meter-
|
|
14
|
+
._teddy-meter-bar__indicator_1wiil_14 {
|
|
14
15
|
background-color: var(--teddy-color-purple-800);
|
|
15
16
|
width: 100%;
|
|
16
17
|
height: 100%;
|
|
17
|
-
position:
|
|
18
|
+
position: relative;
|
|
18
19
|
inset: 0;
|
|
19
20
|
}
|
|
20
21
|
@media (prefers-reduced-motion: no-preference) {
|
|
21
|
-
._teddy-meter-
|
|
22
|
-
animation:
|
|
23
|
-
transition: transform var(--teddy-motion-duration-500) cubic-bezier(0.65, 0, 0.35, 1);
|
|
22
|
+
._teddy-meter-bar__indicator_1wiil_14 {
|
|
23
|
+
animation: _slideInFromLeft_1wiil_1 1s cubic-bezier(0.65, 0, 0.35, 1);
|
|
24
|
+
transition: transform var(--teddy-motion-duration-500) cubic-bezier(0.65, 0, 0.35, 1), width var(--teddy-motion-duration-500) cubic-bezier(0.65, 0, 0.35, 1);
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
|
-
._teddy-meter-bar--
|
|
27
|
+
._teddy-meter-bar--negative_1wiil_27 {
|
|
27
28
|
background: var(--teddy-color-transparent-white-100);
|
|
28
29
|
}
|
|
29
|
-
._teddy-meter-bar--
|
|
30
|
+
._teddy-meter-bar--negative_1wiil_27 ._teddy-meter-bar__indicator_1wiil_14 {
|
|
30
31
|
background-color: var(--teddy-color-purple-300);
|
|
31
32
|
}
|
|
32
33
|
|
|
33
|
-
@keyframes
|
|
34
|
+
@keyframes _slideInFromLeft_1wiil_1 {
|
|
34
35
|
0% {
|
|
35
|
-
|
|
36
|
+
width: 0;
|
|
36
37
|
}
|
|
37
38
|
}._teddy-skeleton_11jot_1 {
|
|
38
39
|
background-image: none;
|
|
@@ -5245,18 +5246,18 @@
|
|
|
5245
5246
|
100% {
|
|
5246
5247
|
max-height: 0;
|
|
5247
5248
|
}
|
|
5248
|
-
}._date-
|
|
5249
|
+
}._date-picker_yt3fh_1 {
|
|
5249
5250
|
display: flex;
|
|
5250
5251
|
flex-direction: column;
|
|
5251
5252
|
position: relative;
|
|
5252
5253
|
width: 100%;
|
|
5253
5254
|
}
|
|
5254
|
-
._date-
|
|
5255
|
+
._date-picker__container_yt3fh_7 {
|
|
5255
5256
|
display: block;
|
|
5256
5257
|
width: 100%;
|
|
5257
5258
|
max-width: 480px;
|
|
5258
5259
|
}
|
|
5259
|
-
._date-
|
|
5260
|
+
._date-picker_yt3fh_1 > label {
|
|
5260
5261
|
font-family: var(--teddy-typography-family-default);
|
|
5261
5262
|
color: var(--teddy-color-transparent-black-800);
|
|
5262
5263
|
font-weight: 500;
|
|
@@ -5264,7 +5265,7 @@
|
|
|
5264
5265
|
order: 2;
|
|
5265
5266
|
margin-bottom: 4px;
|
|
5266
5267
|
}
|
|
5267
|
-
._date-
|
|
5268
|
+
._date-picker__input_yt3fh_20 {
|
|
5268
5269
|
font-family: var(--teddy-typography-family-default);
|
|
5269
5270
|
order: 2;
|
|
5270
5271
|
height: 2.875rem;
|
|
@@ -5279,34 +5280,40 @@
|
|
|
5279
5280
|
border-radius: 4px;
|
|
5280
5281
|
background: #fff;
|
|
5281
5282
|
}
|
|
5282
|
-
|
|
5283
|
+
@media screen and (max-width: 378px) {
|
|
5284
|
+
._date-picker__input_yt3fh_20 {
|
|
5285
|
+
width: 100%;
|
|
5286
|
+
max-width: 18rem;
|
|
5287
|
+
}
|
|
5288
|
+
}
|
|
5289
|
+
._date-picker__input_yt3fh_20:invalid {
|
|
5283
5290
|
border: 1px solid var(--teddy-color-red-500);
|
|
5284
5291
|
}
|
|
5285
|
-
._date-picker__input--
|
|
5292
|
+
._date-picker__input--touched_yt3fh_44:invalid {
|
|
5286
5293
|
border: 1px solid var(--teddy-color-red-500);
|
|
5287
5294
|
}
|
|
5288
|
-
._date-
|
|
5295
|
+
._date-picker__input_yt3fh_20:focus-visible {
|
|
5289
5296
|
border: 12px solid transparent;
|
|
5290
5297
|
box-shadow: 0 0 0 2x var(--teddy-color-blue-600); /* Outline-like box-shadow */
|
|
5291
5298
|
padding-left: calc(3em - 11px);
|
|
5292
5299
|
}
|
|
5293
|
-
._date-picker__input-icon-
|
|
5300
|
+
._date-picker__input-icon-container_yt3fh_52 {
|
|
5294
5301
|
position: absolute;
|
|
5295
5302
|
margin: 0;
|
|
5296
5303
|
margin-top: 2.2rem;
|
|
5297
5304
|
order: 3;
|
|
5298
5305
|
}
|
|
5299
|
-
._date-picker__toggle-
|
|
5306
|
+
._date-picker__toggle-button_yt3fh_58 {
|
|
5300
5307
|
background: transparent;
|
|
5301
5308
|
border: 0;
|
|
5302
5309
|
cursor: pointer;
|
|
5303
5310
|
transition: all 300ms ease;
|
|
5304
5311
|
color: var(--teddy-color-transparent-black-400);
|
|
5305
5312
|
}
|
|
5306
|
-
._date-
|
|
5313
|
+
._date-picker__additional_yt3fh_65 {
|
|
5307
5314
|
order: 5;
|
|
5308
5315
|
}
|
|
5309
|
-
._date-
|
|
5316
|
+
._date-picker__error_yt3fh_68 {
|
|
5310
5317
|
margin: 4px 0 0;
|
|
5311
5318
|
display: flex;
|
|
5312
5319
|
gap: 0.25rem;
|
|
@@ -5314,19 +5321,19 @@
|
|
|
5314
5321
|
order: 6 !important;
|
|
5315
5322
|
color: var(--teddy-color-red-500) !important;
|
|
5316
5323
|
}
|
|
5317
|
-
._date-picker__toggle-
|
|
5324
|
+
._date-picker__toggle-icon_yt3fh_76 {
|
|
5318
5325
|
display: inline-block;
|
|
5319
5326
|
margin-left: 4px;
|
|
5320
5327
|
height: 1.5rem;
|
|
5321
5328
|
width: 1.5rem;
|
|
5322
5329
|
}
|
|
5323
|
-
._date-picker__input--
|
|
5330
|
+
._date-picker__input--touched_yt3fh_44:invalid ~ ._date-picker__input-icon-container_yt3fh_52 {
|
|
5324
5331
|
color: #e4175c;
|
|
5325
5332
|
}
|
|
5326
|
-
._date-picker__dialog-
|
|
5333
|
+
._date-picker__dialog-container_yt3fh_85 {
|
|
5327
5334
|
order: 4;
|
|
5328
5335
|
}
|
|
5329
|
-
._date-
|
|
5336
|
+
._date-picker__dialog_yt3fh_85 {
|
|
5330
5337
|
z-index: 300;
|
|
5331
5338
|
background-color: rgba(0, 0, 0, 0.22);
|
|
5332
5339
|
bottom: 0;
|
|
@@ -5341,9 +5348,8 @@
|
|
|
5341
5348
|
visibility: hidden;
|
|
5342
5349
|
min-width: 288px;
|
|
5343
5350
|
width: 100%;
|
|
5344
|
-
max-width: 100%;
|
|
5345
|
-
will-change: transform, opacity, visibility;
|
|
5346
5351
|
max-width: 288px;
|
|
5352
|
+
will-change: transform, opacity, visibility;
|
|
5347
5353
|
background: none;
|
|
5348
5354
|
bottom: auto;
|
|
5349
5355
|
position: absolute;
|
|
@@ -5352,12 +5358,17 @@
|
|
|
5352
5358
|
transform: scale(0.96) translateZ(0) translateY(-2rem);
|
|
5353
5359
|
transform-origin: top right;
|
|
5354
5360
|
}
|
|
5355
|
-
|
|
5361
|
+
@media screen and (max-width: 378px) {
|
|
5362
|
+
._date-picker__dialog_yt3fh_85 {
|
|
5363
|
+
min-width: 224px;
|
|
5364
|
+
}
|
|
5365
|
+
}
|
|
5366
|
+
._date-picker__dialog_yt3fh_85._is-active_yt3fh_118 {
|
|
5356
5367
|
opacity: 1;
|
|
5357
5368
|
transform: scale(1.0001) translateZ(0) translateY(0);
|
|
5358
5369
|
visibility: visible;
|
|
5359
5370
|
}
|
|
5360
|
-
._date-picker__dialog-
|
|
5371
|
+
._date-picker__dialog-content_yt3fh_123 {
|
|
5361
5372
|
display: none;
|
|
5362
5373
|
background: white;
|
|
5363
5374
|
border-radius: 8px;
|
|
@@ -5377,21 +5388,21 @@
|
|
|
5377
5388
|
visibility: visible;
|
|
5378
5389
|
transition: transform 300 ease, opacity 300 ease, visibility 300 ease;
|
|
5379
5390
|
}
|
|
5380
|
-
._is-
|
|
5391
|
+
._is-active_yt3fh_118 ._date-picker__dialog-content_yt3fh_123 {
|
|
5381
5392
|
display: block;
|
|
5382
5393
|
transform: translateZ(0) translateY(0);
|
|
5383
5394
|
}
|
|
5384
|
-
._date-picker__table-
|
|
5395
|
+
._date-picker__table-scrollable_yt3fh_147 {
|
|
5385
5396
|
max-height: 200px;
|
|
5386
5397
|
overflow-x: hidden;
|
|
5387
5398
|
overflow-y: scroll;
|
|
5388
5399
|
}
|
|
5389
|
-
._date-picker__table-
|
|
5400
|
+
._date-picker__table-wrapper_yt3fh_152 {
|
|
5390
5401
|
padding: 0 8px;
|
|
5391
5402
|
padding-top: 16px;
|
|
5392
5403
|
padding-bottom: 12px;
|
|
5393
5404
|
}
|
|
5394
|
-
._date-
|
|
5405
|
+
._date-picker__table_yt3fh_147 {
|
|
5395
5406
|
border-collapse: collapse;
|
|
5396
5407
|
border-spacing: 0;
|
|
5397
5408
|
line-height: 1.25;
|
|
@@ -5400,7 +5411,7 @@
|
|
|
5400
5411
|
text-align: center;
|
|
5401
5412
|
width: 100%;
|
|
5402
5413
|
}
|
|
5403
|
-
._date-picker__table-
|
|
5414
|
+
._date-picker__table-header_yt3fh_166 {
|
|
5404
5415
|
font-family: var(--teddy-typography-family-default);
|
|
5405
5416
|
color: var(--teddy-color-transparent-black-600);
|
|
5406
5417
|
letter-spacing: dynamic-rem(0.1rem);
|
|
@@ -5411,15 +5422,21 @@
|
|
|
5411
5422
|
font-weight: 500;
|
|
5412
5423
|
letter-spacing: 1px;
|
|
5413
5424
|
}
|
|
5414
|
-
._date-
|
|
5425
|
+
._date-picker__row_yt3fh_177 {
|
|
5415
5426
|
line-height: 1.4;
|
|
5416
5427
|
}
|
|
5417
|
-
._date-
|
|
5428
|
+
._date-picker__cell_yt3fh_180 {
|
|
5418
5429
|
text-align: center;
|
|
5419
5430
|
width: 24px;
|
|
5420
5431
|
height: 24px;
|
|
5421
5432
|
}
|
|
5422
|
-
|
|
5433
|
+
@media screen and (max-width: 378px) {
|
|
5434
|
+
._date-picker__cell_yt3fh_180 {
|
|
5435
|
+
width: 22px;
|
|
5436
|
+
height: 22px;
|
|
5437
|
+
}
|
|
5438
|
+
}
|
|
5439
|
+
._date-picker__year-button_yt3fh_191 {
|
|
5423
5440
|
line-height: 1.25;
|
|
5424
5441
|
font-size: 1rem;
|
|
5425
5442
|
background: transparent;
|
|
@@ -5431,30 +5448,30 @@
|
|
|
5431
5448
|
height: 40px;
|
|
5432
5449
|
min-width: 40px;
|
|
5433
5450
|
}
|
|
5434
|
-
._date-picker__year-
|
|
5451
|
+
._date-picker__year-button_yt3fh_191 span {
|
|
5435
5452
|
color: var(--teddy-color-purple-700);
|
|
5436
5453
|
font-weight: bold;
|
|
5437
5454
|
font-family: var(--teddy-typography-family-default);
|
|
5438
5455
|
}
|
|
5439
|
-
._date-picker__year-
|
|
5456
|
+
._date-picker__year-button_yt3fh_191:hover span {
|
|
5440
5457
|
color: var(--teddy-color-purple-800);
|
|
5441
5458
|
}
|
|
5442
|
-
._date-picker__year-
|
|
5459
|
+
._date-picker__year-button_yt3fh_191:focus-visible {
|
|
5443
5460
|
outline: 0;
|
|
5444
5461
|
border: 0;
|
|
5445
5462
|
padding: 4px;
|
|
5446
5463
|
box-shadow: 0px 0px 0px 2px var(--teddy-color-blue-600);
|
|
5447
5464
|
}
|
|
5448
|
-
._date-picker__year-
|
|
5465
|
+
._date-picker__year-button_yt3fh_191:active span {
|
|
5449
5466
|
color: var(--teddy-color-purple-800);
|
|
5450
5467
|
}
|
|
5451
|
-
._date-picker__year-
|
|
5468
|
+
._date-picker__year-chevron_yt3fh_220 {
|
|
5452
5469
|
position: relative;
|
|
5453
5470
|
width: 24px;
|
|
5454
5471
|
top: 2px;
|
|
5455
5472
|
color: var(--teddy-color-purple-700);
|
|
5456
5473
|
}
|
|
5457
|
-
._date-
|
|
5474
|
+
._date-picker__year_yt3fh_191 {
|
|
5458
5475
|
color: var(--teddy-color-purple-700);
|
|
5459
5476
|
appearance: none;
|
|
5460
5477
|
background: transparent;
|
|
@@ -5470,40 +5487,40 @@
|
|
|
5470
5487
|
width: fit-content;
|
|
5471
5488
|
outline: 0;
|
|
5472
5489
|
}
|
|
5473
|
-
._date-
|
|
5490
|
+
._date-picker__year_yt3fh_191._is-today_yt3fh_242 {
|
|
5474
5491
|
border: 0.5px solid;
|
|
5475
5492
|
color: var(--teddy-color-purple-800);
|
|
5476
5493
|
}
|
|
5477
|
-
._date-
|
|
5494
|
+
._date-picker__year_yt3fh_191._is-focused_yt3fh_246 {
|
|
5478
5495
|
border: 0.75px solid;
|
|
5479
5496
|
color: var(--teddy-color-purple-700);
|
|
5480
5497
|
}
|
|
5481
|
-
._date-
|
|
5498
|
+
._date-picker__year_yt3fh_191:hover {
|
|
5482
5499
|
background: var(--teddy-color-purple-100);
|
|
5483
5500
|
color: var(--teddy-color-purple-900);
|
|
5484
5501
|
}
|
|
5485
|
-
._date-
|
|
5502
|
+
._date-picker__year_yt3fh_191:focus {
|
|
5486
5503
|
background: var(--teddy-color-purple-100);
|
|
5487
5504
|
color: var(--teddy-color-purple-900);
|
|
5488
5505
|
border: 0;
|
|
5489
5506
|
outline: 0;
|
|
5490
5507
|
}
|
|
5491
|
-
._date-
|
|
5508
|
+
._date-picker__year_yt3fh_191:active {
|
|
5492
5509
|
background: var(--teddy-color-purple-200);
|
|
5493
5510
|
color: var(--teddy-color-purple-900);
|
|
5494
5511
|
}
|
|
5495
|
-
._date-
|
|
5512
|
+
._date-picker__year_yt3fh_191[aria-pressed=true] {
|
|
5496
5513
|
background-color: var(--teddy-color-purple-800);
|
|
5497
5514
|
color: white;
|
|
5498
5515
|
box-shadow: none;
|
|
5499
5516
|
outline: 0;
|
|
5500
5517
|
}
|
|
5501
|
-
._date-
|
|
5518
|
+
._date-picker__year_yt3fh_191[aria-disabled=true] {
|
|
5502
5519
|
cursor: default;
|
|
5503
5520
|
background: transparent;
|
|
5504
5521
|
color: #dcdce1;
|
|
5505
5522
|
}
|
|
5506
|
-
._date-
|
|
5523
|
+
._date-picker__day_yt3fh_275 {
|
|
5507
5524
|
font-family: var(--teddy-typography-family-default);
|
|
5508
5525
|
color: var(--teddy-color-purple-700);
|
|
5509
5526
|
font-style: normal;
|
|
@@ -5524,58 +5541,70 @@
|
|
|
5524
5541
|
vertical-align: middle;
|
|
5525
5542
|
width: 2rem;
|
|
5526
5543
|
}
|
|
5527
|
-
|
|
5544
|
+
@media screen and (max-width: 378px) {
|
|
5545
|
+
._date-picker__day_yt3fh_275 {
|
|
5546
|
+
width: 22px;
|
|
5547
|
+
height: 22px;
|
|
5548
|
+
padding: 0;
|
|
5549
|
+
}
|
|
5550
|
+
}
|
|
5551
|
+
._date-picker__day_yt3fh_275:not(._is-month_yt3fh_303) {
|
|
5528
5552
|
box-shadow: none;
|
|
5529
5553
|
color: var(--teddy-color-transparent-black-400);
|
|
5530
5554
|
}
|
|
5531
|
-
._date-
|
|
5555
|
+
._date-picker__day_yt3fh_275._is-today_yt3fh_242 {
|
|
5532
5556
|
border: 0.5px solid;
|
|
5533
5557
|
color: var(--teddy-color-purple-800);
|
|
5534
5558
|
}
|
|
5535
|
-
._date-
|
|
5559
|
+
._date-picker__day_yt3fh_275:hover {
|
|
5536
5560
|
background: var(--teddy-color-purple-100);
|
|
5537
5561
|
color: var(--teddy-color-purple-900);
|
|
5538
5562
|
}
|
|
5539
|
-
._date-
|
|
5563
|
+
._date-picker__day_yt3fh_275:focus {
|
|
5540
5564
|
background: var(--teddy-color-purple-100);
|
|
5541
5565
|
color: var(--teddy-color-purple-900);
|
|
5542
5566
|
}
|
|
5543
|
-
._date-
|
|
5567
|
+
._date-picker__day_yt3fh_275:active {
|
|
5544
5568
|
background: var(--teddy-color-purple-200);
|
|
5545
5569
|
color: var(--teddy-color-purple-900);
|
|
5546
5570
|
}
|
|
5547
|
-
._date-
|
|
5571
|
+
._date-picker__day_yt3fh_275[aria-pressed=true] {
|
|
5548
5572
|
background-color: var(--teddy-color-purple-800);
|
|
5549
5573
|
color: white;
|
|
5550
5574
|
box-shadow: none;
|
|
5551
5575
|
outline: 0;
|
|
5552
5576
|
}
|
|
5553
|
-
._date-
|
|
5577
|
+
._date-picker__day_yt3fh_275[aria-disabled=true] {
|
|
5554
5578
|
cursor: default;
|
|
5555
5579
|
background: transparent;
|
|
5556
5580
|
color: #dcdce1;
|
|
5557
5581
|
}
|
|
5558
|
-
._date-
|
|
5582
|
+
._date-picker__header_yt3fh_334 {
|
|
5559
5583
|
align-items: center;
|
|
5560
5584
|
display: flex;
|
|
5561
5585
|
justify-content: space-between;
|
|
5562
5586
|
padding: 1rem 1rem 0;
|
|
5563
5587
|
}
|
|
5564
|
-
|
|
5588
|
+
@media screen and (max-width: 378px) {
|
|
5589
|
+
._date-picker__header_yt3fh_334 {
|
|
5590
|
+
padding: 0.75rem 0.75rem 0;
|
|
5591
|
+
}
|
|
5592
|
+
}
|
|
5593
|
+
._date-picker__nav_yt3fh_345 {
|
|
5565
5594
|
white-space: nowrap;
|
|
5566
5595
|
position: relative;
|
|
5567
5596
|
display: inline-flex;
|
|
5568
5597
|
width: 100%;
|
|
5569
5598
|
}
|
|
5570
|
-
._date-picker__nav-
|
|
5599
|
+
._date-picker__nav-month_yt3fh_351 {
|
|
5571
5600
|
white-space: nowrap;
|
|
5572
5601
|
display: inline-flex;
|
|
5573
5602
|
width: 160px;
|
|
5574
|
-
margin-left:
|
|
5603
|
+
margin-left: auto;
|
|
5575
5604
|
color: var(--teddy-color-purple-700);
|
|
5576
5605
|
font-family: var(--teddy-typography-family-default);
|
|
5577
5606
|
}
|
|
5578
|
-
._date-
|
|
5607
|
+
._date-picker__prev_yt3fh_359, ._date-picker__next_yt3fh_359 {
|
|
5579
5608
|
background: transparent;
|
|
5580
5609
|
border: 0;
|
|
5581
5610
|
font-family: var(--teddy-typography-family-default);
|
|
@@ -5593,34 +5622,34 @@
|
|
|
5593
5622
|
padding: 0;
|
|
5594
5623
|
outline: none;
|
|
5595
5624
|
}
|
|
5596
|
-
._date-
|
|
5625
|
+
._date-picker__prev_yt3fh_359:not([disabled]):hover, ._date-picker__next_yt3fh_359:not([disabled]):hover {
|
|
5597
5626
|
color: var(--teddy-color-purple-900);
|
|
5598
5627
|
}
|
|
5599
|
-
._date-
|
|
5628
|
+
._date-picker__prev_yt3fh_359:active, ._date-picker__prev_yt3fh_359:focus, ._date-picker__next_yt3fh_359:active, ._date-picker__next_yt3fh_359:focus {
|
|
5600
5629
|
color: var(--teddy-color-purple-500);
|
|
5601
5630
|
box-shadow: none;
|
|
5602
5631
|
border: solid 0.1px var(--teddy-color-purple-500);
|
|
5603
5632
|
border-radius: 100%;
|
|
5604
5633
|
}
|
|
5605
|
-
._date-
|
|
5634
|
+
._date-picker__prev_yt3fh_359:disabled, ._date-picker__next_yt3fh_359:disabled {
|
|
5606
5635
|
cursor: default;
|
|
5607
5636
|
opacity: 0.5;
|
|
5608
5637
|
}
|
|
5609
|
-
._date-picker__prev-
|
|
5638
|
+
._date-picker__prev-icon_yt3fh_390 {
|
|
5610
5639
|
margin: 0 auto;
|
|
5611
5640
|
width: 24px;
|
|
5612
5641
|
height: 16px;
|
|
5613
5642
|
}
|
|
5614
|
-
._date-picker__next-
|
|
5643
|
+
._date-picker__next-icon_yt3fh_395 {
|
|
5615
5644
|
margin: 0 auto;
|
|
5616
5645
|
width: 24px;
|
|
5617
5646
|
height: 16px;
|
|
5618
5647
|
}
|
|
5619
|
-
._date-
|
|
5648
|
+
._date-picker__select_yt3fh_400 {
|
|
5620
5649
|
position: relative;
|
|
5621
5650
|
display: inline-flex;
|
|
5622
5651
|
}
|
|
5623
|
-
._date-
|
|
5652
|
+
._date-picker__select_yt3fh_400 select {
|
|
5624
5653
|
cursor: pointer;
|
|
5625
5654
|
font-size: 1rem;
|
|
5626
5655
|
height: 100%;
|
|
@@ -5630,13 +5659,13 @@
|
|
|
5630
5659
|
top: 0;
|
|
5631
5660
|
width: 100%;
|
|
5632
5661
|
}
|
|
5633
|
-
._date-
|
|
5662
|
+
._date-picker__select_yt3fh_400 select:focus + ._date-picker__select-label_yt3fh_414 {
|
|
5634
5663
|
box-shadow: 0 0 0 0.2rem var(--teddy-color-purple-800);
|
|
5635
5664
|
}
|
|
5636
|
-
._date-picker__select-
|
|
5665
|
+
._date-picker__select-icon_yt3fh_417 {
|
|
5637
5666
|
margin: 0 0 0 4px;
|
|
5638
5667
|
}
|
|
5639
|
-
._date-picker__select-
|
|
5668
|
+
._date-picker__select-label_yt3fh_414 {
|
|
5640
5669
|
font-weight: bold;
|
|
5641
5670
|
color: var(--teddy-color-purple-700);
|
|
5642
5671
|
font-family: var(--teddy-typography-family-default);
|
|
@@ -5652,7 +5681,7 @@
|
|
|
5652
5681
|
display: inline-flex;
|
|
5653
5682
|
justify-content: center;
|
|
5654
5683
|
}
|
|
5655
|
-
._date-
|
|
5684
|
+
._date-picker__close_year_yt3fh_436 {
|
|
5656
5685
|
right: 0;
|
|
5657
5686
|
position: absolute;
|
|
5658
5687
|
height: 30px;
|
|
@@ -5666,7 +5695,7 @@
|
|
|
5666
5695
|
display: flex;
|
|
5667
5696
|
justify-content: center;
|
|
5668
5697
|
}
|
|
5669
|
-
._date-
|
|
5698
|
+
._date-picker__vhidden_yt3fh_450 {
|
|
5670
5699
|
border: 0;
|
|
5671
5700
|
clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
|
|
5672
5701
|
height: 0.0625rem;
|