@conduction/components 1.0.26 → 1.0.29

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

@@ -0,0 +1,60 @@
+: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: var(--skeleton-color-secondary-5);
+  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
+}
+
+.primary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  position: relative;
+}
+
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-primary-top-nav-background-color);
+}
+
+.primary .link {
+  display: block;
+  color: var(--conduction-primary-top-nav-color);
+  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);
+}
+
+.primary .li:hover {
+  background-color: var(--conduction-primary-top-nav-background-color-hover);
+}
+
+.primary .li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
+.dropdown {
+  left: 0;
+  padding: 0;
+  width: 100%;
+  display: none;
+  position: absolute;
+  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);
+}

package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Link } from "@gemeente-denhaag/components-react";
+import * as styles from "./PrimaryTopNav.module.css";
+import clsx from "clsx";
+
+interface ITopNavItem {
+  label: string;
+  icon?: JSX.Element;
+  handleClick?: () => any;
+  subItems?: {
+    label: string;
+    icon?: JSX.Element;
+    handleClick?: () => any;
+  }[];
+}
+
+export interface TopNavProps {
+  items: ITopNavItem[];
+  layoutClassName?: string;
+}
+
+export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
+  return (
+    <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
+      <nav className={styles.primary}>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, handleClick, subItems }, idx) => (
+            <li className={styles.li} key={idx}>
+              <div onClick={handleClick}>
+                <Link className={styles.link} icon={icon} iconAlign="start">
+                  {label}
+                </Link>
+              </div>
+
+              {subItems && (
+                <ul className={styles.dropdown}>
+                  {subItems.map(({ label, icon, handleClick }, idx) => (
+                    <li key={idx} className={styles.li} onClick={handleClick}>
+                      <Link className={styles.link} icon={icon} iconAlign="start">
+                        {label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};

package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

@@ -0,0 +1,43 @@
+:root {
+  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
+  --conduction-secondary-top-nav-color: var(--skeleton-color-white);
+  --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
+  --conduction-secondary-top-nav-background-color-hover: var(--skeleton-color-secondary-3);
+  --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
+}
+
+.secondary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  padding-inline-start: var(--conduction-secondary-top-nav-item-padding);
+  padding-inline-end: var(--conduction-secondary-top-nav-item-padding);
+  padding-block-start: var(--conduction-secondary-top-nav-item-padding);
+  padding-block-end: var(--conduction-secondary-top-nav-item-padding);
+}
+
+.secondary {
+  font-weight: var(--conduction-secondary-top-nav-font-weight);
+  width: fit-content;
+  font-size: var(--conduction-secondary-top-nav-font-size);
+  background-color: var(--conduction-secondary-top-nav-background-color);
+}
+
+.secondary .link {
+  color: var(--conduction-secondary-top-nav-color);
+}
+
+.secondary .li:hover {
+  background-color: var(--conduction-secondary-top-nav-background-color-hover);
+}

package/src/components/topNav/{TopNav.tsx → secondaryTopNav/SecondaryTopNav.tsx}

@@ -1,6 +1,6 @@
 import * as React from "react";
+import * as styles from "./SecondaryTopnav.module.css";
 import { Link } from "@gemeente-denhaag/components-react";
-import * as styles from "./TopNav.module.css";
 import clsx from "clsx";
 
 interface TopNavProps {
@@ -8,24 +8,6 @@ interface TopNavProps {
   layoutClassName?: string;
 }
 
-export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
-  return (
-    <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
-      <nav className={styles.primary}>
-        <ul className={styles.ul}>
-          {items.map(({ label, icon, handleClick }, idx) => (
-            <li className={styles.li} key={idx} onClick={handleClick}>
-              <Link className={styles.link} icon={icon} iconAlign="start">
-                {label}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </div>
-  );
-};
-
 export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
   return (
     <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>

package/src/index.ts

@@ -27,7 +27,7 @@ import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
-import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
+import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
 import { Tag } from "./components/tag/Tag";
 import {
   NotificationPopUpController,

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-interface DetailsCardProps {
-    title: string;
-    introduction?: string;
-    link: {
-        href: string;
-        label: string;
-    };
-    tags?: string[];
-    subHeader?: string;
-    layoutClassName?: string;
-}
-export declare const DetailsCard: React.FC<DetailsCardProps>;
-export {};

package/lib/components/card/detailsCard/DetailsCard.js

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

package/lib/components/card/detailsCard/DetailsCard.module.css

@@ -1,48 +0,0 @@
-.container {
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: var(--nlportal-document-border-radius);
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  padding-inline-start: var(--nlportal-space-inline-lg);
-  padding-inline-end: var(--nlportal-space-inline-lg);
-  padding-block-start: var(--nlportal-space-block-lg);
-  padding-block-end: var(--nlportal-space-block-lg);
-  border: var(--nlportal-document-border, 1px solid);
-}
-
-.content > *:not(:last-child) {
-  margin-block-end: var(--nlportal-space-block-md);
-}
-
-.title {
-  font-size: var(--denhaag-typography-scale-xl-font-size);
-  font-weight: var(--conduction-image-and-details-card-title-font-weight);
-}
-
-.subHeader {
-  color: var(--denhaag-color-grey-3);
-  font-size: var(--denhaag-typography-scale-s-font-size);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
-}
-
-.introduction {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: var(
-    --conduction-image-and-details-card-introduction-lines-clamp
-  );
-  -webkit-box-orient: vertical;
-}
-
-.link {
-  display: flex;
-  justify-content: flex-end;
-}

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

@@ -1,10 +0,0 @@
-import * as React from "react";
-interface DownloadCardProps {
-    icon: JSX.Element;
-    label: string;
-    sizeKb: string;
-    downloadLabel: string;
-    layoutClassName?: string;
-}
-export declare const DownloadCard: React.FC<DownloadCardProps>;
-export {};

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

@@ -1,8 +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/components-react";
-import clsx from "clsx";
-export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel }) => {
-    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: downloadLabel })] }));
-};

package/lib/components/card/downloadCard/DownloadCard.module.css

@@ -1,23 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: var(--nlportal-document-border, 1px solid);
-  border-radius: var(--nlportal-document-border-radius);
-  padding-inline-end: var(--nlportal-space-inline-md);
-}
-
-.content {
-  display: flex;
-  align-items: center;
-}
-
-.content > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
-}
-
-.icon {
-  padding-inline: var(--nlportal-space-inline-md);
-  padding-block: var(--nlportal-space-block-md);
-  background-color: var(--nlportal-document-icon-background-color);
-}

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

@@ -1,13 +0,0 @@
-import * as React from "react";
-interface HorizontalImageCardProps {
-    iconOrImage: JSX.Element;
-    title: string;
-    link: {
-        label: string;
-        href: string;
-    };
-    layoutClassName?: string;
-    external?: boolean;
-}
-export declare const HorizontalImageCard: React.FC<HorizontalImageCardProps>;
-export {};

package/lib/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/components-react";
-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/lib/components/card/horizontalImageCard/HorizontalImageCard.module.css

@@ -1,26 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--denhaag-color-grey-1);
-  border-radius: var(--nlportal-border-radius);
-}
-
-.link {
-  display: flex;
-  flex-direction: column;
-}
-
-.imageOrIconContainer > :first-child {
-  width: var(--conduction-horizontal-image-card-icon-size);
-  height: var(--conduction-horizontal-image-card-icon-size);
-
-  padding-inline-start: var(--nlportal-space-inline-md);
-  padding-inline-end: var(--nlportal-space-inline-md);
-  padding-block-start: var(--nlportal-space-block-md);
-  padding-block-end: var(--nlportal-space-block-md);
-}
-
-.title {
-  font-size: var(--conduction-horizontal-image-card-font-size);
-}

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-interface ImageAndDetailsCardProps {
-    title: string;
-    image: JSX.Element;
-    introduction: string;
-    link: {
-        href: string;
-        label: string;
-    };
-    subHeader?: string;
-    layoutClassName?: string;
-}
-export declare const ImageAndDetailsCard: React.FC<ImageAndDetailsCardProps>;
-export {};

package/lib/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/components-react";
-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/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

@@ -1,59 +0,0 @@
-.container {
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: var(--nlportal-document-border-radius);
-}
-
-.image {
-  height: var(--conduction-image-and-details-card-image-height);
-}
-
-.image > :first-child {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  padding-inline-start: var(--nlportal-space-inline-lg);
-  padding-inline-end: var(--nlportal-space-inline-lg);
-  padding-block-start: var(--nlportal-space-block-lg);
-  padding-block-end: var(--nlportal-space-block-lg);
-  border: var(--nlportal-document-border, 1px solid);
-  height: calc(
-    100% - var(--conduction-image-and-details-card-image-height) -
-      var(--nlportal-space-block-lg) - var(--nlportal-space-block-lg) - 2px
-  ); /* height = 100% - imageHeight - padding - border */
-}
-
-.content > *:not(:last-child) {
-  margin-block-end: var(--nlportal-space-block-md);
-}
-
-.title {
-  font-size: var(--denhaag-typography-scale-xl-font-size);
-  font-weight: var(--conduction-image-and-details-card-title-font-weight);
-}
-
-.subHeader {
-  color: var(--denhaag-color-grey-3);
-  font-size: var(--denhaag-typography-scale-s-font-size);
-}
-
-.introduction {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: var(
-    --conduction-image-and-details-card-introduction-lines-clamp
-  );
-  -webkit-box-orient: vertical;
-}
-
-.link {
-  display: flex;
-  justify-content: flex-end;
-  margin-block-start: auto;
-}

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

@@ -1,7 +0,0 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
-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 };

package/lib/components/card/index.js

@@ -1,7 +0,0 @@
-import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
-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 };

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

@@ -1,7 +0,0 @@
-import * as React from "react";
-interface InfoCardProps {
-    title: string;
-    content: JSX.Element | string;
-}
-export declare const InfoCard: React.FC<InfoCardProps>;
-export {};

package/lib/components/card/infoCard/InfoCard.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./InfoCard.module.css";
-export const InfoCard = ({ title, content }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.title, children: title }), _jsx("div", { className: styles.content, children: content })] }));
-};

package/lib/components/card/infoCard/InfoCard.module.css

@@ -1,37 +0,0 @@
-:root {
-  --conduction-info-card-background-color: #f2f2f2;
-  --conduction-info-card-border-radius: 3px;
-  --conduction-info-card-title-weight: bold;
-  --conduction-info-card-title-font-size: 24px;
-  --conduction-info-card-title-color: #000000;
-  --conduction-info-card-content-color: #000000;
-  --conduction-info-card-padding: 16px;
-  --conduction-info-card-content-margin: 8px;
-}
-
-.container {
-  background-color: var(--conduction-info-card-background-color);
-  border-radius: var(--conduction-info-card-border-radius);
-  padding-inline-start: var(--conduction-info-card-padding);
-  padding-inline-end: var(--conduction-info-card-padding);
-  padding-block-start: var(--conduction-info-card-padding);
-  padding-block-end: var(--conduction-info-card-padding);
-}
-
-.container > * {
-  display: block;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--conduction-info-card-content-margin);
-}
-
-.container > .title {
-  font-weight: var(--conduction-info-card-title-weight);
-  font-size: var(--conduction-info-card-title-font-size);
-  color: var(--conduction-info-card-title-color);
-}
-
-.content {
-  color: var(--conduction-info-card-content-color);
-}

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

@@ -1,19 +0,0 @@
-import * as React from "react";
-export interface RichContentCardProps {
-    link: {
-        label: string;
-        href: string;
-    };
-    labelsWithIcon: {
-        label: string;
-        icon: JSX.Element;
-    }[];
-    tags: string[];
-    contentLinks?: {
-        title: string;
-        subTitle: string;
-        href: string;
-    }[];
-    linkIsExternal?: boolean;
-}
-export declare const RichContentCard: React.FC<RichContentCardProps>;

package/lib/components/card/richContentCard/RichContentCard.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-import * as styles from "./RichContentCard.module.css";
-import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-import { Tag } from "../../tag/Tag";
-export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
-};
-const LabelWithIcon = ({ label, icon }) => {
-    return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
-};
-const ContentLink = ({ title, subTitle, href }) => {
-    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
-};

package/lib/components/card/richContentCard/RichContentCard.module.css

@@ -1,89 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  border: var(--nlportal-document-border, 1px solid);
-  border-radius: var(--nlportal-border-radius);
-
-  padding-inline-start: var(--nlportal-space-inline-md);
-  padding-inline-end: var(--nlportal-space-inline-md);
-  padding-block-start: var(--nlportal-space-block-md);
-  padding-block-end: var(--nlportal-space-block-xl);
-}
-
-.container > *:not(.link):not(:last-child) {
-  margin-block-end: var(--nlportal-space-block-md);
-}
-
-.link {
-  margin-block-end: var(--nlportal-space-block-xs);
-}
-
-.link > :first-child {
-  display: flex;
-}
-
-.labelsWithIcon {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.labelsWithIcon > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-block-md);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
-}
-
-.contentLinks > *:not(:last-child):not(hr) {
-  margin-block-end: var(--nlportal-space-block-xs);
-}
-
-/* Component: LabelWithIcon */
-.labelWithIcon {
-  display: flex;
-  align-items: center;
-  color: var(--denhaag-color-grey-3);
-}
-
-.labelWithIcon > .labelWithIcon_icon > svg {
-  height: var(--conduction-rich-card-label-with-icon-icon-size);
-  width: var(--conduction-rich-card-label-with-icon-icon-size);
-  margin-inline-end: var(--nlportal-space-inline-xs);
-}
-
-.labelWithIcon > .labelWithIcon_label {
-  font-size: var(--conduction-rich-card-label-with-icon-label-size);
-}
-
-/* Content Link */
-.contentLink {
-  display: flex;
-  padding-block-start: var(--nlportal-space-block-xs);
-  padding-block-end: var(--nlportal-space-block-xs);
-  text-decoration: none !important;
-}
-
-.contentLink > span {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.contentLink:hover {
-  cursor: pointer;
-}
-
-.contentLink_content {
-  display: flex;
-  flex-direction: column;
-}
-
-.contentLink_title {
-  font-size: var(--conduction-content-link-font-size);
-}
-
-.contentLink_subTitle {
-  font-size: var(--conduction-content-link-font-size);
-  color: var(--denhaag-color-grey-3);
-}

package/lib/components/container/Container.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-interface ContainerProps {
-    layoutClassName?: string;
-}
-export declare const Container: React.FC<ContainerProps>;
-export {};