@cerberus-design/react 0.5.2-next-c44ca60 → 0.5.2-next-782341c

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

@@ -1,15 +1,20 @@
 import type { AnchorHTMLAttributes } from 'react';
+import { button } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
 import type { ConditionalValue } from '@cerberus/styled-system/types';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
+import { iconButton } from '@cerberus/styled-system/recipes';
 import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
+import { RecipeVariantProps } from '@cerberus/styled-system/css';
+import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus/styled-system/types';
 import { RefObject } from 'react';
+import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 
 /**
@@ -24,20 +29,16 @@ export { Button as Button_alias_1 }
  * This module contains the Button component.
  * @module
  */
-declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    palette?: 'action' | 'danger';
-    usage?: 'filled' | 'outlined' | 'text';
-    shape?: 'sharp' | 'rounded';
-}
+declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & RecipeVariantProps<typeof button>;
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
-declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: NonActionablePalette;
-    shape?: 'pill';
+declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+    palette?: ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
     onClick: () => void;
-    usage?: 'filled';
-}
+    shape: 'pill';
+    usage: 'filled';
+};
 export { ClickableTagProps }
 export { ClickableTagProps as ClickableTagProps_alias_1 }
 
@@ -117,20 +118,24 @@ declare function IconButton(props: IconButtonProps): JSX.Element;
 export { IconButton }
 export { IconButton as IconButton_alias_1 }
 
+declare type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps;
+export { IconButtonProps }
+export { IconButtonProps as IconButtonProps_alias_1 }
+
 /**
  * This module contains the Icon Button component.
  * @module
  */
-declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+declare interface IconButtonRawProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     ariaLabel: string;
-    palette?: ButtonProps['palette'];
-    usage?: ButtonProps['usage'];
-    shape?: 'circle';
-    size?: 'sm' | 'lg';
     tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
 }
-export { IconButtonProps }
-export { IconButtonProps as IconButtonProps_alias_1 }
+export { IconButtonRawProps }
+export { IconButtonRawProps as IconButtonRawProps_alias_1 }
+
+declare type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>;
+export { IconButtonRecipeProps }
+export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
@@ -263,14 +268,6 @@ 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 }
@@ -296,6 +293,12 @@ declare interface ShowProps {
 export { ShowProps }
 export { ShowProps as ShowProps_alias_1 }
 
+declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagRecipeProps & {
+    onClick?: never;
+};
+export { StaticTagProps }
+export { StaticTagProps as StaticTagProps_alias_1 }
+
 /**
  * The Tab component provides a tab element to be used in a TabList.
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
@@ -420,23 +423,28 @@ export { TabsProps as TabsProps_alias_1 }
 
 /**
  * The Tag component is used to display a meta descriptions.
+ * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
  * ```
  */
-declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+declare function Tag(props: PropsWithChildren<TagProps>): JSX.Element;
 export { Tag }
 export { Tag as Tag_alias_1 }
 
-declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: NonActionablePalette;
-    shape?: 'rounded' | 'pill';
-    usage?: 'filled' | 'outline';
-}
+declare type TagProps = StaticTagProps | ClickableTagProps;
 export { TagProps }
 export { TagProps as TagProps_alias_1 }
 
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare type TagRecipeProps = RecipeVariantProps_2<typeof tag>;
+export { TagRecipeProps }
+export { TagRecipeProps as TagRecipeProps_alias_1 }
+
 /**
  * A component that allows the user to input large blocks of text.
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx

package/build/legacy/{chunk-LQHCCI4H.js → chunk-2ATICEW3.js}

@@ -23,4 +23,4 @@ function Button(props) {
 export {
   Button
 };
-//# sourceMappingURL=chunk-LQHCCI4H.js.map
+//# sourceMappingURL=chunk-2ATICEW3.js.map

package/build/legacy/chunk-2ATICEW3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  RecipeVariantProps<typeof button>\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAmC;AAC5C,SAAS,cAAc;AAiBnB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/{modern/chunk-QILSE3K3.js → legacy/chunk-BJXUBNF2.js}

@@ -8,7 +8,8 @@ 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, shape: initShape, onClick, usage, ...nativeProps } = props;
+  const { shape: initShape, onClick, usage, ...nativeProps } = props;
+  const palette = (props == null ? void 0 : props.palette) ?? "neutral";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? css({
@@ -52,4 +53,4 @@ function Tag(props) {
 export {
   Tag
 };
-//# sourceMappingURL=chunk-QILSE3K3.js.map
+//# sourceMappingURL=chunk-BJXUBNF2.js.map

package/build/legacy/chunk-BJXUBNF2.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 {\n  ConditionalValue,\n  RecipeVariantProps,\n} from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  palette?: ConditionalValue<\n    'neutral' | 'info' | 'success' | 'warning' | 'danger'\n  >\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\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;AAgD5B,SAwBM,KAxBN;AAdG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AAC7D,QAAM,WAAU,+BAAO,YAAW;AAClC,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/{chunk-GQSXLQOD.js → chunk-MFKR532P.js}

@@ -26,4 +26,4 @@ function IconButton(props) {
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-GQSXLQOD.js.map
+//# sourceMappingURL=chunk-MFKR532P.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\nexport type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>\nexport type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAmC;AAC5C,SAAS,kBAAkB;AAsBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-LQHCCI4H.js";
+} from "../chunk-2ATICEW3.js";
 export {
   Button
 };

package/build/legacy/components/IconButton.js

@@ -1,6 +1,6 @@
 import {
   IconButton
-} from "../chunk-GQSXLQOD.js";
+} from "../chunk-MFKR532P.js";
 export {
   IconButton
 };

package/build/legacy/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-QILSE3K3.js";
+} from "../chunk-BJXUBNF2.js";
 import "../chunk-4O4QFF4S.js";
 export {
   Tag

package/build/legacy/index.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-YJCWUN33.js";
 import {
   Tag
-} from "./chunk-QILSE3K3.js";
+} from "./chunk-BJXUBNF2.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";
@@ -57,7 +57,7 @@ import {
 } from "./chunk-SXXWC6UD.js";
 import {
   Button
-} from "./chunk-LQHCCI4H.js";
+} from "./chunk-2ATICEW3.js";
 import {
   FieldMessage
 } from "./chunk-YVUZSAJG.js";
@@ -67,7 +67,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   IconButton
-} from "./chunk-GQSXLQOD.js";
+} from "./chunk-MFKR532P.js";
 export {
   Button,
   Field,

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

@@ -1,15 +1,20 @@
 import type { AnchorHTMLAttributes } from 'react';
+import { button } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
 import type { ConditionalValue } from '@cerberus/styled-system/types';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
+import { iconButton } from '@cerberus/styled-system/recipes';
 import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
+import { RecipeVariantProps } from '@cerberus/styled-system/css';
+import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus/styled-system/types';
 import { RefObject } from 'react';
+import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 
 /**
@@ -24,20 +29,16 @@ export { Button as Button_alias_1 }
  * This module contains the Button component.
  * @module
  */
-declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    palette?: 'action' | 'danger';
-    usage?: 'filled' | 'outlined' | 'text';
-    shape?: 'sharp' | 'rounded';
-}
+declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & RecipeVariantProps<typeof button>;
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
-declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: NonActionablePalette;
-    shape?: 'pill';
+declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+    palette?: ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
     onClick: () => void;
-    usage?: 'filled';
-}
+    shape: 'pill';
+    usage: 'filled';
+};
 export { ClickableTagProps }
 export { ClickableTagProps as ClickableTagProps_alias_1 }
 
@@ -117,20 +118,24 @@ declare function IconButton(props: IconButtonProps): JSX.Element;
 export { IconButton }
 export { IconButton as IconButton_alias_1 }
 
+declare type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps;
+export { IconButtonProps }
+export { IconButtonProps as IconButtonProps_alias_1 }
+
 /**
  * This module contains the Icon Button component.
  * @module
  */
-declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+declare interface IconButtonRawProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     ariaLabel: string;
-    palette?: ButtonProps['palette'];
-    usage?: ButtonProps['usage'];
-    shape?: 'circle';
-    size?: 'sm' | 'lg';
     tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
 }
-export { IconButtonProps }
-export { IconButtonProps as IconButtonProps_alias_1 }
+export { IconButtonRawProps }
+export { IconButtonRawProps as IconButtonRawProps_alias_1 }
+
+declare type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>;
+export { IconButtonRecipeProps }
+export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
@@ -263,14 +268,6 @@ 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 }
@@ -296,6 +293,12 @@ declare interface ShowProps {
 export { ShowProps }
 export { ShowProps as ShowProps_alias_1 }
 
+declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagRecipeProps & {
+    onClick?: never;
+};
+export { StaticTagProps }
+export { StaticTagProps as StaticTagProps_alias_1 }
+
 /**
  * The Tab component provides a tab element to be used in a TabList.
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
@@ -420,23 +423,28 @@ export { TabsProps as TabsProps_alias_1 }
 
 /**
  * The Tag component is used to display a meta descriptions.
+ * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
  * ```
  */
-declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+declare function Tag(props: PropsWithChildren<TagProps>): JSX.Element;
 export { Tag }
 export { Tag as Tag_alias_1 }
 
-declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: NonActionablePalette;
-    shape?: 'rounded' | 'pill';
-    usage?: 'filled' | 'outline';
-}
+declare type TagProps = StaticTagProps | ClickableTagProps;
 export { TagProps }
 export { TagProps as TagProps_alias_1 }
 
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare type TagRecipeProps = RecipeVariantProps_2<typeof tag>;
+export { TagRecipeProps }
+export { TagRecipeProps as TagRecipeProps_alias_1 }
+
 /**
  * A component that allows the user to input large blocks of text.
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx

package/build/{legacy/chunk-QILSE3K3.js → modern/chunk-23OSBT4M.js}

@@ -8,7 +8,8 @@ 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, shape: initShape, onClick, usage, ...nativeProps } = props;
+  const { shape: initShape, onClick, usage, ...nativeProps } = props;
+  const palette = props?.palette ?? "neutral";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? css({
@@ -52,4 +53,4 @@ function Tag(props) {
 export {
   Tag
 };
-//# sourceMappingURL=chunk-QILSE3K3.js.map
+//# sourceMappingURL=chunk-23OSBT4M.js.map

package/build/modern/chunk-23OSBT4M.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 {\n  ConditionalValue,\n  RecipeVariantProps,\n} from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  palette?: ConditionalValue<\n    'neutral' | 'info' | 'success' | 'warning' | 'danger'\n  >\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\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;AAgD5B,SAwBM,KAxBN;AAdG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AAC7D,QAAM,UAAU,OAAO,WAAW;AAClC,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/{chunk-LQHCCI4H.js → chunk-2ATICEW3.js}

@@ -23,4 +23,4 @@ function Button(props) {
 export {
   Button
 };
-//# sourceMappingURL=chunk-LQHCCI4H.js.map
+//# sourceMappingURL=chunk-2ATICEW3.js.map

package/build/modern/chunk-2ATICEW3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  RecipeVariantProps<typeof button>\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAmC;AAC5C,SAAS,cAAc;AAiBnB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-GQSXLQOD.js → chunk-MFKR532P.js}

@@ -26,4 +26,4 @@ function IconButton(props) {
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-GQSXLQOD.js.map
+//# sourceMappingURL=chunk-MFKR532P.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\nexport type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>\nexport type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAmC;AAC5C,SAAS,kBAAkB;AAsBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/Button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-LQHCCI4H.js";
+} from "../chunk-2ATICEW3.js";
 export {
   Button
 };

package/build/modern/components/IconButton.js

@@ -1,6 +1,6 @@
 import {
   IconButton
-} from "../chunk-GQSXLQOD.js";
+} from "../chunk-MFKR532P.js";
 export {
   IconButton
 };

package/build/modern/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-QILSE3K3.js";
+} from "../chunk-23OSBT4M.js";
 import "../chunk-4O4QFF4S.js";
 export {
   Tag

package/build/modern/index.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-YJCWUN33.js";
 import {
   Tag
-} from "./chunk-QILSE3K3.js";
+} from "./chunk-23OSBT4M.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";
@@ -57,7 +57,7 @@ import {
 } from "./chunk-SXXWC6UD.js";
 import {
   Button
-} from "./chunk-LQHCCI4H.js";
+} from "./chunk-2ATICEW3.js";
 import {
   FieldMessage
 } from "./chunk-YVUZSAJG.js";
@@ -67,7 +67,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   IconButton
-} from "./chunk-GQSXLQOD.js";
+} from "./chunk-MFKR532P.js";
 export {
   Button,
   Field,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.5.2-next-c44ca60",
+  "version": "0.5.2-next-782341c",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -22,7 +22,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.5.2-next-c44ca60"
+    "@cerberus-design/styled-system": "0.5.2-next-782341c"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Button.tsx

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { button } from '@cerberus/styled-system/recipes'
 
 /**
@@ -7,11 +7,8 @@ import { button } from '@cerberus/styled-system/recipes'
  * @module
  */
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  palette?: 'action' | 'danger'
-  usage?: 'filled' | 'outlined' | 'text'
-  shape?: 'sharp' | 'rounded'
-}
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  RecipeVariantProps<typeof button>
 
 /**
  * A component that allows the user to perform actions

package/src/components/IconButton.tsx

@@ -1,22 +1,19 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { iconButton } from '@cerberus/styled-system/recipes'
-import type { ButtonProps } from './Button'
 
 /**
  * This module contains the Icon Button component.
  * @module
  */
 
-export interface IconButtonProps
+export interface IconButtonRawProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   ariaLabel: string
-  palette?: ButtonProps['palette']
-  usage?: ButtonProps['usage']
-  shape?: 'circle'
-  size?: 'sm' | 'lg'
   tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
 }
+export type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>
+export type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps
 
 /**
  * A component that allows the user to perform actions using an icon

package/src/components/Tag.tsx

@@ -3,39 +3,42 @@ import { Close } from '@cerberus/icons'
 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'
+import type {
+  ConditionalValue,
+  RecipeVariantProps,
+} 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?: NonActionablePalette
-  shape?: 'rounded' | 'pill'
-  usage?: 'filled' | 'outline'
-}
-export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: NonActionablePalette
-  shape?: 'pill'
+export type TagRecipeProps = RecipeVariantProps<typeof tag>
+export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
+  TagRecipeProps & {
+    onClick?: never
+  }
+export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+  palette?: ConditionalValue<
+    'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  >
   onClick: () => void
-  usage?: 'filled'
+  shape: 'pill'
+  usage: 'filled'
 }
+export type TagProps = StaticTagProps | ClickableTagProps
 
 /**
  * The Tag component is used to display a meta descriptions.
+ * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
  * ```
  */
-export function Tag(
-  props: PropsWithChildren<TagProps | ClickableTagProps>,
-): JSX.Element {
-  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props
+export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
+  const { shape: initShape, onClick, usage, ...nativeProps } = props
+  const palette = props?.palette ?? 'neutral'
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
   const closableStyles = isClosable

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: ButtonProps['usage']\n  shape?: 'circle'\n  size?: 'sm' | 'lg'\n  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAyBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  palette?: 'action' | 'danger'\n  usage?: 'filled' | 'outlined' | 'text'\n  shape?: 'sharp' | 'rounded'\n}\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,cAAc;AAoBnB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-QILSE3K3.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 { 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/chunk-GQSXLQOD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: ButtonProps['usage']\n  shape?: 'circle'\n  size?: 'sm' | 'lg'\n  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAyBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  palette?: 'action' | 'danger'\n  usage?: 'filled' | 'outlined' | 'text'\n  shape?: 'sharp' | 'rounded'\n}\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,cAAc;AAoBnB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-QILSE3K3.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 { 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":[]}