@consumidor-positivo/aurora 0.0.204 → 0.0.206

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.
Files changed (23) hide show
  1. package/dist/components/Alert/index.es.js +1 -1
  2. package/dist/components/Calendar/index.es.js +2 -2
  3. package/dist/components/CalendarHeader/index.es.js +2 -2
  4. package/dist/components/Checkbox/index.es.js +1 -1
  5. package/dist/components/Datepicker/index.es.js +3 -3
  6. package/dist/components/Modal/index.es.js +2 -1
  7. package/dist/components/Modal/index.es.js.map +1 -1
  8. package/dist/components/Modal/styles.css +1 -1
  9. package/dist/components/PortalHolder/index.es.js +1 -1
  10. package/dist/components/Segment/index.es.js +1 -1
  11. package/dist/components/SelectField/index.es.js +1 -1
  12. package/dist/components/Tag/index.d.ts +5 -1
  13. package/dist/components/Tag/index.es.js +18 -3
  14. package/dist/components/Tag/index.es.js.map +1 -1
  15. package/dist/components/Tag/styles.css +1 -1
  16. package/dist/{index-C8AM9yBn.js → index-BzVR1Tq6.js} +2 -2
  17. package/dist/{index-C8AM9yBn.js.map → index-BzVR1Tq6.js.map} +1 -1
  18. package/dist/{index-C1N6rwrZ.js → index-RHj6RFlT.js} +3 -3
  19. package/dist/{index-C1N6rwrZ.js.map → index-RHj6RFlT.js.map} +1 -1
  20. package/dist/{index-CL0DrUGQ.js → index-uWXGnhjd.js} +2 -2
  21. package/dist/{index-CL0DrUGQ.js.map → index-uWXGnhjd.js.map} +1 -1
  22. package/dist/main.es.js +1 -1
  23. package/package.json +1 -1
package/dist/components/Alert/index.es.js CHANGED
@@ -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",
package/dist/components/Calendar/index.es.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import "react/jsx-runtime";
2
2
  import "../../index-CweZ_OcN.js";
3
- import "../../index-C8AM9yBn.js";
3
+ import "../../index-BzVR1Tq6.js";
4
4
  import "../Button/index.es.js";
5
5
  import "../PortalHolder/index.es.js";
6
- import { a } from "../../index-C1N6rwrZ.js";
6
+ import { a } from "../../index-RHj6RFlT.js";
7
7
  export {
8
8
  a as DatepickerCalendar
9
9
  };
package/dist/components/CalendarHeader/index.es.js CHANGED
@@ -3,8 +3,8 @@ import "../../index-CweZ_OcN.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-CL0DrUGQ.js";
7
- import { C } from "../../index-C8AM9yBn.js";
6
+ import "../../index-uWXGnhjd.js";
7
+ import { C } from "../../index-BzVR1Tq6.js";
8
8
  export {
9
9
  C as CalendarHeader
10
10
  };
package/dist/components/Checkbox/index.es.js CHANGED
@@ -3,9 +3,9 @@ import $dbSRa$react__default, { useState, useEffect } from "react";
3
3
  import { c as classNames } from "../../index-CweZ_OcN.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,
package/dist/components/Datepicker/index.es.js CHANGED
@@ -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-CweZ_OcN.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-C1N6rwrZ.js";
7
+ import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-RHj6RFlT.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-CL0DrUGQ.js";
10
- import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-D_iASp38.js";
10
+ import { u as useOutsideClick } from "../../index-uWXGnhjd.js";
11
11
  import './styles.css';function useDatepicker({
12
12
  value,
13
13
  defaultValue = "empty",
package/dist/components/Modal/index.es.js CHANGED
@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { c as classNames } from "../../index-CweZ_OcN.js";
3
3
  import "../Icon/index.es.js";
4
4
  import { IconX } from "../icons/IconX/index.es.js";
5
+ import { W as When } from "../../react-if.esm-CoCMV6iA.js";
5
6
  import './styles.css';const Modal = ({
6
7
  isOpen,
7
8
  onClose,
@@ -18,7 +19,7 @@ import './styles.css';const Modal = ({
18
19
  });
19
20
  return /* @__PURE__ */ jsx("div", { className: modalClasses, children: /* @__PURE__ */ jsxs("div", { className: "au-modal__container", children: [
20
21
  /* @__PURE__ */ jsxs("div", { className: "au-modal__header", children: [
21
- /* @__PURE__ */ jsx("div", { className: "au-modal__header-close", onClick: onClose, children: /* @__PURE__ */ jsx(IconX, {}) }),
22
+ /* @__PURE__ */ jsx(When, { condition: !!onClose, children: /* @__PURE__ */ jsx("div", { className: "au-modal__header-close", onClick: onClose, children: /* @__PURE__ */ jsx(IconX, {}) }) }),
22
23
  headerContent
23
24
  ] }),
24
25
  /* @__PURE__ */ jsx("div", { className: "au-modal__content", children: content })
package/dist/components/Modal/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Modal/index.tsx"],"sourcesContent":["import { IconX } from '@components/icons'\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype ModalLayout = 'default' | 'centralized'\n\ntype ModalProps = {\n isOpen: boolean\n onClose?: () => void\n headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[]\n content?: React.ReactNode | string | JSX.Element | JSX.Element[]\n layoutMobile?: ModalLayout\n layoutDesktop?: ModalLayout\n}\n\nexport const Modal = ({\n isOpen,\n onClose,\n headerContent,\n content,\n layoutMobile = 'default',\n layoutDesktop = 'default',\n}: ModalProps) => {\n if (!isOpen) return null\n\n const modalClasses = classNames('au-modal', {\n 'au-modal--is-open': isOpen,\n 'au-modal--mobile-centralized': layoutMobile === 'centralized',\n 'au-modal--desktop-centralized': layoutDesktop === 'centralized',\n })\n\n return (\n <div className={modalClasses}>\n <div className=\"au-modal__container\">\n <div className=\"au-modal__header\">\n <div className=\"au-modal__header-close\" onClick={onClose}>\n <IconX />\n </div>\n {headerContent}\n </div>\n <div className=\"au-modal__content\">{content}</div>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;AAgBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAClB,MAAkB;AACZ,MAAA,CAAC,OAAe,QAAA;AAEd,QAAA,eAAe,WAAW,YAAY;AAAA,IAC1C,qBAAqB;AAAA,IACrB,gCAAgC,iBAAiB;AAAA,IACjD,iCAAiC,kBAAkB;AAAA,EAAA,CACpD;AAED,6BACG,OAAI,EAAA,WAAW,cACd,UAAC,qBAAA,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,0BAAyB,SAAS,SAC/C,UAAA,oBAAC,SAAM,EACT,CAAA;AAAA,MACC;AAAA,IAAA,GACH;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,qBAAqB,UAAQ,SAAA;AAAA,EAAA,EAC9C,CAAA,EACF,CAAA;AAEJ;"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Modal/index.tsx"],"sourcesContent":["import { IconX } from '@components/icons'\nimport classNames from 'classnames'\nimport { If } from '../misc'\n\nimport './styles.scss'\n\ntype ModalLayout = 'default' | 'centralized'\n\ntype ModalProps = {\n isOpen: boolean\n onClose?: () => void\n headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[]\n content?: React.ReactNode | string | JSX.Element | JSX.Element[]\n layoutMobile?: ModalLayout\n layoutDesktop?: ModalLayout\n}\n\nexport const Modal = ({\n isOpen,\n onClose,\n headerContent,\n content,\n layoutMobile = 'default',\n layoutDesktop = 'default',\n}: ModalProps) => {\n if (!isOpen) return null\n\n const modalClasses = classNames('au-modal', {\n 'au-modal--is-open': isOpen,\n 'au-modal--mobile-centralized': layoutMobile === 'centralized',\n 'au-modal--desktop-centralized': layoutDesktop === 'centralized',\n })\n\n return (\n <div className={modalClasses}>\n <div className=\"au-modal__container\">\n <div className=\"au-modal__header\">\n <If condition={!!onClose}>\n <div className=\"au-modal__header-close\" onClick={onClose}>\n <IconX />\n </div>\n </If>\n {headerContent}\n </div>\n <div className=\"au-modal__content\">{content}</div>\n </div>\n </div>\n )\n}\n"],"names":["If"],"mappings":";;;;;AAiBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAClB,MAAkB;AACZ,MAAA,CAAC,OAAe,QAAA;AAEd,QAAA,eAAe,WAAW,YAAY;AAAA,IAC1C,qBAAqB;AAAA,IACrB,gCAAgC,iBAAiB;AAAA,IACjD,iCAAiC,kBAAkB;AAAA,EAAA,CACpD;AAED,6BACG,OAAI,EAAA,WAAW,cACd,UAAC,qBAAA,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,oBAACA,MAAG,EAAA,WAAW,CAAC,CAAC,SACjB,UAAC,oBAAA,OAAA,EAAI,WAAU,0BAAyB,SAAS,SAC/C,UAAC,oBAAA,OAAA,CAAA,CAAM,EACT,CAAA,GACA;AAAA,MACC;AAAA,IAAA,GACH;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,qBAAqB,UAAQ,SAAA;AAAA,EAAA,EAC9C,CAAA,EACF,CAAA;AAEJ;"}
package/dist/components/Modal/styles.css CHANGED
@@ -1 +1 @@
1
- .au-modal{height:100vh;width:100vw;position:fixed;top:0;left:0;bottom:0;right:0;background-color:#16181dcc;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s ease;z-index:5}@keyframes slideInY{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInX{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideCentralized{0%{transform:translate(-50%,calc(100% + 12px))}to{transform:translate(-50%,-50%)}}.au-modal--is-open{opacity:1;visibility:visible;pointer-events:all}.au-modal--is-open .au-modal__container{animation:slideInY .3s ease forwards}.au-modal--is-open.au-modal--mobile-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}@media (min-width: 600px){.au-modal--is-open.au-modal--desktop-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}.au-modal--is-open:not(.au-modal--desktop-centralized) .au-modal__container{animation:slideInX .3s ease forwards}}.au-modal__container{background-color:#fff;border-radius:16px 16px 0 0;padding:16px;width:100%;height:100%;max-height:90vh;position:fixed;z-index:6;bottom:0}.au-modal.au-modal--mobile-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:90%;max-width:500px;height:min-content;border-radius:16px;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.au-modal:not(.au-modal--desktop-centralized) .au-modal__container{border-radius:16px 0 0 16px;box-shadow:0 24px 56px #7686ad14,0 12px 12px #0048db0a;top:0;right:0;bottom:auto;left:auto;margin:0;height:100vh;height:100dvh;max-width:414px;max-height:100vh}.au-modal.au-modal--desktop-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;display:flex;max-width:500px;gap:16px;height:min-content;flex-direction:column;border-radius:16px}}.au-modal__header{position:relative}.au-modal__header-close{cursor:pointer;display:flex;justify-content:end;width:100%}.au-modal__content{height:calc(100% - 150px);overflow-y:auto}.au-modal__content::-webkit-scrollbar{width:16px}.au-modal__content::-webkit-scrollbar-track{background:#f4f7fb;border-radius:32px}.au-modal__content::-webkit-scrollbar-thumb{background:#0048db;border-radius:8px;border:4px solid #f4f7fb}.au-modal__content::-webkit-scrollbar-thumb:hover{background:#1737a4;transition:all .3s ease}
1
+ .au-modal{height:100vh;width:100vw;position:fixed;top:0;left:0;bottom:0;right:0;background-color:#16181dcc;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s ease;z-index:5}@keyframes slideInY{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInX{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideCentralized{0%{transform:translate(-50%,calc(100% + 12px))}to{transform:translate(-50%,-50%)}}.au-modal--is-open{opacity:1;visibility:visible;pointer-events:all}.au-modal--is-open .au-modal__container{animation:slideInY .3s ease forwards}.au-modal--is-open.au-modal--mobile-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}@media (min-width: 600px){.au-modal--is-open.au-modal--desktop-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}.au-modal--is-open:not(.au-modal--desktop-centralized) .au-modal__container{animation:slideInX .3s ease forwards}}.au-modal__container{background-color:#fff;border-radius:16px 16px 0 0;padding:16px;position:fixed;z-index:6;bottom:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;width:100%;max-height:90vh}.au-modal.au-modal--mobile-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:90%;max-width:500px;height:min-content;border-radius:16px;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.au-modal:not(.au-modal--desktop-centralized) .au-modal__container{border-radius:16px 0 0 16px;box-shadow:0 24px 56px #7686ad14,0 12px 12px #0048db0a;top:0;right:0;bottom:auto;left:auto;margin:0;height:100vh;height:100dvh;max-width:414px;max-height:100vh}.au-modal.au-modal--desktop-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;display:flex;max-width:500px;gap:16px;height:min-content;flex-direction:column;border-radius:16px}}.au-modal__header{position:relative}.au-modal__header-close{cursor:pointer;display:flex;justify-content:end;width:100%}.au-modal__content{height:calc(100% - 150px);overflow-y:auto;flex:1}.au-modal__content::-webkit-scrollbar{width:16px}.au-modal__content::-webkit-scrollbar-track{background:#f4f7fb;border-radius:32px}.au-modal__content::-webkit-scrollbar-thumb{background:#0048db;border-radius:8px;border:4px solid #f4f7fb}.au-modal__content::-webkit-scrollbar-thumb:hover{background:#1737a4;transition:all .3s ease}
package/dist/components/PortalHolder/index.es.js CHANGED
@@ -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 });
package/dist/components/Segment/index.es.js CHANGED
@@ -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-CL0DrUGQ.js";
7
+ import { S } from "../../index-uWXGnhjd.js";
8
8
  export {
9
9
  S as Segment
10
10
  };
package/dist/components/SelectField/index.es.js CHANGED
@@ -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);
package/dist/components/Tag/index.d.ts CHANGED
@@ -9,5 +9,9 @@ export type TagProps = {
9
9
  children?: React.ReactNode;
10
10
  customIcon?: string | JSX.Element;
11
11
  fullWidth?: boolean;
12
+ actionButton?: {
13
+ content?: string;
14
+ onClick?: () => void;
15
+ };
12
16
  };
13
- export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, fullWidth, }: TagProps) => import("react/jsx-runtime").JSX.Element;
17
+ export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, fullWidth, actionButton, }: TagProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Tag/index.es.js CHANGED
@@ -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",
@@ -17,7 +17,8 @@ import './styles.css';const Tag = ({
17
17
  customIcon,
18
18
  text,
19
19
  children,
20
- fullWidth
20
+ fullWidth,
21
+ actionButton
21
22
  }) => {
22
23
  const statusMap = {
23
24
  success: {
@@ -72,7 +73,21 @@ import './styles.css';const Tag = ({
72
73
  ) })
73
74
  }
74
75
  ),
75
- /* @__PURE__ */ jsx("p", { className: `au-tag__content-support-text`, children: supportText })
76
+ /* @__PURE__ */ jsx("p", { className: `au-tag__content-support-text`, children: supportText }),
77
+ /* @__PURE__ */ jsx(
78
+ Conditional,
79
+ {
80
+ condition: !!actionButton,
81
+ renderIf: /* @__PURE__ */ jsx(
82
+ "button",
83
+ {
84
+ className: "au-tag__action-btn",
85
+ onClick: actionButton == null ? void 0 : actionButton.onClick,
86
+ children: actionButton == null ? void 0 : actionButton.content
87
+ }
88
+ )
89
+ }
90
+ )
76
91
  ] }),
77
92
  children
78
93
  ] });
package/dist/components/Tag/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'\n border?: 'rounded' | 'square'\n type?: 'read-only' | 'badge'\n color?: 'primary' | 'secondary'\n size?: 'small' | 'medium' | 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string | JSX.Element\n fullWidth?: boolean\n}\n\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n fullWidth,\n}: TagProps) => {\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n [`au-tag--full-width`]: !!fullWidth,\n })\n\n const isBadgeTag = type === 'badge'\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\">\n <Conditional\n condition={!!customIcon}\n renderIf={customIcon}\n renderElse={statusMap[status].icon}\n />\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AACd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAiB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACpD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAkB,EAAA,UAAU,iBAAkB,CAAA;AAAA,IACvD;AAAA,IACA,MAAM,EAAE,QAAQ,QAAQ,MAAO,oBAAA,UAAA,EAAS,UAAU,cAAA,CAAe,EAAG;AAAA,IACpE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAS,EAAA,UAAU,oBAAqB,CAAA;AAAA,IACjD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EAAA;AAGI,QAAA,aAAa,WAAW,UAAU;AAAA,IACtC,CAAC,WAAW,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAC3D,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,kBAAkB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,iBAAiB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,IAC9B,CAAC,oBAAoB,GAAG,CAAC,CAAC;AAAA,EAAA,CAC3B;AAED,QAAM,aAAa,SAAS;AAC5B,QAAM,cAAc,aAAa,KAAK,YAAA,IAAgB;AAGpD,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAI,EAAA,WAAU,wBACb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,GAElC;AAAA,QAAA;AAAA,MAEJ;AAAA,MACC,oBAAA,KAAA,EAAE,WAAW,gCAAiC,UAAY,aAAA;AAAA,IAAA,GAC7D;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'\n border?: 'rounded' | 'square'\n type?: 'read-only' | 'badge'\n color?: 'primary' | 'secondary'\n size?: 'small' | 'medium' | 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string | JSX.Element\n fullWidth?: boolean\n actionButton?: { content?: string; onClick?: () => void }\n}\n\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n fullWidth,\n actionButton,\n}: TagProps) => {\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n [`au-tag--full-width`]: !!fullWidth,\n })\n\n const isBadgeTag = type === 'badge'\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\">\n <Conditional\n condition={!!customIcon}\n renderIf={customIcon}\n renderElse={statusMap[status].icon}\n />\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-tag__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAgCO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AACd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAiB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACpD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAkB,EAAA,UAAU,iBAAkB,CAAA;AAAA,IACvD;AAAA,IACA,MAAM,EAAE,QAAQ,QAAQ,MAAO,oBAAA,UAAA,EAAS,UAAU,cAAA,CAAe,EAAG;AAAA,IACpE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAS,EAAA,UAAU,oBAAqB,CAAA;AAAA,IACjD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EAAA;AAGI,QAAA,aAAa,WAAW,UAAU;AAAA,IACtC,CAAC,WAAW,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAC3D,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,kBAAkB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,iBAAiB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,IAC9B,CAAC,oBAAoB,GAAG,CAAC,CAAC;AAAA,EAAA,CAC3B;AAED,QAAM,aAAa,SAAS;AAC5B,QAAM,cAAc,aAAa,KAAK,YAAA,IAAgB;AAGpD,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAI,EAAA,WAAU,wBACb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,GAElC;AAAA,QAAA;AAAA,MAEJ;AAAA,MACC,oBAAA,KAAA,EAAE,WAAW,gCAAiC,UAAY,aAAA;AAAA,MAE3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC,CAAC;AAAA,UACb,UACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,6CAAc;AAAA,cACtB,UAAc,6CAAA;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,GACF;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
package/dist/components/Tag/styles.css CHANGED
@@ -1 +1 @@
1
- .au-tag{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;padding:8px;width:fit-content}.au-tag__content{display:flex;gap:8px;justify-content:center;align-items:center}.au-tag__content-icon .au-icon,.au-tag__content-icon .au-icon>svg{width:16px;height:16px}.au-tag__content-support-text{color:#16181d;font-size:12px;font-weight:600;line-height:18px}.au-tag--size-small{height:26px;padding:4px 8px}.au-tag--size-medium{height:36px}.au-tag--size-large{height:38px}.au-tag--size-large-support-text{font-size:14px;line-height:22px}.au-tag--border-rounded{border-radius:500px}.au-tag--color-primary.au-tag--info{background-color:#eee6ff}.au-tag--color-primary.au-tag--success{background-color:#e5fff0}.au-tag--color-primary.au-tag--error{background-color:#ffe5e5}.au-tag--color-primary.au-tag--warning{background-color:#fff0e6}.au-tag--color-primary.au-tag--support{background-color:#f1fcff}.au-tag--color-primary.au-tag--neutral{background-color:#e2e4e9}.au-tag--color-secondary.au-tag--info{background-color:#d4bfff}.au-tag--color-secondary.au-tag--success{background-color:#a1e5bd}.au-tag--color-secondary.au-tag--error{background-color:#ffbfbf}.au-tag--color-secondary.au-tag--warning{background-color:#ffdabf}.au-tag--color-secondary.au-tag--support{background-color:#ccf3ff}.au-tag--color-secondary.au-tag--neutral{background-color:#c4c9d4}.au-tag--type-badge.au-tag--info p{color:#46008c}.au-tag--type-badge.au-tag--error p{color:#731111}.au-tag--type-badge.au-tag--success p{color:#08331a}.au-tag--type-badge.au-tag--warning p{color:#803500}.au-tag--type-badge.au-tag--support p{color:#004155}.au-tag--type-badge.au-tag--size-large{height:36px;font-size:12px;line-height:18px}.au-tag--full-width{width:100%}
1
+ .au-tag{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;padding:8px;width:fit-content}.au-tag__content{display:flex;gap:8px;justify-content:center;align-items:center}.au-tag__content-icon .au-icon,.au-tag__content-icon .au-icon>svg{width:16px;height:16px}.au-tag__content-support-text{color:#16181d;font-size:12px;font-weight:600;line-height:18px}.au-tag--size-small{height:26px;padding:4px 8px}.au-tag--size-medium{height:36px}.au-tag--size-large{height:38px}.au-tag--size-large-support-text{font-size:14px;line-height:22px}.au-tag--border-rounded{border-radius:500px}.au-tag--color-primary.au-tag--info{background-color:#eee6ff}.au-tag--color-primary.au-tag--success{background-color:#e5fff0}.au-tag--color-primary.au-tag--error{background-color:#ffe5e5}.au-tag--color-primary.au-tag--warning{background-color:#fff0e6}.au-tag--color-primary.au-tag--support{background-color:#f1fcff}.au-tag--color-primary.au-tag--neutral{background-color:#e2e4e9}.au-tag--color-secondary.au-tag--info{background-color:#d4bfff}.au-tag--color-secondary.au-tag--success{background-color:#a1e5bd}.au-tag--color-secondary.au-tag--error{background-color:#ffbfbf}.au-tag--color-secondary.au-tag--warning{background-color:#ffdabf}.au-tag--color-secondary.au-tag--support{background-color:#ccf3ff}.au-tag--color-secondary.au-tag--neutral{background-color:#c4c9d4}.au-tag--type-badge.au-tag--info p{color:#46008c}.au-tag--type-badge.au-tag--error p{color:#731111}.au-tag--type-badge.au-tag--success p{color:#08331a}.au-tag--type-badge.au-tag--warning p{color:#803500}.au-tag--type-badge.au-tag--support p{color:#004155}.au-tag--type-badge.au-tag--size-large{height:36px;font-size:12px;line-height:18px}.au-tag--full-width{width:100%}.au-tag__action-btn{font-family:"Source Sans 3",sans-serif;background-color:transparent;border:none;color:#0048db;cursor:pointer;font-size:12px;font-weight:600;line-height:19px}
package/dist/{index-C8AM9yBn.js → index-BzVR1Tq6.js} RENAMED
@@ -3,7 +3,7 @@ import "./index-CweZ_OcN.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-CL0DrUGQ.js";
6
+ import { S as Segment } from "./index-uWXGnhjd.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-C8AM9yBn.js.map
5689
+ //# sourceMappingURL=index-BzVR1Tq6.js.map