@asantemedia-org/leybold-design-system 1.0.12 → 1.0.13

package/dist/index.scss

@@ -633,6 +633,269 @@
 .Button-module__button__icon--right___-pGHl {
   order: 1;
 }
+@import "slick-carousel/slick/slick.css";
+@import "slick-carousel/slick/slick-theme.css";
+:root {
+  --leybold-red: #e2001a;
+  --leybold-black: #000000;
+  --leybold-white: #ffffff;
+  --leybold-blue-grey: #546672;
+  --leybold-white-aluminium: #dae0e3;
+  --leybold-window-gray: #99a1ab;
+  --leybold-light-grey: #c5c7c4;
+  --leybold-slate-gray: #4a4e54;
+  --leybold-anthracite-gray: #383e42;
+  --leybold-orange: #d18e56;
+  --leybold-yellow: #edd163;
+  --leybold-green: #6ea67b;
+  --leybold-purple: #732d5d;
+  --leybold-purple-gray: #945e67;
+  --leybold-blue: #2b4679;
+  --leybold-light-blue: #3f6a98;
+  --leybold-blue-green: #39788e;
+  --leybold-green-gray: #6d8f9f;
+  --color-primary: #e2001a;
+  --color-secondary: #546672;
+  --color-success: #6ea67b;
+  --color-danger: #e2001a;
+  --color-warning: #d18e56;
+  --color-info: #3f6a98;
+  --text-primary: #000000;
+  --text-secondary: #4a4e54;
+  --text-muted: #99a1ab;
+  --text-inverse: #ffffff;
+  --bg-primary: #ffffff;
+  --bg-secondary: #dae0e3;
+  --bg-dark: #383e42;
+  --border-color: #c5c7c4;
+  --border-color-dark: #4a4e54;
+  --font-family-base: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --h1-mobile-size: 32px;
+  --h1-mobile-line-height: 1.2;
+  --h2-mobile-size: 24px;
+  --h2-mobile-line-height: 1.2;
+  --h3-mobile-size: 18px;
+  --h3-mobile-line-height: 1.6;
+  --h4-mobile-size: 16px;
+  --h4-mobile-line-height: 1.55;
+  --h5-mobile-size: 14px;
+  --h5-mobile-line-height: 1.5;
+  --body-mobile-size: 14px;
+  --body-mobile-line-height: 1.5;
+  --h1-desktop-size: 55px;
+  --h1-desktop-line-height: 1.15;
+  --h1-desktop-letter-spacing: -0.02em;
+  --h2-desktop-size: 40px;
+  --h2-desktop-line-height: 1.2;
+  --h2-desktop-letter-spacing: -0.01em;
+  --h3-desktop-size: 32px;
+  --h3-desktop-line-height: 1.2;
+  --h4-desktop-size: 24px;
+  --h4-desktop-line-height: 1.2;
+  --h5-desktop-size: 18px;
+  --h5-desktop-line-height: 1.6;
+  --body-desktop-size: 18px;
+  --body-desktop-line-height: 1.6;
+  --text-lg-size: 27px;
+  --text-lg-line-height: 1.4;
+  --text-xl-size: 36px;
+  --text-xl-line-height: 1.4;
+  --text-xxl-size: 64px;
+  --text-xxl-line-height: 1;
+}
+
+.Carousel-module__carousel___hkXkF {
+  width: 100%;
+  background-color: #ffffff;
+  padding: 48px 24px;
+}
+@media (min-width: 768px) {
+  .Carousel-module__carousel___hkXkF {
+    padding: 86px 178px 56px;
+  }
+}
+
+.Carousel-module__carousel__header___IMcN5 {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+@media (min-width: 768px) {
+  .Carousel-module__carousel__header___IMcN5 {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 42px;
+  }
+}
+
+.Carousel-module__carousel__headerContent___9uU-H {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 714px;
+}
+
+.Carousel-module__carousel__title___CCgcY {
+  font-family: var(--font-family-base);
+  font-weight: 700;
+  font-size: var(--h3-desktop-size);
+  line-height: 1.2;
+  color: #4a4e54;
+  margin: 0;
+}
+
+.Carousel-module__carousel__subtitle___aj4q1 {
+  font-family: var(--font-family-base);
+  font-weight: 400;
+  font-size: var(--body-desktop-size);
+  line-height: 1.6;
+  color: #4a4e54;
+  margin: 0;
+}
+
+.Carousel-module__carousel__slider___b27-P {
+  margin-bottom: 42px;
+}
+.Carousel-module__carousel__slider___b27-P .slick-list {
+  margin: 0 -10px;
+}
+.Carousel-module__carousel__slider___b27-P .slick-track {
+  display: flex;
+}
+.Carousel-module__carousel__slider___b27-P .slick-slide {
+  padding: 8px 10px;
+  flex-shrink: 0;
+}
+.Carousel-module__carousel__slider___b27-P .slick-slide > div {
+  height: 100%;
+}
+.Carousel-module__carousel__slider___b27-P .slick-slide.slick-cloned a, .Carousel-module__carousel__slider___b27-P .slick-slide.slick-cloned button {
+  visibility: hidden;
+}
+
+.Carousel-module__carousel__slideWrapper___PjXgD {
+  height: 100%;
+}
+
+.Carousel-module__carousel__card___lga-D {
+  display: block;
+  position: relative;
+  text-decoration: none;
+  height: 341px;
+  overflow: visible;
+}
+@media (min-width: 768px) {
+  .Carousel-module__carousel__card___lga-D {
+    height: 297px;
+  }
+}
+.Carousel-module__carousel__card___lga-D:focus-visible {
+  outline: 2px solid #000000;
+  outline-offset: 2px;
+}
+.Carousel-module__carousel__card___lga-D:hover .Carousel-module__carousel__cardContent___v0jc- {
+  box-shadow: 3px 6px 12px -3px rgba(0, 0, 0, 0.4);
+}
+.Carousel-module__carousel__card___lga-D:hover .Carousel-module__carousel__cardLink___PpTAC {
+  text-decoration: underline;
+}
+
+.Carousel-module__carousel__cardImageWrapper___aFqXD {
+  position: relative;
+  width: 100%;
+  height: 245px;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .Carousel-module__carousel__cardImageWrapper___aFqXD {
+    height: 216px;
+  }
+}
+
+.Carousel-module__carousel__cardImage___4MrRU {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+
+.Carousel-module__carousel__cardContent___v0jc- {
+  position: absolute;
+  left: 20px;
+  bottom: 0;
+  width: calc(100% - 40px);
+  max-width: 300px;
+  background-color: #ffffff;
+  padding: 24px;
+  box-shadow: 3px 6px 8px -5px rgba(0, 0, 0, 0.3);
+  transition: box-shadow 0.2s ease-in-out;
+}
+@media (min-width: 768px) {
+  .Carousel-module__carousel__cardContent___v0jc- {
+    padding-left: 20px;
+    border-left: 4px solid #4a4e54;
+    max-width: 382px;
+  }
+}
+
+.Carousel-module__carousel__cardTitle___z-mMo {
+  font-family: var(--font-family-base);
+  font-weight: 700;
+  font-size: var(--h5-desktop-size);
+  line-height: 1.6;
+  color: #4a4e54;
+  margin: 0 0 8px;
+}
+
+.Carousel-module__carousel__navigation___dMbcP {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .Carousel-module__carousel__navigation___dMbcP {
+    justify-content: space-between;
+  }
+}
+
+.Carousel-module__carousel__arrows___uj5nF {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.Carousel-module__carousel__dotsList___upZ7L {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.Carousel-module__carousel__dot___HwZc0 {
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  background-color: #dae0e3;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+.Carousel-module__carousel__dot___HwZc0:hover {
+  background-color: rgb(188.9692307692, 199.6769230769, 205.0307692308);
+}
+.Carousel-module__carousel__dot___HwZc0:focus-visible {
+  outline: 2px solid #000000;
+  outline-offset: 2px;
+}
+.Carousel-module__carousel__dot--active___NxRvq {
+  background-color: #e2001a;
+}
+.Carousel-module__carousel__dot--active___NxRvq:hover {
+  background-color: #e2001a;
+}
 :root {
   --leybold-red: #e2001a;
   --leybold-black: #000000;

package/dist/src/index.d.ts

@@ -1,5 +1,7 @@
 export { Button } from "./components/Button";
 export type { ButtonProps } from "./components/Button";
+export { Carousel } from "./experience/Carousel";
+export type { CarouselProps, CarouselCardData } from "./experience/Carousel";
 export { Footer, FooterLink, FooterLinkGroup, FooterSocialIcons, FooterSocialIcon, FooterBottom, } from "./experience/Footer";
 export type { FooterProps, FooterLinkItem, SocialLinkItem, FooterLogoProps, FooterLinkProps, FooterLinkGroupProps, FooterSocialIconsProps, FooterSocialIconProps, FooterBottomProps, } from "./experience/Footer";
 export { Pagination, PaginationItem, PaginationButton, PaginationEllipsis, } from "./components/Pagination";