@conduction/components 2.1.33 → 2.1.35

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.35: Added CardWrapper.
+  - 2.1.34: Refactor Den Haag textbox and textarea to Utrecht; add Single Select design tokens.
   - 2.1.33: Added optional placeholder to all select elements.
   - 2.1.32: Add inline-padding to container, remove redundant (breaking and unused) components, up React version.
   - 2.1.31: Removed Den Haag implementations which hold shapeRendering warnings.

package/lib/components/card/cardWrapper/CardWrapper.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { HTMLAttributes } from "react";
+export declare const CardWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/lib/components/card/cardWrapper/CardWrapper.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./CardWrapper.module.css";
+export const CardWrapper = (props) => {
+    const _props = { ...props, className: `${props.className} ${styles.container}` };
+    return _jsx("div", { ..._props, children: props.children });
+};

package/lib/components/card/cardWrapper/CardWrapper.module.css

@@ -0,0 +1,32 @@
+:root {
+  --conduction-card-wrapper-background-color: #ffffff;
+  /* --conduction-card-wrapper-border-color: unset; */
+  /* --conduction-card-wrapper-border-width: unset; */
+  /* --conduction-card-wrapper-border-style: unset; */
+  --conduction-card-wrapper-border-radius: 16px;
+  --conduction-card-wrapper-color: #000000;
+  /* --conduction-card-wrapper-background-color-hover: unset; */
+  --conduction-card-wrapper-padding-inline-end: 18px;
+  --conduction-card-wrapper-padding-inline-start: 18px;
+  --conduction-card-wrapper-padding-block-end: 18px;
+  --conduction-card-wrapper-padding-block-start: 18px;
+}
+
+.container {
+  padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
+  padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
+  padding-block-start: var(--conduction-card-wrapper-padding-block-start);
+  padding-block-end: var(--conduction-card-wrapper-padding-block-end);
+
+  color: var(--conduction-card-wrapper-color);
+  background-color: var(--conduction-card-wrapper-background-color);
+
+  border-radius: var(--conduction-card-wrapper-border-radius);
+  border-width: var(--conduction-card-wrapper-border-width);
+  border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
+}
+
+.container:hover {
+  background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
+  cursor: pointer;
+}

package/lib/components/card/index.d.ts

@@ -4,4 +4,5 @@ import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
 import { RichContentCard } from "./richContentCard/RichContentCard";
 import { DetailsCard } from "./detailsCard/DetailsCard";
 import { InfoCard } from "./infoCard/InfoCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
+import { CardWrapper } from "./cardWrapper/CardWrapper";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };

package/lib/components/card/index.js

@@ -4,4 +4,5 @@ import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
 import { RichContentCard } from "./richContentCard/RichContentCard";
 import { DetailsCard } from "./detailsCard/DetailsCard";
 import { InfoCard } from "./infoCard/InfoCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
+import { CardWrapper } from "./cardWrapper/CardWrapper";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };

package/lib/components/formFields/input.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { TextField } from "@gemeente-denhaag/textfield";
-import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Textbox } from "@utrecht/component-library-react/dist/css-module";
 import { ErrorMessage } from "./errorMessage/ErrorMessage";
 export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, hideErrorMessage, }) => {
-    const [showPassword, setShowPassword] = React.useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(FontAwesomeIcon, { icon: faEye }) : _jsx(FontAwesomeIcon, { icon: faEyeSlash }) }) }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
 };
-export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "email", required: !!validation?.required, ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));
+export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "email", required: !!validation?.required, ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(Textbox, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-Textbox__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));

package/lib/components/formFields/select/select.module.css

@@ -1,38 +1,43 @@
-:root {
-  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
-  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
-}
-
-.select > div {
-  background-color: var(--skeleton-color-white);
-  border: var(--conduction-input-select-border);
-  border-radius: var(--skeleton-border-radius-md);
-  box-sizing: border-box;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-}
-
-.select.error > div {
-  border-color: var(
-    --utrecht-textbox-invalid-border-color,
-    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
-  );
-}
-
-.select .select > div:focus-within {
-  outline: none;
-  box-shadow: none;
-}
-
-.select > div:focus-within::after {
-  content: "";
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  bottom: calc(var(--skeleton-size-2xs) * -1);
-  left: calc(var(--skeleton-size-2xs) * -1);
-  right: calc(var(--skeleton-size-2xs) * -1);
-  top: calc(var(--skeleton-size-2xs) * -1);
-  border: var(--conduction-input-select-border-focus);
-  border-radius: var(--skeleton-border-radius-md);
-}
+:root {
+  --conduction-input-select-padding-block-start: var(--skeleton-size-xs);
+  --conduction-input-select-padding-block-end: var(--skeleton-size-xs);
+  --conduction-input-select-border-radius: var(--skeleton-border-radius-md);
+  --conduction-input-select-background-color: var(--skeleton-color-white);
+  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
+  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
+  --conduction-input-select-invalid-border-color: var(
+    --utrecht-textbox-invalid-border-color,
+    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
+  );
+}
+
+.select > div {
+  background-color: var(--conduction-input-select-background-color);
+  border: var(--conduction-input-select-border);
+  border-radius: var(--conduction-input-select-border-radius);
+  box-sizing: border-box;
+  padding-block-start: var(--conduction-input-select-padding-block-start);
+  padding-block-end: var(--conduction-input-select-padding-block-end);
+}
+
+.select.error > div {
+  border-color: var(--conduction-input-select-invalid-border-color);
+}
+
+.select .select > div:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+
+.select > div:focus-within::after {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  bottom: calc(var(--skeleton-size-2xs) * -1);
+  left: calc(var(--skeleton-size-2xs) * -1);
+  right: calc(var(--skeleton-size-2xs) * -1);
+  top: calc(var(--skeleton-size-2xs) * -1);
+  border: var(--conduction-input-select-border-focus);
+  border-radius: var(--conduction-input-select-border-radius);
+}

package/lib/components/formFields/textarea.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextArea } from "@gemeente-denhaag/textarea";
 import { ErrorMessage } from "./errorMessage/ErrorMessage";
-export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/dist/css-module";
+export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(UtrechtTextarea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.33",
+  "version": "2.1.35",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/card/cardWrapper/CardWrapper.module.css

@@ -0,0 +1,32 @@
+:root {
+  --conduction-card-wrapper-background-color: #ffffff;
+  /* --conduction-card-wrapper-border-color: unset; */
+  /* --conduction-card-wrapper-border-width: unset; */
+  /* --conduction-card-wrapper-border-style: unset; */
+  --conduction-card-wrapper-border-radius: 16px;
+  --conduction-card-wrapper-color: #000000;
+  /* --conduction-card-wrapper-background-color-hover: unset; */
+  --conduction-card-wrapper-padding-inline-end: 18px;
+  --conduction-card-wrapper-padding-inline-start: 18px;
+  --conduction-card-wrapper-padding-block-end: 18px;
+  --conduction-card-wrapper-padding-block-start: 18px;
+}
+
+.container {
+  padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
+  padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
+  padding-block-start: var(--conduction-card-wrapper-padding-block-start);
+  padding-block-end: var(--conduction-card-wrapper-padding-block-end);
+
+  color: var(--conduction-card-wrapper-color);
+  background-color: var(--conduction-card-wrapper-background-color);
+
+  border-radius: var(--conduction-card-wrapper-border-radius);
+  border-width: var(--conduction-card-wrapper-border-width);
+  border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
+}
+
+.container:hover {
+  background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
+  cursor: pointer;
+}

package/src/components/card/cardWrapper/CardWrapper.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as styles from "./CardWrapper.module.css";
+import { HTMLAttributes } from "react";
+
+export const CardWrapper = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
+  const _props = { ...props, className: `${props.className} ${styles.container}` };
+
+  return <div {..._props}>{props.children}</div>;
+};

package/src/components/card/index.tsx

@@ -4,5 +4,6 @@ import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
 import { RichContentCard } from "./richContentCard/RichContentCard";
 import { DetailsCard } from "./detailsCard/DetailsCard";
 import { InfoCard } from "./infoCard/InfoCard";
+import { CardWrapper } from "./cardWrapper/CardWrapper";
 
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };

package/src/components/formFields/input.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
-import { TextField } from "@gemeente-denhaag/textfield";
+import { Textbox } from "@utrecht/component-library-react/dist/css-module";
 import { IReactHookFormProps } from "./types";
-import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ErrorMessage } from "./errorMessage/ErrorMessage";
 
 export interface IInputProps {
@@ -23,20 +21,13 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   errors,
   hideErrorMessage,
 }) => {
-  const [showPassword, setShowPassword] = React.useState<boolean>(false);
-
   return (
     <>
-      <TextField
-        type={showPassword ? "text" : "password"}
+      <Textbox
+        type="password"
         {...{ disabled, placeholder }}
         {...register(name, { ...validation })}
         invalid={errors[name]}
-        icon={
-          <span onClick={() => setShowPassword(!showPassword)}>
-            {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
-          </span>
-        }
       />
       {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
     </>
@@ -55,7 +46,7 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
   hideErrorMessage,
 }) => (
   <>
-    <TextField
+    <Textbox
       type="text"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
@@ -77,7 +68,7 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
   hideErrorMessage,
 }) => (
   <>
-    <TextField
+    <Textbox
       type="email"
       required={!!validation?.required}
       {...{ defaultValue, disabled, placeholder, icon }}
@@ -100,7 +91,7 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
   hideErrorMessage,
 }) => (
   <>
-    <TextField
+    <Textbox
       type="url"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
@@ -122,7 +113,7 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
   hideErrorMessage,
 }) => (
   <>
-    <TextField
+    <Textbox
       type="number"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation, valueAsNumber: true })}
@@ -144,7 +135,7 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
   hideErrorMessage,
 }) => (
   <>
-    <TextField
+    <Textbox
       type="number"
       step=".01"
       {...{ disabled, placeholder, icon, defaultValue }}
@@ -168,7 +159,7 @@ export const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormP
   register,
 }) => (
   <input
-    className="denhaag-textfield__input"
+    className="denhaag-Textbox__input"
     type="file"
     {...{ defaultValue, disabled, accept }}
     {...register(name, { ...validation })}

package/src/components/formFields/select/select.module.css

@@ -1,38 +1,43 @@
-:root {
-  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
-  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
-}
-
-.select > div {
-  background-color: var(--skeleton-color-white);
-  border: var(--conduction-input-select-border);
-  border-radius: var(--skeleton-border-radius-md);
-  box-sizing: border-box;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-}
-
-.select.error > div {
-  border-color: var(
-    --utrecht-textbox-invalid-border-color,
-    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
-  );
-}
-
-.select .select > div:focus-within {
-  outline: none;
-  box-shadow: none;
-}
-
-.select > div:focus-within::after {
-  content: "";
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  bottom: calc(var(--skeleton-size-2xs) * -1);
-  left: calc(var(--skeleton-size-2xs) * -1);
-  right: calc(var(--skeleton-size-2xs) * -1);
-  top: calc(var(--skeleton-size-2xs) * -1);
-  border: var(--conduction-input-select-border-focus);
-  border-radius: var(--skeleton-border-radius-md);
-}
+:root {
+  --conduction-input-select-padding-block-start: var(--skeleton-size-xs);
+  --conduction-input-select-padding-block-end: var(--skeleton-size-xs);
+  --conduction-input-select-border-radius: var(--skeleton-border-radius-md);
+  --conduction-input-select-background-color: var(--skeleton-color-white);
+  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
+  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
+  --conduction-input-select-invalid-border-color: var(
+    --utrecht-textbox-invalid-border-color,
+    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
+  );
+}
+
+.select > div {
+  background-color: var(--conduction-input-select-background-color);
+  border: var(--conduction-input-select-border);
+  border-radius: var(--conduction-input-select-border-radius);
+  box-sizing: border-box;
+  padding-block-start: var(--conduction-input-select-padding-block-start);
+  padding-block-end: var(--conduction-input-select-padding-block-end);
+}
+
+.select.error > div {
+  border-color: var(--conduction-input-select-invalid-border-color);
+}
+
+.select .select > div:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+
+.select > div:focus-within::after {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  bottom: calc(var(--skeleton-size-2xs) * -1);
+  left: calc(var(--skeleton-size-2xs) * -1);
+  right: calc(var(--skeleton-size-2xs) * -1);
+  top: calc(var(--skeleton-size-2xs) * -1);
+  border: var(--conduction-input-select-border-focus);
+  border-radius: var(--conduction-input-select-border-radius);
+}

package/src/components/formFields/textarea.tsx

@@ -1,6 +1,6 @@
-import { TextArea } from "@gemeente-denhaag/textarea";
 import { IReactHookFormProps } from "./types";
 import { ErrorMessage } from "./errorMessage/ErrorMessage";
+import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/dist/css-module";
 
 export interface ITextAreaProps {
   name: string;
@@ -19,7 +19,7 @@ export const Textarea = ({
   hideErrorMessage,
 }: ITextAreaProps & IReactHookFormProps): JSX.Element => (
   <>
-    <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
+    <UtrechtTextarea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
     {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
   </>
 );