@servicetitan/anvil2 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/AiMark.css +3 -3
  3. package/dist/{Alert-DmbqtMg_.js → Alert-C04WIw7A.js} +2 -2
  4. package/dist/{Alert-DmbqtMg_.js.map → Alert-C04WIw7A.js.map} +1 -1
  5. package/dist/Alert.css +1 -1
  6. package/dist/Alert.js +1 -1
  7. package/dist/Announcement.css +1 -1
  8. package/dist/AnvilProvider.css +1 -2
  9. package/dist/{Avatar-NbFc4Ovc.js → Avatar-BmNcLUg-.js} +2 -2
  10. package/dist/{Avatar-NbFc4Ovc.js.map → Avatar-BmNcLUg-.js.map} +1 -1
  11. package/dist/{Avatar-B4hRHku9.js → Avatar-Cw8B8xZV.js} +2 -2
  12. package/dist/Avatar-Cw8B8xZV.js.map +1 -0
  13. package/dist/Avatar.css +2 -2
  14. package/dist/Avatar.js +2 -2
  15. package/dist/Badge.css +1 -1
  16. package/dist/{Breadcrumbs-CYmciJ1D.js → Breadcrumbs-CAJMeA1D.js} +2 -2
  17. package/dist/{Breadcrumbs-CYmciJ1D.js.map → Breadcrumbs-CAJMeA1D.js.map} +1 -1
  18. package/dist/Breadcrumbs.css +1 -1
  19. package/dist/Breadcrumbs.js +1 -1
  20. package/dist/Button.css +1 -1
  21. package/dist/ButtonCompound.css +1 -1
  22. package/dist/ButtonToggle.css +1 -1
  23. package/dist/Calendar.css +2 -2
  24. package/dist/Card.css +1 -1
  25. package/dist/Checkbox.css +1 -1
  26. package/dist/{Chip-CR5i8mQW.js → Chip-Da8c7tKP.js} +2 -2
  27. package/dist/{Chip-CR5i8mQW.js.map → Chip-Da8c7tKP.js.map} +1 -1
  28. package/dist/Chip.css +1 -1
  29. package/dist/Chip.js +1 -1
  30. package/dist/{Combobox-BffGTugd.js → Combobox-CBLaT1lU.js} +4 -4
  31. package/dist/{Combobox-BffGTugd.js.map → Combobox-CBLaT1lU.js.map} +1 -1
  32. package/dist/Combobox.css +1 -1
  33. package/dist/Combobox.js +1 -1
  34. package/dist/{DataTable-D9Xj1nq5.js → DataTable-BDXdCF7J.js} +6 -6
  35. package/dist/{DataTable-D9Xj1nq5.js.map → DataTable-BDXdCF7J.js.map} +1 -1
  36. package/dist/DataTable.css +16 -16
  37. package/dist/DateFieldYearlessRange.css +1 -1
  38. package/dist/DaysOfTheWeek.css +1 -1
  39. package/dist/Details.css +1 -1
  40. package/dist/{Dialog-DGmF6qx3.js → Dialog-ByTyuybu.js} +4 -4
  41. package/dist/Dialog-ByTyuybu.js.map +1 -0
  42. package/dist/Dialog.css +1 -1
  43. package/dist/Dialog.js +1 -1
  44. package/dist/Divider.css +1 -1
  45. package/dist/DndSort.css +1 -1
  46. package/dist/{Drawer-iewBy1DW.js → Drawer-CwyfBcwt.js} +5 -5
  47. package/dist/{Drawer-iewBy1DW.js.map → Drawer-CwyfBcwt.js.map} +1 -1
  48. package/dist/Drawer.css +1 -1
  49. package/dist/Drawer.js +1 -1
  50. package/dist/DrillDown.css +1 -1
  51. package/dist/DrillDown.js +1 -1
  52. package/dist/{EditCard-D7-Ye7R0.js → EditCard-DqLSnkih.js} +2 -2
  53. package/dist/{EditCard-D7-Ye7R0.js.map → EditCard-DqLSnkih.js.map} +1 -1
  54. package/dist/EditCard.css +1 -1
  55. package/dist/EditCard.js +1 -1
  56. package/dist/FieldLabel.css +2 -2
  57. package/dist/FieldMessage.css +1 -1
  58. package/dist/{Toolbar-C1_etxss.js → FilterBar-BU8StPPd.js} +121 -933
  59. package/dist/FilterBar-BU8StPPd.js.map +1 -0
  60. package/dist/FilterBar.css +59 -0
  61. package/dist/FilterBar.d.ts +6 -0
  62. package/dist/FilterBar.js +2 -0
  63. package/dist/FilterBar.js.map +1 -0
  64. package/dist/Flex.css +1 -1
  65. package/dist/Grid.css +1 -1
  66. package/dist/Helper.css +1 -1
  67. package/dist/Icon.css +1 -1
  68. package/dist/InteractiveCard.css +1 -1
  69. package/dist/Layout.css +1 -1
  70. package/dist/Link.css +1 -1
  71. package/dist/List.css +1 -1
  72. package/dist/ListView.css +1 -1
  73. package/dist/{Listbox-DDlxpVu9.js → Listbox-C0tjQFDF.js} +2 -2
  74. package/dist/{Listbox-DDlxpVu9.js.map → Listbox-C0tjQFDF.js.map} +1 -1
  75. package/dist/Listbox.css +1 -1
  76. package/dist/Listbox.js +1 -1
  77. package/dist/Menu.css +1 -1
  78. package/dist/MultiSelectField.js +1 -1
  79. package/dist/{MultiSelectFieldSync-DZ3tm7zt.js → MultiSelectFieldSync-ueey5UBM.js} +4 -4
  80. package/dist/{MultiSelectFieldSync-DZ3tm7zt.js.map → MultiSelectFieldSync-ueey5UBM.js.map} +1 -1
  81. package/dist/MultiSelectFieldSync.css +1 -1
  82. package/dist/MultiSelectMenu.js +1 -1
  83. package/dist/{MultiSelectMenuSync-dgO9SmHi.js → MultiSelectMenuSync-D7hqugcQ.js} +4 -4
  84. package/dist/{MultiSelectMenuSync-dgO9SmHi.js.map → MultiSelectMenuSync-D7hqugcQ.js.map} +1 -1
  85. package/dist/NumberField.css +1 -1
  86. package/dist/Overflow.css +2 -2
  87. package/dist/{Page-Be1Blwme.js → Page-DbK-JKyB.js} +5 -5
  88. package/dist/{Page-Be1Blwme.js.map → Page-DbK-JKyB.js.map} +1 -1
  89. package/dist/Page.css +1 -1
  90. package/dist/Page.js +1 -1
  91. package/dist/{Pagination-USDJM5vi.js → Pagination-Bg5Nsdik.js} +2 -2
  92. package/dist/{Pagination-USDJM5vi.js.map → Pagination-Bg5Nsdik.js.map} +1 -1
  93. package/dist/Pagination.css +6 -6
  94. package/dist/Pagination.js +1 -1
  95. package/dist/Popover.css +1 -1
  96. package/dist/ProgressBar.css +1 -1
  97. package/dist/Radio.css +1 -1
  98. package/dist/{SearchField-CsRGYZx3.js → SearchField-BKJOW-vI.js} +3 -10
  99. package/dist/SearchField-BKJOW-vI.js.map +1 -0
  100. package/dist/SearchField-BplvDpBG.js +13 -0
  101. package/dist/SearchField-BplvDpBG.js.map +1 -0
  102. package/dist/SearchField.css +1 -1
  103. package/dist/SearchField.js +1 -1
  104. package/dist/SegmentedControl.css +1 -1
  105. package/dist/SelectCard.css +1 -1
  106. package/dist/SelectField.js +1 -1
  107. package/dist/{SelectFieldSync-C44hPeeS.js → SelectFieldSync-W_-jTf7z.js} +3 -3
  108. package/dist/{SelectFieldSync-C44hPeeS.js.map → SelectFieldSync-W_-jTf7z.js.map} +1 -1
  109. package/dist/SelectMenu.js +1 -1
  110. package/dist/{SelectMenuSync-V97oN85V.js → SelectMenuSync-QcjbQtCO.js} +4 -4
  111. package/dist/{SelectMenuSync-V97oN85V.js.map → SelectMenuSync-QcjbQtCO.js.map} +1 -1
  112. package/dist/{SelectOptions-CDoo4AUu.js → SelectOptions-BsX0f22q.js} +2 -2
  113. package/dist/{SelectOptions-CDoo4AUu.js.map → SelectOptions-BsX0f22q.js.map} +1 -1
  114. package/dist/{SelectTrigger-BWN3Tx43.js → SelectTrigger-BaDvF9JD.js} +3 -3
  115. package/dist/{SelectTrigger-BWN3Tx43.js.map → SelectTrigger-BaDvF9JD.js.map} +1 -1
  116. package/dist/SelectTrigger.js +1 -1
  117. package/dist/{SelectTriggerBase-Do7lQ5rw.js → SelectTriggerBase-kMRqbXwu.js} +2 -2
  118. package/dist/{SelectTriggerBase-Do7lQ5rw.js.map → SelectTriggerBase-kMRqbXwu.js.map} +1 -1
  119. package/dist/SelectTriggerBase.css +1 -1
  120. package/dist/SideNav.css +1 -1
  121. package/dist/Skeleton.css +1 -1
  122. package/dist/Spinner.css +1 -1
  123. package/dist/SrOnly.css +1 -1
  124. package/dist/StatusIcon.css +1 -1
  125. package/dist/Stepper.css +4 -4
  126. package/dist/Switch.css +1 -1
  127. package/dist/Tab.css +1 -1
  128. package/dist/Table.js +1 -1
  129. package/dist/{Text-J5YtSSXY.js → Text-BH8gglCL.js} +4 -4
  130. package/dist/Text-BH8gglCL.js.map +1 -0
  131. package/dist/Text.css +1 -1
  132. package/dist/Text.js +1 -1
  133. package/dist/TextField.css +1 -1
  134. package/dist/Textarea.css +1 -1
  135. package/dist/ThemeProvider.css +0 -1
  136. package/dist/{TimeField-DTg0CE5L.js → TimeField-Cz4tMYb3.js} +2 -2
  137. package/dist/{TimeField-DTg0CE5L.js.map → TimeField-Cz4tMYb3.js.map} +1 -1
  138. package/dist/TimeField.css +1 -1
  139. package/dist/TimeField.js +1 -1
  140. package/dist/TimezoneMessage.css +1 -1
  141. package/dist/Toast.js +2 -2
  142. package/dist/{Toaster-Bq42x6Gx.js → Toaster-BV8RjmIN.js} +2 -2
  143. package/dist/{Toaster-Bq42x6Gx.js.map → Toaster-BV8RjmIN.js.map} +1 -1
  144. package/dist/{Toaster-Dly3rfva.js → Toaster-DYGDohJT.js} +2 -2
  145. package/dist/{Toaster-Dly3rfva.js.map → Toaster-DYGDohJT.js.map} +1 -1
  146. package/dist/Toaster.css +1 -1
  147. package/dist/Toolbar-Dzj2KMEy.js +588 -0
  148. package/dist/Toolbar-Dzj2KMEy.js.map +1 -0
  149. package/dist/Toolbar.css +2 -96
  150. package/dist/Toolbar.js +2 -1
  151. package/dist/Toolbar.js.map +1 -1
  152. package/dist/ToolbarButtonToggle--2Ka05N8.js +284 -0
  153. package/dist/ToolbarButtonToggle--2Ka05N8.js.map +1 -0
  154. package/dist/ToolbarButtonToggle.css +41 -0
  155. package/dist/Tooltip.css +1 -1
  156. package/dist/YearlessDateInputWithPicker.css +2 -2
  157. package/dist/assets/icons/st/unsorted.svg +1 -1
  158. package/dist/beta/components/FilterBar/FilterBar.d.ts +87 -0
  159. package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterToggleButton.d.ts +1 -1
  160. package/dist/beta/components/FilterBar/index.d.ts +3 -0
  161. package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/FilterGroupContext.d.ts +5 -5
  162. package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/types.d.ts +2 -2
  163. package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/utils/test.d.ts +1 -0
  164. package/dist/beta/components/Toolbar/Toolbar.d.ts +0 -54
  165. package/dist/beta/components/Toolbar/index.d.ts +0 -1
  166. package/dist/beta/components/index.d.ts +1 -0
  167. package/dist/beta.js +9 -7
  168. package/dist/beta.js.map +1 -1
  169. package/dist/index.css +2 -2
  170. package/dist/index.js +19 -19
  171. package/dist/index2.css +1 -1
  172. package/dist/{syncFilterUtils-BLcRXQfd.js → syncFilterUtils-nJS_tCsu.js} +4 -4
  173. package/dist/{syncFilterUtils-BLcRXQfd.js.map → syncFilterUtils-nJS_tCsu.js.map} +1 -1
  174. package/dist/syncFilterUtils.css +4 -4
  175. package/dist/{useDrilldown-D5WWJRU2.js → useDrilldown-DwzT0Fse.js} +2 -2
  176. package/dist/{useDrilldown-D5WWJRU2.js.map → useDrilldown-DwzT0Fse.js.map} +1 -1
  177. package/dist/{useToggleSelection-D_2qS0P1.js → useToggleSelection-CAwGOeXk.js} +2 -2
  178. package/dist/{useToggleSelection-D_2qS0P1.js.map → useToggleSelection-CAwGOeXk.js.map} +1 -1
  179. package/package.json +9 -9
  180. package/dist/Avatar-B4hRHku9.js.map +0 -1
  181. package/dist/Dialog-DGmF6qx3.js.map +0 -1
  182. package/dist/SearchField-CsRGYZx3.js.map +0 -1
  183. package/dist/Text-J5YtSSXY.js.map +0 -1
  184. package/dist/Toolbar-C1_etxss.js.map +0 -1
  185. package/dist/beta/components/Toolbar/Filters/FilterGroup.d.ts +0 -25
  186. /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterButton.d.ts +0 -0
  187. /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterDateRange.d.ts +0 -0
  188. /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterDateSingle.d.ts +0 -0
  189. /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterDrawer.d.ts +0 -0
  190. /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterItemWrapper.d.ts +0 -0
  191. /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterSelect.d.ts +0 -0
  192. /package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/utils/filter-state.d.ts +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @servicetitan/anvil2
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2277](https://github.com/servicetitan/hammer/pull/2277) [`e7f4ecc`](https://github.com/servicetitan/hammer/commit/e7f4ecc3d4d32a3ae61e66bb24725249963191c1) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - Stop emitting the `@layer starter, reset, base, state, application;` ordering statement in component CSS so strict minifiers (e.g. lightningcss) accept the emitted stylesheets.
8
+
9
+ - [#2265](https://github.com/servicetitan/hammer/pull/2265) [`4c802ea`](https://github.com/servicetitan/hammer/commit/4c802eaefd30149c227d8c48d45305c28965e91d) Thanks [@ericag1985](https://github.com/ericag1985)! - [Avatar, Dialog, Drawer, Text] Fix `undefined` appearing as a DOM class name when `size="medium"` and no `.medium` CSS class exists
10
+
11
+ - [#2263](https://github.com/servicetitan/hammer/pull/2263) [`04d03fe`](https://github.com/servicetitan/hammer/commit/04d03fe882417710f07f8d4da8a44efeb8dae6e9) Thanks [@AdamLantz](https://github.com/AdamLantz)! - [Utilities] Add a handful of missing css-utils
12
+
13
+ - [#2203](https://github.com/servicetitan/hammer/pull/2203) [`3b48e37`](https://github.com/servicetitan/hammer/commit/3b48e3774fb814283e1f1f278d18d6f9035e4e54) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - **BETA** [FilterBar] Extract `Toolbar.Filters` into standalone `FilterBar` component with independent `associatedContent`, `size`, and `overflow` props. Remove `Toolbar.Filters` compound export. Filter types (`Filter`, `BooleanFilter`, etc.) are now exported from `FilterBar` instead of `Toolbar`.
14
+
3
15
  ## 3.0.0
4
16
 
5
17
  ### Major Changes
package/dist/AiMark.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._field-label-button_3o0jn_1 {
1
+ .anvil2 {._field-label-button_3o0jn_1 {
2
2
  --a2-internal-field-label-button-inner-background-color: var(
3
3
  --a2-mod-field-label-button-inner-background-color
4
4
  );
@@ -74,7 +74,7 @@
74
74
  height: var(--a2-inline-field-label-button-inner, var(--a2-size-6, 1.5rem));
75
75
  width: var(--a2-inline-field-label-button-inner, var(--a2-size-6, 1.5rem));
76
76
  }
77
- }.anvil2{@layer starter, reset, base, state, application;._content_4yxbk_1 {
77
+ }.anvil2 {._content_4yxbk_1 {
78
78
  --a2-mod-popover-background-color: var(--a2-popover-content-background-color, var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
79
79
  --a2-mod-popover-border-color: var(--a2-popover-content-border-color, var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040))));
80
80
  --a2-mod-popover-bridge-size: var(--a2-size-2, 0.5rem);
@@ -160,7 +160,7 @@
160
160
  stroke-linejoin: round;
161
161
  stroke-width: var(--a2-size-quarter, 0.0625rem);
162
162
  }
163
- }.anvil2{@layer starter, reset, base, state, application;._tooltip-trigger_ybaru_1 {
163
+ }.anvil2 {._tooltip-trigger_ybaru_1 {
164
164
  display: contents !important;
165
165
  }._container_ybaru_5 {
166
166
  --a2-mod-aimark-button-svg-font-size: var(--a2-size-4, 1rem);
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
3
  import { S as SvgClose } from './close-DZj38AEh.js';
4
4
  import { B as Button } from './Button-Bnt8XUI7.js';
5
- import { T as Text } from './Text-J5YtSSXY.js';
5
+ import { T as Text } from './Text-BH8gglCL.js';
6
6
  import { c as cx } from './index-De1g9FRV.js';
7
7
  import { S as StatusIcon } from './StatusIcon-BwULopyH.js';
8
8
  import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
@@ -113,4 +113,4 @@ const Alert = forwardRef(
113
113
  Alert.displayName = "Alert";
114
114
 
115
115
  export { Alert as A };
116
- //# sourceMappingURL=Alert-DmbqtMg_.js.map
116
+ //# sourceMappingURL=Alert-C04WIw7A.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Alert-DmbqtMg_.js","sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, MouseEvent, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport {\n DataTrackingId,\n LayoutUtilProps,\n OnCloseProps,\n Status,\n} from \"../../types\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Button from \"../Button\";\nimport { Text } from \"../Text\";\nimport { AiMarkWithTooltipOrPopoverConfig } from \"../../types/ai-marks\";\n\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Alert.module.scss\";\nimport {\n StatusIcon,\n StatusIconVariant,\n} from \"../../internal/components/StatusIcon/StatusIcon\";\n\n/**\n * Props for the Alert component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n * @extends OnCloseProps\n */\nexport type AlertProps = ComponentPropsWithoutRef<\"div\"> &\n LayoutUtilProps &\n OnCloseProps & {\n /**\n * The visual style of an alert.\n * @default info\n */\n status?: Status;\n /**\n * The title text displayed in the alert.\n */\n title: string;\n /**\n * When set, displays the AI mark inline after the title.\n * Use `true` for the sparkle only, or pass tooltip/popover configuration.\n */\n aiMark?: boolean | AiMarkWithTooltipOrPopoverConfig;\n } &\n /**\n * Data tracking id\n */\n DataTrackingId;\n\n/**\n * Alert component for displaying important messages to users.\n *\n * Features:\n * - Supports different visual styles (info, success, warning, danger)\n * - Optional close button for dismissible alerts\n * - Optional AI mark inline after the title\n * - Customizable title and content\n * - Accessible with proper ARIA roles\n * - Includes status-specific icons\n * - Supports layout utilities for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Alert\n * title=\"System Update\"\n * onClose={() => console.log('Alert closed')}\n * >\n * The system will be updated tonight.\n * </Alert>\n *\n * @example\n * <Alert\n * status=\"success\"\n * title=\"Operation Complete\"\n * >\n * Your changes have been saved successfully.\n * </Alert>\n */\nexport const Alert = forwardRef(\n (props: AlertProps, ref: Ref<HTMLDivElement>) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n children,\n className,\n title,\n status = \"info\",\n style,\n onClose,\n aiMark,\n ...rest\n } = componentProps;\n\n const data = {\n title,\n status,\n };\n\n const trackingId = useTrackingId({\n name: \"Alert\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const alertCx = cx(styles[\"alert\"], className, {\n [styles[\"success\"]]: status === \"success\",\n [styles[\"warning\"]]: status === \"warning\",\n [styles[\"danger\"]]: status === \"danger\",\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div\n data-tracking-id={trackingId}\n data-anv=\"alert\"\n role=\"status\"\n className={alertCx}\n style={styleCombined}\n {...rest}\n ref={ref}\n >\n <div className={styles[\"top\"]}>\n <span className={styles[\"title-container\"]}>\n <StatusIcon\n className={styles[\"status-icon\"]}\n size=\"small\"\n variant={\n status === \"danger\" ? \"error\" : (status as StatusIconVariant)\n }\n />\n <Text\n variant=\"headline\"\n el=\"h6\"\n size=\"small\"\n className={styles[\"title\"]}\n aiMark={aiMark || undefined}\n >\n {title}\n </Text>\n </span>\n {!!onClose && (\n <span className={styles[\"close-container\"]}>\n <Button\n icon={Close}\n size=\"small\"\n appearance=\"ghost\"\n className={styles[\"close-button\"]}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClose(e)}\n aria-label={`Dismiss ${status} alert`}\n />\n </span>\n )}\n </div>\n {children && <div className={styles[\"content\"]}>{children}</div>}\n </div>\n );\n },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["Close"],"mappings":"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"}
1
+ {"version":3,"file":"Alert-C04WIw7A.js","sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, MouseEvent, Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport {\n DataTrackingId,\n LayoutUtilProps,\n OnCloseProps,\n Status,\n} from \"../../types\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Button from \"../Button\";\nimport { Text } from \"../Text\";\nimport { AiMarkWithTooltipOrPopoverConfig } from \"../../types/ai-marks\";\n\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport cx from \"classnames\";\nimport styles from \"./Alert.module.scss\";\nimport {\n StatusIcon,\n StatusIconVariant,\n} from \"../../internal/components/StatusIcon/StatusIcon\";\n\n/**\n * Props for the Alert component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n * @extends OnCloseProps\n */\nexport type AlertProps = ComponentPropsWithoutRef<\"div\"> &\n LayoutUtilProps &\n OnCloseProps & {\n /**\n * The visual style of an alert.\n * @default info\n */\n status?: Status;\n /**\n * The title text displayed in the alert.\n */\n title: string;\n /**\n * When set, displays the AI mark inline after the title.\n * Use `true` for the sparkle only, or pass tooltip/popover configuration.\n */\n aiMark?: boolean | AiMarkWithTooltipOrPopoverConfig;\n } &\n /**\n * Data tracking id\n */\n DataTrackingId;\n\n/**\n * Alert component for displaying important messages to users.\n *\n * Features:\n * - Supports different visual styles (info, success, warning, danger)\n * - Optional close button for dismissible alerts\n * - Optional AI mark inline after the title\n * - Customizable title and content\n * - Accessible with proper ARIA roles\n * - Includes status-specific icons\n * - Supports layout utilities for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Alert\n * title=\"System Update\"\n * onClose={() => console.log('Alert closed')}\n * >\n * The system will be updated tonight.\n * </Alert>\n *\n * @example\n * <Alert\n * status=\"success\"\n * title=\"Operation Complete\"\n * >\n * Your changes have been saved successfully.\n * </Alert>\n */\nexport const Alert = forwardRef(\n (props: AlertProps, ref: Ref<HTMLDivElement>) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n children,\n className,\n title,\n status = \"info\",\n style,\n onClose,\n aiMark,\n ...rest\n } = componentProps;\n\n const data = {\n title,\n status,\n };\n\n const trackingId = useTrackingId({\n name: \"Alert\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const alertCx = cx(styles[\"alert\"], className, {\n [styles[\"success\"]]: status === \"success\",\n [styles[\"warning\"]]: status === \"warning\",\n [styles[\"danger\"]]: status === \"danger\",\n });\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <div\n data-tracking-id={trackingId}\n data-anv=\"alert\"\n role=\"status\"\n className={alertCx}\n style={styleCombined}\n {...rest}\n ref={ref}\n >\n <div className={styles[\"top\"]}>\n <span className={styles[\"title-container\"]}>\n <StatusIcon\n className={styles[\"status-icon\"]}\n size=\"small\"\n variant={\n status === \"danger\" ? \"error\" : (status as StatusIconVariant)\n }\n />\n <Text\n variant=\"headline\"\n el=\"h6\"\n size=\"small\"\n className={styles[\"title\"]}\n aiMark={aiMark || undefined}\n >\n {title}\n </Text>\n </span>\n {!!onClose && (\n <span className={styles[\"close-container\"]}>\n <Button\n icon={Close}\n size=\"small\"\n appearance=\"ghost\"\n className={styles[\"close-button\"]}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClose(e)}\n aria-label={`Dismiss ${status} alert`}\n />\n </span>\n )}\n </div>\n {children && <div className={styles[\"content\"]}>{children}</div>}\n </div>\n );\n },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["Close"],"mappings":"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"}
package/dist/Alert.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._alert_17r5n_1 {
1
+ .anvil2 {._alert_17r5n_1 {
2
2
  --a2-mod-alert-background-color: var(--a2-alert-info-background-color, var(--a2-background-color-primary-faint, light-dark(var(--a2-color-blue-10, #fafcff), var(--a2-color-blue-950, #000b19))));
3
3
  --a2-mod-alert-border-color: var(--a2-alert-info-border-color, var(--a2-border-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-200, #9ecaff))));
4
4
  --a2-mod-alert-icon-color: var(--a2-alert-info-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
package/dist/Alert.js CHANGED
@@ -1,2 +1,2 @@
1
- export { A as Alert, A as default } from './Alert-DmbqtMg_.js';
1
+ export { A as Alert, A as default } from './Alert-C04WIw7A.js';
2
2
  //# sourceMappingURL=Alert.js.map
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._announcement_kpf9b_1 {
1
+ .anvil2 {._announcement_kpf9b_1 {
2
2
  --a2-internal-announcement-button-color: var(
3
3
  --a2-mod-announcement-button-color
4
4
  );
@@ -1,5 +1,4 @@
1
- @import 'https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i';@layer starter, reset, base, state, application;
2
-
1
+ @import 'https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i';
3
2
  @font-face {
4
3
  font-family: "Sofia Pro";
5
4
  font-style: normal;
@@ -1,5 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { a as Avatar$1, A as AvatarGroup } from './Avatar-B4hRHku9.js';
2
+ import { a as Avatar$1, A as AvatarGroup } from './Avatar-Cw8B8xZV.js';
3
3
  import { forwardRef } from 'react';
4
4
 
5
5
  const Avatar = Object.assign(
@@ -32,4 +32,4 @@ const Avatar = Object.assign(
32
32
  Avatar.displayName = Avatar$1.displayName;
33
33
 
34
34
  export { Avatar as A };
35
- //# sourceMappingURL=Avatar-NbFc4Ovc.js.map
35
+ //# sourceMappingURL=Avatar-BmNcLUg-.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar-NbFc4Ovc.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import {\n Avatar as CoreAvatar,\n AvatarProps as CoreAvatarProps,\n} from \"./internal/Avatar\";\nimport { forwardRef } from \"react\";\nimport { DistributiveOmit } from \"../../types\";\nimport { AvatarGroup } from \"./AvatarGroup\";\n\n/**\n * Props for the Avatar component\n * @property {string} name - Full name used for alt text and screen reader\n * @property {string} [color] - Custom color of the Avatar\n * @property {string} [image] - Image source to be used for Avatar\n * @property {\"small\" | \"medium\" | \"large\"} [size] - Size of the Avatar\n * @property {\"online\" | \"offline\"} [status] - Online status of the Avatar\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<AvatarBaseProps, \"initials\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n * @extends DataTrackingId\n */\nexport type AvatarProps = DistributiveOmit<CoreAvatarProps, \"size\"> & {\n size?: Extract<CoreAvatarProps[\"size\"], \"small\" | \"medium\" | \"large\">;\n};\n\n/**\n * Avatar component for displaying user avatars with initials or images.\n *\n * Features:\n * - Displays user initials when no image is provided\n * - Supports custom colors and sizes\n * - Shows online/offline status\n * - Fully accessible with screen reader support\n * - Automatic image fallback handling\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Avatar name=\"John Doe\" size=\"medium\" status=\"online\" />\n */\nexport const Avatar = Object.assign(\n forwardRef<HTMLSpanElement, AvatarProps>(function AvatarInner(props, ref) {\n return <CoreAvatar ref={ref} {...props} />;\n }),\n {\n /**\n * AvatarGroup component for displaying multiple avatars in a group.\n *\n * Features:\n * - Displays multiple avatars in a stacked layout\n * - Handles overflow with a count indicator\n * - Maintains consistent sizing across all avatars\n * - Supports custom styling and layout\n * - Automatically adjusts z-index for proper stacking\n * - Fully accessible with screen reader support\n *\n * @example\n * <Avatar.Group max={3}>\n * <Avatar name=\"John Doe\" />\n * <Avatar name=\"Jane Smith\" />\n * <Avatar name=\"Bob Johnson\" />\n * <Avatar name=\"Alice Brown\" />\n * </Avatar.Group>\n */\n Group: AvatarGroup,\n },\n);\nAvatar.displayName = CoreAvatar.displayName;\n"],"names":["CoreAvatar"],"mappings":";;;;AAsCO,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAyC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACxE,IAAA,uBAAO,GAAA,CAACA,QAAA,EAAA,EAAW,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAAA,EAC1C,CAAC,CAAA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBE,KAAA,EAAO;AAAA;AAEX;AACA,MAAA,CAAO,cAAcA,QAAA,CAAW,WAAA;;;;"}
1
+ {"version":3,"file":"Avatar-BmNcLUg-.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import {\n Avatar as CoreAvatar,\n AvatarProps as CoreAvatarProps,\n} from \"./internal/Avatar\";\nimport { forwardRef } from \"react\";\nimport { DistributiveOmit } from \"../../types\";\nimport { AvatarGroup } from \"./AvatarGroup\";\n\n/**\n * Props for the Avatar component\n * @property {string} name - Full name used for alt text and screen reader\n * @property {string} [color] - Custom color of the Avatar\n * @property {string} [image] - Image source to be used for Avatar\n * @property {\"small\" | \"medium\" | \"large\"} [size] - Size of the Avatar\n * @property {\"online\" | \"offline\"} [status] - Online status of the Avatar\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<AvatarBaseProps, \"initials\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n * @extends DataTrackingId\n */\nexport type AvatarProps = DistributiveOmit<CoreAvatarProps, \"size\"> & {\n size?: Extract<CoreAvatarProps[\"size\"], \"small\" | \"medium\" | \"large\">;\n};\n\n/**\n * Avatar component for displaying user avatars with initials or images.\n *\n * Features:\n * - Displays user initials when no image is provided\n * - Supports custom colors and sizes\n * - Shows online/offline status\n * - Fully accessible with screen reader support\n * - Automatic image fallback handling\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Avatar name=\"John Doe\" size=\"medium\" status=\"online\" />\n */\nexport const Avatar = Object.assign(\n forwardRef<HTMLSpanElement, AvatarProps>(function AvatarInner(props, ref) {\n return <CoreAvatar ref={ref} {...props} />;\n }),\n {\n /**\n * AvatarGroup component for displaying multiple avatars in a group.\n *\n * Features:\n * - Displays multiple avatars in a stacked layout\n * - Handles overflow with a count indicator\n * - Maintains consistent sizing across all avatars\n * - Supports custom styling and layout\n * - Automatically adjusts z-index for proper stacking\n * - Fully accessible with screen reader support\n *\n * @example\n * <Avatar.Group max={3}>\n * <Avatar name=\"John Doe\" />\n * <Avatar name=\"Jane Smith\" />\n * <Avatar name=\"Bob Johnson\" />\n * <Avatar name=\"Alice Brown\" />\n * </Avatar.Group>\n */\n Group: AvatarGroup,\n },\n);\nAvatar.displayName = CoreAvatar.displayName;\n"],"names":["CoreAvatar"],"mappings":";;;;AAsCO,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAyC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACxE,IAAA,uBAAO,GAAA,CAACA,QAAA,EAAA,EAAW,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAAA,EAC1C,CAAC,CAAA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBE,KAAA,EAAO;AAAA;AAEX;AACA,MAAA,CAAO,cAAcA,QAAA,CAAW,WAAA;;;;"}
@@ -67,7 +67,7 @@ const AvatarBase = forwardRef(
67
67
  const imgRef = useRef(null);
68
68
  const [hasImageErrored, setHasImageErrored] = useState(false);
69
69
  const avatarBaseClassNames = cx(avatarBaseStyles["avatar-base"], className, {
70
- [avatarBaseStyles[`${size}`]]: size
70
+ [avatarBaseStyles[`${size}`]]: size && size !== "medium"
71
71
  });
72
72
  const onlineIndicatorClassNames = cx(avatarBaseStyles["indicator"], {
73
73
  [avatarBaseStyles["offline"]]: !status || status === "offline",
@@ -255,4 +255,4 @@ const Avatar = Object.assign(
255
255
  Avatar.displayName = "Avatar";
256
256
 
257
257
  export { AvatarGroup as A, Avatar as a };
258
- //# sourceMappingURL=Avatar-B4hRHku9.js.map
258
+ //# sourceMappingURL=Avatar-Cw8B8xZV.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar-Cw8B8xZV.js","sources":["../src/internal/functions/getInitial.ts","../src/components/Avatar/internal/AvatarBase.tsx","../src/components/Avatar/AvatarGroup.tsx","../src/components/Avatar/internal/Avatar.tsx"],"sourcesContent":["/**\n * Extracts initials from a full name string.\n *\n * Features:\n * - Handles single names (returns first two characters)\n * - Handles multiple names (returns first and last name initials)\n * - Automatically capitalizes all initials\n * - Filters out empty strings and whitespace\n * - Handles edge cases like empty names and single characters\n * - Preserves proper capitalization rules\n * - Returns undefined for empty or falsy input\n *\n * @param name - The full name string to extract initials from\n * @returns The initials as a string, or undefined if name is empty\n */\nexport function getInitial(name: string) {\n if (!name) return undefined;\n\n const nameArray = name.split(\" \").filter(Boolean);\n\n if (nameArray.length > 1)\n return `${nameArray[0][0]?.toUpperCase()}${nameArray[\n nameArray.length - 1\n ][0].toUpperCase()}`;\n\n if (nameArray[0][1]) {\n return `${nameArray[0][0].toUpperCase()}${nameArray[0][1].toLowerCase()}`;\n }\n return `${nameArray[0][0].toUpperCase()}`;\n}\n","import {\n ComponentPropsWithoutRef,\n forwardRef,\n useContext,\n useRef,\n useState,\n useEffect,\n useMemo,\n} from \"react\";\nimport cx from \"classnames\";\nimport tinycolor from \"tinycolor2\";\n\nimport { LayoutUtilProps, Size } from \"../../../types\";\nimport { SrOnly } from \"../../SrOnly\";\nimport {\n useAccessibleColor,\n useMergeRefs,\n usePrefersColorScheme,\n} from \"../../../hooks\";\n\nimport styles from \"./AvatarBase.module.scss\";\nimport { ThemeProviderContext } from \"../../../providers/ThemeProvider/internal/ThemeProviderContext\";\n\n/**\n * Props for the AvatarBase component\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type AvatarBaseProps = ComponentPropsWithoutRef<\"span\"> &\n Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n /**\n * Full name\n * @accessibility This is used for alt text and Screenreader\n */\n name: string;\n /**\n * Custom color of the AvatarBase\n */\n color?: string;\n /**\n * Image source to be used for AvatarBase\n */\n image?: string;\n /**\n * Initials to display if no image is provided\n */\n initials?: string;\n /**\n * @default medium\n */\n size?: Extract<Size, \"xsmall\" | \"small\" | \"medium\" | \"large\">;\n /**\n * Online status of the AvatarBase\n */\n status?: \"online\" | \"offline\";\n };\n\n/**\n * Base Avatar component that handles the core avatar functionality.\n *\n * Features:\n * - Renders user avatars with images or initials\n * - Supports custom colors with accessible contrast\n * - Shows online/offline status indicator\n * - Handles image loading errors gracefully\n * - Supports light and dark themes\n * - Fully accessible with screen reader support\n *\n * @example\n * <AvatarBase name=\"John Doe\" size=\"medium\" status=\"online\" />\n */\nexport const AvatarBase = forwardRef<HTMLSpanElement, AvatarBaseProps>(\n (props, ref) => {\n const {\n className,\n color,\n status,\n name,\n image,\n initials,\n style,\n size,\n ...rest\n } = props;\n\n const elRef = useRef<HTMLSpanElement>(null);\n const imgRef = useRef<HTMLImageElement>(null);\n const [hasImageErrored, setHasImageErrored] = useState(false);\n const avatarBaseClassNames = cx(styles[\"avatar-base\"], className, {\n [styles[`${size}`]]: size && size !== \"medium\",\n });\n const onlineIndicatorClassNames = cx(styles[\"indicator\"], {\n [styles[\"offline\"]]: !status || status === \"offline\",\n [styles[\"online\"]]: status && status === \"online\",\n });\n\n const { mode: themeMode } = useContext(ThemeProviderContext);\n const { mode: sysMode } = usePrefersColorScheme();\n const mode = themeMode ?? sysMode;\n\n const { foreground, background, border } = useAccessibleColor(color, mode);\n\n const styleWithColor = {\n \"--a2-inline-avatar-background-color\": color && background,\n \"--a2-inline-avatar-font-color\": color && foreground,\n \"--a2-inline-avatar-border-color\": color && border,\n ...style,\n };\n\n const onlineIndicatorBorderColor = useMemo(() => {\n if (mode === \"dark\") {\n if (color) {\n return tinycolor(background).brighten(20).toHexString();\n }\n }\n return \"var(--a2-background-color-default)\";\n }, [color, mode, background]);\n\n const onlineIndicatorStyles = {\n \"--a2-inline-avatar-border-color\": onlineIndicatorBorderColor,\n } as React.CSSProperties;\n\n const onlineString = status;\n const srOnly = [name, onlineString].filter(Boolean).join(\" \");\n\n // if the image prop updates, also reset the error state for the new image\n useEffect(() => {\n if (image) {\n setHasImageErrored(false);\n }\n }, [image]);\n\n // if the image is already complete on our first render (likely due to SSR),\n // check the error state of the already complete image\n useEffect(() => {\n if (image && imgRef.current && imgRef.current.complete) {\n const img = new Image();\n img.onerror = () => setHasImageErrored(true);\n img.src = image;\n }\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <span\n className={avatarBaseClassNames}\n style={styleWithColor}\n data-anv=\"avatarBase\"\n {...rest}\n ref={useMergeRefs([elRef, ref])}\n >\n {image && !hasImageErrored ? (\n <img\n className={styles[\"img\"]}\n aria-hidden\n src={image}\n alt={name}\n onError={() => setHasImageErrored(true)}\n ref={imgRef}\n />\n ) : initials ? (\n <span className={styles[\"initial\"]} aria-hidden>\n {initials}\n </span>\n ) : (\n <span aria-hidden>?</span>\n )}\n\n {status && (\n <span\n aria-hidden\n className={onlineIndicatorClassNames}\n style={onlineIndicatorStyles}\n />\n )}\n\n <SrOnly>{srOnly}</SrOnly>\n </span>\n );\n },\n);\n\nAvatarBase.displayName = \"AvatarBase\";\n","import {\n ComponentPropsWithoutRef,\n forwardRef,\n Children,\n isValidElement,\n cloneElement,\n CSSProperties,\n ReactElement,\n} from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./AvatarGroup.module.scss\";\nimport avatarBaseStyles from \"./internal/AvatarBase.module.scss\";\nimport type { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { AvatarBase } from \"./internal/AvatarBase\";\n\n/**\n * Props for the AvatarGroup component\n * @property {number} [max] - Maximum number of avatars to display before truncating\n * @extends LayoutUtilProps\n * @extends ComponentPropsWithoutRef<\"span\">\n */\nexport type AvatarGroupProps = LayoutUtilProps &\n ComponentPropsWithoutRef<\"span\"> & {\n /**\n * Max child to show before truncating\n */\n max?: number;\n };\n\n/**\n * AvatarGroup component for displaying multiple avatars in a group.\n *\n * Features:\n * - Displays multiple avatars in a stacked layout\n * - Handles overflow with a count indicator\n * - Maintains consistent sizing across all avatars\n * - Supports custom styling and layout\n * - Automatically adjusts z-index for proper stacking\n * - Fully accessible with screen reader support\n *\n * @example\n * <Avatar.Group max={3}>\n * <Avatar name=\"John Doe\" />\n * <Avatar name=\"Jane Smith\" />\n * <Avatar name=\"Bob Johnson\" />\n * <Avatar name=\"Alice Brown\" />\n * </Avatar.Group>\n */\nexport const AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(\n (props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { className, max, style, children, ...rest } = componentProps;\n const childrenArr = Children.toArray(children);\n const inferredSize =\n (isValidElement(childrenArr[0]) && childrenArr[0].props.size) ?? \"medium\";\n const isOverflowing = max ? max < childrenArr.length : false;\n\n const overflowCount = max && childrenArr.length - max;\n\n const avatarGroupClassNames = cx(styles[\"avatar-group\"], className, {\n [styles[`${inferredSize}`]]: inferredSize,\n });\n\n const avatarBaseOverflowClassNames = cx(\n avatarBaseStyles[\"avatar-base-overflow\"],\n {\n [avatarBaseStyles[\"overflow-ten-plus\"]]:\n overflowCount && overflowCount > 9,\n },\n );\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n return (\n <span\n ref={ref}\n className={avatarGroupClassNames}\n style={styleCombined}\n data-anv=\"avatar-group\"\n {...rest}\n >\n {childrenArr.map((child, i) => {\n let childEl = child;\n if (isValidElement(child)) {\n const nIndex = childrenArr.length - i;\n const nStyle: CSSProperties = {\n ...child.props.style,\n zIndex: nIndex,\n };\n childEl = cloneElement(child as ReactElement, {\n style: nStyle,\n });\n }\n\n if (!max) return childEl;\n if (i < max) return childEl;\n return null;\n })}\n {isOverflowing && max && (\n <AvatarBase\n className={avatarBaseOverflowClassNames}\n name={`+${overflowCount}`}\n initials={`+${overflowCount}`}\n size={inferredSize}\n />\n )}\n </span>\n );\n },\n);\n\nAvatarGroup.displayName = \"AvatarGroup\";\n","import { ComponentPropsWithoutRef, forwardRef, useMemo } from \"react\";\nimport { AvatarGroup } from \"../AvatarGroup\";\nimport { LayoutUtilProps } from \"../../../types\";\nimport { getInitial } from \"../../../internal/functions\";\n\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { AvatarBase, AvatarBaseProps } from \"./AvatarBase\";\n\n/**\n * Props for the Avatar component\n * @property {string} name - Full name of the user. Used for alt text and screen reader announcements\n * @property {string} [color] - Custom color of the avatar. Should maintain sufficient contrast ratio for accessibility\n * @property {string} [image] - Image source to be used for avatar. Falls back to initials if image fails to load\n * @property {Extract<Size, \"small\" | \"medium\" | \"large\">} [size] - Size of the Avatar\n * @property {\"online\" | \"offline\"} [status] - Online status of the Avatar\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<AvatarBaseProps, \"initials\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type AvatarProps = ComponentPropsWithoutRef<\"span\"> &\n Omit<AvatarBaseProps, \"initials\"> &\n Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">;\n\n/**\n * Avatar component for displaying user avatars with initials or images.\n *\n * Features:\n * - Displays user initials when no image is provided\n * - Supports custom colors and sizes\n * - Shows online/offline status\n * - Fully accessible with screen reader support\n * - Automatic image fallback handling\n * - Supports layout utilities for positioning and spacing\n *\n * @example\n * <Avatar\n * name=\"John Doe\"\n * image=\"https://example.com/avatar.jpg\"\n * size=\"medium\"\n * status=\"online\"\n * />\n */\nexport const Avatar = Object.assign(\n forwardRef<HTMLSpanElement, AvatarProps>(function AvatarInner(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { name, style, ...rest } = componentProps;\n\n const styleWithLayout = useMemo(() => {\n return {\n ...layoutStyles,\n ...style,\n };\n }, [layoutStyles, style]);\n\n const initials = getInitial(name);\n\n return (\n <AvatarBase\n style={styleWithLayout}\n data-anv=\"avatar\"\n name={name}\n ref={ref}\n initials={rest.size === \"small\" ? initials?.[0] : initials}\n {...rest}\n />\n );\n }),\n {\n /**\n * AvatarGroup component for displaying multiple avatars in a group.\n *\n * Features:\n * - Displays multiple avatars in a stacked layout\n * - Handles overflow with a count indicator\n * - Maintains consistent sizing across all avatars\n * - Supports custom styling and layout\n * - Automatically adjusts z-index for proper stacking\n * - Fully accessible with screen reader support\n *\n * @example\n * <Avatar.Group max={3}>\n * <Avatar name=\"John Doe\" />\n * <Avatar name=\"Jane Smith\" />\n * <Avatar name=\"Bob Johnson\" />\n * <Avatar name=\"Alice Brown\" />\n * </Avatar.Group>\n */\n Group: AvatarGroup,\n },\n);\nAvatar.displayName = \"Avatar\";\n"],"names":["styles"],"mappings":"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"}
package/dist/Avatar.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._avatar-group_1faog_1 {
1
+ .anvil2 {._avatar-group_1faog_1 {
2
2
  --a2-mod-avatar-group-margin-inline-start: calc(var(--a2-size-2, 0.5rem) * -1);
3
3
  --a2-mod-avatar-group-padding-inline-start: var(--a2-size-4, 1rem);
4
4
  all: unset;
@@ -27,7 +27,7 @@
27
27
  --a2-mod-avatar-group-margin-inline-start: calc(var(--a2-size-3, 0.75rem) * -1);
28
28
  --a2-mod-avatar-group-padding-inline-start: var(--a2-size-3, 0.75rem);
29
29
  }
30
- }.anvil2{@layer starter, reset, base, state, application;._avatar-base_bvbpu_1 {
30
+ }.anvil2 {._avatar-base_bvbpu_1 {
31
31
  --a2-mod-avatar-font-size: var(--a2-font-size-200, 0.75rem);
32
32
  --a2-mod-avatar-font-size-10-plus-overflow: var(--a2-font-size-100, 0.625rem);
33
33
  --a2-mod-avatar-indicator-bg-color: var(--a2-avatar-indicator-background-color-default, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
package/dist/Avatar.js CHANGED
@@ -1,3 +1,3 @@
1
- export { A as Avatar, A as default } from './Avatar-NbFc4Ovc.js';
2
- export { A as AvatarGroup } from './Avatar-B4hRHku9.js';
1
+ export { A as Avatar, A as default } from './Avatar-BmNcLUg-.js';
2
+ export { A as AvatarGroup } from './Avatar-Cw8B8xZV.js';
3
3
  //# sourceMappingURL=Avatar.js.map
package/dist/Badge.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._badge_n9xub_1 {
1
+ .anvil2 {._badge_n9xub_1 {
2
2
  --a2-mod-badge-background-color: var(--a2-badge-background-color, var(--a2-background-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))));
3
3
  --a2-mod-badge-foreground-color: var(--a2-badge-foreground-color, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
4
4
  --a2-mod-badge-min-size: var(--a2-size-5, 1.25rem);
@@ -4,7 +4,7 @@ import { forwardRef, Children, cloneElement } from 'react';
4
4
  import { c as cx } from './index-De1g9FRV.js';
5
5
  import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
6
6
  import { L as Link } from './Link-BUgivkGS.js';
7
- import { T as Text } from './Text-J5YtSSXY.js';
7
+ import { T as Text } from './Text-BH8gglCL.js';
8
8
  import { I as Icon } from './Icon-BMMbp40n.js';
9
9
 
10
10
  import './Breadcrumbs.css';const SvgChevronRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }));
@@ -104,4 +104,4 @@ const Breadcrumbs = Object.assign(
104
104
  Breadcrumbs.displayName = "Breadcrumbs";
105
105
 
106
106
  export { Breadcrumbs as B };
107
- //# sourceMappingURL=Breadcrumbs-CYmciJ1D.js.map
107
+ //# sourceMappingURL=Breadcrumbs-CAJMeA1D.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumbs-CYmciJ1D.js","sources":["../../hammer-icon/mdi/filled/chevron_right.svg","../src/components/Breadcrumbs/BreadcrumbsLink.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgChevronRight = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" }));\nexport default SvgChevronRight;\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Link, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\n\n/**\n * Props for the BreadcrumbsLink component\n * @extends ComponentPropsWithoutRef<\"a\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsLinkProps = ComponentPropsWithoutRef<\"a\"> &\n LayoutUtilProps;\n\n/**\n * BreadcrumbsLink component for individual breadcrumb navigation items.\n *\n * Features:\n * - Renders as a clickable link with secondary appearance\n * - Supports all standard anchor element props\n * - Includes layout utilities for positioning and spacing\n * - Uses small text size for consistent styling\n * - Fully accessible with proper focus management\n * - Automatically applies secondary link styling\n *\n * @example\n * <BreadcrumbsLink href=\"/dashboard\">Dashboard</BreadcrumbsLink>\n */\nexport const BreadcrumbsLink = forwardRef<\n HTMLAnchorElement,\n BreadcrumbsLinkProps\n>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { children, className, style, ...rest } = componentProps;\n\n const classes = cx([styles[\"breadcrumbs-link\"]], className, {});\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <Link\n tabIndex={0}\n data-anv=\"breadcrumbs-link\"\n style={styleCombined}\n appearance=\"secondary\"\n className={classes}\n {...rest}\n ref={ref}\n >\n <Text size=\"small\" inline>\n {children}\n </Text>\n </Link>\n );\n});\n\nBreadcrumbsLink.displayName = \"BreadcrumbsLink\";\n","import {\n Children,\n ComponentPropsWithoutRef,\n ReactElement,\n cloneElement,\n forwardRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport ChevronRight from \"@servicetitan/hammer-icon/mdi/filled/chevron_right.svg\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Icon, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\nimport { BreadcrumbsLink, BreadcrumbsLinkProps } from \"./BreadcrumbsLink\";\n\n/**\n * Props for the Breadcrumbs component\n * @extends ComponentPropsWithoutRef<\"nav\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsProps = ComponentPropsWithoutRef<\"nav\"> &\n LayoutUtilProps & {\n /**\n * Breadcrumb links to display. The last child will be rendered as non-clickable text.\n */\n children:\n | ReactElement<BreadcrumbsLinkProps>\n | ReactElement<BreadcrumbsLinkProps>[];\n };\n\n/**\n * Breadcrumbs component for displaying navigation hierarchy.\n *\n * Features:\n * - Displays a series of navigation links with chevron separators\n * - Automatically renders the last item as non-clickable text\n * - Includes proper ARIA labeling for accessibility\n * - Supports layout utilities for positioning and spacing\n * - Uses chevron icons as visual separators between links\n * - Responsive design with flexbox layout\n *\n * @example\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/home\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Link href=\"/products\">Products</Breadcrumbs.Link>\n * <Breadcrumbs.Link href=\"/electronics\">Electronics</Breadcrumbs.Link>\n * </Breadcrumbs>\n */\nexport const Breadcrumbs = Object.assign(\n forwardRef<HTMLElement, BreadcrumbsProps>(\n function BreadcrumbsInner(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { children, className, style, ...rest } = componentProps;\n\n const classes = cx([styles[\"breadcrumbs\"]], className, {});\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n const linkCount = Children.count(children);\n\n return (\n <nav\n data-anv=\"breadcrumbs\"\n style={styleCombined}\n className={classes}\n aria-label=\"Breadcrumb\"\n {...rest}\n ref={ref}\n >\n {Children.map(children, (link, i) => {\n if (i + 1 === linkCount) {\n return (\n <Text\n inline\n size=\"small\"\n style={{\n fontWeight: \"bold\",\n }}\n >\n {link.props.children}\n </Text>\n );\n } else {\n return (\n <>\n {cloneElement(link as ReactElement)}\n <Icon svg={ChevronRight} aria-hidden=\"true\" />\n </>\n );\n }\n })}\n </nav>\n );\n },\n ),\n {\n /**\n * BreadcrumbsLink component for individual breadcrumb navigation items.\n *\n * Features:\n * - Renders as a clickable link with secondary appearance\n * - Supports all standard anchor element props\n * - Includes layout utilities for positioning and spacing\n * - Uses small text size for consistent styling\n * - Fully accessible with proper focus management\n * - Automatically applies secondary link styling\n *\n * @example\n * <Breadcrumbs.Link href=\"/dashboard\">Dashboard</Breadcrumbs.Link>\n */\n Link: BreadcrumbsLink,\n },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"names":["ChevronRight"],"mappings":"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"}
1
+ {"version":3,"file":"Breadcrumbs-CAJMeA1D.js","sources":["../../hammer-icon/mdi/filled/chevron_right.svg","../src/components/Breadcrumbs/BreadcrumbsLink.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgChevronRight = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" }));\nexport default SvgChevronRight;\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Link, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\n\n/**\n * Props for the BreadcrumbsLink component\n * @extends ComponentPropsWithoutRef<\"a\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsLinkProps = ComponentPropsWithoutRef<\"a\"> &\n LayoutUtilProps;\n\n/**\n * BreadcrumbsLink component for individual breadcrumb navigation items.\n *\n * Features:\n * - Renders as a clickable link with secondary appearance\n * - Supports all standard anchor element props\n * - Includes layout utilities for positioning and spacing\n * - Uses small text size for consistent styling\n * - Fully accessible with proper focus management\n * - Automatically applies secondary link styling\n *\n * @example\n * <BreadcrumbsLink href=\"/dashboard\">Dashboard</BreadcrumbsLink>\n */\nexport const BreadcrumbsLink = forwardRef<\n HTMLAnchorElement,\n BreadcrumbsLinkProps\n>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { children, className, style, ...rest } = componentProps;\n\n const classes = cx([styles[\"breadcrumbs-link\"]], className, {});\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n return (\n <Link\n tabIndex={0}\n data-anv=\"breadcrumbs-link\"\n style={styleCombined}\n appearance=\"secondary\"\n className={classes}\n {...rest}\n ref={ref}\n >\n <Text size=\"small\" inline>\n {children}\n </Text>\n </Link>\n );\n});\n\nBreadcrumbsLink.displayName = \"BreadcrumbsLink\";\n","import {\n Children,\n ComponentPropsWithoutRef,\n ReactElement,\n cloneElement,\n forwardRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport ChevronRight from \"@servicetitan/hammer-icon/mdi/filled/chevron_right.svg\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Icon, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\nimport { BreadcrumbsLink, BreadcrumbsLinkProps } from \"./BreadcrumbsLink\";\n\n/**\n * Props for the Breadcrumbs component\n * @extends ComponentPropsWithoutRef<\"nav\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsProps = ComponentPropsWithoutRef<\"nav\"> &\n LayoutUtilProps & {\n /**\n * Breadcrumb links to display. The last child will be rendered as non-clickable text.\n */\n children:\n | ReactElement<BreadcrumbsLinkProps>\n | ReactElement<BreadcrumbsLinkProps>[];\n };\n\n/**\n * Breadcrumbs component for displaying navigation hierarchy.\n *\n * Features:\n * - Displays a series of navigation links with chevron separators\n * - Automatically renders the last item as non-clickable text\n * - Includes proper ARIA labeling for accessibility\n * - Supports layout utilities for positioning and spacing\n * - Uses chevron icons as visual separators between links\n * - Responsive design with flexbox layout\n *\n * @example\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/home\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Link href=\"/products\">Products</Breadcrumbs.Link>\n * <Breadcrumbs.Link href=\"/electronics\">Electronics</Breadcrumbs.Link>\n * </Breadcrumbs>\n */\nexport const Breadcrumbs = Object.assign(\n forwardRef<HTMLElement, BreadcrumbsProps>(\n function BreadcrumbsInner(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const { children, className, style, ...rest } = componentProps;\n\n const classes = cx([styles[\"breadcrumbs\"]], className, {});\n\n const styleCombined = {\n ...style,\n ...layoutStyles,\n };\n\n const linkCount = Children.count(children);\n\n return (\n <nav\n data-anv=\"breadcrumbs\"\n style={styleCombined}\n className={classes}\n aria-label=\"Breadcrumb\"\n {...rest}\n ref={ref}\n >\n {Children.map(children, (link, i) => {\n if (i + 1 === linkCount) {\n return (\n <Text\n inline\n size=\"small\"\n style={{\n fontWeight: \"bold\",\n }}\n >\n {link.props.children}\n </Text>\n );\n } else {\n return (\n <>\n {cloneElement(link as ReactElement)}\n <Icon svg={ChevronRight} aria-hidden=\"true\" />\n </>\n );\n }\n })}\n </nav>\n );\n },\n ),\n {\n /**\n * BreadcrumbsLink component for individual breadcrumb navigation items.\n *\n * Features:\n * - Renders as a clickable link with secondary appearance\n * - Supports all standard anchor element props\n * - Includes layout utilities for positioning and spacing\n * - Uses small text size for consistent styling\n * - Fully accessible with proper focus management\n * - Automatically applies secondary link styling\n *\n * @example\n * <Breadcrumbs.Link href=\"/dashboard\">Dashboard</Breadcrumbs.Link>\n */\n Link: BreadcrumbsLink,\n },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"names":["ChevronRight"],"mappings":";;;;;;;;;AACA,MAAM,eAAe,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,gDAAgD,EAAE,CAAC,CAAC;;;;;;;;AC8BlR,MAAM,eAAA,GAAkB,UAAA,CAG7B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAA,EAAO,GAAG,MAAK,GAAI,cAAA;AAEhD,EAAA,MAAM,OAAA,GAAU,GAAG,CAAC,MAAA,CAAO,kBAAkB,CAAC,CAAA,EAAG,SAAA,EAAW,EAAE,CAAA;AAE9D,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,GAAG,KAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,CAAA;AAAA,MACV,UAAA,EAAS,kBAAA;AAAA,MACT,KAAA,EAAO,aAAA;AAAA,MACP,UAAA,EAAW,WAAA;AAAA,MACX,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,MAAA,EAAM,MACtB,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAC,CAAA;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;;ACZvB,MAAM,cAAc,MAAA,CAAO,MAAA;AAAA,EAChC,UAAA;AAAA,IACE,SAAS,gBAAA,CAAiB,KAAA,EAAO,GAAA,EAAK;AACpC,MAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,MAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAA,EAAO,GAAG,MAAK,GAAI,cAAA;AAEhD,MAAA,MAAM,OAAA,GAAU,GAAG,CAAC,MAAA,CAAO,aAAa,CAAC,CAAA,EAAG,SAAA,EAAW,EAAE,CAAA;AAEzD,MAAA,MAAM,aAAA,GAAgB;AAAA,QACpB,GAAG,KAAA;AAAA,QACH,GAAG;AAAA,OACL;AAEA,MAAA,MAAM,SAAA,GAAY,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA;AAEzC,MAAA,uBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,UAAA,EAAS,aAAA;AAAA,UACT,KAAA,EAAO,aAAA;AAAA,UACP,SAAA,EAAW,OAAA;AAAA,UACX,YAAA,EAAW,YAAA;AAAA,UACV,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,QAAA,EAAU,CAAC,MAAM,CAAA,KAAM;AACnC,YAAA,IAAI,CAAA,GAAI,MAAM,SAAA,EAAW;AACvB,cAAA,uBACE,GAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACC,MAAA,EAAM,IAAA;AAAA,kBACN,IAAA,EAAK,OAAA;AAAA,kBACL,KAAA,EAAO;AAAA,oBACL,UAAA,EAAY;AAAA,mBACd;AAAA,kBAEC,eAAK,KAAA,CAAM;AAAA;AAAA,eACd;AAAA,YAEJ,CAAA,MAAO;AACL,cAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,gBAAA,YAAA,CAAa,IAAoB,CAAA;AAAA,gCAClC,GAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAKA,eAAA,EAAc,eAAY,MAAA,EAAO;AAAA,eAAA,EAC9C,CAAA;AAAA,YAEJ;AAAA,UACF,CAAC;AAAA;AAAA,OACH;AAAA,IAEJ;AAAA,GACF;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeE,IAAA,EAAM;AAAA;AAEV;AACA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._breadcrumbs_1dm38_1 {
1
+ .anvil2 {._breadcrumbs_1dm38_1 {
2
2
  all: unset;
3
3
  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
4
4
  font-size: 100%;
@@ -1,2 +1,2 @@
1
- export { B as Breadcrumbs, B as default } from './Breadcrumbs-CYmciJ1D.js';
1
+ export { B as Breadcrumbs, B as default } from './Breadcrumbs-CAJMeA1D.js';
2
2
  //# sourceMappingURL=Breadcrumbs.js.map
package/dist/Button.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._button_whupr_1 {
1
+ .anvil2 {._button_whupr_1 {
2
2
  --a2-internal-button-background-color: var(--a2-mod-button-background-color);
3
3
  --a2-internal-button-foreground-color: var(--a2-mod-button-foreground-color);
4
4
  --a2-mod-button-background-color: var(--a2-button-secondary-background-color, var(--a2-background-color-secondary, light-dark(rgba(4, 4, 4, 0.0588235294), rgba(255, 255, 255, 0.0784313725))));
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._button-compound_de23z_1 {
1
+ .anvil2 {._button-compound_de23z_1 {
2
2
  --a2-mod-button-compound-border-radius: var(--a2-border-radius-none, var(--a2-radius-0, 0rem));
3
3
  --a2-mod-button-background-color: transparent;
4
4
  --a2-mod-button-background-color-active: var(--a2-button-secondary-background-color-active, var(--a2-background-color-secondary-active, light-dark(rgba(4, 4, 4, 0.1607843137), rgba(255, 255, 255, 0.1607843137))));
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._button-toggle_i6zdh_1 {
1
+ .anvil2 {._button-toggle_i6zdh_1 {
2
2
  --a2-internal-button-toggle-background-color: var(
3
3
  --a2-mod-button-toggle-unpressed-background-color
4
4
  );
package/dist/Calendar.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._calendar_13hkc_1 {
1
+ .anvil2 {._calendar_13hkc_1 {
2
2
  --a2-mod-calendar-gap-size: var(--a2-size-4, 1rem);
3
3
  --a2-mod-calendar-range-fill-background-color: var(--a2-calendar-range-fill-background-color, var(--a2-background-color-primary-subdued, light-dark(var(--a2-color-blue-50, #e6f1ff), rgba(112, 177, 255, 0.2))));
4
4
  all: unset;
@@ -232,7 +232,7 @@
232
232
  to {
233
233
  opacity: 1;
234
234
  }
235
- }.anvil2{@layer starter, reset, base, state, application;._year-selector_1jh12_1 {
235
+ }.anvil2 {._year-selector_1jh12_1 {
236
236
  box-sizing: border-box;
237
237
  height: 40dvh;
238
238
  overflow: auto;
package/dist/Card.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._card_ujr80_1 {
1
+ .anvil2 {._card_ujr80_1 {
2
2
  --a2-internal-card-background-color: var(--a2-mod-card-background-color);
3
3
  --a2-mod-card-background-color: var(--a2-card-default-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
4
4
  --a2-mod-card-background-color-strong: var(--a2-card-strong-background-color, var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
package/dist/Checkbox.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._wrapper_1if7o_1 {
1
+ .anvil2 {._wrapper_1if7o_1 {
2
2
  display: inline-flex;
3
3
  flex-direction: column;
4
4
  gap: var(--a2-size-1, 0.25rem);
@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { forwardRef, useRef, useState, useId, useLayoutEffect, useContext } from 'react';
3
3
  import { c as cx } from './index-De1g9FRV.js';
4
4
  import { u as useAccessibleColor, t as tinycolor } from './useAccessibleColor-BYKjkGRg.js';
5
- import { a as Avatar } from './Avatar-B4hRHku9.js';
5
+ import { a as Avatar } from './Avatar-Cw8B8xZV.js';
6
6
  import { S as SvgClose } from './close-DZj38AEh.js';
7
7
  import { I as Icon } from './Icon-BMMbp40n.js';
8
8
  import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
@@ -222,4 +222,4 @@ const Chip = forwardRef(
222
222
  Chip.displayName = Chip$1.displayName;
223
223
 
224
224
  export { Chip as C };
225
- //# sourceMappingURL=Chip-CR5i8mQW.js.map
225
+ //# sourceMappingURL=Chip-Da8c7tKP.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Chip-CR5i8mQW.js","sources":["../src/components/Chip/internal/Chip.tsx","../src/components/Chip/Chip.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n KeyboardEvent,\n MouseEvent,\n forwardRef,\n useContext,\n useRef,\n useLayoutEffect,\n useState,\n useId,\n type ReactNode,\n} from \"react\";\nimport cx from \"classnames\";\nimport tinycolor from \"tinycolor2\";\n\nimport { Avatar, AvatarProps } from \"../../Avatar/internal/Avatar\";\nimport { useAccessibleColor, usePrefersColorScheme } from \"../../../hooks\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\n\nimport styles from \"../Chip.module.scss\";\nimport { Icon } from \"../../Icon\";\nimport { SrOnly } from \"../../SrOnly/SrOnly\";\nimport { LayoutUtilProps, Size } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { ThemeProviderContext } from \"../../../providers/ThemeProvider/internal/ThemeProviderContext\";\n\n/**\n * Props for the Chip component\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type ChipBaseProps = Omit<ComponentPropsWithoutRef<\"span\">, \"prefix\"> &\n Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n /**\n * The text that displays in the chip.\n */\n label: string;\n /**\n * Color of the Chip\n */\n color?: string;\n /**\n * Wraps text when it overflows\n */\n textWrap?: boolean;\n /**\n * Content displayed in the chip, before the text.\n */\n prefix?: ReactNode;\n\n /**\n * Image URL to display in an avatar before the chip text.\n */\n avatar?: AvatarProps[\"image\"];\n\n /**\n * Content displayed in the chip, after the text.\n */\n suffix?: ReactNode;\n };\n\ntype ChipClickHandler = (\n e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>,\n) => void;\n\ntype ChipCloseHandler = (\n e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>,\n) => void;\n\ntype SmallChipHandlers =\n | {\n /**\n * Callback for when the Chip is clicked\n *\n * @remarks\n * Adding this will make Chip focusable\n */\n onClick?: ChipClickHandler;\n /**\n * Called when the component is closed. If supplied, a close button will be rendered.\n * @returns void\n */\n onClose?: never;\n }\n | {\n /**\n * Called when the component is closed. If supplied, a close button will be rendered.\n * @returns void\n */\n onClose?: ChipCloseHandler;\n /**\n * Callback for when the Chip is clicked\n *\n * @remarks\n * Adding this will make Chip focusable\n */\n onClick?: never;\n };\n\ntype SmallChipProps = ChipBaseProps & {\n /**\n * The size of the chip\n * @default medium\n */\n size: Extract<Size, \"small\">;\n} & SmallChipHandlers;\n\ntype MediumChipProps = ChipBaseProps & {\n /**\n * The size of the chip\n * @default medium\n */\n size?: Extract<Size, \"medium\">;\n /**\n * Callback for when the Chip is clicked\n *\n * @remarks\n * Adding this will make Chip focusable\n */\n onClick?: ChipClickHandler;\n /**\n * Called when the component is closed. If supplied, a close button will be rendered.\n * @returns void\n */\n onClose?: ChipCloseHandler;\n};\n\nexport type ChipProps = SmallChipProps | MediumChipProps;\n\n/**\n * Chip component for displaying compact information or tags.\n *\n * Features:\n * - Configurable sizes (small, medium)\n * - Custom color support with automatic contrast calculation\n * - Optional click handler for interactive chips\n * - Optional close button for removable chips\n * - Text wrapping support for long labels\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation (Enter/Space to click, Delete/Backspace to close)\n * - Screen reader instructions for removal actions\n * - Theme-aware color adaptation\n * - Layout utility props for positioning and spacing\n *\n * @example\n * <Chip\n * label=\"JavaScript\"\n * color=\"#f7df1e\"\n * onClose={(e) => console.log('Chip removed')}\n * onClick={(e) => console.log('Chip clicked')}\n * />\n */\nexport const Chip = forwardRef<HTMLSpanElement, ChipProps>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n color,\n onClose,\n onClick,\n label,\n style,\n textWrap,\n prefix,\n suffix,\n avatar,\n size = \"medium\",\n tabIndex,\n ...rest\n } = componentProps;\n\n const innerRef = useRef<HTMLSpanElement>(null);\n const [isMultiline, setIsMultiline] = useState(false);\n const descriptionId = useId();\n\n useLayoutEffect(() => {\n const element = innerRef.current;\n\n const getSingleLineHeight = (element: HTMLSpanElement | null) => {\n if (avatar == null) return 0;\n if (!element) return 0;\n const computedStyle = getComputedStyle(element);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n return lineHeight + paddingTop + paddingBottom;\n };\n\n const singleLineHeight = getSingleLineHeight(element);\n\n const observer = new ResizeObserver(() => {\n if (element && avatar != null) {\n // If actual height is significantly larger than single line, we have multiple lines\n // Using 1.5 threshold to account for rounding\n setIsMultiline(element.clientHeight > singleLineHeight * 1.5);\n }\n });\n\n if (element) {\n observer.observe(element);\n }\n\n return () => {\n if (element) {\n observer.unobserve(element);\n }\n };\n }, [avatar]);\n\n /*\n * @TODO: below to be updated with localization\n * removeTextIndex is for when removeText comes after the label depending on the language\n */\n const removeText = \", removeable chip\";\n const newLabel = `${label}${onClose ? removeText : \"\"}`;\n\n const ChipClassNames = cx(styles[\"chip\"], className, {\n [styles[\"size-small\"]]: size === \"small\",\n [styles[\"has-close\"]]: !!onClose,\n [styles[\"text-wrap\"]]: textWrap,\n });\n\n const AvatarClassNames = cx(styles[\"avatar\"], {\n [styles[\"multiline\"]]: textWrap && isMultiline,\n });\n\n const { mode: themeMode } = useContext(ThemeProviderContext);\n const { mode: sysMode } = usePrefersColorScheme();\n const mode = themeMode ?? sysMode;\n\n const { foreground, background, border } = useAccessibleColor(color, mode);\n\n const bgObj = tinycolor(background);\n\n const styleWithColor = {\n \"--a2-inline-bg-color\": color && background,\n \"--a2-inline-bg-color-hover\": color && bgObj.lighten(10).toHexString(),\n \"--a2-inline-bg-color-active\": color && bgObj.darken(10).toHexString(),\n \"--a2-inline-font-color\": color && foreground,\n \"--a2-inline-border-color\": color && border,\n \"--a2-inline-close-background-color-hover\": color\n ? bgObj.isDark()\n ? bgObj.lighten(10).toHexString()\n : bgObj.darken(10).toHexString()\n : undefined,\n \"--a2-inline-close-background-color-active\": color\n ? bgObj.isDark()\n ? bgObj.lighten(15).toHexString()\n : bgObj.darken(15).toHexString()\n : undefined,\n ...style,\n ...layoutStyles,\n };\n\n const onKeyUpHandler = (e: KeyboardEvent<HTMLSpanElement>) => {\n switch (e.code) {\n case \"Delete\":\n case \"Backspace\":\n onClose?.(e);\n break;\n\n case \"Enter\":\n case \"Space\":\n onClick?.(e);\n break;\n\n default:\n break;\n }\n };\n\n return (\n <span\n className={ChipClassNames}\n style={styleWithColor}\n data-anv=\"chip\"\n role={onClick ? \"button\" : undefined}\n {...(onClick || onClose ? { [\"aria-label\"]: newLabel } : {})}\n {...(onClose ? { [\"aria-describedby\"]: descriptionId } : {})}\n {...rest}\n ref={ref}\n onClick={onClick}\n onKeyUp={onKeyUpHandler}\n tabIndex={onClick || onClose ? 0 : tabIndex}\n >\n {avatar != null ? (\n <span className={AvatarClassNames}>\n <Avatar\n className={styles.avatarInner}\n name={label}\n color={color}\n image={avatar}\n size={size === \"small\" ? \"xsmall\" : \"small\"}\n />\n </span>\n ) : null}\n\n {prefix != null ? <span className={styles.prefix}>{prefix}</span> : null}\n\n <span className={styles.inner} ref={innerRef}>\n {label}\n </span>\n\n {suffix != null ? <span className={styles.suffix}>{suffix}</span> : null}\n\n {!!onClose && (\n <>\n <span\n aria-hidden\n className={styles[\"close\"]}\n onClick={(e) => {\n e.stopPropagation();\n onClose(e);\n }}\n >\n <Icon aria-hidden svg={Close} size={size} />\n </span>\n <SrOnly id={descriptionId}>\n Press Delete or Backspace to remove.\n </SrOnly>\n </>\n )}\n </span>\n );\n});\n\nChip.displayName = \"Chip\";\n","import { ChipProps as CoreChipProps, Chip as CoreChip } from \"./internal/Chip\";\nimport { Icon as CoreIcon, IconProps as CoreIconProps } from \"../Icon\";\nimport { AvatarProps as CoreAvatarProps } from \"../Avatar/internal/Avatar\";\n\nimport { forwardRef, type Ref } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, DistributiveOmit } from \"../../types\";\nimport { AiMarkBooleanProps } from \"../../types/ai-marks\";\nimport { AiMark } from \"../AiMark/AiMark\";\n\n/**\n * Props for the Chip component\n * @property {string} label - The text that displays in the chip\n * @property {\"small\" | \"medium\"} [size] - The size of the chip\n * @property {string} [color] - Color of the Chip\n * @property {boolean} [aiMark] - Whether to display an AI mark icon in the chip\n * @property {(e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClick] - Callback for when the Chip is clicked\n * @property {(e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClose] - Called when the component is closed\n * @property {boolean} [textWrap] - Wraps text when it overflows\n * @property {Svg} [icon] - Icon displayed in the chip, before the text.\n * @property {string} [avatar] - Image URL to display in an avatar before the chip text.\n * @extends CoreChipProps\n * @extends DataTrackingId\n * @extends AiMarkBooleanProps\n */\nexport type ChipProps = DistributiveOmit<\n CoreChipProps,\n \"prefix\" | \"avatar\" | \"suffix\"\n> &\n DataTrackingId &\n AiMarkBooleanProps &\n (\n | { icon?: CoreIconProps[\"svg\"]; avatar?: never }\n | { icon?: never; avatar?: CoreAvatarProps[\"image\"] }\n );\n\n/**\n * Chip component for displaying compact information or tags.\n *\n * Features:\n * - Configurable sizes (small, medium)\n * - Custom color support with automatic contrast calculation\n * - Optional click handler for interactive chips\n * - Optional close button for removable chips\n * - Optional AI mark icon to indicate AI-generated content\n * - Automatic AI mark type selection: gradient on default chips, inherited color on colored chips\n * - AI mark on clickable chips (hover/focus morph temporarily disabled; see @TODO in source)\n * - Text wrapping support for long labels\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation (Enter/Space to click, Delete/Backspace to close)\n * - Screen reader instructions for removal actions\n * - Theme-aware color adaptation\n * - Layout utility props for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Chip\n * label=\"JavaScript\"\n * color=\"#f7df1e\"\n * onClose={(e) => console.log('Chip removed')}\n * onClick={(e) => console.log('Chip clicked')}\n * />\n *\n * @example\n * <Chip label=\"AI Generated\" aiMark />\n */\nexport const Chip = forwardRef(\n (\n {\n icon,\n aiMark,\n onBlur,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n ...props\n }: ChipProps,\n ref: Ref<HTMLSpanElement>,\n ) => {\n const data = {\n label: props.label,\n size: props.size,\n color: props.color,\n };\n\n const trackingId = useTrackingId({\n name: \"Chip\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const prefix =\n icon != null ? (\n <CoreIcon\n svg={icon}\n color=\"var(--a2-inline-font-color)\"\n size={props.size}\n />\n ) : null;\n\n const aiMarkType = props.color ? \"default\" : \"gradient\";\n\n // @TODO Re-enable AI mark hover/focus morph for `aiMark` + `onClick` chips after publish.\n // Disabled: composed animation misaligned vs static asset / layout shift (see Chip AI Mark Fix 1 stash).\n const suffix = aiMark ? (\n <AiMark\n type={aiMarkType}\n size=\"small\"\n color={props.color ? \"var(--int-font-color)\" : undefined}\n />\n ) : undefined;\n\n const interactionProps = {\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n };\n\n return (\n <CoreChip\n ref={ref}\n data-tracking-id={trackingId}\n {...props}\n {...interactionProps}\n prefix={prefix}\n suffix={suffix}\n />\n );\n },\n);\nChip.displayName = CoreChip.displayName;\n"],"names":["Chip","element","Close","CoreIcon","CoreChip"],"mappings":"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"}
1
+ {"version":3,"file":"Chip-Da8c7tKP.js","sources":["../src/components/Chip/internal/Chip.tsx","../src/components/Chip/Chip.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n KeyboardEvent,\n MouseEvent,\n forwardRef,\n useContext,\n useRef,\n useLayoutEffect,\n useState,\n useId,\n type ReactNode,\n} from \"react\";\nimport cx from \"classnames\";\nimport tinycolor from \"tinycolor2\";\n\nimport { Avatar, AvatarProps } from \"../../Avatar/internal/Avatar\";\nimport { useAccessibleColor, usePrefersColorScheme } from \"../../../hooks\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\n\nimport styles from \"../Chip.module.scss\";\nimport { Icon } from \"../../Icon\";\nimport { SrOnly } from \"../../SrOnly/SrOnly\";\nimport { LayoutUtilProps, Size } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { ThemeProviderContext } from \"../../../providers/ThemeProvider/internal/ThemeProviderContext\";\n\n/**\n * Props for the Chip component\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type ChipBaseProps = Omit<ComponentPropsWithoutRef<\"span\">, \"prefix\"> &\n Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n /**\n * The text that displays in the chip.\n */\n label: string;\n /**\n * Color of the Chip\n */\n color?: string;\n /**\n * Wraps text when it overflows\n */\n textWrap?: boolean;\n /**\n * Content displayed in the chip, before the text.\n */\n prefix?: ReactNode;\n\n /**\n * Image URL to display in an avatar before the chip text.\n */\n avatar?: AvatarProps[\"image\"];\n\n /**\n * Content displayed in the chip, after the text.\n */\n suffix?: ReactNode;\n };\n\ntype ChipClickHandler = (\n e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>,\n) => void;\n\ntype ChipCloseHandler = (\n e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>,\n) => void;\n\ntype SmallChipHandlers =\n | {\n /**\n * Callback for when the Chip is clicked\n *\n * @remarks\n * Adding this will make Chip focusable\n */\n onClick?: ChipClickHandler;\n /**\n * Called when the component is closed. If supplied, a close button will be rendered.\n * @returns void\n */\n onClose?: never;\n }\n | {\n /**\n * Called when the component is closed. If supplied, a close button will be rendered.\n * @returns void\n */\n onClose?: ChipCloseHandler;\n /**\n * Callback for when the Chip is clicked\n *\n * @remarks\n * Adding this will make Chip focusable\n */\n onClick?: never;\n };\n\ntype SmallChipProps = ChipBaseProps & {\n /**\n * The size of the chip\n * @default medium\n */\n size: Extract<Size, \"small\">;\n} & SmallChipHandlers;\n\ntype MediumChipProps = ChipBaseProps & {\n /**\n * The size of the chip\n * @default medium\n */\n size?: Extract<Size, \"medium\">;\n /**\n * Callback for when the Chip is clicked\n *\n * @remarks\n * Adding this will make Chip focusable\n */\n onClick?: ChipClickHandler;\n /**\n * Called when the component is closed. If supplied, a close button will be rendered.\n * @returns void\n */\n onClose?: ChipCloseHandler;\n};\n\nexport type ChipProps = SmallChipProps | MediumChipProps;\n\n/**\n * Chip component for displaying compact information or tags.\n *\n * Features:\n * - Configurable sizes (small, medium)\n * - Custom color support with automatic contrast calculation\n * - Optional click handler for interactive chips\n * - Optional close button for removable chips\n * - Text wrapping support for long labels\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation (Enter/Space to click, Delete/Backspace to close)\n * - Screen reader instructions for removal actions\n * - Theme-aware color adaptation\n * - Layout utility props for positioning and spacing\n *\n * @example\n * <Chip\n * label=\"JavaScript\"\n * color=\"#f7df1e\"\n * onClose={(e) => console.log('Chip removed')}\n * onClick={(e) => console.log('Chip clicked')}\n * />\n */\nexport const Chip = forwardRef<HTMLSpanElement, ChipProps>((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n color,\n onClose,\n onClick,\n label,\n style,\n textWrap,\n prefix,\n suffix,\n avatar,\n size = \"medium\",\n tabIndex,\n ...rest\n } = componentProps;\n\n const innerRef = useRef<HTMLSpanElement>(null);\n const [isMultiline, setIsMultiline] = useState(false);\n const descriptionId = useId();\n\n useLayoutEffect(() => {\n const element = innerRef.current;\n\n const getSingleLineHeight = (element: HTMLSpanElement | null) => {\n if (avatar == null) return 0;\n if (!element) return 0;\n const computedStyle = getComputedStyle(element);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n return lineHeight + paddingTop + paddingBottom;\n };\n\n const singleLineHeight = getSingleLineHeight(element);\n\n const observer = new ResizeObserver(() => {\n if (element && avatar != null) {\n // If actual height is significantly larger than single line, we have multiple lines\n // Using 1.5 threshold to account for rounding\n setIsMultiline(element.clientHeight > singleLineHeight * 1.5);\n }\n });\n\n if (element) {\n observer.observe(element);\n }\n\n return () => {\n if (element) {\n observer.unobserve(element);\n }\n };\n }, [avatar]);\n\n /*\n * @TODO: below to be updated with localization\n * removeTextIndex is for when removeText comes after the label depending on the language\n */\n const removeText = \", removeable chip\";\n const newLabel = `${label}${onClose ? removeText : \"\"}`;\n\n const ChipClassNames = cx(styles[\"chip\"], className, {\n [styles[\"size-small\"]]: size === \"small\",\n [styles[\"has-close\"]]: !!onClose,\n [styles[\"text-wrap\"]]: textWrap,\n });\n\n const AvatarClassNames = cx(styles[\"avatar\"], {\n [styles[\"multiline\"]]: textWrap && isMultiline,\n });\n\n const { mode: themeMode } = useContext(ThemeProviderContext);\n const { mode: sysMode } = usePrefersColorScheme();\n const mode = themeMode ?? sysMode;\n\n const { foreground, background, border } = useAccessibleColor(color, mode);\n\n const bgObj = tinycolor(background);\n\n const styleWithColor = {\n \"--a2-inline-bg-color\": color && background,\n \"--a2-inline-bg-color-hover\": color && bgObj.lighten(10).toHexString(),\n \"--a2-inline-bg-color-active\": color && bgObj.darken(10).toHexString(),\n \"--a2-inline-font-color\": color && foreground,\n \"--a2-inline-border-color\": color && border,\n \"--a2-inline-close-background-color-hover\": color\n ? bgObj.isDark()\n ? bgObj.lighten(10).toHexString()\n : bgObj.darken(10).toHexString()\n : undefined,\n \"--a2-inline-close-background-color-active\": color\n ? bgObj.isDark()\n ? bgObj.lighten(15).toHexString()\n : bgObj.darken(15).toHexString()\n : undefined,\n ...style,\n ...layoutStyles,\n };\n\n const onKeyUpHandler = (e: KeyboardEvent<HTMLSpanElement>) => {\n switch (e.code) {\n case \"Delete\":\n case \"Backspace\":\n onClose?.(e);\n break;\n\n case \"Enter\":\n case \"Space\":\n onClick?.(e);\n break;\n\n default:\n break;\n }\n };\n\n return (\n <span\n className={ChipClassNames}\n style={styleWithColor}\n data-anv=\"chip\"\n role={onClick ? \"button\" : undefined}\n {...(onClick || onClose ? { [\"aria-label\"]: newLabel } : {})}\n {...(onClose ? { [\"aria-describedby\"]: descriptionId } : {})}\n {...rest}\n ref={ref}\n onClick={onClick}\n onKeyUp={onKeyUpHandler}\n tabIndex={onClick || onClose ? 0 : tabIndex}\n >\n {avatar != null ? (\n <span className={AvatarClassNames}>\n <Avatar\n className={styles.avatarInner}\n name={label}\n color={color}\n image={avatar}\n size={size === \"small\" ? \"xsmall\" : \"small\"}\n />\n </span>\n ) : null}\n\n {prefix != null ? <span className={styles.prefix}>{prefix}</span> : null}\n\n <span className={styles.inner} ref={innerRef}>\n {label}\n </span>\n\n {suffix != null ? <span className={styles.suffix}>{suffix}</span> : null}\n\n {!!onClose && (\n <>\n <span\n aria-hidden\n className={styles[\"close\"]}\n onClick={(e) => {\n e.stopPropagation();\n onClose(e);\n }}\n >\n <Icon aria-hidden svg={Close} size={size} />\n </span>\n <SrOnly id={descriptionId}>\n Press Delete or Backspace to remove.\n </SrOnly>\n </>\n )}\n </span>\n );\n});\n\nChip.displayName = \"Chip\";\n","import { ChipProps as CoreChipProps, Chip as CoreChip } from \"./internal/Chip\";\nimport { Icon as CoreIcon, IconProps as CoreIconProps } from \"../Icon\";\nimport { AvatarProps as CoreAvatarProps } from \"../Avatar/internal/Avatar\";\n\nimport { forwardRef, type Ref } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, DistributiveOmit } from \"../../types\";\nimport { AiMarkBooleanProps } from \"../../types/ai-marks\";\nimport { AiMark } from \"../AiMark/AiMark\";\n\n/**\n * Props for the Chip component\n * @property {string} label - The text that displays in the chip\n * @property {\"small\" | \"medium\"} [size] - The size of the chip\n * @property {string} [color] - Color of the Chip\n * @property {boolean} [aiMark] - Whether to display an AI mark icon in the chip\n * @property {(e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClick] - Callback for when the Chip is clicked\n * @property {(e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClose] - Called when the component is closed\n * @property {boolean} [textWrap] - Wraps text when it overflows\n * @property {Svg} [icon] - Icon displayed in the chip, before the text.\n * @property {string} [avatar] - Image URL to display in an avatar before the chip text.\n * @extends CoreChipProps\n * @extends DataTrackingId\n * @extends AiMarkBooleanProps\n */\nexport type ChipProps = DistributiveOmit<\n CoreChipProps,\n \"prefix\" | \"avatar\" | \"suffix\"\n> &\n DataTrackingId &\n AiMarkBooleanProps &\n (\n | { icon?: CoreIconProps[\"svg\"]; avatar?: never }\n | { icon?: never; avatar?: CoreAvatarProps[\"image\"] }\n );\n\n/**\n * Chip component for displaying compact information or tags.\n *\n * Features:\n * - Configurable sizes (small, medium)\n * - Custom color support with automatic contrast calculation\n * - Optional click handler for interactive chips\n * - Optional close button for removable chips\n * - Optional AI mark icon to indicate AI-generated content\n * - Automatic AI mark type selection: gradient on default chips, inherited color on colored chips\n * - AI mark on clickable chips (hover/focus morph temporarily disabled; see @TODO in source)\n * - Text wrapping support for long labels\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation (Enter/Space to click, Delete/Backspace to close)\n * - Screen reader instructions for removal actions\n * - Theme-aware color adaptation\n * - Layout utility props for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Chip\n * label=\"JavaScript\"\n * color=\"#f7df1e\"\n * onClose={(e) => console.log('Chip removed')}\n * onClick={(e) => console.log('Chip clicked')}\n * />\n *\n * @example\n * <Chip label=\"AI Generated\" aiMark />\n */\nexport const Chip = forwardRef(\n (\n {\n icon,\n aiMark,\n onBlur,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n ...props\n }: ChipProps,\n ref: Ref<HTMLSpanElement>,\n ) => {\n const data = {\n label: props.label,\n size: props.size,\n color: props.color,\n };\n\n const trackingId = useTrackingId({\n name: \"Chip\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n const prefix =\n icon != null ? (\n <CoreIcon\n svg={icon}\n color=\"var(--a2-inline-font-color)\"\n size={props.size}\n />\n ) : null;\n\n const aiMarkType = props.color ? \"default\" : \"gradient\";\n\n // @TODO Re-enable AI mark hover/focus morph for `aiMark` + `onClick` chips after publish.\n // Disabled: composed animation misaligned vs static asset / layout shift (see Chip AI Mark Fix 1 stash).\n const suffix = aiMark ? (\n <AiMark\n type={aiMarkType}\n size=\"small\"\n color={props.color ? \"var(--int-font-color)\" : undefined}\n />\n ) : undefined;\n\n const interactionProps = {\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n };\n\n return (\n <CoreChip\n ref={ref}\n data-tracking-id={trackingId}\n {...props}\n {...interactionProps}\n prefix={prefix}\n suffix={suffix}\n />\n );\n },\n);\nChip.displayName = CoreChip.displayName;\n"],"names":["Chip","element","Close","CoreIcon","CoreChip"],"mappings":"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"}
package/dist/Chip.css CHANGED
@@ -1,4 +1,4 @@
1
- .anvil2{@layer starter, reset, base, state, application;._chip_1j296_1 {
1
+ .anvil2 {._chip_1j296_1 {
2
2
  --a2-internal-chip-background-color: var(
3
3
  --a2-inline-bg-color,
4
4
  var(--a2-mod-chip-background-color)
package/dist/Chip.js CHANGED
@@ -1,2 +1,2 @@
1
- export { C as Chip, C as default } from './Chip-CR5i8mQW.js';
1
+ export { C as Chip, C as default } from './Chip-Da8c7tKP.js';
2
2
  //# sourceMappingURL=Chip.js.map
@@ -1,12 +1,12 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { createContext, useContext, useEffect, useMemo, useState, useRef, forwardRef, useId, useLayoutEffect } from 'react';
3
3
  import { P as Popover, u as usePopoverContext } from './Popover-CyB7yzSf.js';
4
- import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-Do7lQ5rw.js';
4
+ import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-kMRqbXwu.js';
5
5
  import { c as cx } from './index-De1g9FRV.js';
6
6
  import { u as useDownshiftEnvironment, c as useMultipleSelection, b as useSelect, a as useCombobox$1 } from './downshift.esm-xtSnQp44.js';
7
7
  import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
8
8
  import { l as listboxStyles } from './Listbox.module-CfpLm9pS.js';
9
- import { T as Text } from './Text-J5YtSSXY.js';
9
+ import { T as Text } from './Text-BH8gglCL.js';
10
10
  import { D as Divider } from './Divider-Ds3WKsKa.js';
11
11
  import { F as Flex } from './Flex-DOUtHiPi.js';
12
12
  import { S as Spinner } from './Spinner-lPMo68yW.js';
@@ -14,7 +14,7 @@ import { l as listViewStyles } from './ListView.module-CRk9NfLG.js';
14
14
  import { I as Icon } from './Icon-BMMbp40n.js';
15
15
  import { c as checkboxStyles } from './Checkbox.module-TYMeYIxw.js';
16
16
  import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
17
- import { A as Avatar } from './Avatar-NbFc4Ovc.js';
17
+ import { A as Avatar } from './Avatar-BmNcLUg-.js';
18
18
  import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
19
19
  import { useTrackingId } from './useTrackingId.js';
20
20
  import { S as SvgCheck } from './check-Cf67OWrZ.js';
@@ -2472,4 +2472,4 @@ const Combobox = Object.assign(
2472
2472
  const ComboboxElement = Combobox;
2473
2473
 
2474
2474
  export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxList as c };
2475
- //# sourceMappingURL=Combobox-BffGTugd.js.map
2475
+ //# sourceMappingURL=Combobox-CBLaT1lU.js.map