@servicetitan/anvil2 1.38.0 → 1.39.0

package/dist/index.js

@@ -7,51 +7,51 @@ export { B as Button } from './Button-DMQKV2sV.js';
 export { B as ButtonCompound } from './ButtonCompound-DGuF0zzT.js';
 export { B as ButtonLink } from './ButtonLink-B0NJuVk5.js';
 export { B as ButtonToggle } from './ButtonToggle-CKVyEODc.js';
-export { C as Calendar, b as CalendarMonth, e as CalendarMonthButton, c as CalendarNext, a as CalendarNow, d as CalendarPrev, f as CalendarYearButton } from './Calendar-jl0s6W7p.js';
+export { C as Calendar, b as CalendarMonth, e as CalendarMonthButton, c as CalendarNext, a as CalendarNow, d as CalendarPrev, f as CalendarYearButton } from './Calendar-CIWOPMcu.js';
 export { C as Card } from './Card-U2IJPk8B.js';
-export { C as Checkbox, a as CheckboxGroup } from './Checkbox-DbDwtefR.js';
+export { C as Checkbox, a as CheckboxGroup } from './Checkbox-ic-HmakR.js';
 export { C as Chip } from './Chip-BlLavyIK.js';
-export { C as Combobox, c as ComboboxContent, a as ComboboxElement, i as ComboboxEmpty, g as ComboboxItem, h as ComboboxItemAddNew, f as ComboboxList, d as ComboboxSearchField, b as ComboboxSelect, e as ComboboxSelectTrigger, u as useInfiniteCombobox } from './Combobox-7ADxZKDE.js';
-export { D as DateField } from './DateField-CUO_26rh.js';
-export { D as DaysOfTheWeek } from './DaysOfTheWeek-CEKoAJSv.js';
+export { C as Combobox, c as ComboboxContent, a as ComboboxElement, i as ComboboxEmpty, g as ComboboxItem, h as ComboboxItemAddNew, f as ComboboxList, d as ComboboxSearchField, b as ComboboxSelect, e as ComboboxSelectTrigger, u as useInfiniteCombobox } from './Combobox-DR7O7aaZ.js';
+export { D as DateField } from './DateField-CYT6udu8.js';
+export { D as DaysOfTheWeek } from './DaysOfTheWeek-DbjM8UPz.js';
 export { D as Details, b as DetailsContent, a as DetailsSummary } from './Details-DVg0EOkv.js';
-export { D as Dialog, d as DialogCancelButton, c as DialogContent, b as DialogFooter, a as DialogHeader } from './Dialog-D6zpW-GE.js';
+export { D as Dialog, d as DialogCancelButton, c as DialogContent, b as DialogFooter, a as DialogHeader } from './Dialog-BmeXBcs-.js';
 export { D as Divider } from './Divider-CN36wX4s.js';
 export { D as Dnd } from './index-CKfiQx8n-4nziUo7G.js';
 export { D as DndSort, a as DndSortCard, b as DndSortZone } from './DndSort-Cl0FCNQm.js';
-export { D as Drawer, a as DrawerCancelButton, d as DrawerContent, b as DrawerFooter, c as DrawerHeader } from './Drawer-qb7Q0BAm.js';
+export { D as Drawer, a as DrawerCancelButton, d as DrawerContent, b as DrawerFooter, c as DrawerHeader } from './Drawer-8jQ-jaiv.js';
 export { E as EditCard } from './EditCard-C0hD1VPA.js';
-export { F as FieldMessage } from './FieldMessage-Cg3zcgk5.js';
+export { F as FieldMessage } from './FieldMessage-DkJ0K5s-.js';
 export { F as Flex } from './Flex-Ln6PmaDl.js';
 export { G as Grid } from './Grid-CMcDeSYT.js';
 export { I as Icon } from './Icon-BgKqBmlj.js';
-export { I as InputMask } from './InputMask-DKPqOpHs.js';
+export { I as InputMask } from './InputMask-DH14Bp7r.js';
 export { L as Layout, a as LayoutElement, b as LayoutItem } from './Layout-CUUb2PVr.js';
 export { L as Link } from './Link-DZa0wmkA.js';
 export { L as Listbox, a as ListboxOption, b as ListboxOptionGroup } from './Listbox-dVARiucB.js';
-export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-0xHc5wT6.js';
-export { M as Menu, a as MenuItem } from './Menu-BAuADOyt.js';
+export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-HBQy0Qmv.js';
+export { M as Menu, a as MenuItem } from './Menu-CijOsL76.js';
 export { O as Overflow, a as OverflowText } from './Overflow-B6rIOkAI.js';
-export { P as Page, e as PageContent, d as PageHeader, c as PagePanel, a as PageSidebar, b as PageSidebarHeader } from './Page-CtwsyE3i.js';
-export { P as Popover, d as PopoverButton, c as PopoverClose, b as PopoverContent, a as PopoverTrigger } from './Popover-Bnkwq99S.js';
-export { P as ProgressBar } from './ProgressBar-BotOFymw.js';
-export { R as Radio, a as RadioGroup } from './Radio-D4rRt1a6.js';
-export { S as SearchField } from './SearchField-Bz4HPxCQ.js';
+export { P as Page, e as PageContent, d as PageHeader, c as PagePanel, a as PageSidebar, b as PageSidebarHeader } from './Page-CdkxWab-.js';
+export { P as Popover, d as PopoverButton, c as PopoverClose, b as PopoverContent, a as PopoverTrigger } from './Popover-CCcd-JhF.js';
+export { P as ProgressBar } from './ProgressBar-BEDtxKDv.js';
+export { R as Radio, a as RadioGroup } from './Radio-Sj9M1KAg.js';
+export { S as SearchField } from './SearchField-BQY7LHe2.js';
 export { S as SegmentedControl, a as SegmentedControlSegment } from './SegmentedControl-DKMQuf7s.js';
-export { S as SelectCard, b as SelectCardElement, a as SelectCardGroup } from './SelectCardGroup-DsHZgCqA.js';
+export { S as SelectCard, b as SelectCardElement, a as SelectCardGroup } from './SelectCardGroup-DLt9z9b8.js';
 export { S as SideNav, a as SideNavCollapsible, b as SideNavGroup, c as SideNavLink } from './SideNav-DEoGpeqJ.js';
 export { S as Skeleton, a as SkeletonCircle, b as SkeletonPill, c as SkeletonRectangle, d as SkeletonText } from './Skeleton-COxTdwjO.js';
 export { S as Spinner } from './Spinner-C1r3COiQ.js';
 export { S as SrOnly } from './SrOnly-C_I8eH4C.js';
 export { S as Stepper, d as StepperFinalPanel, a as StepperList, e as StepperNextButton, c as StepperPanel, f as StepperPrevButton, b as StepperStep } from './Stepper-CwIV7ZiT.js';
-export { S as Switch } from './Switch-Dd9tJFmG.js';
+export { S as Switch } from './Switch-DAQFzi-X.js';
 export { T as Tab, a as TabButton, b as TabList, c as TabPanel } from './Tab-BSC7e4rM.js';
 export { T as Text } from './Text-B91g6xKn.js';
-export { T as Textarea } from './Textarea-AczEXhHB.js';
-export { T as TextField } from './TextField-BYyyw3m2.js';
-export { T as Toaster, t as toast } from './toast-B39L6vJ0.js';
-export { T as Toolbar, b as ToolbarButton, d as ToolbarButtonLink, c as ToolbarButtonToggle, a as ToolbarElement, e as ToolbarSelect } from './Toolbar-Cu3u0TRX.js';
-export { T as Tooltip, b as TooltipContent, a as TooltipTrigger } from './Tooltip-BL_bgvwA.js';
+export { T as Textarea } from './Textarea-HGQXwvO1.js';
+export { T as TextField } from './TextField-DUohb_Y6.js';
+export { T as Toaster, t as toast } from './toast-DjypuZMf.js';
+export { T as Toolbar, b as ToolbarButton, d as ToolbarButtonLink, c as ToolbarButtonToggle, a as ToolbarElement, e as ToolbarSelect } from './Toolbar-28Uv31qc.js';
+export { T as Tooltip, b as TooltipContent, a as TooltipTrigger } from './Tooltip-ZUko7Bl3.js';
 export { u as useAccessibleColor } from './useAccessibleColor-Dc6B_M-Z-BYKjkGRg.js';
 export { u as useBreakpoint } from './useBreakpoint-7QkBkSeP-Cv5fnZxs.js';
 export { u as useLinkStyles } from './Link-Dqp_XXl_-Bv20l_tY.js';

package/dist/{toast-B39L6vJ0.js → toast-DjypuZMf.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect } from 'react';
 import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
-import { h as Toaster$1, t as toast$1 } from './ProgressBar-Cfi5zZRy-BpESsdh_.js';
+import { h as Toaster$1, t as toast$1 } from './ProgressBar-CZhkKwaS-BppwbCSh.js';
 
 const SHADOW_HOST_DATA_ATTRS = "[data-mfe-portal-name], [data-mfe-name]";
 const Toaster = forwardRef(
@@ -93,4 +93,4 @@ Toaster.displayName = Toaster$1.displayName;
 const toast = toast$1;
 
 export { Toaster as T, toast as t };
-//# sourceMappingURL=toast-B39L6vJ0.js.map
+//# sourceMappingURL=toast-DjypuZMf.js.map

package/dist/{toast-B39L6vJ0.js.map → toast-DjypuZMf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"toast-B39L6vJ0.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\n/**\n * Props for the Toaster component\n * @property {number | false} [duration] - Timeout, in ms, before toasts auto-closes. If set to false, toasts will not auto-close\n * @property {string} id - Unique toaster id\n * @property {(toastEvent: ToastEventType) => void} [onToastEvent] - Callback function that is called when toasts are added, updated, or dismissed\n * @property {number | false} [duration] - Duration of the toast in milliseconds. If set to false, the toast will not auto-dismiss\n * @property {string} [focusKey] - How a screen-reader will announce the hotkey used to set focus on the first toast\n * @property {number} [toastsBeforeStack] - How many toasts to display before they start stacking\n * @extends Omit<HammerToasterProps, \"disableEvents\" | \"duration\">\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\n/**\n * Toaster component for managing and displaying toast notifications with anvil2-specific features.\n *\n * Features:\n * - Manages multiple toast notifications in a stack\n * - Handles toast positioning and stacking behavior\n * - Supports custom events for toast management\n * - Automatic toast dismissal with configurable duration\n * - Keyboard navigation and accessibility support\n * - Dialog-aware positioning for modal contexts\n * - Session storage for dialog toaster state\n * - Custom event system for toast lifecycle management\n * - Responsive design with mobile support\n * - Automatic tracking ID generation for analytics\n * - Monolith toaster integration and coordination\n * - Shadow DOM support for micro-frontend environments\n * - A1 toast group compatibility and positioning\n *\n * @example\n * <Toaster\n *   id=\"main-toaster\"\n *   duration={5000}\n *   toastsBeforeStack={3}\n *   onToastEvent={(event) => console.log('Toast event:', event)}\n * />\n *\n * @example\n * <Toaster\n *   id=\"dialog-toaster\"\n *   disableEvents={false}\n *   focusKey=\"t\"\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 = HammerToaster.displayName;\n","import {\n  toast as coreToast,\n  toastProps as coreToastProps,\n} from \"@servicetitan/hammer-react\";\n\n/**\n * Props for creating toast notifications\n * @property {string} id - Unique identifier for the toast\n * @property {AlertProps[\"status\"]} status - Visual status of the toast (info, success, warning, danger)\n * @property {string} title - Title text displayed in the toast\n * @property {string} [message] - Additional message content to display below the title\n * @property {number | false} [duration] - Duration in milliseconds before auto-dismiss. Set to false to disable auto-dismiss\n * @property {ToastAction & { secondary?: ToastAction }} [actions] - Action buttons to display in the toast\n * @property {ProgressBarProps[\"value\"] | \"indeterminate\"} [progress] - Progress bar value or indeterminate state\n * @property {() => void} [onDismiss] - Callback function called when toast is dismissed, expired, or closed\n * @property {() => void} [onClose] - Callback function called only when the close button is clicked\n * @property {string} [toasterId] - ID of the specific toaster to display the toast in\n */\nexport type toastProps = coreToastProps;\n\n/**\n * Toast utility functions for creating and managing toast notifications.\n *\n * Features:\n * - Create toast notifications with various status types\n * - Update existing toasts with new content\n * - Dismiss individual toasts or all toasts\n * - Support for action buttons and progress bars\n * - Automatic tracking ID generation for analytics\n * - Integration with anvil2 toaster system\n *\n * @example\n * toast.success({\n *   id: \"success-toast\",\n *   title: \"Success!\",\n *   message: \"Your changes have been saved.\"\n * });\n */\nexport const toast = coreToast;\n"],"names":["HammerToaster","coreToast"],"mappings":"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"}
+{"version":3,"file":"toast-DjypuZMf.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\n/**\n * Props for the Toaster component\n * @property {number | false} [duration] - Timeout, in ms, before toasts auto-closes. If set to false, toasts will not auto-close\n * @property {string} id - Unique toaster id\n * @property {(toastEvent: ToastEventType) => void} [onToastEvent] - Callback function that is called when toasts are added, updated, or dismissed\n * @property {number | false} [duration] - Duration of the toast in milliseconds. If set to false, the toast will not auto-dismiss\n * @property {string} [focusKey] - How a screen-reader will announce the hotkey used to set focus on the first toast\n * @property {number} [toastsBeforeStack] - How many toasts to display before they start stacking\n * @extends Omit<HammerToasterProps, \"disableEvents\" | \"duration\">\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\n/**\n * Toaster component for managing and displaying toast notifications with anvil2-specific features.\n *\n * Features:\n * - Manages multiple toast notifications in a stack\n * - Handles toast positioning and stacking behavior\n * - Supports custom events for toast management\n * - Automatic toast dismissal with configurable duration\n * - Keyboard navigation and accessibility support\n * - Dialog-aware positioning for modal contexts\n * - Session storage for dialog toaster state\n * - Custom event system for toast lifecycle management\n * - Responsive design with mobile support\n * - Automatic tracking ID generation for analytics\n * - Monolith toaster integration and coordination\n * - Shadow DOM support for micro-frontend environments\n * - A1 toast group compatibility and positioning\n *\n * @example\n * <Toaster\n *   id=\"main-toaster\"\n *   duration={5000}\n *   toastsBeforeStack={3}\n *   onToastEvent={(event) => console.log('Toast event:', event)}\n * />\n *\n * @example\n * <Toaster\n *   id=\"dialog-toaster\"\n *   disableEvents={false}\n *   focusKey=\"t\"\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 = HammerToaster.displayName;\n","import {\n  toast as coreToast,\n  toastProps as coreToastProps,\n} from \"@servicetitan/hammer-react\";\n\n/**\n * Props for creating toast notifications\n * @property {string} id - Unique identifier for the toast\n * @property {AlertProps[\"status\"]} status - Visual status of the toast (info, success, warning, danger)\n * @property {string} title - Title text displayed in the toast\n * @property {string} [message] - Additional message content to display below the title\n * @property {number | false} [duration] - Duration in milliseconds before auto-dismiss. Set to false to disable auto-dismiss\n * @property {ToastAction & { secondary?: ToastAction }} [actions] - Action buttons to display in the toast\n * @property {ProgressBarProps[\"value\"] | \"indeterminate\"} [progress] - Progress bar value or indeterminate state\n * @property {() => void} [onDismiss] - Callback function called when toast is dismissed, expired, or closed\n * @property {() => void} [onClose] - Callback function called only when the close button is clicked\n * @property {string} [toasterId] - ID of the specific toaster to display the toast in\n */\nexport type toastProps = coreToastProps;\n\n/**\n * Toast utility functions for creating and managing toast notifications.\n *\n * Features:\n * - Create toast notifications with various status types\n * - Update existing toasts with new content\n * - Dismiss individual toasts or all toasts\n * - Support for action buttons and progress bars\n * - Automatic tracking ID generation for analytics\n * - Integration with anvil2 toaster system\n *\n * @example\n * toast.success({\n *   id: \"success-toast\",\n *   title: \"Success!\",\n *   message: \"Your changes have been saved.\"\n * });\n */\nexport const toast = coreToast;\n"],"names":["HammerToaster","coreToast"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+@layer starter, reset, base, state, application;
+
+.a2-border-color-danger {border-color: var(--border-color-danger, #e13212)}
+.a2-border-color-default {border-color: var(--border-color, #949596)}
+.a2-border-color-primary {border-color: var(--border-color-primary, #0265DC)}
+.a2-border-color-strong {border-color: var(--border-color-strong, #444445)}
+.a2-border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+.a2-border-color-success {border-color: var(--border-color-success, #007A4D)}
+.a2-border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
+.a2-border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
+.a2-border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
+.a2-border-radius-none {border-radius: var(--border-radius-none, 0)}
+.a2-border-radius-small {border-radius: var(--border-radius-small, 0.1875rem)}
+.a2-border-radius-xlarge {border-radius: var(--border-radius-xlarge, 1.5rem)}
+.a2-border-width-default {border-width: var(--border-width, 0.0625rem)}
+.a2-border-width-none {border-width: var(--border-width-none, 0rem)}
+.a2-border-width-strong {border-width: var(--border-width-strong, 0.125rem)}
+
+@supports (color: light-dark(#fff, #000)) {
+  .a2-border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
+  .a2-border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
+  .a2-border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
+  .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
+  .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+  .a2-border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
+}
+    
+@layer application {
+  .a2-border-color-danger {border-color: var(--border-color-danger, #e13212)}
+  .a2-border-color-default {border-color: var(--border-color, #949596)}
+  .a2-border-color-primary {border-color: var(--border-color-primary, #0265DC)}
+  .a2-border-color-strong {border-color: var(--border-color-strong, #444445)}
+  .a2-border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+  .a2-border-color-success {border-color: var(--border-color-success, #007A4D)}
+  .a2-border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
+  .a2-border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
+  .a2-border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
+  .a2-border-radius-none {border-radius: var(--border-radius-none, 0)}
+  .a2-border-radius-small {border-radius: var(--border-radius-small, 0.1875rem)}
+  .a2-border-radius-xlarge {border-radius: var(--border-radius-xlarge, 1.5rem)}
+  .a2-border-width-default {border-width: var(--border-width, 0.0625rem)}
+  .a2-border-width-none {border-width: var(--border-width-none, 0rem)}
+  .a2-border-width-strong {border-width: var(--border-width-strong, 0.125rem)}
+  
+  @supports (color: light-dark(#fff, #000)) {
+    .a2-border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
+    .a2-border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
+    .a2-border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
+    .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
+    .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+    .a2-border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
+  }
+}

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

@@ -0,0 +1,235 @@
+@layer starter, reset, base, state, application;
+
+.a2-bg-danger-default {background-color: var(--background-color-danger, #e13212)}
+.a2-bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
+.a2-bg-default {background-color: var(--background-color, #ffffff)}
+.a2-bg-disabled {background-color: var(--background-color-disabled, #606162)}
+.a2-bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
+.a2-bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
+.a2-bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
+.a2-bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
+.a2-bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
+.a2-bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
+.a2-bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
+.a2-bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
+.a2-bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
+.a2-bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
+.a2-bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
+.a2-bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
+.a2-bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
+.a2-bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
+.a2-bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
+.a2-bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
+.a2-bg-status-danger {background-color: var(--status-color-danger, #e13212)}
+.a2-bg-status-info {background-color: var(--status-color-info, #0265DC)}
+.a2-bg-status-success {background-color: var(--status-color-success, #007A4D)}
+.a2-bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
+.a2-bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
+.a2-bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
+.a2-bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
+.a2-bg-success-default {background-color: var(--background-color-success, #007A4D)}
+.a2-bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
+.a2-bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
+.a2-border-color-danger {border-color: var(--border-color-danger, #e13212)}
+.a2-border-color-default {border-color: var(--border-color, #949596)}
+.a2-border-color-primary {border-color: var(--border-color-primary, #0265DC)}
+.a2-border-color-status-info {border-color: var(--status-color-info, #0265DC)}
+.a2-border-color-status-success {border-color: var(--status-color-success, #007A4D)}
+.a2-border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
+.a2-border-color-strong {border-color: var(--border-color-strong, #444445)}
+.a2-border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+.a2-border-color-success {border-color: var(--border-color-success, #007A4D)}
+.a2-c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
+.a2-c-active-primary {color: var(--foreground-color-active-primary, #004491)}
+.a2-c-danger {color: var(--foreground-color-danger, #e13212)}
+.a2-c-default {color: var(--foreground-color, #141414)}
+.a2-c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
+.a2-c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
+.a2-c-inverted {color: var(--foreground-color-inverted, #ffffff)}
+.a2-c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
+.a2-c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
+.a2-c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
+.a2-c-on-warning {color: var(--foreground-color-on-warning, #141414)}
+.a2-c-primary {color: var(--foreground-color-primary, #0265DC)}
+.a2-c-status-danger {color: var(--status-color-danger, #e13212)}
+.a2-c-status-info {color: var(--status-color-info, #0265DC)}
+.a2-c-status-success {color: var(--status-color-success, #007A4D)}
+.a2-c-status-warning {color: var(--status-color-warning, #ffbe00)}
+.a2-c-subdued {color: var(--foreground-color-subdued, #737475)}
+
+@supports (color: light-dark(#fff, #000)) {
+  .a2-bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
+  .a2-bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
+  .a2-bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
+  .a2-bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
+  .a2-bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
+  .a2-bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
+  .a2-bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
+  .a2-bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
+  .a2-bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
+  .a2-bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
+  .a2-bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
+  .a2-bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
+  .a2-bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
+  .a2-bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
+  .a2-bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
+  .a2-bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
+  .a2-bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
+  .a2-bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
+  .a2-bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
+  .a2-bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
+  .a2-bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
+  .a2-bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
+  .a2-bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
+  .a2-bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
+  .a2-bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
+  .a2-bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
+  .a2-bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
+  .a2-bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
+  .a2-bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
+  .a2-bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
+  .a2-border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
+  .a2-border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
+  .a2-border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
+  .a2-border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
+  .a2-border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
+  .a2-border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
+  .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
+  .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+  .a2-border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
+  .a2-c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
+  .a2-c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
+  .a2-c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
+  .a2-c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
+  .a2-c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
+  .a2-c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
+  .a2-c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
+  .a2-c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
+  .a2-c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
+  .a2-c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
+  .a2-c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
+  .a2-c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
+  .a2-c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
+  .a2-c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
+  .a2-c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
+  .a2-c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
+  .a2-c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
+}
+    
+@layer application {
+  .a2-bg-danger-default {background-color: var(--background-color-danger, #e13212)}
+  .a2-bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
+  .a2-bg-default {background-color: var(--background-color, #ffffff)}
+  .a2-bg-disabled {background-color: var(--background-color-disabled, #606162)}
+  .a2-bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
+  .a2-bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
+  .a2-bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
+  .a2-bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
+  .a2-bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
+  .a2-bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
+  .a2-bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
+  .a2-bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
+  .a2-bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
+  .a2-bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
+  .a2-bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
+  .a2-bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
+  .a2-bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
+  .a2-bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
+  .a2-bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
+  .a2-bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
+  .a2-bg-status-danger {background-color: var(--status-color-danger, #e13212)}
+  .a2-bg-status-info {background-color: var(--status-color-info, #0265DC)}
+  .a2-bg-status-success {background-color: var(--status-color-success, #007A4D)}
+  .a2-bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
+  .a2-bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
+  .a2-bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
+  .a2-bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
+  .a2-bg-success-default {background-color: var(--background-color-success, #007A4D)}
+  .a2-bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
+  .a2-bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
+  .a2-border-color-danger {border-color: var(--border-color-danger, #e13212)}
+  .a2-border-color-default {border-color: var(--border-color, #949596)}
+  .a2-border-color-primary {border-color: var(--border-color-primary, #0265DC)}
+  .a2-border-color-status-info {border-color: var(--status-color-info, #0265DC)}
+  .a2-border-color-status-success {border-color: var(--status-color-success, #007A4D)}
+  .a2-border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
+  .a2-border-color-strong {border-color: var(--border-color-strong, #444445)}
+  .a2-border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
+  .a2-border-color-success {border-color: var(--border-color-success, #007A4D)}
+  .a2-c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
+  .a2-c-active-primary {color: var(--foreground-color-active-primary, #004491)}
+  .a2-c-danger {color: var(--foreground-color-danger, #e13212)}
+  .a2-c-default {color: var(--foreground-color, #141414)}
+  .a2-c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
+  .a2-c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
+  .a2-c-inverted {color: var(--foreground-color-inverted, #ffffff)}
+  .a2-c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
+  .a2-c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
+  .a2-c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
+  .a2-c-on-warning {color: var(--foreground-color-on-warning, #141414)}
+  .a2-c-primary {color: var(--foreground-color-primary, #0265DC)}
+  .a2-c-status-danger {color: var(--status-color-danger, #e13212)}
+  .a2-c-status-info {color: var(--status-color-info, #0265DC)}
+  .a2-c-status-success {color: var(--status-color-success, #007A4D)}
+  .a2-c-status-warning {color: var(--status-color-warning, #ffbe00)}
+  .a2-c-subdued {color: var(--foreground-color-subdued, #737475)}
+  
+  @supports (color: light-dark(#fff, #000)) {
+    .a2-bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
+    .a2-bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
+    .a2-bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
+    .a2-bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
+    .a2-bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
+    .a2-bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
+    .a2-bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
+    .a2-bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
+    .a2-bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
+    .a2-bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
+    .a2-bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
+    .a2-bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
+    .a2-bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
+    .a2-bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
+    .a2-bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
+    .a2-bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
+    .a2-bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
+    .a2-bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
+    .a2-bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
+    .a2-bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
+    .a2-bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
+    .a2-bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
+    .a2-bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
+    .a2-bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
+    .a2-bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
+    .a2-bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
+    .a2-bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
+    .a2-bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
+    .a2-bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
+    .a2-bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
+    .a2-border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
+    .a2-border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
+    .a2-border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
+    .a2-border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
+    .a2-border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
+    .a2-border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
+    .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
+    .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
+    .a2-border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
+    .a2-c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
+    .a2-c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
+    .a2-c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
+    .a2-c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
+    .a2-c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
+    .a2-c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
+    .a2-c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
+    .a2-c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
+    .a2-c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
+    .a2-c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
+    .a2-c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
+    .a2-c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
+    .a2-c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
+    .a2-c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
+    .a2-c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
+    .a2-c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
+    .a2-c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
+  }
+}

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

@@ -0,0 +1,49 @@
+@layer starter, reset, base, state, application;
+
+.a2-ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
+.a2-ff-label {font-family: 'Nunito Sans', sans-serif}
+.a2-ff-paragraph {font-family: 'Nunito Sans', sans-serif}
+.a2-fs-heading-default {font-size: 1.25rem}
+.a2-fs-heading-large {font-size: 1.5rem}
+.a2-fs-heading-small {font-size: 1rem}
+.a2-fs-heading-xlarge {font-size: 2rem}
+.a2-fs-heading-xsmall {font-size: 0.875rem}
+.a2-fs-label-default {font-size: 0.875rem}
+.a2-fs-label-large {font-size: 1rem}
+.a2-fs-label-small {font-size: 0.75rem}
+.a2-fs-label-xlarge {font-size: 1.25rem}
+.a2-fs-label-xsmall {font-size: 0.625rem}
+.a2-fs-paragraph-default {font-size: 1rem}
+.a2-fs-paragraph-large {font-size: 1.25rem}
+.a2-fs-paragraph-small {font-size: 0.875rem}
+.a2-fs-paragraph-xlarge {font-size: 1.5rem}
+.a2-fs-paragraph-xsmall {font-size: 0.75rem}
+.a2-fw-heading {font-weight: 700}
+.a2-fw-label {font-weight: 600}
+.a2-fw-paragraph {font-weight: 400}
+
+    
+@layer application {
+  .a2-ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
+  .a2-ff-label {font-family: 'Nunito Sans', sans-serif}
+  .a2-ff-paragraph {font-family: 'Nunito Sans', sans-serif}
+  .a2-fs-heading-default {font-size: 1.25rem}
+  .a2-fs-heading-large {font-size: 1.5rem}
+  .a2-fs-heading-small {font-size: 1rem}
+  .a2-fs-heading-xlarge {font-size: 2rem}
+  .a2-fs-heading-xsmall {font-size: 0.875rem}
+  .a2-fs-label-default {font-size: 0.875rem}
+  .a2-fs-label-large {font-size: 1rem}
+  .a2-fs-label-small {font-size: 0.75rem}
+  .a2-fs-label-xlarge {font-size: 1.25rem}
+  .a2-fs-label-xsmall {font-size: 0.625rem}
+  .a2-fs-paragraph-default {font-size: 1rem}
+  .a2-fs-paragraph-large {font-size: 1.25rem}
+  .a2-fs-paragraph-small {font-size: 0.875rem}
+  .a2-fs-paragraph-xlarge {font-size: 1.5rem}
+  .a2-fs-paragraph-xsmall {font-size: 0.75rem}
+  .a2-fw-heading {font-weight: 700}
+  .a2-fw-label {font-weight: 600}
+  .a2-fw-paragraph {font-weight: 400}
+  
+}