@consumidor-positivo/aurora 0.11.1 → 1.0.0

package/dist/components/AdBox/index.es.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-C6Q03EyZ.js";
+import './styles.css';const AD_LABEL = "Publicidade";
+const AdBox = ({
+  children,
+  type = "content",
+  className = "",
+  "data-testid": dataTestId
+}) => {
+  const classes = classNames("au-ad-box", {
+    [`au-ad-box--type-${type}`]: !!type,
+    [className]: !!className
+  });
+  return /* @__PURE__ */ jsxs("aside", { className: classes, "aria-label": AD_LABEL, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx("div", { className: "au-ad-box__heading", children: /* @__PURE__ */ jsx("span", { className: "au-ad-box__label", children: AD_LABEL }) }),
+    /* @__PURE__ */ jsx("div", { className: "au-ad-box__box", children: /* @__PURE__ */ jsx("div", { className: "au-ad-box__container", children }) })
+  ] });
+};
+export {
+  AdBox
+};
+//# sourceMappingURL=index.es.js.map

package/dist/components/AdBox/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/AdBox/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\n\nconst AD_LABEL = 'Publicidade'\n\nexport type AdBoxProps = {\n  children?: React.ReactNode\n  type?: 'content' | 'heading'\n  className?: string\n  'data-testid'?: string\n}\n\nexport const AdBox = ({\n  children,\n  type = 'content',\n  className = '',\n  'data-testid': dataTestId,\n}: AdBoxProps) => {\n  const classes = classNames('au-ad-box', {\n    [`au-ad-box--type-${type}`]: !!type,\n    [className]: !!className,\n  })\n\n  return (\n    <aside className={classes} aria-label={AD_LABEL} data-testid={dataTestId}>\n      <div className=\"au-ad-box__heading\">\n        <span className=\"au-ad-box__label\">{AD_LABEL}</span>\n      </div>\n      <div className=\"au-ad-box__box\">\n        <div className=\"au-ad-box__container\">{children}</div>\n      </div>\n    </aside>\n  )\n}\n"],"names":[],"mappings":";;AAGA,MAAM,WAAW;AASV,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AACjB,MAAkB;AAChB,QAAM,UAAU,WAAW,aAAa;AAAA,IACtC,CAAC,mBAAmB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC/B,CAAC,SAAS,GAAG,CAAC,CAAC;AAAA,EAAA,CAChB;AAED,8BACG,SAAA,EAAM,WAAW,SAAS,cAAY,UAAU,eAAa,YAC5D,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,sBACb,UAAA,oBAAC,UAAK,WAAU,oBAAoB,oBAAS,EAAA,CAC/C;AAAA,IACA,oBAAC,SAAI,WAAU,kBACb,8BAAC,OAAA,EAAI,WAAU,wBAAwB,SAAA,CAAS,EAAA,CAClD;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/AdBox/styles.css

@@ -0,0 +1 @@
+.au-ad-box{display:flex;flex-direction:column;align-items:flex-start;width:100%;font-family:"Source Sans 3",sans-serif;background-color:#f6f7fa}.au-ad-box__heading{display:flex;align-items:center;justify-content:center;width:100%;padding:4px 8px}.au-ad-box__label{color:#5e6573;font-size:12px;font-weight:600;line-height:19px;text-align:center;text-transform:uppercase;word-break:break-word}.au-ad-box__box{display:flex;flex:1 0 0;align-items:center;justify-content:center;width:100%;padding:0 8px 8px}.au-ad-box__container{display:flex;flex:1 0 0;align-items:center;justify-content:center;width:100%;min-height:64px}.au-ad-box--type-content .au-ad-box__box{padding:0 0 8px}@media(min-width:600px){.au-ad-box--type-content{border:none;border-radius:8px;overflow:hidden}}@media(min-width:600px){.au-ad-box--type-content .au-ad-box__box{padding:0 8px 8px}}

package/dist/components/Alert/index.d.ts

@@ -1,6 +1,11 @@
 export type AlertProps = {
     showIcon?: boolean;
-    status?: 'success' | 'error' | 'warning' | 'info' | 'timer';
+    /**
+     * Visual state (Figma: Alerts, States). 'timer' covers the Figma
+     * Running/Resend pair: Running while the countdown runs, Resend when it
+     * ends and the action button appears.
+     */
+    status?: 'success' | 'error' | 'warning' | 'info' | 'timer' | 'progress' | 'neutral';
     type?: 1 | 2;
     orientation?: 'horizontal' | 'vertical';
     title?: {
@@ -18,5 +23,6 @@ export type AlertProps = {
     countdown?: number;
     onCountdownEnd?: () => void;
     onCloseButton?: () => void;
+    'data-testid'?: string;
 };
-export declare const Alert: ({ showIcon, status, type, orientation, title, text, actionButton, closeButton, children, countdown, onCountdownEnd, onCloseButton, customIcon }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Alert: ({ showIcon, status, type, orientation, title, text, actionButton, closeButton, children, countdown, onCountdownEnd, onCloseButton, customIcon, "data-testid": dataTestId, }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Alert/index.es.js

@@ -2,13 +2,14 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
 import "../Icon/index.es.js";
+import { IconAlertCircle } from "../icons/IconAlertCircle/index.es.js";
 import { IconAlertOctagon } from "../icons/IconAlertOctagon/index.es.js";
 import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
 import { IconCheck } from "../icons/IconCheck/index.es.js";
 import { IconClock } from "../icons/IconClock/index.es.js";
 import { IconInfo } from "../icons/IconInfo/index.es.js";
 import { IconX } from "../icons/IconX/index.es.js";
-import { d as COLOR_NEUTRAL_70, e as COLOR_WARNING_50, f as COLOR_INFO_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
+import { d as COLOR_NEUTRAL_70, e as COLOR_WARNING_50, f as COLOR_NEUTRAL_60, g as COLOR_BRAND_CYAN_50, h as COLOR_INFO_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-C4yCunfz.js";
 import { Conditional } from "../Conditional/index.es.js";
 import { Text } from "../Text/index.es.js";
 import './styles.css';const Alert = ({
@@ -24,7 +25,8 @@ import './styles.css';const Alert = ({
   countdown = 59,
   onCountdownEnd,
   onCloseButton,
-  customIcon
+  customIcon,
+  "data-testid": dataTestId
 }) => {
   const [isClosed, setIsClosed] = useState(false);
   const [timeLeft, setTimeLeft] = useState(countdown);
@@ -73,6 +75,14 @@ import './styles.css';const Alert = ({
       icon: /* @__PURE__ */ jsx(IconAlertTriangle, { rawColor: COLOR_WARNING_50 })
     },
     info: { option: "info", icon: /* @__PURE__ */ jsx(IconInfo, { rawColor: COLOR_INFO_50 }) },
+    progress: {
+      option: "progress",
+      icon: /* @__PURE__ */ jsx(IconInfo, { rawColor: COLOR_BRAND_CYAN_50 })
+    },
+    neutral: {
+      option: "neutral",
+      icon: /* @__PURE__ */ jsx(IconAlertCircle, { rawColor: COLOR_NEUTRAL_60 })
+    },
     timer: {
       option: "timer",
       icon: /* @__PURE__ */ jsxs("div", { className: "au-alert__timer", children: [
@@ -99,7 +109,7 @@ import './styles.css';const Alert = ({
     [`au-alert--${statusMap[status].option}--type-${type}`]: statusMap[status].option
   });
   if (isClosed) return null;
-  return /* @__PURE__ */ jsxs("div", { className: alertClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: alertClasses, "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxs("div", { className: "au-alert__content", children: [
       /* @__PURE__ */ jsx(Conditional, { condition: showIcon, renderIf: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: customIcon ?? statusMap[status].icon }) }),
       /* @__PURE__ */ jsxs("div", { className: `au-alert__container--${orientation}`, children: [
@@ -111,7 +121,11 @@ import './styles.css';const Alert = ({
               !!(title == null ? void 0 : title.content) && /* @__PURE__ */ jsx(
                 "h4",
                 {
-                  className: `au-alert__title au-alert__title--${title == null ? void 0 : title.weight}`,
+                  className: classNames(
+                    "au-alert__title",
+                    `au-alert__title--${title == null ? void 0 : title.weight}`,
+                    { "au-alert__title--with-text": !!text }
+                  ),
                   children: title.content
                 }
               ),

package/dist/components/Alert/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport classNames from 'classnames'\nimport {\n  IconAlertOctagon,\n  IconAlertTriangle,\n  IconCheck,\n  IconInfo,\n  IconX,\n  IconClock,\n} from '@components/icons'\nimport {\n  COLOR_ERROR_50,\n  COLOR_INFO_50,\n  COLOR_NEUTRAL_70,\n  COLOR_SUCCESS_50,\n  COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport './styles.scss'\n\nexport type AlertProps = {\n  showIcon?: boolean\n  status?: 'success' | 'error' | 'warning' | 'info' | 'timer'\n  type?: 1 | 2\n  orientation?: 'horizontal' | 'vertical'\n  title?: { content?: React.ReactNode; weight?: 'bold' | 'normal' }\n  text?: React.ReactNode\n  actionButton?: { content?: string; onClick?: () => void }\n  closeButton?: boolean\n  customIcon?: JSX.Element\n  children?: React.ReactNode\n  countdown?: number\n  onCountdownEnd?: () => void\n  onCloseButton?: () => void\n}\n\nexport const Alert = ({\n  showIcon = true,\n  status = 'info',\n  type = 1,\n  orientation = 'horizontal',\n  title,\n  text,\n  actionButton,\n  closeButton = false,\n  children,\n  countdown = 59,\n  onCountdownEnd,\n  onCloseButton,\n  customIcon\n}: AlertProps) => {\n  const [isClosed, setIsClosed] = useState(false)\n  const [timeLeft, setTimeLeft] = useState(countdown)\n  const [isCountdownFinished, setIsCountdownFinished] = useState(false)\n\n  useEffect(() => {\n    if (status !== 'timer' || timeLeft <= 0) return\n\n    const timer = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer)\n          setIsCountdownFinished(true)\n          if (onCountdownEnd) onCountdownEnd()\n        }\n        return prev - 1\n      })\n    }, 1000)\n\n    return () => clearInterval(timer)\n  }, [status, timeLeft, onCountdownEnd])\n\n  useEffect(() => {\n    if (timeLeft > 0) {\n      setIsCountdownFinished(false)\n    }\n  }, [timeLeft])\n\t\n  const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n\t\tevent.preventDefault();\n\t\t\n    setTimeLeft(countdown)\n    setIsCountdownFinished(false)\n    actionButton?.onClick?.()\n  }\n\n  const handleCloseButtonClick = () => {\n    setIsClosed(true)\n    onCloseButton?.()\n  }\n\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    timer: {\n      option: 'timer',\n      icon: (\n        <div className=\"au-alert__timer\">\n          <IconClock rawColor={COLOR_WARNING_50} aria-hidden=\"true\" />\n          {!isCountdownFinished && (\n            <Text\n              className=\"au-alert__countdown\"\n              variant=\"body-small\"\n              weight=\"bold\"\n              role=\"status\"\n              aria-live=\"polite\"\n              aria-atomic=\"true\">\n              {timeLeft}s\n            </Text>\n          )}\n        </div>\n      ),\n    },\n  }\n\n  const alertClasses = classNames('au-alert', {\n    [`au-alert--${statusMap[status].option}--type-${type}`]:\n      statusMap[status].option,\n  })\n\n  if (isClosed) return null\n\n  return (\n    <div className={alertClasses}>\n      <div className=\"au-alert__content\">\n        <Conditional condition={showIcon} renderIf={<span aria-hidden=\"true\">{ customIcon ?? statusMap[status].icon}</span>} />\n        <div className={`au-alert__container--${orientation}`}>\n          <Conditional\n            condition={!!title || !!text}\n            renderIf={\n              <div>\n                {!!title?.content && (\n                  <h4\n                    className={`au-alert__title au-alert__title--${title?.weight}`}>\n                    {title.content}\n                  </h4>\n                )}\n                <p className=\"au-alert__support-text\">{text}</p>\n              </div>\n            }\n          />\n\n          {children}\n          <Conditional\n            condition={\n              !!actionButton && (status !== 'timer' || isCountdownFinished)\n            }\n            renderIf={\n              <button\n                className=\"au-alert__action-btn\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n                onClick={(e) => handleActionClick(e)}>\n                {actionButton?.content}\n              </button>\n            }\n          />\n        </div>\n      </div>\n\n      <Conditional\n        condition={closeButton}\n        renderIf={\n          <button\n            className=\"au-alert__close-btn\"\n            type=\"button\"\n            aria-label=\"Fechar\"\n            onClick={handleCloseButtonClick}>\n            <IconX rawColor={COLOR_NEUTRAL_70} aria-hidden=\"true\" />\n          </button>\n        }\n      />\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport classNames from 'classnames'\nimport {\n  IconAlertCircle,\n  IconAlertOctagon,\n  IconAlertTriangle,\n  IconCheck,\n  IconInfo,\n  IconX,\n  IconClock,\n} from '@components/icons'\nimport {\n  COLOR_BRAND_CYAN_50,\n  COLOR_ERROR_50,\n  COLOR_INFO_50,\n  COLOR_NEUTRAL_60,\n  COLOR_NEUTRAL_70,\n  COLOR_SUCCESS_50,\n  COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport './styles.scss'\n\nexport type AlertProps = {\n  showIcon?: boolean\n  /**\n   * Visual state (Figma: Alerts, States). 'timer' covers the Figma\n   * Running/Resend pair: Running while the countdown runs, Resend when it\n   * ends and the action button appears.\n   */\n  status?:\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'info'\n    | 'timer'\n    | 'progress'\n    | 'neutral'\n  type?: 1 | 2\n  orientation?: 'horizontal' | 'vertical'\n  title?: { content?: React.ReactNode; weight?: 'bold' | 'normal' }\n  text?: React.ReactNode\n  actionButton?: { content?: string; onClick?: () => void }\n  closeButton?: boolean\n  customIcon?: JSX.Element\n  children?: React.ReactNode\n  countdown?: number\n  onCountdownEnd?: () => void\n  onCloseButton?: () => void\n  'data-testid'?: string\n}\n\nexport const Alert = ({\n  showIcon = true,\n  status = 'info',\n  type = 1,\n  orientation = 'horizontal',\n  title,\n  text,\n  actionButton,\n  closeButton = false,\n  children,\n  countdown = 59,\n  onCountdownEnd,\n  onCloseButton,\n  customIcon,\n  'data-testid': dataTestId,\n}: AlertProps) => {\n  const [isClosed, setIsClosed] = useState(false)\n  const [timeLeft, setTimeLeft] = useState(countdown)\n  const [isCountdownFinished, setIsCountdownFinished] = useState(false)\n\n  useEffect(() => {\n    if (status !== 'timer' || timeLeft <= 0) return\n\n    const timer = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer)\n          setIsCountdownFinished(true)\n          if (onCountdownEnd) onCountdownEnd()\n        }\n        return prev - 1\n      })\n    }, 1000)\n\n    return () => clearInterval(timer)\n  }, [status, timeLeft, onCountdownEnd])\n\n  useEffect(() => {\n    if (timeLeft > 0) {\n      setIsCountdownFinished(false)\n    }\n  }, [timeLeft])\n\t\n  const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n\t\tevent.preventDefault();\n\t\t\n    setTimeLeft(countdown)\n    setIsCountdownFinished(false)\n    actionButton?.onClick?.()\n  }\n\n  const handleCloseButtonClick = () => {\n    setIsClosed(true)\n    onCloseButton?.()\n  }\n\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    progress: {\n      option: 'progress',\n      icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n    },\n    neutral: {\n      option: 'neutral',\n      icon: <IconAlertCircle rawColor={COLOR_NEUTRAL_60} />,\n    },\n    timer: {\n      option: 'timer',\n      icon: (\n        <div className=\"au-alert__timer\">\n          <IconClock rawColor={COLOR_WARNING_50} aria-hidden=\"true\" />\n          {!isCountdownFinished && (\n            <Text\n              className=\"au-alert__countdown\"\n              variant=\"body-small\"\n              weight=\"bold\"\n              role=\"status\"\n              aria-live=\"polite\"\n              aria-atomic=\"true\">\n              {timeLeft}s\n            </Text>\n          )}\n        </div>\n      ),\n    },\n  }\n\n  const alertClasses = classNames('au-alert', {\n    [`au-alert--${statusMap[status].option}--type-${type}`]:\n      statusMap[status].option,\n  })\n\n  if (isClosed) return null\n\n  return (\n    <div className={alertClasses} data-testid={dataTestId}>\n      <div className=\"au-alert__content\">\n        <Conditional condition={showIcon} renderIf={<span aria-hidden=\"true\">{ customIcon ?? statusMap[status].icon}</span>} />\n        <div className={`au-alert__container--${orientation}`}>\n          <Conditional\n            condition={!!title || !!text}\n            renderIf={\n              <div>\n                {!!title?.content && (\n                  <h4\n                    className={classNames(\n                      'au-alert__title',\n                      `au-alert__title--${title?.weight}`,\n                      { 'au-alert__title--with-text': !!text },\n                    )}>\n                    {title.content}\n                  </h4>\n                )}\n                <p className=\"au-alert__support-text\">{text}</p>\n              </div>\n            }\n          />\n\n          {children}\n          <Conditional\n            condition={\n              !!actionButton && (status !== 'timer' || isCountdownFinished)\n            }\n            renderIf={\n              <button\n                className=\"au-alert__action-btn\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n                onClick={(e) => handleActionClick(e)}>\n                {actionButton?.content}\n              </button>\n            }\n          />\n        </div>\n      </div>\n\n      <Conditional\n        condition={closeButton}\n        renderIf={\n          <button\n            className=\"au-alert__close-btn\"\n            type=\"button\"\n            aria-label=\"Fechar\"\n            onClick={handleCloseButtonClick}>\n            <IconX rawColor={COLOR_NEUTRAL_70} aria-hidden=\"true\" />\n          </button>\n        }\n      />\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Alert/styles.css

@@ -1 +1 @@
-.au-alert{font-family:"Source Sans 3",sans-serif;border-radius:16px;display:flex;justify-content:space-between;gap:16px;padding:16px}.au-alert__content{display:flex;gap:16px;flex:1}.au-alert__container--horizontal .au-alert__action-btn{margin-top:8px}.au-alert__container--vertical{display:flex;gap:16px;flex-direction:row;justify-content:space-between;width:100%}.au-alert__title{color:#16181d;font-size:16px;font-weight:400;line-height:24px}.au-alert__title--bold{font-weight:600}.au-alert__support-text{color:#454a54;font-size:14px;line-height:21px}.au-alert__action-btn{font-family:"Source Sans 3",sans-serif;background-color:transparent;border:none;color:#0048db;cursor:pointer;font-size:16px;font-weight:600;line-height:24px}.au-alert__close-btn{cursor:pointer;background:transparent;border:none;display:flex}.au-alert__timer{text-align:center;align-self:flex-start}.au-alert__countdown{color:#a64a08}.au-alert--info--type-1{background-color:#f3f0fc;border:1px solid #510cb2}.au-alert--info--type-2{background-color:#eee6ff;border:none}.au-alert--success--type-1{background-color:#f0fcf5;border:1px solid #10593b}.au-alert--success--type-2{background-color:#e5fff0;border:none}.au-alert--warning--type-1,.au-alert--timer--type-1{background-color:#fcf4f0;border:1px solid #a64a08}.au-alert--warning--type-2,.au-alert--timer--type-2{background-color:#fff0e6;border:none}.au-alert--timer--type-1 .au-alert__content,.au-alert--timer--type-2 .au-alert__content{align-items:center}.au-alert--error--type-1{background-color:#f5eff0;border:1px solid #991717}.au-alert--error--type-2{background-color:#ffe5e5;border:none}
+.au-alert{font-family:"Source Sans 3",sans-serif;border-radius:16px;display:flex;justify-content:space-between;gap:16px;padding:16px}.au-alert__content{display:flex;gap:16px;flex:1}.au-alert__container--horizontal .au-alert__action-btn{margin-top:8px}.au-alert__container--vertical{display:flex;gap:16px;flex-direction:row;justify-content:space-between;width:100%}.au-alert__title{color:#454a54;font-size:14px;font-weight:400;line-height:21px}.au-alert__title--bold{font-weight:600}.au-alert__title--with-text{color:#16181d}.au-alert__support-text{color:#454a54;font-size:14px;line-height:21px}.au-alert__action-btn{font-family:"Source Sans 3",sans-serif;background-color:transparent;border:none;color:#0048db;cursor:pointer;font-size:14px;font-weight:600;line-height:21px}.au-alert__close-btn{cursor:pointer;background:transparent;border:none;display:flex}.au-alert__timer{text-align:center;align-self:flex-start}.au-alert__countdown{color:#a64a08}.au-alert--info--type-1{background-color:#f3f0fc;border:1px solid #510cb2}.au-alert--info--type-2{background-color:#eee6ff;border:none}.au-alert--success--type-1{background-color:#f0fcf5;border:1px solid #10593b}.au-alert--success--type-2{background-color:#e5fff0;border:none}.au-alert--warning--type-1,.au-alert--timer--type-1{background-color:#fcf4f0;border:1px solid #a64a08}.au-alert--warning--type-2,.au-alert--timer--type-2{background-color:#fff0e6;border:none}.au-alert--timer--type-1 .au-alert__content,.au-alert--timer--type-2 .au-alert__content{align-items:center}.au-alert--error--type-1{background-color:#f5eff0;border:1px solid #991717}.au-alert--error--type-2{background-color:#ffe5e5;border:none}.au-alert--progress--type-1{background-color:#f1fcff;border:1px solid #004155}.au-alert--progress--type-2{background-color:#f1fcff;border:none}.au-alert--neutral--type-1{background-color:#f6f7fa;border:1px solid #454a54}.au-alert--neutral--type-2{background-color:#f6f7fa;border:none}

package/dist/components/BadgeInfo/index.d.ts

@@ -4,9 +4,6 @@ export type BadgeInfoProps = {
     text: string;
     children?: React.ReactNode;
     customIcon?: string | JSX.Element;
-    actionButton?: {
-        content?: string;
-        onClick?: () => void;
-    };
+    'data-testid'?: string;
 };
-export declare const BadgeInfo: ({ status, color, customIcon, text, children, }: BadgeInfoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeInfo: ({ status, color, customIcon, text, children, "data-testid": dataTestId, }: BadgeInfoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BadgeInfo/index.es.js

@@ -1,15 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
+import "react";
 import "../Icon/index.es.js";
 import { IconInfo } from "../icons/IconInfo/index.es.js";
-import { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
+import { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, h as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-C4yCunfz.js";
 import { I as If, T as Then, E as Else } from "../../react-if.esm-Cozt8l48.js";
 import './styles.css';const BadgeInfo = ({
   status,
   color = "primary",
   customIcon,
   text,
-  children
+  children,
+  "data-testid": dataTestId
 }) => {
   const statusMap = {
     success: {
@@ -45,7 +47,7 @@ import './styles.css';const BadgeInfo = ({
     [`au-badgeInfo--${statusMap[status].option}`]: statusMap[status].option,
     [`au-badgeInfo--color-${color}`]: !!color
   });
-  return /* @__PURE__ */ jsxs("div", { className: badgeInfoClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: badgeInfoClasses, "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxs("div", { className: "au-badgeInfo__content", children: [
       /* @__PURE__ */ jsx("div", { className: "au-badgeInfo__content-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(If, { condition: !!customIcon, children: [
         /* @__PURE__ */ jsx(Then, { children: customIcon }),

package/dist/components/BadgeInfo/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/BadgeInfo/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { IconInfo } 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 { Else, IfElse, Then } from '@components/misc'\n\nexport type BadgeInfoProps = {\n  status: 'info' | 'success' | 'error' | 'warning' | 'progress' | 'neutral'\n  color?: 'primary' | 'secondary'\n  text: string\n  children?: React.ReactNode\n  customIcon?: string | JSX.Element\n  actionButton?: { content?: string; onClick?: () => void }\n}\n\nexport const BadgeInfo = ({\n  status,\n  color = 'primary',\n  customIcon,\n  text,\n  children,\n}: BadgeInfoProps) => {\n  const statusMap = {\n    success: {\n      option: 'success',\n      icon: <IconInfo rawColor={COLOR_SUCCESS_50} />,\n    },\n    error: {\n      option: 'error',\n      icon: <IconInfo rawColor={COLOR_ERROR_50} />,\n    },\n    warning: {\n      option: 'warning',\n      icon: <IconInfo rawColor={COLOR_WARNING_50} />,\n    },\n    info: {\n      option: 'info',\n      icon: <IconInfo rawColor={COLOR_INFO_50} />,\n    },\n    progress: {\n      option: 'progress',\n      icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n    },\n    neutral: {\n      option: 'neutral',\n      icon: <IconInfo rawColor={COLOR_NEUTRAL_70} />,\n    },\n    custom: {\n      option: 'custom',\n      icon: customIcon,\n    },\n  }\n\n  const badgeInfoClasses = classNames('au-badgeInfo', {\n    [`au-badgeInfo--${statusMap[status].option}`]: statusMap[status].option,\n    [`au-badgeInfo--color-${color}`]: !!color,\n  })\n\n  return (\n    <div className={badgeInfoClasses}>\n      <div className=\"au-badgeInfo__content\">\n        <div className=\"au-badgeInfo__content-icon\" aria-hidden=\"true\">\n          <IfElse condition={!!customIcon}>\n            <Then>{customIcon}</Then>\n            <Else>{statusMap[status].icon}</Else>\n          </IfElse>\n        </div>\n        <p className={`au-badgeInfo__content-support-text`}>{text}</p>\n      </div>\n      {children}\n    </div>\n  )\n}\n"],"names":["IfElse"],"mappings":";;;;;;AAsBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE9C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAE5C,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE9C,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe;AAAA,IAAA;AAAA,IAE3C,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAEjD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE9C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,mBAAmB,WAAW,gBAAgB;AAAA,IAClD,CAAC,iBAAiB,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IACjE,CAAC,uBAAuB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CACrC;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,kBACd,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,8BAA6B,eAAY,QACtD,+BAACA,IAAA,EAAO,WAAW,CAAC,CAAC,YACnB,UAAA;AAAA,QAAA,oBAAC,QAAM,UAAA,WAAA,CAAW;AAAA,QAClB,oBAAC,MAAA,EAAM,UAAA,UAAU,MAAM,EAAE,KAAA,CAAK;AAAA,MAAA,EAAA,CAChC,EAAA,CACF;AAAA,MACA,oBAAC,KAAA,EAAE,WAAW,sCAAuC,UAAA,KAAA,CAAK;AAAA,IAAA,GAC5D;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/BadgeInfo/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { IconInfo } 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 { Else, IfElse, Then } from '@components/misc'\n\nexport type BadgeInfoProps = {\n  status: 'info' | 'success' | 'error' | 'warning' | 'progress' | 'neutral'\n  color?: 'primary' | 'secondary'\n  text: string\n  children?: React.ReactNode\n  customIcon?: string | JSX.Element\n  'data-testid'?: string\n}\n\nexport const BadgeInfo = ({\n  status,\n  color = 'primary',\n  customIcon,\n  text,\n  children,\n  'data-testid': dataTestId,\n}: BadgeInfoProps) => {\n  const statusMap = {\n    success: {\n      option: 'success',\n      icon: <IconInfo rawColor={COLOR_SUCCESS_50} />,\n    },\n    error: {\n      option: 'error',\n      icon: <IconInfo rawColor={COLOR_ERROR_50} />,\n    },\n    warning: {\n      option: 'warning',\n      icon: <IconInfo rawColor={COLOR_WARNING_50} />,\n    },\n    info: {\n      option: 'info',\n      icon: <IconInfo rawColor={COLOR_INFO_50} />,\n    },\n    progress: {\n      option: 'progress',\n      icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n    },\n    neutral: {\n      option: 'neutral',\n      icon: <IconInfo rawColor={COLOR_NEUTRAL_70} />,\n    },\n    custom: {\n      option: 'custom',\n      icon: customIcon,\n    },\n  }\n\n  const badgeInfoClasses = classNames('au-badgeInfo', {\n    [`au-badgeInfo--${statusMap[status].option}`]: statusMap[status].option,\n    [`au-badgeInfo--color-${color}`]: !!color,\n  })\n\n  return (\n    <div className={badgeInfoClasses} data-testid={dataTestId}>\n      <div className=\"au-badgeInfo__content\">\n        <div className=\"au-badgeInfo__content-icon\" aria-hidden=\"true\">\n          <IfElse condition={!!customIcon}>\n            <Then>{customIcon}</Then>\n            <Else>{statusMap[status].icon}</Else>\n          </IfElse>\n        </div>\n        <p className={`au-badgeInfo__content-support-text`}>{text}</p>\n      </div>\n      {children}\n    </div>\n  )\n}\n"],"names":["IfElse"],"mappings":";;;;;;;AAsBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAsB;AACpB,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE9C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAE5C,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE9C,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe;AAAA,IAAA;AAAA,IAE3C,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAEjD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE9C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,mBAAmB,WAAW,gBAAgB;AAAA,IAClD,CAAC,iBAAiB,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IACjE,CAAC,uBAAuB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CACrC;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,kBAAkB,eAAa,YAC7C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,8BAA6B,eAAY,QACtD,+BAACA,IAAA,EAAO,WAAW,CAAC,CAAC,YACnB,UAAA;AAAA,QAAA,oBAAC,QAAM,UAAA,WAAA,CAAW;AAAA,QAClB,oBAAC,MAAA,EAAM,UAAA,UAAU,MAAM,EAAE,KAAA,CAAK;AAAA,MAAA,EAAA,CAChC,EAAA,CACF;AAAA,MACA,oBAAC,KAAA,EAAE,WAAW,sCAAuC,UAAA,KAAA,CAAK;AAAA,IAAA,GAC5D;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/BadgeState/index.d.ts

@@ -1,10 +1,11 @@
 export type BadgeStateProps = {
-    status: 'info' | 'success' | 'error' | 'warning' | 'support';
+    status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral';
     isNumberBadge?: boolean;
     variant?: 'regular' | 'strong';
     text?: string;
     children?: React.ReactNode;
     icon?: string | JSX.Element;
     iconOnly?: boolean;
+    'data-testid'?: string;
 };
-export declare const BadgeState: ({ status, isNumberBadge, variant, iconOnly, text, children, }: BadgeStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeState: ({ status, isNumberBadge, variant, iconOnly, text, children, "data-testid": dataTestId, }: BadgeStateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BadgeState/index.es.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
+import "react";
 import "../Icon/index.es.js";
 import { IconAlertOctagon } from "../icons/IconAlertOctagon/index.es.js";
 import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
 import { IconCheck } from "../icons/IconCheck/index.es.js";
 import { IconInfo } from "../icons/IconInfo/index.es.js";
 import { IconMoreHorizontal } from "../icons/IconMoreHorizontal/index.es.js";
-import { g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
+import { f as COLOR_NEUTRAL_60, g as COLOR_BRAND_CYAN_50, h as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-C4yCunfz.js";
 import { I as If, T as Then, E as Else } from "../../react-if.esm-Cozt8l48.js";
 import './styles.css';const BadgeState = ({
   status,
@@ -14,7 +15,8 @@ import './styles.css';const BadgeState = ({
   variant = "regular",
   iconOnly = false,
   text,
-  children
+  children,
+  "data-testid": dataTestId
 }) => {
   const statusMap = {
     success: {
@@ -41,6 +43,11 @@ import './styles.css';const BadgeState = ({
       option: "support",
       label: "Mais informações",
       icon: /* @__PURE__ */ jsx(IconMoreHorizontal, { rawColor: COLOR_BRAND_CYAN_50 })
+    },
+    neutral: {
+      option: "neutral",
+      label: "Neutro",
+      icon: /* @__PURE__ */ jsx(IconMoreHorizontal, { rawColor: COLOR_NEUTRAL_60 })
     }
   };
   const badgeStateClasses = classNames("au-badgeState", {
@@ -49,7 +56,7 @@ import './styles.css';const BadgeState = ({
     [`au-badgeState--icon-only`]: !!iconOnly,
     [`au-badgeState--variant-${variant}`]: !!variant
   });
-  return /* @__PURE__ */ jsxs("div", { className: badgeStateClasses, ...iconOnly ? { "aria-label": statusMap[status].label } : {}, children: [
+  return /* @__PURE__ */ jsxs("div", { className: badgeStateClasses, "data-testid": dataTestId, ...iconOnly ? { "aria-label": statusMap[status].label } : {}, children: [
     /* @__PURE__ */ jsx("div", { className: "au-badgeState__content", children: /* @__PURE__ */ jsxs(If, { condition: !!iconOnly, children: [
       /* @__PURE__ */ jsx(Then, { children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: statusMap[status].icon }) }),
       /* @__PURE__ */ jsx(Else, { children: /* @__PURE__ */ jsx("p", { className: `au-badgeState__content-support-text`, children: text }) })

package/dist/components/BadgeState/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/BadgeState/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n  IconAlertOctagon,\n  IconAlertTriangle,\n  IconCheck,\n  IconMoreHorizontal,\n  IconInfo,\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} from '@core/tokens'\n\nimport { IfElse, Else, Then } from '@components/misc'\n\nimport './styles.scss'\n\nexport type BadgeStateProps = {\n  status: 'info' | 'success' | 'error' | 'warning' | 'support'\n  isNumberBadge?: boolean\n  variant?: 'regular' | 'strong'\n  text?: string\n  children?: React.ReactNode\n  icon?: string | JSX.Element\n  iconOnly?: boolean\n}\n\nexport const BadgeState = ({\n  status,\n  isNumberBadge = false,\n  variant = 'regular',\n  iconOnly = false,\n  text,\n  children,\n}: BadgeStateProps) => {\n  const statusMap = {\n    success: {\n      option: 'success',\n      label: 'Sucesso',\n      icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n    },\n    error: {\n      option: 'error',\n      label: 'Erro',\n      icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n    },\n    warning: {\n      option: 'warning',\n      label: 'Atenção',\n      icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n    },\n    info: {\n      option: 'info',\n      label: 'Informação',\n      icon: <IconInfo rawColor={COLOR_INFO_50} />,\n    },\n    support: {\n      option: 'support',\n      label: 'Mais informações',\n      icon: <IconMoreHorizontal rawColor={COLOR_BRAND_CYAN_50} />,\n    },\n  }\n\n  const badgeStateClasses = classNames('au-badgeState', {\n    [`au-badgeState--${statusMap[status].option}`]: statusMap[status].option,\n    [`au-badgeState--border-circle`]: !!isNumberBadge,\n    [`au-badgeState--icon-only`]: !!iconOnly,\n    [`au-badgeState--variant-${variant}`]: !!variant,\n  })\n\n  return (\n    <div className={badgeStateClasses} {...(iconOnly ? { 'aria-label': statusMap[status].label } : {})}>\n      <div className=\"au-badgeState__content\">\n        <IfElse condition={!!iconOnly}>\n          <Then><span aria-hidden=\"true\">{statusMap[status].icon}</span></Then>\n          <Else>\n            {<p className={`au-badgeState__content-support-text`}>{text}</p>}\n          </Else>\n        </IfElse>\n      </div>\n      {children}\n    </div>\n  )\n}\n"],"names":["IfElse"],"mappings":";;;;;;;;;;AA8BO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,mBAAA,EAAkB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAEvD,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe;AAAA,IAAA;AAAA,IAE3C,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,oBAAA,EAAmB,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,EAC3D;AAGF,QAAM,oBAAoB,WAAW,iBAAiB;AAAA,IACpD,CAAC,kBAAkB,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAClE,CAAC,8BAA8B,GAAG,CAAC,CAAC;AAAA,IACpC,CAAC,0BAA0B,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,0BAA0B,OAAO,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CAC1C;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,mBAAoB,GAAI,WAAW,EAAE,cAAc,UAAU,MAAM,EAAE,MAAA,IAAU,CAAA,GAC7F,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA,qBAACA,MAAO,WAAW,CAAC,CAAC,UACnB,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,8BAAC,QAAA,EAAK,eAAY,QAAQ,UAAA,UAAU,MAAM,EAAE,KAAA,CAAK,EAAA,CAAO;AAAA,0BAC7D,MAAA,EACE,UAAA,oBAAC,OAAE,WAAW,uCAAwC,gBAAK,EAAA,CAC9D;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/BadgeState/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n  IconAlertOctagon,\n  IconAlertTriangle,\n  IconCheck,\n  IconMoreHorizontal,\n  IconInfo,\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_60,\n} from '@core/tokens'\n\nimport { IfElse, Else, Then } from '@components/misc'\n\nimport './styles.scss'\n\nexport type BadgeStateProps = {\n  status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'\n  isNumberBadge?: boolean\n  variant?: 'regular' | 'strong'\n  text?: string\n  children?: React.ReactNode\n  icon?: string | JSX.Element\n  iconOnly?: boolean\n  'data-testid'?: string\n}\n\nexport const BadgeState = ({\n  status,\n  isNumberBadge = false,\n  variant = 'regular',\n  iconOnly = false,\n  text,\n  children,\n  'data-testid': dataTestId,\n}: BadgeStateProps) => {\n  const statusMap = {\n    success: {\n      option: 'success',\n      label: 'Sucesso',\n      icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n    },\n    error: {\n      option: 'error',\n      label: 'Erro',\n      icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n    },\n    warning: {\n      option: 'warning',\n      label: 'Atenção',\n      icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n    },\n    info: {\n      option: 'info',\n      label: 'Informação',\n      icon: <IconInfo rawColor={COLOR_INFO_50} />,\n    },\n    support: {\n      option: 'support',\n      label: 'Mais informações',\n      icon: <IconMoreHorizontal rawColor={COLOR_BRAND_CYAN_50} />,\n    },\n    neutral: {\n      option: 'neutral',\n      label: 'Neutro',\n      icon: <IconMoreHorizontal rawColor={COLOR_NEUTRAL_60} />,\n    },\n  }\n\n  const badgeStateClasses = classNames('au-badgeState', {\n    [`au-badgeState--${statusMap[status].option}`]: statusMap[status].option,\n    [`au-badgeState--border-circle`]: !!isNumberBadge,\n    [`au-badgeState--icon-only`]: !!iconOnly,\n    [`au-badgeState--variant-${variant}`]: !!variant,\n  })\n\n  return (\n    <div className={badgeStateClasses} data-testid={dataTestId} {...(iconOnly ? { 'aria-label': statusMap[status].label } : {})}>\n      <div className=\"au-badgeState__content\">\n        <IfElse condition={!!iconOnly}>\n          <Then><span aria-hidden=\"true\">{statusMap[status].icon}</span></Then>\n          <Else>\n            {<p className={`au-badgeState__content-support-text`}>{text}</p>}\n          </Else>\n        </IfElse>\n      </div>\n      {children}\n    </div>\n  )\n}\n"],"names":["IfElse"],"mappings":";;;;;;;;;;;AAgCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAuB;AACrB,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,mBAAA,EAAkB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAEvD,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe;AAAA,IAAA;AAAA,IAE3C,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,oBAAA,EAAmB,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAE3D,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM,oBAAC,oBAAA,EAAmB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,EACxD;AAGF,QAAM,oBAAoB,WAAW,iBAAiB;AAAA,IACpD,CAAC,kBAAkB,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAClE,CAAC,8BAA8B,GAAG,CAAC,CAAC;AAAA,IACpC,CAAC,0BAA0B,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,0BAA0B,OAAO,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CAC1C;AAED,8BACG,OAAA,EAAI,WAAW,mBAAmB,eAAa,YAAa,GAAI,WAAW,EAAE,cAAc,UAAU,MAAM,EAAE,MAAA,IAAU,CAAA,GACtH,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA,qBAACA,MAAO,WAAW,CAAC,CAAC,UACnB,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,8BAAC,QAAA,EAAK,eAAY,QAAQ,UAAA,UAAU,MAAM,EAAE,KAAA,CAAK,EAAA,CAAO;AAAA,0BAC7D,MAAA,EACE,UAAA,oBAAC,OAAE,WAAW,uCAAwC,gBAAK,EAAA,CAC9D;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/BadgeState/styles.css

@@ -1 +1 @@
-.au-badgeState{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;padding:4px 6px;width:fit-content}.au-badgeState__content{display:flex;gap:8px;justify-content:center;align-items:center}.au-badgeState__content .au-icon>svg{width:14px;height:14px}.au-badgeState__content-support-text{font-size:12px;font-weight:600}.au-badgeState--icon-only{width:20px;height:20px;padding:4px}.au-badgeState--variant-strong .au-icon{color:#fff!important}.au-badgeState--border-circle{width:20px;height:20px;border-radius:50%;aspect-ratio:1;display:flex;justify-content:center;align-items:center;padding:4px;align-content:center}.au-badgeState--variant-regular.au-badgeState--info{background-color:#eee6ff;color:#46008c}.au-badgeState--variant-regular.au-badgeState--success{background-color:#e5fff0;color:#10593b}.au-badgeState--variant-regular.au-badgeState--error{background-color:#ffe5e5;color:#991717}.au-badgeState--variant-regular.au-badgeState--warning{background-color:#fff0e6;color:#803500}.au-badgeState--variant-regular.au-badgeState--support{background-color:#f1fcff;color:#004155}.au-badgeState--variant-strong{color:#fff}.au-badgeState--variant-strong.au-badgeState--info{background-color:#510cb2}.au-badgeState--variant-strong.au-badgeState--success{background-color:#10593b}.au-badgeState--variant-strong.au-badgeState--error{background-color:#991717}.au-badgeState--variant-strong.au-badgeState--warning{background-color:#a64a08}.au-badgeState--variant-strong.au-badgeState--support{background-color:#005c77}
+.au-badgeState{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;padding:4px 6px;width:fit-content}.au-badgeState__content{display:flex;gap:8px;justify-content:center;align-items:center}.au-badgeState__content .au-icon>svg{width:14px;height:14px}.au-badgeState__content-support-text{font-size:12px;font-weight:600}.au-badgeState--icon-only{width:20px;height:20px;padding:4px}.au-badgeState--variant-strong .au-icon{color:#fff!important}.au-badgeState--border-circle{width:20px;height:20px;border-radius:50%;aspect-ratio:1;display:flex;justify-content:center;align-items:center;padding:4px;align-content:center}.au-badgeState--variant-regular.au-badgeState--info{background-color:#eee6ff;color:#46008c}.au-badgeState--variant-regular.au-badgeState--success{background-color:#e5fff0;color:#10593b}.au-badgeState--variant-regular.au-badgeState--error{background-color:#ffe5e5;color:#991717}.au-badgeState--variant-regular.au-badgeState--warning{background-color:#fff0e6;color:#803500}.au-badgeState--variant-regular.au-badgeState--support{background-color:#f1fcff;color:#004155}.au-badgeState--variant-regular.au-badgeState--neutral{background-color:#f6f7fa;color:#313131}.au-badgeState--variant-strong{color:#fff}.au-badgeState--variant-strong.au-badgeState--info{background-color:#510cb2}.au-badgeState--variant-strong.au-badgeState--success{background-color:#10593b}.au-badgeState--variant-strong.au-badgeState--error{background-color:#991717}.au-badgeState--variant-strong.au-badgeState--warning{background-color:#a64a08}.au-badgeState--variant-strong.au-badgeState--support{background-color:#005c77}.au-badgeState--variant-strong.au-badgeState--neutral{background-color:#313131}

package/dist/components/Button/index.d.ts

@@ -11,16 +11,25 @@ type ButtonProps = ({
     children?: ReactNode | string | JSX.Element | JSX.Element[];
     color?: 'default';
     disabled?: boolean;
+    /** Stretches the button to fill the container width. Not mapped in Figma. */
     expand?: 'x';
     htmlType?: 'button' | 'submit' | 'reset';
     loading?: boolean;
     size?: 'large' | 'medium';
+    /**
+     * Visual type.
+     * @deprecated the 'link' value — use the `LinkButton` component instead (matches the Figma "Link Button" set, with sizes and icon slots).
+     */
     type?: 'primary' | 'outlined' | 'ghost' | 'link';
     target?: string;
+    /** Inverted colors for colored backgrounds (Figma: Negative). */
     negative?: boolean;
+    /** Renders as a plain text button (class `btn-text`). Not mapped in Figma. */
     btnText?: boolean;
+    /** Icon-only round button (Figma: Style=Icon). */
     round?: boolean;
     className?: string;
+    /** Border width modifier (`au-btn--border-*`). Not mapped in Figma. */
     borderWidth?: string;
     elementRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
 };

package/dist/components/Button/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Button/index.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef } from 'react'\nimport classNames from 'classnames'\nimport { Conditional } from '../misc/Conditional'\nimport { IconLoader } from '../icons/default'\nimport './styles.scss'\n\ntype ButtonProps = (\n  | {\n      as: 'a'\n      href: string\n    }\n  | {\n      as?: 'button'\n      href?: never\n    }\n) & {\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  onEnabled?: () => void\n  children?: ReactNode | string | JSX.Element | JSX.Element[]\n  color?: 'default'\n  disabled?: boolean\n  expand?: 'x'\n  htmlType?: 'button' | 'submit' | 'reset'\n  loading?: boolean\n  size?: 'large' | 'medium'\n  type?: 'primary' | 'outlined' | 'ghost' | 'link'\n  target?: string\n  negative?: boolean\n  btnText?: boolean\n  round?: boolean\n  className?: string\n  borderWidth?: string\n  elementRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  as,\n  children = 'Button component',\n  color = 'default',\n  disabled = false,\n  expand,\n  href,\n  htmlType = 'button',\n  loading = false,\n  onClick,\n  onEnabled,\n  size = 'medium',\n  type = 'primary',\n  target,\n  negative = false,\n  btnText = false,\n  round = false,\n  className,\n  borderWidth = 'medium',\n  elementRef,\n  ...props\n}) => {\n  const wasDisabledRef = useRef<boolean | undefined>(undefined)\n\n  useEffect(() => {\n    const isCurrentlyEnabled = !disabled && !loading\n    const wasDisabledPreviously = wasDisabledRef.current\n    const isFirstRender = wasDisabledPreviously === undefined\n\n    if (\n      isCurrentlyEnabled &&\n      (isFirstRender || wasDisabledPreviously === true) &&\n      onEnabled\n    ) {\n      onEnabled()\n    }\n\n    wasDisabledRef.current = disabled || loading\n  }, [disabled, loading, onEnabled])\n\n  const buttonClasses = classNames('au-btn', {\n    [`au-btn--type-${type}`]: !!type,\n    [`au-btn--size-${size}`]: !!size,\n    [`au-btn--expand-${expand}`]: !!expand,\n    [`au-btn--color-${color}`]: !!color,\n    'au-btn--negative': !!negative,\n    'au-btn--disabled': !!disabled,\n    'au-btn--loading': !!loading,\n    [`au-btn--round-${size}`]: !!round,\n    'btn-text': !!btnText,\n    [`au-btn--border-${borderWidth}`]: !!borderWidth,\n    [className ?? '']: typeof className === 'string',\n  })\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n    if (!disabled && !!onClick) onClick(e)\n  }\n\n  if (as === 'a') {\n    return (\n      <a\n        className={buttonClasses}\n        href={href}\n        target={target}\n        ref={elementRef as React.RefObject<HTMLAnchorElement>}\n        {...props}>\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      className={buttonClasses}\n      onClick={handleClick}\n      type={htmlType}\n      ref={elementRef as React.RefObject<HTMLButtonElement>}\n      disabled={disabled || loading}\n      {...props}>\n      <Conditional\n        condition={loading}\n        renderIf={<IconLoader />}\n        renderElse={children}\n      />\n    </button>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAmCO,MAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,OAA4B,MAAS;AAE5D,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,YAAY,CAAC;AACzC,UAAM,wBAAwB,eAAe;AAC7C,UAAM,gBAAgB,0BAA0B;AAEhD,QACE,uBACC,iBAAiB,0BAA0B,SAC5C,WACA;AACA,gBAAA;AAAA,IACF;AAEA,mBAAe,UAAU,YAAY;AAAA,EACvC,GAAG,CAAC,UAAU,SAAS,SAAS,CAAC;AAEjC,QAAM,gBAAgB,WAAW,UAAU;AAAA,IACzC,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,oBAAoB,CAAC,CAAC;AAAA,IACtB,oBAAoB,CAAC,CAAC;AAAA,IACtB,mBAAmB,CAAC,CAAC;AAAA,IACrB,CAAC,iBAAiB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC7B,YAAY,CAAC,CAAC;AAAA,IACd,CAAC,kBAAkB,WAAW,EAAE,GAAG,CAAC,CAAC;AAAA,IACrC,CAAC,aAAa,EAAE,GAAG,OAAO,cAAc;AAAA,EAAA,CACzC;AAED,WAAS,YAAY,GAAoD;AACvE,QAAI,CAAC,YAAY,CAAC,CAAC,iBAAiB,CAAC;AAAA,EACvC;AAEA,MAAI,OAAO,KAAK;AACd,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACJ,GAAG;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,MACL,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MACJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,UACX,8BAAW,YAAA,EAAW;AAAA,UACtB,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Button/index.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef } from 'react'\nimport classNames from 'classnames'\nimport { Conditional } from '../misc/Conditional'\nimport { IconLoader } from '../icons/default'\nimport './styles.scss'\n\ntype ButtonProps = (\n  | {\n      as: 'a'\n      href: string\n    }\n  | {\n      as?: 'button'\n      href?: never\n    }\n) & {\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  onEnabled?: () => void\n  children?: ReactNode | string | JSX.Element | JSX.Element[]\n  color?: 'default'\n  disabled?: boolean\n  /** Stretches the button to fill the container width. Not mapped in Figma. */\n  expand?: 'x'\n  htmlType?: 'button' | 'submit' | 'reset'\n  loading?: boolean\n  size?: 'large' | 'medium'\n  /**\n   * Visual type.\n   * @deprecated the 'link' value — use the `LinkButton` component instead (matches the Figma \"Link Button\" set, with sizes and icon slots).\n   */\n  type?: 'primary' | 'outlined' | 'ghost' | 'link'\n  target?: string\n  /** Inverted colors for colored backgrounds (Figma: Negative). */\n  negative?: boolean\n  /** Renders as a plain text button (class `btn-text`). Not mapped in Figma. */\n  btnText?: boolean\n  /** Icon-only round button (Figma: Style=Icon). */\n  round?: boolean\n  className?: string\n  /** Border width modifier (`au-btn--border-*`). Not mapped in Figma. */\n  borderWidth?: string\n  elementRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  as,\n  children = 'Button component',\n  color = 'default',\n  disabled = false,\n  expand,\n  href,\n  htmlType = 'button',\n  loading = false,\n  onClick,\n  onEnabled,\n  size = 'medium',\n  type = 'primary',\n  target,\n  negative = false,\n  btnText = false,\n  round = false,\n  className,\n  borderWidth = 'medium',\n  elementRef,\n  ...props\n}) => {\n  const wasDisabledRef = useRef<boolean | undefined>(undefined)\n\n  useEffect(() => {\n    const isCurrentlyEnabled = !disabled && !loading\n    const wasDisabledPreviously = wasDisabledRef.current\n    const isFirstRender = wasDisabledPreviously === undefined\n\n    if (\n      isCurrentlyEnabled &&\n      (isFirstRender || wasDisabledPreviously === true) &&\n      onEnabled\n    ) {\n      onEnabled()\n    }\n\n    wasDisabledRef.current = disabled || loading\n  }, [disabled, loading, onEnabled])\n\n  const buttonClasses = classNames('au-btn', {\n    [`au-btn--type-${type}`]: !!type,\n    [`au-btn--size-${size}`]: !!size,\n    [`au-btn--expand-${expand}`]: !!expand,\n    [`au-btn--color-${color}`]: !!color,\n    'au-btn--negative': !!negative,\n    'au-btn--disabled': !!disabled,\n    'au-btn--loading': !!loading,\n    [`au-btn--round-${size}`]: !!round,\n    'btn-text': !!btnText,\n    [`au-btn--border-${borderWidth}`]: !!borderWidth,\n    [className ?? '']: typeof className === 'string',\n  })\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n    if (!disabled && !!onClick) onClick(e)\n  }\n\n  if (as === 'a') {\n    return (\n      <a\n        className={buttonClasses}\n        href={href}\n        target={target}\n        ref={elementRef as React.RefObject<HTMLAnchorElement>}\n        {...props}>\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      className={buttonClasses}\n      onClick={handleClick}\n      type={htmlType}\n      ref={elementRef as React.RefObject<HTMLButtonElement>}\n      disabled={disabled || loading}\n      {...props}>\n      <Conditional\n        condition={loading}\n        renderIf={<IconLoader />}\n        renderElse={children}\n      />\n    </button>\n  )\n}\n"],"names":[],"mappings":";;;;;;AA4CO,MAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,OAA4B,MAAS;AAE5D,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,YAAY,CAAC;AACzC,UAAM,wBAAwB,eAAe;AAC7C,UAAM,gBAAgB,0BAA0B;AAEhD,QACE,uBACC,iBAAiB,0BAA0B,SAC5C,WACA;AACA,gBAAA;AAAA,IACF;AAEA,mBAAe,UAAU,YAAY;AAAA,EACvC,GAAG,CAAC,UAAU,SAAS,SAAS,CAAC;AAEjC,QAAM,gBAAgB,WAAW,UAAU;AAAA,IACzC,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,oBAAoB,CAAC,CAAC;AAAA,IACtB,oBAAoB,CAAC,CAAC;AAAA,IACtB,mBAAmB,CAAC,CAAC;AAAA,IACrB,CAAC,iBAAiB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC7B,YAAY,CAAC,CAAC;AAAA,IACd,CAAC,kBAAkB,WAAW,EAAE,GAAG,CAAC,CAAC;AAAA,IACrC,CAAC,aAAa,EAAE,GAAG,OAAO,cAAc;AAAA,EAAA,CACzC;AAED,WAAS,YAAY,GAAoD;AACvE,QAAI,CAAC,YAAY,CAAC,CAAC,iBAAiB,CAAC;AAAA,EACvC;AAEA,MAAI,OAAO,KAAK;AACd,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACJ,GAAG;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,MACL,UAAU,YAAY;AAAA,MACrB,GAAG;AAAA,MACJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,UACX,8BAAW,YAAA,EAAW;AAAA,UACtB,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AAGN;"}

package/dist/components/Button/styles.css

@@ -1 +1 @@
-.au-btn{align-items:center;border:none;cursor:pointer;display:inline-flex;font-weight:600;justify-content:center;outline:none;text-align:center;text-decoration:none;transition:background-color .3s ease;font-family:"Source Sans 3",sans-serif;gap:8px;height:48px;border-radius:48px;font-size:16px;padding:16px 18px}.au-btn:hover,.au-btn:focus{background-color:#1737a4}.au-btn:active{background-color:#18256c}.au-btn .au-icon,.au-btn .au-icon>svg{width:20px;height:20px;color:#fff}@media(min-width:600px){.au-btn--size-large{height:64px;border-radius:60px;font-size:20px;padding:16px 30px}}.au-btn--size-medium{height:48px;border-radius:48px;font-size:16px;padding:16px 18px}.au-btn--color-default{background-color:#0048db;color:#fff}.au-btn--type-outlined{color:#0048db;border:1px solid #0048db;background-color:transparent}.au-btn--type-outlined .au-icon,.au-btn--type-outlined .au-icon>svg{color:#0048db}.au-btn--type-outlined:hover,.au-btn--type-outlined:focus{background-color:#f2f5fc}.au-btn--type-outlined:active{background-color:#dce8ff}.au-btn--type-ghost{background-color:transparent;border:0;color:#0048db}.au-btn--type-ghost .au-icon,.au-btn--type-ghost .au-icon>svg{color:#0048db}.au-btn--type-ghost:hover,.au-btn--type-ghost:focus{background-color:#f2f5fc;border-color:0}.au-btn--type-ghost:active{background-color:#dce8ff;border:1px solid #1737a4;color:#1737a4}.au-btn--type-link{color:#0048db;padding:0;background:transparent}.au-btn--type-link:hover,.au-btn--type-link:focus{background-color:transparent}.au-btn--expand-x{width:100%}.au-btn--disabled{background-color:#e2e4e9;color:#5e6573;cursor:not-allowed}.au-btn--disabled .au-icon svg{color:#5e6573}.au-btn--disabled:hover,.au-btn--disabled:focus{background-color:#e2e4e9}.au-btn--disabled.au-btn--type-outlined{background-color:#fff;color:#5e6573;border-color:#5e6573}.au-btn--disabled.au-btn--type-outlined:hover,.au-btn--disabled.au-btn--type-outlined:focus{background-color:#fff}.au-btn--disabled.au-btn--type-ghost{background-color:#fff;color:#5e6573}.au-btn--disabled.au-btn--type-ghost:hover,.au-btn--disabled.au-btn--type-ghost:focus{background-color:#fff}.au-btn--disabled.au-btn--type-ghost:active{border:0}.au-btn--loading{background-color:#1737a4;color:#fff;cursor:progress}.au-btn--loading .au-icon{animation:spin 1s infinite linear}.au-btn--loading:hover,.au-btn--loading:focus{background-color:#1737a4}.au-btn--loading.au-btn--type-outlined{background-color:#fff;color:#0048db;border-color:#0048db}.au-btn--loading.au-btn--type-outlined:hover,.au-btn--loading.au-btn--type-outlined:focus{background-color:#fff;color:#0048db}.au-btn--loading.au-btn--type-outlined:hover .au-icon,.au-btn--loading.au-btn--type-outlined:hover .au-icon svg,.au-btn--loading.au-btn--type-outlined:focus .au-icon,.au-btn--loading.au-btn--type-outlined:focus .au-icon svg{color:#0048db}.au-btn--loading.au-btn--type-ghost{background-color:transparent;color:#5e6573}.au-btn--loading.au-btn--type-ghost .au-icon,.au-btn--loading.au-btn--type-ghost .au-icon svg{color:#5e6573}.au-btn--loading.au-btn--type-ghost:hover,.au-btn--loading.au-btn--type-ghost:focus{background-color:transparent;color:#5e6573}.au-btn--round-large .au-icon,.au-btn--round-large .au-icon>svg,.au-btn--round-medium .au-icon,.au-btn--round-medium .au-icon>svg{width:24px;height:24px}.au-btn--round-large{padding:12px;height:48px;width:48px}.au-btn--round-medium{padding:10px;height:40px;width:40px}@keyframes spin{to{transform:rotate(360deg)}}.btn-text{background-color:transparent;border:none;display:flex;color:#0048db;font-weight:600}.btn-text .au-icon svg{color:#0048db}.btn-text:hover,.btn-text:focus{background-color:transparent}
+.au-btn{align-items:center;border:none;cursor:pointer;display:inline-flex;font-weight:600;justify-content:center;outline:none;text-align:center;text-decoration:none;transition:background-color .3s ease;font-family:"Source Sans 3",sans-serif;gap:8px;height:48px;border-radius:48px;font-size:16px;padding:16px 18px}.au-btn:hover,.au-btn:focus{background-color:#1737a4}.au-btn:active{background-color:#18256c}.au-btn .au-icon,.au-btn .au-icon>svg{width:20px;height:20px;color:#fff}@media(min-width:600px){.au-btn--size-large{height:64px;border-radius:60px;font-size:20px;padding:16px 30px}}.au-btn--size-medium{height:48px;border-radius:48px;font-size:16px;padding:16px 18px}.au-btn--color-default{background-color:#0048db;color:#fff}.au-btn--type-outlined{color:#0048db;border:1px solid #0048db;background-color:transparent}.au-btn--type-outlined .au-icon,.au-btn--type-outlined .au-icon>svg{color:#0048db}.au-btn--type-outlined:hover,.au-btn--type-outlined:focus{background-color:#f2f5fc}.au-btn--type-outlined:active{background-color:#dce8ff}.au-btn--type-ghost{background-color:transparent;border:0;color:#0048db}.au-btn--type-ghost .au-icon,.au-btn--type-ghost .au-icon>svg{color:#0048db}.au-btn--type-ghost:hover,.au-btn--type-ghost:focus{background-color:#f2f5fc;border-color:0}.au-btn--type-ghost:active{background-color:#dce8ff;border:1px solid #1737a4;color:#1737a4}.au-btn--type-link{color:#0048db;padding:0;background:transparent}.au-btn--type-link:hover,.au-btn--type-link:focus{background-color:transparent}.au-btn--expand-x{width:100%}.au-btn--disabled{background-color:#e2e4e9;color:#5e6573;cursor:not-allowed}.au-btn--disabled .au-icon svg{color:#5e6573}.au-btn--disabled:hover,.au-btn--disabled:focus{background-color:#e2e4e9}.au-btn--disabled.au-btn--type-outlined{background-color:#fff;color:#5e6573;border-color:#5e6573}.au-btn--disabled.au-btn--type-outlined:hover,.au-btn--disabled.au-btn--type-outlined:focus{background-color:#fff}.au-btn--disabled.au-btn--type-ghost{background-color:#fff;color:#5e6573}.au-btn--disabled.au-btn--type-ghost:hover,.au-btn--disabled.au-btn--type-ghost:focus{background-color:#fff}.au-btn--disabled.au-btn--type-ghost:active{border:0}.au-btn--loading{background-color:#1737a4;color:#fff;cursor:progress}.au-btn--loading .au-icon{animation:spin 1s infinite linear}.au-btn--loading:hover,.au-btn--loading:focus{background-color:#1737a4}.au-btn--loading.au-btn--type-outlined{background-color:#fff;color:#0048db;border-color:#0048db}.au-btn--loading.au-btn--type-outlined:hover,.au-btn--loading.au-btn--type-outlined:focus{background-color:#fff;color:#0048db}.au-btn--loading.au-btn--type-outlined:hover .au-icon,.au-btn--loading.au-btn--type-outlined:hover .au-icon svg,.au-btn--loading.au-btn--type-outlined:focus .au-icon,.au-btn--loading.au-btn--type-outlined:focus .au-icon svg{color:#0048db}.au-btn--loading.au-btn--type-ghost{background-color:transparent;color:#5e6573}.au-btn--loading.au-btn--type-ghost .au-icon,.au-btn--loading.au-btn--type-ghost .au-icon svg{color:#5e6573}.au-btn--loading.au-btn--type-ghost:hover,.au-btn--loading.au-btn--type-ghost:focus{background-color:transparent;color:#5e6573}.au-btn--negative{background-color:#fff;color:#0048db}.au-btn--negative .au-icon,.au-btn--negative .au-icon>svg{color:#0048db}.au-btn--negative:hover,.au-btn--negative:focus{background-color:#f2f5fc;color:#1737a4}.au-btn--negative:hover .au-icon,.au-btn--negative:hover .au-icon>svg,.au-btn--negative:focus .au-icon,.au-btn--negative:focus .au-icon>svg{color:#1737a4}.au-btn--negative:active{background-color:#fff;color:#18256c}.au-btn--negative:active .au-icon,.au-btn--negative:active .au-icon>svg{color:#18256c}.au-btn--negative.au-btn--type-outlined{background-color:transparent;border-color:#fff;color:#fff}.au-btn--negative.au-btn--type-outlined .au-icon,.au-btn--negative.au-btn--type-outlined .au-icon>svg{color:#fff}.au-btn--negative.au-btn--type-outlined:hover,.au-btn--negative.au-btn--type-outlined:focus{background-color:#f2f5fc;border-color:#f2f5fc;color:#1737a4}.au-btn--negative.au-btn--type-outlined:hover .au-icon,.au-btn--negative.au-btn--type-outlined:hover .au-icon>svg,.au-btn--negative.au-btn--type-outlined:focus .au-icon,.au-btn--negative.au-btn--type-outlined:focus .au-icon>svg{color:#1737a4}.au-btn--negative.au-btn--type-outlined:active{background-color:#fff;color:#18256c}.au-btn--negative.au-btn--type-outlined:active .au-icon,.au-btn--negative.au-btn--type-outlined:active .au-icon>svg{color:#18256c}.au-btn--negative.au-btn--type-ghost{background-color:transparent;color:#fff}.au-btn--negative.au-btn--type-ghost .au-icon,.au-btn--negative.au-btn--type-ghost .au-icon>svg{color:#fff}.au-btn--negative.au-btn--type-ghost:hover,.au-btn--negative.au-btn--type-ghost:focus{background-color:#f2f5fc;color:#1737a4}.au-btn--negative.au-btn--type-ghost:hover .au-icon,.au-btn--negative.au-btn--type-ghost:hover .au-icon>svg,.au-btn--negative.au-btn--type-ghost:focus .au-icon,.au-btn--negative.au-btn--type-ghost:focus .au-icon>svg{color:#1737a4}.au-btn--negative.au-btn--type-ghost:active{background-color:#fff;border:0;color:#18256c}.au-btn--negative.au-btn--type-ghost:active .au-icon,.au-btn--negative.au-btn--type-ghost:active .au-icon>svg{color:#18256c}.au-btn--negative.au-btn--disabled{background-color:#f6f7fa;border-color:transparent;color:#c4c9d4}.au-btn--negative.au-btn--disabled .au-icon,.au-btn--negative.au-btn--disabled .au-icon>svg{color:#c4c9d4}.au-btn--negative.au-btn--disabled:hover,.au-btn--negative.au-btn--disabled:focus{background-color:#f6f7fa;color:#c4c9d4}.au-btn--negative.au-btn--loading{background-color:#fff;border-color:transparent;color:#0048db}.au-btn--negative.au-btn--loading .au-icon,.au-btn--negative.au-btn--loading .au-icon>svg,.au-btn--negative.au-btn--loading .au-icon svg{color:#0048db}.au-btn--negative.au-btn--loading:hover,.au-btn--negative.au-btn--loading:focus{background-color:#fff;color:#0048db}.au-btn--round-large .au-icon,.au-btn--round-large .au-icon>svg,.au-btn--round-medium .au-icon,.au-btn--round-medium .au-icon>svg{width:24px;height:24px}.au-btn--round-large{padding:12px;height:48px;width:48px}.au-btn--round-medium{padding:10px;height:40px;width:40px}@keyframes spin{to{transform:rotate(360deg)}}.btn-text{background-color:transparent;border:none;display:flex;color:#0048db;font-weight:600}.btn-text .au-icon svg{color:#0048db}.btn-text:hover,.btn-text:focus{background-color:transparent}

package/dist/components/Calendar/index.es.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "../../index-C6Q03EyZ.js";
-import "../../index-vsYzka4t.js";
+import "../../index-BgBOcVUP.js";
 import "../Button/index.es.js";
 import "../PortalHolder/index.es.js";
-import { a } from "../../index-NIxlEyxx.js";
+import { a } from "../../index-DHwXRotU.js";
 export {
   a as DatepickerCalendar
 };

package/dist/components/CalendarHeader/index.es.js

@@ -1,10 +1,11 @@
 import "react/jsx-runtime";
 import "../../index-C6Q03EyZ.js";
+import "react";
 import "../Icon/index.es.js";
 import "../icons/IconChevronLeft/index.es.js";
 import "../icons/IconChevronRight/index.es.js";
-import "../../index-BvQw_Wgb.js";
-import { C } from "../../index-vsYzka4t.js";
+import "../../index-DnQGzfVW.js";
+import { C } from "../../index-BgBOcVUP.js";
 export {
   C as CalendarHeader
 };

package/dist/components/CalendarHeader/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Card/Container/index.d.ts

@@ -6,5 +6,6 @@ export type CardContainerProps = {
     gap?: number;
     width?: number;
     children: ReactNode;
+    'data-testid'?: string;
 };
-export declare const CardContainer: ({ direction, alignItems, justifyContent, gap, width, children, }: CardContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardContainer: ({ direction, alignItems, justifyContent, gap, width, children, "data-testid": dataTestId, }: CardContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Emphasis/index.d.ts

@@ -5,5 +5,6 @@ export type CardEmphasisProps = {
     }[];
     height?: number;
     maxHeight?: number;
+    'data-testid'?: string;
 };
-export declare const CardEmphasis: ({ content, height, maxHeight, }: CardEmphasisProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardEmphasis: ({ content, height, maxHeight, "data-testid": dataTestId, }: CardEmphasisProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Image/index.d.ts

@@ -3,5 +3,6 @@ export type CardImageProps = {
     alt?: string;
     width?: number;
     height?: number;
+    'data-testid'?: string;
 };
-export declare const CardImage: ({ src, alt, width, height }: CardImageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardImage: ({ src, alt, width, height, "data-testid": dataTestId, }: CardImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Root/index.d.ts

@@ -11,5 +11,6 @@ export type CardRootProps = {
     className?: string;
     children: ReactNode;
     ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
 };
-export declare const CardRoot: ({ border, color, width, height, maxWidth, maxHeight, hoverShadow, paddingLess, children, className, ref }: CardRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardRoot: ({ border, color, width, height, maxWidth, maxHeight, hoverShadow, paddingLess, children, className, ref, "data-testid": dataTestId, }: CardRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Tag/index.d.ts

@@ -3,5 +3,6 @@ export type CardTagProps = {
     color?: 'primary' | 'secondary';
     icon?: ReactNode;
     children: ReactNode;
+    'data-testid'?: string;
 };
-export declare const CardTag: ({ color, icon, children, }: CardTagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardTag: ({ color, icon, children, "data-testid": dataTestId, }: CardTagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/index.es.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
 import { PureSwitch } from "../Pure/index.es.js";
-import './styles.css';const CardSwitch = ({ isActive, label, id, disabled, activateCallBack, deactivateCallBack, shouldFadeOutAfterActivate }) => {
+import './styles.css';const CardSwitch = ({ isActive, label, id, disabled, activateCallBack, deactivateCallBack, shouldFadeOutAfterActivate, "data-testid": dataTestId }) => {
   const cardSwitchClassNames = classNames("au-card-switch", {});
   const cardSwitchWrapperClassNames = classNames("au-card-switch-wrapper", {
     "au-card-switch-wrapper--fade-out": shouldFadeOutAfterActivate && isActive,
     "au-card-switch-wrapper--active": isActive
   });
-  return /* @__PURE__ */ jsx("div", { className: cardSwitchClassNames, children: /* @__PURE__ */ jsx("div", { className: cardSwitchWrapperClassNames, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cardSwitchClassNames, "data-testid": dataTestId, children: /* @__PURE__ */ jsx("div", { className: cardSwitchWrapperClassNames, children: /* @__PURE__ */ jsx(
     PureSwitch,
     {
       isActive,

package/dist/components/Card/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Switch/Card/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PureSwitch } from '../Pure';\n\nimport './styles.scss';\nimport { CardSwitchProps } from './types';\n\nexport const CardSwitch: React.FC<CardSwitchProps> = ({ isActive, label, id, disabled, activateCallBack, deactivateCallBack , shouldFadeOutAfterActivate }) => {\n\t\n\tconst cardSwitchClassNames = classNames(\"au-card-switch\",  {\n\t\t\n\t});\n\n\tconst cardSwitchWrapperClassNames = classNames(\"au-card-switch-wrapper\",  {\n\t\t\"au-card-switch-wrapper--fade-out\": shouldFadeOutAfterActivate && isActive,\n\t\t\"au-card-switch-wrapper--active\": isActive\n\t});\n\n\treturn (\n    <div className={cardSwitchClassNames}>\n    <div className={cardSwitchWrapperClassNames}>\n\t\t\t<PureSwitch \n\t\t\t\tisActive={isActive}\n\t\t\t\tlabel={label}\n\t\t\t\tid={id}\n\t\t\t\tactivateCallBack={activateCallBack}\n\t\t\t\tdeactivateCallBack={deactivateCallBack}\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n    </div>\n</div>\n  )\n}\n"],"names":[],"mappings":";;;AAMO,MAAM,aAAwC,CAAC,EAAE,UAAU,OAAO,IAAI,UAAU,kBAAkB,oBAAqB,iCAAiC;AAE9J,QAAM,uBAAuB,WAAW,kBAAmB,EAE1D;AAED,QAAM,8BAA8B,WAAW,0BAA2B;AAAA,IACzE,oCAAoC,8BAA8B;AAAA,IAClE,kCAAkC;AAAA,EAAA,CAClC;AAED,6BACI,OAAA,EAAI,WAAW,sBAChB,UAAA,oBAAC,OAAA,EAAI,WAAW,6BACjB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEA,EAAA,CACJ;AAEA;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Switch/Card/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PureSwitch } from '../Pure';\n\nimport './styles.scss';\nimport { CardSwitchProps } from './types';\n\nexport const CardSwitch: React.FC<CardSwitchProps> = ({ isActive, label, id, disabled, activateCallBack, deactivateCallBack , shouldFadeOutAfterActivate, 'data-testid': dataTestId }) => {\n\t\n\tconst cardSwitchClassNames = classNames(\"au-card-switch\",  {\n\t\t\n\t});\n\n\tconst cardSwitchWrapperClassNames = classNames(\"au-card-switch-wrapper\",  {\n\t\t\"au-card-switch-wrapper--fade-out\": shouldFadeOutAfterActivate && isActive,\n\t\t\"au-card-switch-wrapper--active\": isActive\n\t});\n\n\treturn (\n    <div className={cardSwitchClassNames} data-testid={dataTestId}>\n    <div className={cardSwitchWrapperClassNames}>\n\t\t\t<PureSwitch \n\t\t\t\tisActive={isActive}\n\t\t\t\tlabel={label}\n\t\t\t\tid={id}\n\t\t\t\tactivateCallBack={activateCallBack}\n\t\t\t\tdeactivateCallBack={deactivateCallBack}\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n    </div>\n</div>\n  )\n}\n"],"names":[],"mappings":";;;AAMO,MAAM,aAAwC,CAAC,EAAE,UAAU,OAAO,IAAI,UAAU,kBAAkB,oBAAqB,4BAA4B,eAAe,WAAA,MAAiB;AAEzL,QAAM,uBAAuB,WAAW,kBAAmB,EAE1D;AAED,QAAM,8BAA8B,WAAW,0BAA2B;AAAA,IACzE,oCAAoC,8BAA8B;AAAA,IAClE,kCAAkC;AAAA,EAAA,CAClC;AAED,SACG,oBAAC,SAAI,WAAW,sBAAsB,eAAa,YACnD,UAAA,oBAAC,OAAA,EAAI,WAAW,6BACjB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEA,EAAA,CACJ;AAEA;"}

package/dist/components/Carousel/index.es.js

@@ -368,7 +368,8 @@ const Carousel = ({
   items,
   type,
   mobileText = "",
-  draggable = true
+  draggable = true,
+  "data-testid": dataTestId
 }) => {
   const {
     rootRef,
@@ -387,7 +388,7 @@ const Carousel = ({
     items
   });
   const cl = classNames("au-carousel", { "au-carousel--draggable": draggable });
-  return /* @__PURE__ */ jsxs("div", { className: cl, ref: rootRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cl, ref: rootRef, "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsx(
       "ul",
       {