@consumidor-positivo/aurora 0.12.0 → 1.0.0

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
+import "react";
 import "../Icon/index.es.js";
 import { IconChevronLeft } from "../icons/IconChevronLeft/index.es.js";
 import { IconHelpCircle } from "../icons/IconHelpCircle/index.es.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/SubHeader/index.tsx"],"sourcesContent":["import { IconChevronLeft, IconHelpCircle } from '../icons/default'\n\nimport { Container } from '@components/Container'\nimport { Text } from '@components/Text'\nimport { Button } from '@components/Button'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype SubHeaderProps = {\n  title: string\n  handleReturn: () => void\n  handleHelpInfo?: () => void\n  'data-testid'?: string\n}\n\nexport const SubHeader = ({\n  title,\n  handleReturn,\n  handleHelpInfo,\n  'data-testid': dataTestId,\n}: SubHeaderProps) => {\n  return (\n    <div\n      className={classNames('au-sub-header', {\n        'au-sub-header--with-help': handleHelpInfo,\n      })}\n      data-testid={dataTestId}>\n      <Container customClass=\"au-sub-header__container\">\n        <Button\n          className=\"au-sub-header__button\"\n          onClick={handleReturn}\n          type=\"ghost\"\n          aria-label=\"Voltar\">\n          <IconChevronLeft aria-hidden=\"true\" />\n        </Button>\n        <Text\n          className=\"au-sub-header__title\"\n          variant=\"heading-micro\"\n          variantDesk=\"heading-small\"\n          weight=\"bold\"\n          as=\"div\">\n          {title}\n        </Text>\n        {handleHelpInfo && (\n          <Button\n            className=\"au-sub-header__button\"\n            onClick={handleHelpInfo}\n            type=\"ghost\"\n            aria-label=\"Ajuda\">\n            <IconHelpCircle aria-hidden=\"true\" />\n          </Button>\n        )}\n      </Container>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAiBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB;AAAA,QACrC,4BAA4B;AAAA,MAAA,CAC7B;AAAA,MACD,eAAa;AAAA,MACb,UAAA,qBAAC,WAAA,EAAU,aAAY,4BACrB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,iBAAA,EAAgB,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAG;AAAA,YACF,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,gBAAA,EAAe,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACrC,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/SubHeader/index.tsx"],"sourcesContent":["import { IconChevronLeft, IconHelpCircle } from '../icons/default'\n\nimport { Container } from '@components/Container'\nimport { Text } from '@components/Text'\nimport { Button } from '@components/Button'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype SubHeaderProps = {\n  title: string\n  handleReturn: () => void\n  handleHelpInfo?: () => void\n  'data-testid'?: string\n}\n\nexport const SubHeader = ({\n  title,\n  handleReturn,\n  handleHelpInfo,\n  'data-testid': dataTestId,\n}: SubHeaderProps) => {\n  return (\n    <div\n      className={classNames('au-sub-header', {\n        'au-sub-header--with-help': handleHelpInfo,\n      })}\n      data-testid={dataTestId}>\n      <Container customClass=\"au-sub-header__container\">\n        <Button\n          className=\"au-sub-header__button\"\n          onClick={handleReturn}\n          type=\"ghost\"\n          aria-label=\"Voltar\">\n          <IconChevronLeft aria-hidden=\"true\" />\n        </Button>\n        <Text\n          className=\"au-sub-header__title\"\n          variant=\"heading-micro\"\n          variantDesk=\"heading-small\"\n          weight=\"bold\"\n          as=\"div\">\n          {title}\n        </Text>\n        {handleHelpInfo && (\n          <Button\n            className=\"au-sub-header__button\"\n            onClick={handleHelpInfo}\n            type=\"ghost\"\n            aria-label=\"Ajuda\">\n            <IconHelpCircle aria-hidden=\"true\" />\n          </Button>\n        )}\n      </Container>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAiBO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB;AAAA,QACrC,4BAA4B;AAAA,MAAA,CAC7B;AAAA,MACD,eAAa;AAAA,MACb,UAAA,qBAAC,WAAA,EAAU,aAAY,4BACrB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,iBAAA,EAAgB,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAG;AAAA,YACF,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAAA,oBAAC,gBAAA,EAAe,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACrC,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,9 +1,9 @@
 export type TabsProps = {
     tabs: TabItemProps[];
-    type?: 1 | 2;
+    /** Hides the tab bar and renders only the active panel. Not mapped in Figma. */
     areTabsHidden?: boolean;
     initialTab?: string;
-    withLabel?: boolean;
+    /** Content rendered at the right side of the tab bar. Not mapped in Figma. */
     rightSlotChildren?: React.ReactNode;
     onClick?: (value: string) => void;
     'data-testid'?: string;
@@ -12,7 +12,6 @@ export type TabItemProps = {
     tab: string;
     title: string;
     children?: React.ReactElement;
-    icon?: React.ReactNode;
 };
-export declare const Tabs: ({ tabs, type, initialTab, onClick, areTabsHidden, rightSlotChildren, withLabel, "data-testid": dataTestId, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ tabs, initialTab, onClick, areTabsHidden, rightSlotChildren, "data-testid": dataTestId, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

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

@@ -1,21 +1,16 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { W as When, S as Switch, C as Case } from "../../react-if.esm-Cozt8l48.js";
-import { Text } from "../Text/index.es.js";
-import { Chip } from "../Chip/index.es.js";
+import { W as When } from "../../react-if.esm-Cozt8l48.js";
 import { c as classNames } from "../../index-C6Q03EyZ.js";
 import './styles.css';const Tabs = ({
   tabs,
-  type = 1,
   initialTab,
   onClick,
   areTabsHidden,
   rightSlotChildren,
-  withLabel = false,
   "data-testid": dataTestId
 }) => {
-  const [isClicked, setIsClicked] = useState(false);
-  const [currButton, setCurrButton] = useState(initialTab ?? "");
+  var _a;
   const [activeTab, setActiveTab] = useState(initialTab);
   const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
   const tabsRef = useRef(null);
@@ -23,97 +18,98 @@ import './styles.css';const Tabs = ({
     setActiveTab(initialTab);
   }, [initialTab]);
   useEffect(() => {
-    if (activeTab && type === 2) {
-      const container = tabsRef.current;
-      if (container) {
-        const activeElement = container.querySelector(
-          ".au-tabs__btns-option--active"
-        );
-        if (activeElement) {
-          setIndicatorStyle({
-            left: activeElement.offsetLeft,
-            width: activeElement.offsetWidth
-          });
-        }
+    const container = tabsRef.current;
+    if (activeTab && container) {
+      const activeElement = container.querySelector(
+        ".au-tabs__btns-option--active"
+      );
+      if (activeElement) {
+        setIndicatorStyle({
+          left: activeElement.offsetLeft,
+          width: activeElement.offsetWidth
+        });
       }
     }
-  }, [activeTab, tabs, type]);
+  }, [activeTab, tabs]);
   const handleClick = (item) => {
     onClick && onClick(item.tab);
-    setCurrButton(item.tab);
     setActiveTab(item.tab);
-    setIsClicked(true);
   };
+  const handleKeyDown = (event) => {
+    var _a2;
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    const container = tabsRef.current;
+    if (!container) return;
+    const tabButtons = Array.from(
+      container.querySelectorAll('[role="tab"]')
+    );
+    const currentIndex = tabButtons.indexOf(
+      document.activeElement
+    );
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    const lastIndex = tabButtons.length - 1;
+    const nextIndex = {
+      ArrowLeft: currentIndex === 0 ? lastIndex : currentIndex - 1,
+      ArrowRight: currentIndex === lastIndex ? 0 : currentIndex + 1,
+      Home: 0,
+      End: lastIndex
+    }[event.key];
+    (_a2 = tabButtons[nextIndex]) == null ? void 0 : _a2.focus();
+  };
+  const focusableTab = activeTab ?? ((_a = tabs[0]) == null ? void 0 : _a.tab);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(When, { condition: !areTabsHidden, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classNames("au-tabs", {
-          [`au-tabs--type-${type}`]: !!type
-        }),
-        "data-testid": dataTestId,
-        children: /* @__PURE__ */ jsxs("div", { className: "au-tabs__container", children: [
-          /* @__PURE__ */ jsxs("div", { className: "au-tabs__left-panel", children: [
-            /* @__PURE__ */ jsx(When, { condition: !!withLabel, children: /* @__PURE__ */ jsxs(
-              Text,
+    /* @__PURE__ */ jsx(When, { condition: !areTabsHidden, children: /* @__PURE__ */ jsx("div", { className: "au-tabs", "data-testid": dataTestId, children: /* @__PURE__ */ jsxs("div", { className: "au-tabs__container", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "au-tabs__btns",
+          role: "tablist",
+          ref: tabsRef,
+          onKeyDown: handleKeyDown,
+          children: [
+            tabs.map((item) => /* @__PURE__ */ jsx(
+              "button",
               {
-                color: "secondary",
-                variant: "body-small",
-                className: "au-tabs__label",
-                children: [
-                  "Filtrar por:",
-                  " "
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: "au-tabs__btns", ref: tabsRef, children: [
-              tabs.map((item) => {
-                return /* @__PURE__ */ jsxs(Switch, { children: [
-                  /* @__PURE__ */ jsx(Case, { condition: type === 1, children: /* @__PURE__ */ jsx(
-                    Chip,
-                    {
-                      label: item.title,
-                      icon: item.icon,
-                      isActive: isClicked && item.tab === currButton || activeTab === item.tab,
-                      onClick: () => handleClick(item)
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Case, { condition: type === 2, children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: classNames("au-tabs__btns-option", {
-                        "au-tabs__btns-option--active": activeTab === item.tab
-                      }),
-                      onClick: () => handleClick(item),
-                      children: item.title
-                    }
-                  ) })
-                ] }, item.tab);
-              }),
-              /* @__PURE__ */ jsx(When, { condition: type === 2, children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "au-tabs__btns-indicator",
-                  "aria-hidden": "true",
-                  style: {
-                    left: `${indicatorStyle.left}px`,
-                    width: `${indicatorStyle.width}px`
-                  }
+                type: "button",
+                role: "tab",
+                id: `au-tab-${item.tab}`,
+                "aria-selected": activeTab === item.tab,
+                "aria-controls": `au-tabpanel-${item.tab}`,
+                tabIndex: item.tab === focusableTab ? 0 : -1,
+                className: classNames("au-tabs__btns-option", {
+                  "au-tabs__btns-option--active": activeTab === item.tab
+                }),
+                onClick: () => handleClick(item),
+                children: item.title
+              },
+              item.tab
+            )),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "au-tabs__btns-indicator",
+                "aria-hidden": "true",
+                style: {
+                  left: `${indicatorStyle.left}px`,
+                  width: `${indicatorStyle.width}px`
                 }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(When, { condition: !!rightSlotChildren, children: rightSlotChildren })
-        ] })
-      }
-    ) }),
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(When, { condition: !!rightSlotChildren, children: rightSlotChildren })
+    ] }) }) }),
     tabs.map(({ children, tab }) => {
       return /* @__PURE__ */ jsx(
         "div",
         {
+          role: "tabpanel",
+          id: `au-tabpanel-${tab}`,
+          "aria-labelledby": `au-tab-${tab}`,
           className: `au-tabs__children children-${tab}`,
-          children: /* @__PURE__ */ jsx(When, { condition: currButton === tab || activeTab === tab, children })
+          children: /* @__PURE__ */ jsx(When, { condition: activeTab === tab, children })
         },
         `au-tabs-${tab}`
       );

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  'data-testid'?: string\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  'data-testid': dataTestId,\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          data-testid={dataTestId}>\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":";;;;AAwBO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAiB;;AACf,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG;AAE1E,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AACd,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,UAAM,YAAY,QAAQ;AAC1B,QAAI,aAAa,WAAW;AAC1B,YAAM,gBAAgB,UAAU;AAAA,QAC9B;AAAA,MAAA;AAGF,UAAI,eAAe;AACjB,0BAAkB;AAAA,UAChB,MAAM,cAAc;AAAA,UACpB,OAAO,cAAc;AAAA,QAAA,CACtB;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,cAAc,CAAC,SAAuB;AAC1C,eAAW,QAAQ,KAAK,GAAG;AAC3B,iBAAa,KAAK,GAAG;AAAA,EACvB;AAEA,QAAM,gBAAgB,CAAC,UAA+C;;AACpE,QAAI,CAAC,CAAC,aAAa,cAAc,QAAQ,KAAK,EAAE,SAAS,MAAM,GAAG,EAAG;AAErE,UAAM,YAAY,QAAQ;AAC1B,QAAI,CAAC,UAAW;AAEhB,UAAM,aAAa,MAAM;AAAA,MACvB,UAAU,iBAAoC,cAAc;AAAA,IAAA;AAE9D,UAAM,eAAe,WAAW;AAAA,MAC9B,SAAS;AAAA,IAAA;AAEX,QAAI,iBAAiB,GAAI;AAEzB,UAAM,eAAA;AAEN,UAAM,YAAY,WAAW,SAAS;AACtC,UAAM,YAAY;AAAA,MAChB,WAAW,iBAAiB,IAAI,YAAY,eAAe;AAAA,MAC3D,YAAY,iBAAiB,YAAY,IAAI,eAAe;AAAA,MAC5D,MAAM;AAAA,MACN,KAAK;AAAA,IAAA,EACL,MAAM,GAAkD;AAE1D,KAAAA,MAAA,WAAW,SAAS,MAApB,gBAAAA,IAAuB;AAAA,EACzB;AAEA,QAAM,eAAe,eAAa,UAAK,CAAC,MAAN,mBAAS;AAE3C,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAACC,MAAA,EAAG,WAAW,CAAC,eACd,UAAA,oBAAC,OAAA,EAAI,WAAU,WAAU,eAAa,YACpC,UAAA,qBAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,KAAK;AAAA,UACL,WAAW;AAAA,UACV,UAAA;AAAA,YAAA,KAAK,IAAI,CAAC,SACT;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,IAAI,UAAU,KAAK,GAAG;AAAA,gBACtB,iBAAe,cAAc,KAAK;AAAA,gBAClC,iBAAe,eAAe,KAAK,GAAG;AAAA,gBACtC,UAAU,KAAK,QAAQ,eAAe,IAAI;AAAA,gBAC1C,WAAW,WAAW,wBAAwB;AAAA,kBAC5C,gCAAgC,cAAc,KAAK;AAAA,gBAAA,CACpD;AAAA,gBACD,SAAS,MAAM,YAAY,IAAI;AAAA,gBAC9B,UAAA,KAAK;AAAA,cAAA;AAAA,cAXD,KAAK;AAAA,YAAA,CAab;AAAA,YACD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,MAAM,GAAG,eAAe,IAAI;AAAA,kBAC5B,OAAO,GAAG,eAAe,KAAK;AAAA,gBAAA;AAAA,cAChC;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEDA,MAAA,EAAG,WAAW,CAAC,CAAC,mBAAoB,UAAA,kBAAA,CAAkB;AAAA,IAAA,EAAA,CACzD,GACF,GACF;AAAA,IAEC,KAAK,IAAI,CAAC,EAAE,UAAU,UAAwB;AAC7C,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI,eAAe,GAAG;AAAA,UACtB,mBAAiB,UAAU,GAAG;AAAA,UAC9B,WAAW,8BAA8B,GAAG;AAAA,UAE5C,UAAA,oBAACA,MAAA,EAAG,WAAW,cAAc,KAAM,SAAA,CAAS;AAAA,QAAA;AAAA,QADvC,WAAW,GAAG;AAAA,MAAA;AAAA,IAIzB,CAAC;AAAA,EAAA,GACH;AAEJ;"}

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,99 +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 { Conditional } from "../Conditional/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-CKZdIZ5O.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, "data-testid": dataTestId, 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
+    /* @__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  'data-testid'?: string\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  'data-testid': dataTestId,\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} data-testid={dataTestId}>\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":";;;;;;;;;;AAsCO,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;AAAA,EACA,eAAe;AACjB,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,YAAY,eAAa,YACvC,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/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/form/SelectField/types.d.ts

@@ -19,6 +19,7 @@ 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/icons/Icon.test/index.es.js

@@ -5,7 +5,7 @@ var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as $8WNJc$react from "react";
 import $8WNJc$react__default from "react";
 import ReactDOM from "react-dom";
@@ -2625,7 +2625,7 @@ var require_index_es = __commonJS({
           var ContextProvider = REACT_PROVIDER_TYPE;
           var Element2 = REACT_ELEMENT_TYPE;
           var ForwardRef = REACT_FORWARD_REF_TYPE;
-          var Fragment = REACT_FRAGMENT_TYPE;
+          var Fragment2 = REACT_FRAGMENT_TYPE;
           var Lazy = REACT_LAZY_TYPE;
           var Memo = REACT_MEMO_TYPE;
           var Portal = REACT_PORTAL_TYPE;
@@ -2689,7 +2689,7 @@ var require_index_es = __commonJS({
           reactIs_development$2.ContextProvider = ContextProvider;
           reactIs_development$2.Element = Element2;
           reactIs_development$2.ForwardRef = ForwardRef;
-          reactIs_development$2.Fragment = Fragment;
+          reactIs_development$2.Fragment = Fragment2;
           reactIs_development$2.Lazy = Lazy;
           reactIs_development$2.Memo = Memo;
           reactIs_development$2.Portal = Portal;
@@ -18998,7 +18998,7 @@ var require_index_es = __commonJS({
           var ContextProvider = REACT_PROVIDER_TYPE;
           var Element2 = REACT_ELEMENT_TYPE;
           var ForwardRef = REACT_FORWARD_REF_TYPE;
-          var Fragment = REACT_FRAGMENT_TYPE;
+          var Fragment2 = REACT_FRAGMENT_TYPE;
           var Lazy = REACT_LAZY_TYPE;
           var Memo = REACT_MEMO_TYPE;
           var Portal = REACT_PORTAL_TYPE;
@@ -19066,7 +19066,7 @@ var require_index_es = __commonJS({
           reactIs_development.ContextProvider = ContextProvider;
           reactIs_development.Element = Element2;
           reactIs_development.ForwardRef = ForwardRef;
-          reactIs_development.Fragment = Fragment;
+          reactIs_development.Fragment = Fragment2;
           reactIs_development.Lazy = Lazy;
           reactIs_development.Memo = Memo;
           reactIs_development.Portal = Portal;
@@ -36158,6 +36158,24 @@ To automatically clean-up native timers, use \`shouldClearNativeTimers\`.`
         el.click();
         globalExpect(onClick).toHaveBeenCalled();
       });
+      it("namespaces svg ids per instance so two icons never share defs", () => {
+        const markup2 = "<svg><defs><linearGradient id='grad'><stop stop-color='currentColor'/></linearGradient></defs><path fill='url(#grad)'/></svg>";
+        render(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Icon, { markup: markup2, name: "A" }),
+            /* @__PURE__ */ jsx(Icon, { markup: markup2, name: "B" })
+          ] })
+        );
+        const gradients = document.querySelectorAll("linearGradient");
+        const paths = document.querySelectorAll("path");
+        globalExpect(gradients).toHaveLength(2);
+        const idA = gradients[0].getAttribute("id");
+        const idB = gradients[1].getAttribute("id");
+        globalExpect(idA).not.toBe("grad");
+        globalExpect(idA).not.toBe(idB);
+        globalExpect(paths[0].getAttribute("fill")).toBe(`url(#${idA})`);
+        globalExpect(paths[1].getAttribute("fill")).toBe(`url(#${idB})`);
+      });
     });
   }
 });