@conduction/components 2.2.28 → 2.2.30

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/{src/components/formFields/checkbox/Checkbox.module.css → lib/components/formFields/checkbox/checkbox.module.css}

@@ -1,6 +1,5 @@
 :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;

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%;
+}

package/lib/components/jumbotron/Jumbotron.module.css

@@ -0,0 +1,88 @@
+.wrapper {
+  padding-block-start: 72px;
+  padding-block-end: 72px;
+  width: auto !important;
+}
+
+.backgroundImageWrapper {
+  background-size: cover;
+  background-position: 48% 39%;
+  max-width: 100%;
+  padding: 5rem 0 10rem;
+}
+
+.rightImageWrapper {
+  padding-block: 48px;
+  background-color: var(--utrecht-page-header-background-color) !important;
+}
+
+.imageRightContainer {
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  gap: var(--utrecht-space-inline-xl);
+  align-items: center;
+}
+
+.headerSearchForm > *:not(:last-child) {
+  margin-block-end: 32px;
+}
+
+.headerSearchForm > .subHeading2 {
+  width: 100%;
+  max-width: 800px;
+  margin-block-end: 48px;
+}
+
+.card {
+  width: fit-content;
+  padding-inline-start: 48px;
+  padding-inline-end: 48px;
+  padding-block-start: 40px;
+  padding-block-end: 40px;
+  border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
+}
+
+.card:hover {
+  background-color: var(--conduction-card-wrapper-background-color);
+  cursor: default;
+  border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
+}
+
+.cardTitle,
+.cardAndImageTitle {
+  border-block-end: var(--conduction-card-wrapper-header-border-block-end);
+  color: var(--conduction-card-header-title-color, var(--conduction-card-wrapper-color)) !important;
+}
+
+.cardAndImageTitle {
+  width: max-content;
+}
+
+.cardSubTitle,
+.subTitle {
+  position: relative;
+  font-style: italic;
+  display: block;
+  margin-block-end: var(--utrecht-space-block-md);
+  font-size: var(--utrecht-document-font-size);
+}
+
+.cardDescription {
+  color: var(--conduction-card-wrapper-color) !important;
+}
+
+.image {
+  width: 50% !important;
+  object-fit: contain;
+}
+
+.title,
+.description,
+.subTitle {
+  color: var(--utrecht-page-header-color) !important;
+}
+
+.titleSingle {
+  margin-block-end: var(--utrecht-space-block-2xs);
+}

package/lib/components/logo/Logo.module.css

@@ -0,0 +1,31 @@
+:root {
+  --conduction-logo-header-inline-size: 220px;
+  --conduction-logo-header-block-size: 40px;
+  --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+
+  --conduction-logo-footer-inline-size: 330px;
+  --conduction-logo-footer-block-size: 60px;
+  --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+}
+
+.container {
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.container.header {
+  inline-size: var(--conduction-logo-header-inline-size);
+  block-size: var(--conduction-logo-header-block-size);
+  background-image: var(--conduction-logo-header-background-image);
+}
+
+.container.footer {
+  inline-size: var(--conduction-logo-footer-inline-size);
+  block-size: var(--conduction-logo-footer-block-size);
+  background-image: var(--conduction-logo-footer-background-image);
+}
+
+.container.clickable:hover {
+  cursor: pointer;
+}

package/lib/components/metaIcon/MetaIcon.module.css

@@ -0,0 +1,29 @@
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.icon {
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
+.value {
+  font-weight: var(--skeleton-font-weight-bold);
+}

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

@@ -0,0 +1,70 @@
+:root {
+  --conduction-notification-pop-up-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
+  --conduction-notification-pop-up-border: 1px solid var(--skeleton-color-grey-2);
+}
+
+:export {
+  animationDuration: 200ms;
+}
+
+.modal {
+  animation-fill-mode: both;
+  background: var(--skeleton-color-grey-1);
+  padding-inline-start: var(--skeleton-size-lg);
+  padding-inline-end: var(--skeleton-size-lg);
+  padding-block-start: var(--skeleton-size-lg);
+  padding-block-end: var(--skeleton-size-lg);
+  border-radius: var(--skeleton-border-radius-md);
+  box-shadow: var(--conduction-notification-pop-up-box-shadow);
+}
+
+.modal > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-md);
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.buttons > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.button {
+  display: flex;
+  gap: 8px;
+}
+
+.visible {
+  animation-name: fadeInBottom;
+}
+
+.link > * {
+  margin-inline-end: 8px;
+}
+
+@keyframes fadeInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(50%);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal:not(.visible) {
+  animation-name: fadeOutBottom;
+}
+
+@keyframes fadeOutBottom {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(50%);
+  }
+}

package/lib/components/quoteWrapper/QuoteWrapper.module.css

@@ -0,0 +1,12 @@
+:root {
+  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
+  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
+  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
+}
+
+.container {
+  border-left-width: var(--conduction-quote-wrapper-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-wrapper-border-color);
+  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
+}