@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.
- package/CHANGELOG.md +12 -0
- package/dist/AiMark.css +3 -3
- package/dist/{Alert-DmbqtMg_.js → Alert-C04WIw7A.js} +2 -2
- package/dist/{Alert-DmbqtMg_.js.map → Alert-C04WIw7A.js.map} +1 -1
- package/dist/Alert.css +1 -1
- package/dist/Alert.js +1 -1
- package/dist/Announcement.css +1 -1
- package/dist/AnvilProvider.css +1 -2
- package/dist/{Avatar-NbFc4Ovc.js → Avatar-BmNcLUg-.js} +2 -2
- package/dist/{Avatar-NbFc4Ovc.js.map → Avatar-BmNcLUg-.js.map} +1 -1
- package/dist/{Avatar-B4hRHku9.js → Avatar-Cw8B8xZV.js} +2 -2
- package/dist/Avatar-Cw8B8xZV.js.map +1 -0
- package/dist/Avatar.css +2 -2
- package/dist/Avatar.js +2 -2
- package/dist/Badge.css +1 -1
- package/dist/{Breadcrumbs-CYmciJ1D.js → Breadcrumbs-CAJMeA1D.js} +2 -2
- package/dist/{Breadcrumbs-CYmciJ1D.js.map → Breadcrumbs-CAJMeA1D.js.map} +1 -1
- package/dist/Breadcrumbs.css +1 -1
- package/dist/Breadcrumbs.js +1 -1
- package/dist/Button.css +1 -1
- package/dist/ButtonCompound.css +1 -1
- package/dist/ButtonToggle.css +1 -1
- package/dist/Calendar.css +2 -2
- package/dist/Card.css +1 -1
- package/dist/Checkbox.css +1 -1
- package/dist/{Chip-CR5i8mQW.js → Chip-Da8c7tKP.js} +2 -2
- package/dist/{Chip-CR5i8mQW.js.map → Chip-Da8c7tKP.js.map} +1 -1
- package/dist/Chip.css +1 -1
- package/dist/Chip.js +1 -1
- package/dist/{Combobox-BffGTugd.js → Combobox-CBLaT1lU.js} +4 -4
- package/dist/{Combobox-BffGTugd.js.map → Combobox-CBLaT1lU.js.map} +1 -1
- package/dist/Combobox.css +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-D9Xj1nq5.js → DataTable-BDXdCF7J.js} +6 -6
- package/dist/{DataTable-D9Xj1nq5.js.map → DataTable-BDXdCF7J.js.map} +1 -1
- package/dist/DataTable.css +16 -16
- package/dist/DateFieldYearlessRange.css +1 -1
- package/dist/DaysOfTheWeek.css +1 -1
- package/dist/Details.css +1 -1
- package/dist/{Dialog-DGmF6qx3.js → Dialog-ByTyuybu.js} +4 -4
- package/dist/Dialog-ByTyuybu.js.map +1 -0
- package/dist/Dialog.css +1 -1
- package/dist/Dialog.js +1 -1
- package/dist/Divider.css +1 -1
- package/dist/DndSort.css +1 -1
- package/dist/{Drawer-iewBy1DW.js → Drawer-CwyfBcwt.js} +5 -5
- package/dist/{Drawer-iewBy1DW.js.map → Drawer-CwyfBcwt.js.map} +1 -1
- package/dist/Drawer.css +1 -1
- package/dist/Drawer.js +1 -1
- package/dist/DrillDown.css +1 -1
- package/dist/DrillDown.js +1 -1
- package/dist/{EditCard-D7-Ye7R0.js → EditCard-DqLSnkih.js} +2 -2
- package/dist/{EditCard-D7-Ye7R0.js.map → EditCard-DqLSnkih.js.map} +1 -1
- package/dist/EditCard.css +1 -1
- package/dist/EditCard.js +1 -1
- package/dist/FieldLabel.css +2 -2
- package/dist/FieldMessage.css +1 -1
- package/dist/{Toolbar-C1_etxss.js → FilterBar-BU8StPPd.js} +121 -933
- package/dist/FilterBar-BU8StPPd.js.map +1 -0
- package/dist/FilterBar.css +59 -0
- package/dist/FilterBar.d.ts +6 -0
- package/dist/FilterBar.js +2 -0
- package/dist/FilterBar.js.map +1 -0
- package/dist/Flex.css +1 -1
- package/dist/Grid.css +1 -1
- package/dist/Helper.css +1 -1
- package/dist/Icon.css +1 -1
- package/dist/InteractiveCard.css +1 -1
- package/dist/Layout.css +1 -1
- package/dist/Link.css +1 -1
- package/dist/List.css +1 -1
- package/dist/ListView.css +1 -1
- package/dist/{Listbox-DDlxpVu9.js → Listbox-C0tjQFDF.js} +2 -2
- package/dist/{Listbox-DDlxpVu9.js.map → Listbox-C0tjQFDF.js.map} +1 -1
- package/dist/Listbox.css +1 -1
- package/dist/Listbox.js +1 -1
- package/dist/Menu.css +1 -1
- package/dist/MultiSelectField.js +1 -1
- package/dist/{MultiSelectFieldSync-DZ3tm7zt.js → MultiSelectFieldSync-ueey5UBM.js} +4 -4
- package/dist/{MultiSelectFieldSync-DZ3tm7zt.js.map → MultiSelectFieldSync-ueey5UBM.js.map} +1 -1
- package/dist/MultiSelectFieldSync.css +1 -1
- package/dist/MultiSelectMenu.js +1 -1
- package/dist/{MultiSelectMenuSync-dgO9SmHi.js → MultiSelectMenuSync-D7hqugcQ.js} +4 -4
- package/dist/{MultiSelectMenuSync-dgO9SmHi.js.map → MultiSelectMenuSync-D7hqugcQ.js.map} +1 -1
- package/dist/NumberField.css +1 -1
- package/dist/Overflow.css +2 -2
- package/dist/{Page-Be1Blwme.js → Page-DbK-JKyB.js} +5 -5
- package/dist/{Page-Be1Blwme.js.map → Page-DbK-JKyB.js.map} +1 -1
- package/dist/Page.css +1 -1
- package/dist/Page.js +1 -1
- package/dist/{Pagination-USDJM5vi.js → Pagination-Bg5Nsdik.js} +2 -2
- package/dist/{Pagination-USDJM5vi.js.map → Pagination-Bg5Nsdik.js.map} +1 -1
- package/dist/Pagination.css +6 -6
- package/dist/Pagination.js +1 -1
- package/dist/Popover.css +1 -1
- package/dist/ProgressBar.css +1 -1
- package/dist/Radio.css +1 -1
- package/dist/{SearchField-CsRGYZx3.js → SearchField-BKJOW-vI.js} +3 -10
- package/dist/SearchField-BKJOW-vI.js.map +1 -0
- package/dist/SearchField-BplvDpBG.js +13 -0
- package/dist/SearchField-BplvDpBG.js.map +1 -0
- package/dist/SearchField.css +1 -1
- package/dist/SearchField.js +1 -1
- package/dist/SegmentedControl.css +1 -1
- package/dist/SelectCard.css +1 -1
- package/dist/SelectField.js +1 -1
- package/dist/{SelectFieldSync-C44hPeeS.js → SelectFieldSync-W_-jTf7z.js} +3 -3
- package/dist/{SelectFieldSync-C44hPeeS.js.map → SelectFieldSync-W_-jTf7z.js.map} +1 -1
- package/dist/SelectMenu.js +1 -1
- package/dist/{SelectMenuSync-V97oN85V.js → SelectMenuSync-QcjbQtCO.js} +4 -4
- package/dist/{SelectMenuSync-V97oN85V.js.map → SelectMenuSync-QcjbQtCO.js.map} +1 -1
- package/dist/{SelectOptions-CDoo4AUu.js → SelectOptions-BsX0f22q.js} +2 -2
- package/dist/{SelectOptions-CDoo4AUu.js.map → SelectOptions-BsX0f22q.js.map} +1 -1
- package/dist/{SelectTrigger-BWN3Tx43.js → SelectTrigger-BaDvF9JD.js} +3 -3
- package/dist/{SelectTrigger-BWN3Tx43.js.map → SelectTrigger-BaDvF9JD.js.map} +1 -1
- package/dist/SelectTrigger.js +1 -1
- package/dist/{SelectTriggerBase-Do7lQ5rw.js → SelectTriggerBase-kMRqbXwu.js} +2 -2
- package/dist/{SelectTriggerBase-Do7lQ5rw.js.map → SelectTriggerBase-kMRqbXwu.js.map} +1 -1
- package/dist/SelectTriggerBase.css +1 -1
- package/dist/SideNav.css +1 -1
- package/dist/Skeleton.css +1 -1
- package/dist/Spinner.css +1 -1
- package/dist/SrOnly.css +1 -1
- package/dist/StatusIcon.css +1 -1
- package/dist/Stepper.css +4 -4
- package/dist/Switch.css +1 -1
- package/dist/Tab.css +1 -1
- package/dist/Table.js +1 -1
- package/dist/{Text-J5YtSSXY.js → Text-BH8gglCL.js} +4 -4
- package/dist/Text-BH8gglCL.js.map +1 -0
- package/dist/Text.css +1 -1
- package/dist/Text.js +1 -1
- package/dist/TextField.css +1 -1
- package/dist/Textarea.css +1 -1
- package/dist/ThemeProvider.css +0 -1
- package/dist/{TimeField-DTg0CE5L.js → TimeField-Cz4tMYb3.js} +2 -2
- package/dist/{TimeField-DTg0CE5L.js.map → TimeField-Cz4tMYb3.js.map} +1 -1
- package/dist/TimeField.css +1 -1
- package/dist/TimeField.js +1 -1
- package/dist/TimezoneMessage.css +1 -1
- package/dist/Toast.js +2 -2
- package/dist/{Toaster-Bq42x6Gx.js → Toaster-BV8RjmIN.js} +2 -2
- package/dist/{Toaster-Bq42x6Gx.js.map → Toaster-BV8RjmIN.js.map} +1 -1
- package/dist/{Toaster-Dly3rfva.js → Toaster-DYGDohJT.js} +2 -2
- package/dist/{Toaster-Dly3rfva.js.map → Toaster-DYGDohJT.js.map} +1 -1
- package/dist/Toaster.css +1 -1
- package/dist/Toolbar-Dzj2KMEy.js +588 -0
- package/dist/Toolbar-Dzj2KMEy.js.map +1 -0
- package/dist/Toolbar.css +2 -96
- package/dist/Toolbar.js +2 -1
- package/dist/Toolbar.js.map +1 -1
- package/dist/ToolbarButtonToggle--2Ka05N8.js +284 -0
- package/dist/ToolbarButtonToggle--2Ka05N8.js.map +1 -0
- package/dist/ToolbarButtonToggle.css +41 -0
- package/dist/Tooltip.css +1 -1
- package/dist/YearlessDateInputWithPicker.css +2 -2
- package/dist/assets/icons/st/unsorted.svg +1 -1
- package/dist/beta/components/FilterBar/FilterBar.d.ts +87 -0
- package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterToggleButton.d.ts +1 -1
- package/dist/beta/components/FilterBar/index.d.ts +3 -0
- package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/FilterGroupContext.d.ts +5 -5
- package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/types.d.ts +2 -2
- package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/utils/test.d.ts +1 -0
- package/dist/beta/components/Toolbar/Toolbar.d.ts +0 -54
- package/dist/beta/components/Toolbar/index.d.ts +0 -1
- package/dist/beta/components/index.d.ts +1 -0
- package/dist/beta.js +9 -7
- package/dist/beta.js.map +1 -1
- package/dist/index.css +2 -2
- package/dist/index.js +19 -19
- package/dist/index2.css +1 -1
- package/dist/{syncFilterUtils-BLcRXQfd.js → syncFilterUtils-nJS_tCsu.js} +4 -4
- package/dist/{syncFilterUtils-BLcRXQfd.js.map → syncFilterUtils-nJS_tCsu.js.map} +1 -1
- package/dist/syncFilterUtils.css +4 -4
- package/dist/{useDrilldown-D5WWJRU2.js → useDrilldown-DwzT0Fse.js} +2 -2
- package/dist/{useDrilldown-D5WWJRU2.js.map → useDrilldown-DwzT0Fse.js.map} +1 -1
- package/dist/{useToggleSelection-D_2qS0P1.js → useToggleSelection-CAwGOeXk.js} +2 -2
- package/dist/{useToggleSelection-D_2qS0P1.js.map → useToggleSelection-CAwGOeXk.js.map} +1 -1
- package/package.json +9 -9
- package/dist/Avatar-B4hRHku9.js.map +0 -1
- package/dist/Dialog-DGmF6qx3.js.map +0 -1
- package/dist/SearchField-CsRGYZx3.js.map +0 -1
- package/dist/Text-J5YtSSXY.js.map +0 -1
- package/dist/Toolbar-C1_etxss.js.map +0 -1
- package/dist/beta/components/Toolbar/Filters/FilterGroup.d.ts +0 -25
- /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterButton.d.ts +0 -0
- /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterDateRange.d.ts +0 -0
- /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterDateSingle.d.ts +0 -0
- /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterDrawer.d.ts +0 -0
- /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterItemWrapper.d.ts +0 -0
- /package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterSelect.d.ts +0 -0
- /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{
|
|
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{
|
|
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{
|
|
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-
|
|
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-
|
|
116
|
+
//# sourceMappingURL=Alert-C04WIw7A.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert-
|
|
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{
|
|
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-
|
|
1
|
+
export { A as Alert, A as default } from './Alert-C04WIw7A.js';
|
|
2
2
|
//# sourceMappingURL=Alert.js.map
|
package/dist/Announcement.css
CHANGED
package/dist/AnvilProvider.css
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
@import 'https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'
|
|
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-
|
|
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-
|
|
35
|
+
//# sourceMappingURL=Avatar-BmNcLUg-.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar-
|
|
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-
|
|
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{
|
|
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{
|
|
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-
|
|
2
|
-
export { A as AvatarGroup } from './Avatar-
|
|
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{
|
|
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-
|
|
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-
|
|
107
|
+
//# sourceMappingURL=Breadcrumbs-CAJMeA1D.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs-
|
|
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":"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"}
|
package/dist/Breadcrumbs.css
CHANGED
package/dist/Breadcrumbs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { B as Breadcrumbs, B as default } from './Breadcrumbs-
|
|
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{
|
|
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))));
|
package/dist/ButtonCompound.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.anvil2{
|
|
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))));
|
package/dist/ButtonToggle.css
CHANGED
package/dist/Calendar.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.anvil2{
|
|
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{
|
|
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{
|
|
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
|
@@ -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-
|
|
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-
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJO,MAAMA,MAAA,GAAO,UAAA,CAAuC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACzE,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,cAAA;AAEJ,EAAA,MAAM,QAAA,GAAW,OAAwB,IAAI,CAAA;AAC7C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,gBAAgB,KAAA,EAAM;AAE5B,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,UAAU,QAAA,CAAS,OAAA;AAEzB,IAAA,MAAM,mBAAA,GAAsB,CAACC,QAAAA,KAAoC;AAC/D,MAAA,IAAI,MAAA,IAAU,MAAM,OAAO,CAAA;AAC3B,MAAA,IAAI,CAACA,UAAS,OAAO,CAAA;AACrB,MAAA,MAAM,aAAA,GAAgB,iBAAiBA,QAAO,CAAA;AAC9C,MAAA,MAAM,UAAA,GAAa,UAAA,CAAW,aAAA,CAAc,UAAU,CAAA;AACtD,MAAA,MAAM,UAAA,GAAa,UAAA,CAAW,aAAA,CAAc,UAAU,CAAA;AACtD,MAAA,MAAM,aAAA,GAAgB,UAAA,CAAW,aAAA,CAAc,aAAa,CAAA;AAC5D,MAAA,OAAO,aAAa,UAAA,GAAa,aAAA;AAAA,IACnC,CAAA;AAEA,IAAA,MAAM,gBAAA,GAAmB,oBAAoB,OAAO,CAAA;AAEpD,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,MAAM;AACxC,MAAA,IAAI,OAAA,IAAW,UAAU,IAAA,EAAM;AAG7B,QAAA,cAAA,CAAe,OAAA,CAAQ,YAAA,GAAe,gBAAA,GAAmB,GAAG,CAAA;AAAA,MAC9D;AAAA,IACF,CAAC,CAAA;AAED,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,IAC1B;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,QAAA,CAAS,UAAU,OAAO,CAAA;AAAA,MAC5B;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAMX,EAAA,MAAM,UAAA,GAAa,mBAAA;AACnB,EAAA,MAAM,WAAW,CAAA,EAAG,KAAK,CAAA,EAAG,OAAA,GAAU,aAAa,EAAE,CAAA,CAAA;AAErD,EAAA,MAAM,cAAA,GAAiB,EAAA,CAAG,MAAA,CAAO,MAAM,GAAG,SAAA,EAAW;AAAA,IACnD,CAAC,MAAA,CAAO,YAAY,CAAC,GAAG,IAAA,KAAS,OAAA;AAAA,IACjC,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG,CAAC,CAAC,OAAA;AAAA,IACzB,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG;AAAA,GACxB,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,EAAA,CAAG,MAAA,CAAO,QAAQ,CAAA,EAAG;AAAA,IAC5C,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG,QAAA,IAAY;AAAA,GACpC,CAAA;AAED,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAI,WAAW,oBAAoB,CAAA;AAC3D,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAQ,GAAI,qBAAA,EAAsB;AAChD,EAAA,MAAM,OAAO,SAAA,IAAa,OAAA;AAE1B,EAAA,MAAM,EAAE,UAAA,EAAY,UAAA,EAAY,QAAO,GAAI,kBAAA,CAAmB,OAAO,IAAI,CAAA;AAEzE,EAAA,MAAM,KAAA,GAAQ,UAAU,UAAU,CAAA;AAElC,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,wBAAwB,KAAA,IAAS,UAAA;AAAA,IACjC,8BAA8B,KAAA,IAAS,KAAA,CAAM,OAAA,CAAQ,EAAE,EAAE,WAAA,EAAY;AAAA,IACrE,+BAA+B,KAAA,IAAS,KAAA,CAAM,MAAA,CAAO,EAAE,EAAE,WAAA,EAAY;AAAA,IACrE,0BAA0B,KAAA,IAAS,UAAA;AAAA,IACnC,4BAA4B,KAAA,IAAS,MAAA;AAAA,IACrC,4CAA4C,KAAA,GACxC,KAAA,CAAM,MAAA,EAAO,GACX,MAAM,OAAA,CAAQ,EAAE,CAAA,CAAE,WAAA,KAClB,KAAA,CAAM,MAAA,CAAO,EAAE,CAAA,CAAE,aAAY,GAC/B,MAAA;AAAA,IACJ,6CAA6C,KAAA,GACzC,KAAA,CAAM,MAAA,EAAO,GACX,MAAM,OAAA,CAAQ,EAAE,CAAA,CAAE,WAAA,KAClB,KAAA,CAAM,MAAA,CAAO,EAAE,CAAA,CAAE,aAAY,GAC/B,MAAA;AAAA,IACJ,GAAG,KAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAsC;AAC5D,IAAA,QAAQ,EAAE,IAAA;AAAM,MACd,KAAK,QAAA;AAAA,MACL,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,CAAC,CAAA;AACX,QAAA;AAAA,MAEF,KAAK,OAAA;AAAA,MACL,KAAK,OAAA;AACH,QAAA,OAAA,GAAU,CAAC,CAAA;AACX,QAAA;AAGA;AACJ,EACF,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,KAAA,EAAO,cAAA;AAAA,MACP,UAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,UAAU,QAAA,GAAW,MAAA;AAAA,MAC1B,GAAI,WAAW,OAAA,GAAU,EAAE,CAAC,YAAY,GAAG,QAAA,EAAS,GAAI,EAAC;AAAA,MACzD,GAAI,UAAU,EAAE,CAAC,kBAAkB,GAAG,aAAA,KAAkB,EAAC;AAAA,MACzD,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA,EAAS,cAAA;AAAA,MACT,QAAA,EAAU,OAAA,IAAW,OAAA,GAAU,CAAA,GAAI,QAAA;AAAA,MAElC,QAAA,EAAA;AAAA,QAAA,MAAA,IAAU,IAAA,mBACT,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,gBAAA,EACf,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,WAAA;AAAA,YAClB,IAAA,EAAM,KAAA;AAAA,YACN,KAAA;AAAA,YACA,KAAA,EAAO,MAAA;AAAA,YACP,IAAA,EAAM,IAAA,KAAS,OAAA,GAAU,QAAA,GAAW;AAAA;AAAA,WAExC,CAAA,GACE,IAAA;AAAA,QAEH,MAAA,IAAU,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,MAAA,EAAS,kBAAO,CAAA,GAAU,IAAA;AAAA,4BAEnE,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,KAAA,EAAO,GAAA,EAAK,UACjC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,QAEC,MAAA,IAAU,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,MAAA,EAAS,kBAAO,CAAA,GAAU,IAAA;AAAA,QAEnE,CAAC,CAAC,OAAA,oBACD,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAW,IAAA;AAAA,cACX,SAAA,EAAW,OAAO,OAAO,CAAA;AAAA,cACzB,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,gBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,gBAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,cACX,CAAA;AAAA,cAEA,8BAAC,IAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,GAAA,EAAKC,UAAO,IAAA,EAAY;AAAA;AAAA,WAC5C;AAAA,0BACA,GAAA,CAAC,MAAA,EAAA,EAAO,EAAA,EAAI,aAAA,EAAe,QAAA,EAAA,sCAAA,EAE3B;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC,CAAA;AAEDF,MAAA,CAAK,WAAA,GAAc,MAAA;;ACnQZ,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,CACE;AAAA,IACE,IAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,OAAO,KAAA,CAAM;AAAA,KACf;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,MAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,MAAM,MAAA,GACJ,QAAQ,IAAA,mBACN,GAAA;AAAA,MAACG,IAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,IAAA;AAAA,QACL,KAAA,EAAM,6BAAA;AAAA,QACN,MAAM,KAAA,CAAM;AAAA;AAAA,KACd,GACE,IAAA;AAEN,IAAA,MAAM,UAAA,GAAa,KAAA,CAAM,KAAA,GAAQ,SAAA,GAAY,UAAA;AAI7C,IAAA,MAAM,SAAS,MAAA,mBACb,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,UAAA;AAAA,QACN,IAAA,EAAK,OAAA;AAAA,QACL,KAAA,EAAO,KAAA,CAAM,KAAA,GAAQ,uBAAA,GAA0B;AAAA;AAAA,KACjD,GACE,MAAA;AAEJ,IAAA,MAAM,gBAAA,GAAmB;AAAA,MACvB,YAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,uBACE,GAAA;AAAA,MAACC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,kBAAA,EAAkB,UAAA;AAAA,QACjB,GAAG,KAAA;AAAA,QACH,GAAG,gBAAA;AAAA,QACJ,MAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,IAAA,CAAK,cAAcA,MAAA,CAAS,WAAA;;;;"}
|
package/dist/Chip.css
CHANGED
package/dist/Chip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as Chip, C as default } from './Chip-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
2475
|
+
//# sourceMappingURL=Combobox-CBLaT1lU.js.map
|