@cerberus-design/react 0.3.2-next-bdab9b9 → 0.3.2-next-e98793a

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.
@@ -33,6 +33,7 @@ export { ButtonProps }
33
33
  export { ButtonProps as ButtonProps_alias_1 }
34
34
 
35
35
  declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
36
+ palette?: Sentiment;
36
37
  shape?: 'pill';
37
38
  onClick: () => void;
38
39
  usage?: 'filled';
@@ -411,10 +412,21 @@ declare interface TabsProps {
411
412
  export { TabsProps }
412
413
  export { TabsProps as TabsProps_alias_1 }
413
414
 
415
+ /**
416
+ * The Tag component is used to display a meta descriptions.
417
+ * @example
418
+ * ```tsx
419
+ * <Tag>Tag</Tag>
420
+ * ```
421
+ */
414
422
  declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
415
423
  export { Tag }
416
424
  export { Tag as Tag_alias_1 }
417
425
 
426
+ /**
427
+ * This module contains the tag component.
428
+ * @module
429
+ */
418
430
  declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
419
431
  palette?: Sentiment;
420
432
  shape?: 'rounded' | 'pill';
@@ -0,0 +1,59 @@
1
+ import {
2
+ Show
3
+ } from "./chunk-R4H3352X.js";
4
+
5
+ // src/components/Tag.tsx
6
+ import { Close } from "@cerberus/icons";
7
+ import { css, cx } from "@cerberus/styled-system/css";
8
+ import { iconButton } from "@cerberus/styled-system/recipes";
9
+ import { jsx, jsxs } from "react/jsx-runtime";
10
+ var tag = (_) => css({});
11
+ function Tag(props) {
12
+ const {
13
+ palette: initPalette,
14
+ shape: initShape,
15
+ onClick,
16
+ usage,
17
+ ...nativeProps
18
+ } = props;
19
+ const isClosable = Boolean(onClick);
20
+ const shape = isClosable ? "pill" : initShape;
21
+ const palette = isClosable ? "action" : initPalette;
22
+ const closableStyles = isClosable ? css({
23
+ paddingInlineEnd: "0"
24
+ }) : "";
25
+ return /* @__PURE__ */ jsxs(
26
+ "span",
27
+ {
28
+ ...nativeProps,
29
+ className: cx(
30
+ nativeProps.className,
31
+ tag({
32
+ palette,
33
+ shape,
34
+ usage
35
+ }),
36
+ closableStyles
37
+ ),
38
+ children: [
39
+ props.children,
40
+ /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(
41
+ "button",
42
+ {
43
+ "aria-label": "Close",
44
+ className: iconButton({
45
+ palette: "action"
46
+ }),
47
+ onClick,
48
+ children: /* @__PURE__ */ jsx(Close, {})
49
+ }
50
+ ) })
51
+ ]
52
+ }
53
+ );
54
+ }
55
+
56
+ export {
57
+ Tag
58
+ };
59
+ //# sourceMappingURL=chunk-BLKP2WFT.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { type Sentiment } from '@cerberus/panda-preset'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst tag = (_: TagProps) => css({})\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n palette?: Sentiment\n shape?: 'rounded' | 'pill'\n usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n palette?: Sentiment\n shape?: 'pill'\n onClick: () => void\n usage?: 'filled'\n}\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(\n props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n const {\n palette: initPalette,\n shape: initShape,\n onClick,\n usage,\n ...nativeProps\n } = props\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const palette = isClosable ? 'action' : initPalette\n const closableStyles = isClosable\n ? css({\n paddingInlineEnd: '0',\n })\n : ''\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAGtB,SAAS,KAAK,UAAU;AACxB,SAAS,kBAAkB;AAiDvB,SAsBM,KAtBN;AA9CJ,IAAM,MAAM,CAAC,MAAgB,IAAI,CAAC,CAAC;AA0B5B,SAAS,IACd,OACa;AACb,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,UAAU,aAAa,WAAW;AACxC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,kBAAkB;AAAA,EACpB,CAAC,IACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,YACX,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1,8 +1,7 @@
1
1
  import {
2
2
  Tag
3
- } from "../chunk-YZO3DYQU.js";
3
+ } from "../chunk-BLKP2WFT.js";
4
4
  import "../chunk-R4H3352X.js";
5
- import "../chunk-MRJ3KCHK.js";
6
5
  export {
7
6
  Tag
8
7
  };
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-SVZU6LPF.js";
4
4
  import {
5
5
  Tag
6
- } from "./chunk-YZO3DYQU.js";
6
+ } from "./chunk-BLKP2WFT.js";
7
7
  import {
8
8
  Textarea
9
9
  } from "./chunk-5TBINKAO.js";
@@ -33,6 +33,7 @@ export { ButtonProps }
33
33
  export { ButtonProps as ButtonProps_alias_1 }
34
34
 
35
35
  declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
36
+ palette?: Sentiment;
36
37
  shape?: 'pill';
37
38
  onClick: () => void;
38
39
  usage?: 'filled';
@@ -411,10 +412,21 @@ declare interface TabsProps {
411
412
  export { TabsProps }
412
413
  export { TabsProps as TabsProps_alias_1 }
413
414
 
415
+ /**
416
+ * The Tag component is used to display a meta descriptions.
417
+ * @example
418
+ * ```tsx
419
+ * <Tag>Tag</Tag>
420
+ * ```
421
+ */
414
422
  declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
415
423
  export { Tag }
416
424
  export { Tag as Tag_alias_1 }
417
425
 
426
+ /**
427
+ * This module contains the tag component.
428
+ * @module
429
+ */
418
430
  declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
419
431
  palette?: Sentiment;
420
432
  shape?: 'rounded' | 'pill';
@@ -0,0 +1,59 @@
1
+ import {
2
+ Show
3
+ } from "./chunk-R4H3352X.js";
4
+
5
+ // src/components/Tag.tsx
6
+ import { Close } from "@cerberus/icons";
7
+ import { css, cx } from "@cerberus/styled-system/css";
8
+ import { iconButton } from "@cerberus/styled-system/recipes";
9
+ import { jsx, jsxs } from "react/jsx-runtime";
10
+ var tag = (_) => css({});
11
+ function Tag(props) {
12
+ const {
13
+ palette: initPalette,
14
+ shape: initShape,
15
+ onClick,
16
+ usage,
17
+ ...nativeProps
18
+ } = props;
19
+ const isClosable = Boolean(onClick);
20
+ const shape = isClosable ? "pill" : initShape;
21
+ const palette = isClosable ? "action" : initPalette;
22
+ const closableStyles = isClosable ? css({
23
+ paddingInlineEnd: "0"
24
+ }) : "";
25
+ return /* @__PURE__ */ jsxs(
26
+ "span",
27
+ {
28
+ ...nativeProps,
29
+ className: cx(
30
+ nativeProps.className,
31
+ tag({
32
+ palette,
33
+ shape,
34
+ usage
35
+ }),
36
+ closableStyles
37
+ ),
38
+ children: [
39
+ props.children,
40
+ /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(
41
+ "button",
42
+ {
43
+ "aria-label": "Close",
44
+ className: iconButton({
45
+ palette: "action"
46
+ }),
47
+ onClick,
48
+ children: /* @__PURE__ */ jsx(Close, {})
49
+ }
50
+ ) })
51
+ ]
52
+ }
53
+ );
54
+ }
55
+
56
+ export {
57
+ Tag
58
+ };
59
+ //# sourceMappingURL=chunk-BLKP2WFT.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { type Sentiment } from '@cerberus/panda-preset'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst tag = (_: TagProps) => css({})\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n palette?: Sentiment\n shape?: 'rounded' | 'pill'\n usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n palette?: Sentiment\n shape?: 'pill'\n onClick: () => void\n usage?: 'filled'\n}\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(\n props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n const {\n palette: initPalette,\n shape: initShape,\n onClick,\n usage,\n ...nativeProps\n } = props\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const palette = isClosable ? 'action' : initPalette\n const closableStyles = isClosable\n ? css({\n paddingInlineEnd: '0',\n })\n : ''\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAGtB,SAAS,KAAK,UAAU;AACxB,SAAS,kBAAkB;AAiDvB,SAsBM,KAtBN;AA9CJ,IAAM,MAAM,CAAC,MAAgB,IAAI,CAAC,CAAC;AA0B5B,SAAS,IACd,OACa;AACb,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,UAAU,aAAa,WAAW;AACxC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,kBAAkB;AAAA,EACpB,CAAC,IACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,YACX,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1,8 +1,7 @@
1
1
  import {
2
2
  Tag
3
- } from "../chunk-YZO3DYQU.js";
3
+ } from "../chunk-BLKP2WFT.js";
4
4
  import "../chunk-R4H3352X.js";
5
- import "../chunk-MRJ3KCHK.js";
6
5
  export {
7
6
  Tag
8
7
  };
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-SVZU6LPF.js";
4
4
  import {
5
5
  Tag
6
- } from "./chunk-YZO3DYQU.js";
6
+ } from "./chunk-BLKP2WFT.js";
7
7
  import {
8
8
  Textarea
9
9
  } from "./chunk-5TBINKAO.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cerberus-design/react",
3
- "version": "0.3.2-next-bdab9b9",
3
+ "version": "0.3.2-next-e98793a",
4
4
  "description": "The Cerberus Design React component library.",
5
5
  "browserslist": "> 0.25%, not dead",
6
6
  "sideEffects": false,
@@ -2,8 +2,16 @@ import type { HTMLAttributes, PropsWithChildren } from 'react'
2
2
  import { Close } from '@cerberus/icons'
3
3
  import { type Sentiment } from '@cerberus/panda-preset'
4
4
  import { Show } from './Show'
5
- import { IconButton } from './IconButton'
6
- import { cx } from '@cerberus/styled-system/css'
5
+ import { css, cx } from '@cerberus/styled-system/css'
6
+ import { iconButton } from '@cerberus/styled-system/recipes'
7
+
8
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
9
+ const tag = (_: TagProps) => css({})
10
+
11
+ /**
12
+ * This module contains the tag component.
13
+ * @module
14
+ */
7
15
 
8
16
  export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
9
17
  palette?: Sentiment
@@ -11,31 +19,63 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
11
19
  usage?: 'filled' | 'outline'
12
20
  }
13
21
  export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
22
+ palette?: Sentiment
14
23
  shape?: 'pill'
15
24
  onClick: () => void
16
25
  usage?: 'filled'
17
26
  }
18
27
 
28
+ /**
29
+ * The Tag component is used to display a meta descriptions.
30
+ * @example
31
+ * ```tsx
32
+ * <Tag>Tag</Tag>
33
+ * ```
34
+ */
19
35
  export function Tag(
20
36
  props: PropsWithChildren<TagProps | ClickableTagProps>,
21
37
  ): JSX.Element {
22
- const { shape, onClick, usage, ...nativeProps } = props
38
+ const {
39
+ palette: initPalette,
40
+ shape: initShape,
41
+ onClick,
42
+ usage,
43
+ ...nativeProps
44
+ } = props
23
45
  const isClosable = Boolean(onClick)
24
- const finalShape = isClosable ? 'pill' : shape
46
+ const shape = isClosable ? 'pill' : initShape
47
+ const palette = isClosable ? 'action' : initPalette
48
+ const closableStyles = isClosable
49
+ ? css({
50
+ paddingInlineEnd: '0',
51
+ })
52
+ : ''
25
53
 
26
54
  return (
27
55
  <span
28
56
  {...nativeProps}
29
- className={cx(nativeProps.className, 'tag')}
30
- data-temp-shape={finalShape}
31
- data-temp-usage={usage}
57
+ className={cx(
58
+ nativeProps.className,
59
+ tag({
60
+ palette,
61
+ shape,
62
+ usage,
63
+ }),
64
+ closableStyles,
65
+ )}
32
66
  >
33
67
  {props.children}
34
68
 
35
69
  <Show when={isClosable}>
36
- <IconButton ariaLabel="Close" onClick={onClick}>
70
+ <button
71
+ aria-label="Close"
72
+ className={iconButton({
73
+ palette: 'action',
74
+ })}
75
+ onClick={onClick}
76
+ >
37
77
  <Close />
38
- </IconButton>
78
+ </button>
39
79
  </Show>
40
80
  </span>
41
81
  )
@@ -1,34 +0,0 @@
1
- import {
2
- Show
3
- } from "./chunk-R4H3352X.js";
4
- import {
5
- IconButton
6
- } from "./chunk-MRJ3KCHK.js";
7
-
8
- // src/components/Tag.tsx
9
- import { Close } from "@cerberus/icons";
10
- import { cx } from "@cerberus/styled-system/css";
11
- import { jsx, jsxs } from "react/jsx-runtime";
12
- function Tag(props) {
13
- const { shape, onClick, usage, ...nativeProps } = props;
14
- const isClosable = Boolean(onClick);
15
- const finalShape = isClosable ? "pill" : shape;
16
- return /* @__PURE__ */ jsxs(
17
- "span",
18
- {
19
- ...nativeProps,
20
- className: cx(nativeProps.className, "tag"),
21
- "data-temp-shape": finalShape,
22
- "data-temp-usage": usage,
23
- children: [
24
- props.children,
25
- /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick, children: /* @__PURE__ */ jsx(Close, {}) }) })
26
- ]
27
- }
28
- );
29
- }
30
-
31
- export {
32
- Tag
33
- };
34
- //# sourceMappingURL=chunk-YZO3DYQU.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { type Sentiment } from '@cerberus/panda-preset'\nimport { Show } from './Show'\nimport { IconButton } from './IconButton'\nimport { cx } from '@cerberus/styled-system/css'\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n palette?: Sentiment\n shape?: 'rounded' | 'pill'\n usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n shape?: 'pill'\n onClick: () => void\n usage?: 'filled'\n}\n\nexport function Tag(\n props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n const { shape, onClick, usage, ...nativeProps } = props\n const isClosable = Boolean(onClick)\n const finalShape = isClosable ? 'pill' : shape\n\n return (\n <span\n {...nativeProps}\n className={cx(nativeProps.className, 'tag')}\n data-temp-shape={finalShape}\n data-temp-usage={usage}\n >\n {props.children}\n\n <Show when={isClosable}>\n <IconButton ariaLabel=\"Close\" onClick={onClick}>\n <Close />\n </IconButton>\n </Show>\n </span>\n )\n}\n"],"mappings":";;;;;;;;AACA,SAAS,aAAa;AAItB,SAAS,UAAU;AAqBf,SAUM,KAVN;AARG,SAAS,IACd,OACa;AACb,QAAM,EAAE,OAAO,SAAS,OAAO,GAAG,YAAY,IAAI;AAClD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,aAAa,aAAa,SAAS;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,KAAK;AAAA,MAC1C,mBAAiB;AAAA,MACjB,mBAAiB;AAAA,MAEhB;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV,8BAAC,cAAW,WAAU,SAAQ,SAC5B,8BAAC,SAAM,GACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1,34 +0,0 @@
1
- import {
2
- Show
3
- } from "./chunk-R4H3352X.js";
4
- import {
5
- IconButton
6
- } from "./chunk-MRJ3KCHK.js";
7
-
8
- // src/components/Tag.tsx
9
- import { Close } from "@cerberus/icons";
10
- import { cx } from "@cerberus/styled-system/css";
11
- import { jsx, jsxs } from "react/jsx-runtime";
12
- function Tag(props) {
13
- const { shape, onClick, usage, ...nativeProps } = props;
14
- const isClosable = Boolean(onClick);
15
- const finalShape = isClosable ? "pill" : shape;
16
- return /* @__PURE__ */ jsxs(
17
- "span",
18
- {
19
- ...nativeProps,
20
- className: cx(nativeProps.className, "tag"),
21
- "data-temp-shape": finalShape,
22
- "data-temp-usage": usage,
23
- children: [
24
- props.children,
25
- /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick, children: /* @__PURE__ */ jsx(Close, {}) }) })
26
- ]
27
- }
28
- );
29
- }
30
-
31
- export {
32
- Tag
33
- };
34
- //# sourceMappingURL=chunk-YZO3DYQU.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { type Sentiment } from '@cerberus/panda-preset'\nimport { Show } from './Show'\nimport { IconButton } from './IconButton'\nimport { cx } from '@cerberus/styled-system/css'\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n palette?: Sentiment\n shape?: 'rounded' | 'pill'\n usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n shape?: 'pill'\n onClick: () => void\n usage?: 'filled'\n}\n\nexport function Tag(\n props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n const { shape, onClick, usage, ...nativeProps } = props\n const isClosable = Boolean(onClick)\n const finalShape = isClosable ? 'pill' : shape\n\n return (\n <span\n {...nativeProps}\n className={cx(nativeProps.className, 'tag')}\n data-temp-shape={finalShape}\n data-temp-usage={usage}\n >\n {props.children}\n\n <Show when={isClosable}>\n <IconButton ariaLabel=\"Close\" onClick={onClick}>\n <Close />\n </IconButton>\n </Show>\n </span>\n )\n}\n"],"mappings":";;;;;;;;AACA,SAAS,aAAa;AAItB,SAAS,UAAU;AAqBf,SAUM,KAVN;AARG,SAAS,IACd,OACa;AACb,QAAM,EAAE,OAAO,SAAS,OAAO,GAAG,YAAY,IAAI;AAClD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,aAAa,aAAa,SAAS;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,KAAK;AAAA,MAC1C,mBAAiB;AAAA,MACjB,mBAAiB;AAAA,MAEhB;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV,8BAAC,cAAW,WAAU,SAAQ,SAC5B,8BAAC,SAAM,GACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}