@bi-digital/react 0.2.20 → 0.2.22

package/dist/main.js

@@ -30,7 +30,7 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect-B5btmYlF.
 import "./useMergeRefs-CcJMoo46.js";
 import { usePagination } from "./usePagination-DNqO-ob2.js";
 import "./hooks-BmaG9QJW.js";
-import { Checkbox } from "./checkbox-CXVZj5Vv.js";
+import { Checkbox } from "./checkbox-CxA8UXr6.js";
 import { CheckboxSubsection } from "./checkbox-subsection-CGXgII6v.js";
 import "./checkbox-DdQn64cR.js";
 import { Chip } from "./chip-CRcC9TkL.js";
@@ -84,9 +84,9 @@ import { Pagination } from "./pagination-DxXjiIgC.js";
 import { PaginationButton } from "./pagination-button-CjEZPPC8.js";
 import { PaginationItem } from "./pagination-item-DXnI0BWj.js";
 import "./pagination-DUyQRuUE.js";
-import { Radio } from "./radio-ulWuU7RE.js";
+import { Radio } from "./radio-Cn3PqpMt.js";
 import "./radio-Uyx2D7dl.js";
-import { Search } from "./search-Cqnboh3z.js";
+import { Search } from "./search-CdV5su_L.js";
 import "./search-VYIc3wFh.js";
 import { Select } from "./select-DCZV6wZu.js";
 import { SelectOption } from "./select-option-BByWq34J.js";
@@ -105,7 +105,7 @@ import { Textarea } from "./textarea-C580HmQX.js";
 import "./textarea-D37K5D86.js";
 import { ValidationMessage } from "./validation-message-6AQTIup_.js";
 import "./validation-message-B4lI2a0K.js";
-import { Textfield } from "./textfield-D9Ssbb43.js";
+import { Textfield } from "./textfield-CdqVq5R0.js";
 import "./textfield-CWoUw1b2.js";
 import "./components-CUDHzsYh.js";
 import "./utilities-JoKvbhOy.js";

package/dist/{pagination-item-B5s_Fpjt.d.ts → pagination-item-CEfdaSuS.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 import { HTMLAttributes, Ref } from "react";
 
 //#region src/components/pagination/pagination-item.d.ts
@@ -15,7 +15,7 @@ declare const PaginationItem: ({
   asChild,
   children,
   ...rest
-}: PaginationItemProps) => react_jsx_runtime38.JSX.Element;
+}: PaginationItemProps) => react_jsx_runtime51.JSX.Element;
 //#endregion
 export { PaginationItem, PaginationItemProps };
-//# sourceMappingURL=pagination-item-B5s_Fpjt.d.ts.map
+//# sourceMappingURL=pagination-item-CEfdaSuS.d.ts.map

package/dist/{popover-trigger-context-B_lI5ACl.d.ts → popover-trigger-context-CQKQbCmr.d.ts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime47 from "react/jsx-runtime";
-import * as react46 from "react";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
+import * as react53 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/popover/popover-trigger-context.d.ts
-declare const Context: react46.Context<{
+declare const Context: react53.Context<{
   popoverId?: string;
   setPopoverId?: (id: string) => void;
   popoverOpen?: boolean;
@@ -25,7 +25,7 @@ type PopoverTriggerContextProps = {
  */
 declare const PopoverTriggerContext: ({
   children
-}: PopoverTriggerContextProps) => react_jsx_runtime47.JSX.Element;
+}: PopoverTriggerContextProps) => react_jsx_runtime54.JSX.Element;
 //#endregion
 export { Context, PopoverTriggerContext, PopoverTriggerContextProps };
-//# sourceMappingURL=popover-trigger-context-B_lI5ACl.d.ts.map
+//# sourceMappingURL=popover-trigger-context-CQKQbCmr.d.ts.map

package/dist/{radio-ulWuU7RE.js → radio-Cn3PqpMt.js}

@@ -22,6 +22,7 @@ const Radio = ({ dark, label, description, error, fullwidth, style, className, r
 				ref,
 				"aria-invalid": error || void 0,
 				"aria-describedby": ariaDescribedBy,
+				dark,
 				...props
 			}),
 			label && /* @__PURE__ */ jsx(Label, {
@@ -41,4 +42,4 @@ const Radio = ({ dark, label, description, error, fullwidth, style, className, r
 
 //#endregion
 export { Radio };
-//# sourceMappingURL=radio-ulWuU7RE.js.map
+//# sourceMappingURL=radio-Cn3PqpMt.js.map

package/dist/{radio-ulWuU7RE.js.map → radio-Cn3PqpMt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-ulWuU7RE.js","names":[],"sources":["../src/components/radio/radio.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from 'react';\n\nimport type { LabelRequiredProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { Field, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\n\nexport type RadioProps = MergeRight<\n  LabelRequiredProps & Omit<InputProps, 'type' | 'role' | 'size'>,\n  {\n    /** Label */\n    label?: ReactNode;\n    /** Description */\n    description?: ReactNode;\n    /** Add error indication to the radio. */\n    error?: boolean;\n    /** If true, the radio will take up the full width of the container, and not just \"fit-content\" which is default */\n    fullwidth?: boolean;\n    ref?: Ref<HTMLInputElement>;\n  }\n>;\n\nexport const Radio = ({\n  dark,\n  label,\n  description,\n  error,\n  fullwidth,\n  style,\n  className,\n  ref,\n  id,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: RadioProps) => {\n  const descriptionId = useId();\n\n  const ariaDescribedBy = [description ? descriptionId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n\n  return (\n    <Field className={className} data-dark={dark} style={style} fullwidth={fullwidth} asChild>\n      <label>\n        <Input\n          type='radio'\n          id={id}\n          ref={ref}\n          aria-invalid={error || undefined}\n          aria-describedby={ariaDescribedBy}\n          {...props}\n        />\n        {label && (\n          <Label weight='medium' htmlFor={id} asChild>\n            <span>{label}</span>\n          </Label>\n        )}\n        {description && (\n          // Aria-hidden is used to prevent screen readers from reading the description twice:\n          // once as part of the label and once from being connected through aria-describedby.\n          <FieldDescription aria-hidden='true' id={descriptionId}>\n            {description}\n          </FieldDescription>\n        )}\n      </label>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;AAuBA,MAAa,QAAQ,CAAC,EACpB,MACA,OACA,aACA,OACA,WACA,OACA,WACA,KACA,IACA,oBAAoB,oBACpB,GAAG,OACQ,KAAK;CAChB,MAAM,gBAAgB,OAAO;CAE7B,MAAM,kBAAkB,CAAC,cAAc,gBAAgB,IAAI,mBAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AAEhG,wBACE,IAAC;EAAiB;EAAW,aAAW;EAAa;EAAkB;EAAW;4BAChF,KAAC;mBACC,IAAC;IACC,MAAK;IACD;IACC;IACL,gBAAc;IACd,oBAAkB;IAClB,GAAI;KACJ;GACD,yBACC,IAAC;IAAM,QAAO;IAAS,SAAS;IAAI;8BAClC,IAAC,oBAAM,QAAa;KACd;GAET,+BAGC,IAAC;IAAiB,eAAY;IAAO,IAAI;cACtC;KACgB;MAEf;GACF;AAEX"}
+{"version":3,"file":"radio-Cn3PqpMt.js","names":[],"sources":["../src/components/radio/radio.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from 'react';\n\nimport type { LabelRequiredProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { Field, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\n\nexport type RadioProps = MergeRight<\n  LabelRequiredProps & Omit<InputProps, 'type' | 'role' | 'size'>,\n  {\n    /** Label */\n    label?: ReactNode;\n    /** Description */\n    description?: ReactNode;\n    /** Add error indication to the radio. */\n    error?: boolean;\n    /** If true, the radio will take up the full width of the container, and not just \"fit-content\" which is default */\n    fullwidth?: boolean;\n    ref?: Ref<HTMLInputElement>;\n  }\n>;\n\nexport const Radio = ({\n  dark,\n  label,\n  description,\n  error,\n  fullwidth,\n  style,\n  className,\n  ref,\n  id,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: RadioProps) => {\n  const descriptionId = useId();\n\n  const ariaDescribedBy = [description ? descriptionId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n\n  return (\n    <Field className={className} data-dark={dark} style={style} fullwidth={fullwidth} asChild>\n      <label>\n        <Input\n          type='radio'\n          id={id}\n          ref={ref}\n          aria-invalid={error || undefined}\n          aria-describedby={ariaDescribedBy}\n          dark={dark}\n          {...props}\n        />\n        {label && (\n          <Label weight='medium' htmlFor={id} asChild>\n            <span>{label}</span>\n          </Label>\n        )}\n        {description && (\n          // Aria-hidden is used to prevent screen readers from reading the description twice:\n          // once as part of the label and once from being connected through aria-describedby.\n          <FieldDescription aria-hidden='true' id={descriptionId}>\n            {description}\n          </FieldDescription>\n        )}\n      </label>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;AAuBA,MAAa,QAAQ,CAAC,EACpB,MACA,OACA,aACA,OACA,WACA,OACA,WACA,KACA,IACA,oBAAoB,oBACpB,GAAG,OACQ,KAAK;CAChB,MAAM,gBAAgB,OAAO;CAE7B,MAAM,kBAAkB,CAAC,cAAc,gBAAgB,IAAI,mBAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AAEhG,wBACE,IAAC;EAAiB;EAAW,aAAW;EAAa;EAAkB;EAAW;4BAChF,KAAC;mBACC,IAAC;IACC,MAAK;IACD;IACC;IACL,gBAAc;IACd,oBAAkB;IACZ;IACN,GAAI;KACJ;GACD,yBACC,IAAC;IAAM,QAAO;IAAS,SAAS;IAAI;8BAClC,IAAC,oBAAM,QAAa;KACd;GAET,+BAGC,IAAC;IAAiB,eAAY;IAAO,IAAI;cACtC;KACgB;MAEf;GACF;AAEX"}

package/dist/{search-Cqnboh3z.js → search-CdV5su_L.js}

@@ -32,6 +32,7 @@ const Search = ({ className, onSubmit, onReset, clearAriaLabel = "Clear", size =
 					type: "text",
 					ref,
 					size,
+					dark,
 					...props
 				}),
 				/* @__PURE__ */ jsx(FieldAffix, {
@@ -56,4 +57,4 @@ const Search = ({ className, onSubmit, onReset, clearAriaLabel = "Clear", size =
 
 //#endregion
 export { Search };
-//# sourceMappingURL=search-Cqnboh3z.js.map
+//# sourceMappingURL=search-CdV5su_L.js.map

package/dist/{search-Cqnboh3z.js.map → search-CdV5su_L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-Cqnboh3z.js","names":["e: React.FormEvent<HTMLFormElement>"],"sources":["../src/components/search/search.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { Field, FieldAffixes, FieldAffix } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { BiIconCrossSmall, BiIconMagnefyingGlass } from '@bi-digital/icons-react';\nimport type { MergeRight } from '../../utilities';\nimport { Button } from '../button';\n\nexport type SearchProps = MergeRight<\n  Omit<InputProps, 'type' | 'size'>,\n  {\n    /**\n     * Size of the search.\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /** Called when the user presses enter. You can use this to for example navigate on submit. */\n    onSubmit?: (value: string) => void;\n    /** Called when the user resets the search input. */\n    onReset?: (value: string) => void;\n    /**\n     * Aria-label for the clear button.\n     * @defaultValue 'Clear'\n     */\n    clearAriaLabel?: string;\n  }\n>;\n\nexport const Search = ({\n  className,\n  onSubmit,\n  onReset,\n  clearAriaLabel = 'Clear',\n  size = 'medium',\n  ref,\n  dark,\n  style,\n  ...props\n}: SearchProps) => {\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (onSubmit) {\n      const input = e.currentTarget.querySelector('input');\n      onSubmit(input?.value || '');\n    }\n  };\n  const handleReset = () => {\n    if (onReset) {\n      onReset('');\n    }\n  };\n  return (\n    <Field className={clsx('bi-search', className)} data-dark={dark} style={style} asChild>\n      <form onSubmit={handleSubmit} onReset={handleReset}>\n        <FieldAffixes>\n          <FieldAffix>\n            <BiIconMagnefyingGlass size={size} />\n          </FieldAffix>\n          <Input type='text' ref={ref} size={size} {...props} />\n          <FieldAffix aria-hidden='false'>\n            <Button aria-label={clearAriaLabel} icon size={size} dark={dark} variant='text' type='reset'>\n              <BiIconCrossSmall size={size} aria-hidden='true' />\n            </Button>\n          </FieldAffix>\n        </FieldAffixes>\n      </form>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAa,SAAS,CAAC,EACrB,WACA,UACA,SACA,iBAAiB,SACjB,OAAO,UACP,KACA,MACA,MACA,GAAG,OACS,KAAK;CACjB,MAAM,eAAe,CAACA,MAAwC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,UAAU;GACZ,MAAM,QAAQ,EAAE,cAAc,cAAc,QAAQ;AACpD,YAAS,OAAO,SAAS,GAAG;EAC7B;CACF;CACD,MAAM,cAAc,MAAM;AACxB,MAAI,QACF,SAAQ,GAAG;CAEd;AACD,wBACE,IAAC;EAAM,WAAW,KAAK,aAAa,UAAU;EAAE,aAAW;EAAa;EAAO;4BAC7E,IAAC;GAAK,UAAU;GAAc,SAAS;6BACrC,KAAC;oBACC,IAAC,wCACC,IAAC,yBAA4B,OAAQ,GAC1B;oBACb,IAAC;KAAM,MAAK;KAAY;KAAW;KAAM,GAAI;MAAS;oBACtD,IAAC;KAAW,eAAY;+BACtB,IAAC;MAAO,cAAY;MAAgB;MAAW;MAAY;MAAM,SAAQ;MAAO,MAAK;gCACnF,IAAC;OAAuB;OAAM,eAAY;QAAS;OAC5C;MACE;OACA;IACV;GACD;AAEX"}
+{"version":3,"file":"search-CdV5su_L.js","names":["e: React.FormEvent<HTMLFormElement>"],"sources":["../src/components/search/search.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { Field, FieldAffixes, FieldAffix } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { BiIconCrossSmall, BiIconMagnefyingGlass } from '@bi-digital/icons-react';\nimport type { MergeRight } from '../../utilities';\nimport { Button } from '../button';\n\nexport type SearchProps = MergeRight<\n  Omit<InputProps, 'type' | 'size'>,\n  {\n    /**\n     * Size of the search.\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /** Called when the user presses enter. You can use this to for example navigate on submit. */\n    onSubmit?: (value: string) => void;\n    /** Called when the user resets the search input. */\n    onReset?: (value: string) => void;\n    /**\n     * Aria-label for the clear button.\n     * @defaultValue 'Clear'\n     */\n    clearAriaLabel?: string;\n  }\n>;\n\nexport const Search = ({\n  className,\n  onSubmit,\n  onReset,\n  clearAriaLabel = 'Clear',\n  size = 'medium',\n  ref,\n  dark,\n  style,\n  ...props\n}: SearchProps) => {\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (onSubmit) {\n      const input = e.currentTarget.querySelector('input');\n      onSubmit(input?.value || '');\n    }\n  };\n  const handleReset = () => {\n    if (onReset) {\n      onReset('');\n    }\n  };\n  return (\n    <Field className={clsx('bi-search', className)} data-dark={dark} style={style} asChild>\n      <form onSubmit={handleSubmit} onReset={handleReset}>\n        <FieldAffixes>\n          <FieldAffix>\n            <BiIconMagnefyingGlass size={size} />\n          </FieldAffix>\n          <Input type='text' ref={ref} size={size} dark={dark} {...props} />\n          <FieldAffix aria-hidden='false'>\n            <Button aria-label={clearAriaLabel} icon size={size} dark={dark} variant='text' type='reset'>\n              <BiIconCrossSmall size={size} aria-hidden='true' />\n            </Button>\n          </FieldAffix>\n        </FieldAffixes>\n      </form>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAa,SAAS,CAAC,EACrB,WACA,UACA,SACA,iBAAiB,SACjB,OAAO,UACP,KACA,MACA,MACA,GAAG,OACS,KAAK;CACjB,MAAM,eAAe,CAACA,MAAwC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,UAAU;GACZ,MAAM,QAAQ,EAAE,cAAc,cAAc,QAAQ;AACpD,YAAS,OAAO,SAAS,GAAG;EAC7B;CACF;CACD,MAAM,cAAc,MAAM;AACxB,MAAI,QACF,SAAQ,GAAG;CAEd;AACD,wBACE,IAAC;EAAM,WAAW,KAAK,aAAa,UAAU;EAAE,aAAW;EAAa;EAAO;4BAC7E,IAAC;GAAK,UAAU;GAAc,SAAS;6BACrC,KAAC;oBACC,IAAC,wCACC,IAAC,yBAA4B,OAAQ,GAC1B;oBACb,IAAC;KAAM,MAAK;KAAY;KAAW;KAAY;KAAM,GAAI;MAAS;oBAClE,IAAC;KAAW,eAAY;+BACtB,IAAC;MAAO,cAAY;MAAgB;MAAW;MAAY;MAAM,SAAQ;MAAO,MAAK;gCACnF,IAAC;OAAuB;OAAM,eAAY;QAAS;OAC5C;MACE;OACA;IACV;GACD;AAEX"}

package/dist/{sticky-header-BhzeZPgJ.d.ts → sticky-header-DxtaS2U0.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime64 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/sticky-header/sticky-header.d.ts
@@ -13,7 +13,7 @@ type StickyHeaderProps = {
  */
 declare const StickyHeader: ({
   children
-}: StickyHeaderProps) => react_jsx_runtime12.JSX.Element;
+}: StickyHeaderProps) => react_jsx_runtime64.JSX.Element;
 //#endregion
 export { StickyHeader, StickyHeaderProps };
-//# sourceMappingURL=sticky-header-BhzeZPgJ.d.ts.map
+//# sourceMappingURL=sticky-header-DxtaS2U0.d.ts.map

package/dist/{textfield-D9Ssbb43.js → textfield-CdqVq5R0.js}

@@ -39,12 +39,14 @@ const Textfield = ({ dark, label, description, error, multiline, prefix, suffix,
 					ref,
 					"aria-invalid": Boolean(error) || void 0,
 					"aria-describedby": ariaDescribedBy,
+					dark,
 					...props
 				}) : /* @__PURE__ */ jsx(Input, {
 					id,
 					ref,
 					"aria-invalid": Boolean(error) || void 0,
 					"aria-describedby": ariaDescribedBy,
+					dark,
 					...props
 				}),
 				suffix && /* @__PURE__ */ jsx(FieldAffix, { children: suffix })
@@ -59,4 +61,4 @@ const Textfield = ({ dark, label, description, error, multiline, prefix, suffix,
 
 //#endregion
 export { Textfield };
-//# sourceMappingURL=textfield-D9Ssbb43.js.map
+//# sourceMappingURL=textfield-CdqVq5R0.js.map

package/dist/{textfield-D9Ssbb43.js.map → textfield-CdqVq5R0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textfield-D9Ssbb43.js","names":[],"sources":["../src/components/textfield/textfield.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from 'react';\n\nimport type { DefaultProps, LabelRequiredProps } from '../../types';\nimport { Field, FieldAffix, FieldAffixes, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\nimport { Textarea, type TextareaProps } from '../textarea';\nimport { ValidationMessage } from '../validation-message';\n\ntype InputPropsFiltered = Omit<InputProps, 'prefix' | 'className' | 'style'>;\ntype TextareaPropsFiltered = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;\n\ntype BaseTextfieldProps = LabelRequiredProps &\n  DefaultProps & {\n    /** Label */\n    label?: ReactNode;\n    /** Description */\n    description?: ReactNode;\n    /** Prefix */\n    prefix?: string;\n    /** Suffix */\n    suffix?: string;\n    /** Error message for field */\n    error?: ReactNode;\n    /** `className` for the `Field` element */\n    className?: InputProps['className'];\n    /** `style` for the `Field` element */\n    style?: InputProps['style'];\n  };\n\ntype TextfieldTextareaProps = {\n  /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n  multiline: true;\n} & TextareaPropsFiltered;\n\ntype TextfieldInputProps = {\n  /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n  multiline?: never | false;\n} & InputPropsFiltered;\n\nexport type TextfieldProps = BaseTextfieldProps &\n  // We use either Textarea or Input props, depending on the `multiline` prop.\n  (TextfieldTextareaProps | TextfieldInputProps) & {\n    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n  };\n\nexport const Textfield = ({\n  dark,\n  label,\n  description,\n  error,\n  multiline,\n  prefix,\n  suffix,\n  style,\n  className,\n  ref,\n  id: idProp,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: TextfieldProps) => {\n  const generatedId = useId();\n  const descriptionId = useId();\n  const validationId = useId();\n  const id = idProp || generatedId;\n\n  const ariaDescribedBy =\n    [description ? descriptionId : '', error ? validationId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n  return (\n    <Field className={className} data-dark={dark} style={style}>\n      {label && <Label htmlFor={id}>{label}</Label>}\n      {description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}\n      <FieldAffixes>\n        {prefix && <FieldAffix>{prefix}</FieldAffix>}\n        {multiline ? (\n          <Textarea\n            id={id}\n            ref={ref as Ref<HTMLTextAreaElement>}\n            aria-invalid={Boolean(error) || undefined}\n            aria-describedby={ariaDescribedBy}\n            {...(props as TextareaPropsFiltered)}\n          />\n        ) : (\n          <Input\n            id={id}\n            ref={ref as Ref<HTMLInputElement>}\n            aria-invalid={Boolean(error) || undefined}\n            aria-describedby={ariaDescribedBy}\n            {...(props as InputPropsFiltered)}\n          />\n        )}\n        {suffix && <FieldAffix>{suffix}</FieldAffix>}\n      </FieldAffixes>\n      {!!error && <ValidationMessage id={validationId}>{error}</ValidationMessage>}\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA8CA,MAAa,YAAY,CAAC,EACxB,MACA,OACA,aACA,OACA,WACA,QACA,QACA,OACA,WACA,KACA,IAAI,QACJ,oBAAoB,oBACpB,GAAG,OACY,KAAK;CACpB,MAAM,cAAc,OAAO;CAC3B,MAAM,gBAAgB,OAAO;CAC7B,MAAM,eAAe,OAAO;CAC5B,MAAM,KAAK,UAAU;CAErB,MAAM,kBACJ;EAAC,cAAc,gBAAgB;EAAI,QAAQ,eAAe;EAAI;CAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AACrG,wBACE,KAAC;EAAiB;EAAW,aAAW;EAAa;;GAClD,yBAAS,IAAC;IAAM,SAAS;cAAK;KAAc;GAC5C,+BAAe,IAAC;IAAiB,IAAI;cAAgB;KAA+B;mBACrF,KAAC;IACE,0BAAU,IAAC,wBAAY,SAAoB;IAC3C,4BACC,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KAClB,GAAK;MACL,mBAEF,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KAClB,GAAK;MACL;IAEH,0BAAU,IAAC,wBAAY,SAAoB;OAC/B;KACZ,yBAAS,IAAC;IAAkB,IAAI;cAAe;KAA0B;;GACtE;AAEX"}
+{"version":3,"file":"textfield-CdqVq5R0.js","names":[],"sources":["../src/components/textfield/textfield.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from 'react';\n\nimport type { DefaultProps, LabelRequiredProps } from '../../types';\nimport { Field, FieldAffix, FieldAffixes, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\nimport { Textarea, type TextareaProps } from '../textarea';\nimport { ValidationMessage } from '../validation-message';\n\ntype InputPropsFiltered = Omit<InputProps, 'prefix' | 'className' | 'style'>;\ntype TextareaPropsFiltered = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;\n\ntype BaseTextfieldProps = LabelRequiredProps &\n  DefaultProps & {\n    /** Label */\n    label?: ReactNode;\n    /** Description */\n    description?: ReactNode;\n    /** Prefix */\n    prefix?: string;\n    /** Suffix */\n    suffix?: string;\n    /** Error message for field */\n    error?: ReactNode;\n    /** `className` for the `Field` element */\n    className?: InputProps['className'];\n    /** `style` for the `Field` element */\n    style?: InputProps['style'];\n  };\n\ntype TextfieldTextareaProps = {\n  /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n  multiline: true;\n} & TextareaPropsFiltered;\n\ntype TextfieldInputProps = {\n  /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n  multiline?: never | false;\n} & InputPropsFiltered;\n\nexport type TextfieldProps = BaseTextfieldProps &\n  // We use either Textarea or Input props, depending on the `multiline` prop.\n  (TextfieldTextareaProps | TextfieldInputProps) & {\n    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n  };\n\nexport const Textfield = ({\n  dark,\n  label,\n  description,\n  error,\n  multiline,\n  prefix,\n  suffix,\n  style,\n  className,\n  ref,\n  id: idProp,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: TextfieldProps) => {\n  const generatedId = useId();\n  const descriptionId = useId();\n  const validationId = useId();\n  const id = idProp || generatedId;\n\n  const ariaDescribedBy =\n    [description ? descriptionId : '', error ? validationId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n  return (\n    <Field className={className} data-dark={dark} style={style}>\n      {label && <Label htmlFor={id}>{label}</Label>}\n      {description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}\n      <FieldAffixes>\n        {prefix && <FieldAffix>{prefix}</FieldAffix>}\n        {multiline ? (\n          <Textarea\n            id={id}\n            ref={ref as Ref<HTMLTextAreaElement>}\n            aria-invalid={Boolean(error) || undefined}\n            aria-describedby={ariaDescribedBy}\n            dark={dark}\n            {...(props as TextareaPropsFiltered)}\n          />\n        ) : (\n          <Input\n            id={id}\n            ref={ref as Ref<HTMLInputElement>}\n            aria-invalid={Boolean(error) || undefined}\n            aria-describedby={ariaDescribedBy}\n            dark={dark}\n            {...(props as InputPropsFiltered)}\n          />\n        )}\n        {suffix && <FieldAffix>{suffix}</FieldAffix>}\n      </FieldAffixes>\n      {!!error && <ValidationMessage id={validationId}>{error}</ValidationMessage>}\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA8CA,MAAa,YAAY,CAAC,EACxB,MACA,OACA,aACA,OACA,WACA,QACA,QACA,OACA,WACA,KACA,IAAI,QACJ,oBAAoB,oBACpB,GAAG,OACY,KAAK;CACpB,MAAM,cAAc,OAAO;CAC3B,MAAM,gBAAgB,OAAO;CAC7B,MAAM,eAAe,OAAO;CAC5B,MAAM,KAAK,UAAU;CAErB,MAAM,kBACJ;EAAC,cAAc,gBAAgB;EAAI,QAAQ,eAAe;EAAI;CAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AACrG,wBACE,KAAC;EAAiB;EAAW,aAAW;EAAa;;GAClD,yBAAS,IAAC;IAAM,SAAS;cAAK;KAAc;GAC5C,+BAAe,IAAC;IAAiB,IAAI;cAAgB;KAA+B;mBACrF,KAAC;IACE,0BAAU,IAAC,wBAAY,SAAoB;IAC3C,4BACC,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KACZ;KACN,GAAK;MACL,mBAEF,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KACZ;KACN,GAAK;MACL;IAEH,0BAAU,IAAC,wBAAY,SAAoB;OAC/B;KACZ,yBAAS,IAAC;IAAkB,IAAI;cAAe;KAA0B;;GACtE;AAEX"}

package/dist/utilities/hooks/index.d.ts

@@ -2,16 +2,16 @@ import { UseCheckboxGroupOptions, useCheckboxGroup } from "../../useCheckboxGrou
 import { useIsomorphicLayoutEffect } from "../../useIsomorphicLayoutEffect-BMdz-mee.js";
 import { useMergeRefs } from "../../useMergeRefs-iCenhgmf.js";
 import "../../types-Mj1poXVf.js";
-import { UsePaginationProps, usePagination } from "../../alert-footer-F_v71IcX.js";
-import "../../dialog-trigger-context-CpvFZdAf.js";
-import "../../drawer-trigger-context-_6XODjjT.js";
-import "../../popover-trigger-context-B_lI5ACl.js";
-import "../../dropdown-item-DF22Z5Fn.js";
-import "../../dropdown-list-C3lptEFd.js";
-import "../../dropdown-trigger-context-CZCfmNC-.js";
-import "../../footer-links-XPnAoNyU.js";
-import "../../pagination-item-B5s_Fpjt.js";
-import "../../sticky-header-BhzeZPgJ.js";
+import { UsePaginationProps, usePagination } from "../../alert-footer-CmqpWEov.js";
+import "../../dialog-trigger-context-CedfUYNj.js";
+import "../../drawer-trigger-context-V67j5GyK.js";
+import "../../popover-trigger-context-CQKQbCmr.js";
+import "../../dropdown-item-CnQfwJGB.js";
+import "../../dropdown-list-DK4FJAqB.js";
+import "../../dropdown-trigger-context-C51vPffs.js";
+import "../../footer-links-C9v9gcuW.js";
+import "../../pagination-item-CEfdaSuS.js";
+import "../../sticky-header-DxtaS2U0.js";
 import "../../index-CTw2zfCM.js";
 import "../../types-DC-FPmDA.js";
 export { UseCheckboxGroupOptions, UsePaginationProps, useCheckboxGroup, useIsomorphicLayoutEffect, useMergeRefs, usePagination };

package/dist/utilities/hooks/usePagination/usePagination.d.ts

@@ -2,16 +2,16 @@ import "../../../useCheckboxGroup-DRhqch1m.js";
 import "../../../useIsomorphicLayoutEffect-BMdz-mee.js";
 import "../../../useMergeRefs-iCenhgmf.js";
 import "../../../types-Mj1poXVf.js";
-import { UsePaginationProps, usePagination } from "../../../alert-footer-F_v71IcX.js";
-import "../../../dialog-trigger-context-CpvFZdAf.js";
-import "../../../drawer-trigger-context-_6XODjjT.js";
-import "../../../popover-trigger-context-B_lI5ACl.js";
-import "../../../dropdown-item-DF22Z5Fn.js";
-import "../../../dropdown-list-C3lptEFd.js";
-import "../../../dropdown-trigger-context-CZCfmNC-.js";
-import "../../../footer-links-XPnAoNyU.js";
-import "../../../pagination-item-B5s_Fpjt.js";
-import "../../../sticky-header-BhzeZPgJ.js";
+import { UsePaginationProps, usePagination } from "../../../alert-footer-CmqpWEov.js";
+import "../../../dialog-trigger-context-CedfUYNj.js";
+import "../../../drawer-trigger-context-V67j5GyK.js";
+import "../../../popover-trigger-context-CQKQbCmr.js";
+import "../../../dropdown-item-CnQfwJGB.js";
+import "../../../dropdown-list-DK4FJAqB.js";
+import "../../../dropdown-trigger-context-C51vPffs.js";
+import "../../../footer-links-C9v9gcuW.js";
+import "../../../pagination-item-CEfdaSuS.js";
+import "../../../sticky-header-DxtaS2U0.js";
 import "../../../index-CTw2zfCM.js";
 import "../../../types-DC-FPmDA.js";
 export { UsePaginationProps, usePagination };

package/dist/utilities/index.d.ts

@@ -2,16 +2,16 @@ import { UseCheckboxGroupOptions, useCheckboxGroup } from "../useCheckboxGroup-D
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect-BMdz-mee.js";
 import "../useMergeRefs-iCenhgmf.js";
 import "../types-Mj1poXVf.js";
-import { UsePaginationProps, usePagination } from "../alert-footer-F_v71IcX.js";
-import "../dialog-trigger-context-CpvFZdAf.js";
-import "../drawer-trigger-context-_6XODjjT.js";
-import "../popover-trigger-context-B_lI5ACl.js";
-import "../dropdown-item-DF22Z5Fn.js";
-import "../dropdown-list-C3lptEFd.js";
-import "../dropdown-trigger-context-CZCfmNC-.js";
-import "../footer-links-XPnAoNyU.js";
-import "../pagination-item-B5s_Fpjt.js";
-import "../sticky-header-BhzeZPgJ.js";
+import { UsePaginationProps, usePagination } from "../alert-footer-CmqpWEov.js";
+import "../dialog-trigger-context-CedfUYNj.js";
+import "../drawer-trigger-context-V67j5GyK.js";
+import "../popover-trigger-context-CQKQbCmr.js";
+import "../dropdown-item-CnQfwJGB.js";
+import "../dropdown-list-DK4FJAqB.js";
+import "../dropdown-trigger-context-C51vPffs.js";
+import "../footer-links-C9v9gcuW.js";
+import "../pagination-item-CEfdaSuS.js";
+import "../sticky-header-DxtaS2U0.js";
 import "../index-CTw2zfCM.js";
 import { MergeRight } from "../types-DC-FPmDA.js";
 export { MergeRight, UseCheckboxGroupOptions, UsePaginationProps, useCheckboxGroup, useIsomorphicLayoutEffect, usePagination };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bi-digital/react",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "type": "module",
   "description": "React components from BI Digital",
   "author": "BI Digital",
@@ -47,13 +47,13 @@
     "tsdown": "^0.12.7",
     "typescript": "^5.7.2",
     "vitest": "^3.2.1",
-    "@bi-digital/icons-react": "0.2.20"
+    "@bi-digital/icons-react": "0.2.22"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "@bi-digital/css": "0.2.20",
-    "@bi-digital/icons-react": "0.2.20"
+    "@bi-digital/css": "0.2.22",
+    "@bi-digital/icons-react": "0.2.22"
   },
   "scripts": {
     "build": "tsdown",