@times-components/ts-components 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4 → 1.145.1-e871182934034874ea6a75e1e684090e5504df44.2

package/dist/components/trip-cards/styles.js

@@ -1,387 +0,0 @@
-import styled from 'styled-components';
-const breakpoints = {
-    sm: '390px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1320px'
-};
-const colors = {
-    primary: '#005C8A',
-    titleBlue: '#145683',
-    ink: '#333333',
-    inkBrand: '#01000D',
-    secondary: '#696969',
-    border: '#E4E4E4',
-    offerBg: '#FFEECF',
-    offerBorder: '#FFB329',
-    strikethrough: '#9F0000',
-    dotActive: '#01000D',
-    dotInactive: '#AAAAAA',
-    iconBlue: '#236FA3',
-    white: '#FFFFFF'
-};
-export const Container = styled.div `
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 80px 0 40px;
-
-  @media (max-width: ${breakpoints.md}) {
-    padding: 40px 0;
-  }
-`;
-export const TitleSection = styled.div `
-  padding: 0;
-  margin-bottom: 16px;
-
-  @media (max-width: ${breakpoints.md}) {
-    padding: 0 10px;
-  }
-`;
-export const TitleBar = styled.div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  border-top: 1px dashed ${colors.border};
-  border-bottom: 1px dashed ${colors.border};
-  padding: 20px 0px;
-
-  @media (max-width: ${breakpoints.md}) {
-    justify-content: space-between;
-  }
-`;
-export const TitleContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  @media (min-width: ${breakpoints.md}) {
-    flex-direction: row;
-    align-items: baseline;
-    gap: 8px;
-  }
-`;
-export const Title = styled.h2 `
-  font-family: 'Times Modern', serif;
-  font-size: 24px;
-  font-weight: 800;
-  line-height: 1.13;
-  color: #145683;
-  margin: 0;
-`;
-export const Subtitle = styled.p `
-  font-family: 'Times Modern', serif;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 1.13;
-  color: #333333;
-  margin: 0;
-  vertical-align: bottom;
-`;
-export const TitleLink = styled.a `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 8px;
-  background: #eeeeee;
-  border-radius: 33.33px;
-  text-decoration: none;
-  transition: background-color 0.2s ease;
-  flex-shrink: 0;
-
-  &:hover {
-    background: #dddddd;
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    color: ${colors.ink};
-  }
-`;
-export const Description = styled.p `
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  color: ${colors.secondary};
-  margin: 0 0 20px 0;
-`;
-export const StaticCardsGrid = styled.div `
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 20px;
-  padding: 0;
-
-  @media (min-width: ${breakpoints.md}) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-`;
-// Card Styles
-export const CardContainer = styled.div `
-  width: 100%;
-  height: 100%;
-  border: 1.2px solid ${colors.border};
-  background: ${colors.white};
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-`;
-export const ImageContainer = styled.div `
-  position: relative;
-  width: 100%;
-  aspect-ratio: 3 / 2;
-  height: 100%;
-  overflow: hidden;
-  flex-shrink: 0;
-
-  @media (min-width: ${breakpoints.sm}) {
-    height: 213px;
-  }
-
-  @media (min-width: ${breakpoints.md}) {
-    height: 173px;
-  }
-
-  @media (min-width: ${breakpoints.xl}) {
-    height: 200px;
-  }
-`;
-export const CardImage = styled.img `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-`;
-export const OfferLabel = styled.div `
-  position: absolute;
-  bottom: 12px;
-  left: 0;
-  background: ${colors.offerBg};
-  border-left: 1.2px solid ${colors.offerBorder};
-  padding: 12px 16px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  color: ${colors.ink};
-`;
-export const GiftBanner = styled.div `
-  position: absolute;
-  bottom: 12px;
-  left: 0;
-  max-width: 80%;
-  background: ${colors.offerBg};
-  padding: 12px 16px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  color: ${colors.ink};
-  text-align: left;
-`;
-export const CardContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 20px 16px 16px 16px;
-  gap: 32px;
-`;
-export const TopContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex: 1;
-`;
-export const BottomContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-export const Headline = styled.h3 `
-  font-family: 'Times Modern', serif;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1.125;
-  color: ${colors.ink};
-  margin: 0;
-`;
-export const DataPointsList = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-export const DataPoint = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  color: ${colors.secondary};
-  min-height: 21px;
-`;
-export const DataIcon = styled.span `
-  width: 17px;
-  height: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: ${colors.iconBlue};
-  font-size: 17px;
-`;
-export const PriceSection = styled.div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-`;
-export const PriceContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  flex: 1;
-`;
-export const OfferContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-export const PriceLabel = styled.span `
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  color: ${colors.secondary};
-`;
-export const OriginalPrice = styled.span `
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.5;
-  color: ${colors.strikethrough};
-  text-decoration: line-through;
-`;
-export const CurrentPrice = styled.span `
-  font-family: 'Times Modern', serif;
-  font-size: 44px;
-  font-weight: 300;
-  line-height: 1.125;
-  color: ${colors.ink};
-`;
-export const LogoContainer = styled.div `
-  width: 88px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-
-  a {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-  }
-`;
-export const CTAButton = styled.a `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 12px 16px;
-  background: ${colors.primary};
-  color: ${colors.white};
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.5;
-  text-decoration: none;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: #004a6e;
-  }
-`;
-// Navigation Arrow - positioned on sides of carousel
-export const NavigationArrow = styled.button `
-  display: none;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  ${({ direction }) => direction === 'left' ? 'left: -65px;' : 'right: -65px;'} z-index: 10;
-  width: 48px;
-  height: 48px;
-  border: none;
-  border-radius: 50%;
-  background: ${({ disabled }) => (disabled ? '#CCCCCC' : colors.primary)};
-  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-  align-items: center;
-  justify-content: center;
-  transition: background 0.2s ease;
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-
-  svg path {
-    stroke: ${colors.white};
-  }
-
-  &:hover:not(:disabled) {
-    background: #004a6e;
-  }
-
-  @media (min-width: ${breakpoints.lg}) {
-    display: flex;
-  }
-`;
-export const PageControl = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  padding: 12px;
-  background: ${colors.white};
-`;
-export const PageDot = styled.button `
-  width: 8px;
-  height: 8px;
-  border-radius: 1000px;
-  border: none;
-  padding: 0;
-  background: ${({ active }) => (active ? '#01000D' : '#AAAAAA')};
-  cursor: pointer;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: #01000d;
-  }
-`;
-export const LoadingContainer = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
-  font-family: 'Roboto', sans-serif;
-  color: ${colors.secondary};
-`;
-export const ErrorContainer = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-  font-family: 'Roboto', sans-serif;
-  color: ${colors.strikethrough};
-`;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdHJpcC1jYXJkcy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFFdkMsTUFBTSxXQUFXLEdBQUc7SUFDbEIsRUFBRSxFQUFFLE9BQU87SUFDWCxFQUFFLEVBQUUsT0FBTztJQUNYLEVBQUUsRUFBRSxRQUFRO0lBQ1osRUFBRSxFQUFFLFFBQVE7Q0FDYixDQUFDO0FBRUYsTUFBTSxNQUFNLEdBQUc7SUFDYixPQUFPLEVBQUUsU0FBUztJQUNsQixTQUFTLEVBQUUsU0FBUztJQUNwQixHQUFHLEVBQUUsU0FBUztJQUNkLFFBQVEsRUFBRSxTQUFTO0lBQ25CLFNBQVMsRUFBRSxTQUFTO0lBQ3BCLE1BQU0sRUFBRSxTQUFTO0lBQ2pCLE9BQU8sRUFBRSxTQUFTO0lBQ2xCLFdBQVcsRUFBRSxTQUFTO0lBQ3RCLGFBQWEsRUFBRSxTQUFTO0lBQ3hCLFNBQVMsRUFBRSxTQUFTO0lBQ3BCLFdBQVcsRUFBRSxTQUFTO0lBQ3RCLFFBQVEsRUFBRSxTQUFTO0lBQ25CLEtBQUssRUFBRSxTQUFTO0NBQ2pCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7dUJBS1osV0FBVyxDQUFDLEVBQUU7OztDQUdwQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7dUJBSWYsV0FBVyxDQUFDLEVBQUU7OztDQUdwQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7OzJCQUtQLE1BQU0sQ0FBQyxNQUFNOzhCQUNWLE1BQU0sQ0FBQyxNQUFNOzs7dUJBR3BCLFdBQVcsQ0FBQyxFQUFFOzs7Q0FHcEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7Ozt1QkFLZixXQUFXLENBQUMsRUFBRTs7Ozs7Q0FLcEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRyxNQUFNLENBQUMsRUFBRSxDQUFBOzs7Ozs7O0NBTzdCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQTs7Ozs7Ozs7Q0FRL0IsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OzthQW9CcEIsTUFBTSxDQUFDLEdBQUc7O0NBRXRCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQTs7OztXQUl4QixNQUFNLENBQUMsU0FBUzs7Q0FFMUIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7Ozs7dUJBTWxCLFdBQVcsQ0FBQyxFQUFFOzs7Q0FHcEMsQ0FBQztBQUVGLGNBQWM7QUFDZCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7O3dCQUdmLE1BQU0sQ0FBQyxNQUFNO2dCQUNyQixNQUFNLENBQUMsS0FBSzs7OztDQUkzQixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7Ozs7O3VCQVFqQixXQUFXLENBQUMsRUFBRTs7Ozt1QkFJZCxXQUFXLENBQUMsRUFBRTs7Ozt1QkFJZCxXQUFXLENBQUMsRUFBRTs7O0NBR3BDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7Ozs7Q0FRbEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7O2dCQUlwQixNQUFNLENBQUMsT0FBTzs2QkFDRCxNQUFNLENBQUMsV0FBVzs7Ozs7O1dBTXBDLE1BQU0sQ0FBQyxHQUFHO0NBQ3BCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7Z0JBS3BCLE1BQU0sQ0FBQyxPQUFPOzs7Ozs7V0FNbkIsTUFBTSxDQUFDLEdBQUc7O0NBRXBCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7O0NBTXBDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7Q0FLckMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7O0NBSXhDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLEVBQUUsQ0FBQTs7Ozs7V0FLdEIsTUFBTSxDQUFDLEdBQUc7O0NBRXBCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7OztDQUl2QyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7Ozs7V0FPeEIsTUFBTSxDQUFDLFNBQVM7O0NBRTFCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQTs7Ozs7OztXQU94QixNQUFNLENBQUMsUUFBUTs7Q0FFekIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7OztDQUtyQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7O0NBS3ZDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7OztDQUl2QyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUE7Ozs7V0FJMUIsTUFBTSxDQUFDLFNBQVM7Q0FDMUIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFBOzs7OztXQUs3QixNQUFNLENBQUMsYUFBYTs7Q0FFOUIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFBOzs7OztXQUs1QixNQUFNLENBQUMsR0FBRztDQUNwQixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQWtCdEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFBOzs7Ozs7Z0JBTWpCLE1BQU0sQ0FBQyxPQUFPO1dBQ25CLE1BQU0sQ0FBQyxLQUFLOzs7Ozs7Ozs7OztDQVd0QixDQUFDO0FBRUYscURBQXFEO0FBQ3JELE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUcxQzs7Ozs7SUFLRSxDQUFDLEVBQUUsU0FBUyxFQUFFLEVBQUUsRUFBRSxDQUNsQixTQUFTLEtBQUssTUFBTSxDQUFDLENBQUMsQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLGVBQWU7Ozs7O2dCQUszQyxDQUFDLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUM7WUFDN0QsQ0FBQyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7Ozs7b0JBSTVDLENBQUMsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDOzs7Ozs7OztjQVFwRCxNQUFNLENBQUMsS0FBSzs7Ozs7Ozt1QkFPSCxXQUFXLENBQUMsRUFBRTs7O0NBR3BDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7O2dCQU1yQixNQUFNLENBQUMsS0FBSztDQUMzQixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQXFCOzs7Ozs7Z0JBTXpDLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDOzs7Ozs7O0NBTy9ELENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7Ozs7V0FNL0IsTUFBTSxDQUFDLFNBQVM7Q0FDMUIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7Ozs7V0FNN0IsTUFBTSxDQUFDLGFBQWE7Q0FDOUIsQ0FBQyJ9

package/dist/components/trip-cards/types.d.ts

@@ -1,87 +0,0 @@
-import { ComponentType } from 'react';
-export interface TripCardsElement {
-    class?: string;
-    tripcards: string;
-    title?: string;
-    titleUrl?: string;
-    description?: string;
-}
-export interface TripCardsProps {
-    element: TripCardsElement;
-    useMockData?: boolean;
-}
-export interface DecodedTripCard {
-    cruise_id: string;
-}
-export interface TripCardApiData {
-    cruise_id: string;
-    image: string;
-    offer_label?: string;
-    gift_banner?: string;
-    headline: string;
-    date: string;
-    duration: string;
-    route: string;
-    ship: string;
-    original_price?: string;
-    price: string;
-    logo: string;
-    logo_url: string;
-    cta_url: string;
-    cta_text: string;
-}
-export interface TripCardProps {
-    card: TripCardApiData;
-}
-export interface ApiCruiseResult {
-    post_id: number;
-    cruise_id: number;
-    cruise_title: string;
-    cruise_line: {
-        name: string;
-        link: string;
-        logo: string;
-    };
-    ship: {
-        name: string;
-        link: string;
-        image: string;
-    };
-    departs: string;
-    ends: string;
-    date_label: string;
-    destination: string[];
-    duration: number;
-    itinerary: string[];
-    prices: {
-        cheapest_price: number | string;
-        inside: string | number;
-        outside: string | number;
-        balcony: string | number;
-        suite: string | number;
-    };
-    was_prices: {
-        cheapest_price: number | string;
-        inside: number;
-        outside: number;
-        balcony: number;
-        suite: number;
-    };
-    link: string;
-    campaigns: string[];
-    extras: {
-        date: string;
-        duration: string;
-        destination: string;
-        info: string;
-    };
-}
-export interface TripCardsLayoutProps {
-    element: TripCardsElement;
-    items: Array<{
-        id: string | number;
-        data?: TripCardApiData;
-    }>;
-    CardComponent: ComponentType<any>;
-    itemsPerPage: number;
-}

package/src/components/carousel-component/CarouselComponent.stories.tsx

@@ -1,220 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { CarouselComponent, CarouselItem } from './index';
-import styled from 'styled-components';
-
-// Simple card component for demos
-const SimpleCard = styled.div<{ color: string }>`
-  background: ${props => props.color};
-  height: 300px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 24px;
-  font-weight: 600;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-`;
-
-const Container = styled.div`
-  max-width: 1200px;
-  margin: 40px auto;
-  padding: 0 20px;
-`;
-
-const Title = styled.h2`
-  margin-bottom: 24px;
-  font-size: 24px;
-  font-weight: 600;
-`;
-
-storiesOf('Typescript Component/CarouselComponent', module)
-  .add('Two Cards Per Page', () => {
-    const colors = [
-      '#005C8A',
-      '#FF6B6B',
-      '#4ECDC4',
-      '#45B7D1',
-      '#96CEB4',
-      '#FFEAA7'
-    ];
-
-    const items = colors.map((color, index) => (
-      <CarouselItem
-        key={index}
-        widthConfig={{
-          mobile: '90%',
-          tablet: '70%',
-          desktop: 'calc(47% - 10px)'
-        }}
-      >
-        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
-      </CarouselItem>
-    ));
-
-    return (
-      <Container>
-        <Title>Two Cards Per Page (with peek)</Title>
-        <CarouselComponent
-          items={items}
-          options={{
-            itemsPerPage: 2
-          }}
-          showArrows={true}
-          showDots={true}
-        />
-      </Container>
-    );
-  })
-  .add('Three Cards Per Page', () => {
-    const colors = [
-      '#005C8A',
-      '#FF6B6B',
-      '#4ECDC4',
-      '#45B7D1',
-      '#96CEB4',
-      '#FFEAA7',
-      '#DFE6E9',
-      '#74B9FF',
-      '#A29BFE'
-    ];
-
-    const items = colors.map((color, index) => (
-      <CarouselItem
-        key={index}
-        widthConfig={{
-          mobile: '85%',
-          tablet: '40%',
-          desktop: 'calc(31% - 14px)'
-        }}
-      >
-        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
-      </CarouselItem>
-    ));
-
-    return (
-      <Container>
-        <Title>Three Cards Per Page (with peek)</Title>
-        <CarouselComponent
-          items={items}
-          options={{
-            itemsPerPage: 3
-          }}
-          showArrows={true}
-          showDots={true}
-        />
-      </Container>
-    );
-  })
-  .add('Minimal Example', () => {
-    const items = [
-      <CarouselItem
-        key="1"
-        widthConfig={{
-          mobile: '90%',
-          tablet: '70%',
-          desktop: 'calc(47% - 10px)'
-        }}
-      >
-        <SimpleCard color="#005C8A">Card 1</SimpleCard>
-      </CarouselItem>,
-      <CarouselItem
-        key="2"
-        widthConfig={{
-          mobile: '90%',
-          tablet: '70%',
-          desktop: 'calc(47% - 10px)'
-        }}
-      >
-        <SimpleCard color="#FF6B6B">Card 2</SimpleCard>
-      </CarouselItem>,
-      <CarouselItem
-        key="3"
-        widthConfig={{
-          mobile: '90%',
-          tablet: '70%',
-          desktop: 'calc(47% - 10px)'
-        }}
-      >
-        <SimpleCard color="#4ECDC4">Card 3</SimpleCard>
-      </CarouselItem>,
-      <CarouselItem
-        key="4"
-        widthConfig={{
-          mobile: '90%',
-          tablet: '70%',
-          desktop: 'calc(47% - 10px)'
-        }}
-      >
-        <SimpleCard color="#45B7D1">Card 4</SimpleCard>
-      </CarouselItem>
-    ];
-
-    return (
-      <Container>
-        <Title>Simple 4 Cards</Title>
-        <CarouselComponent items={items} />
-      </Container>
-    );
-  })
-  .add('Without Navigation', () => {
-    const colors = ['#005C8A', '#FF6B6B', '#4ECDC4', '#45B7D1'];
-
-    const items = colors.map((color, index) => (
-      <CarouselItem
-        key={index}
-        widthConfig={{
-          mobile: '90%',
-          tablet: '70%',
-          desktop: 'calc(47% - 10px)'
-        }}
-      >
-        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
-      </CarouselItem>
-    ));
-
-    return (
-      <Container>
-        <Title>Scroll Only (No Arrows/Dots)</Title>
-        <CarouselComponent items={items} showArrows={false} showDots={false} />
-      </Container>
-    );
-  })
-  .add('Three Cards Exact Width (No Peek)', () => {
-    const colors = [
-      '#005C8A',
-      '#FF6B6B',
-      '#4ECDC4',
-      '#45B7D1',
-      '#96CEB4',
-      '#FFEAA7'
-    ];
-
-    const items = colors.map((color, index) => (
-      <CarouselItem
-        key={index}
-        widthConfig={{
-          mobile: '90%',
-          tablet: '70%',
-          desktop: 'calc(33% - 10px)'
-        }}
-      >
-        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
-      </CarouselItem>
-    ));
-
-    return (
-      <Container>
-        <Title>Three Cards Per Page (exact width, no peek)</Title>
-        <CarouselComponent
-          items={items}
-          options={{
-            itemsPerPage: 3
-          }}
-          showArrows={true}
-          showDots={true}
-        />
-      </Container>
-    );
-  });

package/src/components/carousel-component/CarouselItem.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ItemContainer } from './styles';
-import { CarouselItemProps } from './types';
-
-export const CarouselItem: React.FC<CarouselItemProps> = ({
-  children,
-  widthConfig = {
-    mobile: '90%',
-    tablet: '70%',
-    desktop: 'calc(50% - 10px)',
-    xl: 'calc(50% - 10px)'
-  },
-  className
-}) => {
-  return (
-    <ItemContainer widthConfig={widthConfig} className={className}>
-      {children}
-    </ItemContainer>
-  );
-};