@servicetitan/anvil2 2.9.0 → 3.0.0

package/dist/Alert.css

@@ -1,92 +1,74 @@
-@layer starter, reset, base, state, application;
-@layer reset {
-  ._alert_k0yve_2 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color, #141414);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: flex;
-  }
+.anvil2{@layer starter, reset, base, state, application;._alert_17r5n_1 {
+  --a2-mod-alert-background-color: var(--a2-alert-info-background-color, var(--a2-background-color-primary-faint, light-dark(var(--a2-color-blue-10, #fafcff), var(--a2-color-blue-950, #000b19))));
+  --a2-mod-alert-border-color: var(--a2-alert-info-border-color, var(--a2-border-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-200, #9ecaff))));
+  --a2-mod-alert-icon-color: var(--a2-alert-info-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  all: unset;
+  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
+  font-size: 100%;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border-style: none;
+  border-width: 0;
+  border-color: transparent;
+  box-sizing: border-box;
+  display: flex;
+  background-color: var(--a2-mod-alert-background-color);
+  border: var(--a2-size-half, 0.125rem) solid var(--a2-mod-alert-border-color);
+  border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem));
+  flex-direction: column;
+  gap: var(--a2-size-2, 0.5rem);
+  padding-block: var(--a2-size-4, 1rem);
+  padding-inline: var(--a2-size-4, 1rem);
+  width: 100%;
+  color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
+}._top_17r5n_27 {
+  align-items: flex-start;
+  display: flex;
+  font-weight: var(--a2-font-weight-bold, 700);
+  justify-content: space-between;
+}._status-icon_17r5n_34 {
+  align-self: flex-start;
+  color: var(--a2-mod-alert-icon-color);
+  flex-shrink: 0;
+  margin-block-start: var(--a2-size-1, 0.25rem);
+}._title-container_17r5n_41 {
+  align-items: flex-start;
+  display: flex;
+  font-size: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
+  gap: var(--a2-size-2, 0.5rem);
+  min-width: 0;
+}._title_17r5n_41 {
+  font-family: inherit;
+  font-size: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
+  font-weight: var(--a2-font-weight-bold, 700);
+  letter-spacing: normal;
+  line-height: 1.5;
+  margin-block-end: 0;
+  min-width: 0;
+}._close-container_17r5n_59 {
+  align-items: center;
+  display: flex;
+  height: var(--a2-size-6, 1.5rem);
+  justify-content: center;
+  width: var(--a2-size-6, 1.5rem);
+}._content_17r5n_67 {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--a2-typography-paragraph-size-default, var(--a2-font-size-400, 1rem));
+  gap: var(--a2-size-2, 0.5rem);
+  margin-inline: var(--a2-size-6, 1.5rem);
+}._success_17r5n_75 {
+  --a2-mod-alert-background-color: var(--a2-alert-success-background-color, var(--a2-background-color-success-faint, light-dark(var(--a2-color-green-10, #f5fefb), var(--a2-color-green-950, #010f0a))));
+  --a2-mod-alert-border-color: var(--a2-alert-success-border-color, var(--a2-border-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-200, #70ebbc))));
+  --a2-mod-alert-icon-color: var(--a2-alert-success-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+}._warning_17r5n_81 {
+  --a2-mod-alert-background-color: var(--a2-alert-warning-background-color, var(--a2-background-color-warning-faint, light-dark(var(--a2-color-yellow-10, #fffef8), var(--a2-color-yellow-950, #191100))));
+  --a2-mod-alert-border-color: var(--a2-alert-warning-border-color, var(--a2-border-color-warning, light-dark(var(--a2-color-yellow-700, #c98600), var(--a2-color-yellow-200, #fff0b1))));
+  --a2-mod-alert-icon-color: var(--a2-alert-warning-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+}._danger_17r5n_87 {
+  --a2-mod-alert-background-color: var(--a2-alert-danger-background-color, var(--a2-background-color-danger-faint, light-dark(var(--a2-color-red-10, #fffbfa), var(--a2-color-red-950, #0a0200))));
+  --a2-mod-alert-border-color: var(--a2-alert-danger-border-color, var(--a2-border-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e))));
+  --a2-mod-alert-icon-color: var(--a2-alert-danger-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
 }
-@layer base {
-  ._alert_k0yve_2 {
-    border: 0.125rem solid var(--border-color-primary, #0265DC);
-    border-radius: 0.375rem;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding-block: 1rem;
-    padding-inline: 1rem;
-    background-color: var(--background-color, #ffffff);
-    width: 100%;
-  }
-  ._alert_k0yve_2 ._close-container_k0yve_27 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  ._alert_k0yve_2 ._content_k0yve_34 {
-    margin-inline-start: 2rem;
-    margin-inline-end: 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    font-size: 1rem;
-  }
-  ._alert_k0yve_2 ._top_k0yve_42 {
-    font-weight: 700;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-  ._alert_k0yve_2 ._top_k0yve_42 ._title-container_k0yve_48 {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    min-width: 0;
-  }
-  ._alert_k0yve_2 ._top_k0yve_42 ._title_k0yve_48 {
-    font-size: 1rem;
-    font-weight: 700;
-    font-family: inherit;
-    line-height: 1.5;
-    letter-spacing: normal;
-    margin-block-end: 0;
-  }
-}
-@layer state {
-  ._alert_k0yve_2 ._status-icon_k0yve_64 {
-    color: var(--status-color-info, #0265DC);
-    align-self: flex-start;
-  }
-  ._alert_k0yve_2._success_k0yve_68 {
-    border-color: var(--status-color-success, #007A4D);
-  }
-  ._alert_k0yve_2._success_k0yve_68 ._status-icon_k0yve_64 {
-    color: var(--status-color-success, #007A4D);
-  }
-  ._alert_k0yve_2._warning_k0yve_74 {
-    border-color: var(--status-color-warning, #ffbe00);
-  }
-  ._alert_k0yve_2._warning_k0yve_74 ._status-icon_k0yve_64 {
-    color: var(--status-color-warning, #ffbe00);
-  }
-  ._alert_k0yve_2._danger_k0yve_80 {
-    border-color: var(--status-color-danger, #e13212);
-  }
-  ._alert_k0yve_2._danger_k0yve_80 ._status-icon_k0yve_64 {
-    color: var(--status-color-danger, #e13212);
-  }
-}
-@layer application {
-  ._alert_k0yve_2 ._close-container_k0yve_27 ._close-button_k0yve_88 {
-    color: var(--foreground-color, #141414);
-  }
 }

package/dist/Alert.js

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

package/dist/{Announcement-B9zm-_1S.js → Announcement-_C5g2Lzm.js}

@@ -5,27 +5,27 @@ 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-BdrrhBTI.js';
-import { I as Icon } from './Icon-DuIlne4x.js';
+import { B as Button } from './Button-Bnt8XUI7.js';
+import { I as Icon } from './Icon-BMMbp40n.js';
 import { c as cx } from './index-De1g9FRV.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
 import { useTrackingId } from './useTrackingId.js';
 
-import './Announcement.css';const announcement = "_announcement_178jo_2";
-const title = "_title_178jo_48";
-const success = "_success_178jo_68";
-const warning = "_warning_178jo_76";
-const danger = "_danger_178jo_84";
+import './Announcement.css';const announcement = "_announcement_kpf9b_1";
+const title = "_title_kpf9b_83";
+const success = "_success_kpf9b_101";
+const warning = "_warning_kpf9b_110";
+const danger = "_danger_kpf9b_119";
 const styles = {
 	announcement: announcement,
-	"close-container": "_close-container_178jo_39",
-	"title-container": "_title-container_178jo_48",
+	"close-button": "_close-button_kpf9b_34",
+	"close-container": "_close-container_kpf9b_56",
+	"title-container": "_title-container_kpf9b_83",
 	title: title,
-	"status-icon": "_status-icon_178jo_65",
+	"status-icon": "_status-icon_kpf9b_97",
 	success: success,
 	warning: warning,
-	danger: danger,
-	"close-button": "_close-button_178jo_94"
+	danger: danger
 };
 
 const statusIconMap = {
@@ -106,4 +106,4 @@ const Announcement = forwardRef(
 Announcement.displayName = "Announcement";
 
 export { Announcement as A };
-//# sourceMappingURL=Announcement-B9zm-_1S.js.map
+//# sourceMappingURL=Announcement-_C5g2Lzm.js.map

package/dist/{Announcement-B9zm-_1S.js.map → Announcement-_C5g2Lzm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Announcement-B9zm-_1S.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-_C5g2Lzm.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.css

@@ -1,99 +1,110 @@
-@layer starter, reset, base, state, application;
-@layer reset {
-  ._announcement_178jo_2 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color-on-primary, #ffffff);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: flex;
-  }
+.anvil2{@layer starter, reset, base, state, application;._announcement_kpf9b_1 {
+  --a2-internal-announcement-button-color: var(
+    --a2-mod-announcement-button-color
+  );
+  --a2-mod-announcement-background-color: var(--a2-announcement-info-background-color, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
+  --a2-mod-announcement-button-color: var(--a2-announcement-info-action-button-background-color, var(--a2-background-color-secondary-strong, light-dark(rgba(4, 4, 4, 0.1490196078), rgba(255, 255, 255, 0.5490196078))));
+  --a2-mod-announcement-button-color-active: var(--a2-announcement-info-action-button-background-color-active, var(--a2-background-color-secondary-strong-active, light-dark(rgba(4, 4, 4, 0.3019607843), rgba(255, 255, 255, 0.7490196078))));
+  --a2-mod-announcement-button-color-hover: var(--a2-announcement-info-action-button-background-color-hover, var(--a2-background-color-secondary-strong-hover, light-dark(rgba(4, 4, 4, 0.2509803922), rgba(255, 255, 255, 0.6509803922))));
+  --a2-mod-announcement-focus-ring-color: var(--a2-announcement-info-action-button-focus-ring-color, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+  --a2-mod-announcement-foreground-color: var(--a2-announcement-info-foreground-color, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+  all: unset;
+  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
+  font-size: 100%;
+  color: var(--a2-mod-announcement-foreground-color);
+  margin: 0;
+  padding: 0;
+  border-style: none;
+  border-width: 0;
+  border-color: transparent;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background-color: var(--a2-mod-announcement-background-color);
+  font-size: var(--a2-typography-paragraph-size-default, var(--a2-font-size-400, 1rem));
+  font-weight: var(--a2-font-weight-bold, 700);
+  gap: var(--a2-size-4, 1rem);
+  height: var(--a2-size-14, 3.5rem);
+  justify-content: center;
+  padding-block: var(--a2-size-2, 0.5rem);
+  padding-inline: var(--a2-size-4, 1rem) calc(var(--a2-size-6, 1.5rem) + var(--a2-size-8, 2rem));
+  position: relative;
+  width: 100%;
+}._announcement_kpf9b_1 button:not(._close-button_kpf9b_34):not([aria-disabled=true]):not([disabled]) {
+  --a2-mod-button-background-color: var(
+    --a2-internal-announcement-button-color
+  );
+  --a2-mod-button-background-color-active: var(
+    --a2-mod-announcement-button-color-active
+  );
+  --a2-mod-button-background-color-hover: var(
+    --a2-mod-announcement-button-color-hover
+  );
+  --a2-mod-button-foreground-color: var(
+    --a2-mod-announcement-foreground-color
+  );
+  --a2-mod-button-foreground-color-active: var(
+    --a2-mod-announcement-foreground-color
+  );
+  --a2-mod-button-foreground-color-hover: var(
+    --a2-mod-announcement-foreground-color
+  );
+  outline-color: var(--a2-mod-announcement-focus-ring-color);
+}._close-container_kpf9b_56 {
+  align-items: center;
+  display: flex;
+  height: var(--a2-size-6, 1.5rem);
+  inset-inline-end: var(--a2-size-4, 1rem);
+  justify-content: center;
+  position: absolute;
+  width: var(--a2-size-6, 1.5rem);
+}._close-button_kpf9b_34 {
+  --a2-mod-button-background-color-active: var(
+    --a2-mod-announcement-button-color-active
+  );
+  --a2-mod-button-background-color-hover: var(
+    --a2-mod-announcement-button-color-hover
+  );
+  --a2-mod-button-foreground-color: var(--a2-mod-announcement-foreground-color);
+  --a2-mod-button-foreground-color-active: var(
+    --a2-mod-announcement-foreground-color
+  );
+  --a2-mod-button-foreground-color-hover: var(
+    --a2-mod-announcement-foreground-color
+  );
+  --a2-mod-button-focus-ring-color: var(--a2-mod-announcement-focus-ring-color);
+}._title-container_kpf9b_83 {
+  align-items: center;
+  display: flex;
+  gap: var(--a2-size-1, 0.25rem);
+  overflow: hidden;
+}._title_kpf9b_83 {
+  font-size: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}._status-icon_kpf9b_97 {
+  color: inherit;
+}._success_kpf9b_101 {
+  --a2-mod-announcement-background-color: var(--a2-announcement-success-background-color, var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085))));
+  --a2-mod-announcement-button-color: var(--a2-announcement-success-action-button-background-color, var(--a2-background-color-secondary-strong, light-dark(rgba(4, 4, 4, 0.1490196078), rgba(255, 255, 255, 0.5490196078))));
+  --a2-mod-announcement-button-color-active: var(--a2-announcement-success-action-button-background-color-active, var(--a2-background-color-secondary-strong-active, light-dark(rgba(4, 4, 4, 0.3019607843), rgba(255, 255, 255, 0.7490196078))));
+  --a2-mod-announcement-button-color-hover: var(--a2-announcement-success-action-button-background-color-hover, var(--a2-background-color-secondary-strong-hover, light-dark(rgba(4, 4, 4, 0.2509803922), rgba(255, 255, 255, 0.6509803922))));
+  --a2-mod-announcement-focus-ring-color: var(--a2-announcement-success-action-button-focus-ring-color, var(--a2-foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+  --a2-mod-announcement-foreground-color: var(--a2-announcement-success-foreground-color, var(--a2-foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+}._warning_kpf9b_110 {
+  --a2-mod-announcement-background-color: var(--a2-announcement-warning-background-color, var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278))));
+  --a2-mod-announcement-button-color: var(--a2-announcement-warning-action-button-background-color, var(--a2-background-color-secondary-strong, light-dark(rgba(4, 4, 4, 0.1490196078), rgba(255, 255, 255, 0.5490196078))));
+  --a2-mod-announcement-button-color-active: var(--a2-announcement-warning-action-button-background-color-active, var(--a2-background-color-secondary-strong-active, light-dark(rgba(4, 4, 4, 0.3019607843), rgba(255, 255, 255, 0.7490196078))));
+  --a2-mod-announcement-button-color-hover: var(--a2-announcement-warning-action-button-background-color-hover, var(--a2-background-color-secondary-strong-hover, light-dark(rgba(4, 4, 4, 0.2509803922), rgba(255, 255, 255, 0.6509803922))));
+  --a2-mod-announcement-focus-ring-color: var(--a2-announcement-warning-action-button-focus-ring-color, var(--a2-foreground-color-on-warning, var(--a2-color-neutral-900, #1a1a1a)));
+  --a2-mod-announcement-foreground-color: var(--a2-announcement-warning-foreground-color, var(--a2-foreground-color-on-warning, var(--a2-color-neutral-900, #1a1a1a)));
+}._danger_kpf9b_119 {
+  --a2-mod-announcement-background-color: var(--a2-announcement-danger-background-color, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
+  --a2-mod-announcement-button-color: var(--a2-announcement-danger-action-button-background-color, var(--a2-background-color-secondary-strong, light-dark(rgba(4, 4, 4, 0.1490196078), rgba(255, 255, 255, 0.5490196078))));
+  --a2-mod-announcement-button-color-active: var(--a2-announcement-danger-action-button-background-color-active, var(--a2-background-color-secondary-strong-active, light-dark(rgba(4, 4, 4, 0.3019607843), rgba(255, 255, 255, 0.7490196078))));
+  --a2-mod-announcement-button-color-hover: var(--a2-announcement-danger-action-button-background-color-hover, var(--a2-background-color-secondary-strong-hover, light-dark(rgba(4, 4, 4, 0.2509803922), rgba(255, 255, 255, 0.6509803922))));
+  --a2-mod-announcement-focus-ring-color: var(--a2-announcement-danger-action-button-focus-ring-color, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+  --a2-mod-announcement-foreground-color: var(--a2-announcement-danger-foreground-color, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
 }
-@layer base {
-  ._announcement_178jo_2 {
-    padding-block: 0.5rem !important;
-    padding-inline: 1rem;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--status-color-info, #0265DC);
-    height: 3.5rem;
-    position: relative;
-    gap: 1rem;
-    padding-inline-end: 3.5rem;
-    --button-secondary-background-color: light-dark(
-      #04040426,
-      #ffffff8c
-    );
-    --button-secondary-foreground-color: var(--foreground-color-on-primary, #ffffff);
-    --button-secondary-foreground-color-hover: var(--foreground-color-on-primary, #ffffff);
-    --button-secondary-foreground-color-active: var(--foreground-color-on-primary, #ffffff);
-  }
-  ._announcement_178jo_2 ._close-container_178jo_39 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    position: absolute;
-    inset-inline-end: 1rem;
-  }
-  ._announcement_178jo_2 ._title-container_178jo_48 {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    overflow: hidden;
-  }
-  ._announcement_178jo_2 ._title-container_178jo_48 ._title_178jo_48 {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 1rem;
-  }
-  ._announcement_178jo_2 button {
-    outline-color: var(--a2-announcement-focus-ring-color, var(--foreground-color-on-primary, #ffffff));
-  }
-}
-@layer state {
-  ._announcement_178jo_2 ._status-icon_178jo_65 {
-    color: inherit;
-  }
-  ._announcement_178jo_2._success_178jo_68 {
-    background-color: var(--status-color-success, #007A4D);
-    color: var(--foreground-color-inverted, #ffffff);
-    --a2-announcement-focus-ring-color: var(--foreground-color-inverted, #ffffff);
-    --button-secondary-foreground-color: var(--foreground-color-inverted, #ffffff);
-    --button-secondary-foreground-color-hover: var(--foreground-color-inverted, #ffffff);
-    --button-secondary-foreground-color-active: var(--foreground-color-inverted, #ffffff);
-  }
-  ._announcement_178jo_2._warning_178jo_76 {
-    background-color: var(--status-color-warning, #ffbe00);
-    color: var(--foreground-color-on-warning, #141414);
-    --a2-announcement-focus-ring-color: var(--foreground-color-on-warning, #141414);
-    --button-secondary-foreground-color: var(--foreground-color-on-warning, #141414);
-    --button-secondary-foreground-color-hover: var(--foreground-color-on-warning, #141414);
-    --button-secondary-foreground-color-active: var(--foreground-color-on-warning, #141414);
-  }
-  ._announcement_178jo_2._danger_178jo_84 {
-    background-color: var(--status-color-danger, #e13212);
-    color: var(--foreground-color-on-danger, #ffffff);
-    --a2-announcement-focus-ring-color: var(--foreground-color-on-danger, #ffffff);
-    --button-secondary-foreground-color: var(--foreground-color-on-danger, #ffffff);
-    --button-secondary-foreground-color-hover: var(--foreground-color-on-danger, #ffffff);
-    --button-secondary-foreground-color-active: var(--foreground-color-on-danger, #ffffff);
-  }
-}
-@layer application {
-  ._announcement_178jo_2 ._close-button_178jo_94 {
-    color: inherit;
-    outline-color: var(--a2-announcement-focus-ring-color, var(--foreground-color-on-primary, #ffffff));
-  }
 }

package/dist/Announcement.js

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

package/dist/{AnvilProvider-DUPYyMc7.js → AnvilProvider-JXEbeQjR.js}

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { t as themeStyles, T as ThemeProvider } from './ThemeProvider-CaYW3RuA.js';
+import { t as themeStyles, T as ThemeProvider } from './ThemeProvider-D4KdGCaP.js';
 import { createContext, useState, useMemo } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
-import { u as useBreakpoint } from './useBreakpoint-okJ64T1D.js';
+import { u as useBreakpoint } from './useBreakpoint-CeaUyHxh.js';
 import { a as useTranslations, L as LocalizationContext } from './LocalizationContext-UsmB5mnR.js';
 import { T as TrackingProvider } from './TrackingProvider-Co4lyoI9.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
 
 import './AnvilProvider.css';const AnvilProviderContext = createContext(
   {}
@@ -29,10 +29,15 @@ const AnvilProvider = (props) => {
     translations = {}
   } = localizationData ?? {};
   const { scope = "ST", optOut } = trackingIdData ?? {};
-  const classNameCombined = cx(className, [themeStyles["theme-core"]], {
-    [themeStyles["mode-dark"]]: themeData?.mode === "dark",
-    [themeStyles["mode-light"]]: themeData?.mode === "light"
-  });
+  const classNameCombined = cx(
+    className,
+    "anvil2",
+    [themeStyles["theme-core"]],
+    {
+      [themeStyles["mode-dark"]]: themeData?.mode === "dark",
+      [themeStyles["mode-light"]]: themeData?.mode === "light"
+    }
+  );
   const styleCombined = {
     ...style,
     ...layoutStyles
@@ -67,4 +72,4 @@ const AnvilProvider = (props) => {
 };
 
 export { AnvilProvider as A, AnvilProviderContext as a };
-//# sourceMappingURL=AnvilProvider-DUPYyMc7.js.map
+//# sourceMappingURL=AnvilProvider-JXEbeQjR.js.map

package/dist/AnvilProvider-JXEbeQjR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnvilProvider-JXEbeQjR.js","sources":["../src/providers/AnvilProvider/AnvilProviderContext.tsx","../src/providers/AnvilProvider/AnvilProvider.tsx"],"sourcesContent":["import { ThemeProviderProps } from \"../ThemeProvider\";\nimport {\n  ComponentPropsWithoutRef,\n  Dispatch,\n  ReactNode,\n  SetStateAction,\n  createContext,\n  useContext,\n} from \"react\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { ITranslations } from \"../LocalizationProvider/LocalizationProvider\";\nimport { type BreakpointReturnProps } from \"../../hooks/useBreakpoint\";\n\nexport type AnvilProviderProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps & {\n    children?: ReactNode;\n\n    themeData?: {\n      theme?: ThemeProviderProps[\"theme\"];\n      mode?: ThemeProviderProps[\"mode\"];\n    };\n\n    localizationData?: {\n      locale?: ITranslations[\"locale\"];\n      dir?: ITranslations[\"dir\"];\n      translations?: ITranslations[\"translations\"];\n    };\n  } & {\n    trackingIdData?: {\n      scope?: string;\n      optOut?: boolean;\n    };\n  };\n\nexport type AnvilProviderContextProps = {\n  breakpoint?: BreakpointReturnProps;\n};\n\nexport const AnvilProviderContext = createContext<AnvilProviderContextProps>(\n  {},\n);\n\nexport const TooltipLegacyGroupContext = createContext<{\n  disableDelayGroup: Dispatch<SetStateAction<boolean>>;\n} | null>(null);\n\nexport const useTooltipLegacyGroup = () => {\n  const context = useContext(TooltipLegacyGroupContext);\n\n  if (context == null) {\n    throw new Error(\n      \"Tooltip components must be wrapped in <AnvilProvider /> or <TooltipGroupContext.Provider />\",\n    );\n  }\n\n  return context;\n};\n","import \"@servicetitan/anvil-fonts/dist/css/anvil-fonts.css\";\nimport { ThemeProvider } from \"../ThemeProvider\";\nimport themeStyles from \"../ThemeProvider/ThemeProvider.module.scss\";\nimport { useMemo, useState } from \"react\";\nimport cx from \"classnames\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { useTranslations } from \"../LocalizationProvider/useTranslations\";\nimport { LocalizationContext } from \"../LocalizationProvider\";\nimport TrackingProvider from \"../TrackingProvider\";\nimport {\n  AnvilProviderContext,\n  AnvilProviderProps,\n  TooltipLegacyGroupContext,\n} from \"./AnvilProviderContext\";\n\nexport const AnvilProvider = (props: AnvilProviderProps) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n  const {\n    themeData,\n    localizationData,\n    trackingIdData,\n    children,\n    className,\n    style,\n    ...rest\n  } = componentProps;\n\n  const {\n    locale = \"en\",\n    dir = \"ltr\",\n    translations = {},\n  } = localizationData ?? {};\n\n  const { scope = \"ST\", optOut } = trackingIdData ?? {};\n\n  const classNameCombined = cx(\n    className,\n    \"anvil2\",\n    [themeStyles[\"theme-core\"]],\n    {\n      [themeStyles[\"mode-dark\"]]: themeData?.mode === \"dark\",\n      [themeStyles[\"mode-light\"]]: themeData?.mode === \"light\",\n    },\n  );\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n  };\n\n  const breakpoint = useBreakpoint();\n\n  const [disableDelayGroup, setDisableDelayGroup] = useState(false);\n\n  const { translations: t } = useTranslations(translations);\n\n  const localizationContextValue = useMemo(() => ({ locale, t }), [locale, t]);\n  const tooltipLegacyGroupContextValue = useMemo(\n    () => ({ disableDelayGroup: setDisableDelayGroup }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [disableDelayGroup],\n  );\n\n  return (\n    <AnvilProviderContext.Provider value={{ breakpoint }}>\n      <ThemeProvider\n        className={classNameCombined}\n        style={styleCombined}\n        theme={themeData?.theme}\n        mode={themeData?.mode}\n        dir={dir}\n        {...rest}\n      >\n        <TooltipLegacyGroupContext.Provider\n          value={tooltipLegacyGroupContextValue}\n        >\n          <LocalizationContext.Provider value={localizationContextValue}>\n            <TrackingProvider scope={scope} optOut={optOut}>\n              {children}\n            </TrackingProvider>\n          </LocalizationContext.Provider>\n        </TooltipLegacyGroupContext.Provider>\n      </ThemeProvider>\n    </AnvilProviderContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAsCO,MAAM,oBAAA,GAAuB,aAAA;AAAA,EAClC;AACF;AAEO,MAAM,yBAAA,GAA4B,cAE/B,IAAI,CAAA;;AC5BP,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AAEjE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,cAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,MAAA,GAAS,IAAA;AAAA,IACT,GAAA,GAAM,KAAA;AAAA,IACN,eAAe;AAAC,GAClB,GAAI,oBAAoB,EAAC;AAEzB,EAAA,MAAM,EAAE,KAAA,GAAQ,IAAA,EAAM,MAAA,EAAO,GAAI,kBAAkB,EAAC;AAEpD,EAAA,MAAM,iBAAA,GAAoB,EAAA;AAAA,IACxB,SAAA;AAAA,IACA,QAAA;AAAA,IACA,CAAC,WAAA,CAAY,YAAY,CAAC,CAAA;AAAA,IAC1B;AAAA,MACE,CAAC,WAAA,CAAY,WAAW,CAAC,GAAG,WAAW,IAAA,KAAS,MAAA;AAAA,MAChD,CAAC,WAAA,CAAY,YAAY,CAAC,GAAG,WAAW,IAAA,KAAS;AAAA;AACnD,GACF;AACA,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,GAAG,KAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAa,aAAA,EAAc;AAEjC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhE,EAAA,MAAM,EAAE,YAAA,EAAc,CAAA,EAAE,GAAI,gBAAgB,YAAY,CAAA;AAExD,EAAA,MAAM,wBAAA,GAA2B,OAAA,CAAQ,OAAO,EAAE,MAAA,EAAQ,GAAE,CAAA,EAAI,CAAC,MAAA,EAAQ,CAAC,CAAC,CAAA;AAC3E,EAAA,MAAM,8BAAA,GAAiC,OAAA;AAAA,IACrC,OAAO,EAAE,iBAAA,EAAmB,oBAAA,EAAqB,CAAA;AAAA;AAAA,IAEjD,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,2BACG,oBAAA,CAAqB,QAAA,EAArB,EAA8B,KAAA,EAAO,EAAE,YAAW,EACjD,QAAA,kBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,iBAAA;AAAA,MACX,KAAA,EAAO,aAAA;AAAA,MACP,OAAO,SAAA,EAAW,KAAA;AAAA,MAClB,MAAM,SAAA,EAAW,IAAA;AAAA,MACjB,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,yBAAA,CAA0B,QAAA;AAAA,QAA1B;AAAA,UACC,KAAA,EAAO,8BAAA;AAAA,UAEP,QAAA,kBAAA,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,wBAAA,EACnC,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,KAAA,EAAc,MAAA,EAC7B,QAAA,EACH,CAAA,EACF;AAAA;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}

package/dist/AnvilProvider.js

@@ -1,2 +1,2 @@
-export { A as AnvilProvider, a as AnvilProviderContext, A as default } from './AnvilProvider-DUPYyMc7.js';
+export { A as AnvilProvider, a as AnvilProviderContext, A as default } from './AnvilProvider-JXEbeQjR.js';
 //# sourceMappingURL=AnvilProvider.js.map

package/dist/{Avatar-BckUfs1N.js → Avatar-B4hRHku9.js}

@@ -2,11 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useContext, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useAccessibleColor, t as tinycolor } from './useAccessibleColor-BYKjkGRg.js';
-import { S as SrOnly } from './SrOnly-eUpYGpAT.js';
+import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
 import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
 
 import './Avatar.css';function getInitial(name) {
   if (!name) return void 0;
@@ -19,35 +19,35 @@ import './Avatar.css';function getInitial(name) {
   return `${nameArray[0][0].toUpperCase()}`;
 }
 
-const small$1 = "_small_1gdlr_20";
-const medium = "_medium_1gdlr_26";
-const large$1 = "_large_1gdlr_32";
+const small$1 = "_small_1faog_23";
+const medium = "_medium_1faog_28";
+const large$1 = "_large_1faog_33";
 const styles = {
-	"avatar-group": "_avatar-group_1gdlr_2",
+	"avatar-group": "_avatar-group_1faog_1",
 	small: small$1,
 	medium: medium,
 	large: large$1
 };
 
-const initial = "_initial_bnoyf_49";
-const img = "_img_bnoyf_57";
-const indicator = "_indicator_bnoyf_66";
-const online = "_online_bnoyf_80";
-const offline = "_offline_bnoyf_83";
-const xsmall = "_xsmall_bnoyf_90";
-const small = "_small_bnoyf_105";
-const large = "_large_bnoyf_120";
+const initial = "_initial_bvbpu_46";
+const img = "_img_bvbpu_55";
+const indicator = "_indicator_bvbpu_65";
+const online = "_online_bvbpu_78";
+const offline = "_offline_bvbpu_82";
+const xsmall = "_xsmall_bvbpu_86";
+const small = "_small_bvbpu_92";
+const large = "_large_bvbpu_98";
 const avatarBaseStyles = {
-	"avatar-base": "_avatar-base_bnoyf_2",
+	"avatar-base": "_avatar-base_bvbpu_1",
 	initial: initial,
 	img: img,
 	indicator: indicator,
 	online: online,
 	offline: offline,
-	"overflow-ten-plus": "_overflow-ten-plus_bnoyf_87",
 	xsmall: xsmall,
 	small: small,
-	large: large
+	large: large,
+	"overflow-ten-plus": "_overflow-ten-plus_bvbpu_106"
 };
 
 const AvatarBase = forwardRef(
@@ -78,9 +78,9 @@ const AvatarBase = forwardRef(
     const mode = themeMode ?? sysMode;
     const { foreground, background, border } = useAccessibleColor(color, mode);
     const styleWithColor = {
-      "--int-bg-color": color && background,
-      "--int-font-color": color && foreground,
-      "--int-border-color": color && border,
+      "--a2-inline-avatar-background-color": color && background,
+      "--a2-inline-avatar-font-color": color && foreground,
+      "--a2-inline-avatar-border-color": color && border,
       ...style
     };
     const onlineIndicatorBorderColor = useMemo(() => {
@@ -89,10 +89,10 @@ const AvatarBase = forwardRef(
           return tinycolor(background).brighten(20).toHexString();
         }
       }
-      return "var(--background-color)";
+      return "var(--a2-background-color-default)";
     }, [color, mode, background]);
     const onlineIndicatorStyles = {
-      "--int-border-color": onlineIndicatorBorderColor
+      "--a2-inline-avatar-border-color": onlineIndicatorBorderColor
     };
     const onlineString = status;
     const srOnly = [name, onlineString].filter(Boolean).join(" ");
@@ -255,4 +255,4 @@ const Avatar = Object.assign(
 Avatar.displayName = "Avatar";
 
 export { AvatarGroup as A, Avatar as a };
-//# sourceMappingURL=Avatar-BckUfs1N.js.map
+//# sourceMappingURL=Avatar-B4hRHku9.js.map