@servicetitan/anvil2 2.7.0 → 2.8.0

package/dist/AiMark.css

@@ -0,0 +1,260 @@
+@layer starter, reset, base, state, application;
+@layer reset {
+  ._field-label-button_l6rj1_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: revert-layer;
+    box-sizing: border-box;
+  }
+}
+@layer base {
+  ._field-label-button_l6rj1_2 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    border-radius: 0.375rem;
+    padding: 0;
+    flex-shrink: 0;
+    outline-style: solid;
+    outline-width: 0;
+    outline-offset: 0.0625rem;
+    outline-color: var(--button-secondary-focus-ring-color, #0265DC);
+    transition: outline 200ms cubic-bezier(0, 0, 0.4, 1), background-color 200ms cubic-bezier(0, 0, 0.4, 1);
+  }
+  ._field-label-button__inner_l6rj1_36 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.375rem;
+    background-color: transparent;
+    transition: background-color 200ms cubic-bezier(0, 0, 0.4, 1);
+    pointer-events: none;
+  }
+  /**
+   * AiMark (and similar): icon can be larger than 16px; scale outer/inner with
+   * --field-label-button-outer / --field-label-button-inner on the button.
+   */
+  ._field-label-button-scaled_l6rj1_51 {
+    width: var(--field-label-button-outer, 1.75rem);
+    height: var(--field-label-button-outer, 1.75rem);
+  }
+  ._field-label-button-scaled_l6rj1_51 ._field-label-button__inner_l6rj1_36 {
+    width: var(--field-label-button-inner, 1.5rem);
+    height: var(--field-label-button-inner, 1.5rem);
+  }
+}
+@layer state {
+  ._field-label-button_l6rj1_2:not(:disabled, [aria-disabled=true]):hover ._field-label-button__inner_l6rj1_36 {
+    background-color: var(--button-secondary-background-color-hover, rgba(5, 5, 5, 0.1333333333));
+  }
+  ._field-label-button_l6rj1_2:not(:disabled, [aria-disabled=true]):focus-visible, ._field-label-button_l6rj1_2:not(:disabled, [aria-disabled=true]):focus {
+    outline-width: 0.125rem;
+  }
+  ._field-label-button_l6rj1_2:not(:disabled, [aria-disabled=true]):focus-visible ._field-label-button__inner_l6rj1_36, ._field-label-button_l6rj1_2:not(:disabled, [aria-disabled=true]):focus ._field-label-button__inner_l6rj1_36 {
+    background-color: var(--button-secondary-background-color-hover, rgba(5, 5, 5, 0.1333333333));
+  }
+  ._field-label-button_l6rj1_2:not(:disabled, [aria-disabled=true]):active ._field-label-button__inner_l6rj1_36 {
+    background-color: var(--button-secondary-background-color-active, rgba(7, 7, 7, 0.2078431373));
+  }
+}
+._field-label-button_l6rj1_2:disabled, ._field-label-button_l6rj1_2._disabled_l6rj1_74, ._field-label-button_l6rj1_2[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}@layer starter, reset, base, state, application;
+@layer reset {
+  ._content_yo27y_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: solid;
+    border-width: 0.0625rem;
+    border-color: var(--border-color-subdued, #dfe0e1);
+    box-sizing: border-box;
+    display: revert-layer;
+  }
+}
+@layer base {
+  ._content_yo27y_2 {
+    width: -moz-max-content;
+    width: max-content;
+    max-width: calc(100% - 1.5rem);
+    white-space: pre-line;
+    background-color: var(--background-color-strong, #f7f7f7);
+    border-radius: 0.375rem;
+    box-shadow: 0rem 0.125rem 0.5rem var(--shadow-color, rgba(20, 20, 20, 0.0784313725));
+    font-size: 1rem;
+    position: absolute !important;
+    opacity: 0;
+    transition: opacity 100ms, width 100ms, height 100ms, overlay 100ms allow-discrete, display 100ms allow-discrete;
+  }
+  ._content_yo27y_2 ._scroller_yo27y_29 {
+    height: inherit;
+    box-sizing: border-box;
+    padding: 1rem;
+    overflow: auto;
+    max-height: inherit;
+    min-height: inherit;
+  }
+  ._arrow_yo27y_37 {
+    fill: var(--background-color-strong, #f7f7f7);
+    position: absolute;
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+  ._arrow_yo27y_37 path {
+    stroke: var(--border-color-subdued, #dfe0e1);
+    stroke-width: 0.0625rem;
+    stroke-dasharray: 0, 0.875rem, 0.8125rem;
+    stroke-linejoin: round;
+  }
+}
+@layer state {
+  ._content_yo27y_2:not(:popover-open):not(dialog[open]) {
+    display: none !important;
+  }
+  ._content_yo27y_2:popover-open {
+    opacity: 1;
+  }
+  @starting-style {
+    ._content_yo27y_2:popover-open {
+      opacity: 0;
+    }
+  }
+  ._content_yo27y_2._no-padding_yo27y_62 ._scroller_yo27y_29 {
+    padding-block: 0;
+    padding-inline: 0;
+  }
+}@layer starter, reset, base, state, application;
+@layer reset {
+  ._container_1h61l_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;
+  }
+}
+@layer base {
+  ._tooltip-trigger_1h61l_17 {
+    display: contents !important;
+  }
+  ._container_1h61l_2 {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+  }
+  ._container_1h61l_2 ._button-wrapper_1h61l_27 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+  }
+  ._container_1h61l_2._collapse-block_1h61l_34:not(._with-padding_1h61l_34) {
+    height: 1rem;
+  }
+  ._container_1h61l_2._collapse-inline_1h61l_37:not(._with-padding_1h61l_34) {
+    width: 1rem;
+  }
+  ._container_1h61l_2._with-padding_1h61l_34 {
+    padding-block: 0.4375rem;
+    padding-inline: 0.4375rem;
+    border: 1px solid transparent;
+  }
+  ._container_1h61l_2._with-padding_1h61l_34._collapse-block_1h61l_34 {
+    padding-block: 0;
+  }
+  ._container_1h61l_2._with-padding_1h61l_34._collapse-inline_1h61l_37 {
+    padding-inline: 0;
+  }
+}
+@layer state {
+  ._container_1h61l_2._small_1h61l_53 {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+  ._container_1h61l_2._small_1h61l_53 ._button-wrapper_1h61l_27 button svg {
+    font-size: 0.75rem;
+  }
+  ._container_1h61l_2._medium_1h61l_60 {
+    height: 1rem;
+    width: 1rem;
+  }
+  ._container_1h61l_2._medium_1h61l_60 ._button-wrapper_1h61l_27 button svg {
+    font-size: 1rem;
+  }
+  ._container_1h61l_2._large_1h61l_67 {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+  ._container_1h61l_2._large_1h61l_67 ._button-wrapper_1h61l_27 button svg {
+    font-size: 1.5rem;
+  }
+  ._container_1h61l_2._xlarge_1h61l_74 {
+    height: 2rem;
+    width: 2rem;
+  }
+  ._container_1h61l_2._xlarge_1h61l_74 ._button-wrapper_1h61l_27 button svg {
+    font-size: 2rem;
+  }
+  ._container_1h61l_2._collapse-block_1h61l_34:not(._with-padding_1h61l_34)._small_1h61l_53 {
+    height: 0.75rem;
+  }
+  ._container_1h61l_2._collapse-block_1h61l_34:not(._with-padding_1h61l_34)._medium_1h61l_60 {
+    height: 1rem;
+  }
+  ._container_1h61l_2._collapse-block_1h61l_34:not(._with-padding_1h61l_34)._large_1h61l_67 {
+    height: 1.5rem;
+  }
+  ._container_1h61l_2._collapse-block_1h61l_34:not(._with-padding_1h61l_34)._xlarge_1h61l_74 {
+    height: 2rem;
+  }
+  ._container_1h61l_2._collapse-inline_1h61l_37:not(._with-padding_1h61l_34)._small_1h61l_53 {
+    width: 0.75rem;
+  }
+  ._container_1h61l_2._collapse-inline_1h61l_37:not(._with-padding_1h61l_34)._medium_1h61l_60 {
+    width: 1rem;
+  }
+  ._container_1h61l_2._collapse-inline_1h61l_37:not(._with-padding_1h61l_34)._large_1h61l_67 {
+    width: 1.5rem;
+  }
+  ._container_1h61l_2._collapse-inline_1h61l_37:not(._with-padding_1h61l_34)._xlarge_1h61l_74 {
+    width: 2rem;
+  }
+  ._container_1h61l_2._with-padding_1h61l_34._large_1h61l_67, ._container_1h61l_2._with-padding_1h61l_34._xlarge_1h61l_74 {
+    padding-block: 0.6875rem;
+    padding-inline: 0.6875rem;
+  }
+  ._container_1h61l_2._with-padding_1h61l_34._large_1h61l_67._collapse-block_1h61l_34, ._container_1h61l_2._with-padding_1h61l_34._xlarge_1h61l_74._collapse-block_1h61l_34 {
+    padding-block: 0;
+  }
+  ._container_1h61l_2._with-padding_1h61l_34._large_1h61l_67._collapse-inline_1h61l_37, ._container_1h61l_2._with-padding_1h61l_34._xlarge_1h61l_74._collapse-inline_1h61l_37 {
+    padding-inline: 0;
+  }
+}

package/dist/AiMark.d.ts

@@ -0,0 +1,2 @@
+export * from './components/AiMark/index'
+export {}

package/dist/AiMark.js

@@ -0,0 +1,2 @@
+export { A as AiMark } from './AiMark-Cwc9KoyE.js';
+//# sourceMappingURL=AiMark.js.map

package/dist/AiMark.js.map

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

package/dist/{Alert-C_o2f78C.js → Alert-5qhkSUN3.js}

@@ -6,28 +6,31 @@ 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-DuIlne4x.js';
-import { B as Button } from './Button-CVsGhVJz.js';
+import { B as Button } from './Button-a_D7tUgM.js';
+import { T as Text } from './Text-MVxRo6yx.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
 import { useTrackingId } from './useTrackingId.js';
 
-import './Alert.css';const alert = "_alert_16him_2";
-const content = "_content_16him_34";
-const top = "_top_16him_42";
-const success = "_success_16him_60";
-const warning = "_warning_16him_66";
-const danger = "_danger_16him_72";
+import './Alert.css';const alert = "_alert_k0yve_2";
+const content = "_content_k0yve_34";
+const top = "_top_k0yve_42";
+const title = "_title_k0yve_48";
+const success = "_success_k0yve_68";
+const warning = "_warning_k0yve_74";
+const danger = "_danger_k0yve_80";
 const styles = {
 	alert: alert,
-	"close-container": "_close-container_16him_27",
+	"close-container": "_close-container_k0yve_27",
 	content: content,
 	top: top,
-	"title-container": "_title-container_16him_48",
-	"status-icon": "_status-icon_16him_56",
+	"title-container": "_title-container_k0yve_48",
+	title: title,
+	"status-icon": "_status-icon_k0yve_64",
 	success: success,
 	warning: warning,
 	danger: danger,
-	"close-button": "_close-button_16him_80"
+	"close-button": "_close-button_k0yve_88"
 };
 
 const statusIconMap = {
@@ -46,6 +49,7 @@ const Alert = forwardRef(
       status = "info",
       style,
       onClose,
+      aiMark,
       ...rest
     } = componentProps;
     const data = {
@@ -87,7 +91,17 @@ const Alert = forwardRef(
                   svg: statusIconMap[status ?? "info"]
                 }
               ),
-              title
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  variant: "headline",
+                  el: "h6",
+                  size: "small",
+                  className: styles["title"],
+                  aiMark: aiMark || void 0,
+                  children: title
+                }
+              )
             ] }),
             !!onClose && /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(
               Button,
@@ -110,4 +124,4 @@ const Alert = forwardRef(
 Alert.displayName = "Alert";
 
 export { Alert as A };
-//# sourceMappingURL=Alert-C_o2f78C.js.map
+//# sourceMappingURL=Alert-5qhkSUN3.js.map

package/dist/Alert-5qhkSUN3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert-5qhkSUN3.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\";\nimport { Text } from \"../Text\";\nimport { AiMarkWithTooltipOrPopoverConfig } from \"../../types/ai-marks\";\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     * When set, displays the AI mark inline after the title.\n     * Use `true` for the sparkle only, or pass tooltip/popover configuration.\n     */\n    aiMark?: boolean | AiMarkWithTooltipOrPopoverConfig;\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 * - Optional AI mark inline after the title\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      aiMark,\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            <Icon\n              size=\"large\"\n              className={styles[\"status-icon\"]}\n              svg={statusIconMap[status ?? \"info\"]}\n            />\n            <Text\n              variant=\"headline\"\n              el=\"h6\"\n              size=\"small\"\n              className={styles[\"title\"]}\n              aiMark={aiMark || undefined}\n            >\n              {title}\n            </Text>\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.css

@@ -1,6 +1,6 @@
 @layer starter, reset, base, state, application;
 @layer reset {
-  ._alert_16him_2 {
+  ._alert_k0yve_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -15,7 +15,7 @@
   }
 }
 @layer base {
-  ._alert_16him_2 {
+  ._alert_k0yve_2 {
     border: 0.125rem solid var(--border-color-primary, #0265DC);
     border-radius: 0.375rem;
     flex-direction: column;
@@ -25,14 +25,14 @@
     background-color: var(--background-color, #ffffff);
     width: 100%;
   }
-  ._alert_16him_2 ._close-container_16him_27 {
+  ._alert_k0yve_2 ._close-container_k0yve_27 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 1.5rem;
     height: 1.5rem;
   }
-  ._alert_16him_2 ._content_16him_34 {
+  ._alert_k0yve_2 ._content_k0yve_34 {
     margin-inline-start: 2rem;
     margin-inline-end: 2rem;
     display: flex;
@@ -40,45 +40,53 @@
     gap: 0.5rem;
     font-size: 1rem;
   }
-  ._alert_16him_2 ._top_16him_42 {
+  ._alert_k0yve_2 ._top_k0yve_42 {
     font-weight: 700;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
   }
-  ._alert_16him_2 ._top_16him_42 ._title-container_16him_48 {
+  ._alert_k0yve_2 ._top_k0yve_42 ._title-container_k0yve_48 {
     display: flex;
-    align-items: center;
+    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_16him_2 ._status-icon_16him_56 {
+  ._alert_k0yve_2 ._status-icon_k0yve_64 {
     color: var(--status-color-info, #0265DC);
     align-self: flex-start;
   }
-  ._alert_16him_2._success_16him_60 {
+  ._alert_k0yve_2._success_k0yve_68 {
     border-color: var(--status-color-success, #007A4D);
   }
-  ._alert_16him_2._success_16him_60 ._status-icon_16him_56 {
+  ._alert_k0yve_2._success_k0yve_68 ._status-icon_k0yve_64 {
     color: var(--status-color-success, #007A4D);
   }
-  ._alert_16him_2._warning_16him_66 {
+  ._alert_k0yve_2._warning_k0yve_74 {
     border-color: var(--status-color-warning, #ffbe00);
   }
-  ._alert_16him_2._warning_16him_66 ._status-icon_16him_56 {
+  ._alert_k0yve_2._warning_k0yve_74 ._status-icon_k0yve_64 {
     color: var(--status-color-warning, #ffbe00);
   }
-  ._alert_16him_2._danger_16him_72 {
+  ._alert_k0yve_2._danger_k0yve_80 {
     border-color: var(--status-color-danger, #e13212);
   }
-  ._alert_16him_2._danger_16him_72 ._status-icon_16him_56 {
+  ._alert_k0yve_2._danger_k0yve_80 ._status-icon_k0yve_64 {
     color: var(--status-color-danger, #e13212);
   }
 }
 @layer application {
-  ._alert_16him_2 ._close-container_16him_27 ._close-button_16him_80 {
+  ._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-C_o2f78C.js';
+export { A as Alert, A as default } from './Alert-5qhkSUN3.js';
 //# sourceMappingURL=Alert.js.map

package/dist/{Announcement-CyrTvgP4.js → Announcement-fQmFNysn.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-CVsGhVJz.js';
+import { B as Button } from './Button-a_D7tUgM.js';
 import { I as Icon } from './Icon-DuIlne4x.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
@@ -106,4 +106,4 @@ const Announcement = forwardRef(
 Announcement.displayName = "Announcement";
 
 export { Announcement as A };
-//# sourceMappingURL=Announcement-CyrTvgP4.js.map
+//# sourceMappingURL=Announcement-fQmFNysn.js.map

package/dist/{Announcement-CyrTvgP4.js.map → Announcement-fQmFNysn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Announcement-CyrTvgP4.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-fQmFNysn.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-CyrTvgP4.js';
+export { A as Announcement, A as default } from './Announcement-fQmFNysn.js';
 //# sourceMappingURL=Announcement.js.map

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

@@ -206,51 +206,53 @@ const AvatarGroup = forwardRef(
 );
 AvatarGroup.displayName = "AvatarGroup";
 
-const AvatarElement = forwardRef((props, ref) => {
-  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
-  const { name, style, ...rest } = componentProps;
-  const styleWithLayout = useMemo(() => {
-    return {
-      ...layoutStyles,
-      ...style
-    };
-  }, [layoutStyles, style]);
-  const initials = getInitial(name);
-  return /* @__PURE__ */ jsx(
-    AvatarBase,
-    {
-      style: styleWithLayout,
-      "data-anv": "avatar",
-      name,
-      ref,
-      initials: rest.size === "small" ? initials?.[0] : initials,
-      ...rest
-    }
-  );
-});
-AvatarElement.displayName = "Avatar";
-const Avatar = Object.assign(AvatarElement, {
-  /**
-   * AvatarGroup component for displaying multiple avatars in a group.
-   *
-   * Features:
-   * - Displays multiple avatars in a stacked layout
-   * - Handles overflow with a count indicator
-   * - Maintains consistent sizing across all avatars
-   * - Supports custom styling and layout
-   * - Automatically adjusts z-index for proper stacking
-   * - Fully accessible with screen reader support
-   *
-   * @example
-   * <Avatar.Group max={3}>
-   *   <Avatar name="John Doe" />
-   *   <Avatar name="Jane Smith" />
-   *   <Avatar name="Bob Johnson" />
-   *   <Avatar name="Alice Brown" />
-   * </Avatar.Group>
-   */
-  Group: AvatarGroup
-});
+const Avatar = Object.assign(
+  forwardRef(function AvatarInner(props, ref) {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const { name, style, ...rest } = componentProps;
+    const styleWithLayout = useMemo(() => {
+      return {
+        ...layoutStyles,
+        ...style
+      };
+    }, [layoutStyles, style]);
+    const initials = getInitial(name);
+    return /* @__PURE__ */ jsx(
+      AvatarBase,
+      {
+        style: styleWithLayout,
+        "data-anv": "avatar",
+        name,
+        ref,
+        initials: rest.size === "small" ? initials?.[0] : initials,
+        ...rest
+      }
+    );
+  }),
+  {
+    /**
+     * AvatarGroup component for displaying multiple avatars in a group.
+     *
+     * Features:
+     * - Displays multiple avatars in a stacked layout
+     * - Handles overflow with a count indicator
+     * - Maintains consistent sizing across all avatars
+     * - Supports custom styling and layout
+     * - Automatically adjusts z-index for proper stacking
+     * - Fully accessible with screen reader support
+     *
+     * @example
+     * <Avatar.Group max={3}>
+     *   <Avatar name="John Doe" />
+     *   <Avatar name="Jane Smith" />
+     *   <Avatar name="Bob Johnson" />
+     *   <Avatar name="Alice Brown" />
+     * </Avatar.Group>
+     */
+    Group: AvatarGroup
+  }
+);
+Avatar.displayName = "Avatar";
 
 export { AvatarGroup as A, Avatar as a };
-//# sourceMappingURL=Avatar-CCnbKkCm.js.map
+//# sourceMappingURL=Avatar-BckUfs1N.js.map