@servicetitan/anvil2 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @servicetitan/anvil2
 
+## 2.4.0
+
+### Minor Changes
+
+- [#2082](https://github.com/servicetitan/hammer/pull/2082) [`9736150`](https://github.com/servicetitan/hammer/commit/9736150539b2ed46a08808b19f9974b7f6bbf667) Thanks [@ericag1985](https://github.com/ericag1985)! - [Tab] Add `index` and `onIndexChange` props for controlled state
+
+- [#2080](https://github.com/servicetitan/hammer/pull/2080) [`0a7d8c7`](https://github.com/servicetitan/hammer/commit/0a7d8c75028384f1ced3cc1051b68b4badc30163) Thanks [@stadevosyan](https://github.com/stadevosyan)! - [Pagination] Add `itemsPerPageLabel` prop to customize the label displayed before the items-per-page selector (defaults to "Rows per page")
+
+### Patch Changes
+
+- [#2076](https://github.com/servicetitan/hammer/pull/2076) [`623398f`](https://github.com/servicetitan/hammer/commit/623398f22d6c390a049c0968c4340dc82729331e) Thanks [@AdamLantz](https://github.com/AdamLantz)! - **BETA** [DataTable] Add `boolean` edit mode for inline editing of boolean cell values
+
+- [#2084](https://github.com/servicetitan/hammer/pull/2084) [`edae603`](https://github.com/servicetitan/hammer/commit/edae60309b49c18e87ea2b3d3c02c915124a21d5) Thanks [@rgdelato](https://github.com/rgdelato)! - [DataTable] Add `disableExpandAll` and `disableSelectAll` props
+
+- [#2082](https://github.com/servicetitan/hammer/pull/2082) [`9736150`](https://github.com/servicetitan/hammer/commit/9736150539b2ed46a08808b19f9974b7f6bbf667) Thanks [@ericag1985](https://github.com/ericag1985)! - [Tab] Fix `aria-label` and `aria-labelledby` on `Tab.List` not reaching the `role="tablist"` element
+
+- [#2076](https://github.com/servicetitan/hammer/pull/2076) [`623398f`](https://github.com/servicetitan/hammer/commit/623398f22d6c390a049c0968c4340dc82729331e) Thanks [@AdamLantz](https://github.com/AdamLantz)! - **BETA** [DataTable] Remove boolean value support from `"text"` edit mode in favor of the new `"boolean"` edit mode
+
+## 2.3.0
+
+### Minor Changes
+
+- [#2011](https://github.com/servicetitan/hammer/pull/2011) [`4d21c97`](https://github.com/servicetitan/hammer/commit/4d21c97eb25b648cd14909ee3980944515739150) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - **BETA** [Toolbar] Add size prop and make "xsmall" the default size.
+
+- [#2011](https://github.com/servicetitan/hammer/pull/2011) [`4d21c97`](https://github.com/servicetitan/hammer/commit/4d21c97eb25b648cd14909ee3980944515739150) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - [Toolbar] Add size prop and make "xsmall" the default size.
+
+### Patch Changes
+
+- [#2060](https://github.com/servicetitan/hammer/pull/2060) [`8e4cea6`](https://github.com/servicetitan/hammer/commit/8e4cea6a5fdc178edae27518450f1204464831eb) Thanks [@rgdelato](https://github.com/rgdelato)! - [DataTable] Add `emptyState` prop
+
+- [#2012](https://github.com/servicetitan/hammer/pull/2012) [`656c287`](https://github.com/servicetitan/hammer/commit/656c2870857bb4d88939308e5b567cb24ca8496b) Thanks [@AdamLantz](https://github.com/AdamLantz)! - **BETA** [SelectField, MultiSelectField] Add `disableSearch` prop which will remove text entry, allowing the components to function as select only.
+
+- [#2060](https://github.com/servicetitan/hammer/pull/2060) [`8e4cea6`](https://github.com/servicetitan/hammer/commit/8e4cea6a5fdc178edae27518450f1204464831eb) Thanks [@rgdelato](https://github.com/rgdelato)! - [Illustrations] Add new `@servicetitan/anvil2-illustrations` package
+
+- [#1872](https://github.com/servicetitan/hammer/pull/1872) [`f64e906`](https://github.com/servicetitan/hammer/commit/f64e906c441cb35cd37848712970e189674559b3) Thanks [@claude](https://github.com/apps/claude)! - [SelectCard] Fix `checked` and `defaultChecked` state when used in `SelectCard.Group`
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/{Alert-DXoEusod.js → Alert-D9mBPs6z.js}

@@ -6,7 +6,7 @@ import { S as SvgWarning } from './warning-c4Wj1rI4.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
 import { S as SvgCheckCircle } from './check_circle-CM0ukqXv.js';
 import { I as Icon } from './Icon-Bcil6aBo.js';
-import { B as Button } from './Button-l7pTJdPc.js';
+import { B as Button } from './Button-DrNDkO2f.js';
 import { c as cx } from './index-SvGbrGuT.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
 import { useTrackingId } from './useTrackingId.js';
@@ -110,4 +110,4 @@ const Alert = forwardRef(
 Alert.displayName = "Alert";
 
 export { Alert as A };
-//# sourceMappingURL=Alert-DXoEusod.js.map
+//# sourceMappingURL=Alert-D9mBPs6z.js.map

package/dist/{Alert-DXoEusod.js.map → Alert-D9mBPs6z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Alert-DXoEusod.js","sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, MouseEvent, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport {\n  DataTrackingId,\n  LayoutUtilProps,\n  OnCloseProps,\n  Status,\n  Svg,\n} from \"../../types\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Info from \"@servicetitan/hammer-icon/mdi/round/info.svg\";\nimport Warning from \"@servicetitan/hammer-icon/mdi/round/warning.svg\";\nimport Danger from \"@servicetitan/hammer-icon/mdi/round/error.svg\";\nimport Success from \"@servicetitan/hammer-icon/mdi/round/check_circle.svg\";\nimport Icon from \"../Icon\";\nimport Button from \"../Button\";\n\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Alert.module.scss\";\n\n/**\n * Props for the Alert component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n * @extends OnCloseProps\n */\nexport type AlertProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps &\n  OnCloseProps & {\n    /**\n     * The visual style of an alert.\n     * @default info\n     */\n    status?: Status;\n    /**\n     * The title text displayed in the alert.\n     */\n    title: string;\n  } &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\nconst statusIconMap: Record<NonNullable<AlertProps[\"status\"]>, Svg> = {\n  info: Info,\n  success: Success,\n  warning: Warning,\n  danger: Danger,\n};\n\n/**\n * Alert component for displaying important messages to users.\n *\n * Features:\n * - Supports different visual styles (info, success, warning, danger)\n * - Optional close button for dismissible alerts\n * - Customizable title and content\n * - Accessible with proper ARIA roles\n * - Includes status-specific icons\n * - Supports layout utilities for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Alert\n *   title=\"System Update\"\n *   onClose={() => console.log('Alert closed')}\n * >\n *   The system will be updated tonight.\n * </Alert>\n *\n * @example\n * <Alert\n *   status=\"success\"\n *   title=\"Operation Complete\"\n * >\n *   Your changes have been saved successfully.\n * </Alert>\n */\nexport const Alert = forwardRef(\n  (props: AlertProps, ref: Ref<HTMLDivElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      children,\n      className,\n      title,\n      status = \"info\",\n      style,\n      onClose,\n      ...rest\n    } = componentProps;\n\n    const data = {\n      title,\n      status,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Alert\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const alertCx = cx(styles[\"alert\"], className, {\n      [styles[\"success\"]]: status === \"success\",\n      [styles[\"warning\"]]: status === \"warning\",\n      [styles[\"danger\"]]: status === \"danger\",\n    });\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <div\n        data-tracking-id={trackingId}\n        data-anv=\"alert\"\n        role=\"status\"\n        className={alertCx}\n        style={styleCombined}\n        {...rest}\n        ref={ref}\n      >\n        <div className={styles[\"top\"]}>\n          <span className={styles[\"title-container\"]}>\n            {\n              <Icon\n                size=\"large\"\n                className={styles[\"status-icon\"]}\n                svg={statusIconMap[status ?? \"info\"]}\n              />\n            }\n            {title}\n          </span>\n          {!!onClose && (\n            <span className={styles[\"close-container\"]}>\n              <Button\n                icon={Close}\n                size=\"small\"\n                appearance=\"ghost\"\n                className={styles[\"close-button\"]}\n                onClick={(e: MouseEvent<HTMLButtonElement>) => onClose(e)}\n                aria-label={`Dismiss ${status} alert`}\n              />\n            </span>\n          )}\n        </div>\n        {children && <div className={styles[\"content\"]}>{children}</div>}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["Info","Success","Warning","Danger","Close"],"mappings":"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"}
+{"version":3,"file":"Alert-D9mBPs6z.js","sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, MouseEvent, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport {\n  DataTrackingId,\n  LayoutUtilProps,\n  OnCloseProps,\n  Status,\n  Svg,\n} from \"../../types\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Info from \"@servicetitan/hammer-icon/mdi/round/info.svg\";\nimport Warning from \"@servicetitan/hammer-icon/mdi/round/warning.svg\";\nimport Danger from \"@servicetitan/hammer-icon/mdi/round/error.svg\";\nimport Success from \"@servicetitan/hammer-icon/mdi/round/check_circle.svg\";\nimport Icon from \"../Icon\";\nimport Button from \"../Button\";\n\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Alert.module.scss\";\n\n/**\n * Props for the Alert component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n * @extends OnCloseProps\n */\nexport type AlertProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps &\n  OnCloseProps & {\n    /**\n     * The visual style of an alert.\n     * @default info\n     */\n    status?: Status;\n    /**\n     * The title text displayed in the alert.\n     */\n    title: string;\n  } &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\nconst statusIconMap: Record<NonNullable<AlertProps[\"status\"]>, Svg> = {\n  info: Info,\n  success: Success,\n  warning: Warning,\n  danger: Danger,\n};\n\n/**\n * Alert component for displaying important messages to users.\n *\n * Features:\n * - Supports different visual styles (info, success, warning, danger)\n * - Optional close button for dismissible alerts\n * - Customizable title and content\n * - Accessible with proper ARIA roles\n * - Includes status-specific icons\n * - Supports layout utilities for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Alert\n *   title=\"System Update\"\n *   onClose={() => console.log('Alert closed')}\n * >\n *   The system will be updated tonight.\n * </Alert>\n *\n * @example\n * <Alert\n *   status=\"success\"\n *   title=\"Operation Complete\"\n * >\n *   Your changes have been saved successfully.\n * </Alert>\n */\nexport const Alert = forwardRef(\n  (props: AlertProps, ref: Ref<HTMLDivElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      children,\n      className,\n      title,\n      status = \"info\",\n      style,\n      onClose,\n      ...rest\n    } = componentProps;\n\n    const data = {\n      title,\n      status,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Alert\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const alertCx = cx(styles[\"alert\"], className, {\n      [styles[\"success\"]]: status === \"success\",\n      [styles[\"warning\"]]: status === \"warning\",\n      [styles[\"danger\"]]: status === \"danger\",\n    });\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <div\n        data-tracking-id={trackingId}\n        data-anv=\"alert\"\n        role=\"status\"\n        className={alertCx}\n        style={styleCombined}\n        {...rest}\n        ref={ref}\n      >\n        <div className={styles[\"top\"]}>\n          <span className={styles[\"title-container\"]}>\n            {\n              <Icon\n                size=\"large\"\n                className={styles[\"status-icon\"]}\n                svg={statusIconMap[status ?? \"info\"]}\n              />\n            }\n            {title}\n          </span>\n          {!!onClose && (\n            <span className={styles[\"close-container\"]}>\n              <Button\n                icon={Close}\n                size=\"small\"\n                appearance=\"ghost\"\n                className={styles[\"close-button\"]}\n                onClick={(e: MouseEvent<HTMLButtonElement>) => onClose(e)}\n                aria-label={`Dismiss ${status} alert`}\n              />\n            </span>\n          )}\n        </div>\n        {children && <div className={styles[\"content\"]}>{children}</div>}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["Info","Success","Warning","Danger","Close"],"mappings":"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"}

package/dist/Alert.js

@@ -1,2 +1,2 @@
-export { A as Alert, A as default } from './Alert-DXoEusod.js';
+export { A as Alert, A as default } from './Alert-D9mBPs6z.js';
 //# sourceMappingURL=Alert.js.map

package/dist/{Announcement-SAypScAu.js → Announcement-B34cD6BC.js}

@@ -5,7 +5,7 @@ import { S as SvgInfo } from './info-CYpG6tcI.js';
 import { S as SvgWarning } from './warning-c4Wj1rI4.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
 import { S as SvgCheckCircle } from './check_circle-CM0ukqXv.js';
-import { B as Button } from './Button-l7pTJdPc.js';
+import { B as Button } from './Button-DrNDkO2f.js';
 import { I as Icon } from './Icon-Bcil6aBo.js';
 import { c as cx } from './index-SvGbrGuT.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
@@ -106,4 +106,4 @@ const Announcement = forwardRef(
 Announcement.displayName = "Announcement";
 
 export { Announcement as A };
-//# sourceMappingURL=Announcement-SAypScAu.js.map
+//# sourceMappingURL=Announcement-B34cD6BC.js.map

package/dist/{Announcement-SAypScAu.js.map → Announcement-B34cD6BC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Announcement-SAypScAu.js","sources":["../src/components/Announcement/Announcement.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, MouseEvent, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport {\n  DataTrackingId,\n  LayoutUtilProps,\n  OnCloseProps,\n  Status,\n  Svg,\n} from \"../../types\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Info from \"@servicetitan/hammer-icon/mdi/round/info.svg\";\nimport Warning from \"@servicetitan/hammer-icon/mdi/round/warning.svg\";\nimport Danger from \"@servicetitan/hammer-icon/mdi/round/error.svg\";\nimport Success from \"@servicetitan/hammer-icon/mdi/round/check_circle.svg\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport Button from \"../Button\";\nimport Icon from \"../Icon\";\n\nimport cx from \"classnames\";\nimport styles from \"./Announcement.module.scss\";\n\n/**\n * Props for the Announcement component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n * @extends OnCloseProps\n */\nexport type AnnouncementProps = ComponentPropsWithoutRef<\"div\"> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> &\n  OnCloseProps & {\n    /**\n     * The visual style of the announcement.\n     * @default info\n     */\n    status?: Status;\n    /**\n     * The title text displayed in the announcement.\n     */\n    title: string;\n  } &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\nconst statusIconMap: Record<NonNullable<AnnouncementProps[\"status\"]>, Svg> = {\n  info: Info,\n  success: Success,\n  warning: Warning,\n  danger: Danger,\n};\n\n/**\n * Announcement component for displaying important messages to users.\n *\n * Features:\n * - Supports different visual styles (info, success, warning, danger)\n * - Optional close button for dismissible announcements\n * - Customizable title and content\n * - Accessible with proper ARIA roles\n * - Includes status-specific icons\n * - Supports layout utilities for positioning and spacing\n * - Includes data tracking capabilities\n *\n * @example\n * <Announcement\n *   title=\"New Feature\"\n *   onClose={() => console.log('Announcement closed')}\n * >\n *   Check out our latest feature!\n * </Announcement>\n *\n * @example\n * <Announcement\n *   status=\"warning\"\n *   title=\"Maintenance Notice\"\n * >\n *   Scheduled maintenance will begin in 30 minutes.\n * </Announcement>\n */\nexport const Announcement = forwardRef(\n  (props: AnnouncementProps, ref: Ref<HTMLDivElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n    const {\n      className,\n      title,\n      status = \"info\",\n      children,\n      style,\n      onClose,\n      ...rest\n    } = componentProps;\n\n    const data = {\n      title,\n      status,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Announcement\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const AnnouncementCx = cx(styles[\"announcement\"], className, {\n      [styles[\"success\"]]: status === \"success\",\n      [styles[\"warning\"]]: status === \"warning\",\n      [styles[\"danger\"]]: status === \"danger\",\n    });\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <div\n        data-tracking-id={trackingId}\n        role=\"status\"\n        className={AnnouncementCx}\n        data-anv=\"announcement\"\n        style={styleCombined}\n        {...rest}\n        ref={ref}\n      >\n        <span className={styles[\"title-container\"]}>\n          <Icon\n            size=\"large\"\n            className={styles[\"status-icon\"]}\n            svg={statusIconMap[status]}\n          />\n\n          <span className={styles[\"title\"]}>{title}</span>\n        </span>\n\n        {children}\n\n        {onClose ? (\n          <span className={styles[\"close-container\"]}>\n            <Button\n              icon={Close}\n              size=\"small\"\n              appearance=\"ghost\"\n              className={styles[\"close-button\"]}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => onClose(e)}\n              aria-label={`Dismiss ${status} announcement`}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nAnnouncement.displayName = \"Announcement\";\n"],"names":["Info","Success","Warning","Danger","Close"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,aAAA,GAAuE;AAAA,EAC3E,IAAA,EAAMA,OAAA;AAAA,EACN,OAAA,EAASC,cAAA;AAAA,EACT,OAAA,EAASC,UAAA;AAAA,EACT,MAAA,EAAQC;AACV,CAAA;AA8BO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAA6B;AACtD,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AAEjE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA,GAAS,MAAA;AAAA,MACT,QAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,cAAA;AAEJ,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,cAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,MAAM,cAAA,GAAiB,EAAA,CAAG,MAAA,CAAO,cAAc,GAAG,SAAA,EAAW;AAAA,MAC3D,CAAC,MAAA,CAAO,SAAS,CAAC,GAAG,MAAA,KAAW,SAAA;AAAA,MAChC,CAAC,MAAA,CAAO,SAAS,CAAC,GAAG,MAAA,KAAW,SAAA;AAAA,MAChC,CAAC,MAAA,CAAO,QAAQ,CAAC,GAAG,MAAA,KAAW;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,UAAA;AAAA,QAClB,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAS,cAAA;AAAA,QACT,KAAA,EAAO,aAAA;AAAA,QACN,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,iBAAiB,CAAA,EACvC,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,OAAA;AAAA,gBACL,SAAA,EAAW,OAAO,aAAa,CAAA;AAAA,gBAC/B,GAAA,EAAK,cAAc,MAAM;AAAA;AAAA,aAC3B;AAAA,gCAEC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,OAAO,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA,WAAA,EAC3C,CAAA;AAAA,UAEC,QAAA;AAAA,UAEA,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,iBAAiB,CAAA,EACvC,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAMC,QAAA;AAAA,cACN,IAAA,EAAK,OAAA;AAAA,cACL,UAAA,EAAW,OAAA;AAAA,cACX,SAAA,EAAW,OAAO,cAAc,CAAA;AAAA,cAChC,OAAA,EAAS,CAAC,CAAA,KAAqC,OAAA,CAAQ,CAAC,CAAA;AAAA,cACxD,YAAA,EAAY,WAAW,MAAM,CAAA,aAAA;AAAA;AAAA,aAEjC,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}
+{"version":3,"file":"Announcement-B34cD6BC.js","sources":["../src/components/Announcement/Announcement.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, MouseEvent, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport {\n  DataTrackingId,\n  LayoutUtilProps,\n  OnCloseProps,\n  Status,\n  Svg,\n} from \"../../types\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Info from \"@servicetitan/hammer-icon/mdi/round/info.svg\";\nimport Warning from \"@servicetitan/hammer-icon/mdi/round/warning.svg\";\nimport Danger from \"@servicetitan/hammer-icon/mdi/round/error.svg\";\nimport Success from \"@servicetitan/hammer-icon/mdi/round/check_circle.svg\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport Button from \"../Button\";\nimport Icon from \"../Icon\";\n\nimport cx from \"classnames\";\nimport styles from \"./Announcement.module.scss\";\n\n/**\n * Props for the Announcement component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n * @extends OnCloseProps\n */\nexport type AnnouncementProps = ComponentPropsWithoutRef<\"div\"> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> &\n  OnCloseProps & {\n    /**\n     * The visual style of the announcement.\n     * @default info\n     */\n    status?: Status;\n    /**\n     * The title text displayed in the announcement.\n     */\n    title: string;\n  } &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\nconst statusIconMap: Record<NonNullable<AnnouncementProps[\"status\"]>, Svg> = {\n  info: Info,\n  success: Success,\n  warning: Warning,\n  danger: Danger,\n};\n\n/**\n * Announcement component for displaying important messages to users.\n *\n * Features:\n * - Supports different visual styles (info, success, warning, danger)\n * - Optional close button for dismissible announcements\n * - Customizable title and content\n * - Accessible with proper ARIA roles\n * - Includes status-specific icons\n * - Supports layout utilities for positioning and spacing\n * - Includes data tracking capabilities\n *\n * @example\n * <Announcement\n *   title=\"New Feature\"\n *   onClose={() => console.log('Announcement closed')}\n * >\n *   Check out our latest feature!\n * </Announcement>\n *\n * @example\n * <Announcement\n *   status=\"warning\"\n *   title=\"Maintenance Notice\"\n * >\n *   Scheduled maintenance will begin in 30 minutes.\n * </Announcement>\n */\nexport const Announcement = forwardRef(\n  (props: AnnouncementProps, ref: Ref<HTMLDivElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n    const {\n      className,\n      title,\n      status = \"info\",\n      children,\n      style,\n      onClose,\n      ...rest\n    } = componentProps;\n\n    const data = {\n      title,\n      status,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Announcement\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const AnnouncementCx = cx(styles[\"announcement\"], className, {\n      [styles[\"success\"]]: status === \"success\",\n      [styles[\"warning\"]]: status === \"warning\",\n      [styles[\"danger\"]]: status === \"danger\",\n    });\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <div\n        data-tracking-id={trackingId}\n        role=\"status\"\n        className={AnnouncementCx}\n        data-anv=\"announcement\"\n        style={styleCombined}\n        {...rest}\n        ref={ref}\n      >\n        <span className={styles[\"title-container\"]}>\n          <Icon\n            size=\"large\"\n            className={styles[\"status-icon\"]}\n            svg={statusIconMap[status]}\n          />\n\n          <span className={styles[\"title\"]}>{title}</span>\n        </span>\n\n        {children}\n\n        {onClose ? (\n          <span className={styles[\"close-container\"]}>\n            <Button\n              icon={Close}\n              size=\"small\"\n              appearance=\"ghost\"\n              className={styles[\"close-button\"]}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => onClose(e)}\n              aria-label={`Dismiss ${status} announcement`}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nAnnouncement.displayName = \"Announcement\";\n"],"names":["Info","Success","Warning","Danger","Close"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,aAAA,GAAuE;AAAA,EAC3E,IAAA,EAAMA,OAAA;AAAA,EACN,OAAA,EAASC,cAAA;AAAA,EACT,OAAA,EAASC,UAAA;AAAA,EACT,MAAA,EAAQC;AACV,CAAA;AA8BO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAA6B;AACtD,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AAEjE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA,GAAS,MAAA;AAAA,MACT,QAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,cAAA;AAEJ,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,cAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,MAAM,cAAA,GAAiB,EAAA,CAAG,MAAA,CAAO,cAAc,GAAG,SAAA,EAAW;AAAA,MAC3D,CAAC,MAAA,CAAO,SAAS,CAAC,GAAG,MAAA,KAAW,SAAA;AAAA,MAChC,CAAC,MAAA,CAAO,SAAS,CAAC,GAAG,MAAA,KAAW,SAAA;AAAA,MAChC,CAAC,MAAA,CAAO,QAAQ,CAAC,GAAG,MAAA,KAAW;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,UAAA;AAAA,QAClB,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAS,cAAA;AAAA,QACT,KAAA,EAAO,aAAA;AAAA,QACN,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,iBAAiB,CAAA,EACvC,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,OAAA;AAAA,gBACL,SAAA,EAAW,OAAO,aAAa,CAAA;AAAA,gBAC/B,GAAA,EAAK,cAAc,MAAM;AAAA;AAAA,aAC3B;AAAA,gCAEC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,OAAO,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA,WAAA,EAC3C,CAAA;AAAA,UAEC,QAAA;AAAA,UAEA,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,iBAAiB,CAAA,EACvC,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAMC,QAAA;AAAA,cACN,IAAA,EAAK,OAAA;AAAA,cACL,UAAA,EAAW,OAAA;AAAA,cACX,SAAA,EAAW,OAAO,cAAc,CAAA;AAAA,cAChC,OAAA,EAAS,CAAC,CAAA,KAAqC,OAAA,CAAQ,CAAC,CAAA;AAAA,cACxD,YAAA,EAAY,WAAW,MAAM,CAAA,aAAA;AAAA;AAAA,aAEjC,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}

package/dist/Announcement.js

@@ -1,2 +1,2 @@
-export { A as Announcement, A as default } from './Announcement-SAypScAu.js';
+export { A as Announcement, A as default } from './Announcement-B34cD6BC.js';
 //# sourceMappingURL=Announcement.js.map

package/dist/{Button-l7pTJdPc.js → Button-DrNDkO2f.js}

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { I as Icon } from './Icon-Bcil6aBo.js';
 import { S as Spinner } from './Spinner-CpEm3Lud.js';
 import { c as cx } from './index-SvGbrGuT.js';
-import { s as styles } from './Button.module-Ck7VrMqw.js';
+import { s as styles } from './Button.module-DwCq9XU0.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
@@ -110,4 +110,4 @@ const Button = forwardRef(
 Button.displayName = "Button";
 
 export { Button as B };
-//# sourceMappingURL=Button-l7pTJdPc.js.map
+//# sourceMappingURL=Button-DrNDkO2f.js.map

package/dist/{Button-l7pTJdPc.js.map → Button-DrNDkO2f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Button-l7pTJdPc.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { ButtonAppearance, Size } from \"../../types\";\nimport { ComponentPropsWithoutRef, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps } from \"../../types\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { childrenToString } from \"../../internal/functions\";\nimport Spinner from \"../Spinner\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Button.module.scss\";\n\n/**\n * Props for the Button component\n * @extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\">\n * @extends LayoutUtilProps\n */\nexport type ButtonProps = Omit<ComponentPropsWithoutRef<\"button\">, \"children\"> &\n  LayoutUtilProps & {\n    /**\n     * The visual variant of the button.\n     * @default secondary\n     */\n    appearance?: ButtonAppearance;\n\n    /**\n     * The size of the button.\n     * @default medium\n     */\n    size?: Extract<Size, \"xsmall\" | \"small\" | \"medium\" | \"large\">;\n\n    /**\n     * The loading state of the button.\n     * If true, it will show infinite state of the loading.\n     * @default false\n     */\n    loading?: boolean;\n  } & (\n    | {\n        children?: ComponentPropsWithoutRef<\"button\">[\"children\"];\n        /**\n         * The icons of the button.\n         */\n        icon?:\n          | IconProps[\"svg\"]\n          | {\n              after: IconProps[\"svg\"];\n            }\n          | {\n              before: IconProps[\"svg\"];\n            };\n      }\n    | {\n        children?: never;\n        /**\n         * The icon of the icon only button.\n         */\n        icon?: IconProps[\"svg\"];\n      }\n  ) &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\n/**\n * Button component for triggering actions and user interactions.\n *\n * Features:\n * - Multiple visual appearances (primary, secondary, ghost, danger variants)\n * - Four size options (xsmall, small, medium, large)\n * - Loading state with spinner animation\n * - Icon support (before, after, or icon-only)\n * - Full accessibility support with ARIA attributes\n * - Supports layout utilities for positioning and spacing\n * - Automatic disabled state when loading\n * - Flexible content with text and/or icons\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Button appearance=\"primary\" size=\"medium\" onClick={() => console.log('clicked')}>\n *   Click Me\n * </Button>\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n    const {\n      children,\n      className,\n      appearance = \"secondary\",\n      size = \"medium\",\n      icon,\n      loading = false,\n      disabled,\n      style,\n      type = \"button\",\n      ...rest\n    } = componentProps;\n\n    const data = {\n      children: childrenToString(props.children),\n      appearance,\n      icon,\n      size,\n      type,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Button\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const iconBefore = (icon: ButtonProps[\"icon\"]) => {\n      if (typeof icon === \"object\" && \"before\" in icon) {\n        return (\n          <Icon\n            className={styles[\"icon\"]}\n            inherit\n            aria-hidden\n            svg={icon.before}\n          />\n        );\n      }\n      if (icon && typeof icon !== \"object\") {\n        return (\n          <Icon\n            className={styles[\"icon\"]}\n            inherit\n            aria-hidden\n            svg={icon}\n            size={!children && !size.includes(\"small\") ? \"large\" : \"medium\"}\n          />\n        );\n      }\n      return;\n    };\n\n    const buttonClassNames = cx(className, styles[\"button\"], {\n      [styles[\"appearance-primary\"]]: appearance === \"primary\",\n      [styles[\"appearance-secondary\"]]: appearance === \"secondary\",\n      [styles[\"appearance-ghost\"]]: appearance === \"ghost\",\n      [styles[\"danger-secondary\"]]: appearance === \"danger-secondary\",\n      [styles[\"danger-primary\"]]: appearance === \"danger\",\n      [styles[\"size-xsmall\"]]: size === \"xsmall\",\n      [styles[\"size-small\"]]: size === \"small\",\n      [styles[\"size-medium\"]]: size === \"medium\",\n      [styles[\"size-large\"]]: size === \"large\",\n      [styles[\"type-icon\"]]: !children,\n      [styles[\"loading\"]]: loading,\n    });\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <button\n        data-tracking-id={trackingId}\n        className={buttonClassNames}\n        type={type}\n        disabled={disabled || loading}\n        aria-busy={loading ? true : undefined}\n        data-anv=\"button\"\n        style={styleCombined}\n        ref={ref}\n        {...rest}\n      >\n        {loading ? (\n          <Spinner inherit size=\"small\" className={styles[\"loading-spinner\"]} />\n        ) : icon ? (\n          iconBefore(icon)\n        ) : null}\n        {children}\n        {typeof icon === \"object\" && \"after\" in icon ? (\n          <Icon\n            className={styles[\"icon\"]}\n            inherit\n            aria-hidden\n            svg={icon.after}\n          />\n        ) : null}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":["icon"],"mappings":"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"}
+{"version":3,"file":"Button-DrNDkO2f.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { ButtonAppearance, Size } from \"../../types\";\nimport { ComponentPropsWithoutRef, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps } from \"../../types\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { childrenToString } from \"../../internal/functions\";\nimport Spinner from \"../Spinner\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Button.module.scss\";\n\n/**\n * Props for the Button component\n * @extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\">\n * @extends LayoutUtilProps\n */\nexport type ButtonProps = Omit<ComponentPropsWithoutRef<\"button\">, \"children\"> &\n  LayoutUtilProps & {\n    /**\n     * The visual variant of the button.\n     * @default secondary\n     */\n    appearance?: ButtonAppearance;\n\n    /**\n     * The size of the button.\n     * @default medium\n     */\n    size?: Extract<Size, \"xsmall\" | \"small\" | \"medium\" | \"large\">;\n\n    /**\n     * The loading state of the button.\n     * If true, it will show infinite state of the loading.\n     * @default false\n     */\n    loading?: boolean;\n  } & (\n    | {\n        children?: ComponentPropsWithoutRef<\"button\">[\"children\"];\n        /**\n         * The icons of the button.\n         */\n        icon?:\n          | IconProps[\"svg\"]\n          | {\n              after: IconProps[\"svg\"];\n            }\n          | {\n              before: IconProps[\"svg\"];\n            };\n      }\n    | {\n        children?: never;\n        /**\n         * The icon of the icon only button.\n         */\n        icon?: IconProps[\"svg\"];\n      }\n  ) &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\n/**\n * Button component for triggering actions and user interactions.\n *\n * Features:\n * - Multiple visual appearances (primary, secondary, ghost, danger variants)\n * - Four size options (xsmall, small, medium, large)\n * - Loading state with spinner animation\n * - Icon support (before, after, or icon-only)\n * - Full accessibility support with ARIA attributes\n * - Supports layout utilities for positioning and spacing\n * - Automatic disabled state when loading\n * - Flexible content with text and/or icons\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Button appearance=\"primary\" size=\"medium\" onClick={() => console.log('clicked')}>\n *   Click Me\n * </Button>\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n    const {\n      children,\n      className,\n      appearance = \"secondary\",\n      size = \"medium\",\n      icon,\n      loading = false,\n      disabled,\n      style,\n      type = \"button\",\n      ...rest\n    } = componentProps;\n\n    const data = {\n      children: childrenToString(props.children),\n      appearance,\n      icon,\n      size,\n      type,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Button\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const iconBefore = (icon: ButtonProps[\"icon\"]) => {\n      if (typeof icon === \"object\" && \"before\" in icon) {\n        return (\n          <Icon\n            className={styles[\"icon\"]}\n            inherit\n            aria-hidden\n            svg={icon.before}\n          />\n        );\n      }\n      if (icon && typeof icon !== \"object\") {\n        return (\n          <Icon\n            className={styles[\"icon\"]}\n            inherit\n            aria-hidden\n            svg={icon}\n            size={!children && !size.includes(\"small\") ? \"large\" : \"medium\"}\n          />\n        );\n      }\n      return;\n    };\n\n    const buttonClassNames = cx(className, styles[\"button\"], {\n      [styles[\"appearance-primary\"]]: appearance === \"primary\",\n      [styles[\"appearance-secondary\"]]: appearance === \"secondary\",\n      [styles[\"appearance-ghost\"]]: appearance === \"ghost\",\n      [styles[\"danger-secondary\"]]: appearance === \"danger-secondary\",\n      [styles[\"danger-primary\"]]: appearance === \"danger\",\n      [styles[\"size-xsmall\"]]: size === \"xsmall\",\n      [styles[\"size-small\"]]: size === \"small\",\n      [styles[\"size-medium\"]]: size === \"medium\",\n      [styles[\"size-large\"]]: size === \"large\",\n      [styles[\"type-icon\"]]: !children,\n      [styles[\"loading\"]]: loading,\n    });\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <button\n        data-tracking-id={trackingId}\n        className={buttonClassNames}\n        type={type}\n        disabled={disabled || loading}\n        aria-busy={loading ? true : undefined}\n        data-anv=\"button\"\n        style={styleCombined}\n        ref={ref}\n        {...rest}\n      >\n        {loading ? (\n          <Spinner inherit size=\"small\" className={styles[\"loading-spinner\"]} />\n        ) : icon ? (\n          iconBefore(icon)\n        ) : null}\n        {children}\n        {typeof icon === \"object\" && \"after\" in icon ? (\n          <Icon\n            className={styles[\"icon\"]}\n            inherit\n            aria-hidden\n            svg={icon.after}\n          />\n        ) : null}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":["icon"],"mappings":"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"}

package/dist/Button.css

@@ -1,7 +1,7 @@
 @layer starter, reset, base, state, application;
 /* REVERT LAYER BUGFIX START */
-a._button_q7lq8_2:hover,
-a._button_q7lq8_2:active {
+a._button_158ym_2:hover,
+a._button_158ym_2:active {
   color: revert-layer;
 }
 
@@ -14,7 +14,7 @@ a[data-anv=button-link]:focus {
 
 /* REVERT LAYER BUGFIX END */
 @layer reset {
-  ._button_q7lq8_2, ._button_q7lq8_2._type-icon_q7lq8_16 {
+  ._button_158ym_2, ._button_158ym_2._type-icon_158ym_16 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -29,7 +29,7 @@ a[data-anv=button-link]:focus {
   }
 }
 @layer base {
-  ._button_q7lq8_2, ._button_q7lq8_2._type-icon_q7lq8_16 {
+  ._button_158ym_2, ._button_158ym_2._type-icon_158ym_16 {
     width: -moz-fit-content;
     width: fit-content;
     min-width: 2.5rem;
@@ -62,30 +62,30 @@ a[data-anv=button-link]:focus {
     background-color: var(--button-background-color);
     outline-color: var(--button-focus-ring-color);
   }
-  ._button_q7lq8_2 ._icon_q7lq8_62 {
+  ._button_158ym_2 ._icon_158ym_62 {
     display: inline-flex;
   }
 }
 @layer state {
-  ._button_q7lq8_2:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true])[data-interactive=focus-visible], ._button_q7lq8_2:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true]):focus-visible {
+  ._button_158ym_2:not(:disabled, ._disabled_158ym_67, [aria-disabled=true])[data-interactive=focus-visible], ._button_158ym_2:not(:disabled, ._disabled_158ym_67, [aria-disabled=true]):focus-visible {
     outline-width: 0.125rem;
   }
-  ._button_q7lq8_2._loading_q7lq8_70 {
+  ._button_158ym_2._loading_158ym_70 {
     cursor: progress;
   }
-  ._button_q7lq8_2 ._loading-spinner_q7lq8_73 {
+  ._button_158ym_2 ._loading-spinner_158ym_73 {
     height: 1rem;
   }
-  ._button_q7lq8_2._size-xsmall_q7lq8_76 {
+  ._button_158ym_2._size-xsmall_158ym_76 {
     --button-font-size: 0.75rem;
     --button-border-radius: 0.375rem;
     --button-padding-block-start: 0.3125rem;
     --button-padding-block-end: 0.3125rem;
     --button-padding-inline-end: 0.5rem;
     --button-padding-inline-start: 0.5rem;
-    --button-line-height: 0.75rem;
+    --button-line-height: 1rem;
   }
-  ._button_q7lq8_2._size-small_q7lq8_85 {
+  ._button_158ym_2._size-small_158ym_85 {
     --button-font-size: 0.875rem;
     --button-border-radius: 0.375rem;
     --button-padding-block-start: 0.4375rem;
@@ -94,7 +94,7 @@ a[data-anv=button-link]:focus {
     --button-padding-inline-start: 0.75rem;
     --button-line-height: 1rem;
   }
-  ._button_q7lq8_2._size-medium_q7lq8_94 {
+  ._button_158ym_2._size-medium_158ym_94 {
     --button-font-size: 1rem;
     --button-border-radius: 0.375rem;
     --button-padding-block-start: 0.6875rem;
@@ -102,7 +102,7 @@ a[data-anv=button-link]:focus {
     --button-padding-inline-end: 1rem;
     --button-padding-inline-start: 1rem;
   }
-  ._button_q7lq8_2._size-large_q7lq8_102 {
+  ._button_158ym_2._size-large_158ym_102 {
     --button-font-size: 1rem;
     --button-border-radius: 0.375rem;
     --button-padding-block-start: 0.9375rem;
@@ -110,82 +110,82 @@ a[data-anv=button-link]:focus {
     --button-padding-inline-end: 1.5rem;
     --button-padding-inline-start: 1.5rem;
   }
-  ._button_q7lq8_2._appearance-primary_q7lq8_110 {
+  ._button_158ym_2._appearance-primary_158ym_110 {
     --button-foreground-color: var(--button-primary-foreground-color, #ffffff);
     --button-border-color: var(--button-primary-border-color, transparent);
     --button-border-radius: 0.375rem;
     --button-background-color: var(--button-primary-background-color, #0265DC);
     --button-focus-ring-color: var(--button-primary-focus-ring-color, #0265DC);
   }
-  ._button_q7lq8_2._appearance-primary_q7lq8_110[data-interactive=hover], ._button_q7lq8_2._appearance-primary_q7lq8_110:hover {
+  ._button_158ym_2._appearance-primary_158ym_110[data-interactive=hover], ._button_158ym_2._appearance-primary_158ym_110:hover {
     --button-foreground-color: var(--button-primary-foreground-color-hover, #ffffff);
     --button-background-color: var(--button-primary-background-color-hover, #0655b4);
   }
-  ._button_q7lq8_2._appearance-primary_q7lq8_110[data-interactive=active], ._button_q7lq8_2._appearance-primary_q7lq8_110:active {
+  ._button_158ym_2._appearance-primary_158ym_110[data-interactive=active], ._button_158ym_2._appearance-primary_158ym_110:active {
     --button-foreground-color: var(--button-primary-foreground-color-active, #ffffff);
     --button-background-color: var(--button-primary-background-color-active, #09458c);
   }
-  ._button_q7lq8_2._appearance-secondary_q7lq8_125 {
+  ._button_158ym_2._appearance-secondary_158ym_125 {
     --button-foreground-color: var(--button-secondary-foreground-color, #141414);
     --button-border-color: var(--button-secondary-border-color, transparent);
     --button-border-radius: 0.375rem;
     --button-background-color: var(--button-secondary-background-color, rgba(4, 4, 4, 0.0588235294));
     --button-focus-ring-color: var(--button-secondary-focus-ring-color, #0265DC);
   }
-  ._button_q7lq8_2._appearance-secondary_q7lq8_125[data-interactive=hover], ._button_q7lq8_2._appearance-secondary_q7lq8_125:hover {
+  ._button_158ym_2._appearance-secondary_158ym_125[data-interactive=hover], ._button_158ym_2._appearance-secondary_158ym_125:hover {
     --button-foreground-color: var(--button-secondary-foreground-color-hover, #141414);
     --button-background-color: var(--button-secondary-background-color-hover, rgba(5, 5, 5, 0.1333333333));
   }
-  ._button_q7lq8_2._appearance-secondary_q7lq8_125[data-interactive=active], ._button_q7lq8_2._appearance-secondary_q7lq8_125:active {
+  ._button_158ym_2._appearance-secondary_158ym_125[data-interactive=active], ._button_158ym_2._appearance-secondary_158ym_125:active {
     --button-foreground-color: var(--button-secondary-foreground-color-active, #141414);
     --button-background-color: var(--button-secondary-background-color-active, rgba(7, 7, 7, 0.2078431373));
   }
-  ._button_q7lq8_2._appearance-ghost_q7lq8_140 {
+  ._button_158ym_2._appearance-ghost_158ym_140 {
     --button-foreground-color: var(--button-ghost-foreground-color, #141414);
     --button-border-color: var(--button-ghost-border-color, transparent);
     --button-border-radius: 0.375rem;
     --button-background-color: var(--button-ghost-background-color, transparent);
     --button-focus-ring-color: var(--button-ghost-focus-ring-color, #0265DC);
   }
-  ._button_q7lq8_2._appearance-ghost_q7lq8_140[data-interactive=hover], ._button_q7lq8_2._appearance-ghost_q7lq8_140:hover {
+  ._button_158ym_2._appearance-ghost_158ym_140[data-interactive=hover], ._button_158ym_2._appearance-ghost_158ym_140:hover {
     --button-foreground-color: var(--button-ghost-foreground-color-hover, #141414);
     --button-background-color: var(--button-ghost-background-color-hover, rgba(20, 20, 20, 0.0784313725));
   }
-  ._button_q7lq8_2._appearance-ghost_q7lq8_140[data-interactive=active], ._button_q7lq8_2._appearance-ghost_q7lq8_140:active {
+  ._button_158ym_2._appearance-ghost_158ym_140[data-interactive=active], ._button_158ym_2._appearance-ghost_158ym_140:active {
     --button-foreground-color: var(--button-ghost-foreground-color-active, #141414);
     --button-background-color: var(--button-ghost-background-color-active, rgba(20, 20, 20, 0.1607843137));
   }
-  ._button_q7lq8_2._danger-primary_q7lq8_155 {
+  ._button_158ym_2._danger-primary_158ym_155 {
     --button-foreground-color: var(--button-danger-primary-foreground-color, #ffffff);
     --button-border-color: var(--button-danger-primary-border-color, transparent);
     --button-border-radius: 0.375rem;
     --button-background-color: var(--button-danger-primary-background-color, #e13212);
     --button-focus-ring-color: var(--button-danger-primary-focus-ring-color, #e13212);
   }
-  ._button_q7lq8_2._danger-primary_q7lq8_155[data-interactive=hover], ._button_q7lq8_2._danger-primary_q7lq8_155:hover {
+  ._button_158ym_2._danger-primary_158ym_155[data-interactive=hover], ._button_158ym_2._danger-primary_158ym_155:hover {
     --button-foreground-color: var(--button-danger-primary-foreground-color-hover, #ffffff);
     --button-background-color: var(--button-danger-primary-background-color-hover, #b82c12);
   }
-  ._button_q7lq8_2._danger-primary_q7lq8_155[data-interactive=active], ._button_q7lq8_2._danger-primary_q7lq8_155:active {
+  ._button_158ym_2._danger-primary_158ym_155[data-interactive=active], ._button_158ym_2._danger-primary_158ym_155:active {
     --button-foreground-color: var(--button-danger-primary-foreground-color-active, #ffffff);
     --button-background-color: var(--button-danger-primary-background-color-active, #8f2613);
   }
-  ._button_q7lq8_2._danger-secondary_q7lq8_170 {
+  ._button_158ym_2._danger-secondary_158ym_170 {
     --button-foreground-color: var(--button-danger-secondary-foreground-color, #bf2a00);
     --button-border-color: var(--button-danger-secondary-border-color, transparent);
     --button-border-radius: 0.375rem;
     --button-background-color: var(--button-danger-secondary-background-color, #ffece9);
     --button-focus-ring-color: var(--button-danger-secondary-focus-ring-color, #e13212);
   }
-  ._button_q7lq8_2._danger-secondary_q7lq8_170[data-interactive=hover], ._button_q7lq8_2._danger-secondary_q7lq8_170:hover {
+  ._button_158ym_2._danger-secondary_158ym_170[data-interactive=hover], ._button_158ym_2._danger-secondary_158ym_170:hover {
     --button-foreground-color: var(--button-danger-secondary-foreground-color-hover, #bf2a00);
     --button-background-color: var(--button-danger-secondary-background-color-hover, #fcd9d4);
   }
-  ._button_q7lq8_2._danger-secondary_q7lq8_170[data-interactive=active], ._button_q7lq8_2._danger-secondary_q7lq8_170:active {
+  ._button_158ym_2._danger-secondary_158ym_170[data-interactive=active], ._button_158ym_2._danger-secondary_158ym_170:active {
     --button-foreground-color: var(--button-danger-secondary-foreground-color-active, #bf2a00);
     --button-background-color: var(--button-danger-secondary-background-color-active, #f6b4a9);
   }
-  ._button_q7lq8_2._type-icon_q7lq8_16 {
+  ._button_158ym_2._type-icon_158ym_16 {
     display: inline-flex;
     min-width: auto;
     --button-padding-block-start: 0.4375rem;
@@ -193,32 +193,32 @@ a[data-anv=button-link]:focus {
     --button-padding-inline-end: 0.4375rem;
     --button-padding-inline-start: 0.4375rem;
   }
-  ._button_q7lq8_2._type-icon_q7lq8_16._size-xsmall_q7lq8_76 {
+  ._button_158ym_2._type-icon_158ym_16._size-xsmall_158ym_76 {
     --button-padding-block-start: 0.3125rem;
     --button-padding-block-end: 0.3125rem;
     --button-padding-inline-end: 0.3125rem;
     --button-padding-inline-start: 0.3125rem;
   }
-  ._button_q7lq8_2._type-icon_q7lq8_16._size-small_q7lq8_85 {
+  ._button_158ym_2._type-icon_158ym_16._size-small_158ym_85 {
     --button-padding-block-start: 0.4375rem;
     --button-padding-block-end: 0.4375rem;
     --button-padding-inline-end: 0.4375rem;
     --button-padding-inline-start: 0.4375rem;
   }
-  ._button_q7lq8_2._type-icon_q7lq8_16._size-medium_q7lq8_94 {
+  ._button_158ym_2._type-icon_158ym_16._size-medium_158ym_94 {
     --button-padding-block-start: 0.4375rem;
     --button-padding-block-end: 0.4375rem;
     --button-padding-inline-end: 0.4375rem;
     --button-padding-inline-start: 0.4375rem;
   }
-  ._button_q7lq8_2._type-icon_q7lq8_16._size-large_q7lq8_102 {
+  ._button_158ym_2._type-icon_158ym_16._size-large_158ym_102 {
     --button-padding-block-start: 0.6875rem;
     --button-padding-block-end: 0.6875rem;
     --button-padding-inline-end: 0.6875rem;
     --button-padding-inline-start: 0.6875rem;
   }
 }
-@keyframes _indeterminate-before_q7lq8_1 {
+@keyframes _indeterminate-before_158ym_1 {
   0% {
     inset-inline-start: -35%;
     inset-inline-end: 100%;
@@ -241,7 +241,7 @@ a[data-anv=button-link]:focus {
   }
 }
 @layer base {
-  ._button-compound_q7lq8_241 {
+  ._button-compound_158ym_241 {
     background-color: transparent;
     padding-block: 0;
     padding-inline: 0;
@@ -254,60 +254,60 @@ a[data-anv=button-link]:focus {
   }
 }
 @layer state {
-  ._button-compound_q7lq8_241[data-interactive=hover], ._button-compound_q7lq8_241:hover {
+  ._button-compound_158ym_241[data-interactive=hover], ._button-compound_158ym_241:hover {
     --button-background-color: var(--button-secondary-background-color-hover, rgba(5, 5, 5, 0.1333333333));
     z-index: 1;
   }
-  ._button-compound_q7lq8_241[data-interactive=active], ._button-compound_q7lq8_241:active {
+  ._button-compound_158ym_241[data-interactive=active], ._button-compound_158ym_241:active {
     --button-background-color: var(--button-secondary-background-color-active, rgba(7, 7, 7, 0.2078431373));
     z-index: 1;
   }
-  ._button-compound_q7lq8_241._shape-rounded_q7lq8_262 {
+  ._button-compound_158ym_241._shape-rounded_158ym_262 {
     --button-border-radius: 0.75rem;
   }
-  ._button-compound_q7lq8_241._shape-pill_q7lq8_265 {
+  ._button-compound_158ym_241._shape-pill_158ym_265 {
     --button-border-radius: 1.5rem;
   }
-  ._button-compound_q7lq8_241._shape-circular_q7lq8_268 {
+  ._button-compound_158ym_241._shape-circular_158ym_268 {
     --button-border-radius: 100%;
   }
 }
 @layer state {
-  ._button-toggle_q7lq8_273 {
+  ._button-toggle_158ym_273 {
     border-color: var(--border-color, #949596);
   }
-  ._button-toggle_q7lq8_273[aria-pressed=false]:not([data-interactive=hover],
+  ._button-toggle_158ym_273[aria-pressed=false]:not([data-interactive=hover],
   :hover,
   [data-interactive=active],
   :active) {
     background-color: var(--button-primary-foreground-color, #ffffff);
   }
-  ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true]) {
+  ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true]) {
     color: var(--foreground-color-primary, #0265DC);
     border-color: currentColor;
   }
-  ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true])[data-interactive=hover], ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true]):hover {
+  ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true])[data-interactive=hover], ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true]):hover {
     color: var(--foreground-color-hover-primary, #004491);
   }
-  ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true])[data-interactive=hover]::before, ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true]):hover::before {
+  ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true])[data-interactive=hover]::before, ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true]):hover::before {
     content: "";
     background-color: var(--overlay-color-hover-primary, rgba(2, 101, 220, 0.1019607843));
     position: absolute;
     inset: 0;
     z-index: 1;
   }
-  ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true])[data-interactive=active], ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true]):active {
+  ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true])[data-interactive=active], ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true]):active {
     color: var(--foreground-color-active-primary, #004491);
     border-color: currentColor;
   }
-  ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true])[data-interactive=active]::before, ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true]):active::before {
+  ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true])[data-interactive=active]::before, ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true]):active::before {
     content: "";
     background-color: var(--overlay-color-active-primary, rgba(2, 101, 220, 0.3019607843));
     position: absolute;
     inset: 0;
     z-index: 1;
   }
-  ._button-toggle_q7lq8_273[aria-pressed=true]:not(:disabled, ._disabled_q7lq8_67, [aria-disabled=true])::after {
+  ._button-toggle_158ym_273[aria-pressed=true]:not(:disabled, ._disabled_158ym_67, [aria-disabled=true])::after {
     content: "";
     position: absolute;
     width: 100%;
@@ -323,11 +323,11 @@ a[data-anv=button-link]:focus {
   }
 }
 @layer application {
-  ._button-toggle_q7lq8_273:disabled, ._button-toggle_q7lq8_273._disabled_q7lq8_67, ._button-toggle_q7lq8_273[aria-disabled=true] {
+  ._button-toggle_158ym_273:disabled, ._button-toggle_158ym_273._disabled_158ym_67, ._button-toggle_158ym_273[aria-disabled=true] {
     color: var(--foreground-color-subdued, #737475);
     border-color: transparent;
   }
-  ._button_q7lq8_2:disabled, ._button_q7lq8_2._disabled_q7lq8_67, ._button_q7lq8_2[aria-disabled=true] {
+  ._button_158ym_2:disabled, ._button_158ym_2._disabled_158ym_67, ._button_158ym_2[aria-disabled=true] {
     cursor: not-allowed;
     opacity: 0.6;
     --button-foreground-color: var(--foreground-color-subdued, #737475);

package/dist/Button.js

@@ -1,2 +1,2 @@
-export { B as Button, B as default } from './Button-l7pTJdPc.js';
+export { B as Button, B as default } from './Button-DrNDkO2f.js';
 //# sourceMappingURL=Button.js.map

package/dist/Button.module-DwCq9XU0.js

@@ -0,0 +1,26 @@
+import './Button.css';const button = "_button_158ym_2";
+const icon = "_icon_158ym_62";
+const loading = "_loading_158ym_70";
+const styles = {
+	button: button,
+	"type-icon": "_type-icon_158ym_16",
+	icon: icon,
+	loading: loading,
+	"loading-spinner": "_loading-spinner_158ym_73",
+	"size-xsmall": "_size-xsmall_158ym_76",
+	"size-small": "_size-small_158ym_85",
+	"size-medium": "_size-medium_158ym_94",
+	"size-large": "_size-large_158ym_102",
+	"appearance-primary": "_appearance-primary_158ym_110",
+	"appearance-secondary": "_appearance-secondary_158ym_125",
+	"appearance-ghost": "_appearance-ghost_158ym_140",
+	"danger-primary": "_danger-primary_158ym_155",
+	"danger-secondary": "_danger-secondary_158ym_170",
+	"button-compound": "_button-compound_158ym_241",
+	"shape-rounded": "_shape-rounded_158ym_262",
+	"shape-pill": "_shape-pill_158ym_265",
+	"shape-circular": "_shape-circular_158ym_268",
+	"button-toggle": "_button-toggle_158ym_273"};
+
+export { styles as s };
+//# sourceMappingURL=Button.module-DwCq9XU0.js.map

package/dist/Button.module-DwCq9XU0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module-DwCq9XU0.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{ButtonCompound-CX2kHgWe.js → ButtonCompound-D9VTKcL4.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { c as cx } from './index-SvGbrGuT.js';
-import { s as styles } from './Button.module-Ck7VrMqw.js';
+import { s as styles } from './Button.module-DwCq9XU0.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
@@ -61,4 +61,4 @@ const ButtonCompound = forwardRef(
 ButtonCompound.displayName = "ButtonCompound";
 
 export { ButtonCompound as B };
-//# sourceMappingURL=ButtonCompound-CX2kHgWe.js.map
+//# sourceMappingURL=ButtonCompound-D9VTKcL4.js.map

package/dist/{ButtonCompound-CX2kHgWe.js.map → ButtonCompound-D9VTKcL4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ButtonCompound-CX2kHgWe.js","sources":["../src/components/ButtonCompound/ButtonCompound.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"../Button/Button.module.scss\";\n\n/**\n * Props for the ButtonCompound component\n * @extends LayoutUtilProps\n * @extends ComponentPropsWithoutRef<\"button\">\n */\nexport type ButtonCompoundProps = LayoutUtilProps &\n  ComponentPropsWithoutRef<\"button\"> & {\n    /**\n     * The shape of the compound button.\n     * @default rounded\n     */\n    shape?: \"pill\" | \"circular\" | \"rounded\";\n  } &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\n/**\n * ButtonCompound component for creating compound button layouts.\n *\n * Features:\n * - Three shape options (pill, circular, rounded)\n * - Transparent background for compound layouts\n * - Supports layout utilities for positioning and spacing\n * - Full accessibility support with proper ARIA attributes\n * - Flexible content support\n * - Consistent styling with other button components\n * - Hover and active state management\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <ButtonCompound shape=\"circular\">\n *   <Avatar name=\"John Doe\" />\n * </ButtonCompound>\n */\nexport const ButtonCompound = forwardRef(\n  (props: ButtonCompoundProps, ref: Ref<HTMLButtonElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      shape = \"rounded\",\n      type,\n      disabled,\n      children,\n      style,\n      ...rest\n    } = componentProps;\n\n    const data = {\n      children: childrenToString(props.children),\n      shape,\n      type,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"ButtonCompound\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const buttonClassNames = cx(\n      className,\n      styles[\"button\"],\n      styles[\"button-compound\"],\n      {\n        [styles[\"shape-pill\"]]: shape === \"pill\",\n        [styles[\"shape-circular\"]]: shape === \"circular\",\n        [styles[\"shape-rounded\"]]: shape === \"rounded\",\n      },\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <button\n        data-tracking-id={trackingId}\n        className={buttonClassNames}\n        type={type}\n        disabled={disabled}\n        data-anv=\"button-compound\"\n        ref={ref}\n        style={styleCombined}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nButtonCompound.displayName = \"ButtonCompound\";\n"],"names":[],"mappings":";;;;;;;;AA6CO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,CAAC,OAA4B,GAAA,KAAgC;AAC3D,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA,GAAQ,SAAA;AAAA,MACR,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,cAAA;AAEJ,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,QAAA,EAAU,gBAAA,CAAiB,KAAA,CAAM,QAAQ,CAAA;AAAA,MACzC,KAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,gBAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,MAAM,gBAAA,GAAmB,EAAA;AAAA,MACvB,SAAA;AAAA,MACA,OAAO,QAAQ,CAAA;AAAA,MACf,OAAO,iBAAiB,CAAA;AAAA,MACxB;AAAA,QACE,CAAC,MAAA,CAAO,YAAY,CAAC,GAAG,KAAA,KAAU,MAAA;AAAA,QAClC,CAAC,MAAA,CAAO,gBAAgB,CAAC,GAAG,KAAA,KAAU,UAAA;AAAA,QACtC,CAAC,MAAA,CAAO,eAAe,CAAC,GAAG,KAAA,KAAU;AAAA;AACvC,KACF;AAEA,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,UAAA;AAAA,QAClB,SAAA,EAAW,gBAAA;AAAA,QACX,IAAA;AAAA,QACA,QAAA;AAAA,QACA,UAAA,EAAS,iBAAA;AAAA,QACT,GAAA;AAAA,QACA,KAAA,EAAO,aAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA;;;;"}
+{"version":3,"file":"ButtonCompound-D9VTKcL4.js","sources":["../src/components/ButtonCompound/ButtonCompound.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"../Button/Button.module.scss\";\n\n/**\n * Props for the ButtonCompound component\n * @extends LayoutUtilProps\n * @extends ComponentPropsWithoutRef<\"button\">\n */\nexport type ButtonCompoundProps = LayoutUtilProps &\n  ComponentPropsWithoutRef<\"button\"> & {\n    /**\n     * The shape of the compound button.\n     * @default rounded\n     */\n    shape?: \"pill\" | \"circular\" | \"rounded\";\n  } &\n  /**\n   * Data tracking id\n   */\n  DataTrackingId;\n\n/**\n * ButtonCompound component for creating compound button layouts.\n *\n * Features:\n * - Three shape options (pill, circular, rounded)\n * - Transparent background for compound layouts\n * - Supports layout utilities for positioning and spacing\n * - Full accessibility support with proper ARIA attributes\n * - Flexible content support\n * - Consistent styling with other button components\n * - Hover and active state management\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <ButtonCompound shape=\"circular\">\n *   <Avatar name=\"John Doe\" />\n * </ButtonCompound>\n */\nexport const ButtonCompound = forwardRef(\n  (props: ButtonCompoundProps, ref: Ref<HTMLButtonElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      shape = \"rounded\",\n      type,\n      disabled,\n      children,\n      style,\n      ...rest\n    } = componentProps;\n\n    const data = {\n      children: childrenToString(props.children),\n      shape,\n      type,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"ButtonCompound\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const buttonClassNames = cx(\n      className,\n      styles[\"button\"],\n      styles[\"button-compound\"],\n      {\n        [styles[\"shape-pill\"]]: shape === \"pill\",\n        [styles[\"shape-circular\"]]: shape === \"circular\",\n        [styles[\"shape-rounded\"]]: shape === \"rounded\",\n      },\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <button\n        data-tracking-id={trackingId}\n        className={buttonClassNames}\n        type={type}\n        disabled={disabled}\n        data-anv=\"button-compound\"\n        ref={ref}\n        style={styleCombined}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nButtonCompound.displayName = \"ButtonCompound\";\n"],"names":[],"mappings":";;;;;;;;AA6CO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,CAAC,OAA4B,GAAA,KAAgC;AAC3D,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA,GAAQ,SAAA;AAAA,MACR,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,cAAA;AAEJ,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,QAAA,EAAU,gBAAA,CAAiB,KAAA,CAAM,QAAQ,CAAA;AAAA,MACzC,KAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,gBAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,MAAM,gBAAA,GAAmB,EAAA;AAAA,MACvB,SAAA;AAAA,MACA,OAAO,QAAQ,CAAA;AAAA,MACf,OAAO,iBAAiB,CAAA;AAAA,MACxB;AAAA,QACE,CAAC,MAAA,CAAO,YAAY,CAAC,GAAG,KAAA,KAAU,MAAA;AAAA,QAClC,CAAC,MAAA,CAAO,gBAAgB,CAAC,GAAG,KAAA,KAAU,UAAA;AAAA,QACtC,CAAC,MAAA,CAAO,eAAe,CAAC,GAAG,KAAA,KAAU;AAAA;AACvC,KACF;AAEA,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,UAAA;AAAA,QAClB,SAAA,EAAW,gBAAA;AAAA,QACX,IAAA;AAAA,QACA,QAAA;AAAA,QACA,UAAA,EAAS,iBAAA;AAAA,QACT,GAAA;AAAA,QACA,KAAA,EAAO,aAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA;;;;"}