@conduction/components 2.2.28 → 2.2.29

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,222 @@
+.denhaag-breadcrumb {
+  --denhaag-breadcrumb-chevron-display: none;
+  --denhaag-breadcrumb-link-background-color: transparent;
+  --denhaag-breadcrumb-link-icon-content: "";
+  --denhaag-breadcrumb-link-pointer-events: bounding-box;
+  --denhaag-breadcrumb-item-display: none;
+
+  background-color: var(--denhaag-breadcrumb-background-color, transparent);
+  color: var(--denhaag-breadcrumb-color, inherit);
+  padding-block-end: var(--denhaag-breadcrumb-padding-block);
+  padding-block-start: var(--denhaag-breadcrumb-padding-block);
+  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
+  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
+}
+
+.denhaag-breadcrumb__list {
+  block-size: 100%;
+  display: flex;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
+}
+
+ol.denhaag-breadcrumb__list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.denhaag-breadcrumb__item {
+  align-items: center;
+  display: var(--denhaag-breadcrumb-item-display);
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2) {
+  --denhaag-breadcrumb-item-display: flex;
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  background: var(--denhaag-breadcrumb-link-color);
+  clip-path: path(
+    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
+  );
+  content: var(--denhaag-breadcrumb-link-icon-content);
+  height: var(
+    --denhaag-breadcrumb-link-icon-height,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  margin-inline-end: var(
+    --denhaag-breadcrumb-link-icon-margin-inline,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  width: var(--denhaag-breadcrumb-link-icon-width);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-hover-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link {
+  align-items: center;
+  color: var(--denhaag-breadcrumb-link-color, inherit);
+  display: flex;
+  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
+  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
+  position: relative;
+}
+
+.denhaag-breadcrumb__link:hover,
+.denhaag-breadcrumb__link--hover {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-hover-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link:focus,
+.denhaag-breadcrumb__link--focus {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-focus-color,
+    inherit
+  );
+
+  outline: var(
+    --denhaag-breadcrumb-link-focus-outline,
+    var(--denhaag-link-focus-outline)
+  );
+}
+
+.denhaag-breadcrumb__link--current,
+.denhaag-breadcrumb__link.denhaag-link--current,
+.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-current-color,
+    var(--denhaag-breadcrumb-color, inherit)
+  );
+
+  text-decoration: none;
+}
+
+.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
+    > .denhaag-breadcrumb__link)
+  > :first-child {
+  pointer-events: bounding-box;
+}
+
+/* SVG for the separator */
+.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
+.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
+  color: initial;
+  font-size: inherit;
+  display: var(--denhaag-breadcrumb-chevron-display);
+  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
+}
+
+[dir="rtl"]
+  .denhaag-breadcrumb__link
+  > .denhaag-breadcrumb__text
+  + .denhaag-icon,
+[dir="rtl"]
+  .denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  transform: scaleX(-1);
+}
+
+.denhaag-breadcrumb__text {
+  background-color: var(--denhaag-breadcrumb-link-background-color);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text {
+  aspect-ratio: 24/16;
+  border-radius: var(
+    --denhaag-breadcrumb-dots-border-radius,
+    var(--denhaag-border-radius)
+  );
+  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text::before {
+  color: var(--denhaag-breadcrumb-dots-color, inherit);
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  top: calc(50% - 5px);
+  vertical-align: baseline;
+}
+
+@media (min-width: 481px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-chevron-display: inline-block;
+    --denhaag-breadcrumb-link-icon-content: unset;
+    --denhaag-breadcrumb-link-pointer-events: none;
+    --denhaag-breadcrumb-padding-block: var(
+      --denhaag-breadcrumb-padding-block-md
+    );
+  }
+
+  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
+    --denhaag-breadcrumb-item-display: flex;
+  }
+}
+
+@media (min-width: 1124px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-padding-inline: 0;
+  }
+}
+
+:root {
+  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
+  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
+  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
+  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
+  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
+  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
+  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
+  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
+  --utrecht-breadcrumb-item-padding-inline-start: 14px;
+  --utrecht-breadcrumb-item-padding-inline-end: 14px;
+  --utrecht-breadcrumb-divider-inline-size: 24px;
+  --utrecht-breadcrumb-divider-content: ›;
+  --denhaag-breadcrumb-list-max-width: 67.5rem;
+  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
+  --denhaag-breadcrumb-link-icon-width: 0.875rem;
+  --denhaag-breadcrumb-link-icon-height: 0.875rem;
+  --denhaag-breadcrumb-padding-inline: 0.75rem;
+  --denhaag-breadcrumb-padding-block-md: 0.75rem;
+  --denhaag-breadcrumb-padding-block: 1rem;
+  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
+  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
+  --utrecht-breadcrumb-font-size: var(
+    --denhaag-typography-scale-base-font-size
+  );
+}

package/lib/components/displaySwitch/DisplaySwitch.module.css

@@ -0,0 +1,3 @@
+.displaySwitchButtons {
+  align-items: center;
+}

package/lib/components/formFields/checkbox/Checkbox.module.css

@@ -0,0 +1,213 @@
+:root {
+  --conduciton-input-checkbox-checkmark-url: url("data:image/svg+xml,%3Csvg id='eXTGSQIndRe1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 13 13' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cg transform='translate(-85.642166-156.631362)'%3E%3Cpath d='M86.73927,163.90021l1.92835-2.05763l4.165103,4.176559c-.692268.524-1.562158,1.361078-1.562158,2.198156L86.73927,163.90021Z' fill='%23fff' stroke-width='0'/%3E%3Cpath d='M95.2777,158.04542l2.26736,1.67416-6.27449,8.49772-1.917847-1.798161L95.2777,158.04542Z' fill='%23fff' stroke-width='0'/%3E%3C/g%3E%3C/svg%3E%0A");
+
+  --conduction-input-checkbox-color: #ffffff;
+  --conduction-input-checkbox-border-width: 1px;
+  --conduction-input-checkbox-border-style: solid;
+  --conduction-input-checkbox-border-color: #767676;
+  --conduction-input-checkbox-border-radius: 3px;
+  /* --conduction-input-checkbox-box-shadow: ; */
+
+  --conduction-input-checkbox-focus-outline-width: 2px;
+  --conduction-input-checkbox-focus-outline-style: solid;
+  --conduction-input-checkbox-focus-outline-color: #000000;
+  --conduction-input-checkbox-focus-outline-offset: 2px;
+
+  --conduction-input-checkbox-hover-color: #ffffff;
+  --conduction-input-checkbox-hover-border-width: 1px;
+  --conduction-input-checkbox-hover-border-style: solid;
+  --conduction-input-checkbox-hover-border-color: #4f4f4f;
+  --conduction-input-checkbox-hover-border-radius: 3px;
+  /* --conduction-input-checkbox-hover-box-shadow: ; */
+
+  --conduction-input-checkbox-checked-color: #0075ff;
+  --conduction-input-checkbox-checked-border-width: 1px;
+  --conduction-input-checkbox-checked-border-style: solid;
+  --conduction-input-checkbox-checked-border-color: #0075ff;
+  --conduction-input-checkbox-checked-border-radius: 3px;
+
+  --conduction-input-checkbox-checked-hover-color: #005cc8;
+  --conduction-input-checkbox-checked-hover-border-width: 1px;
+  --conduction-input-checkbox-checked-hover-border-style: solid;
+  --conduction-input-checkbox-checked-hover-border-color: #005cc8;
+  --conduction-input-checkbox-checked-hover-border-radius: 3px;
+
+  --conduction-input-checkbox-disabled-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-border-width: 1px;
+  --conduction-input-checkbox-disabled-border-style: solid;
+  --conduction-input-checkbox-disabled-border-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-border-radius: 3px;
+
+  --conduction-input-checkbox-disabled-hover-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-hover-border-width: 1px;
+  --conduction-input-checkbox-disabled-hover-border-style: solid;
+  --conduction-input-checkbox-disabled-hover-border-color: #d0d0d0;
+  --conduction-input-checkbox-disabled-hover-border-radius: 3px;
+
+  --conduction-input-checkbox-label-color: #000000;
+  --conduction-input-checkbox-label-font-size: var(--skeleton-font-size-md);
+  --conduction-input-checkbox-label-font-weight: var(--skeleton-font-weight-normal);
+  --conduction-input-checkbox-label-container-padding: 3px;
+  --conduction-input-checkbox-label-container-margin: 5px;
+  /* --conduction-input-checkbox-label-font-family: ; */
+}
+
+.checkbox {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+.checkbox + label {
+  position: relative;
+  font-size: var(--conduction-input-checkbox-label-font-size, var(--utrecht-document-font-size));
+  font-weight: var(--conduction-input-checkbox-label-font-weight, var(--utrehct-document-font-weight));
+  font-family: var(--conduction-input-checkbox-label-font-family, var(--utrecht-document-font-family));
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  color: var(--conduction-input-checkbox-label-color, var(--utrecht-document-color));
+  padding: var(--conduction-input-checkbox-label-container-padding);
+}
+
+.checkbox + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-color);
+  border-width: var(--conduction-input-checkbox-border-width);
+  border-style: var(--conduction-input-checkbox-border-style);
+  border-color: var(--conduction-input-checkbox-border-color);
+  border-radius: var(--conduction-input-checkbox-border-radius);
+  box-shadow: var(--conduction-input-checkbox-box-shadow);
+  box-sizing: border-box;
+}
+
+.checkbox:focus + label::before,
+.checkbox:hover:focus + label::before,
+.checkbox:checked:focus + label::before,
+.checkbox:checked:hover:focus + label::before {
+  outline-width: var(--conduction-input-checkbox-focus-outline-width);
+  outline-style: var(--conduction-input-checkbox-focus-outline-style);
+  outline-color: var(--conduction-input-checkbox-focus-outline-color);
+  outline-offset: var(--conduction-input-checkbox-focus-outline-offset);
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  box-sizing: border-box;
+}
+
+.checkbox:hover + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-hover-color);
+  border-width: var(--conduction-input-checkbox-hover-border-width, var(--conduction-input-checkbox-border-width));
+  border-style: var(--conduction-input-checkbox-hover-border-style, var(--conduction-input-checkbox-border-style));
+  border-color: var(--conduction-input-checkbox-hover-border-color, var(--conduction-input-checkbox-border-color));
+  border-radius: var(--conduction-input-checkbox-hover-border-radius, var(--conduction-input-checkbox-border-radius));
+  box-shadow: var(--conduction-input-checkbox-hover-box-shadow, var(--conduction-input-checkbox-box-shadow));
+}
+
+/* Checked */
+
+.checkbox:checked + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-checked-color);
+  border-width: var(--conduction-input-checkbox-checked-border-width);
+  border-style: var(--conduction-input-checkbox-checked-border-style);
+  border-color: var(--conduction-input-checkbox-checked-border-color);
+  border-radius: var(--conduction-input-checkbox-checked-border-radius);
+  box-shadow: var(--conduction-input-checkbox-checked-box-shadow);
+}
+
+.checkbox:checked:hover + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-checked-hover-color, var(--conduction-input-checkbox-checked-color));
+  border-width: var(--conduction-input-checkbox-checked-hover-border-width, var(--conduction-input-checkbox-checked-border-width));
+  border-style: var(--conduction-input-checkbox-checked-hover-border-style, var(--conduction-input-checkbox-checked-border-style));
+  border-color: var(--conduction-input-checkbox-checked-hover-border-color, var(--conduction-input-checkbox-checked-border-color));
+  border-radius: var(--conduction-input-checkbox-checked-hover-border-radius, var(--conduction-input-checkbox-checked-border-radius));
+  box-shadow: var(--conduction-input-checkbox-checked-hover-box-shadow, var(--conduction-input-checkbox-checked-box-shadow));
+}
+
+.checkbox:checked + label::after {
+  content: " ";
+  background-image: var(--conduciton-input-checkbox-checkmark-url);
+  background-repeat: no-repeat;
+  background-size: 13px 13px;
+  background-position: calc(var(--conduction-input-checkbox-label-container-padding) + var(--conduction-input-checkbox-label-container-margin)) center;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0px;
+  left: 0px;
+  top: 0px;
+  text-align: center;
+  background-color: transparent;
+  font-size: 10px;
+  height: 100%;
+  width: 100%;
+}
+
+/* Disabled */
+
+.checkbox:disabled:hover + label {
+  cursor: default;
+}
+
+.checkbox:disabled + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-disabled-color);
+  border-width: var(--conduction-input-checkbox-disabled-border-width);
+  border-style: var(--conduction-input-checkbox-disabled-border-style);
+  border-color: var(--conduction-input-checkbox-disabled-border-color);
+  border-radius: var(--conduction-input-checkbox-disabled-border-radius);
+  box-shadow: var(--conduction-input-checkbox-disabled-box-shadow);
+}
+
+.checkbox:disabled:hover + label::before {
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin: var(--conduction-input-checkbox-label-container-margin);
+  width: 13px;
+  height: 13px;
+  background-color: var(--conduction-input-checkbox-disabled-hover-color, var(--conduction-input-checkbox-disabled-color));
+  border-width: var(--conduction-input-checkbox-disabled-hover-border-width, var(--conduction-input-checkbox-disabled-border-width));
+  border-style: var(--conduction-input-checkbox-disabled-hover-border-style, var(--conduction-input-checkbox-disabled-border-style));
+  border-color: var(--conduction-input-checkbox-disabled-hover-border-color, var(--conduction-input-checkbox-disabled-border-color));
+  border-radius: var(--conduction-input-checkbox-disabled-hover-border-radius, var(--conduction-input-checkbox-disabled-border-radius));
+  box-shadow: var(--conduction-input-checkbox-disabled-hover-box-shadow, var(--conduction-input-checkbox-disabled-box-shadow));
+  cursor: default;
+}
+
+.checkbox:disabled:checked + label::after {
+  cursor: default;
+}

package/lib/components/formFields/createKeyValue/CreateKeyValue.module.css

@@ -0,0 +1,65 @@
+:root {
+  --conduction-create-key-value-table-row-border: 1px solid var(--skeleton-color-grey-1);
+  --conduction-delete-button-background-color: var(--skeleton-color-red-3);
+  --conduction-delete-button-background-hover-color: var(--skeleton-color-red-4);
+}
+
+.keyValue {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.table {
+  border-collapse: collapse;
+  background-color: var(--utrecht-table-background-color);
+}
+
+.tableHeader > * {
+  border-block-end: var(--utrecht-table-header-border-block-end-width) solid var(--utrecht-table-header-border-block-end-color);
+}
+
+.tableHeader {
+  font-family: var(--utrecht-table-header-font-family);
+}
+
+.table td,
+.table th {
+  text-align: left;
+  padding-inline: 0;
+  padding-block: var(--skeleton-size-md);
+}
+
+.buttonsContainer {
+  display: flex;
+  gap: var(--skeleton-size-xs);
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  white-space: nowrap;
+  background-color: var(--conduction-delete-button-background-color) !important;
+}
+
+.deleteButton:hover {
+  white-space: nowrap;
+  background-color: var(--conduction-delete-button-background-hover-color) !important;
+}
+
+.form {
+  width: 100%;
+  display: flex;
+}
+
+.form > *:not(:last-child) {
+  margin-right: 10px;
+}
+
+.form > input {
+  flex: 5;
+}
+
+.form > button {
+  flex: 2;
+  max-width: fit-content;
+}

package/lib/components/formFields/date/Date.module.css

@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

package/lib/components/formFields/errorMessage/ErrorMessage.module.css

@@ -0,0 +1,9 @@
+:root {
+  --conduction-error-message-color: var(--skeleton-color-red-3);
+  --conduction-error-message-font-size: var(--skeleton-font-size-sm);
+}
+
+.message {
+  color: var(--conduction-error-message-color);
+  font-size: var(--conduction-error-message-font-size);
+}

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

@@ -0,0 +1,58 @@
+:root {
+  --conduction-input-select-padding-block-start: var(--skeleton-size-xs);
+  --conduction-input-select-padding-block-end: var(--skeleton-size-xs);
+  --conduction-input-select-border-radius: var(--skeleton-border-radius-md);
+  --conduction-input-select-background-color: var(--skeleton-color-white);
+  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
+  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
+  --conduction-input-select-invalid-border-color: var(
+    --utrecht-textbox-invalid-border-color,
+    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
+  );
+
+  --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
+  /* --conduction-input-select-list-option-background-color: unset; */
+  /* --conduction-input-select-list-option-color: unset; */
+  /* --conduction-input-select-list-option-selected--background-color: unset; */
+  /* --conduction-input-select-list-option-selected-color: unset; */
+  /* --conduction-input-select-list-option-focus-background-color: unset; */
+  /* --conduction-input-select-list-option-focus-color: unset; */
+
+  /* --conduction-input-select-list-option-hover-background-color: unset; */
+  /* --conduction-input-select-list-option-hover-color: unset; */
+  /* --conduction-input-select-list-option-font-family: unset; */
+
+  --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
+  --conduction-input-select-placeholder-color: #757575;
+}
+
+.select > div {
+  background-color: var(--conduction-input-select-background-color);
+  border: var(--conduction-input-select-border);
+  border-radius: var(--conduction-input-select-border-radius);
+  box-sizing: border-box;
+  padding-block-start: var(--conduction-input-select-padding-block-start);
+  padding-block-end: var(--conduction-input-select-padding-block-end);
+}
+
+.select.error > div {
+  border-color: var(--conduction-input-select-invalid-border-color);
+}
+
+.select .select > div:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+
+.select > div:focus-within::after {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  bottom: calc(var(--skeleton-size-2xs) * -1);
+  left: calc(var(--skeleton-size-2xs) * -1);
+  right: calc(var(--skeleton-size-2xs) * -1);
+  top: calc(var(--skeleton-size-2xs) * -1);
+  border: var(--conduction-input-select-border-focus);
+  border-radius: var(--conduction-input-select-border-radius);
+}

package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css

@@ -0,0 +1,41 @@
+:root {
+  --conduction-horizontal-overflow-wrapper-background-color: unset;
+  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;
+
+  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
+}
+
+.container {
+  position: relative;
+  background-color: var(--conduction-horizontal-overflow-wrapper-background-color);
+}
+
+.wrapper {
+  overflow-x: scroll;
+}
+
+.scrollButton {
+  position: sticky;
+  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);
+
+  margin-inline-start: var(--conduction-horizontal-overflow-wrapper-margin-inline-start);
+  margin-inline-end: var(--conduction-horizontal-overflow-wrapper-margin-inline-end);
+  margin-block-start: var(--conduction-horizontal-overflow-wrapper-margin-block-start);
+  margin-block-end: var(--conduction-horizontal-overflow-wrapper-margin-block-end);
+}
+
+.scrollButton.right {
+  left: 100%;
+}
+
+/* Hide scrollbar */
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+.wrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

package/lib/components/imageDivider/imageDivider.module.css

@@ -0,0 +1,5 @@
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}