@consumidor-positivo/aurora 0.12.0 → 1.1.0

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { B as BREAKPOINT_MD, a as BREAKPOINT_LG } from "../../tokens-CKZdIZ5O.js";
+import { B as BREAKPOINT_MD, a as BREAKPOINT_LG } from "../../tokens-C4yCunfz.js";
 const Image = ({ srcMob, srcTablet, srcDesk, ...props }) => {
   return /* @__PURE__ */ jsxs("picture", { children: [
     /* @__PURE__ */ jsx("source", { media: `(max-width: ${BREAKPOINT_MD})`, srcSet: srcMob }),

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

@@ -1,10 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import "../../index-C6Q03EyZ.js";
+import "react";
 import "../Icon/index.es.js";
 import { IconAlertOctagon } from "../icons/IconAlertOctagon/index.es.js";
 import { IconCheck } from "../icons/IconCheck/index.es.js";
 import { IconSlash } from "../icons/IconSlash/index.es.js";
-import { C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, c as COLOR_NEUTRAL_40 } from "../../tokens-CKZdIZ5O.js";
+import { C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, c as COLOR_NEUTRAL_40 } from "../../tokens-C4yCunfz.js";
 const FieldLabel = ({
   id,
   labelId,

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Field/Label/index.tsx"],"sourcesContent":["import { IconAlertOctagon, IconCheck, IconSlash } from '@components/icons'\nimport {\n  COLOR_ERROR_50,\n  COLOR_NEUTRAL_40,\n  COLOR_SUCCESS_50,\n} from '@core/tokens'\n\ntype FieldLabelProps = {\n  id?: string\n  labelId?: string\n  text?: string | React.ReactNode\n  required?: boolean\n  success?: boolean\n  error?: boolean\n  disabled?: boolean\n  showOptionalLabel?: boolean\n}\n\nexport const FieldLabel = ({\n  id,\n  labelId,\n  text,\n  required,\n  success,\n  error,\n  disabled,\n  showOptionalLabel = true,\n}: FieldLabelProps) => {\n  if (!text) return null\n\n  const states = [\n    {\n      state: 'success',\n      value: !!success,\n      icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n    },\n    {\n      state: 'error',\n      value: !!error,\n      icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n    },\n    {\n      state: 'disabled',\n      value: !!disabled,\n      icon: <IconSlash rawColor={COLOR_NEUTRAL_40} />,\n    },\n  ]\n\n  const currentState = states.find(({ value }) => !!value)\n\n  return (\n    <div className=\"au-field__header\">\n      <label id={labelId} htmlFor={id} className=\"au-field__header-label\">\n        {text}{' '}\n        {showOptionalLabel && !required && (\n          <span className=\"au-field__header-label--optional\">(Opcional)</span>\n        )}\n        {!showOptionalLabel && required && (\n          <>\n            <strong className=\"au-field__header-label--required\" aria-hidden=\"true\">*</strong>\n            <span className=\"au-sr-only\">obrigatório</span>\n          </>\n        )}\n      </label>\n      <div className=\"au-field__header-icon\" aria-hidden=\"true\">{currentState?.icon}</div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,MAAuB;AACrB,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,EAC/C;AAGF,QAAM,eAAe,OAAO,KAAK,CAAC,EAAE,MAAA,MAAY,CAAC,CAAC,KAAK;AAEvD,SACE,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,IAAA,qBAAC,WAAM,IAAI,SAAS,SAAS,IAAI,WAAU,0BACxC,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MACN,qBAAqB,CAAC,gCACpB,QAAA,EAAK,WAAU,oCAAmC,UAAA,cAAU;AAAA,MAE9D,CAAC,qBAAqB,YACrB,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,oCAAmC,eAAY,QAAO,UAAA,KAAC;AAAA,QACzE,oBAAC,QAAA,EAAK,WAAU,cAAa,UAAA,cAAA,CAAW;AAAA,MAAA,EAAA,CAC1C;AAAA,IAAA,GAEJ;AAAA,wBACC,OAAA,EAAI,WAAU,yBAAwB,eAAY,QAAQ,uDAAc,KAAA,CAAK;AAAA,EAAA,GAChF;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Field/Label/index.tsx"],"sourcesContent":["import { IconAlertOctagon, IconCheck, IconSlash } from '@components/icons'\nimport {\n  COLOR_ERROR_50,\n  COLOR_NEUTRAL_40,\n  COLOR_SUCCESS_50,\n} from '@core/tokens'\n\ntype FieldLabelProps = {\n  id?: string\n  labelId?: string\n  text?: string | React.ReactNode\n  required?: boolean\n  success?: boolean\n  error?: boolean\n  disabled?: boolean\n  showOptionalLabel?: boolean\n}\n\nexport const FieldLabel = ({\n  id,\n  labelId,\n  text,\n  required,\n  success,\n  error,\n  disabled,\n  showOptionalLabel = true,\n}: FieldLabelProps) => {\n  if (!text) return null\n\n  const states = [\n    {\n      state: 'success',\n      value: !!success,\n      icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n    },\n    {\n      state: 'error',\n      value: !!error,\n      icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n    },\n    {\n      state: 'disabled',\n      value: !!disabled,\n      icon: <IconSlash rawColor={COLOR_NEUTRAL_40} />,\n    },\n  ]\n\n  const currentState = states.find(({ value }) => !!value)\n\n  return (\n    <div className=\"au-field__header\">\n      <label id={labelId} htmlFor={id} className=\"au-field__header-label\">\n        {text}{' '}\n        {showOptionalLabel && !required && (\n          <span className=\"au-field__header-label--optional\">(Opcional)</span>\n        )}\n        {!showOptionalLabel && required && (\n          <>\n            <strong className=\"au-field__header-label--required\" aria-hidden=\"true\">*</strong>\n            <span className=\"au-sr-only\">obrigatório</span>\n          </>\n        )}\n      </label>\n      <div className=\"au-field__header-icon\" aria-hidden=\"true\">{currentState?.icon}</div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAkBO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,MAAuB;AACrB,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,EAC/C;AAGF,QAAM,eAAe,OAAO,KAAK,CAAC,EAAE,MAAA,MAAY,CAAC,CAAC,KAAK;AAEvD,SACE,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,IAAA,qBAAC,WAAM,IAAI,SAAS,SAAS,IAAI,WAAU,0BACxC,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MACN,qBAAqB,CAAC,gCACpB,QAAA,EAAK,WAAU,oCAAmC,UAAA,cAAU;AAAA,MAE9D,CAAC,qBAAqB,YACrB,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,oCAAmC,eAAY,QAAO,UAAA,KAAC;AAAA,QACzE,oBAAC,QAAA,EAAK,WAAU,cAAa,UAAA,cAAA,CAAW;AAAA,MAAA,EAAA,CAC1C;AAAA,IAAA,GAEJ;AAAA,wBACC,OAAA,EAAI,WAAU,yBAAwB,eAAY,QAAQ,uDAAc,KAAA,CAAK;AAAA,EAAA,GAChF;AAEJ;"}

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

@@ -0,0 +1,27 @@
+import { default as React, ReactNode } from 'react';
+export type LinkButtonProps = ({
+    as: 'a';
+    href: string;
+    target?: string;
+} | {
+    as?: 'button';
+    href?: never;
+    target?: never;
+}) & {
+    children?: ReactNode;
+    /**
+     * Token size (Figma: Link Button, Size). small = 14px text / 16px icons,
+     * medium = 16px / 20px, large = 20px / 20px.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /** Icon rendered before the label (Figma: Left Icon + Switch Icon Left). */
+    iconLeft?: ReactNode;
+    /** Icon rendered after the label (Figma: Right Icon + Switch Icon Right). */
+    iconRight?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const LinkButton: ({ as, href, target, children, size, iconLeft, iconRight, onClick, disabled, className, "data-testid": dataTestId, }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,56 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { c as classNames } from "../../index-C6Q03EyZ.js";
+import './styles.css';const LinkButton = ({
+  as,
+  href,
+  target,
+  children = "Link",
+  size = "medium",
+  iconLeft,
+  iconRight,
+  onClick,
+  disabled = false,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const classes = classNames(
+    "au-link-button",
+    {
+      [`au-link-button--size-${size}`]: !!size,
+      "au-link-button--disabled": disabled
+    },
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconLeft && /* @__PURE__ */ jsx("span", { className: "au-link-button__icon", "aria-hidden": "true", children: iconLeft }),
+    children,
+    iconRight && /* @__PURE__ */ jsx("span", { className: "au-link-button__icon", "aria-hidden": "true", children: iconRight })
+  ] });
+  if (as === "a") {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: classes,
+        href,
+        target,
+        "data-testid": dataTestId,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick,
+      disabled,
+      "data-testid": dataTestId,
+      children: content
+    }
+  );
+};
+export {
+  LinkButton
+};
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/LinkButton/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React, { ReactNode } from 'react'\nimport './styles.scss'\n\nexport type LinkButtonProps = (\n  | {\n      as: 'a'\n      href: string\n      target?: string\n    }\n  | {\n      as?: 'button'\n      href?: never\n      target?: never\n    }\n) & {\n  children?: ReactNode\n  /**\n   * Token size (Figma: Link Button, Size). small = 14px text / 16px icons,\n   * medium = 16px / 20px, large = 20px / 20px.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large'\n  /** Icon rendered before the label (Figma: Left Icon + Switch Icon Left). */\n  iconLeft?: ReactNode\n  /** Icon rendered after the label (Figma: Right Icon + Switch Icon Right). */\n  iconRight?: ReactNode\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  disabled?: boolean\n  className?: string\n  'data-testid'?: string\n}\n\nexport const LinkButton = ({\n  as,\n  href,\n  target,\n  children = 'Link',\n  size = 'medium',\n  iconLeft,\n  iconRight,\n  onClick,\n  disabled = false,\n  className,\n  'data-testid': dataTestId,\n}: LinkButtonProps) => {\n  const classes = classNames(\n    'au-link-button',\n    {\n      [`au-link-button--size-${size}`]: !!size,\n      'au-link-button--disabled': disabled,\n    },\n    className,\n  )\n\n  const content = (\n    <>\n      {iconLeft && (\n        <span className=\"au-link-button__icon\" aria-hidden=\"true\">\n          {iconLeft}\n        </span>\n      )}\n      {children}\n      {iconRight && (\n        <span className=\"au-link-button__icon\" aria-hidden=\"true\">\n          {iconRight}\n        </span>\n      )}\n    </>\n  )\n\n  if (as === 'a') {\n    return (\n      <a\n        className={classes}\n        href={href}\n        target={target}\n        data-testid={dataTestId}>\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      onClick={onClick}\n      disabled={disabled}\n      data-testid={dataTestId}>\n      {content}\n    </button>\n  )\n}\n"],"names":[],"mappings":";;AAiCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,eAAe;AACjB,MAAuB;AACrB,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,MACE,CAAC,wBAAwB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,MACpC,4BAA4B;AAAA,IAAA;AAAA,IAE9B;AAAA,EAAA;AAGF,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,gCACE,QAAA,EAAK,WAAU,wBAAuB,eAAY,QAChD,UAAA,UACH;AAAA,IAED;AAAA,IACA,aACC,oBAAC,QAAA,EAAK,WAAU,wBAAuB,eAAY,QAChD,UAAA,UAAA,CACH;AAAA,EAAA,GAEJ;AAGF,MAAI,OAAO,KAAK;AACd,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACZ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/LinkButton/styles.css

@@ -0,0 +1 @@
+.au-link-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0;border:none;background:transparent;color:#0048db;font-family:"Source Sans 3",sans-serif;font-weight:600;text-decoration:none;cursor:pointer}.au-link-button:hover,.au-link-button:focus,.au-link-button:active{color:#1737a4}.au-link-button .au-icon,.au-link-button .au-icon>svg{color:currentColor}.au-link-button__icon{display:inline-flex}.au-link-button--size-small{font-size:14px;line-height:22px}.au-link-button--size-small .au-icon,.au-link-button--size-small .au-icon>svg{width:16px;height:16px}.au-link-button--size-medium{font-size:16px;line-height:24px}.au-link-button--size-medium .au-icon,.au-link-button--size-medium .au-icon>svg{width:20px;height:20px}.au-link-button--size-large{font-size:20px;line-height:28px}.au-link-button--size-large .au-icon,.au-link-button--size-large .au-icon>svg{width:20px;height:20px}.au-link-button--disabled{color:#c4c9d4;cursor:not-allowed}.au-link-button--disabled:hover,.au-link-button--disabled:focus,.au-link-button--disabled:active{color:#c4c9d4}

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

@@ -3,6 +3,8 @@ type ModalLayoutMobile = 'default' | 'centralized' | 'full-screen';
 export type ModalProps = {
     isOpen: boolean;
     onClose?: () => void;
+    /** Calls onClose when the backdrop (area outside the container) is clicked */
+    closeOnBackdropClick?: boolean;
     headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[];
     content?: React.ReactNode | string | JSX.Element | JSX.Element[];
     layoutMobile?: ModalLayoutMobile;
@@ -12,5 +14,5 @@ export type ModalProps = {
     ariaLabel?: string;
     'data-testid'?: string;
 };
-export declare const Modal: ({ isOpen, onClose, headerContent, content, layoutMobile, layoutDesktop, mobileModalTitle, handleHelpInfo, ariaLabel, "data-testid": dataTestId, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Modal: ({ isOpen, onClose, closeOnBackdropClick, headerContent, content, layoutMobile, layoutDesktop, mobileModalTitle, handleHelpInfo, ariaLabel, "data-testid": dataTestId, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Modal/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 { IconX } from "../icons/IconX/index.es.js";
 import { SubHeader } from "../SubHeader/index.es.js";
@@ -8,6 +9,7 @@ import { i as isMobile } from "../../isMobile-RyKhTreE.js";
 import './styles.css';const Modal = ({
   isOpen,
   onClose,
+  closeOnBackdropClick = false,
   headerContent,
   content,
   layoutMobile = "default",
@@ -24,6 +26,11 @@ import './styles.css';const Modal = ({
     "au-modal--mobile-centralized": layoutMobile === "centralized",
     "au-modal--desktop-centralized": layoutDesktop === "centralized"
   });
+  function handleBackdropClick(e) {
+    if (closeOnBackdropClick && e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -31,6 +38,7 @@ import './styles.css';const Modal = ({
       role: "dialog",
       "aria-modal": "true",
       "aria-label": ariaLabel ?? mobileModalTitle,
+      onClick: handleBackdropClick,
       "data-testid": dataTestId,
       children: /* @__PURE__ */ jsxs("div", { className: "au-modal__container", children: [
         /* @__PURE__ */ jsx("div", { className: "au-modal__header", children: /* @__PURE__ */ jsxs(If, { condition: layoutMobile !== "full-screen" || !isMobile(), children: [

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Modal/index.tsx"],"sourcesContent":["import { IconX } from '@components/icons'\nimport { SubHeader } from '@components/SubHeader'\nimport classNames from 'classnames'\nimport { If, IfElse, Then, Else } from '../misc'\n\nimport { isMobile } from '@core/utils/isMobile'\n\nimport './styles.scss'\n\ntype ModalLayout = 'default' | 'centralized'\ntype ModalLayoutMobile = 'default' | 'centralized' | 'full-screen'\n\nexport type ModalProps = {\n  isOpen: boolean\n  onClose?: () => void\n  headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  content?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  layoutMobile?: ModalLayoutMobile\n  layoutDesktop?: ModalLayout\n  mobileModalTitle?: string\n  handleHelpInfo?: () => void\n  ariaLabel?: string\n  'data-testid'?: string\n}\n\nexport const Modal = ({\n  isOpen,\n  onClose,\n  headerContent,\n  content,\n  layoutMobile = 'default',\n  layoutDesktop = 'default',\n  mobileModalTitle = 'Título',\n  handleHelpInfo,\n  ariaLabel,\n  'data-testid': dataTestId,\n}: ModalProps) => {\n  if (!isOpen) return null\n\n  const modalClasses = classNames('au-modal', {\n    'au-modal--is-open': isOpen,\n    'au-modal--mobile-full-screen': layoutMobile === 'full-screen',\n    'au-modal--mobile-centralized': layoutMobile === 'centralized',\n    'au-modal--desktop-centralized': layoutDesktop === 'centralized',\n  })\n\n  return (\n    <div\n      className={modalClasses}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={ariaLabel ?? mobileModalTitle}\n      data-testid={dataTestId}>\n      <div className=\"au-modal__container\">\n        <div className=\"au-modal__header\">\n          <IfElse condition={layoutMobile !== 'full-screen' || !isMobile()}>\n            <Then>\n              <If condition={!!onClose}>\n                <button className=\"au-modal__header-close\" onClick={onClose} aria-label=\"Fechar\">\n                  <IconX className=\"au-modal__header-close-icon\" aria-hidden=\"true\" />\n                </button>\n              </If>\n              {headerContent}\n            </Then>\n            <Else>\n              <If condition={!!onClose}>\n                <SubHeader\n                  title={mobileModalTitle}\n                  handleReturn={onClose!}\n                  handleHelpInfo={handleHelpInfo}\n                />\n              </If>\n            </Else>\n          </IfElse>\n        </div>\n        <div className=\"au-modal__content\">{content}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["IfElse","If"],"mappings":";;;;;;;AAyBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAkB;AAChB,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,eAAe,WAAW,YAAY;AAAA,IAC1C,qBAAqB;AAAA,IACrB,gCAAgC,iBAAiB;AAAA,IACjD,gCAAgC,iBAAiB;AAAA,IACjD,iCAAiC,kBAAkB;AAAA,EAAA,CACpD;AAED,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cAAY,aAAa;AAAA,MACzB,eAAa;AAAA,MACb,UAAA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,oBACb,UAAA,qBAACA,IAAA,EAAO,WAAW,iBAAiB,iBAAiB,CAAC,SAAA,GACpD,UAAA;AAAA,UAAA,qBAAC,MAAA,EACC,UAAA;AAAA,YAAA,oBAACC,MAAA,EAAG,WAAW,CAAC,CAAC,SACf,UAAA,oBAAC,UAAA,EAAO,WAAU,0BAAyB,SAAS,SAAS,cAAW,UACtE,8BAAC,OAAA,EAAM,WAAU,+BAA8B,eAAY,QAAO,GACpE,EAAA,CACF;AAAA,YACC;AAAA,UAAA,GACH;AAAA,8BACC,MAAA,EACC,UAAA,oBAACA,QAAG,WAAW,CAAC,CAAC,SACf,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,cAAc;AAAA,cACd;AAAA,YAAA;AAAA,UAAA,GAEJ,EAAA,CACF;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,QACA,oBAAC,OAAA,EAAI,WAAU,qBAAqB,UAAA,QAAA,CAAQ;AAAA,MAAA,EAAA,CAC9C;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Modal/index.tsx"],"sourcesContent":["import { IconX } from '@components/icons'\nimport { SubHeader } from '@components/SubHeader'\nimport classNames from 'classnames'\nimport { If, IfElse, Then, Else } from '../misc'\n\nimport { isMobile } from '@core/utils/isMobile'\n\nimport './styles.scss'\n\ntype ModalLayout = 'default' | 'centralized'\ntype ModalLayoutMobile = 'default' | 'centralized' | 'full-screen'\n\nexport type ModalProps = {\n  isOpen: boolean\n  onClose?: () => void\n  /** Calls onClose when the backdrop (area outside the container) is clicked */\n  closeOnBackdropClick?: boolean\n  headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  content?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  layoutMobile?: ModalLayoutMobile\n  layoutDesktop?: ModalLayout\n  mobileModalTitle?: string\n  handleHelpInfo?: () => void\n  ariaLabel?: string\n  'data-testid'?: string\n}\n\nexport const Modal = ({\n  isOpen,\n  onClose,\n  closeOnBackdropClick = false,\n  headerContent,\n  content,\n  layoutMobile = 'default',\n  layoutDesktop = 'default',\n  mobileModalTitle = 'Título',\n  handleHelpInfo,\n  ariaLabel,\n  'data-testid': dataTestId,\n}: ModalProps) => {\n  if (!isOpen) return null\n\n  const modalClasses = classNames('au-modal', {\n    'au-modal--is-open': isOpen,\n    'au-modal--mobile-full-screen': layoutMobile === 'full-screen',\n    'au-modal--mobile-centralized': layoutMobile === 'centralized',\n    'au-modal--desktop-centralized': layoutDesktop === 'centralized',\n  })\n\n  function handleBackdropClick(e: React.MouseEvent<HTMLDivElement>) {\n    if (closeOnBackdropClick && e.target === e.currentTarget && onClose) {\n      onClose()\n    }\n  }\n\n  return (\n    <div\n      className={modalClasses}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={ariaLabel ?? mobileModalTitle}\n      onClick={handleBackdropClick}\n      data-testid={dataTestId}>\n      <div className=\"au-modal__container\">\n        <div className=\"au-modal__header\">\n          <IfElse condition={layoutMobile !== 'full-screen' || !isMobile()}>\n            <Then>\n              <If condition={!!onClose}>\n                <button className=\"au-modal__header-close\" onClick={onClose} aria-label=\"Fechar\">\n                  <IconX className=\"au-modal__header-close-icon\" aria-hidden=\"true\" />\n                </button>\n              </If>\n              {headerContent}\n            </Then>\n            <Else>\n              <If condition={!!onClose}>\n                <SubHeader\n                  title={mobileModalTitle}\n                  handleReturn={onClose!}\n                  handleHelpInfo={handleHelpInfo}\n                />\n              </If>\n            </Else>\n          </IfElse>\n        </div>\n        <div className=\"au-modal__content\">{content}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["IfElse","If"],"mappings":";;;;;;;;AA2BO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAkB;AAChB,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,eAAe,WAAW,YAAY;AAAA,IAC1C,qBAAqB;AAAA,IACrB,gCAAgC,iBAAiB;AAAA,IACjD,gCAAgC,iBAAiB;AAAA,IACjD,iCAAiC,kBAAkB;AAAA,EAAA,CACpD;AAED,WAAS,oBAAoB,GAAqC;AAChE,QAAI,wBAAwB,EAAE,WAAW,EAAE,iBAAiB,SAAS;AACnE,cAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cAAY,aAAa;AAAA,MACzB,SAAS;AAAA,MACT,eAAa;AAAA,MACb,UAAA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,oBACb,UAAA,qBAACA,IAAA,EAAO,WAAW,iBAAiB,iBAAiB,CAAC,SAAA,GACpD,UAAA;AAAA,UAAA,qBAAC,MAAA,EACC,UAAA;AAAA,YAAA,oBAACC,MAAA,EAAG,WAAW,CAAC,CAAC,SACf,UAAA,oBAAC,UAAA,EAAO,WAAU,0BAAyB,SAAS,SAAS,cAAW,UACtE,8BAAC,OAAA,EAAM,WAAU,+BAA8B,eAAY,QAAO,GACpE,EAAA,CACF;AAAA,YACC;AAAA,UAAA,GACH;AAAA,8BACC,MAAA,EACC,UAAA,oBAACA,QAAG,WAAW,CAAC,CAAC,SACf,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,cAAc;AAAA,cACd;AAAA,YAAA;AAAA,UAAA,GAEJ,EAAA,CACF;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,QACA,oBAAC,OAAA,EAAI,WAAU,qBAAqB,UAAA,QAAA,CAAQ;AAAA,MAAA,EAAA,CAC9C;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { a as above } from "../../screen-DfYo7XQ_.js";
+import { B as BREAKPOINT_MD } from "../../tokens-C4yCunfz.js";
 import { Portal } from "../Portal/index.es.js";
-import { B as BREAKPOINT_MD } from "../../tokens-CKZdIZ5O.js";
 const PortalHolder = ({ withPortal, children }) => {
   const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
   if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });

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

@@ -1,10 +1,11 @@
 import "react/jsx-runtime";
 import "../../index-C6Q03EyZ.js";
+import "react";
 import "../Icon/index.es.js";
 import "../icons/IconChevronDown/index.es.js";
 import "../icons/IconChevronLeft/index.es.js";
 import "../icons/IconX/index.es.js";
-import { S } from "../../index-fyDB87KK.js";
+import { S } from "../../index-DnQGzfVW.js";
 export {
   S as Segment
 };

package/dist/components/Segment/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/SelectField/index.es.js

@@ -10,9 +10,9 @@ import { IconSlash } from "../icons/IconSlash/index.es.js";
 import { Modal } from "../Modal/index.es.js";
 import { Text } from "../Text/index.es.js";
 import { Conditional } from "../Conditional/index.es.js";
+import { c as COLOR_NEUTRAL_40 } from "../../tokens-C4yCunfz.js";
 import { i as isMobile } from "../../isMobile-RyKhTreE.js";
 import { F as Field } from "../../index-ZE6zszxw.js";
-import { c as COLOR_NEUTRAL_40 } from "../../tokens-CKZdIZ5O.js";
 import './styles.css';const useSelectField = (options, initialValue, onChange, onBlur, disabled, register, autocomplete = false, fullScreenOptions = false) => {
   var _a;
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);

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

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

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+export type SpecialButtonProps = {
+    /**
+     * Interaction mode: 'press' is hold-to-confirm (Figma: Press Button),
+     * 'slider' is swipe-to-confirm (Figma: Swipe Button).
+     * @default 'press'
+     */
+    type?: 'press' | 'slider';
+    children?: ReactNode;
+    /** Called once when the interaction completes (hold finished / knob dragged to the end). */
+    onConfirm?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    /**
+     * Controlled success state. The component also enters success on its own
+     * right after a completed interaction.
+     */
+    success?: boolean;
+    /**
+     * Press only — time in milliseconds the user must keep pressing to confirm.
+     * @default 1500
+     */
+    holdDuration?: number;
+    /** Press only — stretches the button to fill the container width. */
+    expand?: 'x';
+    /** Slider only — visual variant (Figma: Swipe Button, ◇ Type Primary | Secondary). */
+    variant?: 'primary' | 'secondary';
+    /** Slider only — renders an empty skeleton placeholder. */
+    skeleton?: boolean;
+    /**
+     * Slider only — accessible label for the draggable knob. Pressing Enter or
+     * Space on the focused knob confirms directly (keyboard alternative to the
+     * swipe gesture).
+     */
+    knobAriaLabel?: string;
+    /**
+     * Slider only — helper text shown below the button after an incomplete
+     * drag, guiding the user to slide all the way to the end.
+     * @default 'Arraste até o final para confirmar ação'
+     */
+    incompleteHint?: ReactNode;
+    'data-testid'?: string;
+};
+export declare const SpecialButton: ({ type, ...props }: SpecialButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,229 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { c as classNames } from "../../index-C6Q03EyZ.js";
+import { useRef, useState, useEffect } from "react";
+import "../Icon/index.es.js";
+import { IconArrowRight } from "../icons/IconArrowRight/index.es.js";
+import { IconCheck } from "../icons/IconCheck/index.es.js";
+import { IconLoader } from "../icons/IconLoader/index.es.js";
+import { IconSlash } from "../icons/IconSlash/index.es.js";
+import { Conditional } from "../Conditional/index.es.js";
+import './styles.css';const KNOB_SIZE = 40;
+const TRACK_PADDING = 4;
+const CONFIRM_THRESHOLD = 0.7;
+const COMPLETE_ANIMATION_MS = 400;
+const _PressButton = ({
+  children = "Hold to confirm",
+  onConfirm,
+  holdDuration = 1500,
+  disabled = false,
+  loading = false,
+  success = false,
+  expand,
+  "data-testid": dataTestId
+}) => {
+  const [holding, setHolding] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+  const timerRef = useRef();
+  const isSuccess = success || confirmed;
+  const isInteractive = !disabled && !loading && !isSuccess;
+  useEffect(() => () => window.clearTimeout(timerRef.current), []);
+  function _startHold() {
+    if (!isInteractive || holding) return;
+    setHolding(true);
+    timerRef.current = window.setTimeout(() => {
+      setHolding(false);
+      setConfirmed(true);
+      if (onConfirm) onConfirm();
+    }, holdDuration);
+  }
+  function _cancelHold() {
+    if (!holding) return;
+    window.clearTimeout(timerRef.current);
+    setHolding(false);
+  }
+  function handleKeyDown(event) {
+    if ((event.key === "Enter" || event.key === " ") && !event.repeat) {
+      event.preventDefault();
+      _startHold();
+    }
+  }
+  function handleKeyUp(event) {
+    if (event.key === "Enter" || event.key === " ") _cancelHold();
+  }
+  const classes = classNames("au-special-button", "au-special-button--type-press", {
+    "au-special-button--holding": holding,
+    "au-special-button--disabled": disabled,
+    "au-special-button--loading": loading,
+    "au-special-button--success": isSuccess,
+    [`au-special-button--expand-${expand}`]: !!expand
+  });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      style: {
+        "--au-special-button-duration": `${holdDuration}ms`
+      },
+      disabled: disabled || loading,
+      "aria-busy": loading,
+      onPointerDown: _startHold,
+      onPointerUp: _cancelHold,
+      onPointerLeave: _cancelHold,
+      onPointerCancel: _cancelHold,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "au-special-button__fill", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          Conditional,
+          {
+            condition: loading,
+            renderIf: /* @__PURE__ */ jsx(IconLoader, {}),
+            renderElse: /* @__PURE__ */ jsxs("span", { className: "au-special-button__label", children: [
+              disabled && /* @__PURE__ */ jsx(IconSlash, { "aria-hidden": "true" }),
+              children
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+const _SliderButton = ({
+  children = "Slide to action",
+  onConfirm,
+  variant = "primary",
+  disabled = false,
+  loading = false,
+  success = false,
+  skeleton = false,
+  knobAriaLabel = "Arraste para confirmar",
+  incompleteHint = "Arraste até o final para confirmar ação",
+  "data-testid": dataTestId
+}) => {
+  const containerRef = useRef(null);
+  const startXRef = useRef(0);
+  const completeTimerRef = useRef();
+  const [dragging, setDragging] = useState(false);
+  const [dragX, setDragX] = useState(0);
+  const [completing, setCompleting] = useState(false);
+  const [showHint, setShowHint] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+  const isSuccess = success || confirmed;
+  const isInteractive = !disabled && !loading && !isSuccess && !skeleton && !completing;
+  useEffect(() => () => window.clearTimeout(completeTimerRef.current), []);
+  function _maxDrag() {
+    const container = containerRef.current;
+    if (!container) return 0;
+    return container.clientWidth - KNOB_SIZE - TRACK_PADDING * 2;
+  }
+  function _confirm() {
+    setConfirmed(true);
+    if (onConfirm) onConfirm();
+  }
+  function _complete() {
+    setDragging(false);
+    setCompleting(true);
+    setShowHint(false);
+    setDragX(_maxDrag());
+    completeTimerRef.current = window.setTimeout(() => {
+      setCompleting(false);
+      setDragX(0);
+      _confirm();
+    }, COMPLETE_ANIMATION_MS);
+  }
+  function handlePointerDown(event) {
+    var _a, _b;
+    if (!isInteractive) return;
+    setDragging(true);
+    startXRef.current = event.clientX;
+    (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+  }
+  function handlePointerMove(event) {
+    if (!dragging) return;
+    const max = _maxDrag();
+    const delta = event.clientX - startXRef.current;
+    const next = Math.min(Math.max(delta, 0), max);
+    setDragX(next);
+    if (max > 0 && next >= max * CONFIRM_THRESHOLD) _complete();
+  }
+  function handlePointerEnd() {
+    if (!dragging) return;
+    setDragging(false);
+    if (dragX > 0) setShowHint(true);
+    setDragX(0);
+  }
+  function handleKeyDown(event) {
+    if (!isInteractive) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      _confirm();
+    }
+  }
+  const classes = classNames(
+    "au-special-button",
+    "au-special-button--type-slider",
+    {
+      [`au-special-button--variant-${variant}`]: !!variant,
+      "au-special-button--dragging": dragging,
+      "au-special-button--completing": completing,
+      "au-special-button--disabled": disabled,
+      "au-special-button--loading": loading,
+      "au-special-button--success": isSuccess,
+      "au-special-button--skeleton": skeleton
+    }
+  );
+  function _renderKnobIcon() {
+    if (isSuccess) return /* @__PURE__ */ jsx(IconCheck, { "aria-hidden": "true" });
+    if (disabled) return /* @__PURE__ */ jsx(IconSlash, { "aria-hidden": "true" });
+    return /* @__PURE__ */ jsx(IconArrowRight, { "aria-hidden": "true" });
+  }
+  const maxDrag = _maxDrag();
+  const dragProgress = maxDrag > 0 ? dragX / maxDrag : 0;
+  return /* @__PURE__ */ jsxs("div", { className: "au-special-button-wrapper", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: classes,
+        style: {
+          "--au-special-button-progress": dragProgress
+        },
+        "data-testid": dataTestId,
+        children: [
+          loading && /* @__PURE__ */ jsx(IconLoader, {}),
+          !loading && !skeleton && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "au-special-button__label", children }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "au-special-button__knob",
+                "aria-label": knobAriaLabel,
+                disabled,
+                style: dragX > 0 ? { transform: `translateX(${dragX}px)` } : void 0,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerEnd,
+                onPointerCancel: handlePointerEnd,
+                onKeyDown: handleKeyDown,
+                children: _renderKnobIcon()
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    showHint && !isSuccess && /* @__PURE__ */ jsx("span", { className: "au-special-button__hint", role: "status", children: incompleteHint })
+  ] });
+};
+const SpecialButton = ({ type = "press", ...props }) => {
+  if (type === "slider") return /* @__PURE__ */ jsx(_SliderButton, { ...props });
+  return /* @__PURE__ */ jsx(_PressButton, { ...props });
+};
+export {
+  SpecialButton
+};
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/SpecialButton/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React, { ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  IconArrowRight,\n  IconCheck,\n  IconLoader,\n  IconSlash,\n} from '../icons/default'\nimport { Conditional } from '../misc/Conditional'\nimport './styles.scss'\n\nconst KNOB_SIZE = 40\nconst TRACK_PADDING = 4\n// Figma (Behavior): a partir de ~70% do trajeto a ação já conta como\n// confirmada e o botão se completa sozinho.\nconst CONFIRM_THRESHOLD = 0.7\nconst COMPLETE_ANIMATION_MS = 400\n\nexport type SpecialButtonProps = {\n  /**\n   * Interaction mode: 'press' is hold-to-confirm (Figma: Press Button),\n   * 'slider' is swipe-to-confirm (Figma: Swipe Button).\n   * @default 'press'\n   */\n  type?: 'press' | 'slider'\n  children?: ReactNode\n  /** Called once when the interaction completes (hold finished / knob dragged to the end). */\n  onConfirm?: () => void\n  disabled?: boolean\n  loading?: boolean\n  /**\n   * Controlled success state. The component also enters success on its own\n   * right after a completed interaction.\n   */\n  success?: boolean\n  /**\n   * Press only — time in milliseconds the user must keep pressing to confirm.\n   * @default 1500\n   */\n  holdDuration?: number\n  /** Press only — stretches the button to fill the container width. */\n  expand?: 'x'\n  /** Slider only — visual variant (Figma: Swipe Button, ◇ Type Primary | Secondary). */\n  variant?: 'primary' | 'secondary'\n  /** Slider only — renders an empty skeleton placeholder. */\n  skeleton?: boolean\n  /**\n   * Slider only — accessible label for the draggable knob. Pressing Enter or\n   * Space on the focused knob confirms directly (keyboard alternative to the\n   * swipe gesture).\n   */\n  knobAriaLabel?: string\n  /**\n   * Slider only — helper text shown below the button after an incomplete\n   * drag, guiding the user to slide all the way to the end.\n   * @default 'Arraste até o final para confirmar ação'\n   */\n  incompleteHint?: ReactNode\n  'data-testid'?: string\n}\n\nconst _PressButton = ({\n  children = 'Hold to confirm',\n  onConfirm,\n  holdDuration = 1500,\n  disabled = false,\n  loading = false,\n  success = false,\n  expand,\n  'data-testid': dataTestId,\n}: SpecialButtonProps) => {\n  const [holding, setHolding] = useState(false)\n  const [confirmed, setConfirmed] = useState(false)\n  const timerRef = useRef<number>()\n\n  const isSuccess = success || confirmed\n  const isInteractive = !disabled && !loading && !isSuccess\n\n  useEffect(() => () => window.clearTimeout(timerRef.current), [])\n\n  function _startHold() {\n    if (!isInteractive || holding) return\n    setHolding(true)\n    timerRef.current = window.setTimeout(() => {\n      setHolding(false)\n      setConfirmed(true)\n      if (onConfirm) onConfirm()\n    }, holdDuration)\n  }\n\n  function _cancelHold() {\n    if (!holding) return\n    window.clearTimeout(timerRef.current)\n    setHolding(false)\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    if ((event.key === 'Enter' || event.key === ' ') && !event.repeat) {\n      event.preventDefault()\n      _startHold()\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    if (event.key === 'Enter' || event.key === ' ') _cancelHold()\n  }\n\n  const classes = classNames('au-special-button', 'au-special-button--type-press', {\n    'au-special-button--holding': holding,\n    'au-special-button--disabled': disabled,\n    'au-special-button--loading': loading,\n    'au-special-button--success': isSuccess,\n    [`au-special-button--expand-${expand}`]: !!expand,\n  })\n\n  return (\n    <button\n      type=\"button\"\n      className={classes}\n      style={\n        {\n          '--au-special-button-duration': `${holdDuration}ms`,\n        } as React.CSSProperties\n      }\n      disabled={disabled || loading}\n      aria-busy={loading}\n      onPointerDown={_startHold}\n      onPointerUp={_cancelHold}\n      onPointerLeave={_cancelHold}\n      onPointerCancel={_cancelHold}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      data-testid={dataTestId}>\n      <span className=\"au-special-button__fill\" aria-hidden=\"true\" />\n      <Conditional\n        condition={loading}\n        renderIf={<IconLoader />}\n        renderElse={\n          <span className=\"au-special-button__label\">\n            {disabled && <IconSlash aria-hidden=\"true\" />}\n            {children}\n          </span>\n        }\n      />\n    </button>\n  )\n}\n\nconst _SliderButton = ({\n  children = 'Slide to action',\n  onConfirm,\n  variant = 'primary',\n  disabled = false,\n  loading = false,\n  success = false,\n  skeleton = false,\n  knobAriaLabel = 'Arraste para confirmar',\n  incompleteHint = 'Arraste até o final para confirmar ação',\n  'data-testid': dataTestId,\n}: SpecialButtonProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const startXRef = useRef(0)\n  const completeTimerRef = useRef<number>()\n  const [dragging, setDragging] = useState(false)\n  const [dragX, setDragX] = useState(0)\n  const [completing, setCompleting] = useState(false)\n  const [showHint, setShowHint] = useState(false)\n  const [confirmed, setConfirmed] = useState(false)\n\n  const isSuccess = success || confirmed\n  const isInteractive =\n    !disabled && !loading && !isSuccess && !skeleton && !completing\n\n  useEffect(() => () => window.clearTimeout(completeTimerRef.current), [])\n\n  function _maxDrag() {\n    const container = containerRef.current\n    if (!container) return 0\n    return container.clientWidth - KNOB_SIZE - TRACK_PADDING * 2\n  }\n\n  function _confirm() {\n    setConfirmed(true)\n    if (onConfirm) onConfirm()\n  }\n\n  function _complete() {\n    setDragging(false)\n    setCompleting(true)\n    setShowHint(false)\n    setDragX(_maxDrag())\n    completeTimerRef.current = window.setTimeout(() => {\n      setCompleting(false)\n      setDragX(0)\n      _confirm()\n    }, COMPLETE_ANIMATION_MS)\n  }\n\n  function handlePointerDown(event: React.PointerEvent<HTMLButtonElement>) {\n    if (!isInteractive) return\n    setDragging(true)\n    startXRef.current = event.clientX\n    event.currentTarget.setPointerCapture?.(event.pointerId)\n  }\n\n  function handlePointerMove(event: React.PointerEvent<HTMLButtonElement>) {\n    if (!dragging) return\n    const max = _maxDrag()\n    const delta = event.clientX - startXRef.current\n    const next = Math.min(Math.max(delta, 0), max)\n    setDragX(next)\n    if (max > 0 && next >= max * CONFIRM_THRESHOLD) _complete()\n  }\n\n  function handlePointerEnd() {\n    if (!dragging) return\n    setDragging(false)\n    if (dragX > 0) setShowHint(true)\n    setDragX(0)\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    if (!isInteractive) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      _confirm()\n    }\n  }\n\n  const classes = classNames(\n    'au-special-button',\n    'au-special-button--type-slider',\n    {\n      [`au-special-button--variant-${variant}`]: !!variant,\n      'au-special-button--dragging': dragging,\n      'au-special-button--completing': completing,\n      'au-special-button--disabled': disabled,\n      'au-special-button--loading': loading,\n      'au-special-button--success': isSuccess,\n      'au-special-button--skeleton': skeleton,\n    },\n  )\n\n  function _renderKnobIcon() {\n    if (isSuccess) return <IconCheck aria-hidden=\"true\" />\n    if (disabled) return <IconSlash aria-hidden=\"true\" />\n    return <IconArrowRight aria-hidden=\"true\" />\n  }\n\n  const maxDrag = _maxDrag()\n  const dragProgress = maxDrag > 0 ? dragX / maxDrag : 0\n\n  return (\n    <div className=\"au-special-button-wrapper\">\n      <div\n        ref={containerRef}\n        className={classes}\n        style={\n          {\n            '--au-special-button-progress': dragProgress,\n          } as React.CSSProperties\n        }\n        data-testid={dataTestId}>\n        {loading && <IconLoader />}\n        {!loading && !skeleton && (\n          <>\n            <span className=\"au-special-button__label\">{children}</span>\n            <button\n              type=\"button\"\n              className=\"au-special-button__knob\"\n              aria-label={knobAriaLabel}\n              disabled={disabled}\n              style={\n                dragX > 0 ? { transform: `translateX(${dragX}px)` } : undefined\n              }\n              onPointerDown={handlePointerDown}\n              onPointerMove={handlePointerMove}\n              onPointerUp={handlePointerEnd}\n              onPointerCancel={handlePointerEnd}\n              onKeyDown={handleKeyDown}>\n              {_renderKnobIcon()}\n            </button>\n          </>\n        )}\n      </div>\n      {showHint && !isSuccess && (\n        <span className=\"au-special-button__hint\" role=\"status\">\n          {incompleteHint}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport const SpecialButton = ({ type = 'press', ...props }: SpecialButtonProps) => {\n  if (type === 'slider') return <_SliderButton {...props} />\n  return <_PressButton {...props} />\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SpecialButton/styles.css

@@ -0,0 +1 @@
+.au-special-button{position:relative;display:flex;align-items:center;justify-content:center;height:48px;border-radius:48px;overflow:hidden;background-color:#0048db;color:#fff;font-family:"Source Sans 3",sans-serif;font-size:16px;font-weight:600;-webkit-user-select:none;user-select:none}.au-special-button--type-press{display:inline-flex;gap:8px;padding:8px 16px;border:none;text-align:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}.au-special-button--type-press .au-icon,.au-special-button--type-press .au-icon>svg{width:20px;height:20px;color:#fff}.au-special-button__fill{position:absolute;top:0;left:0;bottom:0;width:0;background-color:#18256c;transition:width .2s ease}.au-special-button__label{position:relative;display:inline-flex;align-items:center;gap:8px}.au-special-button--holding .au-special-button__fill{width:100%;transition:width var(--au-special-button-duration, 1.5s) linear}.au-special-button--type-press.au-special-button--success .au-special-button__fill,.au-special-button--type-press.au-special-button--loading .au-special-button__fill{width:100%;transition:width .3s ease}.au-special-button--type-press.au-special-button--disabled{background-color:#e2e4e9;color:#c4c9d4;cursor:not-allowed}.au-special-button--type-press.au-special-button--disabled .au-icon,.au-special-button--type-press.au-special-button--disabled .au-icon>svg{width:16px;height:16px;color:#c4c9d4}.au-special-button--type-press.au-special-button--loading{cursor:progress}.au-special-button--type-press.au-special-button--loading .au-icon{position:relative;animation:au-special-button-spin 1s infinite linear}.au-special-button--expand-x{width:100%}.au-special-button__knob{position:absolute;top:4px;left:4px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background-color:#fff;box-shadow:0 24px 56px #7686ad14,0 12px 12px #0048db0a;cursor:grab;touch-action:none;transition:transform .2s ease}.au-special-button__knob .au-icon,.au-special-button__knob .au-icon>svg{width:24px;height:24px;color:#0048db}.au-special-button--dragging .au-special-button__knob{cursor:grabbing;transition:none}.au-special-button--completing .au-special-button__knob{cursor:default;transition:transform .4s ease-out}.au-special-button--type-slider .au-special-button__label{padding:8px 48px;opacity:calc(1 - var(--au-special-button-progress, 0) * 1.4);transition:opacity .1s linear}.au-special-button--variant-secondary{background-color:#fff;border:1px solid #0048db;color:#0048db}.au-special-button--type-slider.au-special-button--disabled{background-color:#f6f7fa;border:none;color:#c4c9d4}.au-special-button--type-slider.au-special-button--disabled .au-special-button__knob{background-color:#e2e4e9;box-shadow:none;cursor:not-allowed}.au-special-button--type-slider.au-special-button--disabled .au-special-button__knob .au-icon,.au-special-button--type-slider.au-special-button--disabled .au-special-button__knob .au-icon>svg{color:#c4c9d4}.au-special-button--type-slider.au-special-button--success{background-color:#138040;border:none;color:#fff}.au-special-button--type-slider.au-special-button--success .au-special-button__label{opacity:0}.au-special-button--type-slider.au-special-button--success .au-special-button__knob{left:auto;right:4px;cursor:default}.au-special-button--type-slider.au-special-button--success .au-special-button__knob .au-icon,.au-special-button--type-slider.au-special-button--success .au-special-button__knob .au-icon>svg{color:#138040}.au-special-button--variant-secondary.au-special-button--success{background-color:#fff;border:1px solid #10593b;color:#10593b}.au-special-button--variant-secondary.au-special-button--success .au-special-button__knob .au-icon,.au-special-button--variant-secondary.au-special-button--success .au-special-button__knob .au-icon>svg{color:#10593b}.au-special-button--type-slider.au-special-button--loading{background-color:#10593b;border:none;cursor:progress}.au-special-button--type-slider.au-special-button--loading .au-icon{animation:au-special-button-spin 1s infinite linear}.au-special-button--type-slider.au-special-button--loading .au-icon,.au-special-button--type-slider.au-special-button--loading .au-icon>svg{width:20px;height:20px;color:#fff}.au-special-button--skeleton{background-color:#f6f7fa;border:none;animation:au-special-button-pulse 1.5s ease-in-out infinite}.au-special-button__hint{display:block;margin-top:8px;text-align:center;font-family:"Source Sans 3",sans-serif;font-size:12px;font-weight:400;color:#313131}.au-special-button-wrapper{width:100%}@keyframes au-special-button-spin{to{transform:rotate(360deg)}}@keyframes au-special-button-pulse{0%,to{opacity:1}50%{opacity:.6}}

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

@@ -1,7 +1,11 @@
-type SpinnerProps = {
-    size: number;
-    color: string;
+export type SpinnerProps = {
+    /**
+     * Token size (Figma: Spinner, ↕ Size). small = 16px, medium = 20px, large = 32px.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /** White spinner for colored backgrounds (Figma: Negative). */
+    negative?: boolean;
     'data-testid'?: string;
 };
-export declare const Spinner: React.FC<SpinnerProps>;
-export {};
+export declare const Spinner: ({ size, negative, "data-testid": dataTestId, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;