@consumidor-positivo/aurora 0.11.1 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react'\nimport { If, Switch, Case } from '@components/misc'\nimport { Text } from '@components/Text'\nimport { Chip } from '@components/Chip'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n  tabs: TabItemProps[]\n  type?: 1 | 2\n  areTabsHidden?: boolean\n  initialTab?: string\n  withLabel?: boolean\n  rightSlotChildren?: React.ReactNode\n  onClick?: (value: string) => void\n}\n\nexport type TabItemProps = {\n  tab: string\n  title: string\n  children?: React.ReactElement\n  icon?: React.ReactNode\n}\n\nexport const Tabs = ({\n  tabs,\n  type = 1,\n  initialTab,\n  onClick,\n  areTabsHidden,\n  rightSlotChildren,\n  withLabel = false,\n}: TabsProps) => {\n  const [isClicked, setIsClicked] = useState(false)\n  const [currButton, setCurrButton] = useState(initialTab ?? '')\n  const [activeTab, setActiveTab] = useState(initialTab)\n  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })\n\n  const tabsRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setActiveTab(initialTab)\n  }, [initialTab])\n\n  useEffect(() => {\n    if (activeTab && type === 2) {\n      const container = tabsRef.current\n      if (container) {\n        const activeElement = container.querySelector(\n          '.au-tabs__btns-option--active',\n        ) as HTMLElement\n\n        if (activeElement) {\n          setIndicatorStyle({\n            left: activeElement.offsetLeft,\n            width: activeElement.offsetWidth,\n          })\n        }\n      }\n    }\n  }, [activeTab, tabs, type])\n\n  const handleClick = (item: TabItemProps) => {\n    onClick && onClick(item.tab)\n    setCurrButton(item.tab)\n    setActiveTab(item.tab)\n    setIsClicked(true)\n  }\n\n  return (\n    <>\n      <If condition={!areTabsHidden}>\n        <div\n          className={classNames('au-tabs', {\n            [`au-tabs--type-${type}`]: !!type,\n          })}>\n          <div className=\"au-tabs__container\">\n            <div className=\"au-tabs__left-panel\">\n              <If condition={!!withLabel}>\n                <Text\n                  color=\"secondary\"\n                  variant=\"body-small\"\n                  className=\"au-tabs__label\">\n                  Filtrar por:{' '}\n                </Text>\n              </If>\n              <div className=\"au-tabs__btns\" ref={tabsRef}>\n                {tabs.map((item: TabItemProps) => {\n                  return (\n                    <Switch key={item.tab}>\n                      <Case condition={type === 1}>\n                        <Chip\n                          label={item.title}\n                          icon={item.icon}\n                          isActive={\n                            (isClicked && item.tab === currButton) ||\n                            activeTab === item.tab\n                          }\n                          onClick={() => handleClick(item)}\n                        />\n                      </Case>\n                      <Case condition={type === 2}>\n                        <button\n                          type=\"button\"\n                          className={classNames('au-tabs__btns-option', {\n                            'au-tabs__btns-option--active':\n                              activeTab === item.tab,\n                          })}\n                          onClick={() => handleClick(item)}>\n                          {item.title}\n                        </button>\n                      </Case>\n                    </Switch>\n                  )\n                })}\n                <If condition={type === 2}>\n                  <div\n                    className=\"au-tabs__btns-indicator\"\n                    aria-hidden=\"true\"\n                    style={{\n                      left: `${indicatorStyle.left}px`,\n                      width: `${indicatorStyle.width}px`,\n                    }}\n                  />\n                </If>\n              </div>\n            </div>\n            <If condition={!!rightSlotChildren}>{rightSlotChildren}</If>\n          </div>\n        </div>\n      </If>\n\n      {tabs.map(({ children, tab }: TabItemProps) => {\n        return (\n          <div\n            className={`au-tabs__children children-${tab}`}\n            key={`au-tabs-${tab}`}>\n            <If condition={currButton === tab || activeTab === tab}>\n              {children}\n            </If>\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\nexport default Tabs\n"],"names":["If"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react'\nimport { If } from '@components/misc'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n  tabs: TabItemProps[]\n  /** Hides the tab bar and renders only the active panel. Not mapped in Figma. */\n  areTabsHidden?: boolean\n  initialTab?: string\n  /** Content rendered at the right side of the tab bar. Not mapped in Figma. */\n  rightSlotChildren?: React.ReactNode\n  onClick?: (value: string) => void\n  'data-testid'?: string\n}\n\nexport type TabItemProps = {\n  tab: string\n  title: string\n  children?: React.ReactElement\n}\n\nexport const Tabs = ({\n  tabs,\n  initialTab,\n  onClick,\n  areTabsHidden,\n  rightSlotChildren,\n  'data-testid': dataTestId,\n}: TabsProps) => {\n  const [activeTab, setActiveTab] = useState(initialTab)\n  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })\n\n  const tabsRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setActiveTab(initialTab)\n  }, [initialTab])\n\n  useEffect(() => {\n    const container = tabsRef.current\n    if (activeTab && container) {\n      const activeElement = container.querySelector(\n        '.au-tabs__btns-option--active',\n      ) as HTMLElement\n\n      if (activeElement) {\n        setIndicatorStyle({\n          left: activeElement.offsetLeft,\n          width: activeElement.offsetWidth,\n        })\n      }\n    }\n  }, [activeTab, tabs])\n\n  const handleClick = (item: TabItemProps) => {\n    onClick && onClick(item.tab)\n    setActiveTab(item.tab)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return\n\n    const container = tabsRef.current\n    if (!container) return\n\n    const tabButtons = Array.from(\n      container.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'),\n    )\n    const currentIndex = tabButtons.indexOf(\n      document.activeElement as HTMLButtonElement,\n    )\n    if (currentIndex === -1) return\n\n    event.preventDefault()\n\n    const lastIndex = tabButtons.length - 1\n    const nextIndex = {\n      ArrowLeft: currentIndex === 0 ? lastIndex : currentIndex - 1,\n      ArrowRight: currentIndex === lastIndex ? 0 : currentIndex + 1,\n      Home: 0,\n      End: lastIndex,\n    }[event.key as 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End']\n\n    tabButtons[nextIndex]?.focus()\n  }\n\n  const focusableTab = activeTab ?? tabs[0]?.tab\n\n  return (\n    <>\n      <If condition={!areTabsHidden}>\n        <div className=\"au-tabs\" data-testid={dataTestId}>\n          <div className=\"au-tabs__container\">\n            <div\n              className=\"au-tabs__btns\"\n              role=\"tablist\"\n              ref={tabsRef}\n              onKeyDown={handleKeyDown}>\n              {tabs.map((item: TabItemProps) => (\n                <button\n                  key={item.tab}\n                  type=\"button\"\n                  role=\"tab\"\n                  id={`au-tab-${item.tab}`}\n                  aria-selected={activeTab === item.tab}\n                  aria-controls={`au-tabpanel-${item.tab}`}\n                  tabIndex={item.tab === focusableTab ? 0 : -1}\n                  className={classNames('au-tabs__btns-option', {\n                    'au-tabs__btns-option--active': activeTab === item.tab,\n                  })}\n                  onClick={() => handleClick(item)}>\n                  {item.title}\n                </button>\n              ))}\n              <div\n                className=\"au-tabs__btns-indicator\"\n                aria-hidden=\"true\"\n                style={{\n                  left: `${indicatorStyle.left}px`,\n                  width: `${indicatorStyle.width}px`,\n                }}\n              />\n            </div>\n            <If condition={!!rightSlotChildren}>{rightSlotChildren}</If>\n          </div>\n        </div>\n      </If>\n\n      {tabs.map(({ children, tab }: TabItemProps) => {\n        return (\n          <div\n            role=\"tabpanel\"\n            id={`au-tabpanel-${tab}`}\n            aria-labelledby={`au-tab-${tab}`}\n            className={`au-tabs__children children-${tab}`}\n            key={`au-tabs-${tab}`}>\n            <If condition={activeTab === tab}>{children}</If>\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\nexport default Tabs\n"],"names":["_a","If"],"mappings":"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"}

package/dist/components/Tabs/styles.css

@@ -1 +1 @@
-.au-tabs--type-2{border-bottom:1px solid #e2e4e9}.au-tabs--type-2 button{border:0;background-color:transparent}.au-tabs--type-2 .au-tabs__btns{margin-bottom:0}.au-tabs__container{display:flex;flex-direction:column}@media(min-width:600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__left-panel{display:flex;align-items:center;gap:8px}.au-tabs__label{display:none}@media(min-width:600px){.au-tabs__label{display:unset}}.au-tabs__btns{display:flex;position:relative;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;margin-bottom:20px}.au-tabs__btns::-webkit-scrollbar{display:none}@media(min-width:600px){.au-tabs__btns{overflow:unset;margin-bottom:0}}.au-tabs__btns-option{border:none;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer;line-height:20px;color:#454a54;font-size:14px;font-family:Lexend Deca,sans-serif;padding:8px 16px;position:relative;transition:all .3s ease}.au-tabs__btns-option--active{color:#0048db;font-weight:700}.au-tabs__btns-indicator{position:absolute;bottom:-1px;left:0;height:2px;background-color:#0048db;transition:all .3s cubic-bezier(.4,0,.2,1)}.au-tabs__children{margin-top:24px}@media(min-width:600px){.au-tabs__children{margin-top:32px}}
+.au-tabs{border-bottom:1px solid #e2e4e9}.au-tabs__container{display:flex;flex-direction:column}@media(min-width:600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__btns{display:flex;position:relative;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.au-tabs__btns::-webkit-scrollbar{display:none}@media(min-width:600px){.au-tabs__btns{overflow:unset}}.au-tabs__btns-option{display:flex;flex:1 0 0;align-items:center;justify-content:center;min-height:36px;border:none;background:none;cursor:pointer;padding:8px 24px;font-family:Lexend Deca,sans-serif;font-size:14px;font-weight:400;line-height:1.4;color:#454a54;position:relative;transition:all .3s ease}@media(min-width:600px){.au-tabs__btns-option{flex:0 0 auto}}.au-tabs__btns-option--active{color:#0048db;font-weight:600}.au-tabs__btns-indicator{position:absolute;bottom:-1px;left:0;height:2px;background-color:#0048db;transition:all .3s cubic-bezier(.4,0,.2,1)}.au-tabs__children{margin-top:24px}@media(min-width:600px){.au-tabs__children{margin-top:32px}}

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

@@ -1,98 +1,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
-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 { IconSlash } from "../icons/IconSlash/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 { Conditional } from "../Conditional/index.es.js";
-import './styles.css';const Tag = ({
-  status,
-  border = "square",
-  size = "medium",
-  type = "read-only",
+const CardTag = ({
   color = "primary",
-  customIcon,
-  text,
+  icon,
   children,
-  fullWidth,
-  actionButton
+  "data-testid": dataTestId
 }) => {
-  const statusMap = {
-    success: {
-      option: "success",
-      icon: /* @__PURE__ */ jsx(IconCheck, { rawColor: COLOR_SUCCESS_50 })
-    },
-    error: {
-      option: "error",
-      icon: /* @__PURE__ */ jsx(IconAlertOctagon, { rawColor: COLOR_ERROR_50 })
-    },
-    warning: {
-      option: "warning",
-      icon: /* @__PURE__ */ jsx(IconAlertTriangle, { rawColor: COLOR_WARNING_50 })
-    },
-    info: { option: "info", icon: /* @__PURE__ */ jsx(IconInfo, { rawColor: COLOR_INFO_50 }) },
-    support: {
-      option: "support",
-      icon: /* @__PURE__ */ jsx(IconInfo, { rawColor: COLOR_BRAND_CYAN_50 })
-    },
-    neutral: {
-      option: "neutral",
-      icon: /* @__PURE__ */ jsx(IconSlash, { rawColor: COLOR_NEUTRAL_70 })
-    },
-    custom: {
-      option: "custom",
-      icon: customIcon
-    }
-  };
-  const tagClasses = classNames("au-tag", {
-    [`au-tag--${statusMap[status].option}`]: statusMap[status].option,
-    [`au-tag--size-${size}`]: !!size,
-    [`au-tag--type-${type}`]: !!type,
-    [`au-tag--border-${border}`]: !!border,
-    [`au-tag--color-${color}`]: !!color,
-    [`au-tag--full-width`]: !!fullWidth
+  const tagClasses = classNames("au-card__tag", {
+    "au-card__tag--primary": color === "primary",
+    "au-card__tag--secondary": color === "secondary"
   });
-  const isBadgeTag = type === "badge";
-  const supportText = isBadgeTag ? text.toUpperCase() : text;
-  return /* @__PURE__ */ jsxs("div", { className: tagClasses, children: [
-    /* @__PURE__ */ jsxs("div", { className: "au-tag__content", children: [
-      /* @__PURE__ */ jsx(
-        Conditional,
-        {
-          condition: !isBadgeTag,
-          renderIf: /* @__PURE__ */ jsx("div", { className: "au-tag__content-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-            Conditional,
-            {
-              condition: !!customIcon,
-              renderIf: customIcon,
-              renderElse: statusMap[status].icon
-            }
-          ) })
-        }
-      ),
-      /* @__PURE__ */ jsx("p", { className: `au-tag__content-support-text`, children: supportText }),
-      /* @__PURE__ */ jsx(
-        Conditional,
-        {
-          condition: !!actionButton,
-          renderIf: /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "au-tag__action-btn",
-              onClick: actionButton == null ? void 0 : actionButton.onClick,
-              children: actionButton == null ? void 0 : actionButton.content
-            }
-          )
-        }
-      )
-    ] }),
-    children
+  return /* @__PURE__ */ jsxs("div", { className: tagClasses, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { children })
   ] });
 };
 export {
-  Tag
+  CardTag
 };
 //# sourceMappingURL=index.es.js.map

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

@@ -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  actionButton?: { content?: string; onClick?: () => void }\n}\n\n/**\n * @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.\n * - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.\n * - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.\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\" aria-hidden=\"true\">\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":";;;;;;;;;;AAqCO,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,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAA,EAAkB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAEvD,MAAM,EAAE,QAAQ,QAAQ,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe,EAAA;AAAA,IACjE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAEjD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,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;AAEtD,SACE,qBAAC,OAAA,EAAI,WAAW,YACd,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAA,EAAI,WAAU,wBAAuB,eAAY,QAChD,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,EAChC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,oBAAC,KAAA,EAAE,WAAW,gCAAiC,UAAA,aAAY;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,UAAA,6CAAc;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAEJ,GACF;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { ReactNode } from 'react'\n\nexport type CardTagProps = {\n  color?: 'primary' | 'secondary'\n  icon?: ReactNode\n  children: ReactNode\n  'data-testid'?: string\n}\nexport const CardTag = ({\n  color = 'primary',\n  icon,\n  children,\n  'data-testid': dataTestId,\n}: CardTagProps) => {\n  const tagClasses = classNames('au-card__tag', {\n    'au-card__tag--primary': color === 'primary',\n    'au-card__tag--secondary': color === 'secondary',\n  })\n  return (\n    <div className={tagClasses} data-testid={dataTestId}>\n      <span aria-hidden=\"true\">{icon}</span>\n      <span>{children}</span>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AASO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAoB;AAClB,QAAM,aAAa,WAAW,gBAAgB;AAAA,IAC5C,yBAAyB,UAAU;AAAA,IACnC,2BAA2B,UAAU;AAAA,EAAA,CACtC;AACD,SACE,qBAAC,OAAA,EAAI,WAAW,YAAY,eAAa,YACvC,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,eAAY,QAAQ,UAAA,MAAK;AAAA,IAC/B,oBAAC,UAAM,SAAA,CAAS;AAAA,EAAA,GAClB;AAEJ;"}

package/dist/components/Text/styles.css

@@ -1 +1 @@
-.au-text{font-family:"Source Sans 3",sans-serif;font-weight:400}.au-text--color-common{color:#16181d}.au-text--color-secondary{color:#454a54}.au-text--color-white{color:#fff}.au-text--weight-bold{font-weight:700}.au-text--weight-semibold{font-weight:600}.au-text--weight-medium{font-weight:500}.au-text--weight-regular{font-weight:400}.au-text--weight-light{font-weight:300}.au-text--display-large,.au-text--display-medium,.au-text--display-small{font-family:Lexend Deca,sans-serif}.au-text--display-large{font-size:56px;line-height:78px}.au-text--display-medium{font-size:48px;line-height:67px}.au-text--display-small{font-size:40px;line-height:56px}.au-text--heading-big,.au-text--heading-large,.au-text--heading-medium,.au-text--heading-small,.au-text--heading-micro{font-family:Lexend Deca,sans-serif}.au-text--heading-big{font-size:32px;line-height:45px}.au-text--heading-large{font-size:28px;line-height:39px}.au-text--heading-medium{font-size:24px;line-height:34px}.au-text--heading-small{font-size:20px;line-height:28px}.au-text--heading-micro{font-size:16px;line-height:24px}.au-text--body-big,.au-text--body-large,.au-text--body-medium,.au-text--body-small{font-family:"Source Sans 3",sans-serif}.au-text--body-big{font-size:24px;line-height:34px}.au-text--body-large{font-size:20px;line-height:28px}.au-text--body-medium{font-size:16px;line-height:24px}.au-text--body-small{font-size:14px;line-height:22px}.au-text--caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}@media(min-width:1024px){.au-text--desk-display-large,.au-text--desk-display-medium,.au-text--desk-display-small{font-family:Lexend Deca,sans-serif}.au-text--desk-display-large{font-size:56px;line-height:78px}.au-text--desk-display-medium{font-size:48px;line-height:67px}.au-text--desk-display-small{font-size:40px;line-height:56px}.au-text--desk-heading-big,.au-text--desk-heading-large,.au-text--desk-heading-medium,.au-text--desk-heading-small,.au-text--desk-heading-micro{font-family:Lexend Deca,sans-serif}.au-text--desk-heading-big{font-size:32px;line-height:45px}.au-text--desk-heading-large{font-size:28px;line-height:39px}.au-text--desk-heading-medium{font-size:24px;line-height:34px}.au-text--desk-heading-small{font-size:20px;line-height:28px}.au-text--desk-heading-micro{font-size:16px;line-height:24px}.au-text--desk-body-big,.au-text--desk-body-large,.au-text--desk-body-medium,.au-text--desk-body-small{font-family:"Source Sans 3",sans-serif}.au-text--desk-body-big{font-size:24px;line-height:34px}.au-text--desk-body-large{font-size:20px;line-height:28px}.au-text--desk-body-medium{font-size:16px;line-height:24px}.au-text--desk-body-small{font-size:14px;line-height:22px}.au-text--desk-caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}}
+.au-text{font-family:"Source Sans 3",sans-serif;font-weight:400}.au-text--color-common{color:#16181d}.au-text--color-secondary{color:#454a54}.au-text--color-white{color:#fff}.au-text--weight-bold{font-weight:700}.au-text--weight-semibold{font-weight:600}.au-text--weight-medium{font-weight:500}.au-text--weight-regular{font-weight:400}.au-text--weight-light{font-weight:300}.au-text--display-large,.au-text--display-medium,.au-text--display-small{font-family:Lexend Deca,sans-serif}.au-text--display-large{font-size:56px;line-height:78px}.au-text--display-medium{font-size:48px;line-height:67px}.au-text--display-small{font-size:40px;line-height:56px}.au-text--heading-big,.au-text--heading-large,.au-text--heading-medium,.au-text--heading-small,.au-text--heading-minimum,.au-text--heading-micro,.au-text--heading-nano{font-family:Lexend Deca,sans-serif}.au-text--heading-big{font-size:32px;line-height:45px}.au-text--heading-large{font-size:28px;line-height:39px}.au-text--heading-medium{font-size:24px;line-height:34px}.au-text--heading-small{font-size:20px;line-height:28px}.au-text--heading-minimum{font-size:18px;line-height:24px}.au-text--heading-micro{font-size:16px;line-height:24px}.au-text--heading-nano{font-size:14px;line-height:24px}.au-text--body-big,.au-text--body-large,.au-text--body-medium,.au-text--body-small{font-family:"Source Sans 3",sans-serif}.au-text--body-big{font-size:24px;line-height:34px}.au-text--body-large{font-size:20px;line-height:28px}.au-text--body-medium{font-size:16px;line-height:24px}.au-text--body-small{font-size:14px;line-height:22px}.au-text--caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}@media(min-width:1024px){.au-text--desk-display-large,.au-text--desk-display-medium,.au-text--desk-display-small{font-family:Lexend Deca,sans-serif}.au-text--desk-display-large{font-size:56px;line-height:78px}.au-text--desk-display-medium{font-size:48px;line-height:67px}.au-text--desk-display-small{font-size:40px;line-height:56px}.au-text--desk-heading-big,.au-text--desk-heading-large,.au-text--desk-heading-medium,.au-text--desk-heading-small,.au-text--desk-heading-minimum,.au-text--desk-heading-micro,.au-text--desk-heading-nano{font-family:Lexend Deca,sans-serif}.au-text--desk-heading-big{font-size:32px;line-height:45px}.au-text--desk-heading-large{font-size:28px;line-height:39px}.au-text--desk-heading-medium{font-size:24px;line-height:34px}.au-text--desk-heading-small{font-size:20px;line-height:28px}.au-text--desk-heading-minimum{font-size:18px;line-height:24px}.au-text--desk-heading-micro{font-size:16px;line-height:24px}.au-text--desk-heading-nano{font-size:14px;line-height:24px}.au-text--desk-body-big,.au-text--desk-body-large,.au-text--desk-body-medium,.au-text--desk-body-small{font-family:"Source Sans 3",sans-serif}.au-text--desk-body-big{font-size:24px;line-height:34px}.au-text--desk-body-large{font-size:20px;line-height:28px}.au-text--desk-body-medium{font-size:16px;line-height:24px}.au-text--desk-body-small{font-size:14px;line-height:22px}.au-text--desk-caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:19px}}

package/dist/components/Text/types.d.ts

@@ -1,4 +1,4 @@
-type TextVariant = 'display-large' | 'display-medium' | 'display-small' | 'heading-big' | 'heading-large' | 'heading-medium' | 'heading-small' | 'heading-micro' | 'body-big' | 'body-large' | 'body-medium' | 'body-small' | 'caption';
+type TextVariant = 'display-large' | 'display-medium' | 'display-small' | 'heading-big' | 'heading-large' | 'heading-medium' | 'heading-small' | 'heading-minimum' | 'heading-micro' | 'heading-nano' | 'body-big' | 'body-large' | 'body-medium' | 'body-small' | 'caption';
 type TextWeight = 'bold' | 'semibold' | 'medium' | 'regular' | 'light';
 type TextColor = 'common' | 'secondary' | 'white';
 export interface TextProps extends React.HTMLAttributes<HTMLElement> {

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TextareaField/index.tsx"],"sourcesContent":["import Field from '../Field'\n\nexport type TextAreaProps =\n  React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    showOptionalLabel?: boolean\n    success?: boolean\n    error?: boolean\n    errorMessage?: string\n    helpMessage?: string\n    label?: string\n    textAreaStyle?: React.CSSProperties\n    textareaRef?: React.RefObject<HTMLTextAreaElement>\n    horizontalResize?: boolean\n  }\n\nexport const TextAreaField = ({\n  showOptionalLabel,\n  required,\n  success,\n  error,\n  errorMessage,\n  helpMessage,\n  label,\n  id,\n  disabled,\n  style,\n  className,\n  textAreaStyle,\n  textareaRef,\n  maxLength,\n  horizontalResize,\n  ...props\n}: TextAreaProps) => {\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        required={required}\n        showOptionalLabel={showOptionalLabel}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <Field.TextArea\n        id={id}\n        textareaRef={textareaRef}\n        disabled={disabled}\n        style={textAreaStyle}\n        maxLength={maxLength}\n        horizontalResize={horizontalResize}\n        {...props}\n      />\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;AAeO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqB;AACnB,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN,oBAAC,MAAM,SAAN,EAAc,UAAU,CAAC,CAAC,OAAO,cAA4B,YAAA,CAA0B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9F;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TextareaField/index.tsx"],"sourcesContent":["import Field from '../Field'\n\nexport type TextAreaProps =\n  React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    showOptionalLabel?: boolean\n    success?: boolean\n    error?: boolean\n    errorMessage?: string\n    helpMessage?: string\n    label?: string\n    textAreaStyle?: React.CSSProperties\n    textareaRef?: React.RefObject<HTMLTextAreaElement>\n    /** Allows the user to resize the textarea horizontally. Not mapped in Figma. */\n    horizontalResize?: boolean\n  }\n\nexport const TextAreaField = ({\n  showOptionalLabel,\n  required,\n  success,\n  error,\n  errorMessage,\n  helpMessage,\n  label,\n  id,\n  disabled,\n  style,\n  className,\n  textAreaStyle,\n  textareaRef,\n  maxLength,\n  horizontalResize,\n  ...props\n}: TextAreaProps) => {\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        required={required}\n        showOptionalLabel={showOptionalLabel}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <Field.TextArea\n        id={id}\n        textareaRef={textareaRef}\n        disabled={disabled}\n        style={textAreaStyle}\n        maxLength={maxLength}\n        horizontalResize={horizontalResize}\n        {...props}\n      />\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;AAgBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqB;AACnB,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN,oBAAC,MAAM,SAAN,EAAc,UAAU,CAAC,CAAC,OAAO,cAA4B,YAAA,CAA0B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9F;"}

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

@@ -143,7 +143,8 @@ const TokenField = ({
   timer,
   onChangeTimer,
   onComplete,
-  onChange
+  onChange,
+  "data-testid": dataTestId
 }) => {
   const {
     tokenMap,
@@ -171,7 +172,7 @@ const TokenField = ({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx("div", { ref: rootElementRef, className: "au-token-field__container", children: [...Object.values(tokenMap)].map((_, i) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { ref: rootElementRef, className: "au-token-field__container", "data-testid": dataTestId, children: [...Object.values(tokenMap)].map((_, i) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
           Field.Input,
           {
             customclass: "au-token-field__input",

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n  size: number\n  onComplete?: (token: string) => void\n  onChange?: (value: string) => void\n  onChangeTimer?: (time: number) => void\n  timer?: number | null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n  const numberValue = Number(value)\n  const isNaN = Number.isNaN(numberValue)\n  return !isNaN\n}\n\nexport const useTokenField = ({\n  size,\n  onComplete,\n  onChange,\n  onChangeTimer,\n  timer = null,\n}: UseTokenInputProps) => {\n  const rootElementRef = useRef<HTMLDivElement | null>(null)\n  const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n  const [timerTime, setTimerTime] = useState<number | null>(timer)\n\n  useEffect(_handleValueEvents, [tokenMap])\n  useEffect(_handleStartTimer, [timer])\n  useEffect(_handleTimerUpdate, [timerTime])\n\n  function _handleValueEvents() {\n    const tokenValueArray =\n      Object.keys(tokenMap).map((key) => tokenMap[key]) || []\n    const stringField = tokenValueArray.join('')\n    const isTokenValid = stringField.length === size\n    if (onChange) onChange(stringField)\n\n    if (!!isTokenValid && !!onComplete) {\n      onComplete(stringField)\n    }\n  }\n\n  function _handleStartTimer() {\n    let interval: NodeJS.Timeout\n\n    if (timer) {\n      interval = setInterval(() => {\n        setTimerTime((currentTime) => {\n          if (!currentTime) return null\n          const reachedTheLimit = currentTime === 0\n          if (reachedTheLimit) {\n            return timer\n          } else {\n            return currentTime - 1\n          }\n        })\n      }, 1000)\n\n      if (interval) {\n        return () => clearInterval(interval)\n      }\n    }\n  }\n\n  function _handleTimerUpdate() {\n    if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n    if (timerTime === 0) {\n      setTokenMap(_getDefaultTokens())\n      _resetFocus()\n    }\n  }\n\n  function _getDefaultTokens() {\n    return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n  }\n\n  function _goToNextInput(i: number) {\n    const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n      `[data-token-i='${i + 1}']`,\n    )\n    if (nextItem) nextItem.focus()\n  }\n\n  function _resetFocus() {\n    const firstItem =\n      rootElementRef.current?.querySelector<HTMLInputElement>(\n        `[data-token-i='0']`,\n      )\n    firstItem?.focus()\n  }\n\n  function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n    const hasBackspacePressed = e.which === 8 || e.key === 'Backspace'\n    if (hasBackspacePressed) {\n      const previousItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i - 1}']`,\n        )\n      const currentItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i}']`,\n        )\n\n      setTokenMap({ ...tokenMap, [i]: '' })\n      if (!!previousItem && !currentItem?.value) previousItem.focus()\n    }\n  }\n\n  function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n    e.preventDefault()\n    let value = e?.target?.value\n    const isNumberValid = inputtedValueIsValid(value)\n    const isEmpty = value === ''\n\n    if (isNumberValid) {\n      let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n        (index) => tokenMap[index] === '',\n      )\n\n      if (value.length > 1) {\n        firstEmptyIndex = firstEmptyIndex - 1\n        value = value[value.length - 1]\n      }\n\n      if (firstEmptyIndex < 0) {\n        if (value) {\n          setTokenMap({ ...tokenMap, [i]: value })\n        }\n\n        return\n      }\n\n      setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n      if (!isEmpty) _goToNextInput(firstEmptyIndex)\n    }\n  }\n\n  function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n    e.preventDefault()\n    const value = e.clipboardData.getData('Text')\n    const isNumberValid = inputtedValueIsValid(value)\n\n    if (isNumberValid) {\n      const arrValue = value.split('').slice(0, size)\n      setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n      _goToNextInput(arrValue.length - 1)\n    } else {\n      setTokenMap(_getDefaultTokens())\n    }\n  }\n\n  return {\n    onKeyUpHandler,\n    onChangeNumber,\n    onPasteNumber,\n    tokenMap,\n    rootElementRef,\n  }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n  label?: string\n  disabled?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  helpMessage?: string\n  showOptionalLabel?: boolean\n  size?: number\n  type?: 'number' | 'password' | 'text'\n  style?: React.CSSProperties\n  timer?: number\n  onChangeTimer?: () => void\n  onComplete?: (value: string) => void\n  onChange?: (value: string) => void\n}\n\nexport const TokenField = ({\n  label,\n  disabled,\n  success,\n  error,\n  errorMessage,\n  helpMessage,\n  showOptionalLabel,\n  size = 6,\n  type,\n  style,\n  timer,\n  onChangeTimer,\n  onComplete,\n  onChange,\n}: TokenFieldProps) => {\n  const {\n    tokenMap,\n    rootElementRef,\n    onChangeNumber,\n    onKeyUpHandler,\n    onPasteNumber,\n  } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n  return (\n    <Field.Root\n      style={style}\n      customclass=\"au-token-field\"\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        showOptionalLabel={showOptionalLabel}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <div ref={rootElementRef} className=\"au-token-field__container\">\n        {[...Object.values(tokenMap)].map((_, i) => (\n          <div key={`token-digit-${i}`}>\n            <Field.Input\n              customclass=\"au-token-field__input\"\n              type={type || 'number'}\n              value={tokenMap[i]}\n              disabled={disabled}\n              onChange={(e) => onChangeNumber(e, i)}\n              onKeyUp={(e) => onKeyUpHandler(e, i)}\n              onPaste={(e) => onPasteNumber(e)}\n              data-token-i={i}\n\t\t\t\t\t\t\tinputMode=\"numeric\"\n\t\t\t\t\t\t\tautoComplete=\"one-time-code\"\n            />\n          </div>\n        ))}\n      </div>\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,SAAS,qBAAqB,OAAgB;AAC5C,QAAM,cAAc,OAAO,KAAK;AAChC,QAAM,QAAQ,OAAO,MAAM,WAAW;AACtC,SAAO,CAAC;AACV;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAA0B;AACxB,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,mBAAmB;AAC5D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,KAAK;AAE/D,YAAU,oBAAoB,CAAC,QAAQ,CAAC;AACxC,YAAU,mBAAmB,CAAC,KAAK,CAAC;AACpC,YAAU,oBAAoB,CAAC,SAAS,CAAC;AAEzC,WAAS,qBAAqB;AAC5B,UAAM,kBACJ,OAAO,KAAK,QAAQ,EAAE,IAAI,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAA;AACvD,UAAM,cAAc,gBAAgB,KAAK,EAAE;AAC3C,UAAM,eAAe,YAAY,WAAW;AAC5C,QAAI,mBAAmB,WAAW;AAElC,QAAI,CAAC,CAAC,gBAAgB,CAAC,CAAC,YAAY;AAClC,iBAAW,WAAW;AAAA,IACxB;AAAA,EACF;AAEA,WAAS,oBAAoB;AAC3B,QAAI;AAEJ,QAAI,OAAO;AACT,iBAAW,YAAY,MAAM;AAC3B,qBAAa,CAAC,gBAAgB;AAC5B,cAAI,CAAC,YAAa,QAAO;AACzB,gBAAM,kBAAkB,gBAAgB;AACxC,cAAI,iBAAiB;AACnB,mBAAO;AAAA,UACT,OAAO;AACL,mBAAO,cAAc;AAAA,UACvB;AAAA,QACF,CAAC;AAAA,MACH,GAAG,GAAI;AAEP,UAAI,UAAU;AACZ,eAAO,MAAM,cAAc,QAAQ;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AAEA,WAAS,qBAAqB;AAC5B,QAAI,iBAAiB,UAAW,eAAc,SAAS;AAEvD,QAAI,cAAc,GAAG;AACnB,kBAAY,mBAAmB;AAC/B,kBAAA;AAAA,IACF;AAAA,EACF;AAEA,WAAS,oBAAoB;AAC3B,WAAO,CAAC,GAAG,MAAM,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,GAAA,IAAO,EAAE;AAAA,EACzE;AAEA,WAAS,eAAe,GAAW;;AACjC,UAAM,YAAW,sDAAgB,YAAhB,mBAAyB;AAAA,MACxC,kBAAkB,IAAI,CAAC;AAAA;AAEzB,QAAI,mBAAmB,MAAA;AAAA,EACzB;AAEA,WAAS,cAAc;;AACrB,UAAM,aACJ,oBAAe,YAAf,mBAAwB;AAAA,MACtB;AAAA;AAEJ,2CAAW;AAAA,EACb;AAEA,WAAS,eAAe,GAA0C,GAAW;;AAC3E,UAAM,sBAAsB,EAAE,UAAU,KAAK,EAAE,QAAQ;AACvD,QAAI,qBAAqB;AACvB,YAAM,gBACJ,sDAAgB,YAAhB,mBAAyB;AAAA,QACvB,kBAAkB,IAAI,CAAC;AAAA;AAE3B,YAAM,eACJ,sDAAgB,YAAhB,mBAAyB;AAAA,QACvB,kBAAkB,CAAC;AAAA;AAGvB,kBAAY,EAAE,GAAG,UAAU,CAAC,CAAC,GAAG,IAAI;AACpC,UAAI,CAAC,CAAC,gBAAgB,EAAC,2CAAa,qBAAoB,MAAA;AAAA,IAC1D;AAAA,EACF;AAEA,WAAS,eAAe,GAAwC,GAAW;;AACzE,MAAE,eAAA;AACF,QAAI,SAAQ,4BAAG,WAAH,mBAAW;AACvB,UAAM,gBAAgB,qBAAqB,KAAK;AAChD,UAAM,UAAU,UAAU;AAE1B,QAAI,eAAe;AACjB,UAAI,kBAAkB,OAAO,KAAK,QAAQ,EAAE;AAAA,QAC1C,CAAC,UAAU,SAAS,KAAK,MAAM;AAAA,MAAA;AAGjC,UAAI,MAAM,SAAS,GAAG;AACpB,0BAAkB,kBAAkB;AACpC,gBAAQ,MAAM,MAAM,SAAS,CAAC;AAAA,MAChC;AAEA,UAAI,kBAAkB,GAAG;AACvB,YAAI,OAAO;AACT,sBAAY,EAAE,GAAG,UAAU,CAAC,CAAC,GAAG,OAAO;AAAA,QACzC;AAEA;AAAA,MACF;AAEA,kBAAY,EAAE,GAAG,UAAU,CAAC,eAAe,GAAG,OAAO;AACrD,UAAI,CAAC,QAAS,gBAAe,eAAe;AAAA,IAC9C;AAAA,EACF;AAEA,WAAS,cAAc,GAA2C;AAChE,MAAE,eAAA;AACF,UAAM,QAAQ,EAAE,cAAc,QAAQ,MAAM;AAC5C,UAAM,gBAAgB,qBAAqB,KAAK;AAEhD,QAAI,eAAe;AACjB,YAAM,WAAW,MAAM,MAAM,EAAE,EAAE,MAAM,GAAG,IAAI;AAC9C,kBAAY,EAAE,GAAG,qBAAqB,GAAG,UAAU;AAEnD,qBAAe,SAAS,SAAS,CAAC;AAAA,IACpC,OAAO;AACL,kBAAY,mBAAmB;AAAA,IACjC;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;AC5IO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,cAAc,EAAE,MAAM,YAAY,UAAU,eAAe,OAAO;AAEtE,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,4BAED,OAAA,EAAI,KAAK,gBAAgB,WAAU,6BACjC,WAAC,GAAG,OAAO,OAAO,QAAQ,CAAC,EAAE,IAAI,CAAC,GAAG,0BACnC,OAAA,EACC,UAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,aAAY;AAAA,YACZ,MAAM,QAAQ;AAAA,YACd,OAAO,SAAS,CAAC;AAAA,YACjB;AAAA,YACA,UAAU,CAAC,MAAM,eAAe,GAAG,CAAC;AAAA,YACpC,SAAS,CAAC,MAAM,eAAe,GAAG,CAAC;AAAA,YACnC,SAAS,CAAC,MAAM,cAAc,CAAC;AAAA,YAC/B,gBAAc;AAAA,YACrB,WAAU;AAAA,YACV,cAAa;AAAA,UAAA;AAAA,QAAA,EACR,GAZQ,eAAe,CAAC,EAa1B,CACD,EAAA,CACH;AAAA,QACA,oBAAC,MAAM,SAAN,EAAc,UAAU,CAAC,CAAC,OAAO,cAA4B,YAAA,CAA0B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9F;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n  size: number\n  onComplete?: (token: string) => void\n  onChange?: (value: string) => void\n  onChangeTimer?: (time: number) => void\n  timer?: number | null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n  const numberValue = Number(value)\n  const isNaN = Number.isNaN(numberValue)\n  return !isNaN\n}\n\nexport const useTokenField = ({\n  size,\n  onComplete,\n  onChange,\n  onChangeTimer,\n  timer = null,\n}: UseTokenInputProps) => {\n  const rootElementRef = useRef<HTMLDivElement | null>(null)\n  const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n  const [timerTime, setTimerTime] = useState<number | null>(timer)\n\n  useEffect(_handleValueEvents, [tokenMap])\n  useEffect(_handleStartTimer, [timer])\n  useEffect(_handleTimerUpdate, [timerTime])\n\n  function _handleValueEvents() {\n    const tokenValueArray =\n      Object.keys(tokenMap).map((key) => tokenMap[key]) || []\n    const stringField = tokenValueArray.join('')\n    const isTokenValid = stringField.length === size\n    if (onChange) onChange(stringField)\n\n    if (!!isTokenValid && !!onComplete) {\n      onComplete(stringField)\n    }\n  }\n\n  function _handleStartTimer() {\n    let interval: NodeJS.Timeout\n\n    if (timer) {\n      interval = setInterval(() => {\n        setTimerTime((currentTime) => {\n          if (!currentTime) return null\n          const reachedTheLimit = currentTime === 0\n          if (reachedTheLimit) {\n            return timer\n          } else {\n            return currentTime - 1\n          }\n        })\n      }, 1000)\n\n      if (interval) {\n        return () => clearInterval(interval)\n      }\n    }\n  }\n\n  function _handleTimerUpdate() {\n    if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n    if (timerTime === 0) {\n      setTokenMap(_getDefaultTokens())\n      _resetFocus()\n    }\n  }\n\n  function _getDefaultTokens() {\n    return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n  }\n\n  function _goToNextInput(i: number) {\n    const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n      `[data-token-i='${i + 1}']`,\n    )\n    if (nextItem) nextItem.focus()\n  }\n\n  function _resetFocus() {\n    const firstItem =\n      rootElementRef.current?.querySelector<HTMLInputElement>(\n        `[data-token-i='0']`,\n      )\n    firstItem?.focus()\n  }\n\n  function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n    const hasBackspacePressed = e.which === 8 || e.key === 'Backspace'\n    if (hasBackspacePressed) {\n      const previousItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i - 1}']`,\n        )\n      const currentItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i}']`,\n        )\n\n      setTokenMap({ ...tokenMap, [i]: '' })\n      if (!!previousItem && !currentItem?.value) previousItem.focus()\n    }\n  }\n\n  function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n    e.preventDefault()\n    let value = e?.target?.value\n    const isNumberValid = inputtedValueIsValid(value)\n    const isEmpty = value === ''\n\n    if (isNumberValid) {\n      let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n        (index) => tokenMap[index] === '',\n      )\n\n      if (value.length > 1) {\n        firstEmptyIndex = firstEmptyIndex - 1\n        value = value[value.length - 1]\n      }\n\n      if (firstEmptyIndex < 0) {\n        if (value) {\n          setTokenMap({ ...tokenMap, [i]: value })\n        }\n\n        return\n      }\n\n      setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n      if (!isEmpty) _goToNextInput(firstEmptyIndex)\n    }\n  }\n\n  function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n    e.preventDefault()\n    const value = e.clipboardData.getData('Text')\n    const isNumberValid = inputtedValueIsValid(value)\n\n    if (isNumberValid) {\n      const arrValue = value.split('').slice(0, size)\n      setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n      _goToNextInput(arrValue.length - 1)\n    } else {\n      setTokenMap(_getDefaultTokens())\n    }\n  }\n\n  return {\n    onKeyUpHandler,\n    onChangeNumber,\n    onPasteNumber,\n    tokenMap,\n    rootElementRef,\n  }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n  label?: string\n  disabled?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  helpMessage?: string\n  showOptionalLabel?: boolean\n  size?: number\n  type?: 'number' | 'password' | 'text'\n  style?: React.CSSProperties\n  timer?: number\n  onChangeTimer?: () => void\n  onComplete?: (value: string) => void\n  onChange?: (value: string) => void\n  'data-testid'?: string\n}\n\nexport const TokenField = ({\n  label,\n  disabled,\n  success,\n  error,\n  errorMessage,\n  helpMessage,\n  showOptionalLabel,\n  size = 6,\n  type,\n  style,\n  timer,\n  onChangeTimer,\n  onComplete,\n  onChange,\n  'data-testid': dataTestId,\n}: TokenFieldProps) => {\n  const {\n    tokenMap,\n    rootElementRef,\n    onChangeNumber,\n    onKeyUpHandler,\n    onPasteNumber,\n  } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n  return (\n    <Field.Root\n      style={style}\n      customclass=\"au-token-field\"\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        showOptionalLabel={showOptionalLabel}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <div ref={rootElementRef} className=\"au-token-field__container\" data-testid={dataTestId}>\n        {[...Object.values(tokenMap)].map((_, i) => (\n          <div key={`token-digit-${i}`}>\n            <Field.Input\n              customclass=\"au-token-field__input\"\n              type={type || 'number'}\n              value={tokenMap[i]}\n              disabled={disabled}\n              onChange={(e) => onChangeNumber(e, i)}\n              onKeyUp={(e) => onKeyUpHandler(e, i)}\n              onPaste={(e) => onPasteNumber(e)}\n              data-token-i={i}\n\t\t\t\t\t\t\tinputMode=\"numeric\"\n\t\t\t\t\t\t\tautoComplete=\"one-time-code\"\n            />\n          </div>\n        ))}\n      </div>\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -3,5 +3,6 @@ export type TooltipProps = {
     position?: 'top' | 'bottom' | 'left' | 'right';
     open?: boolean;
     children: React.ReactNode;
+    'data-testid'?: string;
 };
-export declare const Tooltip: ({ text, position, open, children, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ text, position, open, children, "data-testid": dataTestId, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,8 @@ import './styles.css';const Tooltip = ({
   text,
   position = "top",
   open,
-  children
+  children,
+  "data-testid": dataTestId
 }) => {
   const tooltipId = useId();
   const tooltipClasses = classNames(
@@ -15,7 +16,7 @@ import './styles.css';const Tooltip = ({
       "tooltip-open": open
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: tooltipClasses, "aria-describedby": tooltipId, children: [
+  return /* @__PURE__ */ jsxs("div", { className: tooltipClasses, "aria-describedby": tooltipId, "data-testid": dataTestId, children: [
     children,
     /* @__PURE__ */ jsx("div", { id: tooltipId, className: "tooltip", role: "tooltip", children: text })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tooltip/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport classNames from 'classnames'\nimport './styles.scss'\n\nexport type TooltipProps = {\n  text: string\n  position?: 'top' | 'bottom' | 'left' | 'right'\n  open?: boolean\n  children: React.ReactNode\n}\n\nexport const Tooltip = ({\n  text,\n  position = 'top',\n  open,\n  children,\n}: TooltipProps) => {\n  const tooltipId = useId()\n\n  const tooltipClasses = classNames(\n    'tooltip-container',\n    `tooltip-${position}`,\n    {\n      'tooltip-open': open,\n    },\n  )\n\n  return (\n    <div className={tooltipClasses} aria-describedby={tooltipId}>\n      {children}\n      <div id={tooltipId} className=\"tooltip\" role=\"tooltip\">{text}</div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,MAAoB;AAClB,QAAM,YAAY,MAAA;AAElB,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA,WAAW,QAAQ;AAAA,IACnB;AAAA,MACE,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAGF,SACE,qBAAC,OAAA,EAAI,WAAW,gBAAgB,oBAAkB,WAC/C,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,SAAI,IAAI,WAAW,WAAU,WAAU,MAAK,WAAW,UAAA,KAAA,CAAK;AAAA,EAAA,GAC/D;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tooltip/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport classNames from 'classnames'\nimport './styles.scss'\n\nexport type TooltipProps = {\n  text: string\n  position?: 'top' | 'bottom' | 'left' | 'right'\n  open?: boolean\n  children: React.ReactNode\n  'data-testid'?: string\n}\n\nexport const Tooltip = ({\n  text,\n  position = 'top',\n  open,\n  children,\n  'data-testid': dataTestId,\n}: TooltipProps) => {\n  const tooltipId = useId()\n\n  const tooltipClasses = classNames(\n    'tooltip-container',\n    `tooltip-${position}`,\n    {\n      'tooltip-open': open,\n    },\n  )\n\n  return (\n    <div className={tooltipClasses} aria-describedby={tooltipId} data-testid={dataTestId}>\n      {children}\n      <div id={tooltipId} className=\"tooltip\" role=\"tooltip\">{text}</div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAYO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAoB;AAClB,QAAM,YAAY,MAAA;AAElB,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA,WAAW,QAAQ;AAAA,IACnB;AAAA,MACE,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAGF,8BACG,OAAA,EAAI,WAAW,gBAAgB,oBAAkB,WAAW,eAAa,YACvE,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,SAAI,IAAI,WAAW,WAAU,WAAU,MAAK,WAAW,UAAA,KAAA,CAAK;AAAA,EAAA,GAC/D;AAEJ;"}

package/dist/components/Transition/Transition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Transition/hooks.d.ts

@@ -0,0 +1,11 @@
+type UseTransitionProps = {
+    totalMessages: number;
+    messageDuration: number;
+    isLoading?: boolean;
+    onFinish?: () => void;
+};
+export declare const useTransition: ({ totalMessages, messageDuration, isLoading, onFinish, }: UseTransitionProps) => {
+    currentStep: number;
+    progress: number;
+};
+export {};

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

@@ -0,0 +1,11 @@
+export type TransitionAlign = 'left' | 'center';
+export type TransitionProps = {
+    messages: string[];
+    messageDuration?: number;
+    align?: TransitionAlign;
+    isLoading?: boolean;
+    onFinish?: () => void;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const Transition: ({ messages, messageDuration, align, isLoading, onFinish, className, "data-testid": dataTestId, }: TransitionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-C6Q03EyZ.js";
+import { Text } from "../Text/index.es.js";
+import { useState, useRef, useEffect } from "react";
+import './styles.css';const useTransition = ({
+  totalMessages,
+  messageDuration,
+  isLoading,
+  onFinish
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [mounted, setMounted] = useState(false);
+  const hasFinished = useRef(false);
+  const onFinishRef = useRef(onFinish);
+  useEffect(() => {
+    onFinishRef.current = onFinish;
+  }, [onFinish]);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    setCurrentStep(0);
+    hasFinished.current = false;
+  }, [totalMessages, messageDuration]);
+  const isLast = currentStep >= totalMessages - 1;
+  const holdIndex = Math.max(0, totalMessages - 2);
+  const shouldHold = isLoading === true && currentStep >= holdIndex;
+  useEffect(() => {
+    if (isLast || shouldHold) return;
+    const timer = setTimeout(() => {
+      setCurrentStep((step) => Math.min(step + 1, totalMessages - 1));
+    }, messageDuration);
+    return () => clearTimeout(timer);
+  }, [currentStep, shouldHold, isLast, messageDuration, totalMessages]);
+  useEffect(() => {
+    if (!isLast || hasFinished.current) return;
+    hasFinished.current = true;
+    const timer = setTimeout(() => {
+      var _a;
+      (_a = onFinishRef.current) == null ? void 0 : _a.call(onFinishRef);
+    }, messageDuration);
+    return () => clearTimeout(timer);
+  }, [isLast, messageDuration]);
+  const progress = mounted && totalMessages > 0 ? (currentStep + 1) / totalMessages * 100 : 0;
+  return { currentStep, progress };
+};
+const Transition = ({
+  messages,
+  messageDuration = 2e3,
+  align = "left",
+  isLoading,
+  onFinish,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const { currentStep, progress } = useTransition({
+    totalMessages: messages.length,
+    messageDuration,
+    isLoading,
+    onFinish
+  });
+  const currentMessage = messages[currentStep] ?? "";
+  const previousMessage = currentStep > 0 ? messages[currentStep - 1] : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "au-transition",
+        `au-transition--align-${align}`,
+        className
+      ),
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "au-transition__messages", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              variant: "heading-medium",
+              weight: "semibold",
+              "aria-hidden": "true",
+              className: classNames(
+                "au-transition__message",
+                "au-transition__message--previous",
+                { "au-transition__message--hidden": !previousMessage }
+              ),
+              children: previousMessage || " "
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              variant: "heading-medium",
+              weight: "semibold",
+              "aria-live": "polite",
+              className: "au-transition__message au-transition__message--current",
+              children: currentMessage
+            },
+            currentStep
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "au-transition__bar",
+            role: "progressbar",
+            "aria-valuenow": Math.round(progress),
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": currentMessage,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "au-transition__bar-filled",
+                style: {
+                  width: `${progress}%`,
+                  transitionDuration: `${messageDuration}ms`
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Transition
+};
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Transition/hooks.ts","../../../lib/components/Transition/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\ntype UseTransitionProps = {\n  totalMessages: number\n  messageDuration: number\n  isLoading?: boolean\n  onFinish?: () => void\n}\n\nexport const useTransition = ({\n  totalMessages,\n  messageDuration,\n  isLoading,\n  onFinish,\n}: UseTransitionProps) => {\n  const [currentStep, setCurrentStep] = useState(0)\n  const [mounted, setMounted] = useState(false)\n  const hasFinished = useRef(false)\n  const onFinishRef = useRef(onFinish)\n\n  useEffect(() => {\n    onFinishRef.current = onFinish\n  }, [onFinish])\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  useEffect(() => {\n    setCurrentStep(0)\n    hasFinished.current = false\n  }, [totalMessages, messageDuration])\n\n  const isLast = currentStep >= totalMessages - 1\n  const holdIndex = Math.max(0, totalMessages - 2)\n  const shouldHold = isLoading === true && currentStep >= holdIndex\n\n  useEffect(() => {\n    if (isLast || shouldHold) return\n\n    const timer = setTimeout(() => {\n      setCurrentStep((step) => Math.min(step + 1, totalMessages - 1))\n    }, messageDuration)\n\n    return () => clearTimeout(timer)\n  }, [currentStep, shouldHold, isLast, messageDuration, totalMessages])\n\n  useEffect(() => {\n    if (!isLast || hasFinished.current) return\n    hasFinished.current = true\n\n    const timer = setTimeout(() => {\n      onFinishRef.current?.()\n    }, messageDuration)\n\n    return () => clearTimeout(timer)\n  }, [isLast, messageDuration])\n\n  const progress =\n    mounted && totalMessages > 0 ? ((currentStep + 1) / totalMessages) * 100 : 0\n\n  return { currentStep, progress }\n}\n","import classNames from 'classnames'\nimport { Text } from '@components/Text'\nimport { useTransition } from './hooks'\nimport './styles.scss'\n\nexport type TransitionAlign = 'left' | 'center'\n\nexport type TransitionProps = {\n  messages: string[]\n  messageDuration?: number\n  align?: TransitionAlign\n  isLoading?: boolean\n  onFinish?: () => void\n  className?: string\n  'data-testid'?: string\n}\n\nexport const Transition = ({\n  messages,\n  messageDuration = 2000,\n  align = 'left',\n  isLoading,\n  onFinish,\n  className,\n  'data-testid': dataTestId,\n}: TransitionProps) => {\n  const { currentStep, progress } = useTransition({\n    totalMessages: messages.length,\n    messageDuration,\n    isLoading,\n    onFinish,\n  })\n\n  const currentMessage = messages[currentStep] ?? ''\n  const previousMessage = currentStep > 0 ? messages[currentStep - 1] : null\n\n  return (\n    <div\n      className={classNames(\n        'au-transition',\n        `au-transition--align-${align}`,\n        className,\n      )}\n      data-testid={dataTestId}>\n      <div className=\"au-transition__messages\">\n        <Text\n          as=\"p\"\n          variant=\"heading-medium\"\n          weight=\"semibold\"\n          aria-hidden=\"true\"\n          className={classNames(\n            'au-transition__message',\n            'au-transition__message--previous',\n            { 'au-transition__message--hidden': !previousMessage },\n          )}>\n          {previousMessage || ' '}\n        </Text>\n\n        <Text\n          key={currentStep}\n          as=\"p\"\n          variant=\"heading-medium\"\n          weight=\"semibold\"\n          aria-live=\"polite\"\n          className=\"au-transition__message au-transition__message--current\">\n          {currentMessage}\n        </Text>\n      </div>\n\n      <div\n        className=\"au-transition__bar\"\n        role=\"progressbar\"\n        aria-valuenow={Math.round(progress)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={currentMessage}>\n        <div\n          className=\"au-transition__bar-filled\"\n          style={{\n            width: `${progress}%`,\n            transitionDuration: `${messageDuration}ms`,\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Transition/styles.css

@@ -0,0 +1 @@
+.au-transition{display:flex;flex-direction:column;gap:24px;width:100%}.au-transition--align-left{align-items:flex-start;text-align:start}.au-transition--align-center{align-items:center;text-align:center}.au-transition__messages{display:flex;flex-direction:column;gap:8px;width:100%}.au-transition__message{transition:opacity .3s ease}.au-transition__message--previous.au-text{color:#f6f7fa}.au-transition__message--hidden{opacity:0}.au-transition__message--current{animation:au-transition-fade-in .5s ease}.au-transition__bar{background-color:#e2e4e9;border-radius:4px;overflow:hidden;width:100%;height:8px}@media(min-width:1024px){.au-transition__bar{width:416px}}.au-transition__bar-filled{background-color:#0048db;border-radius:500px;height:100%;transition-property:width;transition-timing-function:linear}@keyframes au-transition-fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.au-transition .au-transition__message--current{animation:none}.au-transition .au-transition__bar-filled{transition:none}}

package/dist/components/dataTestId.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -74,6 +74,8 @@ import { IconCodepen } from "../icons/IconCodepen/index.es.js";
 import { IconCodesandbox } from "../icons/IconCodesandbox/index.es.js";
 import { IconCoffee } from "../icons/IconCoffee/index.es.js";
 import { IconCoin } from "../icons/IconCoin/index.es.js";
+import { IconCollapseClose } from "../icons/IconCollapseClose/index.es.js";
+import { IconCollapseOpen } from "../icons/IconCollapseOpen/index.es.js";
 import { IconColumns } from "../icons/IconColumns/index.es.js";
 import { IconCommand } from "../icons/IconCommand/index.es.js";
 import { IconCompass } from "../icons/IconCompass/index.es.js";
@@ -399,6 +401,8 @@ export {
   IconCodesandbox,
   IconCoffee,
   IconCoin,
+  IconCollapseClose,
+  IconCollapseOpen,
   IconColumns,
   IconCommand,
   IconCompass,

package/dist/components/default/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/form/Checkbox/Group/index.d.ts

@@ -1,2 +1,2 @@
 import { CheckboxGroupProps } from '../types';
-export declare const CheckboxGroup: ({ name, defaultValue, orientation, label, error, errorMessage, required, children, onChange, onFocus, }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: ({ name, defaultValue, orientation, label, error, errorMessage, required, children, onChange, onFocus, "data-testid": dataTestId, }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/Checkbox/types.d.ts

@@ -15,4 +15,5 @@ export type CheckboxGroupProps = {
     required?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    'data-testid'?: string;
 };

package/dist/components/form/Radio/Group/index.d.ts

@@ -1,2 +1,2 @@
 import { RadioGroupProps } from '../types';
-export declare const RadioGroup: ({ name, defaultValue, orientation, label, error, errorMessage, required, children, onChange, onFocus, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ name, defaultValue, orientation, label, error, errorMessage, required, children, onChange, onFocus, "data-testid": dataTestId, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/Radio/types.d.ts

@@ -16,4 +16,5 @@ export type RadioGroupProps = {
     required?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    'data-testid'?: string;
 };

package/dist/components/form/SelectField/index.d.ts

@@ -1,2 +1,2 @@
 import { SelectFieldProps } from './types';
-export declare const SelectField: ({ label, options, showOptionalLabel, error, errorMessage, helpMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, autocomplete, EmptyText, fullScreenOptions, htmlType }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: ({ label, options, showOptionalLabel, error, errorMessage, helpMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, autocomplete, EmptyText, fullScreenOptions, htmlType, "data-testid": dataTestId, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/SelectField/types.d.ts

@@ -19,6 +19,8 @@ export type SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {
     register?: (instance: HTMLSelectElement | null) => void;
     autocomplete?: boolean;
     EmptyText?: string;
+    /** On mobile, opens the options list in a full-screen modal. Not mapped in Figma. */
     fullScreenOptions?: boolean;
     htmlType?: 'text' | 'number';
+    'data-testid'?: string;
 };

package/dist/components/form/TextareaField/index.d.ts

@@ -7,6 +7,7 @@ export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
     label?: string;
     textAreaStyle?: React.CSSProperties;
     textareaRef?: React.RefObject<HTMLTextAreaElement>;
+    /** Allows the user to resize the textarea horizontally. Not mapped in Figma. */
     horizontalResize?: boolean;
 };
 export declare const TextAreaField: ({ showOptionalLabel, required, success, error, errorMessage, helpMessage, label, id, disabled, style, className, textAreaStyle, textareaRef, maxLength, horizontalResize, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/TokenField/index.d.ts

@@ -13,6 +13,7 @@ type TokenFieldProps = {
     onChangeTimer?: () => void;
     onComplete?: (value: string) => void;
     onChange?: (value: string) => void;
+    'data-testid'?: string;
 };
-export declare const TokenField: ({ label, disabled, success, error, errorMessage, helpMessage, showOptionalLabel, size, type, style, timer, onChangeTimer, onComplete, onChange, }: TokenFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TokenField: ({ label, disabled, success, error, errorMessage, helpMessage, showOptionalLabel, size, type, style, timer, onChangeTimer, onComplete, onChange, "data-testid": dataTestId, }: TokenFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};