@conduction/components 2.1.22 → 2.1.25

package/README.md

@@ -4,6 +4,9 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.25: Added id prop to select component
+  - 2.1.24: Add new design tokens for topnav dropdown
+  - 2.1.23: Added optional error messages to CreateKeyValue and unused classname removed warning.
   - 2.1.22: Added optional error messages to textarea, select and input fields.
   - 2.1.21: Added optional copy button and refactored delete button in CreateKeyValue.
   - 2.1.20: Updated react.fc code and github actions added.

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

@@ -13,10 +13,11 @@ interface CreateKeyValueProps {
         canCopy: boolean;
         onCopied?: () => any;
     };
+    hideErrorMessage?: boolean;
 }
 export interface IKeyValue {
     key: string;
     value: string;
 }
-export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
+export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
 export {};

package/lib/components/formFields/createKeyValue/CreateKeyValue.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Controller } from "react-hook-form";
@@ -8,9 +8,10 @@ import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
-export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, }) => {
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
+export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, errors }, rules: validation, render: ({ field: { onChange } }) => {
-            return _jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } });
+            return (_jsxs(_Fragment, { children: [_jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
 const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, }) => {
@@ -37,5 +38,5 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, })
     React.useEffect(() => {
         handleChange(keyValues);
     }, [keyValues]);
-    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, className: styles.copyButton, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
 };

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

@@ -8,12 +8,13 @@ interface ISelectProps {
         value: string;
     }[];
     name: string;
+    id?: string;
     defaultValue?: any;
     disabled?: boolean;
     isClearable?: boolean;
     hideErrorMessage?: boolean;
 }
-export declare const SelectMultiple: ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectCreate: ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectSingle: ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }: 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 = ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
+export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, 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, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
+export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { 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, 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..." : "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, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }) => {
+export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, 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, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select an option..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -1,145 +1,157 @@
-:root {
-  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
-  --conduction-primary-top-nav-color: var(--skeleton-color-white);
-  --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
-  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
-  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
-  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
-  --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
-  --conduction-primary-top-nav-toggle-icon-size: 24px;
-  --conduction-primary-top-nav-mobile-logo-padding: 18px;
-  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
-}
-
-.container {
-  width: 100%;
-}
-
-.menuToggleContainer {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.menuToggleContainer > .menuToggle {
-  all: unset;
-  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
-  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
-}
-
-.menuToggleContainer > .menuToggle:hover {
-  cursor: pointer;
-}
-
-.primary {
-  display: none;
-}
-
-.primary.isOpen {
-  display: block;
-}
-
-.menuToggleContainer {
-  width: 100%;
-}
-
-.primary {
-  font-weight: 500;
-  width: 100%;
-  background-color: var(--conduction-primary-top-nav-background-color);
-}
-
-.primary:hover {
-  cursor: pointer;
-}
-
-.ul {
-  margin: unset;
-  padding-inline-start: unset;
-  align-items: center;
-  max-height: 80vh;
-  overflow-y: scroll;
-}
-
-.li {
-  list-style-type: none;
-  display: block;
-  position: relative;
-  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
-  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
-  padding-block-start: var(--conduction-primary-top-nav-item-padding);
-  padding-block-end: var(--conduction-primary-top-nav-item-padding);
-}
-
-.li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
-}
-
-.current {
-  background-color: var(--conduction-primary-top-nav-background-color-active);
-  box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
-}
-
-.primary .link {
-  display: block;
-  text-decoration: none;
-  color: var(--conduction-primary-top-nav-color);
-}
-
-.primary .li:hover .dropdown {
-  display: block;
-  z-index: 1;
-}
-
-.dropdown {
-  left: 0;
-  top: 100%;
-  padding: 0;
-  width: 100%;
-  display: block;
-  list-style-type: none;
-  background-color: var(--conduction-primary-top-nav-background-color);
-  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-}
-
-.dropdown > li {
-  padding-inline-start: var(--web-app-size-md);
-}
-
-.label {
-  overflow: hidden;
-  max-width: 37ch;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.label > :not(:last-child) {
-  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
-}
-
-@media only screen and (min-width: 992px) {
-  .container {
-    width: fit-content;
-  }
-
-  .primary {
-    display: block;
-    width: fit-content;
-  }
-
-  .ul {
-    display: flex;
-    overflow-y: unset;
-  }
-
-  .dropdown {
-    position: absolute;
-    display: none;
-  }
-
-  .menuToggleContainer {
-    display: none;
-  }
-}
+:root {
+  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-primary-top-nav-color: var(--skeleton-color-white);
+  --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
+  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
+  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
+  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
+  --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
+  --conduction-primary-top-nav-toggle-icon-size: 24px;
+  --conduction-primary-top-nav-mobile-logo-padding: 18px;
+  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
+}
+
+.container {
+  width: 100%;
+}
+
+.menuToggleContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.menuToggleContainer > .menuToggle {
+  all: unset;
+  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
+  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
+}
+
+.menuToggleContainer > .menuToggle:hover {
+  cursor: pointer;
+}
+
+.primary {
+  display: none;
+}
+
+.primary.isOpen {
+  display: block;
+}
+
+.menuToggleContainer {
+  width: 100%;
+}
+
+.primary {
+  font-weight: 500;
+  width: 100%;
+  background-color: var(--conduction-primary-top-nav-background-color);
+}
+
+.primary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  padding-inline-start: unset;
+  align-items: center;
+  max-height: 80vh;
+  overflow-y: scroll;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  position: relative;
+  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
+  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
+  padding-block-start: var(--conduction-primary-top-nav-item-padding);
+  padding-block-end: var(--conduction-primary-top-nav-item-padding);
+}
+
+.li:hover {
+  background-color: var(--conduction-primary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-primary-top-nav-background-color-active);
+  box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
+}
+
+.primary .link {
+  display: block;
+  text-decoration: none;
+  color: var(--conduction-primary-top-nav-color);
+}
+
+.primary .li:hover .link {
+  color: var(--conduction-primary-top-nav-color-hover);
+}
+
+.primary .li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
+.dropdown {
+  left: 0;
+  top: 100%;
+  padding: 0;
+  width: 100%;
+  display: block;
+  list-style-type: none;
+  background-color: var(--conduction-primary-top-nav-dropdown-background-color);
+  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+}
+
+.primary .dropdown .li .link {
+  color: var(--conduction-primary-top-nav-dropdown-color);
+}
+
+.dropdown .li:hover {
+  background: var(--conduction-primary-top-nav-dropdown-background-color-hover);
+}
+
+.dropdown > li {
+  padding-inline-start: var(--web-app-size-md);
+}
+
+.label {
+  overflow: hidden;
+  max-width: 37ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label > :not(:last-child) {
+  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
+}
+
+@media only screen and (min-width: 992px) {
+  .container {
+    width: fit-content;
+  }
+
+  .primary {
+    display: block;
+    width: fit-content;
+  }
+
+  .ul {
+    display: flex;
+    overflow-y: unset;
+  }
+
+  .dropdown {
+    position: absolute;
+    display: none;
+  }
+
+  .menuToggleContainer {
+    display: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.22",
+  "version": "2.1.25",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -12,12 +12,7 @@
     "type": "git",
     "url": "git+https://github.com/ConductionNL/conduction-components.git"
   },
-  "keywords": [
-    "React",
-    "Gatsby",
-    "Conduction",
-    "Components"
-  ],
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
   "author": "Conduction B.V.",
   "license": "ISC",
   "bugs": {

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -8,6 +8,7 @@ import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
 
 /**
  * Export KeyValue input component (wrapped in FormFieldGroup)
@@ -21,6 +22,7 @@ interface CreateKeyValueProps {
     canCopy: boolean;
     onCopied?: () => any;
   };
+  hideErrorMessage?: boolean;
 }
 
 export interface IKeyValue {
@@ -36,13 +38,19 @@ export const CreateKeyValue = ({
   defaultValue,
   disabled,
   copyValue,
+  hideErrorMessage,
 }: CreateKeyValueProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, errors }}
       rules={validation}
       render={({ field: { onChange } }) => {
-        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />;
+        return (
+          <>
+            <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+          </>
+        );
       }}
     />
   );
@@ -120,7 +128,6 @@ const KeyValueComponent = ({
                       <ToolTip tooltip="Copy value">
                         <Button
                           {...{ disabled }}
-                          className={styles.copyButton}
                           onClick={() => handleCopyToClipboard(keyValue.value, idx)}
                           variant={currentCopyIdx === idx ? "secondary-action" : "primary-action"}
                         >

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import * as styles from "./select.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import ReactSelect from "react-select";
@@ -10,6 +11,7 @@ interface ISelectProps {
   control: Control<FieldValues, any>;
   options: { label: string; value: string }[];
   name: string;
+  id?: string;
   defaultValue?: any;
   disabled?: boolean;
   isClearable?: boolean;
@@ -17,6 +19,7 @@ interface ISelectProps {
 }
 
 export const SelectMultiple = ({
+  id,
   name,
   options,
   errors,
@@ -34,6 +37,7 @@ export const SelectMultiple = ({
         return (
           <>
             <ReactSelect
+              inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}
               isMulti
@@ -52,6 +56,7 @@ export const SelectMultiple = ({
 };
 
 export const SelectCreate = ({
+  id,
   name,
   options,
   errors,
@@ -69,6 +74,7 @@ export const SelectCreate = ({
         return (
           <>
             <CreatableSelect
+              inputId={id}
               value={value ?? ""}
               placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
               className={clsx(styles.select, errors[name] && styles.error)}
@@ -87,6 +93,7 @@ export const SelectCreate = ({
 };
 
 export const SelectSingle = ({
+  id,
   name,
   options,
   errors,
@@ -105,6 +112,7 @@ export const SelectSingle = ({
         return (
           <>
             <ReactSelect
+              inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}
               isDisabled={disabled}

package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -1,145 +1,157 @@
-:root {
-  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
-  --conduction-primary-top-nav-color: var(--skeleton-color-white);
-  --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
-  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
-  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
-  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
-  --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
-  --conduction-primary-top-nav-toggle-icon-size: 24px;
-  --conduction-primary-top-nav-mobile-logo-padding: 18px;
-  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
-}
-
-.container {
-  width: 100%;
-}
-
-.menuToggleContainer {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.menuToggleContainer > .menuToggle {
-  all: unset;
-  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
-  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
-}
-
-.menuToggleContainer > .menuToggle:hover {
-  cursor: pointer;
-}
-
-.primary {
-  display: none;
-}
-
-.primary.isOpen {
-  display: block;
-}
-
-.menuToggleContainer {
-  width: 100%;
-}
-
-.primary {
-  font-weight: 500;
-  width: 100%;
-  background-color: var(--conduction-primary-top-nav-background-color);
-}
-
-.primary:hover {
-  cursor: pointer;
-}
-
-.ul {
-  margin: unset;
-  padding-inline-start: unset;
-  align-items: center;
-  max-height: 80vh;
-  overflow-y: scroll;
-}
-
-.li {
-  list-style-type: none;
-  display: block;
-  position: relative;
-  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
-  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
-  padding-block-start: var(--conduction-primary-top-nav-item-padding);
-  padding-block-end: var(--conduction-primary-top-nav-item-padding);
-}
-
-.li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
-}
-
-.current {
-  background-color: var(--conduction-primary-top-nav-background-color-active);
-  box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
-}
-
-.primary .link {
-  display: block;
-  text-decoration: none;
-  color: var(--conduction-primary-top-nav-color);
-}
-
-.primary .li:hover .dropdown {
-  display: block;
-  z-index: 1;
-}
-
-.dropdown {
-  left: 0;
-  top: 100%;
-  padding: 0;
-  width: 100%;
-  display: block;
-  list-style-type: none;
-  background-color: var(--conduction-primary-top-nav-background-color);
-  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-}
-
-.dropdown > li {
-  padding-inline-start: var(--web-app-size-md);
-}
-
-.label {
-  overflow: hidden;
-  max-width: 37ch;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.label > :not(:last-child) {
-  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
-}
-
-@media only screen and (min-width: 992px) {
-  .container {
-    width: fit-content;
-  }
-
-  .primary {
-    display: block;
-    width: fit-content;
-  }
-
-  .ul {
-    display: flex;
-    overflow-y: unset;
-  }
-
-  .dropdown {
-    position: absolute;
-    display: none;
-  }
-
-  .menuToggleContainer {
-    display: none;
-  }
-}
+:root {
+  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-primary-top-nav-color: var(--skeleton-color-white);
+  --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
+  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
+  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
+  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
+  --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
+  --conduction-primary-top-nav-toggle-icon-size: 24px;
+  --conduction-primary-top-nav-mobile-logo-padding: 18px;
+  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
+}
+
+.container {
+  width: 100%;
+}
+
+.menuToggleContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.menuToggleContainer > .menuToggle {
+  all: unset;
+  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
+  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
+}
+
+.menuToggleContainer > .menuToggle:hover {
+  cursor: pointer;
+}
+
+.primary {
+  display: none;
+}
+
+.primary.isOpen {
+  display: block;
+}
+
+.menuToggleContainer {
+  width: 100%;
+}
+
+.primary {
+  font-weight: 500;
+  width: 100%;
+  background-color: var(--conduction-primary-top-nav-background-color);
+}
+
+.primary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  padding-inline-start: unset;
+  align-items: center;
+  max-height: 80vh;
+  overflow-y: scroll;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  position: relative;
+  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
+  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
+  padding-block-start: var(--conduction-primary-top-nav-item-padding);
+  padding-block-end: var(--conduction-primary-top-nav-item-padding);
+}
+
+.li:hover {
+  background-color: var(--conduction-primary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-primary-top-nav-background-color-active);
+  box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
+}
+
+.primary .link {
+  display: block;
+  text-decoration: none;
+  color: var(--conduction-primary-top-nav-color);
+}
+
+.primary .li:hover .link {
+  color: var(--conduction-primary-top-nav-color-hover);
+}
+
+.primary .li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
+.dropdown {
+  left: 0;
+  top: 100%;
+  padding: 0;
+  width: 100%;
+  display: block;
+  list-style-type: none;
+  background-color: var(--conduction-primary-top-nav-dropdown-background-color);
+  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+}
+
+.primary .dropdown .li .link {
+  color: var(--conduction-primary-top-nav-dropdown-color);
+}
+
+.dropdown .li:hover {
+  background: var(--conduction-primary-top-nav-dropdown-background-color-hover);
+}
+
+.dropdown > li {
+  padding-inline-start: var(--web-app-size-md);
+}
+
+.label {
+  overflow: hidden;
+  max-width: 37ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label > :not(:last-child) {
+  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
+}
+
+@media only screen and (min-width: 992px) {
+  .container {
+    width: fit-content;
+  }
+
+  .primary {
+    display: block;
+    width: fit-content;
+  }
+
+  .ul {
+    display: flex;
+    overflow-y: unset;
+  }
+
+  .dropdown {
+    position: absolute;
+    display: none;
+  }
+
+  .menuToggleContainer {
+    display: none;
+  }
+}