@cerberus-design/react 0.5.2-next-e9386b3 → 0.5.2-next-41ff124

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/src/components/Textarea.tsx

@@ -4,17 +4,19 @@ import type { TextareaHTMLAttributes } from 'react'
 import { css, cx } from '@cerberus/styled-system/css'
 import { input } from '@cerberus/styled-system/recipes'
 import { useFieldContext } from '../context/field'
+import type { InputRecipeProps } from './Input'
 
 /**
  * This module contains the Textarea component.
  * @module
  */
 
-export interface TextareaProps
+export interface TextareaBaseProps
   extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
   describedBy?: string
   id: string
 }
+export type TextareaProps = InputRecipeProps & TextareaBaseProps
 
 /**
  * A component that allows the user to input large blocks of text.

package/build/legacy/chunk-5TBINKAO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaHTMLAttributes } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Textarea component.\n * @module\n */\n\nexport interface TextareaProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {\n  describedBy?: string\n  id: string\n}\n\n/**\n * A component that allows the user to input large blocks of text.\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx\n */\nexport function Textarea(props: TextareaProps): JSX.Element {\n  const { describedBy, ...nativeProps } = props\n  const { invalid, ...fieldState } = useFieldContext()\n\n  return (\n    <textarea\n      {...nativeProps}\n      {...fieldState}\n      {...(describedBy && { 'aria-describedby': describedBy })}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        input().input,\n        css({\n          pxi: '2',\n          py: '2',\n          resize: 'vertical',\n        }),\n      )}\n      rows={4}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,KAAK,UAAU;AACxB,SAAS,aAAa;AAuBlB;AALG,SAAS,SAAS,OAAmC;AAC1D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,gBAAgB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,MACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,MAAM,EAAE;AAAA,QACR,IAAI;AAAA,UACF,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA,MACA,MAAM;AAAA;AAAA,EACR;AAEJ;","names":[]}

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-KO7LBJGB.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 } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  size?: 'sm' | 'md' | 'lg'\n}\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,UAAU;AAiBf,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-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-PFY74S3Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport interface LabelProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, ...nativeProps } = props\n  const { required } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({ usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAU;AAGxB,SAAS,cAAc;AA6BnB,SAYI,KAZJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,GAAG,YAAY,IAAI;AACnC,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,CAAC;AAAA,QACf,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;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/legacy/chunk-YVUZSAJG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { fieldMessage } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\n\nexport interface FieldMessageProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  id: string\n}\n\n/**\n * A component that provides feedback about the field.\n * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,UAAU;AACnB,SAAS,oBAAoB;AA8BzB;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW,GAAG,MAAM,WAAW,aAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":[]}

package/build/modern/chunk-5TBINKAO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaHTMLAttributes } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Textarea component.\n * @module\n */\n\nexport interface TextareaProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {\n  describedBy?: string\n  id: string\n}\n\n/**\n * A component that allows the user to input large blocks of text.\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx\n */\nexport function Textarea(props: TextareaProps): JSX.Element {\n  const { describedBy, ...nativeProps } = props\n  const { invalid, ...fieldState } = useFieldContext()\n\n  return (\n    <textarea\n      {...nativeProps}\n      {...fieldState}\n      {...(describedBy && { 'aria-describedby': describedBy })}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        input().input,\n        css({\n          pxi: '2',\n          py: '2',\n          resize: 'vertical',\n        }),\n      )}\n      rows={4}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,KAAK,UAAU;AACxB,SAAS,aAAa;AAuBlB;AALG,SAAS,SAAS,OAAmC;AAC1D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,gBAAgB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,MACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,MAAM,EAAE;AAAA,QACR,IAAI;AAAA,UACF,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA,MACA,MAAM;AAAA;AAAA,EACR;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-KO7LBJGB.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 } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  size?: 'sm' | 'md' | 'lg'\n}\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,UAAU;AAiBf,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/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-PFY74S3Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport interface LabelProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, ...nativeProps } = props\n  const { required } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({ usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAU;AAGxB,SAAS,cAAc;AA6BnB,SAYI,KAZJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,GAAG,YAAY,IAAI;AACnC,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,CAAC;AAAA,QACf,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;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":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { fieldMessage } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\n\nexport interface FieldMessageProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  id: string\n}\n\n/**\n * A component that provides feedback about the field.\n * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,UAAU;AACnB,SAAS,oBAAoB;AA8BzB;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW,GAAG,MAAM,WAAW,aAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":[]}