@veracity/vui 5.2.0-alpha.398622.2606110819 → 5.2.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.
- package/dist/badge/badge.d.ts.map +1 -1
- package/dist/badge/badge.js +1 -8
- package/dist/badge/badge.js.map +1 -1
- package/dist/button/buttonText.js +1 -1
- package/dist/button/buttons.d.ts +1 -2
- package/dist/button/buttons.d.ts.map +1 -1
- package/dist/button/buttons.js +5 -21
- package/dist/button/buttons.js.map +1 -1
- package/dist/button/index.d.ts +1 -1
- package/dist/dialog/dialogCloseButton.js +1 -1
- package/dist/dialog/dialogCloseButton.js.map +1 -1
- package/dist/dismissButton/DismissButton.d.ts +34 -0
- package/dist/dismissButton/DismissButton.d.ts.map +1 -0
- package/dist/dismissButton/DismissButton.js +69 -0
- package/dist/dismissButton/DismissButton.js.map +1 -0
- package/dist/dismissButton/index.d.ts +1 -0
- package/dist/dismissButton/theme.js +33 -0
- package/dist/dismissButton/theme.js.map +1 -0
- package/dist/header/loggedInHeader.js +1 -1
- package/dist/index.d.ts +6 -5
- package/dist/index.js +10 -9
- package/dist/notification/index.d.ts +1 -1
- package/dist/notification/notification.d.ts.map +1 -1
- package/dist/notification/notification.js +27 -6
- package/dist/notification/notification.js.map +1 -1
- package/dist/notification/notification.types.d.ts +26 -7
- package/dist/notification/notification.types.d.ts.map +1 -1
- package/dist/notification/notificationAction.d.ts.map +1 -1
- package/dist/notification/notificationAction.js +6 -1
- package/dist/notification/notificationAction.js.map +1 -1
- package/dist/notification/theme.js +25 -10
- package/dist/notification/theme.js.map +1 -1
- package/dist/notification/utils.js +39 -10
- package/dist/notification/utils.js.map +1 -1
- package/dist/range/index.d.ts +1 -1
- package/dist/range/range.d.ts.map +1 -1
- package/dist/range/range.js +93 -51
- package/dist/range/range.js.map +1 -1
- package/dist/range/range.types.d.ts +2 -3
- package/dist/range/range.types.d.ts.map +1 -1
- package/dist/range/theme.js +1 -5
- package/dist/range/theme.js.map +1 -1
- package/dist/stepIndicator/stepIndicator.js +1 -0
- package/dist/stepIndicator/stepIndicator.js.map +1 -1
- package/dist/tabs/tabsNavBar.js +2 -2
- package/dist/tabs/tabsNavBar.js.map +1 -1
- package/dist/tag/index.d.ts +1 -1
- package/dist/tag/tag.d.ts.map +1 -1
- package/dist/tag/tag.js +4 -4
- package/dist/tag/tag.js.map +1 -1
- package/dist/tag/tag.types.d.ts +9 -9
- package/dist/tag/tag.types.d.ts.map +1 -1
- package/dist/tag/theme.js +13 -33
- package/dist/tag/theme.js.map +1 -1
- package/dist/tag/utils.d.ts +7 -7
- package/dist/tag/utils.d.ts.map +1 -1
- package/dist/tag/utils.js +8 -8
- package/dist/tag/utils.js.map +1 -1
- package/dist/theme/components.d.ts +33 -16
- package/dist/theme/components.js +88 -86
- package/dist/theme/components.js.map +1 -1
- package/dist/theme/defaultTheme.d.ts +33 -16
- package/dist/theme/types.d.ts +3 -1
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/toast/useToast.d.ts.map +1 -1
- package/dist/toast/useToast.js +2 -0
- package/dist/toast/useToast.js.map +1 -1
- package/dist/tutorial/tutorialCard.js +2 -1
- package/dist/tutorial/tutorialCard.js.map +1 -1
- package/package.json +5 -3
- package/skills/build-with-vui/SKILL.md +1 -1
- package/skills/upgrade-vui-v4-to-v5/SKILL.md +8 -7
package/dist/range/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","names":[],"sources":["../../src/range/theme.ts"],"sourcesContent":["import { rangeColors } from './consts'\n\nconst baseStyle = {\n container: {\n w: 1,\n },\n thumb: {\n bg: 'white',\n border:
|
|
1
|
+
{"version":3,"file":"theme.js","names":[],"sources":["../../src/range/theme.ts"],"sourcesContent":["import { rangeColors } from './consts'\n\nconst baseStyle = {\n container: {\n w: 1,\n },\n thumb: {\n bg: 'white',\n border: '2px solid',\n borderRadius: '24px',\n h: '24px',\n lineHeight: '24px',\n w: '24px',\n textAlign: 'center',\n transitionDuration: '0s',\n },\n thumbValue: {\n position: 'absolute',\n top: '24px',\n w: '18px',\n },\n track: {\n bg: rangeColors.main,\n borderRadius: '24px',\n transitionDuration: '0s',\n },\n}\n\nconst defaultProps = {}\n\nconst parts = ['container', 'thumb', 'thumbValue', 'track']\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n baseStyle,\n defaultProps,\n parts,\n sizes,\n variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY;CAChB,WAAW,EACT,GAAG,EACL;CACA,OAAO;EACL,IAAI;EACJ,QAAQ;EACR,cAAc;EACd,GAAG;EACH,YAAY;EACZ,GAAG;EACH,WAAW;EACX,oBAAoB;CACtB;CACA,YAAY;EACV,UAAU;EACV,KAAK;EACL,GAAG;CACL;CACA,OAAO;EACL,IAAI,YAAY;EAChB,cAAc;EACd,oBAAoB;CACtB;AACF;AAEA,MAAM,eAAe,CAAC;AAEtB,MAAM,QAAQ;CAAC;CAAa;CAAS;CAAc;AAAO;AAE1D,MAAM,QAAQ,CAAC;AAEf,MAAM,WAAW,CAAC;AAElB,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepIndicator.js","names":[],"sources":["../../src/stepIndicator/stepIndicator.tsx"],"sourcesContent":["import Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\nimport type { StepIndicatorProps } from './stepIndicatorTypes'\n\nconst Content = ({ number, variant, size }: { number?: number; variant?: string; size?: string }) => {\n if (typeof number === 'undefined') return null\n if (variant === 'completed') return <Icon name=\"uiCheck\" size={size as any} />\n if (variant === 'error') return <Icon name=\"uiTimes\" size={size as any} />\n return (\n <T fontSize={size === 'md' ? 16 : 14} fontWeight={600}>\n {number}\n </T>\n )\n}\n\n/**\n * Implements stepper indicator **\n */\nexport const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {\n const { icon, number, className, size = 'md', variant = 'active', ...rest } = props\n const styles = useStyleConfig('StepIndicator', props)\n\n return icon ? (\n <Button\n className={cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className)}\n icon={icon}\n ref={ref}\n {...styles.icon}\n {...rest}\n isRound\n minW=\"auto\"\n pointerEvents=\"none\"\n size={size}\n />\n ) : (\n <Button\n className={cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className)}\n ref={ref}\n {...styles.button}\n {...rest}\n isRound\n minW=\"auto\"\n outline=\"6px solid white\"\n pointerEvents=\"none\"\n position=\"relative\"\n size={size}\n >\n <Box mx={0.5} position=\"relative\" />\n <Box mx={0.5} position=\"absolute\">\n <Content number={number} size={String(size)} variant={String(variant)} />\n </Box>\n </Button>\n )\n})\n\nStepIndicator.displayName = 'StepIndicator'\n\nexport default StepIndicator\n"],"mappings":";;;;;;;;;;AAQA,MAAM,WAAW,EAAE,QAAQ,SAAS,WAAiE;CACnG,IAAI,OAAO,WAAW,aAAa,OAAO;CAC1C,IAAI,YAAY,aAAa,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CAC7E,IAAI,YAAY,SAAS,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CACzE,OACE,oBAAC,GAAD;EAAG,UAAU,SAAS,OAAO,KAAK;EAAI,YAAY;YAC/C;CACA;AAEP;;;;AAKA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,MAAM,QAAQ,WAAW,OAAO,MAAM,UAAU,UAAU,GAAG,SAAS;CAC9E,MAAM,SAAS,eAAe,iBAAiB,KAAK;CAEpD,OAAO,OACL,oBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,yBAAyB,SAAS;EAC/D;EACD;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,eAAc;EACR;CACP,KAED,qBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,2BAA2B,SAAS;EAClE;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,SAAQ;EACR,eAAc;EACd,UAAS;EACH;
|
|
1
|
+
{"version":3,"file":"stepIndicator.js","names":[],"sources":["../../src/stepIndicator/stepIndicator.tsx"],"sourcesContent":["import Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\nimport type { StepIndicatorProps } from './stepIndicatorTypes'\n\nconst Content = ({ number, variant, size }: { number?: number; variant?: string; size?: string }) => {\n if (typeof number === 'undefined') return null\n if (variant === 'completed') return <Icon name=\"uiCheck\" size={size as any} />\n if (variant === 'error') return <Icon name=\"uiTimes\" size={size as any} />\n return (\n <T fontSize={size === 'md' ? 16 : 14} fontWeight={600}>\n {number}\n </T>\n )\n}\n\n/**\n * Implements stepper indicator **\n */\nexport const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {\n const { icon, number, className, size = 'md', variant = 'active', ...rest } = props\n const styles = useStyleConfig('StepIndicator', props)\n\n return icon ? (\n <Button\n className={cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className)}\n icon={icon}\n ref={ref}\n {...styles.icon}\n {...rest}\n isRound\n minW=\"auto\"\n pointerEvents=\"none\"\n size={size}\n />\n ) : (\n <Button\n className={cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className)}\n ref={ref}\n {...styles.button}\n {...rest}\n isRound\n minW=\"auto\"\n outline=\"6px solid white\"\n pointerEvents=\"none\"\n position=\"relative\"\n size={size}\n px={size === 'md' ? 12 : 8}\n >\n <Box mx={0.5} position=\"relative\" />\n <Box mx={0.5} position=\"absolute\">\n <Content number={number} size={String(size)} variant={String(variant)} />\n </Box>\n </Button>\n )\n})\n\nStepIndicator.displayName = 'StepIndicator'\n\nexport default StepIndicator\n"],"mappings":";;;;;;;;;;AAQA,MAAM,WAAW,EAAE,QAAQ,SAAS,WAAiE;CACnG,IAAI,OAAO,WAAW,aAAa,OAAO;CAC1C,IAAI,YAAY,aAAa,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CAC7E,IAAI,YAAY,SAAS,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CACzE,OACE,oBAAC,GAAD;EAAG,UAAU,SAAS,OAAO,KAAK;EAAI,YAAY;YAC/C;CACA;AAEP;;;;AAKA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,MAAM,QAAQ,WAAW,OAAO,MAAM,UAAU,UAAU,GAAG,SAAS;CAC9E,MAAM,SAAS,eAAe,iBAAiB,KAAK;CAEpD,OAAO,OACL,oBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,yBAAyB,SAAS;EAC/D;EACD;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,eAAc;EACR;CACP,KAED,qBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,2BAA2B,SAAS;EAClE;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,SAAQ;EACR,eAAc;EACd,UAAS;EACH;EACN,IAAI,SAAS,OAAO,KAAK;YAX3B,CAaE,oBAAC,KAAD;GAAK,IAAI;GAAK,UAAS;EAAY,IACnC,oBAAC,KAAD;GAAK,IAAI;GAAK,UAAS;aACrB,oBAAC,SAAD;IAAiB;IAAQ,MAAM,OAAO,IAAI;IAAG,SAAS,OAAO,OAAO;GAAI;EACrE,EACC;;AAEZ,CAAC;AAED,cAAc,cAAc"}
|
package/dist/tabs/tabsNavBar.js
CHANGED
|
@@ -3,7 +3,7 @@ import theme_default from "./theme.js";
|
|
|
3
3
|
import vui from "../core/vui.js";
|
|
4
4
|
import Box from "../box/box.js";
|
|
5
5
|
import Icon from "../icon/icon.js";
|
|
6
|
-
import { DismissButton } from "../
|
|
6
|
+
import { DismissButton } from "../dismissButton/DismissButton.js";
|
|
7
7
|
import ListItem from "../list/listItem.js";
|
|
8
8
|
import List from "../list/list.js";
|
|
9
9
|
import { colors, iconSizeMapper } from "./consts.js";
|
|
@@ -60,7 +60,7 @@ const TabsNavBar = vui((props, ref) => {
|
|
|
60
60
|
disabled: tab.disabled,
|
|
61
61
|
ml: 1,
|
|
62
62
|
onClick: (e) => {
|
|
63
|
-
e
|
|
63
|
+
e?.stopPropagation();
|
|
64
64
|
tab?.onDelete?.(e);
|
|
65
65
|
},
|
|
66
66
|
title: "Delete"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabsNavBar.js","names":["theme"],"sources":["../../src/tabs/tabsNavBar.tsx"],"sourcesContent":["import Box from '../box'\nimport {
|
|
1
|
+
{"version":3,"file":"tabsNavBar.js","names":["theme"],"sources":["../../src/tabs/tabsNavBar.tsx"],"sourcesContent":["import Box from '../box'\nimport { vui } from '../core'\nimport { DismissButton } from '../dismissButton'\nimport { Icon } from '../icon'\nimport { List, ListItem } from '../list'\nimport type { Dict } from '../utils'\nimport { cs } from '../utils'\nimport { colors, iconSizeMapper } from './consts'\nimport type { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'\nimport theme from './theme'\n\nconst { activeBg, border, color, hover, main } = colors\n\nexport const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {\n const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props\n const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'\n\n const { sizes } = (theme as Dict) ?? {}\n\n const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize\n const h = sizes[size ?? 'md'].tabsNavBar.h\n const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth\n const py = sizes[size ?? 'md'].tabsNavBar.py\n const iconMarginRight = size === 'xxl' ? '16px' : '8px'\n\n const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem\n\n return (\n <List\n alignItems=\"end\"\n borderBottom={showBorder ? `1px solid ${border}` : 'none'}\n className={cs('vui-tabsNavBar')}\n display=\"flex\"\n isInteractive\n mb=\"20px\"\n ref={ref}\n w={1}\n >\n {tabs?.map?.(tab => (\n <ListItem\n activeBg={tab.disabled ? undefined : activeBg}\n bg=\"white\"\n className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}\n color={isActive(tab) ? main : color}\n disabled={tab.disabled}\n display=\"inline-flex\"\n fontSize={fontSize}\n lineHeight=\"125%\"\n fontWeight={400}\n h={h}\n hoverBg={tab.disabled ? undefined : hover}\n key={tab.index}\n onClick={e => onNavItemClick?.(tab.index || 0, e)}\n position=\"relative\"\n px=\"16px\"\n py={py}\n >\n <Box alignItems=\"center\">\n {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}\n {tab.title}\n </Box>\n {!!tab.onDelete && (\n <DismissButton\n aria-label=\"Delete\"\n disabled={tab.disabled}\n ml={1}\n onClick={(e: { stopPropagation: () => void }) => {\n e?.stopPropagation()\n tab?.onDelete?.(e as any)\n }}\n title=\"Delete\"\n />\n )}\n {isActive(tab) && (\n <Box\n animation={animationDirection}\n bg={main}\n bottom=\"-1px\"\n className=\"vui-tabsNavBarItemActiveIndicator\"\n h={borderWidth}\n left={0}\n position=\"absolute\"\n w={1}\n >\n \n </Box>\n )}\n </ListItem>\n ))}\n {!!actions && (\n <Box ml=\"auto\" px={0.75} py={0.5}>\n {actions}\n </Box>\n )}\n </List>\n )\n})\n\nTabsNavBar.displayName = 'TabsNavBar'\n\nexport default TabsNavBar\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,QAAQ,OAAO,OAAO,SAAS;AAEjD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,SAAS,MAAM,gBAAgB,eAAe,oBAAoB,YAAY,OAAO,SAAS;CACtG,MAAM,WAA2B,iBAAiB,SAAmB;CAErE,MAAM,EAAE,UAAWA,iBAAkB,CAAC;CAEtC,MAAM,WAAW,MAAM,QAAQ,KAAK,CAAC,WAAW;CAChD,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC,WAAW;CACzC,MAAM,cAAc,MAAM,QAAQ,KAAK,CAAC,WAAW;CACnD,MAAM,KAAK,MAAM,QAAQ,KAAK,CAAC,WAAW;CAC1C,MAAM,kBAAkB,SAAS,QAAQ,SAAS;CAElD,MAAM,YAAY,QAAuB,CAAC,IAAI,YAAY,KAAK,UAAU;CAEzE,OACE,qBAAC,MAAD;EACE,YAAW;EACX,cAAc,aAAa,aAAa,WAAW;EACnD,WAAW,GAAG,gBAAgB;EAC9B,SAAQ;EACR;EACA,IAAG;EACE;EACL,GAAG;YARL,CAUG,MAAM,OAAM,QACX,qBAAC,UAAD;GACE,UAAU,IAAI,WAAW,SAAY;GACrC,IAAG;GACH,WAAW,yCAAyC,KAAK;GACzD,OAAO,SAAS,GAAG,IAAI,OAAO;GAC9B,UAAU,IAAI;GACd,SAAQ;GACE;GACV,YAAW;GACX,YAAY;GACT;GACH,SAAS,IAAI,WAAW,SAAY;GAEpC,UAAS,MAAK,iBAAiB,IAAI,SAAS,GAAG,CAAC;GAChD,UAAS;GACT,IAAG;GACC;aAhBN;IAkBE,qBAAC,KAAD;KAAK,YAAW;eAAhB,CACG,CAAC,CAAC,IAAI,QAAQ,oBAAC,MAAD;MAAM,IAAI;MAAiB,MAAM,IAAI;MAAM,MAAM;KAAW,IAC1E,IAAI,KACF;;IACJ,CAAC,CAAC,IAAI,YACL,oBAAC,eAAD;KACE,cAAW;KACX,UAAU,IAAI;KACd,IAAI;KACJ,UAAU,MAAuC;MAC/C,GAAG,gBAAgB;MACnB,KAAK,WAAW,CAAQ;KAC1B;KACA,OAAM;IACP;IAEF,SAAS,GAAG,KACX,oBAAC,KAAD;KACE,WAAW;KACX,IAAI;KACJ,QAAO;KACP,WAAU;KACV,GAAG;KACH,MAAM;KACN,UAAS;KACT,GAAG;eACJ;IAEI;GAEC;KApCH,IAAI,KAoCD,CACX,GACA,CAAC,CAAC,WACD,oBAAC,KAAD;GAAK,IAAG;GAAO,IAAI;GAAM,IAAI;aAC1B;EACE,EAEH;;AAEV,CAAC;AAED,WAAW,cAAc"}
|
package/dist/tag/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TagColor, TagColorTokens, TagContainerStyles, TagHierarchy, TagInnerProps, TagProps, TagVariantCanonical } from "./tag.types.js";
|
|
2
2
|
import { Tag } from "./tag.js";
|
|
3
3
|
import { resolveTagVariantKey } from "./utils.js";
|
package/dist/tag/tag.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","names":[],"sources":["../../src/tag/tag.tsx"],"mappings":";;;;;;;AA6CA;;cAAa,GAAA,
|
|
1
|
+
{"version":3,"file":"tag.d.ts","names":[],"sources":["../../src/tag/tag.tsx"],"mappings":";;;;;;;AA6CA;;cAAa,GAAA,EAoKP,YAAY,SAAS,QAAA"}
|
package/dist/tag/tag.js
CHANGED
|
@@ -6,8 +6,8 @@ import { useStyleConfig } from "../core/theme.js";
|
|
|
6
6
|
import styled from "../core/styled.js";
|
|
7
7
|
import vui from "../core/vui.js";
|
|
8
8
|
import Icon from "../icon/icon.js";
|
|
9
|
+
import { DismissButton } from "../dismissButton/DismissButton.js";
|
|
9
10
|
import T from "../t/t.js";
|
|
10
|
-
import { DismissButton } from "../button/buttons.js";
|
|
11
11
|
import { resolveTagVariantKey } from "./utils.js";
|
|
12
12
|
import { useEffect, useMemo } from "react";
|
|
13
13
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -38,12 +38,12 @@ const TagBase = styled.spanBox`
|
|
|
38
38
|
* is set, the tag renders as a `<button>` so it is keyboard-activatable.
|
|
39
39
|
*/
|
|
40
40
|
const Tag = vui((props, ref) => {
|
|
41
|
-
const { children, className, deleteLabel = "Remove", icon, startIcon, endIcon, iconLeft, iconRight,
|
|
42
|
-
const resolvedVariant = useMemo(() => resolveTagVariantKey(variantProp,
|
|
41
|
+
const { children, className, deleteLabel = "Remove", icon, startIcon, endIcon, iconLeft, iconRight, color: colorProp, isInteractive = props.onClick !== void 0 && props.onDelete === void 0, isTruncated = true, itemLeft, itemRight, onClick, onDelete, size = "md", text, variant: variantProp, ...rest } = props;
|
|
42
|
+
const resolvedVariant = useMemo(() => resolveTagVariantKey(variantProp, colorProp), [variantProp, colorProp]);
|
|
43
43
|
useEffect(() => {
|
|
44
44
|
if (iconLeft !== void 0) console.warn("[Tag] `iconLeft` is deprecated. Use `startIcon` instead.");
|
|
45
45
|
if (iconRight !== void 0) console.warn("[Tag] `iconRight` is deprecated. Use `endIcon` instead.");
|
|
46
|
-
if (variantProp !== void 0 && !["subtle", "solid"].includes(variantProp) && /^(subtle|solid)(Brand|Success|Danger|Warning|Lavender|Eucalyptus|Terracotta|Grey)$/.test(variantProp)) console.warn(`[Tag] Combined variant "${variantProp}" is deprecated. Use separate \`variant\` + \`
|
|
46
|
+
if (variantProp !== void 0 && !["subtle", "solid"].includes(variantProp) && /^(subtle|solid)(Brand|Success|Danger|Warning|Lavender|Eucalyptus|Terracotta|Grey)$/.test(variantProp)) console.warn(`[Tag] Combined variant "${variantProp}" is deprecated. Use separate \`variant\` + \`color\` props instead (e.g. variant="subtle" color="blue").`);
|
|
47
47
|
}, [
|
|
48
48
|
iconLeft,
|
|
49
49
|
iconRight,
|
package/dist/tag/tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.js","names":["fontSizes"],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"tag.js","names":["fontSizes"],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { DismissButton } from '../dismissButton'\nimport Icon from '../icon'\nimport T from '../t'\nimport { fontSizes } from '../theme'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport type { TagProps } from './tag.types'\nimport { resolveTagVariantKey } from './utils'\n\n// ---------------------------------------------------------------------------\n// Styled primitives\n// ---------------------------------------------------------------------------\n\n/** Outer container — rendered as <span> for static tags and <button> for interactive tags. */\nconst TagBase = styled.spanBox`\n /* Drives DismissButton color via cascade so the close affordance picks up the tag's text color. */\n --vui-dismiss-fg: currentColor;\n\n align-items: center;\n display: inline-flex;\n font-weight: medium;\n justify-content: center;\n line-height: 1;\n max-width: 100%;\n position: relative;\n transition-duration: fast;\n width: fit-content;\n\n &:focus {\n outline: none;\n }\n`\n\n// ---------------------------------------------------------------------------\n// Tag component\n// ---------------------------------------------------------------------------\n\n/**\n * Displays text, icons or custom content. Can be made interactive or include a\n * dismiss affordance. When `isInteractive` (or `onClick` without `onDelete`)\n * is set, the tag renders as a `<button>` so it is keyboard-activatable.\n */\nexport const Tag = vui<'span', TagProps>((props, ref) => {\n const {\n children,\n className,\n deleteLabel = 'Remove',\n icon,\n startIcon,\n endIcon,\n iconLeft,\n iconRight,\n color: colorProp,\n isInteractive = props.onClick !== undefined && props.onDelete === undefined,\n isTruncated = true,\n itemLeft,\n itemRight,\n onClick,\n onDelete,\n size = 'md',\n text,\n variant: variantProp,\n ...rest\n } = props\n\n // Resolve canonical theme key from the two-prop API (variant + color).\n const resolvedVariant = useMemo(() => resolveTagVariantKey(variantProp, colorProp), [variantProp, colorProp])\n\n // Dev-mode deprecation warning for legacy combined variants.\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (iconLeft !== undefined) {\n console.warn('[Tag] `iconLeft` is deprecated. Use `startIcon` instead.')\n }\n if (iconRight !== undefined) {\n console.warn('[Tag] `iconRight` is deprecated. Use `endIcon` instead.')\n }\n if (\n variantProp !== undefined &&\n !['subtle', 'solid'].includes(variantProp) &&\n /^(subtle|solid)(Brand|Success|Danger|Warning|Lavender|Eucalyptus|Terracotta|Grey)$/.test(variantProp)\n ) {\n console.warn(\n `[Tag] Combined variant \"${variantProp}\" is deprecated. ` +\n 'Use separate `variant` + `color` props instead (e.g. variant=\"subtle\" color=\"blue\").',\n )\n }\n }\n }, [iconLeft, iconRight, variantProp])\n\n const resolvedStartIcon = startIcon ?? iconLeft\n const resolvedEndIcon = endIcon ?? iconRight\n\n const styles = useStyleConfig('Tag', { ...props, variant: resolvedVariant })\n const {\n h,\n fontSize: themeFontSize,\n paddingX = 0,\n paddingY = 0,\n gapX = 0,\n borderRadius,\n bgHover,\n bgPressed,\n ...containerColors\n } = styles.container ?? {}\n const dismissStyles = styles.dismiss ?? {}\n const iconStyles = styles.icon ?? {}\n\n const resolvedFontSize = fontSizes[themeFontSize as keyof typeof fontSizes] ?? themeFontSize\n const fontSize = `var(--vui-tag-font-size, ${resolvedFontSize}px)`\n\n const resolvedIconSize = iconStyles.fontSize || '1rem'\n const iconSize = `var(--vui-tag-icon-size, ${resolvedIconSize})`\n\n const TagIcon = ({ name, mr, ml }: { name: string; mr?: string; ml?: string }) => (\n <Icon className=\"vui-tagIcon\" fontSize={iconSize} h={iconSize} ml={ml} mr={mr} w={iconSize} name={name} />\n )\n\n // Theme numeric values are raw pixel measurements (mirrors button/theme.ts).\n // Convert to px strings to bypass xstyled's `spaces` scale lookup on padding/gap props.\n const toPx = (v: unknown) => (typeof v === 'number' ? `${v}px` : v)\n const pxX = toPx(paddingX)\n const pxY = toPx(paddingY)\n const pxGap = toPx(gapX)\n\n const aliasedProps = filterUndefined({\n borderRadius,\n })\n\n const interactiveStateProps = isInteractive\n ? filterUndefined({\n hoverBg: bgHover,\n activeBg: bgPressed,\n })\n : undefined\n\n const interactiveProps = isInteractive\n ? {\n as: 'button' as const,\n type: 'button' as const,\n cursor: 'pointer',\n tabIndex: 0,\n userSelect: 'none',\n }\n : {}\n\n return (\n <TagBase\n className={cs('vui-tag', className)}\n focusRing={2}\n fontSize={fontSize}\n h={h}\n isTruncated={isTruncated}\n onClick={onClick}\n px={pxX}\n py={pxY}\n ref={ref}\n variant={resolvedVariant}\n {...containerColors}\n {...interactiveProps}\n {...interactiveStateProps}\n {...aliasedProps}\n {...rest}\n >\n {isString(icon) ? <TagIcon name={icon} /> : icon}\n\n {!icon && (\n <>\n {itemLeft}\n\n {isString(resolvedStartIcon) ? (\n <TagIcon name={resolvedStartIcon} mr={pxGap as string} />\n ) : (\n resolvedStartIcon\n )}\n\n {children ??\n (isReactText(text) ? (\n <T className=\"vui-tagText\" fontSize=\"inherit\" isTruncated={isTruncated}>\n {text}\n </T>\n ) : (\n text\n ))}\n\n {isString(resolvedEndIcon) ? (\n <TagIcon name={resolvedEndIcon} ml={pxGap as string} />\n ) : (\n resolvedEndIcon\n )}\n\n {onDelete && !isInteractive ? (\n <DismissButton\n aria-label={deleteLabel}\n className=\"vui-tagButton\"\n ml={pxGap}\n onClick={onDelete}\n {...dismissStyles}\n />\n ) : (\n itemRight\n )}\n </>\n )}\n </TagBase>\n )\n}) as VuiComponent<'span', TagProps>\n\nTag.displayName = 'Tag'\n\nexport default Tag\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,UAAU,OAAO,OAAO;;;;;;;;;;;;;;;;;;;;;;;AA4B9B,MAAa,MAAM,KAAuB,OAAO,QAAQ;CACvD,MAAM,EACJ,UACA,WACA,cAAc,UACd,MACA,WACA,SACA,UACA,WACA,OAAO,WACP,gBAAgB,MAAM,YAAY,UAAa,MAAM,aAAa,QAClE,cAAc,MACd,UACA,WACA,SACA,UACA,OAAO,MACP,MACA,SAAS,aACT,GAAG,SACD;CAGJ,MAAM,kBAAkB,cAAc,qBAAqB,aAAa,SAAS,GAAG,CAAC,aAAa,SAAS,CAAC;CAG5G,gBAAgB;EAEZ,IAAI,aAAa,QACf,QAAQ,KAAK,0DAA0D;EAEzE,IAAI,cAAc,QAChB,QAAQ,KAAK,yDAAyD;EAExE,IACE,gBAAgB,UAChB,CAAC,CAAC,UAAU,OAAO,CAAC,CAAC,SAAS,WAAW,KACzC,qFAAqF,KAAK,WAAW,GAErG,QAAQ,KACN,2BAA2B,YAAY,0GAEzC;CAGN,GAAG;EAAC;EAAU;EAAW;CAAW,CAAC;CAErC,MAAM,oBAAoB,aAAa;CACvC,MAAM,kBAAkB,WAAW;CAEnC,MAAM,SAAS,eAAe,OAAO;EAAE,GAAG;EAAO,SAAS;CAAgB,CAAC;CAC3E,MAAM,EACJ,GACA,UAAU,eACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,cACA,SACA,WACA,GAAG,oBACD,OAAO,aAAa,CAAC;CACzB,MAAM,gBAAgB,OAAO,WAAW,CAAC;CACzC,MAAM,aAAa,OAAO,QAAQ,CAAC;CAGnC,MAAM,WAAW,4BADQA,kBAAU,kBAA4C,cACjB;CAG9D,MAAM,WAAW,4BADQ,WAAW,YAAY,OACc;CAE9D,MAAM,WAAW,EAAE,MAAM,IAAI,SAC3B,oBAAC,MAAD;EAAM,WAAU;EAAc,UAAU;EAAU,GAAG;EAAc;EAAQ;EAAI,GAAG;EAAgB;CAAO;CAK3G,MAAM,QAAQ,MAAgB,OAAO,MAAM,WAAW,GAAG,EAAE,MAAM;CACjE,MAAM,MAAM,KAAK,QAAQ;CACzB,MAAM,MAAM,KAAK,QAAQ;CACzB,MAAM,QAAQ,KAAK,IAAI;CAEvB,MAAM,eAAe,gBAAgB,EACnC,aACF,CAAC;CAED,MAAM,wBAAwB,gBAC1B,gBAAgB;EACd,SAAS;EACT,UAAU;CACZ,CAAC,IACD;CAEJ,MAAM,mBAAmB,gBACrB;EACE,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,UAAU;EACV,YAAY;CACd,IACA,CAAC;CAEL,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,WAAW,SAAS;EAClC,WAAW;EACD;EACP;EACU;EACJ;EACT,IAAI;EACJ,IAAI;EACC;EACL,SAAS;EACT,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;YAfN,CAiBG,SAAS,IAAI,IAAI,oBAAC,SAAD,EAAS,MAAM,KAAO,KAAI,MAE3C,CAAC,QACA;GACG;GAEA,SAAS,iBAAiB,IACzB,oBAAC,SAAD;IAAS,MAAM;IAAmB,IAAI;GAAkB,KAExD;GAGD,aACE,YAAY,IAAI,IACf,oBAAC,GAAD;IAAG,WAAU;IAAc,UAAS;IAAuB;cACxD;GACA,KAEH;GAGH,SAAS,eAAe,IACvB,oBAAC,SAAD;IAAS,MAAM;IAAiB,IAAI;GAAkB,KAEtD;GAGD,YAAY,CAAC,gBACZ,oBAAC,eAAD;IACE,cAAY;IACZ,WAAU;IACV,IAAI;IACJ,SAAS;IACT,GAAI;GACL,KAED;EAEF,IAEG;;AAEb,CAAC;AAED,IAAI,cAAc"}
|
package/dist/tag/tag.types.d.ts
CHANGED
|
@@ -7,12 +7,12 @@ import { JSX } from "react";
|
|
|
7
7
|
//#region src/tag/tag.types.d.ts
|
|
8
8
|
/** Visual hierarchy of the tag. */
|
|
9
9
|
type TagHierarchy = 'subtle' | 'solid';
|
|
10
|
-
/** Semantic
|
|
11
|
-
type
|
|
10
|
+
/** Semantic color family of the tag. */
|
|
11
|
+
type TagColor = 'blue' | 'green' | 'red' | 'yellow' | 'lavender' | 'eucalyptus' | 'terracotta' | 'grey';
|
|
12
12
|
/** Fully-qualified canonical variant keys (generated by theme.ts). */
|
|
13
|
-
type TagVariantCanonical = '
|
|
14
|
-
/** Token block per
|
|
15
|
-
interface
|
|
13
|
+
type TagVariantCanonical = 'subtleBlue' | 'subtleGreen' | 'subtleRed' | 'subtleYellow' | 'subtleLavender' | 'subtleEucalyptus' | 'subtleTerracotta' | 'subtleGrey' | 'solidBlue' | 'solidGreen' | 'solidRed' | 'solidYellow' | 'solidLavender' | 'solidEucalyptus' | 'solidTerracotta' | 'solidGrey';
|
|
14
|
+
/** Token block per color used by the generated theme approach. */
|
|
15
|
+
interface TagColorTokens {
|
|
16
16
|
solid: string;
|
|
17
17
|
solidHover: string;
|
|
18
18
|
solidPressed: string;
|
|
@@ -38,10 +38,10 @@ interface TagContainerStyles {
|
|
|
38
38
|
}
|
|
39
39
|
type TagInnerProps = {
|
|
40
40
|
/**
|
|
41
|
-
* Semantic
|
|
42
|
-
* When both are set the resolved theme key is `${variant}${
|
|
41
|
+
* Semantic color family of the tag. Used together with `variant`.
|
|
42
|
+
* When both are set the resolved theme key is `${variant}${Color}` (e.g. `subtleBlue`).
|
|
43
43
|
*/
|
|
44
|
-
|
|
44
|
+
color?: TagColor | AnyString; /** Accessible label for the dismiss button when `onDelete` is provided. @default 'Remove' */
|
|
45
45
|
deleteLabel?: string; /** Icon that replaces any other content. */
|
|
46
46
|
icon?: IconProp | JSX.Element; /** Icon displayed on the leading (left) side of the content. */
|
|
47
47
|
startIcon?: IconProp | JSX.Element; /** Icon displayed on the trailing (right) side of the content. */
|
|
@@ -63,6 +63,6 @@ type TagInnerProps = {
|
|
|
63
63
|
};
|
|
64
64
|
type TagProps = SystemProps & ThemingProps<'Tag'> & TagInnerProps;
|
|
65
65
|
//#endregion
|
|
66
|
-
export {
|
|
66
|
+
export { TagColor, TagColorTokens, TagContainerStyles, TagHierarchy, TagInnerProps, TagProps, TagVariantCanonical };
|
|
67
67
|
|
|
68
68
|
//# sourceMappingURL=tag.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.types.d.ts","names":[],"sources":["../../src/tag/tag.types.ts"],"mappings":";;;;;;;;KAYY,YAAA;;KAGA,
|
|
1
|
+
{"version":3,"file":"tag.types.d.ts","names":[],"sources":["../../src/tag/tag.types.ts"],"mappings":";;;;;;;;KAYY,YAAA;;KAGA,QAAA;;KAGA,mBAAA;AANZ;AAAA,UAyBiB,cAAA;EACf,KAAA;EACA,UAAA;EACA,YAAA;EACA,YAAA;EACA,MAAA;EACA,WAAA;EACA,aAAA;EACA,aAAA;AAAA;;UAIe,kBAAA;EACf,EAAA;EACA,KAAA;EAde;EAgBf,OAAA;;EAEA,SAAA;EACA,YAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EAAA,CACC,GAAA;AAAA;AAAA,KAKS,aAAA;EApBV;;AAAa;AAIf;EAqBE,KAAA,GAAQ,QAAA,GAAW,SAAA;EAEnB,WAAA,WAtBA;EAwBA,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,EArBtB;EAuBA,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EApB3B;EAsBA,OAAA,GAAU,QAAA,GAAW,GAAA,CAAI,OAAA,EApBzB;EAsBA,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EApBzB;EAsBD,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAtBf;EAwBZ,aAAA,YAnBuB;EAqBvB,WAAA,YAhBQ;EAkBR,QAAA,GAAW,KAAA,CAAM,SAAA,EAdV;EAgBP,SAAA,GAAY,KAAA,CAAM,SAAA,EAdN;EAgBZ,QAAA,IAAY,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,iBAAA,EAAmB,UAAA,YAdpD;EAgBV,IAAA,GAAO,KAAA,CAAM,SAAA;EAdF;;;;;EAoBX,OAAA,GAAU,YAAA,GAAe,mBAAA,GAAsB,SAAA;AAAA;AAAA,KAGrC,QAAA,GAAW,WAAA,GAAc,YAAA,UAAsB,aAAA"}
|
package/dist/tag/theme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
//#region src/tag/theme.ts
|
|
2
|
-
/** Token references per semantic
|
|
3
|
-
const
|
|
4
|
-
|
|
2
|
+
/** Token references per semantic color. Tag-only; kept local per design decision. */
|
|
3
|
+
const colorTokens = {
|
|
4
|
+
blue: {
|
|
5
5
|
solid: "var(--vui-action-brand-solid)",
|
|
6
6
|
solidHover: "var(--vui-action-brand-solid-hover)",
|
|
7
7
|
solidPressed: "var(--vui-action-brand-solid-pressed)",
|
|
@@ -11,7 +11,7 @@ const intentTokens = {
|
|
|
11
11
|
subtlePressed: "var(--vui-action-brand-subtle-pressed)",
|
|
12
12
|
subtleInverse: "var(--vui-action-brand-subtle-inverse)"
|
|
13
13
|
},
|
|
14
|
-
|
|
14
|
+
green: {
|
|
15
15
|
solid: "var(--vui-action-success-solid)",
|
|
16
16
|
solidHover: "var(--vui-action-success-solid-hover)",
|
|
17
17
|
solidPressed: "var(--vui-action-success-solid-pressed)",
|
|
@@ -21,7 +21,7 @@ const intentTokens = {
|
|
|
21
21
|
subtlePressed: "var(--vui-action-success-subtle-pressed)",
|
|
22
22
|
subtleInverse: "var(--vui-action-success-subtle-inverse)"
|
|
23
23
|
},
|
|
24
|
-
|
|
24
|
+
red: {
|
|
25
25
|
solid: "var(--vui-action-danger-solid)",
|
|
26
26
|
solidHover: "var(--vui-action-danger-solid-hover)",
|
|
27
27
|
solidPressed: "var(--vui-action-danger-solid-pressed)",
|
|
@@ -71,7 +71,7 @@ const intentTokens = {
|
|
|
71
71
|
subtlePressed: "var(--vui-action-grey-subtle-pressed)",
|
|
72
72
|
subtleInverse: "var(--vui-action-grey-subtle-inverse)"
|
|
73
73
|
},
|
|
74
|
-
|
|
74
|
+
yellow: {
|
|
75
75
|
solid: "var(--vui-action-yellow-solid)",
|
|
76
76
|
solidHover: "var(--vui-action-yellow-solid-hover)",
|
|
77
77
|
solidPressed: "var(--vui-action-yellow-solid-pressed)",
|
|
@@ -82,7 +82,7 @@ const intentTokens = {
|
|
|
82
82
|
subtleInverse: "var(--vui-action-yellow-subtle-inverse)"
|
|
83
83
|
}
|
|
84
84
|
};
|
|
85
|
-
/** Container styles per visual hierarchy, composed from
|
|
85
|
+
/** Container styles per visual hierarchy, composed from color tokens. */
|
|
86
86
|
const hierarchyRules = {
|
|
87
87
|
subtle: (t) => ({
|
|
88
88
|
bg: t.subtle,
|
|
@@ -119,12 +119,7 @@ const sizes = {
|
|
|
119
119
|
borderRadius: 6
|
|
120
120
|
},
|
|
121
121
|
icon: { fontSize: "12px" },
|
|
122
|
-
dismiss: {
|
|
123
|
-
size: "sm",
|
|
124
|
-
w: 20,
|
|
125
|
-
h: 20,
|
|
126
|
-
minW: 20
|
|
127
|
-
}
|
|
122
|
+
dismiss: { size: "xs" }
|
|
128
123
|
},
|
|
129
124
|
sm: {
|
|
130
125
|
container: {
|
|
@@ -136,12 +131,7 @@ const sizes = {
|
|
|
136
131
|
borderRadius: 6
|
|
137
132
|
},
|
|
138
133
|
icon: { fontSize: "16px" },
|
|
139
|
-
dismiss: {
|
|
140
|
-
size: "sm",
|
|
141
|
-
w: 24,
|
|
142
|
-
h: 24,
|
|
143
|
-
minW: 24
|
|
144
|
-
}
|
|
134
|
+
dismiss: { size: "sm" }
|
|
145
135
|
},
|
|
146
136
|
md: {
|
|
147
137
|
container: {
|
|
@@ -153,12 +143,7 @@ const sizes = {
|
|
|
153
143
|
borderRadius: 6
|
|
154
144
|
},
|
|
155
145
|
icon: { fontSize: "16px" },
|
|
156
|
-
dismiss: {
|
|
157
|
-
size: "md",
|
|
158
|
-
w: 32,
|
|
159
|
-
h: 32,
|
|
160
|
-
minW: 32
|
|
161
|
-
}
|
|
146
|
+
dismiss: { size: "sm" }
|
|
162
147
|
},
|
|
163
148
|
lg: {
|
|
164
149
|
container: {
|
|
@@ -170,17 +155,12 @@ const sizes = {
|
|
|
170
155
|
borderRadius: 6
|
|
171
156
|
},
|
|
172
157
|
icon: { fontSize: "18px" },
|
|
173
|
-
dismiss: {
|
|
174
|
-
size: "lg",
|
|
175
|
-
w: 40,
|
|
176
|
-
h: 40,
|
|
177
|
-
minW: 40
|
|
178
|
-
}
|
|
158
|
+
dismiss: { size: "sm" }
|
|
179
159
|
}
|
|
180
160
|
};
|
|
181
161
|
const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
|
|
182
|
-
/** 16 canonical variants: `${hierarchy}${
|
|
183
|
-
const variants = Object.fromEntries(Object.entries(
|
|
162
|
+
/** 16 canonical variants: `${hierarchy}${Color}` (e.g. `subtleBrand`, `solidGrey`). */
|
|
163
|
+
const variants = Object.fromEntries(Object.entries(colorTokens).flatMap(([colorKey, tokens]) => Object.entries(hierarchyRules).map(([hierarchyKey, buildContainer]) => [`${hierarchyKey}${capitalize(colorKey)}`, { container: buildContainer(tokens) }])));
|
|
184
164
|
var theme_default = {
|
|
185
165
|
baseStyle,
|
|
186
166
|
defaultProps,
|
package/dist/tag/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","names":[],"sources":["../../src/tag/theme.ts"],"sourcesContent":["import type { TagContainerStyles, TagHierarchy,
|
|
1
|
+
{"version":3,"file":"theme.js","names":[],"sources":["../../src/tag/theme.ts"],"sourcesContent":["import type { TagContainerStyles, TagHierarchy, TagColor, TagColorTokens } from './tag.types'\n\n// ---------------------------------------------------------------------------\n// Generated variant approach (mirrors button/theme.ts)\n//\n// Each color defines its token references once.\n// Each hierarchy rule composes container styles from those tokens.\n// The 21 canonical variants (7 colors × 3 hierarchies) are produced via\n// Object.fromEntries — no hand-written duplication.\n// ---------------------------------------------------------------------------\n\n/** Token references per semantic color. Tag-only; kept local per design decision. */\nconst colorTokens: Record<TagColor, TagColorTokens> = {\n blue: {\n solid: 'var(--vui-action-brand-solid)',\n solidHover: 'var(--vui-action-brand-solid-hover)',\n solidPressed: 'var(--vui-action-brand-solid-pressed)',\n solidInverse: 'var(--vui-action-brand-solid-inverse)',\n subtle: 'var(--vui-action-brand-subtle)',\n subtleHover: 'var(--vui-action-brand-subtle-hover)',\n subtlePressed: 'var(--vui-action-brand-subtle-pressed)',\n subtleInverse: 'var(--vui-action-brand-subtle-inverse)',\n },\n green: {\n solid: 'var(--vui-action-success-solid)',\n solidHover: 'var(--vui-action-success-solid-hover)',\n solidPressed: 'var(--vui-action-success-solid-pressed)',\n solidInverse: 'var(--vui-action-success-solid-inverse)',\n subtle: 'var(--vui-action-success-subtle)',\n subtleHover: 'var(--vui-action-success-subtle-hover)',\n subtlePressed: 'var(--vui-action-success-subtle-pressed)',\n subtleInverse: 'var(--vui-action-success-subtle-inverse)',\n },\n red: {\n solid: 'var(--vui-action-danger-solid)',\n solidHover: 'var(--vui-action-danger-solid-hover)',\n solidPressed: 'var(--vui-action-danger-solid-pressed)',\n solidInverse: 'var(--vui-action-danger-solid-inverse)',\n subtle: 'var(--vui-action-danger-subtle)',\n subtleHover: 'var(--vui-action-danger-subtle-hover)',\n subtlePressed: 'var(--vui-action-danger-subtle-pressed)',\n subtleInverse: 'var(--vui-action-danger-subtle-inverse)',\n },\n lavender: {\n solid: 'var(--vui-action-lavender-solid)',\n solidHover: 'var(--vui-action-lavender-solid-hover)',\n solidPressed: 'var(--vui-action-lavender-solid-pressed)',\n solidInverse: 'var(--vui-action-lavender-solid-inverse)',\n subtle: 'var(--vui-action-lavender-subtle)',\n subtleHover: 'var(--vui-action-lavender-subtle-hover)',\n subtlePressed: 'var(--vui-action-lavender-subtle-pressed)',\n subtleInverse: 'var(--vui-action-lavender-subtle-inverse)',\n },\n eucalyptus: {\n solid: 'var(--vui-action-eucalyptus-solid)',\n solidHover: 'var(--vui-action-eucalyptus-solid-hover)',\n solidPressed: 'var(--vui-action-eucalyptus-solid-pressed)',\n solidInverse: 'var(--vui-action-eucalyptus-solid-inverse)',\n subtle: 'var(--vui-action-eucalyptus-subtle)',\n subtleHover: 'var(--vui-action-eucalyptus-subtle-hover)',\n subtlePressed: 'var(--vui-action-eucalyptus-subtle-pressed)',\n subtleInverse: 'var(--vui-action-eucalyptus-subtle-inverse)',\n },\n terracotta: {\n solid: 'var(--vui-action-terracotta-solid)',\n solidHover: 'var(--vui-action-terracotta-solid-hover)',\n solidPressed: 'var(--vui-action-terracotta-solid-pressed)',\n solidInverse: 'var(--vui-action-terracotta-solid-inverse)',\n subtle: 'var(--vui-action-terracotta-subtle)',\n subtleHover: 'var(--vui-action-terracotta-subtle-hover)',\n subtlePressed: 'var(--vui-action-terracotta-subtle-pressed)',\n subtleInverse: 'var(--vui-action-terracotta-subtle-inverse)',\n },\n grey: {\n solid: 'var(--vui-action-grey-solid)',\n solidHover: 'var(--vui-action-grey-solid-hover)',\n solidPressed: 'var(--vui-action-grey-solid-pressed)',\n solidInverse: 'var(--vui-action-grey-solid-inverse)',\n subtle: 'var(--vui-action-grey-subtle)',\n subtleHover: 'var(--vui-action-grey-subtle-hover)',\n subtlePressed: 'var(--vui-action-grey-subtle-pressed)',\n subtleInverse: 'var(--vui-action-grey-subtle-inverse)',\n },\n yellow: {\n solid: 'var(--vui-action-yellow-solid)',\n solidHover: 'var(--vui-action-yellow-solid-hover)',\n solidPressed: 'var(--vui-action-yellow-solid-pressed)',\n solidInverse: 'var(--vui-action-yellow-solid-inverse)',\n subtle: 'var(--vui-action-yellow-subtle)',\n subtleHover: 'var(--vui-action-yellow-subtle-hover)',\n subtlePressed: 'var(--vui-action-yellow-subtle-pressed)',\n subtleInverse: 'var(--vui-action-yellow-subtle-inverse)',\n },\n}\n\n/** Container styles per visual hierarchy, composed from color tokens. */\nconst hierarchyRules: Record<TagHierarchy, (t: TagColorTokens) => TagContainerStyles> = {\n subtle: t => ({\n bg: t.subtle,\n color: t.subtleInverse,\n bgHover: t.subtleHover,\n bgPressed: t.subtlePressed,\n }),\n solid: t => ({\n bg: t.solid,\n color: t.solidInverse,\n bgHover: t.solidHover,\n bgPressed: t.solidPressed,\n }),\n}\n\n// ---------------------------------------------------------------------------\n\nconst baseStyle = {}\n\nconst defaultProps = {\n size: 'md',\n variant: 'subtleBrand',\n fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'dismiss']\n\n// Per-Figma `Tag / Static` (file VPUW5N9Dng7UTK3YX5RJlY, node 1117:3410).\n// borderRadius is 6px on every size (NOT pill); no border on any static variant.\n// DismissButton sizes: 'xs' | 'sm' | 'md' | 'lg'\nconst sizes = {\n xs: {\n container: { fontSize: 'sm', h: 20, paddingX: 4, paddingY: 2, gapX: 4, borderRadius: 6 },\n icon: { fontSize: '12px' },\n dismiss: { size: 'xs' },\n },\n sm: {\n container: { fontSize: 'sm', h: 24, paddingX: 6, paddingY: 4, gapX: 6, borderRadius: 6 },\n icon: { fontSize: '16px' },\n dismiss: { size: 'sm' },\n },\n md: {\n container: { fontSize: 'sm', h: 32, paddingX: 8, paddingY: 6, gapX: 8, borderRadius: 6 },\n icon: { fontSize: '16px' },\n dismiss: { size: 'sm' },\n },\n lg: {\n container: { fontSize: 'md', h: 40, paddingX: 12, paddingY: 8, gapX: 10, borderRadius: 6 },\n icon: { fontSize: '18px' },\n dismiss: { size: 'sm' },\n },\n}\n\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\n/** 16 canonical variants: `${hierarchy}${Color}` (e.g. `subtleBrand`, `solidGrey`). */\nconst variants: Record<string, Record<string, TagContainerStyles>> = Object.fromEntries(\n (Object.entries(colorTokens) as Array<[TagColor, TagColorTokens]>).flatMap(([colorKey, tokens]) =>\n (Object.entries(hierarchyRules) as Array<[TagHierarchy, (t: TagColorTokens) => TagContainerStyles]>).map(\n ([hierarchyKey, buildContainer]) => [\n `${hierarchyKey}${capitalize(colorKey)}`,\n { container: buildContainer(tokens) },\n ],\n ),\n ),\n)\n\nexport default {\n baseStyle,\n defaultProps,\n parts,\n sizes,\n variants,\n}\n"],"mappings":";;AAYA,MAAM,cAAgD;CACpD,MAAM;EACJ,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,OAAO;EACL,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,KAAK;EACH,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,UAAU;EACR,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,YAAY;EACV,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,YAAY;EACV,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,MAAM;EACJ,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;CACA,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,aAAa;EACb,eAAe;EACf,eAAe;CACjB;AACF;;AAGA,MAAM,iBAAkF;CACtF,SAAQ,OAAM;EACZ,IAAI,EAAE;EACN,OAAO,EAAE;EACT,SAAS,EAAE;EACX,WAAW,EAAE;CACf;CACA,QAAO,OAAM;EACX,IAAI,EAAE;EACN,OAAO,EAAE;EACT,SAAS,EAAE;EACX,WAAW,EAAE;CACf;AACF;AAIA,MAAM,YAAY,CAAC;AAEnB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,YAAY;AACd;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAQ;AAAS;AAK7C,MAAM,QAAQ;CACZ,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS,EAAE,MAAM,KAAK;CACxB;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS,EAAE,MAAM,KAAK;CACxB;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAG,UAAU;GAAG,MAAM;GAAG,cAAc;EAAE;EACvF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS,EAAE,MAAM,KAAK;CACxB;CACA,IAAI;EACF,WAAW;GAAE,UAAU;GAAM,GAAG;GAAI,UAAU;GAAI,UAAU;GAAG,MAAM;GAAI,cAAc;EAAE;EACzF,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS,EAAE,MAAM,KAAK;CACxB;AACF;AAEA,MAAM,cAAc,MAAc,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAE,MAAM,CAAC;;AAGvE,MAAM,WAA+D,OAAO,YACzE,OAAO,QAAQ,WAAW,CAAC,CAAuC,SAAS,CAAC,UAAU,YACpF,OAAO,QAAQ,cAAc,CAAC,CAAsE,KAClG,CAAC,cAAc,oBAAoB,CAClC,GAAG,eAAe,WAAW,QAAQ,KACrC,EAAE,WAAW,eAAe,MAAM,EAAE,CACtC,CACF,CACF,CACF;AAEA,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}
|
package/dist/tag/utils.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TagColor } from "./tag.types.js";
|
|
2
2
|
|
|
3
3
|
//#region src/tag/utils.d.ts
|
|
4
4
|
/**
|
|
5
|
-
* Converts a two-prop variant+
|
|
6
|
-
* internally (e.g. `resolveTagVariantKey('subtle','
|
|
7
|
-
* When `
|
|
5
|
+
* Converts a two-prop variant+color pair into the combined theme key used
|
|
6
|
+
* internally (e.g. `resolveTagVariantKey('subtle','blue') => 'subtleBlue'`).
|
|
7
|
+
* When `color` is omitted, `'blue'` is used as the default.
|
|
8
8
|
*
|
|
9
9
|
* If `variant` is already a fully-qualified legacy key (e.g. `'subtleBlue'` or
|
|
10
|
-
* `'
|
|
10
|
+
* `'subtleBlue'`) it is returned unchanged so the new API is backward-compatible.
|
|
11
11
|
*
|
|
12
|
-
* Returns `'
|
|
12
|
+
* Returns `'subtleBlue'` (the default variant) when `variant` is absent.
|
|
13
13
|
*/
|
|
14
|
-
declare const resolveTagVariantKey: (variant: string | undefined,
|
|
14
|
+
declare const resolveTagVariantKey: (variant: string | undefined, color: TagColor | string | undefined) => string;
|
|
15
15
|
//#endregion
|
|
16
16
|
export { resolveTagVariantKey };
|
|
17
17
|
|
package/dist/tag/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/tag/utils.ts"],"mappings":";;;;;AAiBA;;;;;;;;cAAa,oBAAA,GAAwB,OAAA,sBAA6B,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/tag/utils.ts"],"mappings":";;;;;AAiBA;;;;;;;;cAAa,oBAAA,GAAwB,OAAA,sBAA6B,KAAA,EAAO,QAAQ"}
|
package/dist/tag/utils.js
CHANGED
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
const HIERARCHY_KEYS = new Set(["subtle", "solid"]);
|
|
4
4
|
const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
|
|
5
5
|
/**
|
|
6
|
-
* Converts a two-prop variant+
|
|
7
|
-
* internally (e.g. `resolveTagVariantKey('subtle','
|
|
8
|
-
* When `
|
|
6
|
+
* Converts a two-prop variant+color pair into the combined theme key used
|
|
7
|
+
* internally (e.g. `resolveTagVariantKey('subtle','blue') => 'subtleBlue'`).
|
|
8
|
+
* When `color` is omitted, `'blue'` is used as the default.
|
|
9
9
|
*
|
|
10
10
|
* If `variant` is already a fully-qualified legacy key (e.g. `'subtleBlue'` or
|
|
11
|
-
* `'
|
|
11
|
+
* `'subtleBlue'`) it is returned unchanged so the new API is backward-compatible.
|
|
12
12
|
*
|
|
13
|
-
* Returns `'
|
|
13
|
+
* Returns `'subtleBlue'` (the default variant) when `variant` is absent.
|
|
14
14
|
*/
|
|
15
|
-
const resolveTagVariantKey = (variant,
|
|
16
|
-
if (!variant) return `subtle${capitalize(
|
|
15
|
+
const resolveTagVariantKey = (variant, color) => {
|
|
16
|
+
if (!variant) return `subtle${capitalize(color ?? "blue")}`;
|
|
17
17
|
if (!HIERARCHY_KEYS.has(variant)) return variant;
|
|
18
|
-
return `${variant}${capitalize(
|
|
18
|
+
return `${variant}${capitalize(color ?? "blue")}`;
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
//#endregion
|
package/dist/tag/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":[],"sources":["../../src/tag/utils.ts"],"sourcesContent":["import type { TagHierarchy,
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../../src/tag/utils.ts"],"sourcesContent":["import type { TagHierarchy, TagColor } from './tag.types'\n\n/** Canonical hierarchy keys recognised by the two-prop API. */\nconst HIERARCHY_KEYS = new Set<TagHierarchy>(['subtle', 'solid'])\n\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\n/**\n * Converts a two-prop variant+color pair into the combined theme key used\n * internally (e.g. `resolveTagVariantKey('subtle','blue') => 'subtleBlue'`).\n * When `color` is omitted, `'blue'` is used as the default.\n *\n * If `variant` is already a fully-qualified legacy key (e.g. `'subtleBlue'` or\n * `'subtleBlue'`) it is returned unchanged so the new API is backward-compatible.\n *\n * Returns `'subtleBlue'` (the default variant) when `variant` is absent.\n */\nexport const resolveTagVariantKey = (variant: string | undefined, color: TagColor | string | undefined): string => {\n if (!variant) return `subtle${capitalize(color ?? 'blue')}`\n\n // Already a combined / legacy key — pass through unchanged.\n if (!HIERARCHY_KEYS.has(variant as TagHierarchy)) return variant\n\n // New two-prop API: combine hierarchy + color (defaults to 'blue').\n return `${variant}${capitalize(color ?? 'blue')}`\n}\n"],"mappings":";;AAGA,MAAM,iBAAiB,IAAI,IAAkB,CAAC,UAAU,OAAO,CAAC;AAEhE,MAAM,cAAc,MAAc,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAE,MAAM,CAAC;;;;;;;;;;;AAYvE,MAAa,wBAAwB,SAA6B,UAAiD;CACjH,IAAI,CAAC,SAAS,OAAO,SAAS,WAAW,SAAS,MAAM;CAGxD,IAAI,CAAC,eAAe,IAAI,OAAuB,GAAG,OAAO;CAGzD,OAAO,GAAG,UAAU,WAAW,SAAS,MAAM;AAChD"}
|
|
@@ -539,6 +539,33 @@ declare const _default: {
|
|
|
539
539
|
};
|
|
540
540
|
variants: {};
|
|
541
541
|
};
|
|
542
|
+
DismissButton: {
|
|
543
|
+
defaultProps: {
|
|
544
|
+
size: string;
|
|
545
|
+
};
|
|
546
|
+
sizes: {
|
|
547
|
+
xs: {
|
|
548
|
+
h: number;
|
|
549
|
+
w: number;
|
|
550
|
+
p: string;
|
|
551
|
+
};
|
|
552
|
+
sm: {
|
|
553
|
+
h: number;
|
|
554
|
+
w: number;
|
|
555
|
+
p: string;
|
|
556
|
+
};
|
|
557
|
+
md: {
|
|
558
|
+
h: number;
|
|
559
|
+
w: number;
|
|
560
|
+
p: string;
|
|
561
|
+
};
|
|
562
|
+
lg: {
|
|
563
|
+
h: number;
|
|
564
|
+
w: number;
|
|
565
|
+
p: string;
|
|
566
|
+
};
|
|
567
|
+
};
|
|
568
|
+
};
|
|
542
569
|
DragAndDrop: {
|
|
543
570
|
baseStyle: {
|
|
544
571
|
borderWidth: number;
|
|
@@ -1402,7 +1429,9 @@ declare const _default: {
|
|
|
1402
1429
|
};
|
|
1403
1430
|
text: {
|
|
1404
1431
|
flex: string;
|
|
1432
|
+
fontSize: string;
|
|
1405
1433
|
lineHeight: string;
|
|
1434
|
+
fontWeight: number;
|
|
1406
1435
|
minW: number;
|
|
1407
1436
|
};
|
|
1408
1437
|
title: {
|
|
@@ -1419,6 +1448,10 @@ declare const _default: {
|
|
|
1419
1448
|
subtleRed: object;
|
|
1420
1449
|
subtleYellow: object;
|
|
1421
1450
|
subtleGreen: object;
|
|
1451
|
+
bannerBlue: object;
|
|
1452
|
+
bannerRed: object;
|
|
1453
|
+
bannerYellow: object;
|
|
1454
|
+
bannerGreen: object;
|
|
1422
1455
|
};
|
|
1423
1456
|
};
|
|
1424
1457
|
P: {
|
|
@@ -1746,12 +1779,10 @@ declare const _default: {
|
|
|
1746
1779
|
bg: string;
|
|
1747
1780
|
border: string;
|
|
1748
1781
|
borderRadius: string;
|
|
1749
|
-
cursor: string;
|
|
1750
1782
|
h: string;
|
|
1751
1783
|
lineHeight: string;
|
|
1752
1784
|
w: string;
|
|
1753
1785
|
textAlign: string;
|
|
1754
|
-
top: string;
|
|
1755
1786
|
transitionDuration: string;
|
|
1756
1787
|
};
|
|
1757
1788
|
thumbValue: {
|
|
@@ -1761,9 +1792,7 @@ declare const _default: {
|
|
|
1761
1792
|
};
|
|
1762
1793
|
track: {
|
|
1763
1794
|
bg: "seaBlue.28";
|
|
1764
|
-
bottom: number;
|
|
1765
1795
|
borderRadius: string;
|
|
1766
|
-
top: number;
|
|
1767
1796
|
transitionDuration: string;
|
|
1768
1797
|
};
|
|
1769
1798
|
};
|
|
@@ -2565,9 +2594,6 @@ declare const _default: {
|
|
|
2565
2594
|
};
|
|
2566
2595
|
dismiss: {
|
|
2567
2596
|
size: string;
|
|
2568
|
-
w: number;
|
|
2569
|
-
h: number;
|
|
2570
|
-
minW: number;
|
|
2571
2597
|
};
|
|
2572
2598
|
};
|
|
2573
2599
|
sm: {
|
|
@@ -2584,9 +2610,6 @@ declare const _default: {
|
|
|
2584
2610
|
};
|
|
2585
2611
|
dismiss: {
|
|
2586
2612
|
size: string;
|
|
2587
|
-
w: number;
|
|
2588
|
-
h: number;
|
|
2589
|
-
minW: number;
|
|
2590
2613
|
};
|
|
2591
2614
|
};
|
|
2592
2615
|
md: {
|
|
@@ -2603,9 +2626,6 @@ declare const _default: {
|
|
|
2603
2626
|
};
|
|
2604
2627
|
dismiss: {
|
|
2605
2628
|
size: string;
|
|
2606
|
-
w: number;
|
|
2607
|
-
h: number;
|
|
2608
|
-
minW: number;
|
|
2609
2629
|
};
|
|
2610
2630
|
};
|
|
2611
2631
|
lg: {
|
|
@@ -2622,9 +2642,6 @@ declare const _default: {
|
|
|
2622
2642
|
};
|
|
2623
2643
|
dismiss: {
|
|
2624
2644
|
size: string;
|
|
2625
|
-
w: number;
|
|
2626
|
-
h: number;
|
|
2627
|
-
minW: number;
|
|
2628
2645
|
};
|
|
2629
2646
|
};
|
|
2630
2647
|
};
|