@servicetitan/anvil2 2.9.2 → 3.0.1

package/dist/FieldMessage-DzxfodaI.js

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { c as cx } from './index-De1g9FRV.js';
+import { S as StatusIcon } from './StatusIcon-BwULopyH.js';
+
+import './FieldMessage.css';const messages = "_messages_1jce7_1";
+const styles = {
+	messages: messages,
+	"error-container": "_error-container_1jce7_24",
+	"warning-container": "_warning-container_1jce7_31",
+	"status-icon": "_status-icon_1jce7_38"
+};
+
+function normalizeMessages(val) {
+  if (val === void 0) return [];
+  if (Array.isArray(val)) return val;
+  return [val];
+}
+const FieldMessage = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      hint,
+      description,
+      error,
+      warning,
+      errorAriaLive: _errorAriaLive,
+      errorMessage,
+      className,
+      ...rest
+    } = props;
+    const errorMessages = normalizeMessages(error);
+    const warningMessages = normalizeMessages(warning);
+    const allErrors = errorMessages.length === 0 && errorMessage ? [errorMessage] : errorMessages;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        className: cx(styles["messages"], className),
+        ref,
+        id,
+        children: [
+          hint ?? null,
+          description ? /* @__PURE__ */ jsx("span", { children: description }) : null,
+          allErrors.map((msg, index) => /* @__PURE__ */ jsxs("div", { className: styles["error-container"], children: [
+            /* @__PURE__ */ jsx(
+              StatusIcon,
+              {
+                size: "small",
+                variant: "error",
+                rootProps: {
+                  "aria-hidden": true,
+                  className: styles["status-icon"]
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: styles["error-message"], "aria-live": "assertive", children: msg })
+          ] }, index)),
+          warningMessages.map((msg, index) => /* @__PURE__ */ jsxs("div", { className: styles["warning-container"], children: [
+            /* @__PURE__ */ jsx(
+              StatusIcon,
+              {
+                size: "small",
+                variant: "warning",
+                rootProps: {
+                  "aria-hidden": true,
+                  className: styles["status-icon"]
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: styles["warning-message"], "aria-live": "polite", children: msg })
+          ] }, index))
+        ]
+      }
+    );
+  }
+);
+FieldMessage.displayName = "FieldMessage";
+
+export { FieldMessage as F };
+//# sourceMappingURL=FieldMessage-DzxfodaI.js.map

package/dist/FieldMessage-DzxfodaI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage-DzxfodaI.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 { StatusIcon } from \"../../internal/components/StatusIcon\";\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. Always visible regardless of error or warning state.\n   */\n  hint?: ReactElement | string;\n  /**\n   * Description text or element to display below the hint.\n   */\n  description?: ReactElement | string;\n  /**\n   * Error message(s) to display. Supports a single string, an array of strings,\n   * or a ReactElement (deprecated).\n   * All error messages use `aria-live=\"assertive\"`.\n   */\n  error?: string | string[] | ReactElement;\n  /**\n   * Warning message(s) to display. Supports a single string, an array of strings,\n   * or a ReactElement (deprecated).\n   * All warning messages use `aria-live=\"polite\"`.\n   */\n  warning?: string | string[] | ReactElement;\n  /**\n   * Error message or element to display when there's an error.\n   * @deprecated Use the `error` prop instead.\n   */\n  errorMessage?: ReactElement | string;\n  /**\n   * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n   */\n  errorAriaLive?: AriaAttributes[\"aria-live\"];\n};\n\n/** Normalizes a string | string[] | ReactElement into a renderable array. */\nfunction normalizeMessages(\n  val: string | string[] | ReactElement | undefined,\n): (string | ReactElement)[] {\n  if (val === undefined) return [];\n  if (Array.isArray(val)) return val;\n  return [val];\n}\n\n/**\n * FieldMessage component for displaying hints, descriptions, error messages, and warning messages for form fields.\n *\n * Features:\n * - Displays hint text that remains visible regardless of error or warning state\n * - Shows one or more error messages with error icon (aria-live=\"assertive\")\n * - Shows one or more warning messages with warning icon (aria-live=\"polite\")\n * - Supports both string and React element content\n * - Optional description text for additional context\n * - Accessible with proper ARIA attributes\n * - Visual error and warning indicators with status icons\n *\n * @example\n * <FieldMessage\n *   hint=\"Enter your email address\"\n *   description=\"We'll use this to send you updates\"\n *   error=\"Please enter a valid email address\"\n *   warning=\"This email is associated with another account\"\n * />\n */\nexport const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(\n  (props, ref) => {\n    const {\n      id,\n      hint,\n      description,\n      error,\n      warning,\n      errorAriaLive: _errorAriaLive,\n      errorMessage,\n      className,\n      ...rest\n    } = props;\n\n    const errorMessages = normalizeMessages(error);\n    const warningMessages = normalizeMessages(warning);\n\n    // Backward compatibility: if deprecated errorMessage is provided and new error prop is not\n    const allErrors =\n      errorMessages.length === 0 && errorMessage\n        ? [errorMessage]\n        : errorMessages;\n\n    return (\n      <div\n        {...rest}\n        className={cx(styles[\"messages\"], className)}\n        ref={ref}\n        id={id}\n      >\n        {hint ?? null}\n        {description ? <span>{description}</span> : null}\n        {allErrors.map((msg, index) => (\n          <div key={index} className={styles[\"error-container\"]}>\n            <StatusIcon\n              size=\"small\"\n              variant=\"error\"\n              rootProps={{\n                \"aria-hidden\": true,\n                className: styles[\"status-icon\"],\n              }}\n            />\n            <span className={styles[\"error-message\"]} aria-live=\"assertive\">\n              {msg}\n            </span>\n          </div>\n        ))}\n        {warningMessages.map((msg, index) => (\n          <div key={index} className={styles[\"warning-container\"]}>\n            <StatusIcon\n              size=\"small\"\n              variant=\"warning\"\n              rootProps={{\n                \"aria-hidden\": true,\n                className: styles[\"status-icon\"],\n              }}\n            />\n            <span className={styles[\"warning-message\"]} aria-live=\"polite\">\n              {msg}\n            </span>\n          </div>\n        ))}\n      </div>\n    );\n  },\n);\n\nFieldMessage.displayName = \"FieldMessage\";\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmDA,SAAS,kBACP,GAAA,EAC2B;AAC3B,EAAA,IAAI,GAAA,KAAQ,MAAA,EAAW,OAAO,EAAC;AAC/B,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG,OAAO,GAAA;AAC/B,EAAA,OAAO,CAAC,GAAG,CAAA;AACb;AAsBO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA;AAAA,MACA,aAAA,EAAe,cAAA;AAAA,MACf,YAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,aAAA,GAAgB,kBAAkB,KAAK,CAAA;AAC7C,IAAA,MAAM,eAAA,GAAkB,kBAAkB,OAAO,CAAA;AAGjD,IAAA,MAAM,YACJ,aAAA,CAAc,MAAA,KAAW,KAAK,YAAA,GAC1B,CAAC,YAAY,CAAA,GACb,aAAA;AAEN,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,UAAU,GAAG,SAAS,CAAA;AAAA,QAC3C,GAAA;AAAA,QACA,EAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,IAAQ,IAAA;AAAA,UACR,WAAA,mBAAc,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,EAAY,CAAA,GAAU,IAAA;AAAA,UAC3C,SAAA,CAAU,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,0BAClB,KAAA,EAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,iBAAiB,CAAA,EAClD,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,OAAA;AAAA,gBACL,OAAA,EAAQ,OAAA;AAAA,gBACR,SAAA,EAAW;AAAA,kBACT,aAAA,EAAe,IAAA;AAAA,kBACf,SAAA,EAAW,OAAO,aAAa;AAAA;AACjC;AAAA,aACF;AAAA,4BACA,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,eAAe,CAAA,EAAG,WAAA,EAAU,aACjD,QAAA,EAAA,GAAA,EACH;AAAA,WAAA,EAAA,EAXQ,KAYV,CACD,CAAA;AAAA,UACA,eAAA,CAAgB,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,0BACxB,KAAA,EAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,mBAAmB,CAAA,EACpD,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,OAAA;AAAA,gBACL,OAAA,EAAQ,SAAA;AAAA,gBACR,SAAA,EAAW;AAAA,kBACT,aAAA,EAAe,IAAA;AAAA,kBACf,SAAA,EAAW,OAAO,aAAa;AAAA;AACjC;AAAA,aACF;AAAA,4BACA,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,iBAAiB,CAAA,EAAG,WAAA,EAAU,UACnD,QAAA,EAAA,GAAA,EACH;AAAA,WAAA,EAAA,EAXQ,KAYV,CACD;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}

package/dist/FieldMessage.css

@@ -1,12 +1,12 @@
-@layer starter, reset, base, state, application;
-
-._messages_1opif_1 {
-  --a2-mod-field-message-error-color: var(--foreground-color-danger, #e13212);
-  --a2-mod-field-message-warning-color: var(--foreground-color-subdued, #737475);
+.anvil2 {._messages_1jce7_1 {
+  --a2-mod-field-message-error-foreground-color: var(--a2-field-message-error-foreground-color, var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
+  --a2-mod-field-message-warning-foreground-color: var(--a2-field-message-warning-foreground-color, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+  --a2-mod-field-message-foreground-color: var(--a2-field-message-foreground-color, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+  --a2-mod-icon-padding-block-start: var(--a2-size-quarter, 0.0625rem);
   all: unset;
-  font-family: var(--font-family-base, "Nunito Sans", sans-serif);
+  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
-  color: var(--foreground-color, #141414);
+  color: inherit;
   margin: 0;
   padding: 0;
   border-style: none;
@@ -14,31 +14,22 @@
   border-color: transparent;
   box-sizing: border-box;
   display: flex;
+  color: var(--a2-mod-field-message-foreground-color);
+  flex: 1;
   flex-direction: column;
-  gap: 0.25rem;
-  color: var(--foreground-color-subdued, #737475);
-  font-size: 0.875rem;
-}
-
-._error-container_1opif_21 {
-  display: flex;
-  gap: 0.25rem;
+  font-size: var(--a2-font-size-300, 0.875rem);
+  gap: var(--a2-size-1, 0.25rem);
+}._error-container_1jce7_24 {
   align-items: flex-start;
-  color: var(--a2-mod-field-message-error-color);
-}
-
-._warning-container_1opif_28 {
+  color: var(--a2-mod-field-message-error-foreground-color);
   display: flex;
-  gap: 0.25rem;
+  gap: var(--a2-size-1, 0.25rem);
+}._warning-container_1jce7_31 {
   align-items: flex-start;
-  color: var(--a2-mod-field-message-warning-color);
+  color: var(--a2-mod-field-message-warning-foreground-color);
+  display: flex;
+  gap: var(--a2-size-1, 0.25rem);
+}._status-icon_1jce7_38 {
+  padding-top: var(--a2-size-quarter, 0.0625rem);
 }
-
-._status-icon_1opif_35 {
-  padding-top: 0.0625rem;
-}@layer starter, reset, base, state, application;
-._status-icon_pq77z_1 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
 }

package/dist/FieldMessage.js

@@ -1,3 +1,3 @@
-export { F as FieldMessage, F as default } from './FieldMessage-COHqUdj5.js';
+export { F as FieldMessage, F as default } from './FieldMessage-DzxfodaI.js';
 export { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
 //# sourceMappingURL=FieldMessage.js.map