@kvdbil/components 3.3.5-2 → 4.0.0

package/esm/components/Button/index.js

@@ -1,161 +0,0 @@
-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';
-
-const getFontStyles = (size) => {
-  switch (size) {
-    case "smaller":
-      return ButtonSmallTextStyle;
-    case "small":
-      return ButtonRegularTextStyle;
-    case "regular":
-      return ButtonRegularTextStyle;
-    case "large":
-      return ButtonLargeTextStyle;
-    default:
-      return ButtonRegularTextStyle;
-  }
-};
-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"};
-`;
-const solidColorStyles = (theme2) => (color) => `
-  color: white;
-  border-color: ${theme2.colors[color].main};
-  background-color: ${theme2.colors[color].main};
-
-  :hover {
-    border-color: ${theme2.colors[color].light};
-    background-color: ${theme2.colors[color].light};
-  }
-
-  :active {
-    border-color: ${theme2.colors[color].dark};
-    background-color: ${theme2.colors[color].dark}
-  }
-
-  :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme2.colors[color].dark};
-  }
-`;
-const outlineColorStyles = (theme2) => (color) => `
-  color: ${theme2.colors[color].main};
-  border-color: ${theme2.colors[color].main};
-  background-color: transparent;
-
-  :hover {
-      color: white;
-      border-color: ${theme2.colors[color].light};
-      background-color: ${theme2.colors[color].light};
-  }
-
-  :active {
-    color: white;
-    border-color: ${theme2.colors[color].dark};
-    background-color: ${theme2.colors[color].dark};
-  }
-
-  :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme2.colors[color].dark};
-  }
-`;
-const flatColorStyles = (theme2) => (color) => `
-  color: ${theme2.colors[color].main};
-  border-color: transparent;
-  background-color: transparent;
-
-  :hover {
-    color: ${theme2.colors[color].dark};
-  }
-
-  :active {
-    color: ${theme2.colors[color].light};
-  }
-`;
-const disabledCommonColorStyles = (theme2) => `
-  background-color: ${theme2.colors.gray.light4};
-  border-color: ${theme2.colors.gray.light4};
-  color: ${theme2.colors.gray.light1};
-  cursor: not-allowed;
-`;
-const disabledFlatColorStyles = (theme2) => `
-  border-color: transparent;
-  background-color: transparent;
-  color: ${theme2.colors.gray.light1};
-  cursor: not-allowed;
-`;
-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: theme2 }) => css`
-    ${!disabled && variant === "solid" && solidColorStyles(theme2)(color)}
-    ${!disabled && variant === "outline" && outlineColorStyles(theme2)(color)}
-    ${!disabled && variant === "flat" && flatColorStyles(theme2)(color)}
-    ${disabled && variant !== "flat" && disabledCommonColorStyles(theme2)}
-    ${disabled && variant === "flat" && disabledFlatColorStyles(theme2)}
-  `}
-`;
-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 /* @__PURE__ */ React.createElement(Root, {
-    ...props,
-    color,
-    disabled: isDisabled || isLoading,
-    fullWidth,
-    theme,
-    variant,
-    size,
-    isLoading
-  }, isLoading ? /* @__PURE__ */ React.createElement(LoadingSpinner, {
-    color: "neutral",
-    size: spinnerSizes[size]
-  }) : children);
-};
-
-export { Button, Button as default };

package/esm/components/Card/index.js

@@ -1,19 +0,0 @@
-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 /* @__PURE__ */ React.createElement(CardWrapper, {
-    topBorder: props.topBorder,
-    boxShadow: props.boxShadow
-  }, props.children);
-};
-
-export { Card, Card as default };

package/esm/components/CheckBox/index.js

@@ -1,100 +0,0 @@
-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
-}) => /* @__PURE__ */ React.createElement(IconButton, {
-  onClick,
-  isActive: checked,
-  isDisabled,
-  color
-}, /* @__PURE__ */ React.createElement(HiddenCheckbox, {
-  ...rest,
-  "data-validate": "checked",
-  name,
-  id: name,
-  disabled: isDisabled
-}), /* @__PURE__ */ React.createElement(CheckboxWrapper, {
-  htmlFor: name,
-  size,
-  color,
-  isChecked: checked,
-  isDisabled
-}, /* @__PURE__ */ React.createElement(CheckIcon, null)));
-
-export { CheckBox, CheckBox as default };

package/esm/components/Chip/index.js

@@ -1,90 +0,0 @@
-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: theme2 }) => theme2.typography.fontAlternativeFamily};
-  font-size: ${({ size }) => getFontSize(size)};
-  font-weight: ${({ theme: theme2 }) => theme2.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 /* @__PURE__ */ React.createElement(Item, {
-    ...props,
-    as: component,
-    activeColor,
-    isDisabled,
-    isActive,
-    size
-  }, /* @__PURE__ */ React.createElement(ContentWrapper, {
-    onClick: handleClick
-  }, children));
-};
-
-export { Chip, Chip as default };

package/esm/components/DayPicker/DayPickerNavBar.js

@@ -1,52 +0,0 @@
-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
-}) => /* @__PURE__ */ React.createElement(NavBarWrapper, null, /* @__PURE__ */ React.createElement(NavButton, {
-  onClick: () => onPreviousClick()
-}, /* @__PURE__ */ React.createElement(BackArrow, {
-  title: "prev-month"
-})), /* @__PURE__ */ React.createElement(NavTitle, {
-  as: "h3"
-}, formatMonthTitle(month, locale)), /* @__PURE__ */ React.createElement(NavButton, {
-  onClick: () => onNextClick()
-}, /* @__PURE__ */ React.createElement(ForwardArrow, {
-  title: "next-month"
-})));
-
-export { DayPickerNavBar as default };

package/esm/components/DayPicker/index.js

@@ -1,66 +0,0 @@
-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: theme2 }) => theme2.typography.fontAlternativeFamily};
-  .DayPicker-wrapper {
-    &:focus {
-      outline: none;
-    }
-  }
-  .DayPicker-Weekday {
-    color: ${({ theme: theme2 }) => theme2.colors.gray.light1};
-  }
-  .DayPicker-Day {
-    font-size: 12px;
-    padding: 14px;
-    font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
-    color: ${({ theme: theme2 }) => theme2.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 /* @__PURE__ */ React.createElement(DayPickerWrapper, null, /* @__PURE__ */ React.createElement(ReactDayPicker, {
-    ...props,
-    locale,
-    months: MONTHS[locale],
-    weekdaysLong: WEEKDAYS_LONG[locale],
-    weekdaysShort: WEEKDAYS_SHORT[locale],
-    firstDayOfWeek: FIRST_DAY_OF_THE_WEEK[locale],
-    navbarElement: (navProps) => /* @__PURE__ */ React.createElement(DayPickerNavBar, {
-      ...navProps,
-      locale
-    }),
-    captionElement: /* @__PURE__ */ React.createElement("div", null),
-    modifiersStyles
-  }));
-};
-
-export { DayPicker, DayPicker as default };

package/esm/components/DayPicker/localeUtils.js

@@ -1,52 +0,0 @@
-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\xF6ndag", "M\xE5ndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "L\xF6rdag"],
-  en: [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday"
-  ]
-};
-const WEEKDAYS_SHORT = {
-  sv: ["S\xF6", "M\xE5", "Ti", "On", "To", "Fr", "L\xF6"],
-  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

@@ -1,79 +0,0 @@
-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 /* @__PURE__ */ React.createElement(Modal, {
-    contentStyles: modalStyles,
-    isOpen,
-    onClose
-  }, title && /* @__PURE__ */ React.createElement(Header, null, /* @__PURE__ */ React.createElement(Title, {
-    style: titleStyles
-  }, title)), /* @__PURE__ */ React.createElement(Content, null, children), /* @__PURE__ */ React.createElement(ButtonWrapper, null, secondaryButtonAction && /* @__PURE__ */ React.createElement(SecondaryActionButton, {
-    style: secondaryButtonStyles,
-    onClick: secondaryButtonAction,
-    variant: "outline",
-    color: "neutral"
-  }, secondaryButtonText), primaryButtonAction && /* @__PURE__ */ React.createElement(PrimaryActionButton, {
-    style: primaryButtonStyles,
-    onClick: primaryButtonAction,
-    variant: "solid",
-    color: "success"
-  }, primaryButtonText)));
-};
-
-export { Dialog, Dialog as default };

package/esm/components/ErrorMessage/index.js

@@ -1,22 +0,0 @@
-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
-}) => /* @__PURE__ */ React.createElement(ErrorContainer, {
-  centered,
-  ...props
-}, children);
-
-export { ErrorMessage, ErrorMessage as default };

package/esm/components/FieldLabel.js

@@ -1,51 +0,0 @@
-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;
-`;
-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 };