@consumidor-positivo/aurora 0.2.3 → 0.3.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/Alert/index.es.js +1 -1
- package/dist/components/Calendar/index.es.js +2 -2
- package/dist/components/CalendarHeader/index.es.js +2 -2
- package/dist/components/Checkbox/index.es.js +1 -1
- package/dist/components/Datepicker/index.es.js +3 -3
- package/dist/components/Header/styles.css +1 -1
- package/dist/components/PortalHolder/index.es.js +1 -1
- package/dist/components/Segment/index.es.js +1 -1
- package/dist/components/SelectField/index.es.js +1 -1
- package/dist/components/SubHeader/SubHeader.test.d.ts +1 -0
- package/dist/components/SubHeader/index.d.ts +8 -0
- package/dist/components/SubHeader/index.es.js +57 -0
- package/dist/components/SubHeader/index.es.js.map +1 -0
- package/dist/components/SubHeader/styles.css +1 -0
- package/dist/components/Tabs/index.d.ts +2 -1
- package/dist/components/Tabs/index.es.js +82 -30
- package/dist/components/Tabs/index.es.js.map +1 -1
- package/dist/components/Tabs/styles.css +1 -1
- package/dist/components/Tag/index.es.js +1 -1
- package/dist/{index-BkeRYinJ.js → index-AOefAAO5.js} +2 -2
- package/dist/{index-BkeRYinJ.js.map → index-AOefAAO5.js.map} +1 -1
- package/dist/{index-BIEl3o0B.js → index-B0Ush_Ua.js} +2 -2
- package/dist/{index-BIEl3o0B.js.map → index-B0Ush_Ua.js.map} +1 -1
- package/dist/{index-DAA8IiTr.js → index-Chb8MRUv.js} +3 -3
- package/dist/{index-DAA8IiTr.js.map → index-Chb8MRUv.js.map} +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.es.js +3 -1
- package/dist/main.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,9 +8,9 @@ import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
|
8
8
|
import { IconClock } from "../icons/IconClock/index.es.js";
|
|
9
9
|
import { IconInfo } from "../icons/IconInfo/index.es.js";
|
|
10
10
|
import { IconX } from "../icons/IconX/index.es.js";
|
|
11
|
+
import { d as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, e as COLOR_WARNING_50, f as COLOR_INFO_50 } from "../../tokens-D_iASp38.js";
|
|
11
12
|
import { Conditional } from "../Conditional/index.es.js";
|
|
12
13
|
import { Text } from "../Text/index.es.js";
|
|
13
|
-
import { d as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, e as COLOR_WARNING_50, f as COLOR_INFO_50 } from "../../tokens-D_iASp38.js";
|
|
14
14
|
import './styles.css';const Alert = ({
|
|
15
15
|
showIcon = true,
|
|
16
16
|
status = "info",
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../index-BXRA68j0.js";
|
|
3
|
-
import "../../index-
|
|
3
|
+
import "../../index-B0Ush_Ua.js";
|
|
4
4
|
import "../Button/index.es.js";
|
|
5
5
|
import "../PortalHolder/index.es.js";
|
|
6
|
-
import { a } from "../../index-
|
|
6
|
+
import { a } from "../../index-Chb8MRUv.js";
|
|
7
7
|
export {
|
|
8
8
|
a as DatepickerCalendar
|
|
9
9
|
};
|
|
@@ -3,8 +3,8 @@ import "../../index-BXRA68j0.js";
|
|
|
3
3
|
import "../Icon/index.es.js";
|
|
4
4
|
import "../icons/IconChevronLeft/index.es.js";
|
|
5
5
|
import "../icons/IconChevronRight/index.es.js";
|
|
6
|
-
import "../../index-
|
|
7
|
-
import { C } from "../../index-
|
|
6
|
+
import "../../index-AOefAAO5.js";
|
|
7
|
+
import { C } from "../../index-B0Ush_Ua.js";
|
|
8
8
|
export {
|
|
9
9
|
C as CalendarHeader
|
|
10
10
|
};
|
|
@@ -3,9 +3,9 @@ import $dbSRa$react__default, { useState, useEffect } from "react";
|
|
|
3
3
|
import { c as classNames } from "../../index-BXRA68j0.js";
|
|
4
4
|
import "../Icon/index.es.js";
|
|
5
5
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
6
|
+
import { h as COLOR_NEUTRAL_00 } from "../../tokens-D_iASp38.js";
|
|
6
7
|
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
7
8
|
import { Conditional } from "../Conditional/index.es.js";
|
|
8
|
-
import { h as COLOR_NEUTRAL_00 } from "../../tokens-D_iASp38.js";
|
|
9
9
|
import { Text } from "../Text/index.es.js";
|
|
10
10
|
import './styles.css';const CheckboxField = ({
|
|
11
11
|
label,
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-D_iASp38.js";
|
|
2
3
|
import "../../index-BXRA68j0.js";
|
|
3
4
|
import "../Icon/index.es.js";
|
|
4
5
|
import { IconCalendar } from "../icons/IconCalendar/index.es.js";
|
|
5
6
|
import { InputField } from "../InputField/index.es.js";
|
|
6
|
-
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-
|
|
7
|
+
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-Chb8MRUv.js";
|
|
7
8
|
import { useRef, useState, useMemo, useEffect } from "react";
|
|
8
9
|
import { a as above } from "../../screen-DfYo7XQ_.js";
|
|
9
|
-
import { u as useOutsideClick } from "../../index-
|
|
10
|
-
import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-D_iASp38.js";
|
|
10
|
+
import { u as useOutsideClick } from "../../index-AOefAAO5.js";
|
|
11
11
|
import './styles.css';function useDatepicker({
|
|
12
12
|
value,
|
|
13
13
|
defaultValue = "empty",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-header{height:80px;border-bottom:1px solid #e2e4e9;background-color:#fff}.au-header--fixed{position:fixed;top:0;left:0;width:100%;z-index:5}.au-header--static{position:relative}.au-header__container{width:100%;max-width:1232px;margin:0 auto;padding:0 24px}@media (min-width: 1024px){.au-header__container{padding:0 16px}}.au-header__container{height:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.au-header__logo{display:flex;align-items:center}.au-header__logo .au-text{padding-left:16px;margin-left:16px;border-left:1px solid #e2e4e9}.au-header__logo--mobile{display:block}@media (min-width: 1024px){.au-header__logo--mobile{display:none}}.au-header__logo--desktop{display:none}@media (min-width: 1024px){.au-header__logo--desktop{display:block}}.au-header__link,.au-header__button{cursor:pointer}.au-header__badges{display:flex;align-items:center}.au-header__badges>*+*{padding-left:16px;margin-left:16px;position:relative}.au-header__badges>*+*:before{content:"";height:24px;width:1px;background-color:#e2e4e9;position:absolute;left:0;top:calc(50% - 12px)}.au-header__badges .au-logo img{width:100%}.au-header__badges--limited-width .au-logo{max-width:56px}.au-header__navigation{height:100%;display:flex}.au-header__navigation>*+*{margin-left:24px}.au-header__navbar{color:#16181d;display:none}@media (min-width: 1024px){.au-header__navbar{display:flex;align-items:center;gap:24px}}.au-header__navbar-item{position:relative}.au-header__navbar-item--is-dropdown{height:calc(100% + 8px);align-self:flex-start;display:flex;align-items:center;justify-content:center;padding-bottom:8px;gap:8px}.au-header__navbar-item--is-dropdown .au-icon{transition:transform .25s ease}.au-header__navbar-item--is-dropdown:hover .au-icon,.au-header__navbar-item--is-dropdown:focus .au-icon{transform:rotate(-180deg)}.au-header__navbar-item--is-dropdown:hover .au-header__dropdown,.au-header__navbar-item--is-dropdown:focus .au-header__dropdown{opacity:1;visibility:visible;transform:translateY(0)}.au-header__navbar-link{height:100%;cursor:pointer;text-decoration:none}.au-header__navbar-link--is-dropdown{position:relative;display:flex;align-items:center;justify-content:center;gap:8px}.au-header__navbar-link--is-active,.au-header__navbar-link:hover,.au-header__navbar-link:focus{font-weight:700;letter-spacing:-.6px}.au-header__navbar-link:hover,.au-header__navbar-link:focus{color:#16181d}.au-header__navbar-link--is-active{color:#0048db}.au-header__navbar-link--is-active:hover,.au-header__navbar-link--is-active:focus{color:#0048db}.au-header__dropdown{background-color:#fff;border-radius:16px;border:1px solid #e2e4e9;box-shadow:0 2px 8px #a9b1c514,0 4px 4px #0048db0a;max-width:230px;min-width:230px;position:absolute;overflow:hidden;z-index:2;top:100%;width:100%;left:-8px;opacity:0;visibility:hidden;transition:opacity .25s ease-in-out,transform .2s linear,visibility .25s ease-in-out;transform:translateY(-8px)}.au-header__dropdown-link{display:inline-block;padding:16px 24px;width:100%;display:flex;text-decoration:none;justify-content:space-between;cursor:pointer}.au-header__dropdown-link--is-active,.au-header__dropdown-link:hover,.au-header__dropdown-link:focus{font-weight:700;letter-spacing:-.6px}.au-header__dropdown-link--is-active{color:#0048db;background-color:#fafbff;border-top:1px solid #e2e4e9}.au-header__actions{display:flex;align-items:center;gap:8px;margin-block:16px}@media (min-width: 1024px){.au-header__actions--divider{border-left:1px solid #e2e4e9;padding-left:16px;margin-left:24px}}.au-header__profile{display:flex;align-items:center;gap:24px}.au-header__profile-notifications{cursor:pointer;position:relative}.au-header__profile-notifications-badge{position:absolute;top:-
|
|
1
|
+
.au-header{height:80px;border-bottom:1px solid #e2e4e9;background-color:#fff}.au-header--fixed{position:fixed;top:0;left:0;width:100%;z-index:5}.au-header--static{position:relative}.au-header__container{width:100%;max-width:1232px;margin:0 auto;padding:0 24px}@media (min-width: 1024px){.au-header__container{padding:0 16px}}.au-header__container{height:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.au-header__logo{display:flex;align-items:center}.au-header__logo .au-text{padding-left:16px;margin-left:16px;border-left:1px solid #e2e4e9}.au-header__logo--mobile{display:block}@media (min-width: 1024px){.au-header__logo--mobile{display:none}}.au-header__logo--desktop{display:none}@media (min-width: 1024px){.au-header__logo--desktop{display:block}}.au-header__link,.au-header__button{cursor:pointer}.au-header__badges{display:flex;align-items:center}.au-header__badges>*+*{padding-left:16px;margin-left:16px;position:relative}.au-header__badges>*+*:before{content:"";height:24px;width:1px;background-color:#e2e4e9;position:absolute;left:0;top:calc(50% - 12px)}.au-header__badges .au-logo img{width:100%}.au-header__badges--limited-width .au-logo{max-width:56px}.au-header__navigation{height:100%;display:flex}.au-header__navigation>*+*{margin-left:24px}.au-header__navbar{color:#16181d;display:none}@media (min-width: 1024px){.au-header__navbar{display:flex;align-items:center;gap:24px}}.au-header__navbar-item{position:relative}.au-header__navbar-item--is-dropdown{height:calc(100% + 8px);align-self:flex-start;display:flex;align-items:center;justify-content:center;padding-bottom:8px;gap:8px}.au-header__navbar-item--is-dropdown .au-icon{transition:transform .25s ease}.au-header__navbar-item--is-dropdown:hover .au-icon,.au-header__navbar-item--is-dropdown:focus .au-icon{transform:rotate(-180deg)}.au-header__navbar-item--is-dropdown:hover .au-header__dropdown,.au-header__navbar-item--is-dropdown:focus .au-header__dropdown{opacity:1;visibility:visible;transform:translateY(0)}.au-header__navbar-link{height:100%;cursor:pointer;text-decoration:none}.au-header__navbar-link--is-dropdown{position:relative;display:flex;align-items:center;justify-content:center;gap:8px}.au-header__navbar-link--is-active,.au-header__navbar-link:hover,.au-header__navbar-link:focus{font-weight:700;letter-spacing:-.6px}.au-header__navbar-link:hover,.au-header__navbar-link:focus{color:#16181d}.au-header__navbar-link--is-active{color:#0048db}.au-header__navbar-link--is-active:hover,.au-header__navbar-link--is-active:focus{color:#0048db}.au-header__dropdown{background-color:#fff;border-radius:16px;border:1px solid #e2e4e9;box-shadow:0 2px 8px #a9b1c514,0 4px 4px #0048db0a;max-width:230px;min-width:230px;position:absolute;overflow:hidden;z-index:2;top:100%;width:100%;left:-8px;opacity:0;visibility:hidden;transition:opacity .25s ease-in-out,transform .2s linear,visibility .25s ease-in-out;transform:translateY(-8px)}.au-header__dropdown-link{display:inline-block;padding:16px 24px;width:100%;display:flex;text-decoration:none;justify-content:space-between;cursor:pointer}.au-header__dropdown-link--is-active,.au-header__dropdown-link:hover,.au-header__dropdown-link:focus{font-weight:700;letter-spacing:-.6px}.au-header__dropdown-link--is-active{color:#0048db;background-color:#fafbff;border-top:1px solid #e2e4e9}.au-header__actions{display:flex;align-items:center;gap:8px;margin-block:16px}@media (min-width: 1024px){.au-header__actions--divider{border-left:1px solid #e2e4e9;padding-left:16px;margin-left:24px}}.au-header__profile{display:flex;align-items:center;gap:24px}.au-header__profile-notifications{cursor:pointer;position:relative}.au-header__profile-notifications-badge{position:absolute;top:-4px;right:-4px;background-color:#e52222;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;height:18px;min-width:18px;padding:2px;border:1px solid #ffffff}.au-header__profile-notifications-badge:empty{width:12px;height:12px;min-width:12px;padding:0 4px;top:0;right:0}.au-header__profile-menu{display:none;align-items:center;gap:8px;cursor:pointer}@media (min-width: 1024px){.au-header__profile-menu{display:flex}}.au-header__profile-menu-mobile{display:block;cursor:pointer}@media (min-width: 1024px){.au-header__profile-menu-mobile{display:none}}.au-header__profile-letters{display:flex;align-items:center;justify-content:center;border-radius:50%;width:40px;height:40px;background-color:#9abcff;font-weight:500;font-family:Lexend Deca,sans-serif;color:#16181d;font-size:16px;text-transform:uppercase}.au-header__hamburger{cursor:pointer}@media (min-width: 1024px){.au-header__hamburger{display:none}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { a as above } from "../../screen-DfYo7XQ_.js";
|
|
3
|
-
import { Portal } from "../Portal/index.es.js";
|
|
4
3
|
import { B as BREAKPOINT_MD } from "../../tokens-D_iASp38.js";
|
|
4
|
+
import { Portal } from "../Portal/index.es.js";
|
|
5
5
|
const PortalHolder = ({ withPortal, children }) => {
|
|
6
6
|
const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
|
|
7
7
|
if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });
|
|
@@ -4,7 +4,7 @@ import "../Icon/index.es.js";
|
|
|
4
4
|
import "../icons/IconChevronDown/index.es.js";
|
|
5
5
|
import "../icons/IconChevronLeft/index.es.js";
|
|
6
6
|
import "../icons/IconX/index.es.js";
|
|
7
|
-
import { S } from "../../index-
|
|
7
|
+
import { S } from "../../index-AOefAAO5.js";
|
|
8
8
|
export {
|
|
9
9
|
S as Segment
|
|
10
10
|
};
|
|
@@ -9,10 +9,10 @@ import { IconSlash } from "../icons/IconSlash/index.es.js";
|
|
|
9
9
|
import { Modal } from "../Modal/index.es.js";
|
|
10
10
|
import { Text } from "../Text/index.es.js";
|
|
11
11
|
import { Conditional } from "../Conditional/index.es.js";
|
|
12
|
+
import { c as COLOR_NEUTRAL_40 } from "../../tokens-D_iASp38.js";
|
|
12
13
|
import { i as isMobile } from "../../isMobile-RyKhTreE.js";
|
|
13
14
|
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
14
15
|
import { useState, useRef, useEffect } from "react";
|
|
15
|
-
import { c as COLOR_NEUTRAL_40 } from "../../tokens-D_iASp38.js";
|
|
16
16
|
import './styles.css';const useSelectField = (options, initialValue, onChange, onBlur, disabled, register, autocomplete = false, fullScreenOptions = false) => {
|
|
17
17
|
var _a;
|
|
18
18
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "../../index-BXRA68j0.js";
|
|
3
|
+
import "../Icon/index.es.js";
|
|
4
|
+
import { IconChevronLeft } from "../icons/IconChevronLeft/index.es.js";
|
|
5
|
+
import { IconHelpCircle } from "../icons/IconHelpCircle/index.es.js";
|
|
6
|
+
import { Container } from "../Container/index.es.js";
|
|
7
|
+
import { Text } from "../Text/index.es.js";
|
|
8
|
+
import { Button } from "../Button/index.es.js";
|
|
9
|
+
import './styles.css';const SubHeader = ({
|
|
10
|
+
title,
|
|
11
|
+
handleReturn,
|
|
12
|
+
handleHelpInfo
|
|
13
|
+
}) => {
|
|
14
|
+
return /* @__PURE__ */ jsx(
|
|
15
|
+
"div",
|
|
16
|
+
{
|
|
17
|
+
className: classNames("au-sub-header", {
|
|
18
|
+
"au-sub-header--with-help": handleHelpInfo
|
|
19
|
+
}),
|
|
20
|
+
children: /* @__PURE__ */ jsxs(Container, { customClass: "au-sub-header__container", children: [
|
|
21
|
+
/* @__PURE__ */ jsx(
|
|
22
|
+
Button,
|
|
23
|
+
{
|
|
24
|
+
className: "au-sub-header__button",
|
|
25
|
+
onClick: handleReturn,
|
|
26
|
+
type: "ghost",
|
|
27
|
+
children: /* @__PURE__ */ jsx(IconChevronLeft, {})
|
|
28
|
+
}
|
|
29
|
+
),
|
|
30
|
+
/* @__PURE__ */ jsx(
|
|
31
|
+
Text,
|
|
32
|
+
{
|
|
33
|
+
className: "au-sub-header__title",
|
|
34
|
+
variant: "heading-micro",
|
|
35
|
+
variantDesk: "heading-small",
|
|
36
|
+
weight: "bold",
|
|
37
|
+
as: "div",
|
|
38
|
+
children: title
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
handleHelpInfo && /* @__PURE__ */ jsx(
|
|
42
|
+
Button,
|
|
43
|
+
{
|
|
44
|
+
className: "au-sub-header__button",
|
|
45
|
+
onClick: handleHelpInfo,
|
|
46
|
+
type: "ghost",
|
|
47
|
+
children: /* @__PURE__ */ jsx(IconHelpCircle, {})
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
] })
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
export {
|
|
55
|
+
SubHeader
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/SubHeader/index.tsx"],"sourcesContent":["import { IconChevronLeft, IconHelpCircle } from '../icons/default'\n\nimport { Container } from '@components/Container'\nimport { Text } from '@components/Text'\nimport { Button } from '@components/Button'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype SubHeaderProps = {\n title: string\n handleReturn: () => void\n handleHelpInfo?: () => void\n}\n\nexport const SubHeader = ({\n title,\n handleReturn,\n handleHelpInfo,\n}: SubHeaderProps) => {\n return (\n <div\n className={classNames('au-sub-header', {\n 'au-sub-header--with-help': handleHelpInfo,\n })}>\n <Container customClass=\"au-sub-header__container\">\n <Button\n className=\"au-sub-header__button\"\n onClick={handleReturn}\n type=\"ghost\">\n <IconChevronLeft />\n </Button>\n <Text\n className=\"au-sub-header__title\"\n variant=\"heading-micro\"\n variantDesk=\"heading-small\"\n weight=\"bold\"\n as=\"div\">\n {title}\n </Text>\n {handleHelpInfo && (\n <Button\n className=\"au-sub-header__button\"\n onClick={handleHelpInfo}\n type=\"ghost\">\n <IconHelpCircle />\n </Button>\n )}\n </Container>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;AAgBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AAElB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB;AAAA,QACrC,4BAA4B;AAAA,MAAA,CAC7B;AAAA,MACD,UAAA,qBAAC,WAAU,EAAA,aAAY,4BACrB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,8BAAC,iBAAgB,EAAA;AAAA,UAAA;AAAA,QACnB;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAG;AAAA,YACF,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACC,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,8BAAC,gBAAe,EAAA;AAAA,UAAA;AAAA,QAClB;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.au-sub-header{padding-block:12px;background-color:#fff}@media (min-width: 600px){.au-sub-header{padding-block:22px}}.au-sub-header--with-help .au-sub-header__container{grid-template-columns:1fr auto 1fr}.au-sub-header__container{display:grid;gap:8px;align-items:center;grid-template-columns:auto 1fr}@media (max-width: 599px){.au-sub-header__container{padding-inline:8px}}@media (min-width: 600px){.au-sub-header__container{gap:16px;grid-template-columns:1fr auto 1fr}}.au-sub-header__title{grid-column:2;text-align:center}.au-sub-header__button{width:48px;height:48px}.au-sub-header__button:last-child{justify-self:end}.au-sub-header__button .au-icon{width:24px;height:24px}.au-sub-header__button .au-icon svg{width:24px;height:24px}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
export type TabsProps = {
|
|
3
3
|
tabs: TabItemProps[];
|
|
4
|
+
type?: 1 | 2;
|
|
4
5
|
areTabsHidden?: boolean;
|
|
5
6
|
initialTab?: string;
|
|
6
7
|
withLabel?: boolean;
|
|
@@ -13,5 +14,5 @@ export type TabItemProps = {
|
|
|
13
14
|
children?: React.ReactElement;
|
|
14
15
|
icon?: React.ReactNode;
|
|
15
16
|
};
|
|
16
|
-
export declare const Tabs: ({ tabs, initialTab, onClick, areTabsHidden, rightSlotChildren, withLabel, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const Tabs: ({ tabs, type, initialTab, onClick, areTabsHidden, rightSlotChildren, withLabel, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
18
|
export default Tabs;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useEffect } from "react";
|
|
3
|
-
import { W as When } from "../../react-if.esm-CoCMV6iA.js";
|
|
2
|
+
import { useState, useRef, useEffect } from "react";
|
|
3
|
+
import { W as When, S as Switch, C as Case } from "../../react-if.esm-CoCMV6iA.js";
|
|
4
4
|
import { Text } from "../Text/index.es.js";
|
|
5
5
|
import { Chip } from "../Chip/index.es.js";
|
|
6
|
+
import { c as classNames } from "../../index-BXRA68j0.js";
|
|
6
7
|
import './styles.css';const Tabs = ({
|
|
7
8
|
tabs,
|
|
9
|
+
type = 1,
|
|
8
10
|
initialTab,
|
|
9
11
|
onClick,
|
|
10
12
|
areTabsHidden,
|
|
@@ -14,9 +16,27 @@ import './styles.css';const Tabs = ({
|
|
|
14
16
|
const [isClicked, setIsClicked] = useState(false);
|
|
15
17
|
const [currButton, setCurrButton] = useState(initialTab ?? "");
|
|
16
18
|
const [activeTab, setActiveTab] = useState(initialTab);
|
|
19
|
+
const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
|
|
20
|
+
const tabsRef = useRef(null);
|
|
17
21
|
useEffect(() => {
|
|
18
22
|
setActiveTab(initialTab);
|
|
19
23
|
}, [initialTab]);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (activeTab && type === 2) {
|
|
26
|
+
const container = tabsRef.current;
|
|
27
|
+
if (container) {
|
|
28
|
+
const activeElement = container.querySelector(
|
|
29
|
+
".au-tabs__btns-option--active"
|
|
30
|
+
);
|
|
31
|
+
if (activeElement) {
|
|
32
|
+
setIndicatorStyle({
|
|
33
|
+
left: activeElement.offsetLeft,
|
|
34
|
+
width: activeElement.offsetWidth
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}, [activeTab, tabs, type]);
|
|
20
40
|
const handleClick = (item) => {
|
|
21
41
|
onClick && onClick(item.tab);
|
|
22
42
|
setCurrButton(item.tab);
|
|
@@ -24,34 +44,66 @@ import './styles.css';const Tabs = ({
|
|
|
24
44
|
setIsClicked(true);
|
|
25
45
|
};
|
|
26
46
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
27
|
-
/* @__PURE__ */ jsx(When, { condition: !areTabsHidden, children: /* @__PURE__ */ jsx(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
children:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
/* @__PURE__ */ jsx(When, { condition: !areTabsHidden, children: /* @__PURE__ */ jsx(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
className: classNames("au-tabs", {
|
|
51
|
+
[`au-tabs--type-${type}`]: !!type
|
|
52
|
+
}),
|
|
53
|
+
children: /* @__PURE__ */ jsxs("div", { className: "au-tabs__container", children: [
|
|
54
|
+
/* @__PURE__ */ jsxs("div", { className: "au-tabs__left-panel", children: [
|
|
55
|
+
/* @__PURE__ */ jsx(When, { condition: !!withLabel, children: /* @__PURE__ */ jsxs(
|
|
56
|
+
Text,
|
|
57
|
+
{
|
|
58
|
+
color: "secondary",
|
|
59
|
+
variant: "body-small",
|
|
60
|
+
className: "au-tabs__label",
|
|
61
|
+
children: [
|
|
62
|
+
"Filtrar por:",
|
|
63
|
+
" "
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
) }),
|
|
67
|
+
/* @__PURE__ */ jsxs("div", { className: "au-tabs__btns", ref: tabsRef, children: [
|
|
68
|
+
tabs.map((item) => {
|
|
69
|
+
return /* @__PURE__ */ jsxs(Switch, { children: [
|
|
70
|
+
/* @__PURE__ */ jsx(Case, { condition: type === 1, children: /* @__PURE__ */ jsx(
|
|
71
|
+
Chip,
|
|
72
|
+
{
|
|
73
|
+
label: item.title,
|
|
74
|
+
icon: item.icon,
|
|
75
|
+
isActive: isClicked && item.tab === currButton || activeTab === item.tab,
|
|
76
|
+
onClick: () => handleClick(item)
|
|
77
|
+
}
|
|
78
|
+
) }),
|
|
79
|
+
/* @__PURE__ */ jsx(Case, { condition: type === 2, children: /* @__PURE__ */ jsx(
|
|
80
|
+
"div",
|
|
81
|
+
{
|
|
82
|
+
className: classNames("au-tabs__btns-option", {
|
|
83
|
+
"au-tabs__btns-option--active": activeTab === item.tab
|
|
84
|
+
}),
|
|
85
|
+
onClick: () => handleClick(item),
|
|
86
|
+
children: item.title
|
|
87
|
+
}
|
|
88
|
+
) })
|
|
89
|
+
] });
|
|
90
|
+
}),
|
|
91
|
+
/* @__PURE__ */ jsx(When, { condition: type === 2, children: /* @__PURE__ */ jsx(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
className: "au-tabs__btns-indicator",
|
|
95
|
+
style: {
|
|
96
|
+
left: `${indicatorStyle.left}px`,
|
|
97
|
+
width: `${indicatorStyle.width}px`
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
) })
|
|
101
|
+
] })
|
|
102
|
+
] }),
|
|
103
|
+
/* @__PURE__ */ jsx(When, { condition: !!rightSlotChildren, children: rightSlotChildren })
|
|
104
|
+
] })
|
|
105
|
+
}
|
|
106
|
+
) }),
|
|
55
107
|
tabs.map(({ children, tab }) => {
|
|
56
108
|
return /* @__PURE__ */ jsx(
|
|
57
109
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { If } from '@components/misc'\nimport { Text } from '@components/Text'\nimport { Chip } from '@components/Chip'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n tabs: TabItemProps[]\n areTabsHidden?: boolean\n initialTab?: string\n withLabel?: boolean\n rightSlotChildren?: React.ReactNode\n onClick?: (value: string) => void\n}\n\nexport type TabItemProps = {\n tab: string\n title: string\n children?: React.ReactElement\n icon?: React.ReactNode\n}\n\nexport const Tabs = ({\n tabs,\n initialTab,\n onClick,\n areTabsHidden,\n rightSlotChildren,\n withLabel = false,\n}: TabsProps) => {\n const [isClicked, setIsClicked] = useState(false)\n const [currButton, setCurrButton] = useState(initialTab ?? '')\n const [activeTab, setActiveTab] = useState(initialTab)\n\n useEffect(() => {\n setActiveTab(initialTab)\n }, [initialTab])\n\n const handleClick = (item: TabItemProps) => {\n onClick && onClick(item.tab)\n setCurrButton(item.tab)\n setActiveTab(item.tab)\n setIsClicked(true)\n }\n\n return (\n <>\n <If condition={!areTabsHidden}>\n <div
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react'\nimport { If, Switch, Case } from '@components/misc'\nimport { Text } from '@components/Text'\nimport { Chip } from '@components/Chip'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n tabs: TabItemProps[]\n type?: 1 | 2\n areTabsHidden?: boolean\n initialTab?: string\n withLabel?: boolean\n rightSlotChildren?: React.ReactNode\n onClick?: (value: string) => void\n}\n\nexport type TabItemProps = {\n tab: string\n title: string\n children?: React.ReactElement\n icon?: React.ReactNode\n}\n\nexport const Tabs = ({\n tabs,\n type = 1,\n initialTab,\n onClick,\n areTabsHidden,\n rightSlotChildren,\n withLabel = false,\n}: TabsProps) => {\n const [isClicked, setIsClicked] = useState(false)\n const [currButton, setCurrButton] = useState(initialTab ?? '')\n const [activeTab, setActiveTab] = useState(initialTab)\n const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })\n\n const tabsRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n setActiveTab(initialTab)\n }, [initialTab])\n\n useEffect(() => {\n if (activeTab && type === 2) {\n const container = tabsRef.current\n if (container) {\n const activeElement = container.querySelector(\n '.au-tabs__btns-option--active',\n ) as HTMLElement\n\n if (activeElement) {\n setIndicatorStyle({\n left: activeElement.offsetLeft,\n width: activeElement.offsetWidth,\n })\n }\n }\n }\n }, [activeTab, tabs, type])\n\n const handleClick = (item: TabItemProps) => {\n onClick && onClick(item.tab)\n setCurrButton(item.tab)\n setActiveTab(item.tab)\n setIsClicked(true)\n }\n\n return (\n <>\n <If condition={!areTabsHidden}>\n <div\n className={classNames('au-tabs', {\n [`au-tabs--type-${type}`]: !!type,\n })}>\n <div className=\"au-tabs__container\">\n <div className=\"au-tabs__left-panel\">\n <If condition={!!withLabel}>\n <Text\n color=\"secondary\"\n variant=\"body-small\"\n className=\"au-tabs__label\">\n Filtrar por:{' '}\n </Text>\n </If>\n <div className=\"au-tabs__btns\" ref={tabsRef}>\n {tabs.map((item: TabItemProps) => {\n return (\n <Switch>\n <Case condition={type === 1}>\n <Chip\n label={item.title}\n icon={item.icon}\n isActive={\n (isClicked && item.tab === currButton) ||\n activeTab === item.tab\n }\n onClick={() => handleClick(item)}\n />\n </Case>\n <Case condition={type === 2}>\n <div\n className={classNames('au-tabs__btns-option', {\n 'au-tabs__btns-option--active':\n activeTab === item.tab,\n })}\n onClick={() => handleClick(item)}>\n {item.title}\n </div>\n </Case>\n </Switch>\n )\n })}\n <If condition={type === 2}>\n <div\n className=\"au-tabs__btns-indicator\"\n style={{\n left: `${indicatorStyle.left}px`,\n width: `${indicatorStyle.width}px`,\n }}\n />\n </If>\n </div>\n </div>\n <If condition={!!rightSlotChildren}>{rightSlotChildren}</If>\n </div>\n </div>\n </If>\n\n {tabs.map(({ children, tab }: TabItemProps) => {\n return (\n <div\n className={`au-tabs__children children-${tab}`}\n key={`au-tabs-${tab}`}>\n <If condition={currButton === tab || activeTab === tab}>\n {children}\n </If>\n </div>\n )\n })}\n </>\n )\n}\n\nexport default Tabs\n"],"names":["If"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-tabs__container{display:flex;flex-direction:column}@media (min-width: 600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__left-panel{display:flex;align-items:center;gap:8px}.au-tabs__label{display:none}@media (min-width: 600px){.au-tabs__label{display:unset}}.au-tabs__btns{display:flex;white-space:nowrap;overflow-x:scroll;margin-bottom:20px}.au-tabs__btns::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__btns{overflow:unset;margin-bottom:0}}.au-tabs__children{margin-top:24px}@media (min-width: 600px){.au-tabs__children{margin-top:32px}}
|
|
1
|
+
.au-tabs--type-2{border-bottom:1px solid #e2e4e9}.au-tabs__container{display:flex;flex-direction:column}@media (min-width: 600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__left-panel{display:flex;align-items:center;gap:8px}.au-tabs__label{display:none}@media (min-width: 600px){.au-tabs__label{display:unset}}.au-tabs__btns{display:flex;position:relative;white-space:nowrap;overflow-x:scroll;margin-bottom:20px}.au-tabs__btns::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__btns{overflow:unset;margin-bottom:0}}.au-tabs__btns-option{cursor:pointer;line-height:20px;color:#454a54;font-size:14px;font-family:Lexend Deca,sans-serif;padding:8px 16px;position:relative;transition:all .3s ease}.au-tabs__btns-option--active{color:#0048db;font-weight:700}.au-tabs__btns-indicator{position:absolute;bottom:-1px;left:0;height:2px;background-color:#0048db;transition:all .3s cubic-bezier(.4,0,.2,1)}.au-tabs__children{margin-top:24px}@media (min-width: 600px){.au-tabs__children{margin-top:32px}}
|
|
@@ -6,8 +6,8 @@ import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
|
|
|
6
6
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
7
7
|
import { IconInfo } from "../icons/IconInfo/index.es.js";
|
|
8
8
|
import { IconSlash } from "../icons/IconSlash/index.es.js";
|
|
9
|
-
import { Conditional } from "../Conditional/index.es.js";
|
|
10
9
|
import { C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, e as COLOR_WARNING_50, f as COLOR_INFO_50, g as COLOR_BRAND_CYAN_50, d as COLOR_NEUTRAL_70 } from "../../tokens-D_iASp38.js";
|
|
10
|
+
import { Conditional } from "../Conditional/index.es.js";
|
|
11
11
|
import './styles.css';const Tag = ({
|
|
12
12
|
status,
|
|
13
13
|
border = "square",
|
|
@@ -5,8 +5,8 @@ import { IconChevronDown } from "./components/icons/IconChevronDown/index.es.js"
|
|
|
5
5
|
import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
|
|
6
6
|
import { IconX } from "./components/icons/IconX/index.es.js";
|
|
7
7
|
import { useState, useRef, useEffect } from "react";
|
|
8
|
-
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
9
8
|
import { B as BREAKPOINT_MD } from "./tokens-D_iASp38.js";
|
|
9
|
+
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
10
10
|
import './components/index/styles3.css';function useOutsideClick({
|
|
11
11
|
rootEl,
|
|
12
12
|
breakpoint,
|
|
@@ -138,4 +138,4 @@ export {
|
|
|
138
138
|
Segment as S,
|
|
139
139
|
useOutsideClick as u
|
|
140
140
|
};
|
|
141
|
-
//# sourceMappingURL=index-
|
|
141
|
+
//# sourceMappingURL=index-AOefAAO5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-AOefAAO5.js","sources":["../lib/core/hooks/useOutsideClick.ts","../lib/components/form/Datepicker/Segment/hook.ts","../lib/components/form/Datepicker/Segment/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { above } from '../utils/screen'\n\ntype UseOutsideClickProps = {\n rootEl: React.RefObject<HTMLDivElement>\n breakpoint?: string\n onLoseFocusCB: () => void\n}\n\nexport function useOutsideClick({\n rootEl,\n breakpoint,\n onLoseFocusCB,\n}: UseOutsideClickProps) {\n const [setupListener, setSetupListener] = useState(false)\n\n function listenOutsideClick() {\n if (breakpoint && !above(breakpoint)) return\n document.addEventListener('mousedown', handleLoseFocus)\n setSetupListener(true)\n }\n\n function clearOutsideClickListenner() {\n if (setupListener) {\n document.removeEventListener('mousedown', handleLoseFocus)\n setSetupListener(false)\n }\n }\n\n function handleLoseFocus(ev: MouseEvent | FocusEvent) {\n if (!rootEl.current) return\n\n const clickedOutside = !rootEl.current.contains(ev.target as Node)\n\n if (clickedOutside) {\n onLoseFocusCB()\n clearOutsideClickListenner()\n }\n }\n\n return {\n listenOutsideClick,\n }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\n\nimport { SegmentItem } from '../types'\n\ntype UseSegmentProps = {\n options: SegmentItem[]\n currentValue: string | number\n onSelect: (option: SegmentItem) => void\n}\n\nexport function useSegment({\n options,\n currentValue,\n onSelect,\n}: UseSegmentProps) {\n const [isListOpen, setIsListOpen] = useState(false)\n const rootEl = useRef<HTMLDivElement>(null)\n const selectedItem = useRef<HTMLLIElement>(null)\n const currentItem = options.find((item) => item.value === currentValue)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: closeList,\n })\n\n useEffect(() => {\n if (selectedItem.current && isListOpen) {\n selectedItem.current.scrollIntoView({ block: 'center', inline: 'center' })\n }\n }, [isListOpen])\n\n function openList() {\n setIsListOpen(true)\n listenOutsideClick()\n }\n\n function closeList() {\n setIsListOpen(false)\n }\n\n function handleSelectItem(option: SegmentItem) {\n onSelect(option)\n setIsListOpen(false)\n }\n\n return {\n openList,\n closeList,\n isListOpen,\n rootEl,\n currentItem,\n handleSelectItem,\n selectedItem,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconChevronLeft, IconX } from '@components/icons'\n\nimport { useSegment } from './hook'\nimport { SegmentItem } from '../types'\nimport './styles.scss'\n\ntype SegmentProps = {\n mobileTitle: string\n options: SegmentItem[]\n onSelect: (option: SegmentItem) => void\n currentValue: string | number\n minValue?: Date\n maxValue?: Date\n}\n\nexport const Segment = ({\n currentValue,\n options,\n mobileTitle,\n onSelect,\n}: SegmentProps) => {\n const {\n rootEl,\n isListOpen,\n openList,\n closeList,\n currentItem,\n handleSelectItem,\n selectedItem,\n } = useSegment({\n options,\n currentValue,\n onSelect,\n })\n\n return (\n <div\n ref={rootEl}\n tabIndex={0}\n className={classNames('au-datepicker__segment', {\n 'au-datepicker__segment--open': isListOpen,\n })}>\n <div className=\"au-datepicker__segment-input\" onClick={openList}>\n {currentItem?.label}\n <IconChevronDown />\n </div>\n <div className=\"au-datepicker__segment-list-holder\">\n <div className=\"au-datepicker__segment-list-header\">\n <div onClick={closeList}>\n <IconChevronLeft />\n </div>\n <h4 className=\"au-datepicker__segment-title\">{mobileTitle}</h4>\n <div onClick={closeList}>\n <IconX />\n </div>\n </div>\n <ul className=\"au-datepicker__segment-list\">\n {options.map((option, idx) => {\n const isSelectedItem = option.value === currentValue\n return (\n <li\n key={`au-datepicker-segment-li-${option.value}-${idx}`}\n onClick={() => handleSelectItem(option)}\n ref={isSelectedItem ? selectedItem : null}\n className={classNames('au-datepicker__segment-list-item', {\n 'au-datepicker__segment-list-item--active': isSelectedItem,\n })}>\n {option.label}\n </li>\n )\n })}\n </ul>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import "./index-BXRA68j0.js";
|
|
|
3
3
|
import "./components/Icon/index.es.js";
|
|
4
4
|
import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
|
|
5
5
|
import { IconChevronRight } from "./components/icons/IconChevronRight/index.es.js";
|
|
6
|
-
import { S as Segment } from "./index-
|
|
6
|
+
import { S as Segment } from "./index-AOefAAO5.js";
|
|
7
7
|
import $dbSRa$react__default, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo, forwardRef } from "react";
|
|
8
8
|
import "react-dom";
|
|
9
9
|
createContext(null);
|
|
@@ -5686,4 +5686,4 @@ export {
|
|
|
5686
5686
|
$dfd62f934fc76fed$export$e11f8ba65d857bff as e,
|
|
5687
5687
|
$dfd62f934fc76fed$export$5d847498420df57b as f
|
|
5688
5688
|
};
|
|
5689
|
-
//# sourceMappingURL=index-
|
|
5689
|
+
//# sourceMappingURL=index-B0Ush_Ua.js.map
|