@conduction/components 2.2.1 → 2.2.2

package/README.md

@@ -4,6 +4,13 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.2:
+    - Removed Den Haag Textfield dependencies.
+    - Removed Den Haag SideNav dependencies.
+    - Removed Den Haag Textarea dependencies.
+    - Removed Den Haag Process Steps dependencies.
+    - Removed Den Haag Form Field dependencies.
+    - Removed Den Haag Button dependencies.
   - 2.2.1: Removed Den Haag icon dependencies and redundant RichContentCard.
   - 2.2.0:
     - Removed Den Haag designTokensComponent.

package/lib/components/Pagination/Pagination.js

@@ -2,11 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./Pagination.module.css";
 import clsx from "clsx";
 import ReactPaginate from "react-paginate";
-import Button from "@gemeente-denhaag/button";
+import { Button } from "@utrecht/component-library-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 export const Pagination = ({ totalPages, currentPage, setCurrentPage, layoutClassName }) => {
     if (totalPages < 1)
         return _jsx(_Fragment, {}); // no pages available
-    return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
+    return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextClassName: styles.next, previousClassName: styles.previous, nextLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
 };

package/lib/components/Pagination/Pagination.module.css

@@ -59,7 +59,7 @@
   user-select: none;
 }
 
-.container > li > a {
+.container > li:not(.previous):not(.next) > a {
   color: var(--conduction-pagination-item-color);
   background-color: var(--conduction-pagination-item-background-color);
   border-radius: var(--conduction-pagination-item-border-radius);
@@ -99,7 +99,7 @@
   cursor: pointer;
 }
 
-.container > li:hover:not(.disabled):not(.currentPage) > a {
+.container > li:hover:not(.disabled):not(.currentPage):not(.next):not(.previous) > a {
   color: var(--conduction-pagination-page-hover-color);
   background-color: var(--conduction-pagination-page-hover-background-color);
   text-decoration: var(--conduction-pagination-page-hover-text-decoration);

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

@@ -2,8 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Controller } from "react-hook-form";
-import { Button } from "@gemeente-denhaag/button";
-import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, } from "@utrecht/component-library-react/dist/css-module";
+import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, Textbox, Button, } from "@utrecht/component-library-react/dist/css-module";
 import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -38,5 +37,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(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _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" })] })] }));
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _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), appearance: currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button", 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(Textbox, { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx(Textbox, { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
 };

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as styles from "./NotificationPopUp.module.css";
 import ReactDOM from "react-dom";
-import { Button } from "@gemeente-denhaag/button";
 import clsx from "clsx";
-import { Heading3, Link, Paragraph } from "@utrecht/component-library-react";
+import { Heading3, Link, Paragraph, Button } from "@utrecht/component-library-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight, faClose } from "@fortawesome/free-solid-svg-icons";
 export const NotificationPopUp = ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }) => {
@@ -18,7 +17,7 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
             setAnimationVisible(true);
         }, animationDuration);
     };
-    const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), className: secondaryButton.layoutClassName, children: _jsxs(Link, { className: styles.link, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsx(Button, { icon: primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), onClick: () => handleClick(primaryButton.handleClick), className: primaryButton.layoutClassName, children: primaryButton.label })] })] }));
+    const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), className: secondaryButton.layoutClassName, children: _jsxs(Link, { className: styles.link, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsxs(Button, { onClick: () => handleClick(primaryButton.handleClick), className: clsx(styles.button, primaryButton.layoutClassName), children: [primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), primaryButton.label] })] })] }));
     return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
 };
 export const NotificationPopUpController = () => {

package/lib/components/notificationPopUp/NotificationPopUp.module.css

@@ -32,6 +32,11 @@
   margin-inline-end: var(--skeleton-size-md);
 }
 
+.button {
+  display: flex;
+  gap: 8px;
+}
+
 .visible {
   animation-name: fadeInBottom;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -23,12 +23,6 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@gemeente-denhaag/button": "0.2.3-alpha.205",
-    "@gemeente-denhaag/form-field": "0.1.1-alpha.98",
-    "@gemeente-denhaag/process-steps": "0.1.0-alpha.51",
-    "@gemeente-denhaag/sidenav": "0.1.0-alpha.40",
-    "@gemeente-denhaag/textarea": "0.1.1-alpha.95",
-    "@gemeente-denhaag/textfield": "0.2.3-alpha.205",
     "@utrecht/component-library-react": "^1.0.0-alpha.319",
     "clsx": "^1.1.1",
     "gatsby": "^4.11.1",

package/src/components/Pagination/Pagination.module.css

@@ -59,7 +59,7 @@
   user-select: none;
 }
 
-.container > li > a {
+.container > li:not(.previous):not(.next) > a {
   color: var(--conduction-pagination-item-color);
   background-color: var(--conduction-pagination-item-background-color);
   border-radius: var(--conduction-pagination-item-border-radius);
@@ -99,7 +99,7 @@
   cursor: pointer;
 }
 
-.container > li:hover:not(.disabled):not(.currentPage) > a {
+.container > li:hover:not(.disabled):not(.currentPage):not(.next):not(.previous) > a {
   color: var(--conduction-pagination-page-hover-color);
   background-color: var(--conduction-pagination-page-hover-background-color);
   text-decoration: var(--conduction-pagination-page-hover-text-decoration);

package/src/components/Pagination/Pagination.tsx

@@ -3,7 +3,7 @@ import * as styles from "./Pagination.module.css";
 import clsx from "clsx";
 
 import ReactPaginate from "react-paginate";
-import Button from "@gemeente-denhaag/button";
+import { Button } from "@utrecht/component-library-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
@@ -29,6 +29,8 @@ export const Pagination: React.FC<PaginationProps> = ({ totalPages, currentPage,
       disableInitialCallback
       marginPagesDisplayed={2}
       breakLabel="..."
+      nextClassName={styles.next}
+      previousClassName={styles.previous}
       nextLabel={
         <Button className={styles.button}>
           <FontAwesomeIcon icon={faChevronRight} />

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

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
-import { Button } from "@gemeente-denhaag/button";
 import {
   Table,
   TableBody,
@@ -10,6 +9,8 @@ import {
   TableHeaderCell,
   TableHeader,
   TableRow,
+  Textbox,
+  Button,
 } from "@utrecht/component-library-react/dist/css-module";
 import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
@@ -136,7 +137,7 @@ const KeyValueComponent = ({
                         <Button
                           {...{ disabled }}
                           onClick={() => handleCopyToClipboard(keyValue.value, idx)}
-                          variant={currentCopyIdx === idx ? "secondary-action" : "primary-action"}
+                          appearance={currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button"}
                         >
                           <FontAwesomeIcon icon={faCopy} />
                         </Button>
@@ -160,22 +161,20 @@ const KeyValueComponent = ({
       )}
 
       <div className={styles.form}>
-        <input
+        <Textbox
           type="text"
           placeholder="Key"
           value={currentKey}
           ref={currentKeyRef}
-          className="denhaag-textfield__input"
           onChange={(e) => setCurrentKey(e.target.value)}
           {...{ disabled }}
         />
 
-        <input
+        <Textbox
           type="text"
           placeholder="Value"
           value={currentValue}
           ref={currentValueRef}
-          className="denhaag-textfield__input"
           onChange={(e) => setCurrentValue(e.target.value)}
           {...{ disabled }}
         />

package/src/components/notificationPopUp/NotificationPopUp.module.css

@@ -32,6 +32,11 @@
   margin-inline-end: var(--skeleton-size-md);
 }
 
+.button {
+  display: flex;
+  gap: 8px;
+}
+
 .visible {
   animation-name: fadeInBottom;
 }

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import * as styles from "./NotificationPopUp.module.css";
 import ReactDOM from "react-dom";
-import { Button } from "@gemeente-denhaag/button";
 import clsx from "clsx";
-import { Heading3, Link, Paragraph } from "@utrecht/component-library-react";
+import { Heading3, Link, Paragraph, Button } from "@utrecht/component-library-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight, faClose } from "@fortawesome/free-solid-svg-icons";
 
@@ -69,10 +68,10 @@ export const NotificationPopUp = ({
         )}
 
         <Button
-          icon={primaryButton.icon ?? <FontAwesomeIcon icon={faArrowRight} />}
           onClick={() => handleClick(primaryButton.handleClick)}
-          className={primaryButton.layoutClassName}
+          className={clsx(styles.button, primaryButton.layoutClassName)}
         >
+          {primaryButton.icon ?? <FontAwesomeIcon icon={faArrowRight} />}
           {primaryButton.label}
         </Button>
       </div>

package/src/components/card/downloadCard/DownloadCard.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./DownloadCard.module.css";
-import { DownloadIcon } from "@gemeente-denhaag/icons";
-import { Link } from "@gemeente-denhaag/link";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-export const DownloadCard = ({ icon, label, sizeKb, layoutClassName }) => {
-    const { t } = useTranslation();
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: t("Download") })] }));
-};

package/src/components/card/horizontalImageCard/HorizontalImageCard.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./HorizontalImageCard.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.imageOrIconContainer, children: iconOrImage }), _jsxs("div", { className: styles.link, children: [_jsx("div", { className: styles.title, children: title }), _jsx(Link, { icon: external ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label })] })] }));
-};

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./ImageAndDetailsCard.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
-export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] })] }));
-};

package/src/components/card/index.js

@@ -1,5 +0,0 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
-import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };

package/src/components/container/Container.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./Container.module.css";
-export const Container = ({ children }) => _jsx("div", { className: styles.container, children: children });

package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
- *
- * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
- *
- * Note: we do not use css modules here due to this component being a wrapper
- */
-import { Link } from "gatsby";
-import "./Breadcrumbs.css";
-export const Breadcrumbs = ({ crumbs }) => {
-  return _jsx("nav", {
-    "aria-label": "Breadcrumb",
-    className: "denhaag-breadcrumb",
-    children: _jsx("ol", {
-      className: "denhaag-breadcrumb__list",
-      itemScope: true,
-      itemType: "https://schema.org/BreadcrumbList",
-      children: crumbs.map((crumb, idx) => {
-        if (crumbs.length !== idx + 1) {
-          return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
-        }
-        return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
-      }),
-    }),
-  });
-};
-const CrumbItem = ({ pathname, crumbLabel, idx }) =>
-  _jsx("li", {
-    className: "denhaag-breadcrumb__item",
-    itemProp: "itemListElement",
-    itemScope: true,
-    itemType: "https://schema.org/ListItem",
-    children: _jsxs(Link, {
-      className: "denhaag-breadcrumb__link",
-      to: pathname,
-      itemProp: "item",
-      children: [
-        _jsx("span", {
-          className: "denhaag-breadcrumb__text",
-          itemProp: "name",
-          children: crumbLabel,
-        }),
-        _jsx("svg", {
-          "aria-hidden": "true",
-          className: "denhaag-icon",
-          fill: "none",
-          focusable: "false",
-          height: "1em",
-          shapeRendering: "auto",
-          viewBox: "0 0 24 24",
-          width: "1em",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: _jsx("path", {
-            d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z",
-            fill: "currentColor",
-          }),
-        }),
-        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
-      ],
-    }),
-  });
-const LastCrumbItem = ({ pathname, crumbLabel, idx }) =>
-  _jsx("li", {
-    "aria-current": "page",
-    className: "denhaag-breadcrumb__item",
-    itemProp: "itemListElement",
-    itemScope: true,
-    itemType: "https://schema.org/ListItem",
-    children: _jsxs(Link, {
-      "aria-current": "page",
-      className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current",
-      to: pathname,
-      itemProp: "item",
-      children: [
-        _jsx("span", {
-          className: "denhaag-breadcrumb__text",
-          itemProp: "name",
-          children: crumbLabel,
-        }),
-        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
-      ],
-    }),
-  });

package/src/components/formFields/index.js

@@ -1,4 +0,0 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
-import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/src/components/formFields/input.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { TextField } from "@gemeente-denhaag/textfield";
-import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
-export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
-    const [showPassword, setShowPassword] = React.useState(false);
-    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
-};
-export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));

package/src/components/formFields/textarea.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TextArea } from "@gemeente-denhaag/textarea";
-export const Textarea = ({ name, validation, register, errors }) => (_jsx(TextArea, { ...register(name, { ...validation }), invalid: errors[name] }));

package/src/components/formFields/types.js

@@ -1 +0,0 @@
-export {};

package/src/components/imageDivider/ImageDivider.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import * as styles from "./imageDivider.module.css";
-export const ImageDivider = ({ image, layoutClassName }) => {
-    return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
-};

package/src/components/logo/Logo.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { Link } from "gatsby";
-import * as styles from "./Logo.module.css";
-export const AuthenticatedLogo = ({ layoutClassName, href }) => {
-    return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.authenticatedLogo, styles.logo, layoutClassName) }) }));
-};
-export const UnauthenticatedLogo = ({ layoutClassName, href }) => {
-    return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName) }) }));
-};

package/src/components/metaIcon/MetaIcon.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./MetaIcon.module.css";
-export const MetaIcon = ({ icon, label, value }) => (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.icon, children: icon }), _jsx("span", { children: label }), _jsx("span", { className: styles.value, children: value })] }));

package/src/components/privateRoute/PrivateRoute.js

@@ -1,15 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { navigate } from "gatsby";
-export const PrivateRoute = ({ children, isLoggedIn }) => {
-    const [authenticated, setAuthenticated] = React.useState(false);
-    React.useEffect(() => {
-        if (!isLoggedIn && window.location.pathname !== "/login") {
-            navigate("/login");
-        }
-        isLoggedIn && setAuthenticated(true);
-    }, [isLoggedIn]);
-    if (!authenticated)
-        return _jsx(_Fragment, {});
-    return _jsx(_Fragment, { children: children });
-};