@flipdish/ui-library 0.41.1 → 0.42.0

package/dist/components/molecules/Tags/Tags.styles.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Shared `Tags` style config, read by both `index.tsx` and `index.native.tsx`.
+ *
+ * Complete literal class names only — Tailwind scans source for whole candidates.
+ * `native` holds pixel sizes and light-mode hex colours that React Native needs as
+ * plain `style` / icon props (no `currentColor`, and `Text` ignores `className` under
+ * the current `react-native-css` preview).
+ */
+export declare const styles: {
+    sizes: {
+        sm: {
+            root: {
+                base: string;
+                withCheckbox: string;
+                withAvatar: string;
+                withDot: string;
+                withCount: string;
+                withClose: string;
+            };
+            content: string;
+            count: string;
+        };
+        md: {
+            root: {
+                base: string;
+                withCheckbox: string;
+                withAvatar: string;
+                withDot: string;
+                withCount: string;
+                withClose: string;
+            };
+            content: string;
+            count: string;
+        };
+        lg: {
+            root: {
+                base: string;
+                withCheckbox: string;
+                withAvatar: string;
+                withDot: string;
+                withCount: string;
+                withClose: string;
+            };
+            content: string;
+            count: string;
+        };
+    };
+    /** Shared chrome for every tag root (size-specific padding lives under `sizes`). */
+    root: string;
+    /** Native root drops web-only focus/transition utilities and uses a border instead of an inset ring. */
+    rootNative: string;
+    close: {
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+    checkbox: {
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+    avatar: string;
+    count: string;
+    native: {
+        /** `text-secondary` → neutral-700 (light). */
+        labelColor: string;
+        /** `text-fg-quaternary` → neutral-400 (light) — close icon idle. */
+        closeIconColor: string;
+        /** `text-fg-quaternary_hover` → neutral-500 (light). */
+        closeIconColorPressed: string;
+        /** `text-fg-white` — checkbox glyph. */
+        checkColor: string;
+        labelText: {
+            sm: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            md: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            lg: {
+                fontSize: number;
+                lineHeight: number;
+            };
+        };
+        countText: {
+            sm: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            md: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            lg: {
+                fontSize: number;
+                lineHeight: number;
+            };
+        };
+        /** Tailwind `size-N` → `N * 4` px for RN icon components. */
+        closeIconSize: {
+            readonly sm: 10;
+            readonly md: 12;
+            readonly lg: 14;
+        };
+        closeIconStroke: {
+            readonly sm: 3.6;
+            readonly md: 2.86;
+            readonly lg: 3;
+        };
+        checkIconSize: {
+            readonly sm: 10;
+            readonly md: 12;
+            readonly lg: 14;
+        };
+        /** Avatar is always `size-4` / icon `size-3` on web. */
+        avatarSize: number;
+        avatarIconSize: number;
+    };
+};
+export type TagSize = keyof typeof styles.sizes;
+//# sourceMappingURL=Tags.styles.d.ts.map

package/dist/components/molecules/Tags/Tags.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tags/Tags.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuCjB,oFAAoF;;IAEpF,wGAAwG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAetG,8CAA8C;;QAE9C,oEAAoE;;QAEpE,wDAAwD;;QAExD,wCAAwC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAYxC,6DAA6D;;;;;;;;;;;;;;;;QAI7D,wDAAwD;;;;CAI3D,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC"}

package/dist/components/molecules/Tags/Tags.styles.js

@@ -0,0 +1,64 @@
+/**
+ * Shared `Tags` style config, read by both `index.tsx` and `index.native.tsx`.
+ *
+ * Complete literal class names only — Tailwind scans source for whole candidates.
+ * `native` holds pixel sizes and light-mode hex colours that React Native needs as
+ * plain `style` / icon props (no `currentColor`, and `Text` ignores `className` under
+ * the current `react-native-css` preview).
+ */
+const styles = {
+    sizes: {
+        sm: {
+            root: {
+                base: 'px-2 py-0.75 text-xs font-medium',
+                withCheckbox: 'pl-1.25',
+                withAvatar: 'pl-1',
+                withDot: 'pl-1.5',
+                withCount: 'pr-1',
+                withClose: 'pr-1',
+            },
+            content: 'gap-1',
+            count: 'px-1 text-xs font-medium',
+        },
+        md: {
+            root: {
+                base: 'px-2.25 py-0.5 text-sm font-medium',
+                withCheckbox: 'pl-1',
+                withAvatar: 'pl-1.25',
+                withDot: 'pl-1.75',
+                withCount: 'pr-0.75',
+                withClose: 'pr-1',
+            },
+            content: 'gap-1.25',
+            count: 'px-1.25 text-xs font-medium',
+        },
+        lg: {
+            root: {
+                base: 'px-2.5 py-1 text-sm font-medium',
+                withCheckbox: 'pl-1.25',
+                withAvatar: 'pl-1.75',
+                withDot: 'pl-2.25',
+                withCount: 'pr-1',
+                withClose: 'pr-1',
+            },
+            content: 'gap-1.5',
+            count: 'px-1.5 text-sm font-medium',
+        },
+    },
+    /** Shared chrome for every tag root (size-specific padding lives under `sizes`). */
+    root: 'flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2',
+    close: {
+        sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
+        md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
+        lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
+    },
+    checkbox: {
+        sm: { root: 'size-3.5', icon: 'size-2.5' },
+        md: { root: 'size-4', icon: 'size-3' },
+        lg: { root: 'size-4.5', icon: 'size-3.5' },
+    },
+    avatar: 'relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary',
+    count: 'flex items-center justify-center rounded-[3px] bg-tertiary text-center'};
+
+export { styles };
+//# sourceMappingURL=Tags.styles.js.map

package/dist/components/molecules/Tags/Tags.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.styles.js","sources":["../../../../src/components/molecules/Tags/Tags.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;AAOG;AACI,MAAM,MAAM,GAAG;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,kCAAkC;AACxC,gBAAA,YAAY,EAAE,SAAS;AACvB,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,OAAO,EAAE,QAAQ;AACjB,gBAAA,SAAS,EAAE,MAAM;AACjB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,KAAK,EAAE,0BAA0B;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,oCAAoC;AAC1C,gBAAA,YAAY,EAAE,MAAM;AACpB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,KAAK,EAAE,6BAA6B;AACrC,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,iCAAiC;AACvC,gBAAA,YAAY,EAAE,SAAS;AACvB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,SAAS,EAAE,MAAM;AACjB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,4BAA4B;AACpC,SAAA;AACF,KAAA;;AAED,IAAA,IAAI,EAAE,4NAA4N;IAGlO,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,EAAE;QACtD,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE;QACrD,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE;AAClD,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;QAC1C,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;QACtC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;AAC3C,KAAA;AACD,IAAA,MAAM,EAAE,2GAA2G;AACnH,IAAA,KAAK,EAAE;;"}

package/dist/components/molecules/Tags/components/TagCheckbox.cjs

@@ -2,9 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
+var Tags_styles = require('../Tags.styles.cjs');
 
 const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = 'sm' }) => {
-    return (jsxRuntime.jsx("div", { className: cx.cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', size === 'sm' && 'size-3.5', size === 'md' && 'size-4', size === 'lg' && 'size-4.5', isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && 'outline-2 outline-offset-2 outline-focus-ring', className), children: jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx.cx('pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all', size === 'sm' && 'size-2.5', size === 'md' && 'size-3', size === 'lg' && 'size-3.5', isSelected && 'opacity-100'), children: jsxRuntime.jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsxRuntime.jsx("div", { className: cx.cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', Tags_styles.styles.checkbox[size].root, isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && 'outline-2 outline-offset-2 outline-focus-ring', className), children: jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx.cx('pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all', Tags_styles.styles.checkbox[size].icon, isSelected && 'opacity-100'), children: jsxRuntime.jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 TagCheckbox.displayName = 'TagCheckbox';
 

package/dist/components/molecules/Tags/components/TagCheckbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagCheckbox.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx","cx"],"mappings":";;;;;AAYO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,KAAE,CACX,mHAAmH,EACnH,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDD,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAEC,KAAE,CACX,6EAA6E,EAC7E,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDD,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;"}
+{"version":3,"file":"TagCheckbox.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx","cx","styles"],"mappings":";;;;;;AAaO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,wBACE,SAAS,EAAEC,KAAE,CACX,mHAAmH,EACnHC,kBAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDF,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAEC,KAAE,CACX,6EAA6E,EAC7EC,kBAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDF,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;"}

package/dist/components/molecules/Tags/components/TagCheckbox.d.ts

@@ -1,5 +1,6 @@
+import { type TagSize } from '../Tags.styles';
 interface TagCheckboxProps {
-    size?: 'sm' | 'md' | 'lg';
+    size?: TagSize;
     className?: string;
     isFocused?: boolean;
     isSelected?: boolean;

package/dist/components/molecules/Tags/components/TagCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;6DAAmE,gBAAgB;;CA+B1G,CAAC"}
+{"version":3,"file":"TagCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;6DAAmE,gBAAgB;;CA2B1G,CAAC"}

package/dist/components/molecules/Tags/components/TagCheckbox.js

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
+import { styles } from '../Tags.styles.js';
 
 const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = 'sm' }) => {
-    return (jsx("div", { className: cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', size === 'sm' && 'size-3.5', size === 'md' && 'size-4', size === 'lg' && 'size-4.5', isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && 'outline-2 outline-offset-2 outline-focus-ring', className), children: jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx('pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all', size === 'sm' && 'size-2.5', size === 'md' && 'size-3', size === 'lg' && 'size-3.5', isSelected && 'opacity-100'), children: jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsx("div", { className: cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', styles.checkbox[size].root, isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && 'outline-2 outline-offset-2 outline-focus-ring', className), children: jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx('pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all', styles.checkbox[size].icon, isSelected && 'opacity-100'), children: jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 TagCheckbox.displayName = 'TagCheckbox';
 

package/dist/components/molecules/Tags/components/TagCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagCheckbox.js","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAYO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,mHAAmH,EACnH,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CACX,6EAA6E,EAC7E,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,UAAU,EAC3B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;"}
+{"version":3,"file":"TagCheckbox.js","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAaO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,aACE,SAAS,EAAE,EAAE,CACX,mHAAmH,EACnH,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CACX,6EAA6E,EAC7E,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;"}

package/dist/components/molecules/Tags/components/TagCloseX.cjs

@@ -4,14 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var uiIcons = require('@flipdish/ui-icons');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var reactAriaComponents = require('react-aria-components');
+var Tags_styles = require('../Tags.styles.cjs');
 
-const styles = {
-    sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
-    md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
-    lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
-};
 const TagCloseX = ({ size = 'md', className, ...otherProps }) => {
-    return (jsxRuntime.jsx(reactAriaComponents.Button, { slot: "remove", "aria-label": "Remove this tag", className: cx.cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles[size].root, className), ...otherProps, children: jsxRuntime.jsx(uiIcons.XClose, { className: cx.cx('transition-inherit-all', styles[size].icon) }) }));
+    return (jsxRuntime.jsx(reactAriaComponents.Button, { slot: "remove", "aria-label": "Remove this tag", className: cx.cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', Tags_styles.styles.close[size].root, className), ...otherProps, children: jsxRuntime.jsx(uiIcons.XClose, { className: cx.cx('transition-inherit-all', Tags_styles.styles.close[size].icon) }) }));
 };
 
 exports.TagCloseX = TagCloseX;

package/dist/components/molecules/Tags/components/TagCloseX.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseX.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","cx","XClose"],"mappings":";;;;;;;AAYA,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,EAAE;IACtD,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE;IACrD,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE;CAClD;AAEM,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,eAACC,0BAAU,EAAA,EACT,IAAI,EAAC,QAAQ,gBACF,iBAAiB,EAC5B,SAAS,EAAEC,KAAE,CACX,wRAAwR,EACxR,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACjB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdF,cAAA,CAACG,cAAM,EAAA,EAAC,SAAS,EAAED,KAAE,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CAC3D;AAEjB;;"}
+{"version":3,"file":"TagCloseX.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","cx","styles","XClose"],"mappings":";;;;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,eAACC,0BAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,iBAAiB,EAC5B,SAAS,EAAEC,KAAE,CACX,wRAAwR,EACxRC,kBAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EACvB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdH,cAAA,CAACI,cAAM,IAAC,SAAS,EAAEF,KAAE,CAAC,wBAAwB,EAAEC,kBAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CACjE;AAEjB;;"}

package/dist/components/molecules/Tags/components/TagCloseX.d.ts

@@ -1,7 +1,8 @@
 import type { RefAttributes } from 'react';
 import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { type TagSize } from '../Tags.styles';
 interface TagCloseXProps extends AriaButtonProps, RefAttributes<HTMLButtonElement> {
-    size?: 'sm' | 'md' | 'lg';
+    size?: TagSize;
     className?: string;
 }
 export declare const TagCloseX: ({ size, className, ...otherProps }: TagCloseXProps) => import("react").JSX.Element;

package/dist/components/molecules/Tags/components/TagCloseX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseX.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,UAAU,cAAe,SAAQ,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC;IAChF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,eAAO,MAAM,SAAS,GAAI,oCAA2C,cAAc,gCAelF,CAAC"}
+{"version":3,"file":"TagCloseX.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClG,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtD,UAAU,cAAe,SAAQ,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAA2C,cAAc,gCAelF,CAAC"}

package/dist/components/molecules/Tags/components/TagCloseX.js

@@ -2,14 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import { XClose } from '@flipdish/ui-icons';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { Button } from 'react-aria-components';
+import { styles } from '../Tags.styles.js';
 
-const styles = {
-    sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
-    md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
-    lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
-};
 const TagCloseX = ({ size = 'md', className, ...otherProps }) => {
-    return (jsx(Button, { slot: "remove", "aria-label": "Remove this tag", className: cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles[size].root, className), ...otherProps, children: jsx(XClose, { className: cx('transition-inherit-all', styles[size].icon) }) }));
+    return (jsx(Button, { slot: "remove", "aria-label": "Remove this tag", className: cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles.close[size].root, className), ...otherProps, children: jsx(XClose, { className: cx('transition-inherit-all', styles.close[size].icon) }) }));
 };
 
 export { TagCloseX };

package/dist/components/molecules/Tags/components/TagCloseX.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseX.js","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":";;;;;AAYA,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,EAAE;IACtD,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE;IACrD,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE;CAClD;AAEM,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,IAACC,MAAU,EAAA,EACT,IAAI,EAAC,QAAQ,gBACF,iBAAiB,EAC5B,SAAS,EAAE,EAAE,CACX,wRAAwR,EACxR,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACjB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdD,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CAC3D;AAEjB;;"}
+{"version":3,"file":"TagCloseX.js","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":";;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,IAACC,MAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,iBAAiB,EAC5B,SAAS,EAAE,EAAE,CACX,wRAAwR,EACxR,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EACvB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdD,GAAA,CAAC,MAAM,IAAC,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CACjE;AAEjB;;"}

package/dist/components/molecules/Tags/index.cjs

@@ -9,11 +9,12 @@ var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var TagCheckbox = require('./components/TagCheckbox.cjs');
 var TagCloseX = require('./components/TagCloseX.cjs');
+var Tags_styles = require('./Tags.styles.cjs');
 
 /** Small round avatar shown at the start of a `Tag`, falling back to a user icon when the image is missing or fails. */
 const TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
     const [isFailed, setIsFailed] = React.useState(false);
-    return (jsxRuntime.jsx("div", { className: cx.cx('relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary', contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsxRuntime.jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsxRuntime.jsx(uiIcons.User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
+    return (jsxRuntime.jsx("div", { className: cx.cx(Tags_styles.styles.avatar, contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsxRuntime.jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsxRuntime.jsx(uiIcons.User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
 };
 const TagGroupContext = React.createContext({
     selectionMode: 'none',
@@ -31,65 +32,27 @@ const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, 'data-
 };
 /** Container for the `Tag` items inside a `TagGroup`; a plain alias of react-aria-components' `TagList`. */
 const TagList = reactAriaComponents.TagList;
-const styles = {
-    sm: {
-        root: {
-            base: 'px-2 py-0.75 text-xs font-medium',
-            withCheckbox: 'pl-1.25',
-            withAvatar: 'pl-1',
-            withDot: 'pl-1.5',
-            withCount: 'pr-1',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1',
-        count: 'px-1 text-xs font-medium',
-    },
-    md: {
-        root: {
-            base: 'px-2.25 py-0.5 text-sm font-medium',
-            withCheckbox: 'pl-1',
-            withAvatar: 'pl-1.25',
-            withDot: 'pl-1.75',
-            withCount: 'pr-0.75',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1.25',
-        count: 'px-1.25 text-xs font-medium',
-    },
-    lg: {
-        root: {
-            base: 'px-2.5 py-1 text-sm font-medium',
-            withCheckbox: 'pl-1.25',
-            withAvatar: 'pl-1.75',
-            withDot: 'pl-2.25',
-            withCount: 'pr-1',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1.5',
-        count: 'px-1.5 text-sm font-medium',
-    },
-};
 /** A single tag inside a `TagList`, with an optional avatar or dot, count, selection checkbox and remove button. */
-const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
+const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotColor = 'fg-success-secondary', dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
     const context = React.useContext(TagGroupContext);
     const prefix = testIdUtils.useTestIdPrefix();
     const idPart = id !== undefined ? testIdUtils.slugifyTestId(String(id)) : 'tag';
     const tagTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, `tag-${idPart}`) : undefined);
     const closeTestId = tagTestId ? `${tagTestId}-close` : undefined;
-    const leadingContent = avatarSrc ? (jsxRuntime.jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsxRuntime.jsx(Dot.Dot, { color: "fg-success-secondary", className: dotClassName, size: "sm" })) : null;
-    return (jsxRuntime.jsx(reactAriaComponents.Tag, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx.cx('flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2', styles[context.size].root.base, 
+    const leadingContent = avatarSrc ? (jsxRuntime.jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsxRuntime.jsx(Dot.Dot, { color: dotColor, className: dotClassName, size: "sm" })) : null;
+    return (jsxRuntime.jsx(reactAriaComponents.Tag, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx.cx(Tags_styles.styles.root, Tags_styles.styles.sizes[context.size].root.base, 
         // With avatar
-        avatarSrc && styles[context.size].root.withAvatar, 
+        avatarSrc && Tags_styles.styles.sizes[context.size].root.withAvatar, 
         // With X button
-        (onClose || state.allowsRemoving) && styles[context.size].root.withClose, 
+        (onClose || state.allowsRemoving) && Tags_styles.styles.sizes[context.size].root.withClose, 
         // With dot
-        dot && styles[context.size].root.withDot, 
+        dot && Tags_styles.styles.sizes[context.size].root.withDot, 
         // With count
-        typeof count === 'number' && styles[context.size].root.withCount, 
+        typeof count === 'number' && Tags_styles.styles.sizes[context.size].root.withCount, 
         // With checkbox
-        context.selectionMode !== 'none' && styles[context.size].root.withCheckbox, 
+        context.selectionMode !== 'none' && Tags_styles.styles.sizes[context.size].root.withCheckbox, 
         // Disabled
-        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsxRuntime.jsx(TagCheckbox.TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && (jsxRuntime.jsx("span", { className: cx.cx('flex items-center justify-center rounded-[3px] bg-tertiary text-center', styles[context.size].count), children: count }))] }), (onClose || allowsRemoving) && (jsxRuntime.jsx(TagCloseX.TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
+        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex items-center gap-1', Tags_styles.styles.sizes[context.size].content), children: [context.selectionMode !== 'none' && jsxRuntime.jsx(TagCheckbox.TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && jsxRuntime.jsx("span", { className: cx.cx(Tags_styles.styles.count, Tags_styles.styles.sizes[context.size].count), children: count })] }), (onClose || allowsRemoving) && (jsxRuntime.jsx(TagCloseX.TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
 };
 
 exports.Tag = Tag;

package/dist/components/molecules/Tags/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tags/index.tsx"],"sourcesContent":[null],"names":["useState","_jsx","cx","User01","createContext","useResolvedTestId","TestIdProvider","AriaTagGroup","AriaTagList","useContext","useTestIdPrefix","slugifyTestId","joinTestId","Dot","AriaTag","_jsxs","_Fragment","TagCheckbox","TagCloseX"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tags/index.tsx"],"sourcesContent":[null],"names":["useState","_jsx","cx","styles","User01","createContext","useResolvedTestId","TestIdProvider","AriaTagGroup","AriaTagList","useContext","useTestIdPrefix","slugifyTestId","joinTestId","Dot","AriaTag","_jsxs","_Fragment","TagCheckbox","TagCloseX"],"mappings":"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"}

package/dist/components/molecules/Tags/index.d.ts

@@ -1,5 +1,9 @@
+import { type DotColor } from '@flipdish/ui-library/components/atoms/Dot';
 import { type ImgHTMLAttributes, type PropsWithChildren, type RefAttributes } from 'react';
 import { type TagGroupProps as AriaTagGroupProps, type TagProps as AriaTagProps } from 'react-aria-components';
+import { type TagSize } from './Tags.styles';
+export type { DotColor } from '@flipdish/ui-library/components/atoms/Dot';
+export type { TagSize } from './Tags.styles';
 /** Small round avatar shown at the start of a `Tag`, falling back to a user icon when the image is missing or fails. */
 export declare const TagAvatar: ({ src, alt, contrastBorder, className }: ImgHTMLAttributes<HTMLImageElement> & {
     contrastBorder?: boolean;
@@ -11,6 +15,12 @@ export interface TagItem {
     avatarSrc?: string;
     avatarContrastBorder?: boolean;
     dot?: boolean;
+    /** Semantic fill for the status dot; same tokens as `Dot`'s `color`. Defaults to `fg-success-secondary`. */
+    dotColor?: DotColor;
+    /**
+     * @deprecated Prefer `dotColor`. Web-only `text-*` class merged onto the status `Dot` via
+     * `currentColor` — not available on React Native.
+     */
     dotClassName?: string;
     isDisabled?: boolean;
     onClose?: (id: string) => void;
@@ -19,7 +29,7 @@ export interface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivE
     /** Accessible name of the group, applied as its `aria-label`. */
     label: string;
     /** Size of every `Tag` in the group, shared through context. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: TagSize;
     /**
      * Overrides the derived root `data-testid` (defaults to `fd-tag-group`).
      * Tags derive their ids from this prefix, so overriding it re-roots every
@@ -44,6 +54,5 @@ interface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, 'l
     'data-testid'?: string;
 }
 /** A single tag inside a `TagList`, with an optional avatar or dot, count, selection checkbox and remove button. */
-export declare const Tag: ({ id, avatarSrc, avatarContrastBorder, dot, dotClassName, isDisabled, count, className, children, onClose, "data-testid": dataTestId, }: PropsWithChildren<TagProps>) => import("react").JSX.Element;
-export {};
+export declare const Tag: ({ id, avatarSrc, avatarContrastBorder, dot, dotColor, dotClassName, isDisabled, count, className, children, onClose, "data-testid": dataTestId, }: PropsWithChildren<TagProps>) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/Tags/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tags/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAChI,OAAO,EAGL,KAAK,aAAa,IAAI,iBAAiB,EAEvC,KAAK,QAAQ,IAAI,YAAY,EAC9B,MAAM,uBAAuB,CAAC;AAI/B,wHAAwH;AACxH,eAAO,MAAM,SAAS,GAAI,yCAAgD,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,gCAkB3I,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAUD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,aAAa,CAAC,cAAc,CAAC;IACrF,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,oFAAoG,aAAa,gCAkBzI,CAAC;AAEF,4GAA4G;AAC5G,eAAO,MAAM,OAAO,oLAAc,CAAC;AAyCnC,UAAU,QAAS,SAAQ,YAAY,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3F;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oHAAoH;AACpH,eAAO,MAAM,GAAG,GAAI,yIAYjB,iBAAiB,CAAC,QAAQ,CAAC,gCAqE7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tags/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAG/E,OAAO,EAAiB,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAChI,OAAO,EAGL,KAAK,aAAa,IAAI,iBAAiB,EAEvC,KAAK,QAAQ,IAAI,YAAY,EAC9B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAErD,YAAY,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAC1E,YAAY,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,wHAAwH;AACxH,eAAO,MAAM,SAAS,GAAI,yCAAgD,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,gCAY3I,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAUD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,aAAa,CAAC,cAAc,CAAC;IACrF,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,oFAAoG,aAAa,gCAkBzI,CAAC;AAEF,4GAA4G;AAC5G,eAAO,MAAM,OAAO,oLAAc,CAAC;AAEnC,UAAU,QAAS,SAAQ,YAAY,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3F;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oHAAoH;AACpH,eAAO,MAAM,GAAG,GAAI,mJAajB,iBAAiB,CAAC,QAAQ,CAAC,gCAiE7B,CAAC"}

package/dist/components/molecules/Tags/index.js

@@ -7,11 +7,12 @@ import { createContext, useContext, useState } from 'react';
 import { TagList as TagList$1, Tag as Tag$1, TagGroup as TagGroup$1 } from 'react-aria-components';
 import { TagCheckbox } from './components/TagCheckbox.js';
 import { TagCloseX } from './components/TagCloseX.js';
+import { styles } from './Tags.styles.js';
 
 /** Small round avatar shown at the start of a `Tag`, falling back to a user icon when the image is missing or fails. */
 const TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
     const [isFailed, setIsFailed] = useState(false);
-    return (jsx("div", { className: cx('relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary', contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsx(User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
+    return (jsx("div", { className: cx(styles.avatar, contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsx(User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
 };
 const TagGroupContext = createContext({
     selectionMode: 'none',
@@ -29,65 +30,27 @@ const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, 'data-
 };
 /** Container for the `Tag` items inside a `TagGroup`; a plain alias of react-aria-components' `TagList`. */
 const TagList = TagList$1;
-const styles = {
-    sm: {
-        root: {
-            base: 'px-2 py-0.75 text-xs font-medium',
-            withCheckbox: 'pl-1.25',
-            withAvatar: 'pl-1',
-            withDot: 'pl-1.5',
-            withCount: 'pr-1',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1',
-        count: 'px-1 text-xs font-medium',
-    },
-    md: {
-        root: {
-            base: 'px-2.25 py-0.5 text-sm font-medium',
-            withCheckbox: 'pl-1',
-            withAvatar: 'pl-1.25',
-            withDot: 'pl-1.75',
-            withCount: 'pr-0.75',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1.25',
-        count: 'px-1.25 text-xs font-medium',
-    },
-    lg: {
-        root: {
-            base: 'px-2.5 py-1 text-sm font-medium',
-            withCheckbox: 'pl-1.25',
-            withAvatar: 'pl-1.75',
-            withDot: 'pl-2.25',
-            withCount: 'pr-1',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1.5',
-        count: 'px-1.5 text-sm font-medium',
-    },
-};
 /** A single tag inside a `TagList`, with an optional avatar or dot, count, selection checkbox and remove button. */
-const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
+const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotColor = 'fg-success-secondary', dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
     const context = useContext(TagGroupContext);
     const prefix = useTestIdPrefix();
     const idPart = id !== undefined ? slugifyTestId(String(id)) : 'tag';
     const tagTestId = dataTestId ?? (prefix ? joinTestId(prefix, `tag-${idPart}`) : undefined);
     const closeTestId = tagTestId ? `${tagTestId}-close` : undefined;
-    const leadingContent = avatarSrc ? (jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsx(Dot, { color: "fg-success-secondary", className: dotClassName, size: "sm" })) : null;
-    return (jsx(Tag$1, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx('flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2', styles[context.size].root.base, 
+    const leadingContent = avatarSrc ? (jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsx(Dot, { color: dotColor, className: dotClassName, size: "sm" })) : null;
+    return (jsx(Tag$1, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx(styles.root, styles.sizes[context.size].root.base, 
         // With avatar
-        avatarSrc && styles[context.size].root.withAvatar, 
+        avatarSrc && styles.sizes[context.size].root.withAvatar, 
         // With X button
-        (onClose || state.allowsRemoving) && styles[context.size].root.withClose, 
+        (onClose || state.allowsRemoving) && styles.sizes[context.size].root.withClose, 
         // With dot
-        dot && styles[context.size].root.withDot, 
+        dot && styles.sizes[context.size].root.withDot, 
         // With count
-        typeof count === 'number' && styles[context.size].root.withCount, 
+        typeof count === 'number' && styles.sizes[context.size].root.withCount, 
         // With checkbox
-        context.selectionMode !== 'none' && styles[context.size].root.withCheckbox, 
+        context.selectionMode !== 'none' && styles.sizes[context.size].root.withCheckbox, 
         // Disabled
-        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxs(Fragment, { children: [jsxs("div", { className: cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsx(TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && (jsx("span", { className: cx('flex items-center justify-center rounded-[3px] bg-tertiary text-center', styles[context.size].count), children: count }))] }), (onClose || allowsRemoving) && (jsx(TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
+        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxs(Fragment, { children: [jsxs("div", { className: cx('flex items-center gap-1', styles.sizes[context.size].content), children: [context.selectionMode !== 'none' && jsx(TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && jsx("span", { className: cx(styles.count, styles.sizes[context.size].count), children: count })] }), (onClose || allowsRemoving) && (jsx(TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
 };
 
 export { Tag, TagAvatar, TagGroup, TagList };