@servicetitan/anvil2 1.29.0 → 1.31.0

package/dist/toast-KF3GWYbk.js

@@ -0,0 +1,96 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { l as Toaster$1, t as toast$1 } from './ProgressBar-YrCJtlvK-BlhqSUr-.js';
+
+const SHADOW_HOST_DATA_ATTRS = "[data-mfe-portal-name], [data-mfe-name]";
+const Toaster = forwardRef(
+  ({ onToastEvent, ...props }, ref) => {
+    const { id } = props;
+    const toasterRef = useRef(null);
+    const mergedToasterRef = useMergeRefs([toasterRef, ref]);
+    const [shouldDisableEvents, setShouldDisableEvents] = useState(false);
+    useEffect(() => {
+      const toasters = document.querySelectorAll("[data-anv='toaster']");
+      const shadowToasters = toasterRef.current?.getRootNode()?.querySelectorAll("[data-anv='toaster']") || [];
+      if (toasters.length && id !== toasters[0].getAttribute("data-toaster-id")) {
+        setShouldDisableEvents(true);
+      } else if (
+        // Toaster(s) exist in the shadow dom, bail out if this toaster is not the first one
+        shadowToasters.length && id !== shadowToasters[0].getAttribute("data-toaster-id")
+      ) {
+        setShouldDisableEvents(true);
+      }
+    }, [id]);
+    const a1ToastGroupObserver = useRef(null);
+    const a1ToastGroupObserverConnected = useRef(false);
+    const [a1ToastGroups, setA1ToastGroups] = useState([]);
+    const [toastCount, setToastCount] = useState(0);
+    const handleToastEvent = (event) => {
+      const { toastCount: newToastCount } = event;
+      setToastCount(newToastCount);
+      onToastEvent?.(event);
+    };
+    const updateA1ToastGroups = () => {
+      const mfeRoots = document.querySelectorAll(SHADOW_HOST_DATA_ATTRS);
+      const a1ToastGroupsLocal = [
+        ...document.getElementsByClassName("ToastGroup")
+      ];
+      if (mfeRoots.length > 0) {
+        mfeRoots.forEach((el) => {
+          setTimeout(() => {
+            if (el.shadowRoot) {
+              a1ToastGroupsLocal.push(
+                ...el.shadowRoot.querySelectorAll(".ToastGroup")
+              );
+            }
+            setA1ToastGroups(a1ToastGroupsLocal);
+          });
+        });
+      } else {
+        setA1ToastGroups(a1ToastGroupsLocal);
+      }
+    };
+    useEffect(() => {
+      a1ToastGroupObserver.current = new MutationObserver(updateA1ToastGroups);
+    }, []);
+    useEffect(() => {
+      if (a1ToastGroupObserver.current !== null) {
+        if (toastCount > 0 && a1ToastGroupObserverConnected.current === false) {
+          a1ToastGroupObserver.current.observe(document.body, {
+            childList: true,
+            subtree: true
+          });
+          a1ToastGroupObserverConnected.current = true;
+          updateA1ToastGroups();
+        } else if (toastCount === 0 && a1ToastGroupObserverConnected.current === true) {
+          a1ToastGroupObserver.current.disconnect();
+          a1ToastGroupObserverConnected.current = false;
+        }
+      }
+    }, [toastCount]);
+    useEffect(() => {
+      if (a1ToastGroups && a1ToastGroups.length > 0) {
+        const toasterHeight = toasterRef.current?.firstElementChild?.getBoundingClientRect().height;
+        a1ToastGroups.forEach((group) => {
+          group.style.top = toastCount === 0 ? "16px" : `calc(${toasterHeight}px + 2.5rem)`;
+        });
+      }
+    }, [a1ToastGroups.length, toastCount]);
+    return /* @__PURE__ */ jsx(
+      Toaster$1,
+      {
+        ...props,
+        onToastEvent: handleToastEvent,
+        disableEvents: shouldDisableEvents,
+        ref: mergedToasterRef
+      }
+    );
+  }
+);
+Toaster.displayName = "Toaster";
+
+const toast = toast$1;
+
+export { Toaster as T, toast as t };
+//# sourceMappingURL=toast-KF3GWYbk.js.map

package/dist/toast-KF3GWYbk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-KF3GWYbk.js","sources":["../src/components/Toast/Toaster.tsx","../src/components/Toast/toast.ts"],"sourcesContent":["import {\n  ToasterProps as HammerToasterProps,\n  Toaster as HammerToaster,\n  useMergeRefs,\n  ToastEventType,\n} from \"@servicetitan/hammer-react\";\nimport { Ref, forwardRef, useEffect, useRef, useState } from \"react\";\n\nconst SHADOW_HOST_DATA_ATTRS = \"[data-mfe-portal-name], [data-mfe-name]\";\n\nexport type ToasterProps = Omit<\n  HammerToasterProps,\n  \"disableEvents\" | \"duration\"\n> & {\n  /**\n   * Timeout, in ms, before toasts auto-closes. If set to false, toasts will not auto-close.\n   * @deprecated The monolith toaster controls the duration of toasts. This prop should not be used in other cases.\n   * @default false\n   */\n  duration?: number | false;\n};\n\nexport const Toaster = forwardRef(\n  (\n    { onToastEvent, ...props }: HammerToasterProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const { id } = props;\n\n    const toasterRef = useRef<HTMLDivElement>(null);\n    const mergedToasterRef = useMergeRefs([toasterRef, ref]);\n\n    const [shouldDisableEvents, setShouldDisableEvents] =\n      useState<boolean>(false);\n\n    useEffect(() => {\n      const toasters = document.querySelectorAll(\"[data-anv='toaster']\");\n      const shadowToasters =\n        (\n          toasterRef.current?.getRootNode() as Document | ShadowRoot\n        )?.querySelectorAll(\"[data-anv='toaster']\") || [];\n\n      // Toaster(s) exist in the document, bail out if this toaster is not the first one\n      if (\n        toasters.length &&\n        id !== toasters[0].getAttribute(\"data-toaster-id\")\n      ) {\n        setShouldDisableEvents(true);\n      } else if (\n        // Toaster(s) exist in the shadow dom, bail out if this toaster is not the first one\n        shadowToasters.length &&\n        id !== shadowToasters[0].getAttribute(\"data-toaster-id\")\n      ) {\n        setShouldDisableEvents(true);\n      }\n    }, [id]);\n\n    const a1ToastGroupObserver = useRef<MutationObserver | null>(null);\n    const a1ToastGroupObserverConnected = useRef<boolean>(false);\n    const [a1ToastGroups, setA1ToastGroups] = useState<Element[]>([]);\n    const [toastCount, setToastCount] = useState<number>(0);\n\n    const handleToastEvent = (event: ToastEventType) => {\n      const { toastCount: newToastCount } = event;\n      setToastCount(newToastCount);\n      onToastEvent?.(event);\n    };\n\n    const updateA1ToastGroups = () => {\n      const mfeRoots = document.querySelectorAll(SHADOW_HOST_DATA_ATTRS);\n      const a1ToastGroupsLocal = [\n        ...document.getElementsByClassName(\"ToastGroup\"),\n      ];\n\n      if (mfeRoots.length > 0) {\n        mfeRoots.forEach((el) => {\n          setTimeout(() => {\n            if (el.shadowRoot) {\n              a1ToastGroupsLocal.push(\n                ...el.shadowRoot.querySelectorAll(\".ToastGroup\"),\n              );\n            }\n            setA1ToastGroups(a1ToastGroupsLocal);\n          });\n        });\n      } else {\n        setA1ToastGroups(a1ToastGroupsLocal);\n      }\n    };\n\n    useEffect(() => {\n      // set mutation observer for a1 toasts after initial render\n      a1ToastGroupObserver.current = new MutationObserver(updateA1ToastGroups);\n    }, []);\n\n    /*\n      Listen for any new A1 Toast Groups to adjust styles and\n      prevent overlapping.\n     */\n    useEffect(() => {\n      if (a1ToastGroupObserver.current !== null) {\n        if (toastCount > 0 && a1ToastGroupObserverConnected.current === false) {\n          // listen for any new a1 toasts\n          a1ToastGroupObserver.current.observe(document.body, {\n            childList: true,\n            subtree: true,\n          });\n          a1ToastGroupObserverConnected.current = true;\n\n          // account for already existing a1 toasts\n          updateA1ToastGroups();\n        } else if (\n          toastCount === 0 &&\n          a1ToastGroupObserverConnected.current === true\n        ) {\n          a1ToastGroupObserver.current.disconnect();\n          a1ToastGroupObserverConnected.current = false;\n        }\n      }\n    }, [toastCount]);\n\n    useEffect(() => {\n      if (a1ToastGroups && a1ToastGroups.length > 0) {\n        const toasterHeight =\n          toasterRef.current?.firstElementChild?.getBoundingClientRect()\n            .height as number;\n        a1ToastGroups.forEach((group) => {\n          (group as HTMLDivElement).style.top =\n            toastCount === 0 ? \"16px\" : `calc(${toasterHeight}px + 2.5rem)`;\n        });\n      }\n      // eslint-disable-next-line\n    }, [a1ToastGroups.length, toastCount]);\n\n    return (\n      <HammerToaster\n        {...props}\n        onToastEvent={handleToastEvent}\n        disableEvents={shouldDisableEvents}\n        ref={mergedToasterRef}\n      />\n    );\n  },\n);\n\nToaster.displayName = \"Toaster\";\n","import {\n  toast as coreToast,\n  toastProps as coreToastProps,\n} from \"@servicetitan/hammer-react\";\n\nexport type toastProps = coreToastProps;\n\nexport const toast = coreToast;\n"],"names":["HammerToaster","coreToast"],"mappings":";;;;;AAQA,MAAM,sBAAyB,GAAA,yCAAA;AAcxB,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CACE,EAAE,YAAA,EAAc,GAAG,KAAA,IACnB,GACG,KAAA;AACH,IAAM,MAAA,EAAE,IAAO,GAAA,KAAA;AAEf,IAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,IAAA,MAAM,gBAAmB,GAAA,YAAA,CAAa,CAAC,UAAA,EAAY,GAAG,CAAC,CAAA;AAEvD,IAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAChD,SAAkB,KAAK,CAAA;AAEzB,IAAA,SAAA,CAAU,MAAM;AACd,MAAM,MAAA,QAAA,GAAW,QAAS,CAAA,gBAAA,CAAiB,sBAAsB,CAAA;AACjE,MAAM,MAAA,cAAA,GAEF,WAAW,OAAS,EAAA,WAAA,IACnB,gBAAiB,CAAA,sBAAsB,KAAK,EAAC;AAGlD,MACE,IAAA,QAAA,CAAS,UACT,EAAO,KAAA,QAAA,CAAS,CAAC,CAAE,CAAA,YAAA,CAAa,iBAAiB,CACjD,EAAA;AACA,QAAA,sBAAA,CAAuB,IAAI,CAAA;AAAA,OAC7B,MAAA;AAAA;AAAA,QAEE,eAAe,MACf,IAAA,EAAA,KAAO,eAAe,CAAC,CAAA,CAAE,aAAa,iBAAiB;AAAA,QACvD;AACA,QAAA,sBAAA,CAAuB,IAAI,CAAA;AAAA;AAC7B,KACF,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,IAAM,MAAA,oBAAA,GAAuB,OAAgC,IAAI,CAAA;AACjE,IAAM,MAAA,6BAAA,GAAgC,OAAgB,KAAK,CAAA;AAC3D,IAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA,CAAoB,EAAE,CAAA;AAChE,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,CAAC,CAAA;AAEtD,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAM,MAAA,EAAE,UAAY,EAAA,aAAA,EAAkB,GAAA,KAAA;AACtC,MAAA,aAAA,CAAc,aAAa,CAAA;AAC3B,MAAA,YAAA,GAAe,KAAK,CAAA;AAAA,KACtB;AAEA,IAAA,MAAM,sBAAsB,MAAM;AAChC,MAAM,MAAA,QAAA,GAAW,QAAS,CAAA,gBAAA,CAAiB,sBAAsB,CAAA;AACjE,MAAA,MAAM,kBAAqB,GAAA;AAAA,QACzB,GAAG,QAAS,CAAA,sBAAA,CAAuB,YAAY;AAAA,OACjD;AAEA,MAAI,IAAA,QAAA,CAAS,SAAS,CAAG,EAAA;AACvB,QAAS,QAAA,CAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACvB,UAAA,UAAA,CAAW,MAAM;AACf,YAAA,IAAI,GAAG,UAAY,EAAA;AACjB,cAAmB,kBAAA,CAAA,IAAA;AAAA,gBACjB,GAAG,EAAA,CAAG,UAAW,CAAA,gBAAA,CAAiB,aAAa;AAAA,eACjD;AAAA;AAEF,YAAA,gBAAA,CAAiB,kBAAkB,CAAA;AAAA,WACpC,CAAA;AAAA,SACF,CAAA;AAAA,OACI,MAAA;AACL,QAAA,gBAAA,CAAiB,kBAAkB,CAAA;AAAA;AACrC,KACF;AAEA,IAAA,SAAA,CAAU,MAAM;AAEd,MAAqB,oBAAA,CAAA,OAAA,GAAU,IAAI,gBAAA,CAAiB,mBAAmB,CAAA;AAAA,KACzE,EAAG,EAAE,CAAA;AAML,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,oBAAA,CAAqB,YAAY,IAAM,EAAA;AACzC,QAAA,IAAI,UAAa,GAAA,CAAA,IAAK,6BAA8B,CAAA,OAAA,KAAY,KAAO,EAAA;AAErE,UAAqB,oBAAA,CAAA,OAAA,CAAQ,OAAQ,CAAA,QAAA,CAAS,IAAM,EAAA;AAAA,YAClD,SAAW,EAAA,IAAA;AAAA,YACX,OAAS,EAAA;AAAA,WACV,CAAA;AACD,UAAA,6BAAA,CAA8B,OAAU,GAAA,IAAA;AAGxC,UAAoB,mBAAA,EAAA;AAAA,SAEpB,MAAA,IAAA,UAAA,KAAe,CACf,IAAA,6BAAA,CAA8B,YAAY,IAC1C,EAAA;AACA,UAAA,oBAAA,CAAqB,QAAQ,UAAW,EAAA;AACxC,UAAA,6BAAA,CAA8B,OAAU,GAAA,KAAA;AAAA;AAC1C;AACF,KACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,aAAA,IAAiB,aAAc,CAAA,MAAA,GAAS,CAAG,EAAA;AAC7C,QAAA,MAAM,aACJ,GAAA,UAAA,CAAW,OAAS,EAAA,iBAAA,EAAmB,uBACpC,CAAA,MAAA;AACL,QAAc,aAAA,CAAA,OAAA,CAAQ,CAAC,KAAU,KAAA;AAC/B,UAAC,MAAyB,KAAM,CAAA,GAAA,GAC9B,eAAe,CAAI,GAAA,MAAA,GAAS,QAAQ,aAAa,CAAA,YAAA,CAAA;AAAA,SACpD,CAAA;AAAA;AACH,KAEC,EAAA,CAAC,aAAc,CAAA,MAAA,EAAQ,UAAU,CAAC,CAAA;AAErC,IACE,uBAAA,GAAA;AAAA,MAACA,SAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,YAAc,EAAA,gBAAA;AAAA,QACd,aAAe,EAAA,mBAAA;AAAA,QACf,GAAK,EAAA;AAAA;AAAA,KACP;AAAA;AAGN;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;AC1If,MAAM,KAAQ,GAAAC;;;;"}

package/dist/token/core/css-utils/border.css

@@ -5,6 +5,7 @@
 .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
 .border-color-strong {border-color: var(--border-color-strong, #444445)}
 .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+.border-color-success {border-color: var(--border-color-success, #007A4D)}
 .border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
 .border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
 .border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
@@ -21,6 +22,7 @@
   .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
   .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
   .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+  .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
 }
     
 @layer application {
@@ -29,6 +31,7 @@
   .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
   .border-color-strong {border-color: var(--border-color-strong, #444445)}
   .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+  .border-color-success {border-color: var(--border-color-success, #007A4D)}
   .border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
   .border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
   .border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
@@ -45,5 +48,6 @@
     .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
     .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
     .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+    .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
   }
 }

package/dist/token/core/css-utils/color.css

@@ -27,6 +27,8 @@
 .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
 .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
 .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
+.bg-success-default {background-color: var(--background-color-success, #007A4D)}
+.bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
 .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
 .border-color-danger {border-color: var(--border-color-danger, #e13212)}
 .border-color-default {border-color: var(--border-color, #949596)}
@@ -36,6 +38,7 @@
 .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
 .border-color-strong {border-color: var(--border-color-strong, #444445)}
 .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+.border-color-success {border-color: var(--border-color-success, #007A4D)}
 .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
 .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
 .c-danger {color: var(--foreground-color-danger, #e13212)}
@@ -82,6 +85,8 @@
   .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
   .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
   .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
+  .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
+  .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
   .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
   .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
   .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
@@ -91,6 +96,7 @@
   .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
   .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
   .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+  .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
   .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
   .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
   .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
@@ -138,6 +144,8 @@
   .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
   .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
   .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
+  .bg-success-default {background-color: var(--background-color-success, #007A4D)}
+  .bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
   .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
   .border-color-danger {border-color: var(--border-color-danger, #e13212)}
   .border-color-default {border-color: var(--border-color, #949596)}
@@ -147,6 +155,7 @@
   .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
   .border-color-strong {border-color: var(--border-color-strong, #444445)}
   .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+  .border-color-success {border-color: var(--border-color-success, #007A4D)}
   .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
   .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
   .c-danger {color: var(--foreground-color-danger, #e13212)}
@@ -193,6 +202,8 @@
     .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
     .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
     .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
+    .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
+    .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
     .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
     .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
     .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
@@ -202,6 +213,7 @@
     .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
     .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
     .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+    .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
     .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
     .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
     .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}

package/dist/token/core/css-utils/utils.css

@@ -5,6 +5,7 @@
 .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
 .border-color-strong {border-color: var(--border-color-strong, #444445)}
 .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+.border-color-success {border-color: var(--border-color-success, #007A4D)}
 .border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
 .border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
 .border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
@@ -301,6 +302,8 @@
 .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
 .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
 .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
+.bg-success-default {background-color: var(--background-color-success, #007A4D)}
+.bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
 .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
 .border-color-danger {border-color: var(--border-color-danger, #e13212)}
 .border-color-default {border-color: var(--border-color, #949596)}
@@ -310,6 +313,7 @@
 .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
 .border-color-strong {border-color: var(--border-color-strong, #444445)}
 .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+.border-color-success {border-color: var(--border-color-success, #007A4D)}
 .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
 .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
 .c-danger {color: var(--foreground-color-danger, #e13212)}
@@ -356,6 +360,8 @@
   .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
   .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
   .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
+  .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
+  .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
   .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
   .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
   .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
@@ -365,6 +371,7 @@
   .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
   .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
   .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+  .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
   .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
   .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
   .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
@@ -390,6 +397,7 @@
     .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
     .border-color-strong {border-color: var(--border-color-strong, #444445)}
     .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+    .border-color-success {border-color: var(--border-color-success, #007A4D)}
     .border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
     .border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
     .border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
@@ -686,6 +694,8 @@
     .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
     .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
     .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
+    .bg-success-default {background-color: var(--background-color-success, #007A4D)}
+    .bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
     .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
     .border-color-danger {border-color: var(--border-color-danger, #e13212)}
     .border-color-default {border-color: var(--border-color, #949596)}
@@ -695,6 +705,7 @@
     .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
     .border-color-strong {border-color: var(--border-color-strong, #444445)}
     .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+    .border-color-success {border-color: var(--border-color-success, #007A4D)}
     .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
     .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
     .c-danger {color: var(--foreground-color-danger, #e13212)}
@@ -741,6 +752,8 @@
       .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
       .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
       .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
+      .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
+      .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
       .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
       .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
       .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
@@ -750,6 +763,7 @@
       .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
       .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
       .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+      .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
       .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
       .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
       .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}

package/dist/token/core/raw.js

@@ -41,6 +41,8 @@ export const light = {
 	BackgroundColorStrongest: "#bcbcbd",
 	BackgroundColorPrimary: "#0265DC",
 	BackgroundColorPrimarySubdued: "#E0F2FF",
+	BackgroundColorSuccess: "#007A4D",
+	BackgroundColorSuccessSubdued: "#CEF8E0",
 	BackgroundColorDanger: "#e13212",
 	BackgroundColorDangerSubdued: "#ffece9",
 	BackgroundColorWarning: "#ffbe00",
@@ -51,6 +53,7 @@ export const light = {
 	BorderColorSubdued: "#dfe0e1",
 	BorderColorStrong: "#444445",
 	BorderColorPrimary: "#0265DC",
+	BorderColorSuccess: "#007A4D",
 	BorderColorDanger: "#e13212",
 	FocusRingColor: "#0265DC",
 	FocusRingColorDanger: "#e13212",
@@ -92,6 +95,8 @@ export const dark = {
 	BackgroundColorStrongest: "#737475",
 	BackgroundColorPrimary: "#78BBFA",
 	BackgroundColorPrimarySubdued: "#78BBFA33",
+	BackgroundColorSuccess: "#49CC93",
+	BackgroundColorSuccessSubdued: "#49CC9333",
 	BackgroundColorDanger: "#ff745f",
 	BackgroundColorDangerSubdued: "#ff745f33",
 	BackgroundColorWarning: "#ffe278",
@@ -102,6 +107,7 @@ export const dark = {
 	BorderColorSubdued: "#444445",
 	BorderColorStrong: "#dfe0e1",
 	BorderColorPrimary: "#78BBFA",
+	BorderColorSuccess: "#49CC93",
 	BorderColorDanger: "#ff745f",
 	FocusRingColor: "#78BBFA",
 	FocusRingColorDanger: "#ff745f",

package/dist/token/core/semantic-variables.scss

@@ -5,6 +5,8 @@ $light: (
   background-color-strongest: #bcbcbd,
   background-color-primary: #0265DC,
   background-color-primary-subdued: #E0F2FF,
+  background-color-success: #007A4D,
+  background-color-success-subdued: #CEF8E0,
   background-color-danger: #e13212,
   background-color-danger-subdued: #ffece9,
   background-color-warning: #ffbe00,
@@ -15,6 +17,7 @@ $light: (
   border-color-subdued: #dfe0e1,
   border-color-strong: #444445,
   border-color-primary: #0265DC,
+  border-color-success: #007A4D,
   border-color-danger: #e13212,
   focus-ring-color: #0265DC,
   focus-ring-color-danger: #e13212,
@@ -56,6 +59,8 @@ $dark: (
   background-color-strongest: #737475,
   background-color-primary: #78BBFA,
   background-color-primary-subdued: #78BBFA33,
+  background-color-success: #49CC93,
+  background-color-success-subdued: #49CC9333,
   background-color-danger: #ff745f,
   background-color-danger-subdued: #ff745f33,
   background-color-warning: #ffe278,
@@ -66,6 +71,7 @@ $dark: (
   border-color-subdued: #444445,
   border-color-strong: #dfe0e1,
   border-color-primary: #78BBFA,
+  border-color-success: #49CC93,
   border-color-danger: #ff745f,
   focus-ring-color: #78BBFA,
   focus-ring-color-danger: #ff745f,

package/dist/token/core/semantic.js

@@ -58,6 +58,26 @@ export const BackgroundColorPrimarySubdued = {
     }
   }
 };
+export const BackgroundColorSuccess = {
+  value: "#007A4D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC93"
+      }
+    }
+  }
+};
+export const BackgroundColorSuccessSubdued = {
+  value: "#CEF8E0",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC9333"
+      }
+    }
+  }
+};
 export const BackgroundColorDanger = {
   value: "#e13212",
   attributes: {
@@ -167,6 +187,16 @@ export const BorderColorPrimary = {
     }
   }
 };
+export const BorderColorSuccess = {
+  value: "#007A4D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC93"
+      }
+    }
+  }
+};
 export const BorderColorDanger = {
   value: "#e13212",
   attributes: {

package/dist/token/core/semantic.scss

@@ -4,6 +4,8 @@ $background-color-stronger: var(--background-color-stronger, #eeeeee);
 $background-color-strongest: var(--background-color-strongest, #bcbcbd);
 $background-color-primary: var(--background-color-primary, #0265DC);
 $background-color-primary-subdued: var(--background-color-primary-subdued, #E0F2FF);
+$background-color-success: var(--background-color-success, #007A4D);
+$background-color-success-subdued: var(--background-color-success-subdued, #CEF8E0);
 $background-color-danger: var(--background-color-danger, #e13212);
 $background-color-danger-subdued: var(--background-color-danger-subdued, #ffece9);
 $background-color-warning: var(--background-color-warning, #ffbe00);
@@ -23,6 +25,7 @@ $border-color: var(--border-color, #949596);
 $border-color-subdued: var(--border-color-subdued, #dfe0e1);
 $border-color-strong: var(--border-color-strong, #444445);
 $border-color-primary: var(--border-color-primary, #0265DC);
+$border-color-success: var(--border-color-success, #007A4D);
 $border-color-danger: var(--border-color-danger, #e13212);
 $focus-ring-color: var(--focus-ring-color, #0265DC);
 $focus-ring-color-danger: var(--focus-ring-color-danger, #e13212);

package/dist/token.js

@@ -60,6 +60,26 @@ const BackgroundColorPrimarySubdued = {
     }
   }
 };
+const BackgroundColorSuccess = {
+  value: "#007A4D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC93"
+      }
+    }
+  }
+};
+const BackgroundColorSuccessSubdued = {
+  value: "#CEF8E0",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC9333"
+      }
+    }
+  }
+};
 const BackgroundColorDanger = {
   value: "#e13212",
   attributes: {
@@ -169,6 +189,16 @@ const BorderColorPrimary = {
     }
   }
 };
+const BorderColorSuccess = {
+  value: "#007A4D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC93"
+      }
+    }
+  }
+};
 const BorderColorDanger = {
   value: "#e13212",
   attributes: {
@@ -538,12 +568,15 @@ const semantic = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   BackgroundColorStrong,
   BackgroundColorStronger,
   BackgroundColorStrongest,
+  BackgroundColorSuccess,
+  BackgroundColorSuccessSubdued,
   BackgroundColorWarning,
   BorderColor,
   BorderColorDanger,
   BorderColorPrimary,
   BorderColorStrong,
   BorderColorSubdued,
+  BorderColorSuccess,
   BorderRadiusCircular,
   BorderRadiusLarge,
   BorderRadiusMedium,