@cerberus-design/react 0.4.0 → 0.5.0-next-d983a6a

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -1,5 +1,6 @@
 import type { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
+import type { ConditionalValue } from '@cerberus/styled-system/types';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
@@ -9,7 +10,6 @@ import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
-import { Sentiment } from '@cerberus/panda-preset';
 import type { TextareaHTMLAttributes } from 'react';
 
 /**
@@ -33,7 +33,7 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: Sentiment;
+    palette?: NonActionablePalette;
     shape?: 'pill';
     onClick: () => void;
     usage?: 'filled';
@@ -267,6 +267,14 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare type NonActionablePalette = ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
+export { NonActionablePalette }
+export { NonActionablePalette as NonActionablePalette_alias_1 }
+
 declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
@@ -425,12 +433,8 @@ declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JS
 export { Tag }
 export { Tag as Tag_alias_1 }
 
-/**
- * This module contains the tag component.
- * @module
- */
 declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: Sentiment;
+    palette?: NonActionablePalette;
     shape?: 'rounded' | 'pill';
     usage?: 'filled' | 'outline';
 }

package/build/legacy/{chunk-ULXTQXVY.js → chunk-7BXBIDZB.js}

@@ -8,18 +8,12 @@ import { css, cx } from "@cerberus/styled-system/css";
 import { iconButton, tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
-  const {
-    palette: initPalette,
-    shape: initShape,
-    onClick,
-    usage,
-    ...nativeProps
-  } = props;
+  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props;
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
-  const palette = isClosable ? "action" : initPalette;
   const closableStyles = isClosable ? css({
     bgColor: "action.bg.active",
+    color: "action.text.initial",
     paddingInlineEnd: "0"
   }) : "";
   return /* @__PURE__ */ jsxs(
@@ -58,4 +52,4 @@ function Tag(props) {
 export {
   Tag
 };
-//# sourceMappingURL=chunk-ULXTQXVY.js.map
+//# sourceMappingURL=chunk-7BXBIDZB.js.map

package/build/legacy/chunk-7BXBIDZB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { ConditionalValue } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type NonActionablePalette = ConditionalValue<\n  'neutral' | 'info' | 'success' | 'warning' | 'danger'\n>\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: NonActionablePalette\n  shape?: 'rounded' | 'pill'\n  usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: NonActionablePalette\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 { palette, shape: initShape, onClick, usage, ...nativeProps } = props\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable\n    ? css({\n        bgColor: 'action.bg.active',\n        color: 'action.text.initial',\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            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AA6C5B,SAwBM,KAxBN;AAfG,SAAS,IACd,OACa;AACb,QAAM,EAAE,SAAS,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtE,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,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,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Tag.d.ts

@@ -1,3 +1,4 @@
 export { Tag_alias_1 as Tag } from '../_tsup-dts-rollup';
+export { NonActionablePalette_alias_1 as NonActionablePalette } from '../_tsup-dts-rollup';
 export { TagProps_alias_1 as TagProps } from '../_tsup-dts-rollup';
 export { ClickableTagProps_alias_1 as ClickableTagProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-ULXTQXVY.js";
+} from "../chunk-7BXBIDZB.js";
 import "../chunk-R4H3352X.js";
 export {
   Tag

package/build/legacy/index.d.ts

@@ -23,6 +23,7 @@ export { TabListProps } from './_tsup-dts-rollup';
 export { TabPanel } from './_tsup-dts-rollup';
 export { TabPanelProps } from './_tsup-dts-rollup';
 export { Tag } from './_tsup-dts-rollup';
+export { NonActionablePalette } from './_tsup-dts-rollup';
 export { TagProps } from './_tsup-dts-rollup';
 export { ClickableTagProps } from './_tsup-dts-rollup';
 export { Textarea } from './_tsup-dts-rollup';

package/build/legacy/index.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SVZU6LPF.js";
 import {
   Tag
-} from "./chunk-ULXTQXVY.js";
+} from "./chunk-7BXBIDZB.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";

package/build/modern/_tsup-dts-rollup.d.ts

@@ -1,5 +1,6 @@
 import type { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
+import type { ConditionalValue } from '@cerberus/styled-system/types';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
@@ -9,7 +10,6 @@ import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
-import { Sentiment } from '@cerberus/panda-preset';
 import type { TextareaHTMLAttributes } from 'react';
 
 /**
@@ -33,7 +33,7 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: Sentiment;
+    palette?: NonActionablePalette;
     shape?: 'pill';
     onClick: () => void;
     usage?: 'filled';
@@ -267,6 +267,14 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare type NonActionablePalette = ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
+export { NonActionablePalette }
+export { NonActionablePalette as NonActionablePalette_alias_1 }
+
 declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
@@ -425,12 +433,8 @@ declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JS
 export { Tag }
 export { Tag as Tag_alias_1 }
 
-/**
- * This module contains the tag component.
- * @module
- */
 declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: Sentiment;
+    palette?: NonActionablePalette;
     shape?: 'rounded' | 'pill';
     usage?: 'filled' | 'outline';
 }

package/build/modern/{chunk-ULXTQXVY.js → chunk-7BXBIDZB.js}

@@ -8,18 +8,12 @@ import { css, cx } from "@cerberus/styled-system/css";
 import { iconButton, tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
-  const {
-    palette: initPalette,
-    shape: initShape,
-    onClick,
-    usage,
-    ...nativeProps
-  } = props;
+  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props;
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
-  const palette = isClosable ? "action" : initPalette;
   const closableStyles = isClosable ? css({
     bgColor: "action.bg.active",
+    color: "action.text.initial",
     paddingInlineEnd: "0"
   }) : "";
   return /* @__PURE__ */ jsxs(
@@ -58,4 +52,4 @@ function Tag(props) {
 export {
   Tag
 };
-//# sourceMappingURL=chunk-ULXTQXVY.js.map
+//# sourceMappingURL=chunk-7BXBIDZB.js.map

package/build/modern/chunk-7BXBIDZB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { ConditionalValue } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type NonActionablePalette = ConditionalValue<\n  'neutral' | 'info' | 'success' | 'warning' | 'danger'\n>\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: NonActionablePalette\n  shape?: 'rounded' | 'pill'\n  usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: NonActionablePalette\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 { palette, shape: initShape, onClick, usage, ...nativeProps } = props\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable\n    ? css({\n        bgColor: 'action.bg.active',\n        color: 'action.text.initial',\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            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AA6C5B,SAwBM,KAxBN;AAfG,SAAS,IACd,OACa;AACb,QAAM,EAAE,SAAS,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtE,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,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,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/Tag.d.ts

@@ -1,3 +1,4 @@
 export { Tag_alias_1 as Tag } from '../_tsup-dts-rollup';
+export { NonActionablePalette_alias_1 as NonActionablePalette } from '../_tsup-dts-rollup';
 export { TagProps_alias_1 as TagProps } from '../_tsup-dts-rollup';
 export { ClickableTagProps_alias_1 as ClickableTagProps } from '../_tsup-dts-rollup';

package/build/modern/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-ULXTQXVY.js";
+} from "../chunk-7BXBIDZB.js";
 import "../chunk-R4H3352X.js";
 export {
   Tag

package/build/modern/index.d.ts

@@ -23,6 +23,7 @@ export { TabListProps } from './_tsup-dts-rollup';
 export { TabPanel } from './_tsup-dts-rollup';
 export { TabPanelProps } from './_tsup-dts-rollup';
 export { Tag } from './_tsup-dts-rollup';
+export { NonActionablePalette } from './_tsup-dts-rollup';
 export { TagProps } from './_tsup-dts-rollup';
 export { ClickableTagProps } from './_tsup-dts-rollup';
 export { Textarea } from './_tsup-dts-rollup';

package/build/modern/index.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SVZU6LPF.js";
 import {
   Tag
-} from "./chunk-ULXTQXVY.js";
+} from "./chunk-7BXBIDZB.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.4.0",
+  "version": "0.5.0-next-d983a6a",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,

package/src/components/Tag.tsx

@@ -1,22 +1,25 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react'
 import { Close } from '@cerberus/icons'
-import { type Sentiment } from '@cerberus/panda-preset'
 import { Show } from './Show'
 import { css, cx } from '@cerberus/styled-system/css'
 import { iconButton, tag } from '@cerberus/styled-system/recipes'
+import type { ConditionalValue } from '@cerberus/styled-system/types'
 
 /**
  * This module contains the tag component.
  * @module
  */
 
+export type NonActionablePalette = ConditionalValue<
+  'neutral' | 'info' | 'success' | 'warning' | 'danger'
+>
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: Sentiment
+  palette?: NonActionablePalette
   shape?: 'rounded' | 'pill'
   usage?: 'filled' | 'outline'
 }
 export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: Sentiment
+  palette?: NonActionablePalette
   shape?: 'pill'
   onClick: () => void
   usage?: 'filled'
@@ -32,19 +35,13 @@ export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
 export function Tag(
   props: PropsWithChildren<TagProps | ClickableTagProps>,
 ): JSX.Element {
-  const {
-    palette: initPalette,
-    shape: initShape,
-    onClick,
-    usage,
-    ...nativeProps
-  } = props
+  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
-  const palette = isClosable ? 'action' : initPalette
   const closableStyles = isClosable
     ? css({
         bgColor: 'action.bg.active',
+        color: 'action.text.initial',
         paddingInlineEnd: '0',
       })
     : ''

package/build/legacy/chunk-ULXTQXVY.js.map

@@ -1 +0,0 @@
-{"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, tag } from '@cerberus/styled-system/recipes'\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        bgColor: 'action.bg.active',\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            usage: 'filled',\n            size: 'sm',\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,YAAY,WAAW;AA+C5B,SAwBM,KAxBN;AArBG,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,SAAS;AAAA,IACT,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,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-ULXTQXVY.js.map

@@ -1 +0,0 @@
-{"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, tag } from '@cerberus/styled-system/recipes'\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        bgColor: 'action.bg.active',\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            usage: 'filled',\n            size: 'sm',\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,YAAY,WAAW;AA+C5B,SAwBM,KAxBN;AArBG,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,SAAS;AAAA,IACT,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,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}