@conduction/components 2.1.32 → 2.1.34

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 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.
   - 2.1.29/2.1.30: Added optional menuPlacement to all select elements.

package/lib/components/card/detailsCard/DetailsCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DetailsCardProps {
     title: string;
     introduction?: string;

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DownloadCardProps {
     icon: JSX.Element;
     label: string;

package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface HorizontalImageCardProps {
     iconOrImage: JSX.Element;
     title: string;

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ImageAndDetailsCardProps {
     title: string;
     image: JSX.Element;

package/lib/components/card/infoCard/InfoCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface InfoCardProps {
     title: string;
     content: JSX.Element | string;

package/lib/components/card/richContentCard/RichContentCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface RichContentCardProps {
     link: {
         label: string;

package/lib/components/codeBlock/CodeBlock.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CodeBlockProps {
     codeBlock: string | JSX.Element;
 }

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts

@@ -5,7 +5,6 @@
  *
  * Note: we do not use css modules here due to this component being a wrapper
  */
-/// <reference types="react" />
 import "./Breadcrumbs.css";
 interface BreadcrumbsProps {
     crumbs: {

package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./Pagination.css";
 interface PaginationProps {
     pages: number;

package/lib/components/editableTableRow/EditableTableRow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface InputTypes {
     inputType: "text" | "email";
 }

package/lib/components/formFields/checkbox/checkbox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IReactHookFormProps } from "./../types";
 export interface ICheckboxProps {
     label: string;

package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Control, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 /**

package/lib/components/formFields/date/Date.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "react-datepicker/dist/react-datepicker.css";
 import { Control, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";

package/lib/components/formFields/errorMessage/ErrorMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface IErrorMessageProps {
     message: string;
 }

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/radio.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IReactHookFormProps } from "./types";
 interface IRadioProps {
     label: string;

package/lib/components/formFields/select/select.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Control, FieldValues } from "react-hook-form";
 import { MenuPlacement } from "react-select";
 import { IReactHookFormProps } from "../types";
@@ -15,8 +14,9 @@ interface ISelectProps {
     isClearable?: boolean;
     hideErrorMessage?: boolean;
     menuPlacement?: MenuPlacement;
+    placeholder?: string;
 }
-export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
 export {};

package/lib/components/formFields/select/select.js

@@ -5,18 +5,18 @@ import ReactSelect from "react-select";
 import CreatableSelect from "react-select/creatable";
 import clsx from "clsx";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
-export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }) => {
+export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }) => {
+export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : "Select or create one or multiple options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, }) => {
+export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select an option..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };

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

@@ -1,22 +1,27 @@
 :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(--skeleton-color-white);
+  background-color: var(--conduction-input-select-background-color);
   border: var(--conduction-input-select-border);
-  border-radius: var(--skeleton-border-radius-md);
+  border-radius: var(--conduction-input-select-border-radius);
   box-sizing: border-box;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
+  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(
-    --utrecht-textbox-invalid-border-color,
-    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
-  );
+  border-color: var(--conduction-input-select-invalid-border-color);
 }
 
 .select .select > div:focus-within {
@@ -34,5 +39,5 @@
   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);
+  border-radius: var(--conduction-input-select-border-radius);
 }

package/lib/components/formFields/textarea.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IReactHookFormProps } from "./types";
 export interface ITextAreaProps {
     name: string;

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/lib/components/imageDivider/ImageDivider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ImageDividerProps {
     image: string;
     layoutClassName: string;

package/lib/components/logo/Logo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface LogoProps {
     layoutClassName: string;
     href?: string;

package/lib/components/metaIcon/MetaIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface MetaIconProps {
     icon: JSX.Element;
     label: string;

package/lib/components/notificationPopUp/NotificationPopUp.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface NotificationPopUpProps {
     title: string;
     description: string | JSX.Element;

package/lib/components/tag/Tag.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface TagProps {
     label: string;
     icon?: JSX.Element;

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ITopNavItem {
     label: string;
     icon?: JSX.Element;

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface TopNavProps {
     items: {
         label: string;

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard } from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";

package/package.json

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

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,22 +1,27 @@
 :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(--skeleton-color-white);
+  background-color: var(--conduction-input-select-background-color);
   border: var(--conduction-input-select-border);
-  border-radius: var(--skeleton-border-radius-md);
+  border-radius: var(--conduction-input-select-border-radius);
   box-sizing: border-box;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
+  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(
-    --utrecht-textbox-invalid-border-color,
-    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
-  );
+  border-color: var(--conduction-input-select-invalid-border-color);
 }
 
 .select .select > div:focus-within {
@@ -34,5 +39,5 @@
   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);
+  border-radius: var(--conduction-input-select-border-radius);
 }

package/src/components/formFields/select/select.tsx

@@ -17,6 +17,7 @@ interface ISelectProps {
   isClearable?: boolean;
   hideErrorMessage?: boolean;
   menuPlacement?: MenuPlacement;
+  placeholder?: string;
 }
 
 export const SelectMultiple = ({
@@ -30,6 +31,7 @@ export const SelectMultiple = ({
   disabled,
   hideErrorMessage,
   menuPlacement,
+  placeholder,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
@@ -48,7 +50,7 @@ export const SelectMultiple = ({
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
               styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
-              placeholder={disabled ? "Disabled..." : "Select one or more options..."}
+              placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
           </>
@@ -69,6 +71,7 @@ export const SelectCreate = ({
   disabled,
   hideErrorMessage,
   menuPlacement,
+  placeholder,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
@@ -80,7 +83,7 @@ export const SelectCreate = ({
             <CreatableSelect
               inputId={id}
               value={value ?? ""}
-              placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
+              placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
               className={clsx(styles.select, errors[name] && styles.error)}
               isMulti
               isDisabled={disabled}
@@ -109,6 +112,7 @@ export const SelectSingle = ({
   disabled,
   hideErrorMessage,
   menuPlacement,
+  placeholder,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
@@ -126,7 +130,7 @@ export const SelectSingle = ({
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
               styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
-              placeholder={disabled ? "Disabled..." : "Select an option..."}
+              placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
           </>

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} />}
   </>
 );