@cerberus-design/react 0.5.2-next-fc705e1 → 0.5.2-next-94987e7

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

@@ -1,7 +1,7 @@
 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 { CarbonIconType } from '@cerberus/icons';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
@@ -20,6 +20,10 @@ import { RefObject } from 'react';
 import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 
+declare let $cerberusIcons: DefinedIcons;
+export { $cerberusIcons }
+export { $cerberusIcons as $cerberusIcons_alias_1 }
+
 /**
  * A component that allows the user to perform actions
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
@@ -37,7 +41,8 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
-    palette?: ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
+    gradient?: never;
+    palette?: never;
     onClick: () => void;
     shape: 'pill';
     usage: 'filled';
@@ -57,10 +62,20 @@ declare type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K;
 export { CustomThemes }
 export { CustomThemes as CustomThemes_alias_1 }
 
+export declare const defaultIcons: DefinedIcons;
+
 declare type DefaultThemes = 'cerberus';
 export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
+export declare interface DefinedIcons {
+    invalid: CarbonIconType | ElementType;
+}
+
+declare function defineIcons(icons: DefinedIcons): DefinedIcons;
+export { defineIcons }
+export { defineIcons as defineIcons_alias_1 }
+
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
@@ -155,6 +170,8 @@ export { Input as Input_alias_1 }
 declare interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
     describedBy?: string;
     id: string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
 }
 export { InputBaseProps }
 export { InputBaseProps as InputBaseProps_alias_1 }

package/build/legacy/{chunk-BJXUBNF2.js → chunk-5XNLWIZO.js}

@@ -8,15 +8,11 @@ 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 { shape: initShape, onClick, usage, ...nativeProps } = props;
+  const { shape: initShape, gradient, 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({
-    bgColor: "action.bg.active",
-    color: "action.text.initial",
-    paddingInlineEnd: "0"
-  }) : "";
+  const closableStyles = isClosable ? closableCss : "";
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -24,6 +20,7 @@ function Tag(props) {
       className: cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage
@@ -49,8 +46,13 @@ function Tag(props) {
     }
   );
 }
+var closableCss = css({
+  bgColor: "action.bg.active",
+  color: "action.text.initial",
+  paddingInlineEnd: "0"
+});
 
 export {
   Tag
 };
-//# sourceMappingURL=chunk-BJXUBNF2.js.map
+//# sourceMappingURL=chunk-5XNLWIZO.js.map

package/build/legacy/chunk-5XNLWIZO.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 { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\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, gradient, 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 ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\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\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,WAAU,+BAAO,YAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;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;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/legacy/{chunk-6SAA3NUE.js → chunk-AAKHV2IO.js}

@@ -1,20 +1,25 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
 import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
+  $cerberusIcons
+} from "./chunk-LQD23PG3.js";
 
 // src/components/Input.tsx
-import { WarningFilled } from "@cerberus/icons";
 import { input } from "@cerberus/styled-system/recipes";
 import { cx } from "@cerberus/styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Input(props) {
-  const { describedBy, size, ...nativeProps } = props;
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
   const inputStyles = input({ size });
   const { invalid, ...fieldStates } = useFieldContext();
+  const hasEndIcon = Boolean(endIcon);
+  const { invalid: InvalidIcon } = $cerberusIcons;
   return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ jsx(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ jsx("span", { className: inputStyles.startIcon, children: startIcon }) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -22,14 +27,16 @@ function Input(props) {
         ...fieldStates,
         ...describedBy && { "aria-describedby": describedBy },
         ...invalid && { "aria-invalid": true },
+        "data-start-icon": Boolean(startIcon),
         className: cx("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) })
+    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ jsx(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ jsx("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
 export {
   Input
 };
-//# sourceMappingURL=chunk-6SAA3NUE.js.map
+//# sourceMappingURL=chunk-AAKHV2IO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n  const { invalid: InvalidIcon } = $cerberusIcons\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <InvalidIcon className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,UAAmC;AAuBxC,SAEI,KAFJ;AARG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/legacy/chunk-LQD23PG3.js

@@ -0,0 +1,24 @@
+import {
+  defaultIcons
+} from "./chunk-RK5HK6UU.js";
+
+// src/config/defineIcons.ts
+function _validateIconsProperties(icons) {
+  if (!icons.invalid) {
+    throw new Error(
+      "The an invalid property must be defined in your custom icons library."
+    );
+  }
+}
+function defineIcons(icons) {
+  _validateIconsProperties(icons);
+  $cerberusIcons = icons;
+  return $cerberusIcons;
+}
+var $cerberusIcons = defaultIcons;
+
+export {
+  defineIcons,
+  $cerberusIcons
+};
+//# sourceMappingURL=chunk-LQD23PG3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): DefinedIcons {\n  _validateIconsProperties(icons)\n  $cerberusIcons = icons\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons: DefinedIcons = defaultIcons\n"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAAmC;AAC7D,2BAAyB,KAAK;AAC9B,mBAAiB;AACjB,SAAO;AACT;AAIO,IAAI,iBAA+B;","names":[]}

package/build/legacy/chunk-RK5HK6UU.js

@@ -0,0 +1,10 @@
+// src/config/cerbIcons.ts
+import { WarningFilled } from "@cerberus/icons";
+var defaultIcons = {
+  invalid: WarningFilled
+};
+
+export {
+  defaultIcons
+};
+//# sourceMappingURL=chunk-RK5HK6UU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import { WarningFilled, type CarbonIconType } from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  invalid: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  invalid: WarningFilled,\n}\n"],"mappings":";AAAA,SAAS,qBAA0C;AAO5C,IAAM,eAA6B;AAAA,EACxC,SAAS;AACX;","names":[]}

package/build/{modern/chunk-CINUA3C7.js → legacy/chunk-V4SA6GNO.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -45,4 +45,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-CINUA3C7.js.map
+//# sourceMappingURL=chunk-V4SA6GNO.js.map

package/build/legacy/components/Input.js

@@ -1,9 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-6SAA3NUE.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-AAKHV2IO.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-LQD23PG3.js";
+import "../chunk-RK5HK6UU.js";
 export {
   Input
 };

package/build/legacy/components/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-CINUA3C7.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-V4SA6GNO.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Label
 };

package/build/legacy/components/Tag.js

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

package/build/legacy/config/cerbIcons.js

@@ -0,0 +1,7 @@
+import {
+  defaultIcons
+} from "../chunk-RK5HK6UU.js";
+export {
+  defaultIcons
+};
+//# sourceMappingURL=cerbIcons.js.map

package/build/legacy/config/cerbIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/config/defineIcons.js

@@ -0,0 +1,10 @@
+import {
+  $cerberusIcons,
+  defineIcons
+} from "../chunk-LQD23PG3.js";
+import "../chunk-RK5HK6UU.js";
+export {
+  $cerberusIcons,
+  defineIcons
+};
+//# sourceMappingURL=defineIcons.js.map

package/build/legacy/config/defineIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/index.js

@@ -1,18 +1,34 @@
+import {
+  Tab
+} from "./chunk-YA2UV2AB.js";
+import {
+  TabList
+} from "./chunk-5GSXIYD3.js";
 import {
   TabPanel
 } from "./chunk-YJCWUN33.js";
 import {
   Tag
-} from "./chunk-BJXUBNF2.js";
+} from "./chunk-5XNLWIZO.js";
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
+import {
+  FieldMessage
+} from "./chunk-VGHVH2T3.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-6SAA3NUE.js";
+} from "./chunk-AAKHV2IO.js";
 import {
   Label
-} from "./chunk-CINUA3C7.js";
+} from "./chunk-V4SA6GNO.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
@@ -30,12 +46,6 @@ import {
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  Tab
-} from "./chunk-YA2UV2AB.js";
-import {
-  TabList
-} from "./chunk-5GSXIYD3.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -48,6 +58,11 @@ import {
   TabsContext,
   useTabsContext
 } from "./chunk-DQOYTLGB.js";
+import {
+  $cerberusIcons,
+  defineIcons
+} from "./chunk-LQD23PG3.js";
+import "./chunk-RK5HK6UU.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -58,17 +73,8 @@ import {
 import {
   Button
 } from "./chunk-2ATICEW3.js";
-import {
-  FieldMessage
-} from "./chunk-VGHVH2T3.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
 export {
+  $cerberusIcons,
   Button,
   Field,
   FieldMessage,
@@ -91,6 +97,7 @@ export {
   Textarea,
   ThemeProvider,
   createNavTriggerProps,
+  defineIcons,
   getPosition,
   useFieldContext,
   useNavMenuContext,

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

@@ -1,7 +1,7 @@
 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 { CarbonIconType } from '@cerberus/icons';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
@@ -20,6 +20,10 @@ import { RefObject } from 'react';
 import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 
+declare let $cerberusIcons: DefinedIcons;
+export { $cerberusIcons }
+export { $cerberusIcons as $cerberusIcons_alias_1 }
+
 /**
  * A component that allows the user to perform actions
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
@@ -37,7 +41,8 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
-    palette?: ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
+    gradient?: never;
+    palette?: never;
     onClick: () => void;
     shape: 'pill';
     usage: 'filled';
@@ -57,10 +62,20 @@ declare type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K;
 export { CustomThemes }
 export { CustomThemes as CustomThemes_alias_1 }
 
+export declare const defaultIcons: DefinedIcons;
+
 declare type DefaultThemes = 'cerberus';
 export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
+export declare interface DefinedIcons {
+    invalid: CarbonIconType | ElementType;
+}
+
+declare function defineIcons(icons: DefinedIcons): DefinedIcons;
+export { defineIcons }
+export { defineIcons as defineIcons_alias_1 }
+
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
@@ -155,6 +170,8 @@ export { Input as Input_alias_1 }
 declare interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
     describedBy?: string;
     id: string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
 }
 export { InputBaseProps }
 export { InputBaseProps as InputBaseProps_alias_1 }

package/build/modern/{chunk-6SAA3NUE.js → chunk-AAKHV2IO.js}

@@ -1,20 +1,25 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
 import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
+  $cerberusIcons
+} from "./chunk-LQD23PG3.js";
 
 // src/components/Input.tsx
-import { WarningFilled } from "@cerberus/icons";
 import { input } from "@cerberus/styled-system/recipes";
 import { cx } from "@cerberus/styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Input(props) {
-  const { describedBy, size, ...nativeProps } = props;
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
   const inputStyles = input({ size });
   const { invalid, ...fieldStates } = useFieldContext();
+  const hasEndIcon = Boolean(endIcon);
+  const { invalid: InvalidIcon } = $cerberusIcons;
   return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ jsx(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ jsx("span", { className: inputStyles.startIcon, children: startIcon }) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -22,14 +27,16 @@ function Input(props) {
         ...fieldStates,
         ...describedBy && { "aria-describedby": describedBy },
         ...invalid && { "aria-invalid": true },
+        "data-start-icon": Boolean(startIcon),
         className: cx("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) })
+    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ jsx(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ jsx("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
 export {
   Input
 };
-//# sourceMappingURL=chunk-6SAA3NUE.js.map
+//# sourceMappingURL=chunk-AAKHV2IO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n  const { invalid: InvalidIcon } = $cerberusIcons\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <InvalidIcon className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,UAAmC;AAuBxC,SAEI,KAFJ;AARG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/chunk-LQD23PG3.js

@@ -0,0 +1,24 @@
+import {
+  defaultIcons
+} from "./chunk-RK5HK6UU.js";
+
+// src/config/defineIcons.ts
+function _validateIconsProperties(icons) {
+  if (!icons.invalid) {
+    throw new Error(
+      "The an invalid property must be defined in your custom icons library."
+    );
+  }
+}
+function defineIcons(icons) {
+  _validateIconsProperties(icons);
+  $cerberusIcons = icons;
+  return $cerberusIcons;
+}
+var $cerberusIcons = defaultIcons;
+
+export {
+  defineIcons,
+  $cerberusIcons
+};
+//# sourceMappingURL=chunk-LQD23PG3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): DefinedIcons {\n  _validateIconsProperties(icons)\n  $cerberusIcons = icons\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons: DefinedIcons = defaultIcons\n"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAAmC;AAC7D,2BAAyB,KAAK;AAC9B,mBAAiB;AACjB,SAAO;AACT;AAIO,IAAI,iBAA+B;","names":[]}

package/build/modern/chunk-RK5HK6UU.js

@@ -0,0 +1,10 @@
+// src/config/cerbIcons.ts
+import { WarningFilled } from "@cerberus/icons";
+var defaultIcons = {
+  invalid: WarningFilled
+};
+
+export {
+  defaultIcons
+};
+//# sourceMappingURL=chunk-RK5HK6UU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import { WarningFilled, type CarbonIconType } from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  invalid: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  invalid: WarningFilled,\n}\n"],"mappings":";AAAA,SAAS,qBAA0C;AAO5C,IAAM,eAA6B;AAAA,EACxC,SAAS;AACX;","names":[]}

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

@@ -8,15 +8,11 @@ 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 { shape: initShape, onClick, usage, ...nativeProps } = props;
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = props?.palette ?? "neutral";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
-  const closableStyles = isClosable ? css({
-    bgColor: "action.bg.active",
-    color: "action.text.initial",
-    paddingInlineEnd: "0"
-  }) : "";
+  const closableStyles = isClosable ? closableCss : "";
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -24,6 +20,7 @@ function Tag(props) {
       className: cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage
@@ -49,8 +46,13 @@ function Tag(props) {
     }
   );
 }
+var closableCss = css({
+  bgColor: "action.bg.active",
+  color: "action.text.initial",
+  paddingInlineEnd: "0"
+});
 
 export {
   Tag
 };
-//# sourceMappingURL=chunk-23OSBT4M.js.map
+//# sourceMappingURL=chunk-SLIOCQBZ.js.map

package/build/modern/chunk-SLIOCQBZ.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 { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\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, gradient, 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 ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\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\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;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;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/{legacy/chunk-CINUA3C7.js → modern/chunk-V4SA6GNO.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -45,4 +45,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-CINUA3C7.js.map
+//# sourceMappingURL=chunk-V4SA6GNO.js.map

package/build/modern/components/Input.js

@@ -1,9 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-6SAA3NUE.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-AAKHV2IO.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-LQD23PG3.js";
+import "../chunk-RK5HK6UU.js";
 export {
   Input
 };

package/build/modern/components/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-CINUA3C7.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-V4SA6GNO.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Label
 };

package/build/modern/components/Tag.js

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

package/build/modern/config/cerbIcons.js

@@ -0,0 +1,7 @@
+import {
+  defaultIcons
+} from "../chunk-RK5HK6UU.js";
+export {
+  defaultIcons
+};
+//# sourceMappingURL=cerbIcons.js.map

package/build/modern/config/cerbIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/config/defineIcons.js

@@ -0,0 +1,10 @@
+import {
+  $cerberusIcons,
+  defineIcons
+} from "../chunk-LQD23PG3.js";
+import "../chunk-RK5HK6UU.js";
+export {
+  $cerberusIcons,
+  defineIcons
+};
+//# sourceMappingURL=defineIcons.js.map

package/build/modern/config/defineIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/index.js

@@ -1,18 +1,34 @@
+import {
+  Tab
+} from "./chunk-SUP7U42W.js";
+import {
+  TabList
+} from "./chunk-5GSXIYD3.js";
 import {
   TabPanel
 } from "./chunk-YJCWUN33.js";
 import {
   Tag
-} from "./chunk-23OSBT4M.js";
+} from "./chunk-SLIOCQBZ.js";
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
+import {
+  FieldMessage
+} from "./chunk-VGHVH2T3.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-6SAA3NUE.js";
+} from "./chunk-AAKHV2IO.js";
 import {
   Label
-} from "./chunk-CINUA3C7.js";
+} from "./chunk-V4SA6GNO.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
@@ -30,12 +46,6 @@ import {
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  Tab
-} from "./chunk-SUP7U42W.js";
-import {
-  TabList
-} from "./chunk-5GSXIYD3.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -48,6 +58,11 @@ import {
   TabsContext,
   useTabsContext
 } from "./chunk-DQOYTLGB.js";
+import {
+  $cerberusIcons,
+  defineIcons
+} from "./chunk-LQD23PG3.js";
+import "./chunk-RK5HK6UU.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -58,17 +73,8 @@ import {
 import {
   Button
 } from "./chunk-2ATICEW3.js";
-import {
-  FieldMessage
-} from "./chunk-VGHVH2T3.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
 export {
+  $cerberusIcons,
   Button,
   Field,
   FieldMessage,
@@ -91,6 +97,7 @@ export {
   Textarea,
   ThemeProvider,
   createNavTriggerProps,
+  defineIcons,
   getPosition,
   useFieldContext,
   useNavMenuContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.5.2-next-fc705e1",
+  "version": "0.5.2-next-94987e7",
   "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-fc705e1"
+    "@cerberus-design/styled-system": "0.5.2-next-94987e7"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Input.tsx

@@ -1,37 +1,49 @@
 'use client'
 
-import type { InputHTMLAttributes } from 'react'
-import { WarningFilled } from '@cerberus/icons'
+import type { InputHTMLAttributes, ReactNode } from 'react'
 import { input } from '@cerberus/styled-system/recipes'
 import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { useFieldContext } from '../context/field'
+import { $cerberusIcons } from '../config/defineIcons'
 import { Show } from './Show'
 
 export type InputRecipeProps = RecipeVariantProps<typeof input>
-
 export interface InputBaseProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
   describedBy?: string
   id: string
+  startIcon?: ReactNode
+  endIcon?: ReactNode
 }
 export type InputProps = InputBaseProps & InputRecipeProps
 
 export function Input(props: InputProps) {
-  const { describedBy, size, ...nativeProps } = props
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props
   const inputStyles = input({ size })
   const { invalid, ...fieldStates } = useFieldContext()
+  const hasEndIcon = Boolean(endIcon)
+  const { invalid: InvalidIcon } = $cerberusIcons
 
   return (
     <div className={inputStyles.root}>
+      <Show when={Boolean(startIcon)}>
+        <span className={inputStyles.startIcon}>{startIcon}</span>
+      </Show>
+
       <input
         {...nativeProps}
         {...fieldStates}
         {...(describedBy && { 'aria-describedby': describedBy })}
         {...(invalid && { 'aria-invalid': true })}
+        data-start-icon={Boolean(startIcon)}
         className={cx('peer', nativeProps.className, inputStyles.input)}
       />
+
       <Show when={invalid}>
-        <WarningFilled className={inputStyles.icon} />
+        <InvalidIcon className={inputStyles.icon} />
+      </Show>
+      <Show when={hasEndIcon && !invalid}>
+        <span className={inputStyles.icon}>{endIcon}</span>
       </Show>
     </div>
   )

package/src/components/Tag.tsx

@@ -3,10 +3,7 @@ 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,
-  RecipeVariantProps,
-} from '@cerberus/styled-system/types'
+import type { RecipeVariantProps } from '@cerberus/styled-system/types'
 
 /**
  * This module contains the tag component.
@@ -14,18 +11,20 @@ import type {
  */
 
 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'
-  >
+  gradient?: never
+  palette?: never
   onClick: () => void
   shape: 'pill'
   usage: 'filled'
 }
+
 export type TagProps = StaticTagProps | ClickableTagProps
 
 /**
@@ -37,17 +36,11 @@ export type TagProps = StaticTagProps | ClickableTagProps
  * ```
  */
 export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
-  const { shape: initShape, onClick, usage, ...nativeProps } = props
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
   const palette = props?.palette ?? 'neutral'
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
-  const closableStyles = isClosable
-    ? css({
-        bgColor: 'action.bg.active',
-        color: 'action.text.initial',
-        paddingInlineEnd: '0',
-      })
-    : ''
+  const closableStyles = isClosable ? closableCss : ''
 
   return (
     <span
@@ -55,6 +48,7 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
       className={cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage,
@@ -80,3 +74,9 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
     </span>
   )
 }
+
+const closableCss = css({
+  bgColor: 'action.bg.active',
+  color: 'action.text.initial',
+  paddingInlineEnd: '0',
+})

package/src/config/cerbIcons.ts

@@ -0,0 +1,10 @@
+import { WarningFilled, type CarbonIconType } from '@cerberus/icons'
+import type { ElementType } from 'react'
+
+export interface DefinedIcons {
+  invalid: CarbonIconType | ElementType
+}
+
+export const defaultIcons: DefinedIcons = {
+  invalid: WarningFilled,
+}

package/src/config/defineIcons.ts

@@ -0,0 +1,19 @@
+import { defaultIcons, type DefinedIcons } from './cerbIcons'
+
+function _validateIconsProperties(icons: DefinedIcons) {
+  if (!icons.invalid) {
+    throw new Error(
+      'The an invalid property must be defined in your custom icons library.',
+    )
+  }
+}
+
+export function defineIcons(icons: DefinedIcons): DefinedIcons {
+  _validateIconsProperties(icons)
+  $cerberusIcons = icons
+  return $cerberusIcons
+}
+
+// Default icons
+
+export let $cerberusIcons: DefinedIcons = defaultIcons

package/src/index.ts

@@ -36,6 +36,10 @@ export * from './hooks/useTheme'
 export * from './aria-helpers/nav-menu.aria'
 export * from './aria-helpers/tabs.aria'
 
+// utils
+
+export * from './config/defineIcons'
+
 // shared types
 
 export * from './types'

package/build/legacy/chunk-6SAA3NUE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\n\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n\n  return (\n    <div className={inputStyles.root}>\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAmC;AAmBxC,SACE,KADF;AANG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AAEpD,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IACA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/legacy/chunk-BJXUBNF2.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 {\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/modern/chunk-23OSBT4M.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 {\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-6SAA3NUE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\n\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n\n  return (\n    <div className={inputStyles.root}>\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAmC;AAmBxC,SACE,KADF;AANG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AAEpD,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IACA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,KACF;AAEJ;","names":[]}