@kvdbil/components 3.3.5-0 → 3.3.5-5

package/esm/components/Button/index.js

@@ -0,0 +1,156 @@
+import { jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import theme from '../../theme.js';
+import Spinner from '../Spinner/index.js';
+import { BasicButtonTextStyle, ButtonRegularTextStyle, ButtonLargeTextStyle, ButtonSmallTextStyle } from '../../typography/ButtonText/index.js';
+
+/****************************************************************************/
+/*                               Font styles                                */
+/****************************************************************************/
+const getFontStyles = (size) => {
+    switch (size) {
+        case 'smaller':
+            return ButtonSmallTextStyle;
+        case 'small':
+            return ButtonRegularTextStyle;
+        case 'regular':
+            return ButtonRegularTextStyle;
+        case 'large':
+            return ButtonLargeTextStyle;
+        default:
+            return ButtonRegularTextStyle;
+    }
+};
+/****************************************************************************/
+/*                               Size styles                                */
+/****************************************************************************/
+const smallerSizeStyles = (isLoading) => `
+  min-width: 76px;
+  padding: ${isLoading ? '7px 10px 5.5px' : '10px 10px 8px'};
+`;
+const smallSizeStyles = (isLoading) => `
+  min-width: 76px;
+  padding: ${isLoading ? '8px 10px 6px' : '11px 10px 9px'};
+`;
+const regularSizeStyles = (isLoading) => `
+  min-width: 250px;
+  padding: ${isLoading ? '7px 22px 5px' : '15px 22px 13px'};
+`;
+const largeSizeStyles = (isLoading) => `
+  min-width: 250px;
+  padding: ${isLoading ? '9px 22px 6px' : '21px 22px 19px'};
+`;
+/****************************************************************************/
+/*                               Color styles                               */
+/****************************************************************************/
+const solidColorStyles = (theme) => (color) => `
+  color: white;
+  border-color: ${theme.colors[color].main};
+  background-color: ${theme.colors[color].main};
+
+  :hover {
+    border-color: ${theme.colors[color].light};
+    background-color: ${theme.colors[color].light};
+  }
+
+  :active {
+    border-color: ${theme.colors[color].dark};
+    background-color: ${theme.colors[color].dark}
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+  }
+`;
+const outlineColorStyles = (theme) => (color) => `
+  color: ${theme.colors[color].main};
+  border-color: ${theme.colors[color].main};
+  background-color: transparent;
+
+  :hover {
+      color: white;
+      border-color: ${theme.colors[color].light};
+      background-color: ${theme.colors[color].light};
+  }
+
+  :active {
+    color: white;
+    border-color: ${theme.colors[color].dark};
+    background-color: ${theme.colors[color].dark};
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+  }
+`;
+const flatColorStyles = (theme) => (color) => `
+  color: ${theme.colors[color].main};
+  border-color: transparent;
+  background-color: transparent;
+
+  :hover {
+    color: ${theme.colors[color].dark};
+  }
+
+  :active {
+    color: ${theme.colors[color].light};
+  }
+`;
+const disabledCommonColorStyles = (theme) => `
+  background-color: ${theme.colors.gray.light4};
+  border-color: ${theme.colors.gray.light4};
+  color: ${theme.colors.gray.light1};
+  cursor: not-allowed;
+`;
+const disabledFlatColorStyles = (theme) => `
+  border-color: transparent;
+  background-color: transparent;
+  color: ${theme.colors.gray.light1};
+  cursor: not-allowed;
+`;
+/****************************************************************************/
+/*                               Root styles                                */
+/****************************************************************************/
+const Root = styled.button `
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  border: 2px solid transparent;
+  border-radius: 3px;
+  width: ${({ fullWidth }) => fullWidth && '100%'};
+
+  ${BasicButtonTextStyle}
+  ${({ size }) => getFontStyles(size)}
+  ${({ size, isLoading }) => css `
+    ${size === 'smaller' && smallerSizeStyles(isLoading)}
+    ${size === 'small' && smallSizeStyles(isLoading)}
+    ${size === 'regular' && regularSizeStyles(isLoading)}
+    ${size === 'large' && largeSizeStyles(isLoading)}
+  `}
+  background-color: transparent;
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+  ${({ variant, color, disabled, theme }) => css `
+    ${!disabled && variant === 'solid' && solidColorStyles(theme)(color)}
+    ${!disabled && variant === 'outline' && outlineColorStyles(theme)(color)}
+    ${!disabled && variant === 'flat' && flatColorStyles(theme)(color)}
+    ${disabled && variant !== 'flat' && disabledCommonColorStyles(theme)}
+    ${disabled && variant === 'flat' && disabledFlatColorStyles(theme)}
+  `}
+`;
+/****************************************************************************/
+/*                              Main component                              */
+/****************************************************************************/
+const LoadingSpinner = styled(Spinner) ``;
+const spinnerSizes = {
+    smaller: 1,
+    small: 1,
+    regular: 1.5,
+    large: 1.75,
+};
+const Button = ({ size = 'small', color = 'primary', variant = 'solid', fullWidth = false, isDisabled = false, isLoading = false, children, ...props }) => {
+    return (jsx(Root, Object.assign({}, props, { color: color, disabled: isDisabled || isLoading, fullWidth: fullWidth, theme: theme, variant: variant, size: size, isLoading: isLoading }, { children: isLoading ? (jsx(LoadingSpinner, { color: "neutral", size: spinnerSizes[size] }, void 0)) : (children) }), void 0));
+};
+
+export { Button, Button as default };

package/esm/components/Card/index.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import theme from '../../theme.js';
+
+const CardWrapper = styled.div `
+  background: ${theme.colors.background.light};
+  ${({ boxShadow }) => boxShadow && `box-shadow: ${boxShadow};`}
+  ${({ boxShadow }) => !boxShadow &&
+    `box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
+    0 1px 5px rgba(0, 0, 0, 15%);`}
+  border-radius: 0 0 3px 3px;
+  ${({ topBorder }) => topBorder && `border-top: 4px solid ${topBorder};`}
+`;
+const Card = ({ ...props }) => {
+    return (jsx(CardWrapper, Object.assign({ topBorder: props.topBorder, boxShadow: props.boxShadow }, { children: props.children }), void 0));
+};
+
+export { Card, Card as default };

package/esm/components/CheckBox/index.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import { generateNameHash } from '../../shared/helpers.js';
+import theme from '../../theme.js';
+import IconButton from '../IconButton.js';
+import CheckIcon from '../Icons/CheckIcon.js';
+
+const regularSize = css `
+  width: 24px;
+  height: 24px;
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+const largeSize = css `
+  width: 32px;
+  height: 32px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const sizes = {
+    regular: regularSize,
+    large: largeSize,
+};
+const disabledStyle = css `
+  cursor: default;
+  border: 2px solid ${theme.colors.gray.light1};
+`;
+const checkedStyle = (color) => css `
+  svg {
+    fill: #fefefe;
+    opacity: 1;
+  }
+
+  :hover {
+  }
+
+  background: ${theme.colors[color].main};
+  border: 2px solid ${theme.colors[color].main};
+`;
+const checkedDisabledStyle = css `
+  background: ${theme.colors.gray.light1};
+`;
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' }) `
+  display: none;
+`;
+const CheckboxWrapper = styled.label `
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  border: 2px solid ${theme.colors.gray.light1};
+  border-radius: 3px;
+
+  ${props => sizes[props.size]};
+
+  svg {
+    opacity: 0;
+  }
+
+  ${props => props.isChecked && checkedStyle(props.color)};
+  ${props => props.isDisabled && disabledStyle};
+
+  ${props => props.isChecked && props.isDisabled && checkedDisabledStyle};
+`;
+const CheckBox = ({ name = generateNameHash('check-box'), isDisabled = false, size = 'regular', checked, color = 'secondary', onClick, ...rest }) => (jsxs(IconButton, Object.assign({ onClick: onClick, isActive: checked, isDisabled: isDisabled, color: color }, { children: [jsx(HiddenCheckbox, Object.assign({}, rest, { "data-validate": "checked", name: name, id: name, disabled: isDisabled }), void 0), jsx(CheckboxWrapper, Object.assign({ htmlFor: name, size: size, color: color, isChecked: checked, isDisabled: isDisabled }, { children: jsx(CheckIcon, {}, void 0) }), void 0)] }), void 0));
+
+export { CheckBox, CheckBox as default };

package/esm/components/Chip/index.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { fadedColor } from '../../shared/helpers.js';
+import theme from '../../theme.js';
+
+const getBackgroundColor = ({ isDisabled, isActive, activeColor, }) => {
+    if (isActive && isDisabled) {
+        return fadedColor(theme.colors[activeColor].main, 0.5);
+    }
+    if (isDisabled) {
+        return theme.colors.gray.light4;
+    }
+    if (isActive) {
+        return theme.colors[activeColor].main;
+    }
+    return 'transparent';
+};
+const getColor = ({ isActive, isDisabled }) => {
+    if (isActive || (isActive && isDisabled)) {
+        return theme.colors.text.light;
+    }
+    if (isDisabled) {
+        return theme.colors.text.disabled;
+    }
+    return theme.colors.text.dark;
+};
+const getFontSize = (size = 'smaller') => {
+    const sizes = {
+        smaller: '0.8125rem',
+        small: '1rem',
+        regular: '1rem',
+        large: '1.25rem',
+    };
+    return sizes[size];
+};
+const Item = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-size: ${({ size }) => getFontSize(size)};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  display: inline-block;
+  cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'auto')};
+  align-items: center;
+  background: ${getBackgroundColor};
+  color: ${getColor};
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ isActive, isDisabled }) => !isActive && !isDisabled ? theme.colors.background.dark : 'transparent'};
+  border-radius: 1.293rem;
+`;
+const ContentWrapper = styled.span `
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+const Chip = ({ activeColor = 'primary', children, component = 'div', isActive, isDisabled, onClick, size, ...props }) => {
+    const handleClick = (e) => {
+        if (!isDisabled && onClick) {
+            onClick(e);
+        }
+    };
+    return (jsx(Item, Object.assign({}, props, { as: component, activeColor: activeColor, isDisabled: isDisabled, isActive: isActive, size: size }, { children: jsx(ContentWrapper, Object.assign({ onClick: handleClick }, { children: children }), void 0) }), void 0));
+};
+
+export { Chip, Chip as default };

package/esm/components/DayPicker/DayPickerNavBar.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import Arrow$1 from '../Icons/Arrow.js';
+import theme from '../../theme.js';
+import { BodyText } from '../../typography/BodyText/index.js';
+import { formatMonthTitle } from './localeUtils.js';
+
+const NavBarWrapper = styled.div `
+  display: flex;
+  justify-content: space-between;
+`;
+const NavTitle = styled(BodyText) `
+  color: ${theme.colors.text.dark};
+`;
+const NavButton = styled.button `
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  display: flex;
+  align-items: center;
+`;
+const Arrow = styled(Arrow$1) `
+  width: 16px;
+  height: 16px;
+  fill: ${theme.colors.gray.dark3};
+`;
+const BackArrow = styled(Arrow) `
+  transform: rotate(90deg);
+`;
+const ForwardArrow = styled(Arrow) `
+  transform: rotate(-90deg);
+`;
+const DayPickerNavBar = ({ month, onPreviousClick, onNextClick, locale, }) => (jsxs(NavBarWrapper, { children: [jsx(NavButton, Object.assign({ onClick: () => onPreviousClick() }, { children: jsx(BackArrow, { title: "prev-month" }, void 0) }), void 0), jsx(NavTitle, Object.assign({ as: "h3" }, { children: formatMonthTitle(month, locale) }), void 0), jsx(NavButton, Object.assign({ onClick: () => onNextClick() }, { children: jsx(ForwardArrow, { title: "next-month" }, void 0) }), void 0)] }, void 0));
+
+export { DayPickerNavBar as default };

package/esm/components/DayPicker/index.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react-day-picker/lib/style.css';
+import ReactDayPicker from 'react-day-picker';
+import styled from 'styled-components';
+import theme from '../../theme.js';
+import DayPickerNavBar from './DayPickerNavBar.js';
+import { MONTHS, WEEKDAYS_LONG, WEEKDAYS_SHORT, FIRST_DAY_OF_THE_WEEK } from './localeUtils.js';
+import '../Icons/Arrow.js';
+import '../../typography/BodyText/index.js';
+
+const DayPickerWrapper = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  .DayPicker-wrapper {
+    &:focus {
+      outline: none;
+    }
+  }
+  .DayPicker-Weekday {
+    color: ${({ theme }) => theme.colors.gray.light1};
+  }
+  .DayPicker-Day {
+    font-size: 12px;
+    padding: 14px;
+    font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+    color: ${({ theme }) => theme.colors.text.dark};
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 4px ${theme.colors.gray.dark3};
+    }
+    &:not(.DayPicker--interactionDisabled):not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) {
+      &:focus {
+        box-shadow: 0 0 4px ${theme.colors.gray.dark3};
+      }
+      &:hover {
+        background-color: rgba(253, 171, 74, 0.25);
+      }
+    }
+    &.DayPicker-Day--disabled {
+      color: ${theme.colors.gray.dark3};
+    }
+  }
+`;
+const modifiersStyles = {
+    selected: {
+        color: theme.colors.text.light,
+        background: theme.colors.primary.main,
+        fontWeight: 700,
+    },
+};
+const DayPicker = ({ locale = 'sv', ...props }) => {
+    return (jsx(DayPickerWrapper, { children: jsx(ReactDayPicker, Object.assign({}, props, { locale: locale, months: MONTHS[locale], weekdaysLong: WEEKDAYS_LONG[locale], weekdaysShort: WEEKDAYS_SHORT[locale], firstDayOfWeek: FIRST_DAY_OF_THE_WEEK[locale], navbarElement: navProps => (jsx(DayPickerNavBar, Object.assign({}, navProps, { locale: locale }), void 0)), captionElement: jsx("div", {}, void 0), modifiersStyles: modifiersStyles }), void 0) }, void 0));
+};
+
+export { DayPicker, DayPicker as default };

package/esm/components/DayPicker/localeUtils.js

@@ -0,0 +1,52 @@
+const MONTHS = {
+    sv: [
+        'Januari',
+        'Februari',
+        'Mars',
+        'April',
+        'Maj',
+        'Juni',
+        'Juli',
+        'Augusti',
+        'September',
+        'Oktober',
+        'November',
+        'December',
+    ],
+    en: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+};
+const WEEKDAYS_LONG = {
+    sv: ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag'],
+    en: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+    ],
+};
+const WEEKDAYS_SHORT = {
+    sv: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
+    en: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+};
+const FIRST_DAY_OF_THE_WEEK = { sv: 1, en: 1 };
+const formatMonthTitle = (d, locale = 'sv') => {
+    return `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`;
+};
+
+export { FIRST_DAY_OF_THE_WEEK, MONTHS, WEEKDAYS_LONG, WEEKDAYS_SHORT, formatMonthTitle };

package/esm/components/Dialog/index.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+import { Button } from '../Button/index.js';
+import { Modal } from '../Modal/index.js';
+import { TinyTitle } from '../../typography/Heading/index.js';
+import '../../theme.js';
+import '../Spinner/index.js';
+import '../../typography/ButtonText/index.js';
+import 'react';
+import 'react-dom';
+import 'react-transition-group';
+import '../Icons/Close.js';
+
+const Content = styled.div `
+  padding-top: 1rem;
+`;
+const Header = styled.div `
+  top: 20px;
+  left: 32px;
+  position: absolute;
+`;
+const Title = styled(TinyTitle) `
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  margin: 0;
+`;
+const ButtonWrapper = styled.div `
+  display: flex;
+  justify-content: space-between;
+  ${mq('tablet')} {
+    justify-content: flex-start;
+  }
+  overflow-x: hidden;
+`;
+const SecondaryActionButton = styled(Button) `
+  overflow-x: hidden;
+  margin-right: 2rem;
+  justify-content: center;
+  width: 100%;
+  max-width: 110px;
+`;
+const PrimaryActionButton = styled(Button) `
+  justify-content: center;
+  width: 100%;
+  max-width: 245px;
+`;
+const Dialog = ({ isOpen, title, children, modalStyles, titleStyles, primaryButtonText, primaryButtonStyles, secondaryButtonStyles, secondaryButtonText, primaryButtonAction, secondaryButtonAction, onClose, }) => {
+    return (jsxs(Modal, Object.assign({ contentStyles: modalStyles, isOpen: isOpen, onClose: onClose }, { children: [title && (jsx(Header, { children: jsx(Title, Object.assign({ style: titleStyles }, { children: title }), void 0) }, void 0)), jsx(Content, { children: children }, void 0), jsxs(ButtonWrapper, { children: [secondaryButtonAction && (jsx(SecondaryActionButton, Object.assign({ style: secondaryButtonStyles, onClick: secondaryButtonAction, variant: "outline", color: "neutral" }, { children: secondaryButtonText }), void 0)), primaryButtonAction && (jsx(PrimaryActionButton, Object.assign({ style: primaryButtonStyles, onClick: primaryButtonAction, variant: "solid", color: "success" }, { children: primaryButtonText }), void 0))] }, void 0)] }), void 0));
+};
+
+export { Dialog, Dialog as default };

package/esm/components/ErrorMessage/index.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+
+const ErrorContainer = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  background: ${({ theme }) => theme.colors.error.main};
+  color: white;
+  border-radius: 0.25rem;
+  font-size: 13px;
+  padding: 10px;
+  ${({ centered }) => centered && `text-align: center;`}
+`;
+const ErrorMessage = ({ children, centered, ...props }) => (jsx(ErrorContainer, Object.assign({ centered: centered }, props, { children: children }), void 0));
+
+export { ErrorMessage, ErrorMessage as default };

package/esm/components/FieldLabel.js

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+
+const activePadding = '0.5rem';
+const activeStyles = (translateY) => css `
+  background-color: ${props => props.theme.colors.background.light};
+  transform: scale(0.75) translateY(${translateY});
+  transform-origin: 0 0;
+  padding: 0 ${activePadding};
+  left: ${activePadding};
+`;
+const focusStyles = css `
+  color: ${props => props.theme.colors.text.dark};
+`;
+const disabledStyles = css `
+  color: ${props => props.theme.colors.gray.light1};
+  background-color: ${props => props.theme.colors.background.light};
+`;
+const errorStyles = css `
+  color: ${props => props.theme.colors.error.main};
+`;
+const centerStyles = css `
+  text-align: center;
+  width: 100%;
+  left: 0;
+`;
+// eslint-disable-next-line prettier/prettier
+const Label = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  top: ${props => (props.height ? `${props.height}rem` : '0.9rem')};
+
+  /* Left padding on input + one character size */
+  left: calc(0.75rem + 2px);
+  transition: 150ms;
+
+  /* Text styles */
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+
+  color: ${props => props.theme.colors.gray.dark1};
+
+  ${props => props.centered && centerStyles}
+  ${props => (props.hasValue || props.isFocused) &&
+    activeStyles(props.height ? `-${(props.height + 0.25) * 1.35}rem` : '-1.75rem')}
+  ${props => props.isFocused && focusStyles}
+  ${props => props.disabled && disabledStyles}
+  ${props => props.hasError && errorStyles}
+`;
+
+export { Label };

package/esm/components/Header/Hamburger.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+
+const IconWrapper = styled.button `
+  appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  outline: none;
+  display: flex;
+  align-items: center;
+  margin-right: 1.5rem;
+  margin-left: auto;
+  ${mq('laptop')} {
+    display: none;
+  }
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: ${({ theme }) => theme.colors.text.dark};
+  }
+  span {
+    display: none;
+    font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+    font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+    font-size: 1rem;
+    margin-right: 0.75rem;
+
+    ${mq('tablet')} {
+      display: inline;
+    }
+  }
+`;
+const Hamburger = ({ onClick = () => { }, text }) => (jsxs(IconWrapper, Object.assign({ onClick: onClick }, { children: [jsx("span", { children: text }, void 0), jsxs("svg", { children: [jsx("symbol", Object.assign({ id: "icon-hamburger", viewBox: "0 0 16 12" }, { children: jsx("path", { d: "M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z" }, void 0) }), void 0), jsx("use", { xlinkHref: "#icon-hamburger" }, void 0)] }, void 0)] }), void 0));
+
+export { Hamburger as default };

package/esm/components/Header/Link.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+import theme from '../../theme.js';
+
+const LinkItem = styled.li `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  &:nth-child(n + 4) {
+    display: none;
+  }
+
+  ${mq('laptop')} {
+    &:nth-child(n + 4) {
+      display: inherit;
+    }
+  }
+`;
+const CommonLink = styled.a `
+  border-radius: 0.25rem;
+  padding: 0.75rem 1.5rem;
+  transition: 200ms;
+  color: ${theme.colors.text.dark};
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    color: ${theme.colors.primary.main};
+    background: ${theme.colors.gray.light4};
+  }
+`;
+const Link = ({ to, component, text, ...rest }) => (jsx(LinkItem, { children: component || (jsx(CommonLink, Object.assign({ href: to }, rest, { children: text }), void 0)) }, void 0));
+
+export { Link as default };