@servicetitan/anvil2 1.44.2 → 1.45.0

package/dist/{EditCard-B_n1uFkv.js → EditCard-WKzZ2XCz.js}

@@ -1,17 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as cx } from './index-tZvMCc77.js';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { c as cx } from './index-tZvMCc77.js';
-import { C as Card } from './Card-ZknG-yim-7W6rYSFV.js';
-import { T as Text } from './Text-CED_yrId-DsRYZw2-.js';
-import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
-import { B as Button } from './Button-BaHFf1AT-BQy-PFB5.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
-
-import './EditCard.css';const SvgPriorityHigh = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 19, r: 2 }), /* @__PURE__ */ React.createElement("path", { d: "M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z" }));
+import { C as Card } from './Card-vTYeSkxt.js';
+import { T as Text } from './Text-BqvcbXyp.js';
+import { I as Icon } from './Icon-D8SPKeO4.js';
+import { B as Button } from './Button-BxFXQ0-n.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
 
-const container = "_container_1bs09_11";
+import './EditCard.css';const container = "_container_1bs09_11";
 const header = "_header_1bs09_17";
 const content = "_content_1bs09_25";
 const indicator = "_indicator_1bs09_28";
@@ -32,7 +30,9 @@ const styles = {
 	footer: footer
 };
 
-const EditCard$1 = forwardRef(
+const SvgPriorityHigh = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 19, r: 2 }), /* @__PURE__ */ React.createElement("path", { d: "M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z" }));
+
+const EditCard = forwardRef(
   (props, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const {
@@ -105,14 +105,7 @@ const EditCard$1 = forwardRef(
     );
   }
 );
-EditCard$1.displayName = "EditCard";
-
-const EditCard = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(EditCard$1, { ref, ...props });
-  }
-);
-EditCard.displayName = EditCard$1.displayName;
+EditCard.displayName = "EditCard";
 
 export { EditCard as E };
-//# sourceMappingURL=EditCard-B_n1uFkv.js.map
+//# sourceMappingURL=EditCard-WKzZ2XCz.js.map

package/dist/EditCard-WKzZ2XCz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditCard-WKzZ2XCz.js","sources":["../../hammer-icon/mdi/round/priority_high.svg","../src/components/EditCard/EditCard.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgPriorityHigh = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"circle\", { cx: 12, cy: 19, r: 2 }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z\" }));\nexport default SvgPriorityHigh;\n","import cx from \"classnames\";\nimport styles from \"./EditCard.module.scss\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { LayoutUtilProps } from \"../../types\";\nimport Check from \"@servicetitan/hammer-icon/mdi/round/check.svg\";\nimport PriorityHigh from \"@servicetitan/hammer-icon/mdi/round/priority_high.svg\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Card } from \"../Card\";\nimport { Text } from \"../Text\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\n\n/**\n * Props for the EditCard component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type EditCardProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps & {\n    /**\n     * The header text to display. Can be a string or an object mapping states to different text.\n     */\n    headerText:\n      | string\n      | {\n          \"not started\": string;\n          \"in progress\": string;\n          error: string;\n          complete: string;\n        };\n    /**\n     * The current state of the edit card.\n     */\n    state: EditCardState;\n    /**\n     * Text to display on the save button.\n     * @default \"Save\"\n     */\n    saveButtonText?: string;\n    /**\n     * Text to display on the edit button.\n     * @default \"Edit\"\n     */\n    editButtonText?: string;\n    /**\n     * Whether to disable the edit button.\n     * @default false\n     */\n    disableEdit?: boolean;\n    /**\n     * Whether to disable the save button.\n     * @default false\n     */\n    disableSave?: boolean;\n    /**\n     * Callback function called when the state changes.\n     */\n    onStateChange?: (changeType: EditCardChange) => void;\n  };\n\n/**\n * The type of state change that can occur.\n * @property {\"edit\"} edit - User clicked the edit button to start editing\n * @property {\"save\"} save - User clicked the save button to save changes\n * @property {\"cancel\"} cancel - User clicked the cancel button to discard changes\n */\nexport type EditCardChange = \"edit\" | \"save\" | \"cancel\";\n\n/**\n * The current state of the edit card.\n * @property {\"not started\"} not started - Initial state, content is not being edited\n * @property {\"in progress\"} in progress - User is currently editing the content\n * @property {\"error\"} error - An error occurred during the edit process\n * @property {\"complete\"} complete - Edit was successfully completed\n */\nexport type EditCardState =\n  | \"not started\"\n  | \"in progress\"\n  | \"error\"\n  | \"complete\";\n\n/**\n * EditCard component for managing editable content with different states and actions.\n *\n * Features:\n * - Four distinct states: not started, in progress, error, and complete\n * - Visual indicators for each state with appropriate icons\n * - Dynamic header text that can change based on state\n * - Edit and save buttons with customizable text\n * - Optional button disabling for different states\n * - State change callbacks for handling user interactions\n * - Built on Card component with consistent styling\n * - Supports layout utilities for positioning and spacing\n * - Accessible with proper ARIA attributes\n * - Visual state indicators with color-coded borders\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <EditCard\n *   headerText=\"User Profile\"\n *   state=\"not started\"\n *   onStateChange={(change) => console.log(change)}\n * >\n *   <Text>Profile information goes here</Text>\n * </EditCard>\n */\nexport const EditCard = forwardRef<HTMLDivElement, EditCardProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      children,\n      className,\n      style,\n      headerText,\n      state,\n      editButtonText = \"Edit\",\n      saveButtonText = \"Save\",\n      disableEdit = false,\n      disableSave = false,\n      onStateChange,\n      ...rest\n    } = componentProps;\n\n    const kebabState = state?.replaceAll(\" \", \"-\");\n\n    const editCardClassNames = cx(\n      styles[\"edit-card\"],\n      styles[`edit-card-${kebabState}`],\n      className,\n    );\n\n    return (\n      <Card\n        padding=\"large\"\n        className={editCardClassNames}\n        data-anv=\"edit-card\"\n        style={style}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={cx(styles.indicator, styles[`indicator-${kebabState}`])}\n        >\n          {state === \"complete\" && <Icon svg={Check} />}\n          {state === \"error\" && <Icon svg={PriorityHigh} />}\n        </div>\n        <div className={styles.container}>\n          <div className={styles.header}>\n            <Text className={styles.heading} variant=\"headline\" el=\"h3\">\n              {typeof headerText === \"string\" ? headerText : headerText[state]}\n            </Text>\n            {state !== \"in progress\" && (\n              <Button\n                disabled={disableEdit}\n                onClick={() => onStateChange?.(\"edit\")}\n              >\n                {editButtonText}\n              </Button>\n            )}\n          </div>\n          {children && (\n            <div className={styles.content} style={layoutStyles}>\n              {children}\n            </div>\n          )}\n          {state === \"in progress\" && (\n            <div className={styles.footer}>\n              <Button onClick={() => onStateChange?.(\"cancel\")}>Cancel</Button>\n              <Button\n                appearance=\"primary\"\n                onClick={() => onStateChange?.(\"save\")}\n                disabled={disableSave}\n              >\n                {saveButtonText}\n              </Button>\n            </div>\n          )}\n        </div>\n      </Card>\n    );\n  },\n);\n\nEditCard.displayName = \"EditCard\";\n"],"names":["Check","PriorityHigh"],"mappings":"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"}

package/dist/EditCard.css

@@ -1,5 +1,4 @@
 @layer starter, reset, base, state, application;
-@layer starter, reset, base, state, application;
 @layer base {
   ._edit-card_1bs09_2 {
     box-sizing: border-box;

package/dist/EditCard.js

@@ -1,2 +1,2 @@
-export { E as EditCard, E as default } from './EditCard-B_n1uFkv.js';
+export { E as EditCard, E as default } from './EditCard-WKzZ2XCz.js';
 //# sourceMappingURL=EditCard.js.map

package/dist/FieldLabel-BfnCXung.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, forwardRef } from 'react';
+import { c as cx } from './index-tZvMCc77.js';
+import { S as SrOnly } from './SrOnly-CTsYSuby.js';
+import { T as Tooltip } from './Tooltip-BI3Xs75X.js';
+import { I as Icon } from './Icon-D8SPKeO4.js';
+import { S as SvgInfo } from './info-CYpG6tcI.js';
+
+import './FieldLabel.css';const label = "_label_jfzvd_2";
+const required = "_required_jfzvd_46";
+const styles = {
+	label: label,
+	"top-container": "_top-container_jfzvd_37",
+	"label-text": "_label-text_jfzvd_42",
+	required: required,
+	"info-trigger": "_info-trigger_jfzvd_51",
+	"info-content": "_info-content_jfzvd_56"
+};
+
+const FieldLabelMoreInfoIcon = ({
+  moreInfo,
+  openMoreInfo
+}) => {
+  const [open, setOpen] = useState(openMoreInfo);
+  useEffect(() => {
+    if (openMoreInfo) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+      setTimeout(() => {
+        setOpen(void 0);
+      });
+    }
+  }, [openMoreInfo]);
+  return /* @__PURE__ */ jsxs(
+    Tooltip,
+    {
+      open,
+      placement: "top",
+      offset: 5,
+      fallbackPlacements: ["right", "bottom", "left"],
+      children: [
+        /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles["info-trigger"], children: /* @__PURE__ */ jsx(Icon, { svg: SvgInfo }) }),
+        /* @__PURE__ */ jsx(Tooltip.Content, { className: styles["info-content"], children: moreInfo })
+      ]
+    }
+  );
+};
+
+const FieldLabel = forwardRef(
+  (props, ref) => {
+    const { children, className, moreInfo, required, openMoreInfo, ...rest } = props;
+    const FieldLabelClassNames = cx([styles["label"]], className);
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: FieldLabelClassNames,
+        "data-anv": "label",
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles["top-container"], "aria-atomic": "true", children: [
+            /* @__PURE__ */ jsxs("span", { className: styles["label-text"], children: [
+              children,
+              required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles["required"], children: "*" }),
+                /* @__PURE__ */ jsx(SrOnly, { children: "Required" })
+              ] }) : null
+            ] }),
+            moreInfo ? /* @__PURE__ */ jsx(
+              FieldLabelMoreInfoIcon,
+              {
+                moreInfo,
+                openMoreInfo
+              }
+            ) : null
+          ] }),
+          moreInfo ? /* @__PURE__ */ jsx(SrOnly, { children: moreInfo }) : null
+        ]
+      }
+    );
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+
+export { FieldLabel as F };
+//# sourceMappingURL=FieldLabel-BfnCXung.js.map

package/dist/FieldLabel-BfnCXung.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel-BfnCXung.js","sources":["../src/components/FieldLabel/internal/FieldLabelMoreInfoIcon.tsx","../src/components/FieldLabel/FieldLabel.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { FieldLabelProps } from \"../FieldLabel\";\nimport { Tooltip } from \"../../Tooltip\";\nimport { Icon } from \"../../Icon\";\nimport Info from \"@servicetitan/hammer-icon/mdi/round/info.svg\";\nimport styles from \"../FieldLabel.module.scss\";\n\n/**\n * Internal component for rendering the info icon with tooltip.\n *\n * @param props - Component props\n * @param props.moreInfo - The content to display in the tooltip\n * @param props.openMoreInfo - Controls the tooltip open state\n */\nexport const FieldLabelMoreInfoIcon = ({\n  moreInfo,\n  openMoreInfo,\n}: {\n  moreInfo: FieldLabelProps[\"moreInfo\"];\n  openMoreInfo: FieldLabelProps[\"openMoreInfo\"];\n}) => {\n  const [open, setOpen] = useState(openMoreInfo);\n\n  useEffect(() => {\n    if (openMoreInfo) {\n      setOpen(true);\n    } else {\n      // close the tooltip\n      setOpen(false);\n\n      // reset to uncontrolled state\n      setTimeout(() => {\n        setOpen(undefined);\n      });\n    }\n  }, [openMoreInfo]);\n\n  return (\n    <Tooltip\n      open={open}\n      placement=\"top\"\n      offset={5}\n      fallbackPlacements={[\"right\", \"bottom\", \"left\"]}\n    >\n      <Tooltip.Trigger className={styles[\"info-trigger\"]}>\n        <Icon svg={Info} />\n      </Tooltip.Trigger>\n      <Tooltip.Content className={styles[\"info-content\"]}>\n        {moreInfo}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n","import { forwardRef, ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./FieldLabel.module.scss\";\nimport { TooltipProps } from \"../Tooltip\";\nimport { SrOnly } from \"../SrOnly\";\nimport { FieldLabelMoreInfoIcon } from \"./internal/FieldLabelMoreInfoIcon\";\n\n/**\n * Props for the FieldLabel component.\n */\nexport type FieldLabelProps = Omit<ComponentPropsWithoutRef<\"label\">, \"id\"> & {\n  /** Unique identifier for the label element */\n  id?: string;\n  /**\n   * Whether the field is required. Shows a red asterisk (*) when true.\n   * @default false\n   */\n  required?: boolean;\n  /** Additional information to display in a tooltip */\n  moreInfo?: ReactNode;\n  /**\n   * Controls the open state of the more info tooltip.\n   * @default false\n   */\n  openMoreInfo?: TooltipProps[\"open\"];\n};\n\n/**\n * FieldLabel component for form field labels with optional required indicator and help tooltip.\n *\n * Features:\n * - Accessible form label with proper semantic HTML\n * - Optional required field indicator with red asterisk\n * - Help tooltip with info icon for additional context\n * - Screen reader support for required field announcement\n * - Controlled and uncontrolled tooltip state management\n * - Flexible content support for label text and help information\n * - Proper ARIA attributes and semantic structure\n * - Responsive design with consistent typography\n *\n * @example\n * <FieldLabel htmlFor=\"email\" required>\n *   Email Address\n * </FieldLabel>\n * <input id=\"email\" type=\"email\" />\n *\n * @example\n * <FieldLabel\n *   htmlFor=\"password\"\n *   required\n *   moreInfo=\"Password must be at least 8 characters long\"\n * >\n *   Password\n * </FieldLabel>\n * <input id=\"password\" type=\"password\" />\n */\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(\n  (props, ref) => {\n    const { children, className, moreInfo, required, openMoreInfo, ...rest } =\n      props;\n    const FieldLabelClassNames = cx([styles[\"label\"]], className);\n\n    return (\n      <label\n        className={FieldLabelClassNames}\n        data-anv=\"label\"\n        ref={ref}\n        {...rest}\n      >\n        <div className={styles[\"top-container\"]} aria-atomic=\"true\">\n          <span className={styles[\"label-text\"]}>\n            {children}\n            {required ? (\n              <>\n                <span aria-hidden className={styles[\"required\"]}>\n                  *\n                </span>\n                <SrOnly>Required</SrOnly>\n              </>\n            ) : null}\n          </span>\n          {moreInfo ? (\n            <FieldLabelMoreInfoIcon\n              moreInfo={moreInfo}\n              openMoreInfo={openMoreInfo}\n            />\n          ) : null}\n        </div>\n\n        {moreInfo ? <SrOnly>{moreInfo}</SrOnly> : null}\n      </label>\n    );\n  },\n);\n\nFieldLabel.displayName = \"FieldLabel\";\n"],"names":["Info"],"mappings":";;;;;;;;;;;;;;;;;;;AAcO,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,YAAY,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,KACP,MAAA;AAEL,MAAA,OAAA,CAAQ,KAAK,CAAA;AAGb,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,OAAA,CAAQ,MAAS,CAAA;AAAA,OAClB,CAAA;AAAA;AACH,GACF,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,SAAU,EAAA,KAAA;AAAA,MACV,MAAQ,EAAA,CAAA;AAAA,MACR,kBAAoB,EAAA,CAAC,OAAS,EAAA,QAAA,EAAU,MAAM,CAAA;AAAA,MAE9C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,CAAQ,OAAR,EAAA,EAAgB,SAAW,EAAA,MAAA,CAAO,cAAc,CAAA,EAC/C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,GAAK,EAAAA,OAAA,EAAM,CACnB,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,QAAQ,OAAR,EAAA,EAAgB,WAAW,MAAO,CAAA,cAAc,GAC9C,QACH,EAAA,QAAA,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAA;;ACKO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA,EAAE,UAAU,SAAW,EAAA,QAAA,EAAU,UAAU,YAAc,EAAA,GAAG,MAChE,GAAA,KAAA;AACF,IAAA,MAAM,uBAAuB,EAAG,CAAA,CAAC,OAAO,OAAO,CAAC,GAAG,SAAS,CAAA;AAE5D,IACE,uBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,oBAAA;AAAA,QACX,UAAS,EAAA,OAAA;AAAA,QACT,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,eAAe,CAAA,EAAG,eAAY,MACnD,EAAA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,YAAY,CACjC,EAAA,QAAA,EAAA;AAAA,cAAA,QAAA;AAAA,cACA,2BAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,UAAK,aAAW,EAAA,IAAA,EAAC,WAAW,MAAO,CAAA,UAAU,GAAG,QAEjD,EAAA,GAAA,EAAA,CAAA;AAAA,gCACA,GAAA,CAAC,UAAO,QAAQ,EAAA,UAAA,EAAA;AAAA,eAAA,EAClB,CACE,GAAA;AAAA,aACN,EAAA,CAAA;AAAA,YACC,QACC,mBAAA,GAAA;AAAA,cAAC,sBAAA;AAAA,cAAA;AAAA,gBACC,QAAA;AAAA,gBACA;AAAA;AAAA,aAEA,GAAA;AAAA,WACN,EAAA,CAAA;AAAA,UAEC,QAAW,mBAAA,GAAA,CAAC,MAAQ,EAAA,EAAA,QAAA,EAAA,QAAA,EAAS,CAAY,GAAA;AAAA;AAAA;AAAA,KAC5C;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/FieldLabel.css

@@ -0,0 +1,60 @@
+@layer starter, reset, base, state, application;
+@layer reset {
+  ._label_jfzvd_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;
+  }
+}
+@layer base {
+  ._label_jfzvd_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;
+    display: flex;
+    justify-items: flex-start;
+    gap: 0.25rem;
+    cursor: default;
+    flex-direction: column;
+    font-size: 0.875rem;
+    line-height: 1;
+  }
+  ._label_jfzvd_2 ._top-container_jfzvd_37 {
+    display: flex;
+    gap: 0.25rem;
+    align-items: flex-start;
+  }
+  ._label_jfzvd_2 ._label-text_jfzvd_42 {
+    line-height: 1rem;
+    font-weight: 600;
+  }
+  ._label_jfzvd_2 ._label-text_jfzvd_42 ._required_jfzvd_46 {
+    color: var(--foreground-color-danger, #e13212);
+    margin-inline-start: 0.125rem;
+    margin-inline-end: 0.125rem;
+  }
+  ._label_jfzvd_2 ._info-trigger_jfzvd_51 {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  ._label_jfzvd_2 ._info-content_jfzvd_56 {
+    max-width: 15rem !important;
+  }
+}

package/dist/FieldLabel.js

@@ -1,2 +1,2 @@
-export { F as FieldLabel, F as default } from './FieldLabel-DWl5qsRY.js';
+export { F as FieldLabel, F as default } from './FieldLabel-BfnCXung.js';
 //# sourceMappingURL=FieldLabel.js.map

package/dist/{FieldMessage-Bobp105T-DYhStLY4.js → FieldMessage-B7uQ8vmr.js}

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
+import { I as Icon } from './Icon-D8SPKeO4.js';
 import { S as SvgWarning } from './warning-c4Wj1rI4.js';
 
-import './FieldMessage-Bobp105T.css';const messages = "_messages_1hr9l_1";
+import './FieldMessage.css';const messages = "_messages_1hr9l_1";
 const styles = {
 	messages: messages,
 	"error-container": "_error-container_1hr9l_19",
@@ -51,4 +51,4 @@ const FieldMessage = forwardRef(
 FieldMessage.displayName = "FieldMessage";
 
 export { FieldMessage as F };
-//# sourceMappingURL=FieldMessage-Bobp105T-DYhStLY4.js.map
+//# sourceMappingURL=FieldMessage-B7uQ8vmr.js.map

package/dist/FieldMessage-B7uQ8vmr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage-B7uQ8vmr.js","sources":["../src/components/FieldMessage/FieldMessage.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AriaAttributes,\n  type ReactElement,\n  type ComponentPropsWithoutRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./FieldMessage.module.scss\";\nimport { Icon } from \"../Icon\";\nimport Error from \"@servicetitan/hammer-icon/mdi/round/warning.svg\";\n\n/**\n * Props for the FieldMessage component\n * @extends ComponentPropsWithoutRef<\"div\">\n */\nexport type FieldMessageProps = ComponentPropsWithoutRef<\"div\"> & {\n  /**\n   * Unique identifier for the field message container.\n   */\n  id?: string;\n  /**\n   * Hint text or element to display when there's no error.\n   */\n  hint?: ReactElement | string;\n  /**\n   * Description text or element to display below the main message.\n   */\n  description?: ReactElement | string;\n  /**\n   * Error message or element to display when there's an error.\n   */\n  errorMessage?: ReactElement | string;\n  /**\n   * aria-live attribute value for the error message.\n   * @default assertive\n   * @remarks Controls how screen readers announce error messages. \"assertive\" interrupts current speech, \"polite\" waits for current speech to finish.\n   * @link https://www.w3.org/WAI/tutorials/forms/notifications/\n   */\n  errorAriaLive?: AriaAttributes[\"aria-live\"];\n};\n\n/**\n * FieldMessage component for displaying hints, descriptions, and error messages for form fields.\n *\n * Features:\n * - Displays hint text when no error is present\n * - Shows error messages with warning icon when errors occur\n * - Supports both string and React element content\n * - Configurable aria-live behavior for screen readers\n * - Optional description text for additional context\n * - Accessible with proper ARIA attributes\n * - Visual error indicators with warning icons\n * - Conditional rendering based on error state\n * - Supports layout utilities for positioning and spacing\n *\n * @example\n * <FieldMessage\n *   hint=\"Enter your email address\"\n *   description=\"We'll use this to send you updates\"\n *   errorMessage=\"Please enter a valid email address\"\n * />\n */\nexport const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(\n  (props, ref) => {\n    const {\n      id,\n      hint,\n      description,\n      errorAriaLive = \"assertive\",\n      errorMessage,\n      className,\n      ...rest\n    } = props;\n\n    return (\n      <div\n        {...rest}\n        className={cx(styles[\"messages\"], className)}\n        ref={ref}\n        id={id}\n      >\n        {errorMessage ? (\n          <div className={styles[\"error-container\"]}>\n            <Icon\n              inherit\n              className={styles[\"error-icon\"]}\n              aria-hidden\n              svg={Error}\n            />\n            <span className={styles[\"error-message\"]} aria-live={errorAriaLive}>\n              {errorMessage}\n            </span>\n          </div>\n        ) : (\n          (hint ?? null)\n        )}\n        {description ? (\n          <div className={styles[\"description-container\"]}>\n            {description ? <span>{description}</span> : null}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nFieldMessage.displayName = \"FieldMessage\";\n"],"names":["Error"],"mappings":";;;;;;;;;;;;;AA8DO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAgB,GAAA,WAAA;AAAA,MAChB,YAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,UAAU,GAAG,SAAS,CAAA;AAAA,QAC3C,GAAA;AAAA,QACA,EAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,mBACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,iBAAiB,CACtC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,OAAO,EAAA,IAAA;AAAA,gBACP,SAAA,EAAW,OAAO,YAAY,CAAA;AAAA,gBAC9B,aAAW,EAAA,IAAA;AAAA,gBACX,GAAK,EAAAA;AAAA;AAAA,aACP;AAAA,4BACA,GAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,eAAe,CAAG,EAAA,WAAA,EAAW,eAClD,QACH,EAAA,YAAA,EAAA;AAAA,WAAA,EACF,IAEC,IAAQ,IAAA,IAAA;AAAA,UAEV,WACC,mBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,uBAAuB,CAC3C,EAAA,QAAA,EAAA,WAAA,mBAAe,GAAA,CAAA,MAAA,EAAA,EAAM,QAAY,EAAA,WAAA,EAAA,CAAA,GAAU,MAC9C,CACE,GAAA;AAAA;AAAA;AAAA,KACN;AAAA;AAGN;AAEA,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}

package/dist/{FieldMessage-Bobp105T.css → FieldMessage.css}

@@ -1,7 +1,5 @@
 @layer starter, reset, base, state, application;
 
-@layer starter, reset, base, state, application;
-
 ._messages_1hr9l_1 {
   all: unset;
   font-family: var(--font-family-base, "Nunito Sans", sans-serif);

package/dist/FieldMessage.js

@@ -1,2 +1,2 @@
-export { F as FieldMessage, F as default } from './FieldMessage-DkJ0K5s-.js';
+export { F as FieldMessage, F as default } from './FieldMessage-B7uQ8vmr.js';
 //# sourceMappingURL=FieldMessage.js.map

package/dist/{Flex-CiK7uNUu-BfxHG4L0.js → Flex-BdQMekvA.js}

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
 
-import './Flex-CiK7uNUu.css';const flex = "_flex_3ncub_2";
+import './Flex.css';const flex = "_flex_3ncub_2";
 const styles = {
 	flex: flex,
 	"inline-flex": "_inline-flex_3ncub_15"
@@ -97,4 +97,4 @@ const Flex = forwardRef((props, ref) => {
 Flex.displayName = "Flex";
 
 export { Flex as F };
-//# sourceMappingURL=Flex-CiK7uNUu-BfxHG4L0.js.map
+//# sourceMappingURL=Flex-BdQMekvA.js.map

package/dist/Flex-BdQMekvA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex-BdQMekvA.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Flex.module.scss\";\nimport { FlexSpecificProps } from \"./internal/FlexSpecificProps\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the Flex component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends FlexSpecificProps\n */\nexport type FlexProps = ComponentPropsWithoutRef<\"div\"> &\n  FlexSpecificProps & {\n    /**\n     * Responsive props for small screens (sm breakpoint).\n     */\n    sm?: FlexSpecificProps;\n    /**\n     * Responsive props for medium screens (md breakpoint).\n     */\n    md?: FlexSpecificProps;\n    /**\n     * Responsive props for large screens (lg breakpoint).\n     */\n    lg?: FlexSpecificProps;\n    /**\n     * Responsive props for extra large screens (xl breakpoint).\n     */\n    xl?: FlexSpecificProps;\n    /**\n     * Responsive props for extra extra large screens (xxl breakpoint).\n     */\n    xxl?: FlexSpecificProps;\n  };\n\n/**\n * Flex component for creating flexible layouts using CSS Flexbox.\n *\n * Features:\n * - CSS Flexbox layout with full control over flex properties\n * - Support for both flex and inline-flex display modes\n * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)\n * - Comprehensive layout utilities for spacing, alignment, and positioning\n * - Automatic style generation and class management\n * - Support for all standard div element props\n * - Flexible direction, grow, shrink, basis, and wrap controls\n * - Deprecated flexShrink prop with modern shrink alternative\n *\n * @example\n * <Flex direction=\"row\" gap=\"4\" alignItems=\"center\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </Flex>\n *\n * @example\n * <Flex\n *   direction=\"column\"\n *   gap=\"2\"\n *   md={{ direction: \"row\", gap: \"4\" }}\n * >\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </Flex>\n */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const {\n    inline,\n    direction,\n    grow,\n    shrink,\n    basis,\n    wrap,\n    sm,\n    md,\n    lg,\n    xl,\n    xxl,\n    ...nonLayoutProps\n  } = props;\n  const combineLayoutProps = {\n    ...nonLayoutProps,\n    flexDirection: direction,\n    flexGrow: grow,\n    flexShrink: shrink,\n    flexBasis: basis,\n    flexWrap: wrap,\n    sm: {\n      ...sm,\n      flexDirection: sm?.direction,\n      flexGrow: sm?.grow,\n      flexShrink: sm?.shrink,\n      flexBasis: sm?.basis,\n      flexWrap: sm?.wrap,\n    },\n    md: {\n      ...md,\n      flexDirection: md?.direction,\n      flexGrow: md?.grow,\n      flexShrink: md?.shrink,\n      flexBasis: md?.basis,\n      flexWrap: md?.wrap,\n    },\n    lg: {\n      ...lg,\n      flexDirection: lg?.direction,\n      flexGrow: lg?.grow,\n      flexShrink: lg?.shrink,\n      flexBasis: lg?.basis,\n      flexWrap: lg?.wrap,\n    },\n    xl: {\n      ...xl,\n      flexDirection: xl?.direction,\n      flexGrow: xl?.grow,\n      flexShrink: xl?.shrink,\n      flexBasis: xl?.basis,\n      flexWrap: xl?.wrap,\n    },\n    xxl: {\n      ...xxl,\n      flexDirection: xxl?.direction,\n      flexGrow: xxl?.grow,\n      flexShrink: xxl?.shrink,\n      flexBasis: xxl?.basis,\n      flexWrap: xxl?.wrap,\n    },\n  };\n  const { layoutStyles, componentProps } =\n    useLayoutPropsUtil(combineLayoutProps);\n\n  const { children, className, style, ...rest } = componentProps;\n\n  const flexClassNames = cx(className, {\n    [styles[\"flex\"]]: !inline,\n    [styles[\"inline-flex\"]]: inline,\n  });\n\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n  };\n\n  return (\n    <div\n      className={flexClassNames}\n      data-anv=\"flex\"\n      style={styleCombined}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nFlex.displayName = \"Flex\";\n"],"names":[],"mappings":"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"}

package/dist/{Flex-CiK7uNUu.css → Flex.css}

@@ -1,5 +1,4 @@
 @layer starter, reset, base, state, application;
-@layer starter, reset, base, state, application;
 @layer reset {
   ._flex_3ncub_2 {
     all: unset;

package/dist/Flex.js

@@ -1,2 +1,2 @@
-export { F as Flex, F as default } from './Flex-Ln6PmaDl.js';
+export { F as Flex, F as default } from './Flex-BdQMekvA.js';
 //# sourceMappingURL=Flex.js.map

package/dist/{Grid-DFAd8mTe.js → Grid-MGUC698u.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
 
 import './Grid.css';const grid = "_grid_1yq7u_2";
 const styles = {
@@ -10,7 +10,31 @@ const styles = {
 	"inline-grid": "_inline-grid_1yq7u_28"
 };
 
-const Grid$1 = forwardRef((props, ref) => {
+const GridItem = forwardRef(
+  (props, ref) => {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const { className, children, style, ...rest } = componentProps;
+    const gridItemClassNames = cx([styles["grid-item"]], className, {});
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: gridItemClassNames,
+        "data-anv": "grid-item",
+        ref,
+        style: styleCombined,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+GridItem.displayName = "GridItem";
+
+const GridElement = forwardRef((props, ref) => {
   const {
     inline,
     templateColumns,
@@ -95,35 +119,29 @@ const Grid$1 = forwardRef((props, ref) => {
     }
   );
 });
-Grid$1.displayName = "Grid";
-
-const GridItem = forwardRef(
-  (props, ref) => {
-    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
-    const { className, children, style, ...rest } = componentProps;
-    const gridItemClassNames = cx([styles["grid-item"]], className, {});
-    const styleCombined = {
-      ...style,
-      ...layoutStyles
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: gridItemClassNames,
-        "data-anv": "grid-item",
-        ref,
-        style: styleCombined,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-GridItem.displayName = "GridItem";
-
-const Grid = Object.assign(Grid$1, {
+GridElement.displayName = "Grid";
+const Grid = Object.assign(GridElement, {
+  /**
+   * GridItem component for individual items within a CSS Grid layout.
+   *
+   * Features:
+   * - Individual grid item with full layout utility support
+   * - Automatic grid item styling and class management
+   * - Comprehensive layout utilities for positioning and sizing
+   * - Support for all standard div element props
+   * - Flexible grid positioning and sizing controls
+   * - Automatic style generation and class management
+   * - Works seamlessly with Grid component
+   * - Automatic tracking ID generation for analytics
+   *
+   * @example
+   * <Grid templateColumns="repeat(2, 1fr)" gap="4">
+   *   <Grid.Item>Grid Item 1</Grid.Item>
+   *   <Grid.Item>Grid Item 2</Grid.Item>
+   * </Grid>
+   */
   Item: GridItem
 });
 
 export { Grid as G };
-//# sourceMappingURL=Grid-DFAd8mTe.js.map
+//# sourceMappingURL=Grid-MGUC698u.js.map

package/dist/Grid-MGUC698u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-MGUC698u.js","sources":["../src/components/Grid/internal/GridItem.tsx","../src/components/Grid/Grid.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"../Grid.module.scss\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { LayoutUtilProps } from \"../../../types\";\n\n/**\n * Props for the GridItem component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type GridItemProps = ComponentPropsWithoutRef<\"div\"> & LayoutUtilProps;\n\n/**\n * GridItem component for individual items within a CSS Grid layout.\n *\n * Features:\n * - Individual grid item with full layout utility support\n * - Automatic grid item styling and class management\n * - Comprehensive layout utilities for positioning and sizing\n * - Support for all standard div element props\n * - Flexible grid positioning and sizing controls\n * - Automatic style generation and class management\n * - Works seamlessly with Grid component\n *\n * @example\n * <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"4\">\n *   <Grid.Item>Grid Item 1</Grid.Item>\n *   <Grid.Item>Grid Item 2</Grid.Item>\n * </Grid>\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const { className, children, style, ...rest } = componentProps;\n\n    const gridItemClassNames = cx([styles[\"grid-item\"]], className, {});\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    return (\n      <div\n        className={gridItemClassNames}\n        data-anv=\"grid-item\"\n        ref={ref}\n        style={styleCombined}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGridItem.displayName = \"GridItem\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport styles from \"./Grid.module.scss\";\nimport { GridSpecificProps } from \"./internal/GridSpecificProps\";\nimport { GridItem } from \"./internal/GridItem\";\n\n/**\n * Props for the Grid component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends GridSpecificProps\n */\nexport type GridProps = ComponentPropsWithoutRef<\"div\"> & {\n  /**\n   * Applies `display: inline-grid` instead of `grid`\n   */\n  inline?: boolean;\n} & GridSpecificProps & {\n    /**\n     * Responsive props for small screens (sm breakpoint).\n     */\n    sm?: GridSpecificProps;\n    /**\n     * Responsive props for medium screens (md breakpoint).\n     */\n    md?: GridSpecificProps;\n    /**\n     * Responsive props for large screens (lg breakpoint).\n     */\n    lg?: GridSpecificProps;\n    /**\n     * Responsive props for extra large screens (xl breakpoint).\n     */\n    xl?: GridSpecificProps;\n    /**\n     * Responsive props for extra extra large screens (xxl breakpoint).\n     */\n    xxl?: GridSpecificProps;\n  };\n\nconst GridElement = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const {\n    inline,\n    templateColumns,\n    templateRows,\n    templateAreas,\n    autoColumns,\n    autoRows,\n    sm,\n    md,\n    lg,\n    xl,\n    xxl,\n    ...nonLayoutProps\n  } = props;\n  const combineLayoutProps = {\n    ...nonLayoutProps,\n    gridTemplateColumns: props.templateColumns,\n    gridTemplateRows: props.templateRows,\n    gridTemplateAreas: props.templateAreas,\n    gridAutoColumns: props.autoColumns,\n    gridAutoRows: props.autoRows,\n    sm: {\n      ...sm,\n      gridTemplateColumns: sm?.templateColumns,\n      gridTemplateRows: sm?.templateRows,\n      gridTemplateAreas: sm?.templateAreas,\n      gridAutoColumns: sm?.autoColumns,\n      gridAutoRows: sm?.autoRows,\n    },\n    md: {\n      ...md,\n      gridTemplateColumns: md?.templateColumns,\n      gridTemplateRows: md?.templateRows,\n      gridTemplateAreas: md?.templateAreas,\n      gridAutoColumns: md?.autoColumns,\n      gridAutoRows: md?.autoRows,\n    },\n    lg: {\n      ...lg,\n      gridTemplateColumns: lg?.templateColumns,\n      gridTemplateRows: lg?.templateRows,\n      gridTemplateAreas: lg?.templateAreas,\n      gridAutoColumns: lg?.autoColumns,\n      gridAutoRows: lg?.autoRows,\n    },\n    xl: {\n      ...xl,\n      gridTemplateColumns: xl?.templateColumns,\n      gridTemplateRows: xl?.templateRows,\n      gridTemplateAreas: xl?.templateAreas,\n      gridAutoColumns: xl?.autoColumns,\n      gridAutoRows: xl?.autoRows,\n    },\n    xxl: {\n      ...xxl,\n      gridTemplateColumns: xxl?.templateColumns,\n      gridTemplateRows: xxl?.templateRows,\n      gridTemplateAreas: xxl?.templateAreas,\n      gridAutoColumns: xxl?.autoColumns,\n      gridAutoRows: xxl?.autoRows,\n    },\n  };\n  const { layoutStyles, componentProps } =\n    useLayoutPropsUtil(combineLayoutProps);\n  const { children, className, style, ...rest } = componentProps;\n\n  const gridClassNames = cx(className, {\n    [styles[\"grid\"]]: !inline,\n    [styles[\"inline-grid\"]]: inline,\n  });\n\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n  };\n\n  return (\n    <div\n      className={gridClassNames}\n      data-anv=\"grid\"\n      style={styleCombined}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nGridElement.displayName = \"Grid\";\n\n/**\n * Grid component for creating CSS Grid layouts with responsive design.\n *\n * Features:\n * - CSS Grid layout with full control over grid properties\n * - Support for both grid and inline-grid display modes\n * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)\n * - Comprehensive layout utilities for spacing, alignment, and positioning\n * - Template columns, rows, and areas configuration\n * - Auto columns and rows sizing\n * - Automatic style generation and class management\n * - Support for all standard div element props\n * - Flexible grid template and auto-sizing controls\n * - Automatic tracking ID generation for analytics\n * - Compound component structure with Item sub-component\n *\n * @example\n * <Grid templateColumns=\"repeat(3, 1fr)\" gap=\"4\">\n *   <Grid.Item>Grid Item 1</Grid.Item>\n *   <Grid.Item>Grid Item 2</Grid.Item>\n *   <Grid.Item>Grid Item 3</Grid.Item>\n * </Grid>\n *\n * @example\n * <Grid\n *   templateColumns=\"repeat(1, 1fr)\"\n *   gap=\"2\"\n *   md={{ templateColumns: \"repeat(3, 1fr)\", gap: \"4\" }}\n * >\n *   <Grid.Item>Grid Item 1</Grid.Item>\n *   <Grid.Item>Grid Item 2</Grid.Item>\n *   <Grid.Item>Grid Item 3</Grid.Item>\n * </Grid>\n */\nexport const Grid = Object.assign(GridElement, {\n  /**\n   * GridItem component for individual items within a CSS Grid layout.\n   *\n   * Features:\n   * - Individual grid item with full layout utility support\n   * - Automatic grid item styling and class management\n   * - Comprehensive layout utilities for positioning and sizing\n   * - Support for all standard div element props\n   * - Flexible grid positioning and sizing controls\n   * - Automatic style generation and class management\n   * - Works seamlessly with Grid component\n   * - Automatic tracking ID generation for analytics\n   *\n   * @example\n   * <Grid templateColumns=\"repeat(2, 1fr)\" gap=\"4\">\n   *   <Grid.Item>Grid Item 1</Grid.Item>\n   *   <Grid.Item>Grid Item 2</Grid.Item>\n   * </Grid>\n   */\n  Item: GridItem,\n});\n"],"names":[],"mappings":"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"}

package/dist/Grid.css

@@ -1,5 +1,4 @@
 @layer starter, reset, base, state, application;
-@layer starter, reset, base, state, application;
 @layer reset {
   ._grid_1yq7u_2 {
     all: unset;

package/dist/Grid.js

@@ -1,2 +1,2 @@
-export { G as Grid, G as default } from './Grid-CMcDeSYT.js';
+export { G as Grid, G as default } from './Grid-MGUC698u.js';
 //# sourceMappingURL=Grid.js.map

package/dist/{Helper-h7k80qls-DHPFHTvI.js → Helper-BkIDJqgA.js}

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { F as FieldMessage } from './FieldMessage-Bobp105T-DYhStLY4.js';
-import { S as SrOnly } from './SrOnly-BsKDHetF-B93X65F1.js';
+import { F as FieldMessage } from './FieldMessage-B7uQ8vmr.js';
+import { S as SrOnly } from './SrOnly-CTsYSuby.js';
 
-import './Helper-h7k80qls.css';const helper = "_helper_157uk_1";
+import './Helper.css';const helper = "_helper_157uk_1";
 const messages = "_messages_157uk_8";
 const styles = {
 	helper: helper,
@@ -43,4 +43,4 @@ const Helper = forwardRef((props, ref) => {
 Helper.displayName = "Helper";
 
 export { Helper as H };
-//# sourceMappingURL=Helper-h7k80qls-DHPFHTvI.js.map
+//# sourceMappingURL=Helper-BkIDJqgA.js.map

package/dist/Helper-BkIDJqgA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Helper-BkIDJqgA.js","sources":["../src/internal/components/Helper/Helper.tsx"],"sourcesContent":["import { forwardRef, AriaAttributes, ReactElement } from \"react\";\nimport styles from \"./Helper.module.scss\";\nimport { FieldMessage } from \"../../../components/FieldMessage\";\nimport { SrOnly } from \"../../../components/SrOnly\";\n\nexport type HelperProps = {\n  id?: string;\n  // required?: boolean;\n  hint?: ReactElement | string;\n  description?: ReactElement | string;\n  errorMessage?: ReactElement | string;\n  /**\n   * aria-live for the error message\n   * @default assertive\n   * @link https://www.w3.org/WAI/tutorials/forms/notifications/\n   */\n  errorAriaLive?: AriaAttributes[\"aria-live\"];\n  maxLength?: number;\n  inputLength?: number;\n  isTyping?: boolean;\n  showCounter?: boolean;\n};\n\nexport const Helper = forwardRef<HTMLDivElement, HelperProps>((props, ref) => {\n  const {\n    id,\n    hint,\n    description,\n    errorAriaLive = \"assertive\",\n    errorMessage,\n    maxLength,\n    isTyping,\n    inputLength = 0,\n    showCounter,\n  } = props;\n\n  return (\n    <div className={styles[\"helper\"]} ref={ref} id={id}>\n      <FieldMessage\n        className={styles[\"messages\"]}\n        hint={hint}\n        description={description}\n        errorAriaLive={errorAriaLive}\n        errorMessage={errorMessage}\n      />\n\n      {showCounter ? (\n        <div className={styles[\"counter\"]}>\n          <span aria-hidden=\"true\">\n            {inputLength}/{maxLength}\n          </span>\n        </div>\n      ) : null}\n      {isTyping && !!maxLength ? (\n        maxLength - inputLength >= 1 ? (\n          <SrOnly>\n            {/* TODO: potential localization */}\n            <span aria-live=\"polite\" aria-atomic=\"true\">{`${\n              maxLength - inputLength\n            } character${maxLength - inputLength !== 1 ? \"s\" : \"\"} left`}</span>\n          </SrOnly>\n        ) : (\n          <SrOnly>\n            {/* TODO: potential localization */}\n            <span role=\"alert\">Maximum characters count reached</span>\n          </SrOnly>\n        )\n      ) : null}\n    </div>\n  );\n});\n\nHelper.displayName = \"Helper\";\n"],"names":[],"mappings":";;;;;;;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC5E,EAAM,MAAA;AAAA,IACJ,EAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAgB,GAAA,WAAA;AAAA,IAChB,YAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,4BACG,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA,EAAG,KAAU,EAC1C,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAO,UAAU,CAAA;AAAA,QAC5B,IAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IAEC,WAAA,mBACE,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SAAS,CAC9B,EAAA,QAAA,kBAAA,IAAA,CAAC,MAAK,EAAA,EAAA,aAAA,EAAY,MACf,EAAA,QAAA,EAAA;AAAA,MAAA,WAAA;AAAA,MAAY,GAAA;AAAA,MAAE;AAAA,KAAA,EACjB,GACF,CACE,GAAA,IAAA;AAAA,IACH,QAAY,IAAA,CAAC,CAAC,SAAA,GACb,YAAY,WAAe,IAAA,CAAA,mBACxB,GAAA,CAAA,MAAA,EAAA,EAEC,8BAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,aAAA,EAAY,QAAQ,QAC3C,EAAA,CAAA,EAAA,SAAA,GAAY,WACd,CAAA,UAAA,EAAa,YAAY,WAAgB,KAAA,CAAA,GAAI,GAAM,GAAA,EAAE,SAAQ,CAC/D,EAAA,CAAA,mBAEC,GAAA,CAAA,MAAA,EAAA,EAEC,8BAAC,MAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,QAAA,EAAA,kCAAA,EAAgC,GACrD,CAEA,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ,CAAC;AAED,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}

package/dist/{Helper-h7k80qls.css → Helper.css}

@@ -1,5 +1,4 @@
 @layer starter, reset, base, state, application;
-@layer starter, reset, base, state, application;
 ._helper_157uk_1 {
   display: flex;
   flex-direction: row;

package/dist/{Icon-B6HmlQiR-BxQkO3X5.js → Icon-D8SPKeO4.js}

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
 
-import './Icon-B6HmlQiR.css';const icon = "_icon_ju3rs_2";
+import './Icon.css';const icon = "_icon_ju3rs_2";
 const small = "_small_ju3rs_33";
 const medium = "_medium_ju3rs_36";
 const large = "_large_ju3rs_39";
@@ -53,4 +53,4 @@ const Icon = forwardRef((props, ref) => {
 Icon.displayName = "Icon";
 
 export { Icon as I };
-//# sourceMappingURL=Icon-B6HmlQiR-BxQkO3X5.js.map
+//# sourceMappingURL=Icon-D8SPKeO4.js.map

package/dist/Icon-D8SPKeO4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon-D8SPKeO4.js","sources":["../src/components/Icon/Icon.tsx"],"sourcesContent":["import { LayoutUtilProps, Size, Svg } from \"../../types\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport cx from \"classnames\";\n\n/**\n * Props for the Icon component\n * @extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type IconProps = Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * Apply a specific color to the icon.\n     */\n    color?: string;\n\n    /**\n     * The size of the icon.\n     * @default medium\n     */\n    size?: Extract<Size, \"small\" | \"medium\" | \"large\" | \"xlarge\">;\n\n    /**\n     * Assets passed in using svgr.\n     */\n    svg: Svg;\n\n    /**\n     * Whether the icon should inherit the color from its parent element.\n     * @default false\n     */\n    inherit?: boolean;\n  };\n\n/**\n * Icon component for displaying SVG icons with consistent styling and sizing.\n *\n * Features:\n * - SVG icon rendering with consistent styling\n * - Four predefined sizes: small, medium, large, xlarge\n * - Custom color support with optional inheritance\n * - Layout utilities for positioning and spacing\n * - Support for all standard span element props\n * - Flexible color inheritance and custom color options\n * - Consistent sizing across different icon sets\n *\n * @example\n * import Close from \"@servicetitan/anvil2/assets/icons/material/round/close.svg\";\n *\n * <Icon svg={Close} size=\"medium\" />\n *\n * @example\n * import Info from \"@servicetitan/anvil2/assets/icons/material/round/info.svg\";\n *\n * <Icon\n *   svg={Info}\n *   size=\"large\"\n *   color=\"#007bff\"\n *   inherit={false}\n * />\n */\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const {\n    size = \"medium\",\n    className,\n    svg: Svg,\n    inherit,\n    style,\n    color,\n    ...rest\n  } = componentProps;\n\n  const iconClassNames = cx([styles[\"icon\"]], className, {\n    [styles[\"small\"]]: size === \"small\",\n    [styles[\"medium\"]]: size === \"medium\",\n    [styles[\"large\"]]: size === \"large\",\n    [styles[\"xlarge\"]]: size === \"xlarge\",\n  });\n\n  const styleCombined = {\n    color: color ? color : inherit ? \"inherit\" : undefined,\n    ...style,\n    ...layoutStyles,\n  };\n\n  return (\n    <span\n      className={iconClassNames}\n      data-anv=\"icon\"\n      style={styleCombined}\n      ref={ref}\n      {...rest}\n    >\n      <Svg />\n    </span>\n  );\n});\n\nIcon.displayName = \"Icon\";\n"],"names":["Svg"],"mappings":";;;;;;;;;;;;;;;;;;AA+DO,MAAM,IAAO,GAAA,UAAA,CAAuC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACzE,EAAA,MAAM,EAAE,YAAA,EAAc,cAAe,EAAA,GAAI,mBAAmB,KAAK,CAAA;AACjE,EAAM,MAAA;AAAA,IACJ,IAAO,GAAA,QAAA;AAAA,IACP,SAAA;AAAA,IACA,GAAKA,EAAAA,IAAAA;AAAA,IACL,OAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,cAAA;AAEJ,EAAA,MAAM,iBAAiB,EAAG,CAAA,CAAC,OAAO,MAAM,CAAC,GAAG,SAAW,EAAA;AAAA,IACrD,CAAC,MAAA,CAAO,OAAO,CAAC,GAAG,IAAS,KAAA,OAAA;AAAA,IAC5B,CAAC,MAAA,CAAO,QAAQ,CAAC,GAAG,IAAS,KAAA,QAAA;AAAA,IAC7B,CAAC,MAAA,CAAO,OAAO,CAAC,GAAG,IAAS,KAAA,OAAA;AAAA,IAC5B,CAAC,MAAA,CAAO,QAAQ,CAAC,GAAG,IAAS,KAAA;AAAA,GAC9B,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,KAAO,EAAA,KAAA,GAAQ,KAAQ,GAAA,OAAA,GAAU,SAAY,GAAA,MAAA;AAAA,IAC7C,GAAG,KAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,cAAA;AAAA,MACX,UAAS,EAAA,MAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAACA,MAAA,EAAI;AAAA;AAAA,GACP;AAEJ,CAAC;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/dist/{Icon-B6HmlQiR.css → Icon.css}

@@ -1,5 +1,4 @@
 @layer starter, reset, base, state, application;
-@layer starter, reset, base, state, application;
 @layer reset {
   ._icon_ju3rs_2 {
     all: unset;

package/dist/Icon.js

@@ -1,2 +1,2 @@
-export { I as Icon, I as default } from './Icon-BgKqBmlj.js';
+export { I as Icon, I as default } from './Icon-D8SPKeO4.js';
 //# sourceMappingURL=Icon.js.map