@conduction/components 2.2.26 → 2.2.28

package/src/components/formFields/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import * as styles from "./Checkbox.module.css";
+import * as styles from "./checkbox.module.css";
 import { IReactHookFormProps } from "./../types";
 
 export interface ICheckboxProps {
@@ -16,12 +16,13 @@ export const InputCheckbox = ({
   defaultChecked,
   disabled,
 }: ICheckboxProps & IReactHookFormProps): JSX.Element => (
-  <div className={styles.container}>
+  <div>
     <input
       type="checkbox"
       id={`checkbox${name}`}
       {...{ defaultChecked, disabled }}
       {...register(name, { ...validation })}
+      className={styles.checkbox}
     />
     <label htmlFor={`checkbox${name}`}>{label}</label>
   </div>

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
+import clsx from "clsx";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 import {
@@ -12,7 +13,6 @@ import {
   Textbox,
   Button,
 } from "@utrecht/component-library-react/dist/css-module";
-import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
@@ -55,7 +55,7 @@ export const CreateKeyValue = ({
         return (
           <>
             <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />
-            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
         );
       }}

package/src/components/formFields/input.tsx

@@ -29,10 +29,10 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
         type="password"
         {...{ disabled, placeholder }}
         {...register(name, { ...validation })}
-        invalid={errors[name]}
+        invalid={!!errors[name]}
         aria-label={ariaLabel}
       />
-      {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+      {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
     </>
   );
 };
@@ -54,10 +54,10 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
       type="text"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
-      invalid={errors[name]}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -79,10 +79,10 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
       required={!!validation?.required}
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
-      invalid={errors[name]}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -103,10 +103,10 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
       type="url"
       {...{ defaultValue, disabled, placeholder, icon }}
       {...register(name, { ...validation })}
-      invalid={errors[name]}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -126,11 +126,11 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
     <Textbox
       type="number"
       {...{ defaultValue, disabled, placeholder, icon }}
-      {...register(name, { ...validation, valueAsNumber: true })}
-      invalid={errors[name]}
+      {...register(name, { ...{ validation }, valueAsNumber: true })}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 
@@ -151,11 +151,11 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
       type="number"
       step=".01"
       {...{ disabled, placeholder, icon, defaultValue }}
-      {...register(name, { ...validation, valueAsNumber: true })}
-      invalid={errors[name]}
+      {...register(name, { ...{ validation }, valueAsNumber: true })}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );
 

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

@@ -1,10 +1,10 @@
 import * as React from "react";
 import * as styles from "./select.module.css";
-import { Control, Controller, FieldValues } from "react-hook-form";
-import ReactSelect, { MenuPlacement, StylesConfig } from "react-select";
+import clsx from "clsx";
 import CreatableSelect from "react-select/creatable";
+import ReactSelect, { MenuPlacement, StylesConfig } from "react-select";
+import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
-import clsx from "clsx";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
 
 interface ISelectProps {
@@ -104,7 +104,7 @@ export const SelectMultiple = ({
               styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
-            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
         );
       }}
@@ -149,7 +149,7 @@ export const SelectCreate = ({
               menuPlacement={menuPlacement}
               styles={selectStyles}
             />
-            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
         );
       }}
@@ -194,7 +194,7 @@ export const SelectSingle = ({
               styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
-            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
         );
       }}

package/src/components/formFields/textarea.tsx

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import { IReactHookFormProps } from "./types";
 import { ErrorMessage } from "./errorMessage/ErrorMessage";
 import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/dist/css-module";
@@ -24,9 +25,9 @@ export const Textarea = ({
     <UtrechtTextarea
       {...register(name, { ...validation })}
       {...{ disabled, defaultValue }}
-      invalid={errors[name]}
+      invalid={!!errors[name]}
       aria-label={ariaLabel}
     />
-    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
   </>
 );

package/tsconfig.json

@@ -3,7 +3,10 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -14,5 +17,5 @@
   },
   "hooks": ["copy-files"],
   "include": ["src", "src/**/*.css"],
-  "exclude": ["node_modules", "**/__tests__/*"]
-}
+  "exclude": ["node_modules", "**/__tests__/*", "lib/**/*"]
+}

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

@@ -1,158 +0,0 @@
-:root {
-  --conduction-pagination-container-background-color: unset;
-  --conduction-pagination-container-padding-inline-start: 0px;
-  --conduction-pagination-container-padding-inline-end: 0px;
-  --conduction-pagination-container-padding-block-start: 0px;
-  --conduction-pagination-container-padding-block-end: 0px;
-
-  --conduction-pagination-item-gap: 8px;
-  --conduction-pagination-item-color: #000000;
-  --conduction-pagination-item-background-color: #ffffff;
-  --conduction-pagination-item-border-radius: 4px;
-  --conduction-pagination-item-padding-inline-start: 8px;
-  --conduction-pagination-item-padding-inline-end: 8px;
-  --conduction-pagination-item-padding-block-start: 8px;
-  --conduction-pagination-item-padding-block-end: 8px;
-  --conduction-pagination-item-font-size: var(--skeleton-font-size-md);
-  --conduction-pagination-item-font-weight: var(--skeleton-font-weight-normal);
-  --conduction-pagination-item-font-family: inherit;
-  --conduction-pagination-item-border-width: unset;
-  --conduction-pagination-item-border-style: unset;
-  --conduction-pagination-item-border-color: unset;
-
-  /* --conduction-pagination-navigation-button-background-color: #4376fc; */
-  /* --conduction-pagination-navigation-button-color: #ffffff; */
-  /* --conduction-pagination-navigation-button-border-width: 1px; */
-  /* --conduction-pagination-navigation-button-border-style: solid; */
-  /* --conduction-pagination-navigation-button-border-color: #4376fc; */
-  /* --conduction-pagination-navigation-button-border-radius: 1px; */
-  --conduction-pagination-navigation-button-padding-inline-start: 8px;
-  --conduction-pagination-navigation-button-padding-inline-end: 8px;
-  --conduction-pagination-navigation-button-padding-block-start: 0px;
-  --conduction-pagination-navigation-button-padding-block-end: 0px;
-
-  --conduction-pagination-navigation-button-disabled-color: #d1d1d1;
-  --conduction-pagination-navigation-button-disabled-background-color: #fefefe;
-  /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
-  /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
-  /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
-  /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
-
-  --conduction-pagination-navigation-button-hover-color: #d1d1d1;
-  --conduction-pagination-navigation-button-hover-background-color: #fefefe;
-  /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
-  /* --conduction-pagination-navigation-button-hover-border-style: solid; */
-  /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
-  /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
-
-  --conduction-pagination-current-page-background-color: #4376fc;
-  --conduction-pagination-current-page-color: #ffffff;
-  --conduction-pagination-current-page-font-weight: bold;
-  --conduction-pagination-current-page-text-decoration: unset;
-  --conduction-pagination-current-page-border-width: unset;
-  --conduction-pagination-current-page-border-style: unset;
-  --conduction-pagination-current-page-border-color: unset;
-
-  --conduction-pagination-page-hover-color: #4376fc;
-  --conduction-pagination-page-hover-background-color: #ffffff;
-  --conduction-pagination-page-hover-text-decoration: unset;
-  --conduction-pagination-page-hover-text-decoration-thickness: 0px;
-  --conduction-pagination-page-hover-border-width: unset;
-  --conduction-pagination-page-hover-border-style: unset;
-  --conduction-pagination-page-hover-border-color: unset;
-}
-
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  list-style-type: none;
-  gap: var(--conduction-pagination-item-gap);
-  background-color: var(--conduction-pagination-container-background-color);
-  padding-inline-start: var(--conduction-pagination-container-padding-inline-start);
-  padding-inline-end: var(--conduction-pagination-container-padding-inline-end);
-  padding-block-start: var(--conduction-pagination-container-padding-block-start);
-  padding-block-end: var(--conduction-pagination-container-padding-block-end);
-  user-select: none;
-}
-
-.container > li.currentPage > a {
-  color: var(--conduction-pagination-current-page-color);
-  background-color: var(--conduction-pagination-current-page-background-color);
-  border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
-  border-radius: var(--conduction-pagination-item-border-radius);
-  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
-  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
-  padding-block-start: var(--conduction-pagination-item-padding-block-start);
-  padding-block-end: var(--conduction-pagination-item-padding-block-end);
-  font-size: var(--conduction-pagination-item-font-size);
-  font-weight: var(--conduction-pagination-current-page-font-weight);
-  font-family: var(--conduction-pagination-item-font-family);
-  text-decoration: var(--conduction-pagination-current-page-text-decoration);
-}
-
-.container > li:not(.previous):not(.next):not(.currentPage) > a {
-  color: var(--conduction-pagination-item-color);
-  background-color: var(--conduction-pagination-item-background-color);
-  border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
-  border-radius: var(--conduction-pagination-item-border-radius);
-  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
-  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
-  padding-block-start: var(--conduction-pagination-item-padding-block-start);
-  padding-block-end: var(--conduction-pagination-item-padding-block-end);
-  font-size: var(--conduction-pagination-item-font-size);
-  font-weight: var(--conduction-pagination-item-font-weight);
-  font-family: var(--conduction-pagination-item-font-family);
-}
-
-.button {
-  pointer-events: none;
-}
-
-.disabled:hover,
-.currentPage:hover {
-  cursor: not-allowed;
-}
-
-.container > li.disabled > a > .button {
-  color: var(--conduction-pagination-navigation-button-disabled-color) !important;
-  background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
-  border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width));
-  border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style));
-  border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color));
-  border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius));
-}
-
-.container > li:hover:not(.disabled) > a > .button {
-  color: var(--conduction-pagination-navigation-button-hover-color) !important;
-  background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
-  border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width));
-  border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style));
-  border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color));
-  border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius));
-}
-
-.container > li:hover:not(.disabled):not(.currentPage) {
-  cursor: pointer;
-}
-
-.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);
-  text-decoration-thickness: var(--conduction-pagination-page-hover-text-decoration-thickness);
-  border: var(--conduction-pagination-page-hover-border-width) var(--conduction-pagination-page-hover-border-style) var(--conduction-pagination-page-hover-border-color);
-}
-
-.button {
-  background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
-  color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
-  border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
-  border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
-  border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
-  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
-  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
-  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
-  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;
-  padding-block-end: var(--conduction-pagination-navigation-button-padding-block-end) !important;
-}

package/lib/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +0,0 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}

package/lib/components/card/cardHeader/CardHeader.module.css

@@ -1,36 +0,0 @@
-:root {
-  /* --conduction-card-header-border-bottom-width: unset;
-  --conduction-card-header-border-bottom-style: unset;
-  --conduction-card-header-border-bottom-color: unset; */
-  /* --conduction-card-header-hover-border-bottom-width: unset; */
-  /* --conduction-card-header-hover-border-bottom-style: unset; */
-  /* --conduction-card-header-hover-border-bottom-color: unset; */
-  --conduction-card-header-title-color: #000000;
-  --conduction-card-header-date-color: #000000;
-  --conduction-card-header-date-font-size: 16px;
-  --conduction-card-header-date-font-weight: 100;
-  --conduction-card-header-date-margin-block-end: 8px;
-}
-
-.container {
-  border-bottom-width: var(--conduction-card-header-border-bottom-width);
-  border-bottom-style: var(--conduction-card-header-border-bottom-style);
-  border-bottom-color: var(--conduction-card-header-border-bottom-color);
-}
-
-.container:hover {
-  border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
-  border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
-  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
-}
-
-.title > * {
-  color: var(--conduction-card-header-title-color) !important;
-}
-
-.date {
-  color: var(--conduction-card-header-date-color);
-  font-size: var(--conduction-card-header-date-font-size);
-  font-weight: var(--conduction-card-header-date-font-weight);
-  margin-block-end: var(--conduction-card-header-date-margin-block-end);
-}

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

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

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

@@ -1,56 +0,0 @@
-:root {
-  --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
-  --conduction-details-card-introduction-lines-clamp: 3;
-  --conduction-details-card-icon-gap: 8px;
-}
-
-.container {
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-  border: var(--conduction-details-card-border);
-}
-
-.content > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.title {
-  font-size: var(--skeleton-font-size-xl);
-  font-weight: var(--skeleton-font-weight-bold);
-}
-
-.subHeader {
-  color: var(--skeleton-color-grey-3);
-  font-size: var(--skeleton-font-size-sm);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
-.introduction {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: var(--conduction-details-card-introduction-lines-clamp);
-  -webkit-box-orient: vertical;
-}
-
-.link {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.icon {
-  margin-inline-end: var(--conduction-details-card-icon-gap);
-}

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

@@ -1,27 +0,0 @@
-:root {
-  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
-  --conduction-download-card-icon-gap: 8px;
-  --conduction-download-card-padding: 14px;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: var(--conduction-download-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-  padding: var(--conduction-download-card-padding);
-}
-
-.content {
-  display: flex;
-  align-items: center;
-}
-
-.content > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-sm);
-}
-
-.icon {
-  margin-inline-end: var(--conduction-download-card-icon-gap);
-}

package/lib/components/card/horizontalImageCard/HorizontalImageCard.module.css

@@ -1,38 +0,0 @@
-:root {
-  --conduction-horizontal-image-card-image-size: 52px;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.linkContainer {
-  display: flex;
-  flex-direction: column;
-  padding-block-start: var(--skeleton-size-lg);
-  padding-block-end: var(--skeleton-size-lg);
-  padding-inline-end: var(--skeleton-size-lg);
-}
-
-.imageOrIconContainer > :first-child {
-  width: var(--conduction-horizontal-image-card-image-size);
-  height: var(--conduction-horizontal-image-card-image-size);
-
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-}
-
-.link > * {
-  margin-inline-end: 8px;
-}

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

@@ -1,68 +0,0 @@
-:root {
-  --conduction-image-and-details-card-image-height: 275px;
-  --conduction-image-and-details-card-title-font-weight: bold;
-  --conduction-image-and-details-card-introduction-lines-clamp: 3;
-  --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
-  --conduction-image-and-details-icon-gap: 8px;
-}
-
-.container {
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: var(--skeleton-border-radius-md);
-}
-
-.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(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-  border: var(--conduction-image-and-details-card-border);
-  height: calc(
-    100% - var(--conduction-image-and-details-card-image-height) - var(--skeleton-size-md) - var(--skeleton-size-md) - 2px
-  ); /* height = 100% - imageHeight - padding - border */
-}
-
-.content > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.title {
-  font-size: var(--skeleton-font-size-xl);
-  font-weight: var(--skeleton-font-weight-bold);
-}
-
-.subHeader {
-  color: var(--skeleton-color-grey-3);
-  font-size: var(--skeleton-font-size-sm);
-}
-
-.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;
-}
-
-.icon {
-  margin-inline-end: var(--conduction-image-and-details-icon-gap);
-}