@kvdbil/components 3.3.3 → 3.3.5-2

package/esm/index.js

@@ -0,0 +1,220 @@
+export { default as theme } from './theme.js';
+export { mediaQueries, mq, mqSizes } from './shared/media-queries.js';
+export { Accordion } from './components/Accordion/index.js';
+export { Button } from './components/Button/index.js';
+export { default as IconButton } from './components/IconButton.js';
+export { TextField } from './components/Textfield/index.js';
+export { TextArea } from './components/TextArea/index.js';
+export { Tab, Tabs } from './components/Tabs/index.js';
+export { ErrorMessage } from './components/ErrorMessage/index.js';
+export { default as Spinner } from './components/Spinner/index.js';
+export { Modal } from './components/Modal/index.js';
+export { Dialog } from './components/Dialog/index.js';
+export { OffCanvas } from './components/OffCanvas/index.js';
+export { CheckBox } from './components/CheckBox/index.js';
+export { Snackbar } from './components/Snackbar/index.js';
+export { Select } from './components/Select/index.js';
+export { default as ListItem } from './components/ListItem/index.js';
+export { TimePicker } from './components/TimePicker/index.js';
+export { Hero } from './components/Hero/index.js';
+export { DayPicker } from './components/DayPicker/index.js';
+export { Logo } from './components/Logo/index.js';
+export { Badge } from './components/Badge/index.js';
+export { Toggle } from './components/Toggle/index.js';
+export { Stepper } from './components/Stepper/index.js';
+export { default as Step } from './components/InlineStepper/Step.js';
+export { InlineStepper } from './components/InlineStepper/index.js';
+export { StepperAccordion } from './components/StepperAccordion/index.js';
+export { Card } from './components/Card/index.js';
+export { NotificationButton } from './components/NotificationButton/index.js';
+export { Range } from './components/Range/index.js';
+export { Chip } from './components/Chip/index.js';
+export { Header } from './components/Header/index.js';
+export { MenuItem } from './components/MenuItem/index.js';
+export { default as IdIcon } from './icons/components/IdIcon.js';
+export { default as AccountCreateIcon } from './icons/components/AccountCreateIcon.js';
+export { default as AccountIcon } from './icons/components/AccountIcon.js';
+export { default as AccountLoginIcon } from './icons/components/AccountLoginIcon.js';
+export { default as ArrowDownIcon } from './icons/components/ArrowDownIcon.js';
+export { default as ArrowLeftIcon } from './icons/components/ArrowLeftIcon.js';
+export { default as ArrowLeftSharpIcon } from './icons/components/ArrowLeftSharpIcon.js';
+export { default as ArrowLeftSmallIcon } from './icons/components/ArrowLeftSmallIcon.js';
+export { default as ArrowLong } from './icons/components/ArrowLong.js';
+export { default as ArrowRestartIcon } from './icons/components/ArrowRestartIcon.js';
+export { default as ArrowRightIcon } from './icons/components/ArrowRightIcon.js';
+export { default as ArrowRightSharpIcon } from './icons/components/ArrowRightSharpIcon.js';
+export { default as ArrowUpIcon } from './icons/components/ArrowUpIcon.js';
+export { default as AuctionIcon } from './icons/components/AuctionIcon.js';
+export { default as BackArrowIcon } from './icons/components/BackArrowIcon.js';
+export { default as Baseline360Icon } from './icons/components/Baseline360Icon.js';
+export { default as BellIcon } from './icons/components/BellIcon.js';
+export { default as BidIcon } from './icons/components/BidIcon.js';
+export { default as BidKrIcon } from './icons/components/BidKrIcon.js';
+export { default as BreaksIcon } from './icons/components/BreaksIcon.js';
+export { default as BuyCarIcon } from './icons/components/BuyCarIcon.js';
+export { default as CabIcon } from './icons/components/CabIcon.js';
+export { default as CalendarIcon } from './icons/components/CalendarIcon.js';
+export { default as CameraIcon } from './icons/components/CameraIcon.js';
+export { default as CarFrontIcon } from './icons/components/CarFrontIcon.js';
+export { default as CarSearchIcon } from './icons/components/CarSearchIcon.js';
+export { default as CarSideIcon } from './icons/components/CarSideIcon.js';
+export { default as CarTiresIcon } from './icons/components/CarTiresIcon.js';
+export { default as Car360Icon } from './icons/components/Car360Icon.js';
+export { default as CaravanIcon } from './icons/components/CaravanIcon.js';
+export { default as CardViewIcon } from './icons/components/CardViewIcon.js';
+export { default as CarloanIcon } from './icons/components/CarloanIcon.js';
+export { default as CertifiedIcon } from './icons/components/CertifiedIcon.js';
+export { default as ChatIcon } from './icons/components/ChatIcon.js';
+export { default as CheckIcon } from './icons/components/CheckIcon.js';
+export { default as CheckThinIcon } from './icons/components/CheckThinIcon.js';
+export { default as CheckmarkFilledIcon } from './icons/components/CheckmarkFilledIcon.js';
+export { default as CheckmarkIcon } from './icons/components/CheckmarkIcon.js';
+export { default as ClipboardFilledIcon } from './icons/components/ClipboardFilledIcon.js';
+export { default as ClipboardIcon } from './icons/components/ClipboardIcon.js';
+export { default as ClockFilledIcon } from './icons/components/ClockFilledIcon.js';
+export { default as ClockIcon } from './icons/components/ClockIcon.js';
+export { default as CloseIcon } from './icons/components/CloseIcon.js';
+export { default as CloseThinIcon } from './icons/components/CloseThinIcon.js';
+export { default as CoffeeIcon } from './icons/components/CoffeeIcon.js';
+export { default as CombiIcon } from './icons/components/CombiIcon.js';
+export { default as CommentCircleFilledIcon } from './icons/components/CommentCircleFilledIcon.js';
+export { default as CommentCircleIconIcon } from './icons/components/CommentCircleIconIcon.js';
+export { default as CommentIcon } from './icons/components/CommentIcon.js';
+export { default as ContactIcon } from './icons/components/ContactIcon.js';
+export { default as CoupeIcon } from './icons/components/CoupeIcon.js';
+export { default as CreditCardIcon } from './icons/components/CreditCardIcon.js';
+export { default as CrossCircleIcon } from './icons/components/CrossCircleIcon.js';
+export { default as CrownIcon } from './icons/components/CrownIcon.js';
+export { default as DealmakerIcon } from './icons/components/DealmakerIcon.js';
+export { default as DeliveryIcon } from './icons/components/DeliveryIcon.js';
+export { default as DetailedSearchIcon } from './icons/components/DetailedSearchIcon.js';
+export { default as EcoFriendlyIcon } from './icons/components/EcoFriendlyIcon.js';
+export { default as EditIcon } from './icons/components/EditIcon.js';
+export { default as EngineIcon } from './icons/components/EngineIcon.js';
+export { default as EnglandFlagIcon } from './icons/components/EnglandFlagIcon.js';
+export { default as EvaluationIcon } from './icons/components/EvaluationIcon.js';
+export { default as ExaminationMarkFilledIcon } from './icons/components/ExaminationMarkFilledIcon.js';
+export { default as ExaminationMarkIcon } from './icons/components/ExaminationMarkIcon.js';
+export { default as ExteriorIcon } from './icons/components/ExteriorIcon.js';
+export { default as EyeIcon } from './icons/components/EyeIcon.js';
+export { default as FacebookBtnIcon } from './icons/components/FacebookBtnIcon.js';
+export { default as FacebookIcon } from './icons/components/FacebookIcon.js';
+export { default as FatalIcon } from './icons/components/FatalIcon.js';
+export { default as FavouriteIcon } from './icons/components/FavouriteIcon.js';
+export { default as FavouriteSolidIcon } from './icons/components/FavouriteSolidIcon.js';
+export { default as FilterIcon } from './icons/components/FilterIcon.js';
+export { default as FinanceIcon } from './icons/components/FinanceIcon.js';
+export { default as FindCarIcon } from './icons/components/FindCarIcon.js';
+export { default as FixedMonthlyCostIcon } from './icons/components/FixedMonthlyCostIcon.js';
+export { default as FlagIcon } from './icons/components/FlagIcon.js';
+export { default as FlexibilityIcon } from './icons/components/FlexibilityIcon.js';
+export { default as ForumLargeIcon } from './icons/components/ForumLargeIcon.js';
+export { default as ForumSmallIcon } from './icons/components/ForumSmallIcon.js';
+export { default as GavelIcon } from './icons/components/GavelIcon.js';
+export { default as GearboxIcon } from './icons/components/GearboxIcon.js';
+export { default as GiftIcon } from './icons/components/GiftIcon.js';
+export { default as GridViewIcon } from './icons/components/GridViewIcon.js';
+export { default as GroupIcon } from './icons/components/GroupIcon.js';
+export { default as GuaranteeIcon } from './icons/components/GuaranteeIcon.js';
+export { default as GuaranteeLargeIcon } from './icons/components/GuaranteeLargeIcon.js';
+export { default as GuaranteeSmallIcon } from './icons/components/GuaranteeSmallIcon.js';
+export { default as HalfCombiIcon } from './icons/components/HalfCombiIcon.js';
+export { default as HamburgerIcon } from './icons/components/HamburgerIcon.js';
+export { default as HandshakeIcon } from './icons/components/HandshakeIcon.js';
+export { default as HelpingHandIcon } from './icons/components/HelpingHandIcon.js';
+export { default as InformationIcon } from './icons/components/InformationIcon.js';
+export { default as InstagramIcon } from './icons/components/InstagramIcon.js';
+export { default as InsuranceIcon } from './icons/components/InsuranceIcon.js';
+export { default as InteriorIcon } from './icons/components/InteriorIcon.js';
+export { default as InteriorThinIcon } from './icons/components/InteriorThinIcon.js';
+export { default as InternationalIcon } from './icons/components/InternationalIcon.js';
+export { default as KvdTestIcon } from './icons/components/KvdTestIcon.js';
+export { default as KvdVenueIcon } from './icons/components/KvdVenueIcon.js';
+export { default as LifebuoyIcon } from './icons/components/LifebuoyIcon.js';
+export { default as LiftTruckIcon } from './icons/components/LiftTruckIcon.js';
+export { default as LinkedInIcon } from './icons/components/LinkedInIcon.js';
+export { default as ListViewIcon } from './icons/components/ListViewIcon.js';
+export { default as MailIcon } from './icons/components/MailIcon.js';
+export { default as MinibusIcon } from './icons/components/MinibusIcon.js';
+export { default as MinivanIcon } from './icons/components/MinivanIcon.js';
+export { default as MobileIcon } from './icons/components/MobileIcon.js';
+export { default as MotorcycleIcon } from './icons/components/MotorcycleIcon.js';
+export { default as MrfLogoIcon } from './icons/components/MrfLogoIcon.js';
+export { default as NotFoundIcon } from './icons/components/NotFoundIcon.js';
+export { default as OverbidIcon } from './icons/components/OverbidIcon.js';
+export { default as PdfIconIcon } from './icons/components/PdfIconIcon.js';
+export { default as PhoneIcon } from './icons/components/PhoneIcon.js';
+export { default as PickUpIcon } from './icons/components/PickUpIcon.js';
+export { default as PinIcon } from './icons/components/PinIcon.js';
+export { default as PlayIcon } from './icons/components/PlayIcon.js';
+export { default as PricetagFilledKronaIcon } from './icons/components/PricetagFilledKronaIcon.js';
+export { default as Pricetag } from './icons/components/Pricetag.js';
+export { default as PrivateCarIcon } from './icons/components/PrivateCarIcon.js';
+export { default as ProfileCircleIcon } from './icons/components/ProfileCircleIcon.js';
+export { default as ProfileIcon } from './icons/components/ProfileIcon.js';
+export { default as RadioIcon } from './icons/components/RadioIcon.js';
+export { default as ReclamationIcon } from './icons/components/ReclamationIcon.js';
+export { default as ReleasingIcon } from './icons/components/ReleasingIcon.js';
+export { default as RemoveFilterIcon } from './icons/components/RemoveFilterIcon.js';
+export { default as ReservedPriceIcon } from './icons/components/ReservedPriceIcon.js';
+export { default as ResultIcon } from './icons/components/ResultIcon.js';
+export { default as SafePaymentIcon } from './icons/components/SafePaymentIcon.js';
+export { default as SaleTagIcon } from './icons/components/SaleTagIcon.js';
+export { default as SearchCheckIcon } from './icons/components/SearchCheckIcon.js';
+export { default as SearchIcon } from './icons/components/SearchIcon.js';
+export { default as SedanIcon } from './icons/components/SedanIcon.js';
+export { default as SellCarIcon } from './icons/components/SellCarIcon.js';
+export { default as SellCarsIcon } from './icons/components/SellCarsIcon.js';
+export { default as ServiceIcon } from './icons/components/ServiceIcon.js';
+export { default as ShareIcon } from './icons/components/ShareIcon.js';
+export { default as ShieldIcon } from './icons/components/ShieldIcon.js';
+export { default as SignInIcon } from './icons/components/SignInIcon.js';
+export { default as SignOutIcon } from './icons/components/SignOutIcon.js';
+export { default as SpeedMeterIcon } from './icons/components/SpeedMeterIcon.js';
+export { default as StarCircleIcon } from './icons/components/StarCircleIcon.js';
+export { default as StartIcon } from './icons/components/StartIcon.js';
+export { default as StoreIcon } from './icons/components/StoreIcon.js';
+export { default as SuvIcon } from './icons/components/SuvIcon.js';
+export { default as SwedenFlag } from './icons/components/SwedenFlag.js';
+export { default as TankIcon } from './icons/components/TankIcon.js';
+export { default as TireIcon } from './icons/components/TireIcon.js';
+export { default as TransportIcon } from './icons/components/TransportIcon.js';
+export { default as TrashcanIcon } from './icons/components/TrashcanIcon.js';
+export { default as TrophyIcon } from './icons/components/TrophyIcon.js';
+export { default as TruckIcon } from './icons/components/TruckIcon.js';
+export { default as UmbrellaIcon } from './icons/components/UmbrellaIcon.js';
+export { default as ValuationIcon } from './icons/components/ValuationIcon.js';
+export { default as ValueIcon } from './icons/components/ValueIcon.js';
+export { default as WarningIcon } from './icons/components/WarningIcon.js';
+export { default as YoutubeIcon } from './icons/components/YoutubeIcon.js';
+export { Display1, Display2, Display3, Headline, Rubric, Subtitle, TinyTitle, Title } from './typography/Heading/index.js';
+export { BodyLink, BodyText, Caption, CaptionLink, Quote, Status } from './typography/BodyText/index.js';
+export { ButtonLarge as ButtonLargeText, Button as ButtonRegularText, ButtonSmall as ButtonSmallText } from './typography/ButtonText/index.js';
+export { RadioButton } from './components/RadioButton/index.js';
+export { resetButtonStyle } from './utils/utils.js';
+import 'react';
+import 'styled-components';
+import 'react-collapse';
+import './components/FieldLabel.js';
+import 'react-dom';
+import 'react-transition-group';
+import './components/Icons/Close.js';
+import './components/OffCanvas/Overlay.js';
+import './components/OffCanvas/useClickOutside.js';
+import './shared/helpers.js';
+import './components/Icons/CheckIcon.js';
+import './components/Icons/CheckCircle.js';
+import './components/Icons/ErrorCircle.js';
+import './components/Icons/InfoCircle.js';
+import 'react-select';
+import './shared/constants.js';
+import 'react-day-picker/lib/style.css';
+import 'react-day-picker';
+import './components/DayPicker/DayPickerNavBar.js';
+import './components/Icons/Arrow.js';
+import './components/DayPicker/localeUtils.js';
+import './components/Logo/LogoSv.js';
+import './components/Logo/LogoEn.js';
+import './components/InlineStepper/StepCircle.js';
+import './components/Header/Hamburger.js';
+import './components/Header/Link.js';

package/esm/react-app-env.d.js

@@ -0,0 +1 @@
+

package/esm/shared/constants.js

@@ -0,0 +1,3 @@
+const DEFAULT_TRANSITION_MS = "100ms";
+
+export { DEFAULT_TRANSITION_MS };

package/esm/shared/helpers.js

@@ -0,0 +1,23 @@
+const generateNameHash = (prefix) => {
+  return `${prefix}-lol`;
+};
+const fadedColor = (hex, alpha) => {
+  const VALID_HEX = /^#?([0-9A-F]{3}){1,2}$/i;
+  if (!VALID_HEX.test(hex)) {
+    console.error("Failed to get faded color.", hex);
+    return hex;
+  }
+  const matched = hex.match(hex.length <= 4 ? /\w/g : /\w\w/g);
+  if (matched) {
+    const rgb = matched.map((x) => parseInt(x.length < 2 ? `${x}${x}` : x, 16));
+    const hasAllValues = rgb.every(Number.isInteger);
+    if (hasAllValues) {
+      const [r, g, b] = rgb;
+      return `rgba(${r}, ${g}, ${b}, ${alpha || 1})`;
+    }
+  }
+  console.error("Failed to get faded color.", hex);
+  return hex;
+};
+
+export { fadedColor, generateNameHash };

package/esm/shared/helpers.spec.js

@@ -0,0 +1,34 @@
+import { fadedColor } from './helpers.js';
+
+describe("helpers", () => {
+  describe("fadedColor", () => {
+    test("returns correctly converted rgba value for standard hex value", () => {
+      const hex = "#ef2853";
+      expect(fadedColor(hex, 0.05)).toEqual("rgba(239, 40, 83, 0.05)");
+    });
+    test("returns correctly converted rgba value for standard hex value without bracket", () => {
+      const hex = "ef2853";
+      expect(fadedColor(hex, 0.05)).toEqual("rgba(239, 40, 83, 0.05)");
+    });
+    test("returns correctly converted rgba value for simplified hex value", () => {
+      const hex = "#ef9";
+      expect(fadedColor(hex, 0.7)).toEqual("rgba(238, 255, 153, 0.7)");
+    });
+    test("returns correctly converted rgba value for simplified hex value without bracket", () => {
+      const hex = "ef9";
+      expect(fadedColor(hex, 0.7)).toEqual("rgba(238, 255, 153, 0.7)");
+    });
+    test("returns the given hex value if it has incorrect length", () => {
+      const hex = "#fde9";
+      expect(fadedColor(hex, 0.7)).toEqual(hex);
+    });
+    test("returns the given hex value if it is incorrect", () => {
+      const hex = "#aabbct";
+      expect(fadedColor(hex, 0.7)).toEqual(hex);
+    });
+    test("returns correctly converted rgba value for hex value containing 0 for a specific channel", () => {
+      const hex = "#10a700";
+      expect(fadedColor(hex, 0.7)).toEqual("rgba(16, 167, 0, 0.7)");
+    });
+  });
+});

package/esm/shared/media-queries.js

@@ -0,0 +1,35 @@
+const mqSizes = {
+  mobileS: "320px",
+  mobileM: "375px",
+  mobileL: "425px",
+  tablet: "768px",
+  laptop: "1024px",
+  laptopL: "1440px",
+  laptopXL: "1680px",
+  desktop: "2560px"
+};
+const mediaQueries = {
+  mobileS: (limit) => `(${limit}-width: ${mqSizes.mobileS})`,
+  mobileM: (limit) => `(${limit}-width: ${mqSizes.mobileM})`,
+  mobileL: (limit) => `(${limit}-width: ${mqSizes.mobileL})`,
+  tablet: (limit) => `(${limit}-width: ${mqSizes.tablet})`,
+  laptop: (limit) => `(${limit}-width: ${mqSizes.laptop})`,
+  laptopL: (limit) => `(${limit}-width: ${mqSizes.laptopL})`,
+  desktop: (limit) => `(${limit}-width: ${mqSizes.desktop})`,
+  desktopL: (limit) => `(${limit}-width: ${mqSizes.desktop})`
+};
+const mq = (from, to) => {
+  if (from && to) {
+    return `@media (min-width: ${mqSizes[from]}) and (max-width: ${mqSizes[to]})`;
+  }
+  if (from) {
+    return `@media (min-width: ${mqSizes[from]})`;
+  }
+  if (to) {
+    return `@media (max-width: ${mqSizes[to]})`;
+  }
+  console.error("Invalid use of mq. Available breakpoints are:", mqSizes);
+  return "@media screen";
+};
+
+export { mediaQueries, mq, mqSizes };

package/esm/styled.d.js

@@ -0,0 +1 @@
+import 'styled-components';

package/esm/theme.js

@@ -0,0 +1,121 @@
+const theme = {
+  typography: {
+    fontBaseFamily: "'Open Sans', sans-serif",
+    fontAlternativeFamily: "'Next Book', sans-serif",
+    fontBaseRegularWeight: 400,
+    fontBaseBoldWeight: 600,
+    fontAlternativeRegularWeight: 400,
+    fontAlternativeBoldWeight: 700
+  },
+  colors: {
+    primary: {
+      darker: "#d98500",
+      dark: "#e8a100",
+      main: "#f5b400",
+      light: "#f7cf57",
+      lighter: "#fce5ab",
+      lighter2: "#fff7e5"
+    },
+    secondary: {
+      darker: "#00474d",
+      dark: "#007069",
+      main: "#2a9d8f",
+      light: "#6bb8a6",
+      lighter: "#bae3cc",
+      lighter2: "#e5f5ed"
+    },
+    tertiary: {
+      darker: "#5e2636",
+      dark: "#a63640",
+      main: "#ef5b5b",
+      light: "#f5968a",
+      lighter: "#f5c7bf",
+      lighter2: "#fcedeb"
+    },
+    info: {
+      darker: "#17395d",
+      dark: "#004773",
+      main: "#007ab8",
+      light: "#57c2ff",
+      lighter: "#abe0ff",
+      lighter2: "#e5f5ff"
+    },
+    success: {
+      darker: "#175c36",
+      dark: "#269940",
+      main: "#59d771",
+      light: "#91e5a1",
+      lighter: "#c7f2cf",
+      lighter2: "#edfaf0"
+    },
+    warning: {
+      darker: "#d98500",
+      dark: "#e8a100",
+      main: "#f5b400",
+      light: "#f7cf57",
+      lighter: "#fce5ab",
+      lighter2: "#fff7e5"
+    },
+    error: {
+      darker: "#5e2636",
+      dark: "#a63640",
+      main: "#ef5b5b",
+      light: "#f5968a",
+      lighter: "#f5c7bf",
+      lighter2: "#fcedeb"
+    },
+    neutral: {
+      darker: "#1a2030",
+      dark: "#1a2030",
+      main: "#1a2030",
+      light: "#474d59",
+      lighter: "#5e6369",
+      lighte2: "#707378"
+    },
+    text: {
+      dark: "#1a2030",
+      light: "#ffffff",
+      disabled: "#5e6369"
+    },
+    background: {
+      dark: "#1a2030",
+      gray: "#f2f2f2",
+      sand: "#f2efe6",
+      light: "#ffffff"
+    },
+    common: {
+      black: "#000000",
+      white: "#ffffff",
+      purple: {
+        darker: "#42214f",
+        dark: "#732e70",
+        main: "#a13d8f",
+        light: "#c27db5",
+        lighter: "#e0bfd9",
+        lighter2: "#f5edf2"
+      }
+    },
+    gray: {
+      dark1: "#1a2030",
+      dark2: "#303842",
+      dark3: "#474d59",
+      dark4: "#5e6369",
+      dark5: "#707378",
+      light1: "#8c8f91",
+      light2: "#a3a6a8",
+      light3: "#c7c7c4",
+      light4: "#d9d9d6",
+      light5: "#e8e8e8",
+      light6: "#f2f2f2"
+    }
+  },
+  elevations: {
+    elevation2: "0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",
+    elevation4: "0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",
+    elevation8: "0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)",
+    elevation16: "0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)",
+    elevation24: "0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)"
+  }
+};
+
+export { theme as default };

package/esm/typography/BodyText/index.js

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+
+const BodyTextStylePrimary = css`
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+`;
+const StyledBodyText = styled.p`
+  ${BodyTextStylePrimary}
+  font-feature-settings: 'lnum' on;
+`;
+const Quote = styled(StyledBodyText)`
+  font-family: Georgia, Cambria, Cochin, Times, 'Times New Roman', serif;
+  font-style: italic;
+`;
+const BodyTextStyle = css`
+  ${BodyTextStylePrimary}
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const BodyText = styled(StyledBodyText)`
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const BodyLink = styled(BodyText)`
+  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+`;
+const CaptionStyle = css`
+  ${BodyTextStylePrimary}
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`;
+const Caption = styled(StyledBodyText)`
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`;
+const CaptionLink = styled(Caption)`
+  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+`;
+const Status = styled(StyledBodyText)`
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  text-transform: uppercase;
+`;
+const BodyTexts = () => /* @__PURE__ */ React.createElement("div", null);
+
+export { BodyLink, BodyText, BodyTextStyle, BodyTexts, Caption, CaptionLink, CaptionStyle, Quote, Status, StyledBodyText, BodyTexts as default };

package/esm/typography/ButtonText/index.js

@@ -0,0 +1,33 @@
+import styled, { css } from 'styled-components';
+
+const BasicButtonTextStyle = css`
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const StyledButtonText = styled.span`
+  ${BasicButtonTextStyle}
+`;
+const ButtonLargeTextStyle = css`
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+`;
+const ButtonLarge = styled(StyledButtonText)`
+  ${ButtonLargeTextStyle}
+`;
+const ButtonRegularTextStyle = css`
+  font-size: 1rem;
+  line-height: 1rem;
+`;
+const Button = styled(StyledButtonText)`
+  ${ButtonRegularTextStyle}
+`;
+const ButtonSmallTextStyle = css`
+  font-size: 0.81rem;
+  line-height: 0.81rem;
+`;
+const ButtonSmall = styled(StyledButtonText)`
+  ${ButtonSmallTextStyle}
+`;
+const Buttons = () => /* @__PURE__ */ React.createElement("div", null);
+
+export { BasicButtonTextStyle, Button, ButtonLarge, ButtonLargeTextStyle, ButtonRegularTextStyle, ButtonSmall, ButtonSmallTextStyle, Buttons as default };

package/esm/typography/Heading/index.js

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+
+const StyledHeading = styled.p`
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+`;
+const StyledDisplay = styled(StyledHeading)`
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const Display3 = styled(StyledDisplay)`
+  font-size: 2rem;
+  line-height: 3rem;
+
+  ${mq("laptop")} {
+    font-size: 3.75rem;
+    line-height: 4.5rem;
+  }
+`;
+const Display2 = styled(StyledDisplay)`
+  font-size: 1.81rem;
+  line-height: 2.5rem;
+
+  ${mq("laptop")} {
+    font-size: 3rem;
+    line-height: 4rem;
+  }
+`;
+const Display1 = styled(StyledDisplay)`
+  font-size: 1.63rem;
+  line-height: 2.5rem;
+
+  ${mq("laptop")} {
+    font-size: 2.5rem;
+    line-height: 3.5rem;
+  }
+`;
+const Headline = styled(StyledHeading)`
+  font-size: 1.44rem;
+  line-height: 2rem;
+
+  ${mq("laptop")} {
+    font-size: 2rem;
+    line-height: 3rem;
+  }
+`;
+const Title = styled(StyledHeading)`
+  font-size: 1.25rem;
+  line-height: 2rem;
+
+  ${mq("laptop")} {
+    font-size: 1.56rem;
+    line-height: 2.5rem;
+  }
+`;
+const Subtitle = styled(StyledHeading)`
+  font-size: 1.125rem;
+  line-height: 2rem;
+
+  ${mq("laptop")} {
+    font-size: 1.25rem;
+  }
+`;
+const TinyTitle = styled(StyledHeading)`
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const Rubric = styled(StyledHeading)`
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const Headings = () => /* @__PURE__ */ React.createElement("div", null);
+
+export { Display1, Display2, Display3, Headline, Rubric, Subtitle, TinyTitle, Title, Headings as default };

package/esm/utils/utils.js

@@ -0,0 +1,28 @@
+import { css } from 'styled-components';
+
+const getLuminosity = (hexColor) => {
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (hexColor.length === 4) {
+    red = parseInt("0x" + hexColor[1] + hexColor[1]);
+    green = parseInt("0x" + hexColor[2] + hexColor[2]);
+    blue = parseInt("0x" + hexColor[3] + hexColor[3]);
+  } else if (hexColor.length === 7) {
+    red = parseInt("0x" + hexColor[1] + hexColor[2]);
+    green = parseInt("0x" + hexColor[3] + hexColor[4]);
+    blue = parseInt("0x" + hexColor[5] + hexColor[6]);
+  }
+  return (Math.max(Number(red / 255), Number(green / 255), Number(blue / 255)) + Math.min(Number(red / 255), Number(green / 255), Number(blue / 255))) / 2 * 100;
+};
+const resetButtonStyle = css`
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+`;
+
+export { getLuminosity, resetButtonStyle };