npm - @j2-health/design-system - Versions diffs - 0.5.4 → 0.6.0 - Mend

@j2-health/design-system 0.5.4 → 0.6.0

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 (140) hide show

package/dist/index.cjs CHANGED Viewed

@@ -9,11 +9,14 @@ const require_Breadcrumb = require("./src/components/breadcrumb/Breadcrumb.cjs")
 const require_Button = require("./src/components/button/Button.cjs");
 const require_BulkActionBar = require("./src/components/bulkActionBar/BulkActionBar.cjs");
 const require_Card = require("./src/components/card/Card.cjs");
+const require_Swatch = require("./src/components/swatch/Swatch.cjs");
+const require_ChangeChip = require("./src/components/changeChip/ChangeChip.cjs");
 const require_Checkbox = require("./src/components/checkbox/Checkbox.cjs");
 const require_CheckboxTree = require("./src/components/checkboxTree/CheckboxTree.cjs");
 const require_Collapse = require("./src/components/collapse/Collapse.cjs");
 const require_Drawer = require("./src/components/drawer/Drawer.cjs");
 const require_Dropdown = require("./src/components/dropdown/Dropdown.cjs");
+const require_EmptyState = require("./src/components/emptyState/EmptyState.cjs");
 const require_filterHelpers = require("./src/components/filterform/filterHelpers.cjs");
 const require_useFilterField = require("./src/components/filterform/useFilterField.cjs");
 const require_FiltersForm = require("./src/components/filterform/FiltersForm.cjs");
@@ -22,6 +25,8 @@ const require_Input = require("./src/components/input/Input.cjs");
 const require_AntdInput = require("./src/components/input/AntdInput.cjs");
 const require_AntdSearchInput = require("./src/components/input/AntdSearchInput.cjs");
 const require_InputNumber = require("./src/components/inputnumber/InputNumber.cjs");
+const require_Radio = require("./src/components/radio/Radio.cjs");
+const require_ListRow = require("./src/components/listRow/ListRow.cjs");
 const require_Popover = require("./src/components/popover/Popover.cjs");
 const require_Tooltip = require("./src/components/tooltip/Tooltip.cjs");
 const require_ListPopover = require("./src/components/listpopover/ListPopover.cjs");
@@ -35,7 +40,6 @@ const require_useNotification = require("./src/components/notification/useNotifi
 const require_NotificationModal = require("./src/components/notificationModal/NotificationModal.cjs");
 const require_Pagination = require("./src/components/pagination/Pagination.cjs");
 const require_Progress = require("./src/components/progress/Progress.cjs");
-const require_Radio = require("./src/components/radio/Radio.cjs");
 const require_Rate = require("./src/components/rate/Rate.cjs");
 const require_Select = require("./src/components/select/Select.cjs");
 const require_AntdSelect = require("./src/components/select/AntdSelect.cjs");
@@ -43,11 +47,14 @@ const require_Tag = require("./src/components/tag/Tag.cjs");
 const require_SummarizedSelect = require("./src/components/select/SummarizedSelect.cjs");
 const require_Skeleton = require("./src/components/skeleton/Skeleton.cjs");
 const require_Spinner = require("./src/components/spinner/Spinner.cjs");
+const require_StatusPill = require("./src/components/statusPill/StatusPill.cjs");
 const require_useSteps = require("./src/components/steps/useSteps.cjs");
 const require_Steps = require("./src/components/steps/Steps.cjs");
+const require_SwatchStrip = require("./src/components/swatchStrip/SwatchStrip.cjs");
 const require_Switch = require("./src/components/switch/Switch.cjs");
 const require_Table = require("./src/components/table/Table.cjs");
 const require_Tabs = require("./src/components/tabs/Tabs.cjs");
+const require_ThresholdBar = require("./src/components/thresholdBar/ThresholdBar.cjs");
 const require_VennDiagram = require("./src/components/vennDiagram/VennDiagram.cjs");
 const require_UserProfile = require("./src/components/legacyNavMenu/UserProfile.cjs");
 const require_LegacyNavMenu = require("./src/components/legacyNavMenu/LegacyNavMenu.cjs");
@@ -64,11 +71,13 @@ exports.Breadcrumb = require_Breadcrumb.Breadcrumb;
 exports.BulkActionBar = require_BulkActionBar.BulkActionBar;
 exports.Button = require_Button.Button;
 exports.Card = require_Card.Card;
+exports.ChangeChip = require_ChangeChip.ChangeChip;
 exports.Checkbox = require_Checkbox.Checkbox;
 exports.CheckboxTree = require_CheckboxTree.CheckboxTree;
 exports.Collapse = require_Collapse.Collapse;
 exports.Drawer = require_Drawer.Drawer;
 exports.Dropdown = require_Dropdown.Dropdown;
+exports.EmptyState = require_EmptyState.EmptyState;
 exports.FiltersForm = require_FiltersForm.FiltersForm;
 exports.Form = require_Form.Form;
 Object.defineProperty(exports, "HighchartsReact", {
@@ -81,6 +90,7 @@ exports.Input = require_Input.Input;
 exports.InputNumber = require_InputNumber.InputNumber;
 exports.LegacyNavMenu = require_LegacyNavMenu.LegacyNavMenu;
 exports.ListPopover = require_ListPopover.ListPopover;
+exports.ListRow = require_ListRow.ListRow;
 exports.ManageColumnsPanel = require_ManageColumnsPanel.ManageColumnsPanel;
 exports.Menu = require_Menu.Menu;
 exports.Modal = require_Modal.Modal;
@@ -97,12 +107,16 @@ exports.Select = require_Select.Select;
 exports.SelectAll = require_SelectAll.SelectAll;
 exports.Skeleton = require_Skeleton.Skeleton;
 exports.Spinner = require_Spinner.Spinner;
+exports.StatusPill = require_StatusPill.StatusPill;
 exports.Steps = require_Steps.Steps;
 exports.SummarizedSelect = require_SummarizedSelect.SummarizedSelect;
+exports.Swatch = require_Swatch.Swatch;
+exports.SwatchStrip = require_SwatchStrip.SwatchStrip;
 exports.Switch = require_Switch.Switch;
 exports.Table = require_Table.Table;
 exports.Tabs = require_Tabs.Tabs;
 exports.Tag = require_Tag.Tag;
+exports.ThresholdBar = require_ThresholdBar.ThresholdBar;
 exports.Tooltip = require_Tooltip.Tooltip;
 exports.UserProfile = require_UserProfile.UserProfile;
 exports.VennDiagram = require_VennDiagram.VennDiagram;

package/dist/index.d.ts CHANGED Viewed

@@ -7,15 +7,18 @@ export * from './src/components/breadcrumb/index.js';
 export * from './src/components/bulkActionBar/index.js';
 export * from './src/components/button/index.js';
 export * from './src/components/card/index.js';
+export * from './src/components/changeChip/index.js';
 export * from './src/components/checkbox/index.js';
 export * from './src/components/checkboxTree/index.js';
 export * from './src/components/collapse/index.js';
 export * from './src/components/drawer/index.js';
 export * from './src/components/dropdown/index.js';
+export * from './src/components/emptyState/index.js';
 export * from './src/components/filterform/index.js';
 export * from './src/components/form/index.js';
 export * from './src/components/input/index.js';
 export * from './src/components/inputnumber/index.js';
+export * from './src/components/listRow/index.js';
 export * from './src/components/listpopover/index.js';
 export * from './src/components/manageColumns/index.js';
 export * from './src/components/menu/index.js';
@@ -32,11 +35,15 @@ export * from './src/components/rate/index.js';
 export * from './src/components/select/index.js';
 export * from './src/components/skeleton/index.js';
 export * from './src/components/spinner/index.js';
+export * from './src/components/statusPill/index.js';
 export * from './src/components/steps/index.js';
+export * from './src/components/swatch/index.js';
+export * from './src/components/swatchStrip/index.js';
 export * from './src/components/switch/index.js';
 export * from './src/components/table/index.js';
 export * from './src/components/tabs/index.js';
 export * from './src/components/tag/index.js';
+export * from './src/components/thresholdBar/index.js';
 export * from './src/components/tooltip/index.js';
 export * from './src/components/vennDiagram/index.js';
 export * from './src/components/legacyNavMenu/index.js';

package/dist/index.js CHANGED Viewed

@@ -8,11 +8,14 @@ import { Breadcrumb } from "./src/components/breadcrumb/Breadcrumb.js";
 import { Button } from "./src/components/button/Button.js";
 import { BulkActionBar } from "./src/components/bulkActionBar/BulkActionBar.js";
 import { Card } from "./src/components/card/Card.js";
+import { Swatch } from "./src/components/swatch/Swatch.js";
+import { ChangeChip } from "./src/components/changeChip/ChangeChip.js";
 import { Checkbox } from "./src/components/checkbox/Checkbox.js";
 import { CheckboxTree } from "./src/components/checkboxTree/CheckboxTree.js";
 import { Collapse } from "./src/components/collapse/Collapse.js";
 import { Drawer } from "./src/components/drawer/Drawer.js";
 import { Dropdown } from "./src/components/dropdown/Dropdown.js";
+import { EmptyState } from "./src/components/emptyState/EmptyState.js";
 import { isMultiValueTextOperator, normalizeMultiValues } from "./src/components/filterform/filterHelpers.js";
 import { MultiValueTextOperatorOptions, operatorOptionsFor } from "./src/components/filterform/useFilterField.js";
 import { FiltersForm } from "./src/components/filterform/FiltersForm.js";
@@ -21,6 +24,8 @@ import { Input } from "./src/components/input/Input.js";
 import { AntdInput } from "./src/components/input/AntdInput.js";
 import { AntdSearchInput } from "./src/components/input/AntdSearchInput.js";
 import { InputNumber } from "./src/components/inputnumber/InputNumber.js";
+import { Radio, RadioGroup } from "./src/components/radio/Radio.js";
+import { ListRow } from "./src/components/listRow/ListRow.js";
 import { Popover } from "./src/components/popover/Popover.js";
 import { Tooltip } from "./src/components/tooltip/Tooltip.js";
 import { ListPopover } from "./src/components/listpopover/ListPopover.js";
@@ -34,7 +39,6 @@ import { useNotification } from "./src/components/notification/useNotification.j
 import { NotificationModal } from "./src/components/notificationModal/NotificationModal.js";
 import { Pagination, withDesignSystemPaginationOverrides } from "./src/components/pagination/Pagination.js";
 import { Progress } from "./src/components/progress/Progress.js";
-import { Radio, RadioGroup } from "./src/components/radio/Radio.js";
 import { Rate } from "./src/components/rate/Rate.js";
 import { Select } from "./src/components/select/Select.js";
 import { AntdSelect } from "./src/components/select/AntdSelect.js";
@@ -42,13 +46,16 @@ import { Tag } from "./src/components/tag/Tag.js";
 import { SummarizedSelect } from "./src/components/select/SummarizedSelect.js";
 import { Skeleton } from "./src/components/skeleton/Skeleton.js";
 import { Spinner } from "./src/components/spinner/Spinner.js";
+import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
+import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
 import { Tabs } from "./src/components/tabs/Tabs.js";
+import { ThresholdBar } from "./src/components/thresholdBar/ThresholdBar.js";
 import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import { icons } from "./index2.js";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, Breadcrumb, BulkActionBar, Button, Card, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, Steps, SummarizedSelect, Switch, Table, Tabs, Tag, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };

package/dist/index2.js CHANGED Viewed

@@ -8,11 +8,14 @@ import { Breadcrumb } from "./src/components/breadcrumb/Breadcrumb.js";
 import { Button } from "./src/components/button/Button.js";
 import { BulkActionBar } from "./src/components/bulkActionBar/BulkActionBar.js";
 import { Card } from "./src/components/card/Card.js";
+import { Swatch } from "./src/components/swatch/Swatch.js";
+import { ChangeChip } from "./src/components/changeChip/ChangeChip.js";
 import { Checkbox } from "./src/components/checkbox/Checkbox.js";
 import { CheckboxTree } from "./src/components/checkboxTree/CheckboxTree.js";
 import { Collapse } from "./src/components/collapse/Collapse.js";
 import { Drawer } from "./src/components/drawer/Drawer.js";
 import { Dropdown } from "./src/components/dropdown/Dropdown.js";
+import { EmptyState } from "./src/components/emptyState/EmptyState.js";
 import { isMultiValueTextOperator, normalizeMultiValues } from "./src/components/filterform/filterHelpers.js";
 import { MultiValueTextOperatorOptions, operatorOptionsFor } from "./src/components/filterform/useFilterField.js";
 import { FiltersForm } from "./src/components/filterform/FiltersForm.js";
@@ -21,6 +24,8 @@ import { Input } from "./src/components/input/Input.js";
 import { AntdInput } from "./src/components/input/AntdInput.js";
 import { AntdSearchInput } from "./src/components/input/AntdSearchInput.js";
 import { InputNumber } from "./src/components/inputnumber/InputNumber.js";
+import { Radio, RadioGroup } from "./src/components/radio/Radio.js";
+import { ListRow } from "./src/components/listRow/ListRow.js";
 import { Popover } from "./src/components/popover/Popover.js";
 import { Tooltip } from "./src/components/tooltip/Tooltip.js";
 import { ListPopover } from "./src/components/listpopover/ListPopover.js";
@@ -34,7 +39,6 @@ import { useNotification } from "./src/components/notification/useNotification.j
 import { NotificationModal } from "./src/components/notificationModal/NotificationModal.js";
 import { Pagination, withDesignSystemPaginationOverrides } from "./src/components/pagination/Pagination.js";
 import { Progress } from "./src/components/progress/Progress.js";
-import { Radio, RadioGroup } from "./src/components/radio/Radio.js";
 import { Rate } from "./src/components/rate/Rate.js";
 import { Select } from "./src/components/select/Select.js";
 import { AntdSelect } from "./src/components/select/AntdSelect.js";
@@ -42,13 +46,16 @@ import { Tag } from "./src/components/tag/Tag.js";
 import { SummarizedSelect } from "./src/components/select/SummarizedSelect.js";
 import { Skeleton } from "./src/components/skeleton/Skeleton.js";
 import { Spinner } from "./src/components/spinner/Spinner.js";
+import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
+import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
 import { Tabs } from "./src/components/tabs/Tabs.js";
+import { ThresholdBar } from "./src/components/thresholdBar/ThresholdBar.js";
 import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import * as icons from "@phosphor-icons/react";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, Breadcrumb, BulkActionBar, Button, Card, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, Steps, SummarizedSelect, Switch, Table, Tabs, Tag, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };

package/dist/src/components/alert/Alert.cjs CHANGED Viewed

@@ -7,8 +7,10 @@ let antd = require("antd");
 let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
 //#region src/components/alert/Alert.tsx
-var Alert = ({ description, type, closable = false, showIcon = true, banner = false, message, title, closeIcon, closeText, onClose, afterClose, ...props }) => {
+var Alert = ({ description, type, closable = false, showIcon = true, banner = false, message, title, closeIcon, closeText, onClose, afterClose, className, ...props }) => {
 	const { token } = antd.theme.useToken();
 	const icon = react$1.useMemo(() => {
 		const size = description ? token.sizeLG : token.size;
@@ -60,7 +62,7 @@ var Alert = ({ description, type, closable = false, showIcon = true, banner = fa
 		}
 	}, [type]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Alert, {
-		className: require_Alert_module.default.alert,
+		className: (0, classnames.default)(require_Alert_module.default.alert, className),
 		icon,
 		closable: closable || closeText ? {
 			closeIcon: closeText || (closeIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.XIcon, {

package/dist/src/components/alert/Alert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.cjs","names":["theme","React","CheckCircleIcon","XCircleIcon","InfoIcon","WarningCircleIcon","CircleNotchIcon","AntdAlert","styles","XIcon"],"sources":["../../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Alert as AntdAlert, AlertProps, theme } from 'antd'\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n XIcon,\n XCircleIcon,\n CircleNotchIcon,\n} from '@phosphor-icons/react'\nimport styles from './Alert.module.css'\ntype Props = Expand<Omit<AlertProps, 'type'>> & {\n description?: ~~string~~\n type: 'success' \| 'info' \| 'warning' \| 'error' \| 'loading'\n closable?: boolean\n showIcon?: boolean\n banner?: boolean\n}\n\nconst Alert = ({\n description,\n type,\n closable = false,\n showIcon = true,\n banner = false,\n message,\n title,\n closeIcon,\n closeText,\n onClose,\n afterClose,\n ...props\n}: Props) => {\n const { token } = theme.useToken()\n const icon = React.useMemo(() => {\n const size = description ? token.sizeLG : token.size\n const iconStyle = !description\n ? { display: 'flex', alignItems: 'center' }\n : undefined\n\n const iconElement = (() => {\n switch (type) {\n case 'success':\n return (\n <CheckCircleIcon fill=\"var(--j2-color-success-text)\" size={size} />\n )\n case 'error':\n return <XCircleIcon fill=\"var(--j2-color-error-text)\" size={size} />\n case 'info':\n return <InfoIcon fill=\"var(--j2-color-info-text)\" size={size} />\n case 'warning':\n return (\n <WarningCircleIcon\n fill=\"var(--j2-color-warning-text)\"\n size={size}\n />\n )\n case 'loading':\n return (\n <CircleNotchIcon\n fill=\"var(--j2-color-info-text)\"\n size={size}\n weight=\"regular\"\n style={{\n animation: 'spin 1s linear infinite',\n }}\n />\n )\n default:\n return null\n }\n })()\n\n return iconStyle ? (\n <span style={iconStyle}>{iconElement}</span>\n ) : (\n iconElement\n )\n }, [type, description, token.size, token.sizeLG])\n\n const antDType = React.useMemo(():\n 'success' \| 'info' \| 'warning' \| 'error' => {\n switch (type) {\n case 'loading':\n return 'info'\n default:\n return type as 'success' \| 'info' \| 'warning' \| 'error'\n }\n }, [type])\n\n return (\n <AntdAlert\n className={styles.alert}\n icon={icon}\n closable={\n closable \|\| closeText\n ? {\n closeIcon:\n closeText \|\|\n (closeIcon ?? <XIcon size={token.size} weight=\"regular\" />),\n onClose,\n afterClose,\n }\n : false\n }\n showIcon={showIcon}\n type={antDType}\n banner={banner}\n description={description}\n title={title ?? message}\n {...props}\n />\n )\n}\n\nexport { Alert }\n"],"mappings":"~~;;;;;;;;;;AAmBA~~,IAAM,SAAS,EACb,aACA,MACA,WAAW,OACX,WAAW,MACX,SAAS,OACT,SACA,OACA,WACA,WACA,SACA,YACA,GAAG,YACQ;CACX,MAAM,EAAE,UAAUA,KAAAA,MAAM,SAAS;CACjC,MAAM,OAAOC,QAAM,cAAc;EAC/B,MAAM,OAAO,cAAc,MAAM,SAAS,MAAM;EAChD,MAAM,YAAY,CAAC,cACf;GAAE,SAAS;GAAQ,YAAY;EAAS,IACxC,KAAA;EAEJ,MAAM,qBAAqB;GACzB,QAAQ,MAAR;IACE,KAAK,WACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,iBAAD;KAAiB,MAAK;KAAqC;IAAO,CAAA;IAEtE,KAAK,SACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,aAAD;KAAa,MAAK;KAAmC;IAAO,CAAA;IACrE,KAAK,QACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,UAAD;KAAU,MAAK;KAAkC;IAAO,CAAA;IACjE,KAAK,WACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,mBAAD;KACE,MAAK;KACC;IACP,CAAA;IAEL,KAAK,WACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,iBAAD;KACE,MAAK;KACC;KACN,QAAO;KACP,OAAO,EACL,WAAW,0BACb;IACD,CAAA;IAEL,SACE,OAAO;GACX;EACF,EAAA,CAAG;EAEH,OAAO,YACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,OAAO;GAAY,UAAA;EAAkB,CAAA,IAE3C;CAEJ,GAAG;EAAC;EAAM;EAAa,MAAM;EAAM,MAAM;CAAM,CAAC;CAEhD,MAAM,WAAWL,QAAM,cACuB;EAC5C,QAAQ,MAAR;GACE,KAAK,WACH,OAAO;GACT,SACE,OAAO;EACX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACM,KAAAA,OAAD;EACE,~~WAAWC~~,qBAAAA,QAAO;~~EACZ~~;EACN,UACE,YAAY,YACR;GACE,WACE,cACC,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAD;IAAO,MAAM,MAAM;IAAM,QAAO;GAAW,CAAA;GAC3D;GACA;EACF,IACA;EAEI;EACV,MAAM;EACE;EACK;EACb,OAAO,SAAS;EAChB,GAAI;CACL,CAAA;AAEL"}
1	+ {"version":3,"file":"Alert.cjs","names":["theme","React","CheckCircleIcon","XCircleIcon","InfoIcon","WarningCircleIcon","CircleNotchIcon","AntdAlert","cx","styles","XIcon"],"sources":["../../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Alert as AntdAlert, AlertProps, theme } from 'antd'\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n XIcon,\n XCircleIcon,\n CircleNotchIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport styles from './Alert.module.css'\ntype Props = Expand<Omit<AlertProps, 'type'>> & {\n description?: React.ReactNode\n type: 'success' \| 'info' \| 'warning' \| 'error' \| 'loading'\n closable?: boolean\n showIcon?: boolean\n banner?: boolean\n}\n\nconst Alert = ({\n description,\n type,\n closable = false,\n showIcon = true,\n banner = false,\n message,\n title,\n closeIcon,\n closeText,\n onClose,\n afterClose,\n className,\n ...props\n}: Props) => {\n const { token } = theme.useToken()\n const icon = React.useMemo(() => {\n const size = description ? token.sizeLG : token.size\n const iconStyle = !description\n ? { display: 'flex', alignItems: 'center' }\n : undefined\n\n const iconElement = (() => {\n switch (type) {\n case 'success':\n return (\n <CheckCircleIcon fill=\"var(--j2-color-success-text)\" size={size} />\n )\n case 'error':\n return <XCircleIcon fill=\"var(--j2-color-error-text)\" size={size} />\n case 'info':\n return <InfoIcon fill=\"var(--j2-color-info-text)\" size={size} />\n case 'warning':\n return (\n <WarningCircleIcon\n fill=\"var(--j2-color-warning-text)\"\n size={size}\n />\n )\n case 'loading':\n return (\n <CircleNotchIcon\n fill=\"var(--j2-color-info-text)\"\n size={size}\n weight=\"regular\"\n style={{\n animation: 'spin 1s linear infinite',\n }}\n />\n )\n default:\n return null\n }\n })()\n\n return iconStyle ? (\n <span style={iconStyle}>{iconElement}</span>\n ) : (\n iconElement\n )\n }, [type, description, token.size, token.sizeLG])\n\n const antDType = React.useMemo(():\n 'success' \| 'info' \| 'warning' \| 'error' => {\n switch (type) {\n case 'loading':\n return 'info'\n default:\n return type as 'success' \| 'info' \| 'warning' \| 'error'\n }\n }, [type])\n\n return (\n <AntdAlert\n className={cx(styles.alert, className)}\n icon={icon}\n closable={\n closable \|\| closeText\n ? {\n closeIcon:\n closeText \|\|\n (closeIcon ?? <XIcon size={token.size} weight=\"regular\" />),\n onClose,\n afterClose,\n }\n : false\n }\n showIcon={showIcon}\n type={antDType}\n banner={banner}\n description={description}\n title={title ?? message}\n {...props}\n />\n )\n}\n\nexport { Alert }\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAM,SAAS,EACb,aACA,MACA,WAAW,OACX,WAAW,MACX,SAAS,OACT,SACA,OACA,WACA,WACA,SACA,YACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,UAAUA,KAAAA,MAAM,SAAS;CACjC,MAAM,OAAOC,QAAM,cAAc;EAC/B,MAAM,OAAO,cAAc,MAAM,SAAS,MAAM;EAChD,MAAM,YAAY,CAAC,cACf;GAAE,SAAS;GAAQ,YAAY;EAAS,IACxC,KAAA;EAEJ,MAAM,qBAAqB;GACzB,QAAQ,MAAR;IACE,KAAK,WACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,iBAAD;KAAiB,MAAK;KAAqC;IAAO,CAAA;IAEtE,KAAK,SACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,aAAD;KAAa,MAAK;KAAmC;IAAO,CAAA;IACrE,KAAK,QACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,UAAD;KAAU,MAAK;KAAkC;IAAO,CAAA;IACjE,KAAK,WACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,mBAAD;KACE,MAAK;KACC;IACP,CAAA;IAEL,KAAK,WACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,iBAAD;KACE,MAAK;KACC;KACN,QAAO;KACP,OAAO,EACL,WAAW,0BACb;IACD,CAAA;IAEL,SACE,OAAO;GACX;EACF,EAAA,CAAG;EAEH,OAAO,YACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,OAAO;GAAY,UAAA;EAAkB,CAAA,IAE3C;CAEJ,GAAG;EAAC;EAAM;EAAa,MAAM;EAAM,MAAM;CAAM,CAAC;CAEhD,MAAM,WAAWL,QAAM,cACuB;EAC5C,QAAQ,MAAR;GACE,KAAK,WACH,OAAO;GACT,SACE,OAAO;EACX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACM,KAAAA,OAAD;EACE,YAAA,GAAWC,WAAAA,QAAAA,CAAGC,qBAAAA,QAAO,OAAO,SAAS;EAC/B;EACN,UACE,YAAY,YACR;GACE,WACE,cACC,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAD;IAAO,MAAM,MAAM;IAAM,QAAO;GAAW,CAAA;GAC3D;GACA;EACF,IACA;EAEI;EACV,MAAM;EACE;EACK;EACb,OAAO,SAAS;EAChB,GAAI;CACL,CAAA;AAEL"}

package/dist/src/components/alert/Alert.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { AlertProps } from 'antd';
 import * as React from 'react';
 type Props = Expand<Omit<AlertProps, 'type'>> & {
-    description?: string;
+    description?: React.ReactNode;
     type: 'success' | 'info' | 'warning' | 'error' | 'loading';
     closable?: boolean;
     showIcon?: boolean;
     banner?: boolean;
 };
-declare const Alert: ({ description, type, closable, showIcon, banner, message, title, closeIcon, closeText, onClose, afterClose, ...props }: Props) => React.JSX.Element;
+declare const Alert: ({ description, type, closable, showIcon, banner, message, title, closeIcon, closeText, onClose, afterClose, className, ...props }: Props) => React.JSX.Element;
 export { Alert };

package/dist/src/components/alert/Alert.js CHANGED Viewed

@@ -3,8 +3,9 @@ import * as React from "react";
 import { Alert, theme } from "antd";
 import { CheckCircleIcon, CircleNotchIcon, InfoIcon, WarningCircleIcon, XCircleIcon, XIcon } from "@phosphor-icons/react";
 import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
 //#region src/components/alert/Alert.tsx
-var Alert$1 = ({ description, type, closable = false, showIcon = true, banner = false, message, title, closeIcon, closeText, onClose, afterClose, ...props }) => {
+var Alert$1 = ({ description, type, closable = false, showIcon = true, banner = false, message, title, closeIcon, closeText, onClose, afterClose, className, ...props }) => {
 	const { token } = theme.useToken();
 	const icon = React.useMemo(() => {
 		const size = description ? token.sizeLG : token.size;
@@ -56,7 +57,7 @@ var Alert$1 = ({ description, type, closable = false, showIcon = true, banner =
 		}
 	}, [type]);
 	return /* @__PURE__ */ jsx(Alert, {
-		className: Alert_module_default.alert,
+		className: cx(Alert_module_default.alert, className),
 		icon,
 		closable: closable || closeText ? {
 			closeIcon: closeText || (closeIcon ?? /* @__PURE__ */ jsx(XIcon, {

package/dist/src/components/alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","names":["Alert","AntdAlert","styles"],"sources":["../../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Alert as AntdAlert, AlertProps, theme } from 'antd'\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n XIcon,\n XCircleIcon,\n CircleNotchIcon,\n} from '@phosphor-icons/react'\nimport styles from './Alert.module.css'\ntype Props = Expand<Omit<AlertProps, 'type'>> & {\n description?: ~~string~~\n type: 'success' \| 'info' \| 'warning' \| 'error' \| 'loading'\n closable?: boolean\n showIcon?: boolean\n banner?: boolean\n}\n\nconst Alert = ({\n description,\n type,\n closable = false,\n showIcon = true,\n banner = false,\n message,\n title,\n closeIcon,\n closeText,\n onClose,\n afterClose,\n ...props\n}: Props) => {\n const { token } = theme.useToken()\n const icon = React.useMemo(() => {\n const size = description ? token.sizeLG : token.size\n const iconStyle = !description\n ? { display: 'flex', alignItems: 'center' }\n : undefined\n\n const iconElement = (() => {\n switch (type) {\n case 'success':\n return (\n <CheckCircleIcon fill=\"var(--j2-color-success-text)\" size={size} />\n )\n case 'error':\n return <XCircleIcon fill=\"var(--j2-color-error-text)\" size={size} />\n case 'info':\n return <InfoIcon fill=\"var(--j2-color-info-text)\" size={size} />\n case 'warning':\n return (\n <WarningCircleIcon\n fill=\"var(--j2-color-warning-text)\"\n size={size}\n />\n )\n case 'loading':\n return (\n <CircleNotchIcon\n fill=\"var(--j2-color-info-text)\"\n size={size}\n weight=\"regular\"\n style={{\n animation: 'spin 1s linear infinite',\n }}\n />\n )\n default:\n return null\n }\n })()\n\n return iconStyle ? (\n <span style={iconStyle}>{iconElement}</span>\n ) : (\n iconElement\n )\n }, [type, description, token.size, token.sizeLG])\n\n const antDType = React.useMemo(():\n 'success' \| 'info' \| 'warning' \| 'error' => {\n switch (type) {\n case 'loading':\n return 'info'\n default:\n return type as 'success' \| 'info' \| 'warning' \| 'error'\n }\n }, [type])\n\n return (\n <AntdAlert\n className={styles.alert}\n icon={icon}\n closable={\n closable \|\| closeText\n ? {\n closeIcon:\n closeText \|\|\n (closeIcon ?? <XIcon size={token.size} weight=\"regular\" />),\n onClose,\n afterClose,\n }\n : false\n }\n showIcon={showIcon}\n type={antDType}\n banner={banner}\n description={description}\n title={title ?? message}\n {...props}\n />\n )\n}\n\nexport { Alert }\n"],"mappings":"~~;;;;;;AAmBA~~,IAAMA,WAAS,EACb,aACA,MACA,WAAW,OACX,WAAW,MACX,SAAS,OACT,SACA,OACA,WACA,WACA,SACA,YACA,GAAG,YACQ;CACX,MAAM,EAAE,UAAU,MAAM,SAAS;CACjC,MAAM,OAAO,MAAM,cAAc;EAC/B,MAAM,OAAO,cAAc,MAAM,SAAS,MAAM;EAChD,MAAM,YAAY,CAAC,cACf;GAAE,SAAS;GAAQ,YAAY;EAAS,IACxC,KAAA;EAEJ,MAAM,qBAAqB;GACzB,QAAQ,MAAR;IACE,KAAK,WACH,OACE,oBAAC,iBAAD;KAAiB,MAAK;KAAqC;IAAO,CAAA;IAEtE,KAAK,SACH,OAAO,oBAAC,aAAD;KAAa,MAAK;KAAmC;IAAO,CAAA;IACrE,KAAK,QACH,OAAO,oBAAC,UAAD;KAAU,MAAK;KAAkC;IAAO,CAAA;IACjE,KAAK,WACH,OACE,oBAAC,mBAAD;KACE,MAAK;KACC;IACP,CAAA;IAEL,KAAK,WACH,OACE,oBAAC,iBAAD;KACE,MAAK;KACC;KACN,QAAO;KACP,OAAO,EACL,WAAW,0BACb;IACD,CAAA;IAEL,SACE,OAAO;GACX;EACF,EAAA,CAAG;EAEH,OAAO,YACL,oBAAC,QAAD;GAAM,OAAO;GAAY,UAAA;EAAkB,CAAA,IAE3C;CAEJ,GAAG;EAAC;EAAM;EAAa,MAAM;EAAM,MAAM;CAAM,CAAC;CAEhD,MAAM,WAAW,MAAM,cACuB;EAC5C,QAAQ,MAAR;GACE,KAAK,WACH,OAAO;GACT,SACE,OAAO;EACX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAACC,OAAD;EACE,~~WAAWC~~,qBAAO;~~EACZ~~;EACN,UACE,YAAY,YACR;GACE,WACE,cACC,aAAa,oBAAC,OAAD;IAAO,MAAM,MAAM;IAAM,QAAO;GAAW,CAAA;GAC3D;GACA;EACF,IACA;EAEI;EACV,MAAM;EACE;EACK;EACb,OAAO,SAAS;EAChB,GAAI;CACL,CAAA;AAEL"}
1	+ {"version":3,"file":"Alert.js","names":["Alert","AntdAlert","styles"],"sources":["../../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Alert as AntdAlert, AlertProps, theme } from 'antd'\nimport {\n CheckCircleIcon,\n InfoIcon,\n WarningCircleIcon,\n XIcon,\n XCircleIcon,\n CircleNotchIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport styles from './Alert.module.css'\ntype Props = Expand<Omit<AlertProps, 'type'>> & {\n description?: React.ReactNode\n type: 'success' \| 'info' \| 'warning' \| 'error' \| 'loading'\n closable?: boolean\n showIcon?: boolean\n banner?: boolean\n}\n\nconst Alert = ({\n description,\n type,\n closable = false,\n showIcon = true,\n banner = false,\n message,\n title,\n closeIcon,\n closeText,\n onClose,\n afterClose,\n className,\n ...props\n}: Props) => {\n const { token } = theme.useToken()\n const icon = React.useMemo(() => {\n const size = description ? token.sizeLG : token.size\n const iconStyle = !description\n ? { display: 'flex', alignItems: 'center' }\n : undefined\n\n const iconElement = (() => {\n switch (type) {\n case 'success':\n return (\n <CheckCircleIcon fill=\"var(--j2-color-success-text)\" size={size} />\n )\n case 'error':\n return <XCircleIcon fill=\"var(--j2-color-error-text)\" size={size} />\n case 'info':\n return <InfoIcon fill=\"var(--j2-color-info-text)\" size={size} />\n case 'warning':\n return (\n <WarningCircleIcon\n fill=\"var(--j2-color-warning-text)\"\n size={size}\n />\n )\n case 'loading':\n return (\n <CircleNotchIcon\n fill=\"var(--j2-color-info-text)\"\n size={size}\n weight=\"regular\"\n style={{\n animation: 'spin 1s linear infinite',\n }}\n />\n )\n default:\n return null\n }\n })()\n\n return iconStyle ? (\n <span style={iconStyle}>{iconElement}</span>\n ) : (\n iconElement\n )\n }, [type, description, token.size, token.sizeLG])\n\n const antDType = React.useMemo(():\n 'success' \| 'info' \| 'warning' \| 'error' => {\n switch (type) {\n case 'loading':\n return 'info'\n default:\n return type as 'success' \| 'info' \| 'warning' \| 'error'\n }\n }, [type])\n\n return (\n <AntdAlert\n className={cx(styles.alert, className)}\n icon={icon}\n closable={\n closable \|\| closeText\n ? {\n closeIcon:\n closeText \|\|\n (closeIcon ?? <XIcon size={token.size} weight=\"regular\" />),\n onClose,\n afterClose,\n }\n : false\n }\n showIcon={showIcon}\n type={antDType}\n banner={banner}\n description={description}\n title={title ?? message}\n {...props}\n />\n )\n}\n\nexport { Alert }\n"],"mappings":";;;;;;;AAoBA,IAAMA,WAAS,EACb,aACA,MACA,WAAW,OACX,WAAW,MACX,SAAS,OACT,SACA,OACA,WACA,WACA,SACA,YACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,UAAU,MAAM,SAAS;CACjC,MAAM,OAAO,MAAM,cAAc;EAC/B,MAAM,OAAO,cAAc,MAAM,SAAS,MAAM;EAChD,MAAM,YAAY,CAAC,cACf;GAAE,SAAS;GAAQ,YAAY;EAAS,IACxC,KAAA;EAEJ,MAAM,qBAAqB;GACzB,QAAQ,MAAR;IACE,KAAK,WACH,OACE,oBAAC,iBAAD;KAAiB,MAAK;KAAqC;IAAO,CAAA;IAEtE,KAAK,SACH,OAAO,oBAAC,aAAD;KAAa,MAAK;KAAmC;IAAO,CAAA;IACrE,KAAK,QACH,OAAO,oBAAC,UAAD;KAAU,MAAK;KAAkC;IAAO,CAAA;IACjE,KAAK,WACH,OACE,oBAAC,mBAAD;KACE,MAAK;KACC;IACP,CAAA;IAEL,KAAK,WACH,OACE,oBAAC,iBAAD;KACE,MAAK;KACC;KACN,QAAO;KACP,OAAO,EACL,WAAW,0BACb;IACD,CAAA;IAEL,SACE,OAAO;GACX;EACF,EAAA,CAAG;EAEH,OAAO,YACL,oBAAC,QAAD;GAAM,OAAO;GAAY,UAAA;EAAkB,CAAA,IAE3C;CAEJ,GAAG;EAAC;EAAM;EAAa,MAAM;EAAM,MAAM;CAAM,CAAC;CAEhD,MAAM,WAAW,MAAM,cACuB;EAC5C,QAAQ,MAAR;GACE,KAAK,WACH,OAAO;GACT,SACE,OAAO;EACX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAACC,OAAD;EACE,WAAW,GAAGC,qBAAO,OAAO,SAAS;EAC/B;EACN,UACE,YAAY,YACR;GACE,WACE,cACC,aAAa,oBAAC,OAAD;IAAO,MAAM,MAAM;IAAM,QAAO;GAAW,CAAA;GAC3D;GACA;EACF,IACA;EAEI;EACV,MAAM;EACE;EACK;EACb,OAAO,SAAS;EAChB,GAAI;CACL,CAAA;AAEL"}

package/dist/src/components/button/Button.cjs CHANGED Viewed

@@ -1,15 +1,20 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 ;/* empty css             */
 let antd = require("antd");
 let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
 //#region src/components/button/Button.tsx
-var Button = ({ type, size, ghost, danger, shape, ...props }) => {
+var Button = ({ type, size, ghost, danger, shape, inline, className, ...props }) => {
+	const isXs = size === "xs";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
 		...props,
 		type,
-		size,
+		size: isXs ? "small" : size,
 		ghost,
 		danger,
 		shape,
+		className: (0, classnames.default)(isXs && "j2-btn-xs", inline && type === "link" && "j2-btn-inline", className),
 		children: props.children
 	});
 };

package/dist/src/components/button/Button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.cjs","names":["AntdButton"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { Button as AntdButton, ButtonProps } from 'antd'\nimport './Button.css'\n\nexport type Props = Expand<ButtonProps>\n\nconst Button = ({ type, size, ghost, danger, shape, ...props }: Props) => {\n return (\n <AntdButton\n {...props}\n type={type}\n size={size}\n ghost={ghost}\n danger={danger}\n shape={shape}\n >\n {props.children}\n </AntdButton>\n )\n}\n\nexport { Button }\n"],"mappings":"~~;;;;AAKA~~,IAAM,UAAU,~~EAAE~~,~~MAAM~~,~~MAAM~~,~~OAAO~~,~~QAAQ~~,~~OAAO~~,GAAG,~~YAAmB~~;~~CACxE~~,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,QAAD;EACE,GAAI;EACE;~~EACA~~;~~EACC~~;EACC;EACD;~~EAEN~~,UAAA,MAAM;CACG,CAAA;AAEhB"}
1	+ {"version":3,"file":"Button.cjs","names":["AntdButton","cx"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { Button as AntdButton, ButtonProps } from 'antd'\nimport cx from 'classnames'\nimport './Button.css'\n\nexport type Props = Expand<\n Omit<ButtonProps, 'size'> & {\n /** `'xs'` is a 20px button for dense toolbars and bands. /\n size?: ButtonProps['size'] \| 'xs'\n /\n With `type=\"link\"`: no padding or fixed height, so the button sits in a\n * line of text like a link.\n */\n inline?: boolean\n }\n>\n\nconst Button = ({\n type,\n size,\n ghost,\n danger,\n shape,\n inline,\n className,\n ...props\n}: Props) => {\n const isXs = size === 'xs'\n return (\n <AntdButton\n {...props}\n type={type}\n size={isXs ? 'small' : size}\n ghost={ghost}\n danger={danger}\n shape={shape}\n className={cx(\n isXs && 'j2-btn-xs',\n inline && type === 'link' && 'j2-btn-inline',\n className\n )}\n >\n {props.children}\n </AntdButton>\n )\n}\n\nexport { Button }\n"],"mappings":";;;;;;;AAgBA,IAAM,UAAU,EACd,MACA,MACA,OACA,QACA,OACA,QACA,WACA,GAAG,YACQ;CACX,MAAM,OAAO,SAAS;CACtB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,QAAD;EACE,GAAI;EACE;EACN,MAAM,OAAO,UAAU;EAChB;EACC;EACD;EACP,YAAA,GAAWC,WAAAA,QAAAA,CACT,QAAQ,aACR,UAAU,SAAS,UAAU,iBAC7B,SACF;EAEC,UAAA,MAAM;CACG,CAAA;AAEhB"}

package/dist/src/components/button/Button.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
 import { ButtonProps } from 'antd';
-export type Props = Expand<ButtonProps>;
-declare const Button: ({ type, size, ghost, danger, shape, ...props }: Props) => import('react').JSX.Element;
+export type Props = Expand<Omit<ButtonProps, 'size'> & {
+    /** `'xs'` is a 20px button for dense toolbars and bands. */
+    size?: ButtonProps['size'] | 'xs';
+    /**
+     * With `type="link"`: no padding or fixed height, so the button sits in a
+     * line of text like a link.
+     */
+    inline?: boolean;
+}>;
+declare const Button: ({ type, size, ghost, danger, shape, inline, className, ...props }: Props) => import('react').JSX.Element;
 export { Button };

package/dist/src/components/button/Button.js CHANGED Viewed

@@ -1,15 +1,18 @@
 /* empty css           */
 import { Button } from "antd";
 import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
 //#region src/components/button/Button.tsx
-var Button$1 = ({ type, size, ghost, danger, shape, ...props }) => {
+var Button$1 = ({ type, size, ghost, danger, shape, inline, className, ...props }) => {
+	const isXs = size === "xs";
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		type,
-		size,
+		size: isXs ? "small" : size,
 		ghost,
 		danger,
 		shape,
+		className: cx(isXs && "j2-btn-xs", inline && type === "link" && "j2-btn-inline", className),
 		children: props.children
 	});
 };

package/dist/src/components/button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","names":["Button","AntdButton"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { Button as AntdButton, ButtonProps } from 'antd'\nimport './Button.css'\n\nexport type Props = Expand<ButtonProps>\n\nconst Button = ({ type, size, ghost, danger, shape, ...props }: Props) => {\n return (\n <AntdButton\n {...props}\n type={type}\n size={size}\n ghost={ghost}\n danger={danger}\n shape={shape}\n >\n {props.children}\n </AntdButton>\n )\n}\n\nexport { Button }\n"],"mappings":"~~;;;;AAKA~~,IAAMA,YAAU,~~EAAE~~,~~MAAM~~,~~MAAM~~,~~OAAO~~,~~QAAQ~~,~~OAAO~~,GAAG,~~YAAmB~~;~~CACxE~~,OACE,oBAACC,QAAD;EACE,GAAI;EACE;~~EACA~~;~~EACC~~;EACC;EACD;~~EAEN~~,UAAA,MAAM;CACG,CAAA;AAEhB"}
1	+ {"version":3,"file":"Button.js","names":["Button","AntdButton"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { Button as AntdButton, ButtonProps } from 'antd'\nimport cx from 'classnames'\nimport './Button.css'\n\nexport type Props = Expand<\n Omit<ButtonProps, 'size'> & {\n /** `'xs'` is a 20px button for dense toolbars and bands. /\n size?: ButtonProps['size'] \| 'xs'\n /\n With `type=\"link\"`: no padding or fixed height, so the button sits in a\n * line of text like a link.\n */\n inline?: boolean\n }\n>\n\nconst Button = ({\n type,\n size,\n ghost,\n danger,\n shape,\n inline,\n className,\n ...props\n}: Props) => {\n const isXs = size === 'xs'\n return (\n <AntdButton\n {...props}\n type={type}\n size={isXs ? 'small' : size}\n ghost={ghost}\n danger={danger}\n shape={shape}\n className={cx(\n isXs && 'j2-btn-xs',\n inline && type === 'link' && 'j2-btn-inline',\n className\n )}\n >\n {props.children}\n </AntdButton>\n )\n}\n\nexport { Button }\n"],"mappings":";;;;;AAgBA,IAAMA,YAAU,EACd,MACA,MACA,OACA,QACA,OACA,QACA,WACA,GAAG,YACQ;CACX,MAAM,OAAO,SAAS;CACtB,OACE,oBAACC,QAAD;EACE,GAAI;EACE;EACN,MAAM,OAAO,UAAU;EAChB;EACC;EACD;EACP,WAAW,GACT,QAAQ,aACR,UAAU,SAAS,UAAU,iBAC7B,SACF;EAEC,UAAA,MAAM;CACG,CAAA;AAEhB"}

package/dist/src/components/card/Card.cjs CHANGED Viewed

@@ -5,11 +5,25 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
 //#region src/components/card/Card.tsx
-var Card = ({ title, children, loading, size = "default", innerVariant = "default", className, ...props }) => {
+var Card = ({ title, children, loading, size = "default", innerVariant = "default", selected, className, ...props }) => {
+	const isSelectable = selected !== void 0 && Boolean(props.onClick);
 	const isInnerBasic = props.type === "inner" && innerVariant === "basic";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Card, {
-		className: (0, classnames.default)("j2-card", `j2-card-${size}`, isInnerBasic && "inner-basic", className),
+		className: (0, classnames.default)("j2-card", `j2-card-${size}`, isInnerBasic && "inner-basic", selected && "j2-card-selected", isSelectable && "j2-card-selectable", className),
 		...props,
+		...isSelectable && {
+			role: "button",
+			tabIndex: 0,
+			"aria-pressed": selected,
+			onKeyDown: (event) => {
+				props.onKeyDown?.(event);
+				if (event.defaultPrevented || event.target !== event.currentTarget) return;
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					event.currentTarget.click();
+				}
+			}
+		},
 		size: size === "small" ? "small" : "medium",
 		title,
 		loading,

package/dist/src/components/card/Card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.cjs","names":["AntdCard","cx"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import { Card as AntdCard, CardProps } from 'antd'\nimport cx from 'classnames'\n\n// import this file to enable styling defined in there\nimport './Card.css'\n\nexport type Props = Omit<CardProps, 'size'> & {\n /** Card title /\n title?: string\n /* Card contents /\n children: React.ReactNode\n /* Loading state /\n loading?: boolean\n /* Card size /\n size?: 'default' \| 'small' \| 'compact' \| 'large'\n /\n Inner card type variant.\n * It allows inner card to have variants independent of other props.\n * Works only with type=\"inner\".\n */\n innerVariant?: 'default' \| 'basic'\n}\n\nconst Card = ({\n title,\n children,\n loading,\n size = 'default',\n innerVariant = 'default',\n className,\n ...props\n}: Props) => {\n const isInner = props.type === 'inner'\n const isInnerBasic = isInner && innerVariant === 'basic'\n return (\n <AntdCard\n className={cx(\n 'j2-card',\n `j2-card-${size}`,\n isInnerBasic && 'inner-basic',\n className\n )}\n {...props}\n size={size === 'small' ? 'small' : 'medium'}\n title={title}\n loading={loading}\n >\n {children}\n </AntdCard>\n )\n}\n\nexport { Card }\n"],"mappings":";;;;;;;~~AAuBA~~,IAAM,QAAQ,EACZ,OACA,UACA,SACA,OAAO,WACP,eAAe,WACf,WACA,GAAG,YACQ;~~CAEX~~,MAAM,eADU,MAAM,SAAS,WACC,iBAAiB;CACjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,MAAD;EACE,YAAA,GAAWC,WAAAA,QAAAA,CACT,WACA,WAAW,QACX,gBAAgB,eAChB,SACF;EACA,GAAI;EACJ,MAAM,SAAS,UAAU,UAAU;EAC5B;EACE;EAER;CACO,CAAA;AAEd"}
1	+ {"version":3,"file":"Card.cjs","names":["AntdCard","cx"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import { Card as AntdCard, CardProps } from 'antd'\nimport cx from 'classnames'\n\n// import this file to enable styling defined in there\nimport './Card.css'\n\nexport type Props = Omit<CardProps, 'size'> & {\n /** Card title /\n title?: string\n /* Card contents /\n children: React.ReactNode\n /* Loading state /\n loading?: boolean\n /* Card size /\n size?: 'default' \| 'small' \| 'compact' \| 'large'\n /\n Inner card type variant.\n * It allows inner card to have variants independent of other props.\n * Works only with type=\"inner\".\n /\n innerVariant?: 'default' \| 'basic'\n /\n Marks the card as the chosen one of a set. With `onClick`, the card also\n * becomes a toggle button: focusable, Enter or Space activates it, and it\n * reports `aria-pressed`.\n */\n selected?: boolean\n}\n\nconst Card = ({\n title,\n children,\n loading,\n size = 'default',\n innerVariant = 'default',\n selected,\n className,\n ...props\n}: Props) => {\n const isSelectable = selected !== undefined && Boolean(props.onClick)\n const isInner = props.type === 'inner'\n const isInnerBasic = isInner && innerVariant === 'basic'\n return (\n <AntdCard\n className={cx(\n 'j2-card',\n `j2-card-${size}`,\n isInnerBasic && 'inner-basic',\n selected && 'j2-card-selected',\n isSelectable && 'j2-card-selectable',\n className\n )}\n {...props}\n {...(isSelectable && {\n role: 'button',\n tabIndex: 0,\n 'aria-pressed': selected,\n onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event)\n // Keys from a focusable child (a link, a button) belong to it.\n if (event.defaultPrevented \|\| event.target !== event.currentTarget)\n return\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault()\n // A real click, so `onClick` gets the MouseEvent it is typed for.\n event.currentTarget.click()\n }\n },\n })}\n size={size === 'small' ? 'small' : 'medium'}\n title={title}\n loading={loading}\n >\n {children}\n </AntdCard>\n )\n}\n\nexport { Card }\n"],"mappings":";;;;;;;AA6BA,IAAM,QAAQ,EACZ,OACA,UACA,SACA,OAAO,WACP,eAAe,WACf,UACA,WACA,GAAG,YACQ;CACX,MAAM,eAAe,aAAa,KAAA,KAAa,QAAQ,MAAM,OAAO;CAEpE,MAAM,eADU,MAAM,SAAS,WACC,iBAAiB;CACjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,MAAD;EACE,YAAA,GAAWC,WAAAA,QAAAA,CACT,WACA,WAAW,QACX,gBAAgB,eAChB,YAAY,oBACZ,gBAAgB,sBAChB,SACF;EACA,GAAI;EACJ,GAAK,gBAAgB;GACnB,MAAM;GACN,UAAU;GACV,gBAAgB;GAChB,YAAY,UAA+C;IACzD,MAAM,YAAY,KAAK;IAEvB,IAAI,MAAM,oBAAoB,MAAM,WAAW,MAAM,eACnD;IACF,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KAErB,MAAM,cAAc,MAAM;IAC5B;GACF;EACF;EACA,MAAM,SAAS,UAAU,UAAU;EAC5B;EACE;EAER;CACO,CAAA;AAEd"}

package/dist/src/components/card/Card.d.ts CHANGED Viewed

@@ -14,6 +14,12 @@ export type Props = Omit<CardProps, 'size'> & {
      * Works only with type="inner".
      */
     innerVariant?: 'default' | 'basic';
+    /**
+     * Marks the card as the chosen one of a set. With `onClick`, the card also
+     * becomes a toggle button: focusable, Enter or Space activates it, and it
+     * reports `aria-pressed`.
+     */
+    selected?: boolean;
 };
-declare const Card: ({ title, children, loading, size, innerVariant, className, ...props }: Props) => import('react').JSX.Element;
+declare const Card: ({ title, children, loading, size, innerVariant, selected, className, ...props }: Props) => import('react').JSX.Element;
 export { Card };

package/dist/src/components/card/Card.js CHANGED Viewed

@@ -3,11 +3,25 @@ import { Card } from "antd";
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 //#region src/components/card/Card.tsx
-var Card$1 = ({ title, children, loading, size = "default", innerVariant = "default", className, ...props }) => {
+var Card$1 = ({ title, children, loading, size = "default", innerVariant = "default", selected, className, ...props }) => {
+	const isSelectable = selected !== void 0 && Boolean(props.onClick);
 	const isInnerBasic = props.type === "inner" && innerVariant === "basic";
 	return /* @__PURE__ */ jsx(Card, {
-		className: cx("j2-card", `j2-card-${size}`, isInnerBasic && "inner-basic", className),
+		className: cx("j2-card", `j2-card-${size}`, isInnerBasic && "inner-basic", selected && "j2-card-selected", isSelectable && "j2-card-selectable", className),
 		...props,
+		...isSelectable && {
+			role: "button",
+			tabIndex: 0,
+			"aria-pressed": selected,
+			onKeyDown: (event) => {
+				props.onKeyDown?.(event);
+				if (event.defaultPrevented || event.target !== event.currentTarget) return;
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					event.currentTarget.click();
+				}
+			}
+		},
 		size: size === "small" ? "small" : "medium",
 		title,
 		loading,

package/dist/src/components/card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":["Card","AntdCard"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import { Card as AntdCard, CardProps } from 'antd'\nimport cx from 'classnames'\n\n// import this file to enable styling defined in there\nimport './Card.css'\n\nexport type Props = Omit<CardProps, 'size'> & {\n /** Card title /\n title?: string\n /* Card contents /\n children: React.ReactNode\n /* Loading state /\n loading?: boolean\n /* Card size /\n size?: 'default' \| 'small' \| 'compact' \| 'large'\n /\n Inner card type variant.\n * It allows inner card to have variants independent of other props.\n * Works only with type=\"inner\".\n */\n innerVariant?: 'default' \| 'basic'\n}\n\nconst Card = ({\n title,\n children,\n loading,\n size = 'default',\n innerVariant = 'default',\n className,\n ...props\n}: Props) => {\n const isInner = props.type === 'inner'\n const isInnerBasic = isInner && innerVariant === 'basic'\n return (\n <AntdCard\n className={cx(\n 'j2-card',\n `j2-card-${size}`,\n isInnerBasic && 'inner-basic',\n className\n )}\n {...props}\n size={size === 'small' ? 'small' : 'medium'}\n title={title}\n loading={loading}\n >\n {children}\n </AntdCard>\n )\n}\n\nexport { Card }\n"],"mappings":";;;;;~~AAuBA~~,IAAMA,UAAQ,EACZ,OACA,UACA,SACA,OAAO,WACP,eAAe,WACf,WACA,GAAG,YACQ;~~CAEX~~,MAAM,eADU,MAAM,SAAS,WACC,iBAAiB;CACjD,OACE,oBAACC,MAAD;EACE,WAAW,GACT,WACA,WAAW,QACX,gBAAgB,eAChB,SACF;EACA,GAAI;EACJ,MAAM,SAAS,UAAU,UAAU;EAC5B;EACE;EAER;CACO,CAAA;AAEd"}
1	+ {"version":3,"file":"Card.js","names":["Card","AntdCard"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import { Card as AntdCard, CardProps } from 'antd'\nimport cx from 'classnames'\n\n// import this file to enable styling defined in there\nimport './Card.css'\n\nexport type Props = Omit<CardProps, 'size'> & {\n /** Card title /\n title?: string\n /* Card contents /\n children: React.ReactNode\n /* Loading state /\n loading?: boolean\n /* Card size /\n size?: 'default' \| 'small' \| 'compact' \| 'large'\n /\n Inner card type variant.\n * It allows inner card to have variants independent of other props.\n * Works only with type=\"inner\".\n /\n innerVariant?: 'default' \| 'basic'\n /\n Marks the card as the chosen one of a set. With `onClick`, the card also\n * becomes a toggle button: focusable, Enter or Space activates it, and it\n * reports `aria-pressed`.\n */\n selected?: boolean\n}\n\nconst Card = ({\n title,\n children,\n loading,\n size = 'default',\n innerVariant = 'default',\n selected,\n className,\n ...props\n}: Props) => {\n const isSelectable = selected !== undefined && Boolean(props.onClick)\n const isInner = props.type === 'inner'\n const isInnerBasic = isInner && innerVariant === 'basic'\n return (\n <AntdCard\n className={cx(\n 'j2-card',\n `j2-card-${size}`,\n isInnerBasic && 'inner-basic',\n selected && 'j2-card-selected',\n isSelectable && 'j2-card-selectable',\n className\n )}\n {...props}\n {...(isSelectable && {\n role: 'button',\n tabIndex: 0,\n 'aria-pressed': selected,\n onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event)\n // Keys from a focusable child (a link, a button) belong to it.\n if (event.defaultPrevented \|\| event.target !== event.currentTarget)\n return\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault()\n // A real click, so `onClick` gets the MouseEvent it is typed for.\n event.currentTarget.click()\n }\n },\n })}\n size={size === 'small' ? 'small' : 'medium'}\n title={title}\n loading={loading}\n >\n {children}\n </AntdCard>\n )\n}\n\nexport { Card }\n"],"mappings":";;;;;AA6BA,IAAMA,UAAQ,EACZ,OACA,UACA,SACA,OAAO,WACP,eAAe,WACf,UACA,WACA,GAAG,YACQ;CACX,MAAM,eAAe,aAAa,KAAA,KAAa,QAAQ,MAAM,OAAO;CAEpE,MAAM,eADU,MAAM,SAAS,WACC,iBAAiB;CACjD,OACE,oBAACC,MAAD;EACE,WAAW,GACT,WACA,WAAW,QACX,gBAAgB,eAChB,YAAY,oBACZ,gBAAgB,sBAChB,SACF;EACA,GAAI;EACJ,GAAK,gBAAgB;GACnB,MAAM;GACN,UAAU;GACV,gBAAgB;GAChB,YAAY,UAA+C;IACzD,MAAM,YAAY,KAAK;IAEvB,IAAI,MAAM,oBAAoB,MAAM,WAAW,MAAM,eACnD;IACF,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KAErB,MAAM,cAAc,MAAM;IAC5B;GACF;EACF;EACA,MAAM,SAAS,UAAU,UAAU;EAC5B;EACE;EAER;CACO,CAAA;AAEd"}

package/dist/src/components/changeChip/ChangeChip.cjs ADDED Viewed

@@ -0,0 +1,52 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Swatch = require("../swatch/Swatch.cjs");
+let react = require("react");
+let _phosphor_icons_react = require("@phosphor-icons/react");
+_phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/changeChip/ChangeChip.tsx
+/**
+* A compact chip for one change: an optional swatch, a label and a delta.
+* It is a button, so it can open a popover with the details; wrap it in a
+* `Popover` (it forwards its ref and handlers).
+*/
+var ChangeChip = (0, react.forwardRef)(({ swatch, label, delta, placeholder, srLabel, className, ...props }, ref) => {
+	const Arrow = delta?.direction === "down" ? _phosphor_icons_react.ArrowDownIcon : _phosphor_icons_react.ArrowUpIcon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...props,
+		ref,
+		type: "button",
+		className: (0, classnames.default)("inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2", className),
+		children: [
+			swatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatch.Swatch, {
+				...swatch,
+				size: 12
+			}),
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
+			delta && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center gap-0.5 font-medium",
+				style: { color: delta.color ?? "var(--j2-color-primary)" },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, {
+					size: 11,
+					weight: "bold",
+					"aria-hidden": true
+				}), delta.value]
+			}),
+			!delta && placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-j2-text-secondary",
+				children: placeholder
+			}),
+			srLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: srLabel
+			})
+		]
+	});
+});
+ChangeChip.displayName = "ChangeChip";
+//#endregion
+exports.ChangeChip = ChangeChip;
+//# sourceMappingURL=ChangeChip.cjs.map

package/dist/src/components/changeChip/ChangeChip.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ChangeChip.cjs","names":["forwardRef","ArrowDownIcon","ArrowUpIcon","cx","Swatch"],"sources":["../../../../src/components/changeChip/ChangeChip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\nimport { ArrowDownIcon, ArrowUpIcon } from '@phosphor-icons/react'\n\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type ChangeChipProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'type'\n> & {\n /** A leading swatch, e.g. the kind of change. */\n swatch?: Omit<SwatchProps, 'size'>\n /** What changed, e.g. an area's name. */\n label?: React.ReactNode\n /** How much it changed. */\n delta?: {\n direction: 'up' | 'down'\n value: React.ReactNode\n /** Text color for the arrow and value. Defaults to the primary color. */\n color?: string\n }\n /** Trailing text when there is no delta to show, e.g. an em dash. */\n placeholder?: React.ReactNode\n /** A full description for assistive tech, when the visible text is terse. */\n srLabel?: string\n}\n\n/**\n * A compact chip for one change: an optional swatch, a label and a delta.\n * It is a button, so it can open a popover with the details; wrap it in a\n * `Popover` (it forwards its ref and handlers).\n */\nexport const ChangeChip = forwardRef<HTMLButtonElement, ChangeChipProps>(\n (\n { swatch, label, delta, placeholder, srLabel, className, ...props },\n ref\n ) => {\n const Arrow = delta?.direction === 'down' ? ArrowDownIcon : ArrowUpIcon\n return (\n <button\n {...props}\n ref={ref}\n type=\"button\"\n className={cx(\n 'inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2',\n className\n )}\n >\n {swatch && <Swatch {...swatch} size={12} />}\n {label && <span>{label}</span>}\n {delta && (\n <span\n className=\"inline-flex items-center gap-0.5 font-medium\"\n style={{ color: delta.color ?? 'var(--j2-color-primary)' }}\n >\n <Arrow size={11} weight=\"bold\" aria-hidden />\n {delta.value}\n </span>\n )}\n {!delta && placeholder && (\n <span className=\"text-j2-text-secondary\">{placeholder}</span>\n )}\n {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n </button>\n )\n }\n)\nChangeChip.displayName = 'ChangeChip'\n"],"mappings":";;;;;;;;;;;;;;AAgCA,IAAa,cAAA,GAAaA,MAAAA,WAAAA,EAEtB,EAAE,QAAQ,OAAO,OAAO,aAAa,SAAS,WAAW,GAAG,SAC5D,QACG;CACH,MAAM,QAAQ,OAAO,cAAc,SAASC,sBAAAA,gBAAgBC,sBAAAA;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EACE,GAAI;EACC;EACL,MAAK;EACL,YAAA,GAAWC,WAAAA,QAAAA,CACT,mNACA,SACF;EAPF,UAAA;GASG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;IAAQ,GAAI;IAAQ,MAAM;GAAK,CAAA;GACzC,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAC5B,SACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,OAAO,MAAM,SAAS,0BAA0B;IAF3D,UAAA,CAIE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAO,MAAM;KAAI,QAAO;KAAO,eAAA;IAAa,CAAA,GAC3C,MAAM,KACH;;GAEP,CAAC,SAAS,eACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA0B,UAAA;GAAkB,CAAA;GAE7D,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAc,CAAA;EAC/C;;AAEZ,CACF;AACA,WAAW,cAAc"}