@kvdbil/components 3.3.5-0 → 3.3.5-5

package/components/OffCanvas/index.js

@@ -1,124 +0,0 @@
-import { useRef } from 'react';
-import { createPortal } from 'react-dom';
-import styled from 'styled-components';
-import { CSSTransition } from 'react-transition-group';
-import Overlay from './Overlay.js';
-import { useOutsideClick } from './useClickOutside.js';
-
-const defaultAnimationName = "offCanvasAnimation";
-const defaultTransitionProps = {
-  timeout: {
-    enter: 300,
-    exit: 300
-  },
-  mountOnEnter: true,
-  unmountOnExit: true
-};
-const Container = styled.div`
-  ${({
-  animationName,
-  animationDuration,
-  width,
-  from,
-  backgroundColor,
-  theme
-}) => {
-  return `
-    position: fixed;
-    z-index: 1001;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    ${from === "left" ? "left: 0;" : "right: 0;"}
-    background-color: ${backgroundColor || theme.colors.background.light};
-    width: ${width};
-    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
-
-    
-    &.${animationName}--right-enter {
-      transform: translate3d(${width}, 0, 0);
-    }
-    
-    &.${animationName}--right-enter.${animationName}--right-enter-active {
-      transform: translate3d(0, 0, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-    
-    &.${animationName}--right-exit {
-      transform: translate3d(0, 0, 0);
-    }
-    
-    &.${animationName}--right-exit.${animationName}--right-exit-active {
-      transform: translate3d(${width}, 0, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-    
-    &.${animationName}--left-enter {
-      transform: translate3d(-${width}, 0, 0);
-    }
-    
-    &.${animationName}--left-enter.${animationName}--left-enter-active {
-      transform: translate3d(0, 0, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-    
-    &.${animationName}--left-exit {
-      transform: translate3d(0, 0, 0);
-    }
-    
-    &.${animationName}--left-exit.${animationName}--left-exit-active {
-      transform: translate3d(-${width}, 0, 0);
-      transition: transform ${animationDuration}ms ease-in-out;
-    }
-  `;
-}}
-`;
-const Contents = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-`;
-const OffCanvas = ({
-  animationName = defaultAnimationName,
-  animationDuration = 300,
-  backgroundColor,
-  backgroundOverlay,
-  children,
-  from = "right",
-  isOpen,
-  onClickOutside,
-  width = "375px",
-  withPortal,
-  transitionProps
-}) => {
-  const contentRef = useRef(null);
-  useOutsideClick(contentRef, () => onClickOutside == null ? void 0 : onClickOutside());
-  if (backgroundOverlay && !onClickOutside) {
-    console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");
-  }
-  const className = `${animationName}--${from}`;
-  const component = /* @__PURE__ */ React.createElement(React.Fragment, null, backgroundOverlay && /* @__PURE__ */ React.createElement(Overlay, {
-    isOpen
-  }), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CSSTransition, {
-    in: isOpen,
-    className: `${animationName} ${className}`,
-    classNames: className,
-    ...defaultTransitionProps,
-    ...transitionProps
-  }, /* @__PURE__ */ React.createElement(Container, {
-    ref: contentRef,
-    animationName,
-    animationDuration,
-    backgroundColor,
-    from,
-    width
-  }, /* @__PURE__ */ React.createElement(Contents, {
-    className: `${animationName}-content`
-  }, children)))));
-  return withPortal ? createPortal(component, document.body) : component;
-};
-
-export { OffCanvas, OffCanvas as default };

package/components/OffCanvas/useClickOutside.js

@@ -1,17 +0,0 @@
-import { useCallback, useEffect } from 'react';
-
-const useOutsideClick = (ref, callback) => {
-  const handleClick = useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      callback();
-    }
-  }, [callback, ref]);
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClick);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-    };
-  }, [handleClick]);
-};
-
-export { useOutsideClick };

package/components/RadioButton/index.js

@@ -1,139 +0,0 @@
-import styled, { css } from 'styled-components';
-import { generateNameHash } from '../../shared/helpers.js';
-import theme from '../../theme.js';
-import IconButton from '../IconButton.js';
-
-const regularSize = css`
-  .circle {
-    &--outer {
-      height: 24px;
-      width: 24px;
-    }
-
-    &--inner {
-      height: 100%;
-      width: 100%;
-      transform: scale(0.6);
-    }
-  }
-`;
-const largeSize = css`
-  .circle {
-    &--outer {
-      height: 32px;
-      width: 32px;
-    }
-
-    &--inner {
-      height: 100%;
-      width: 100%;
-      transform: scale(0.6);
-    }
-  }
-`;
-const sizes = {
-  regular: regularSize,
-  large: largeSize
-};
-const disabledStyle = css`
-  cursor: default;
-
-  .circle {
-    &--inner {
-      background-color: ${theme.colors.gray.light1};
-    }
-
-    &--outer {
-      border: 2px solid ${theme.colors.gray.light1};
-    }
-  }
-`;
-const checkedDisabledStyle = css`
-  .circle {
-    &--inner {
-      opacity: 1;
-      background-color: ${theme.colors.gray.light1};
-    }
-  }
-`;
-const checkedStyle = (color) => css`
-  .circle {
-    &--inner {
-      opacity: 1;
-      background-color: ${theme.colors[color].main};
-    }
-
-    &--outer {
-      border: 2px solid ${theme.colors[color].main};
-    }
-  }
-`;
-const RadioButtonWrapper = styled.label`
-  cursor: pointer;
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-
-  ${(props) => sizes[props.size]};
-
-  ${(props) => !props.isDisabled && props.isChecked && checkedStyle(props.color)};
-  ${(props) => props.isDisabled && disabledStyle};
-
-  ${(props) => props.isChecked && props.isDisabled && checkedDisabledStyle};
-`;
-const HiddenRadioButton = styled.input`
-  display: none;
-`;
-const OuterCircle = styled.span`
-  display: flex;
-  box-sizing: border-box;
-  border-radius: 50%;
-
-  border: 2px solid ${theme.colors.gray.light1};
-`;
-const InnerCircle = styled.span`
-  box-sizing: border-box;
-  opacity: 0;
-  margin: auto;
-  border-radius: 50%;
-  background-color: ${theme.colors.gray.light1};
-
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-const RadioButton = ({
-  name = generateNameHash("radio-button"),
-  size = "regular",
-  checked = false,
-  isDisabled = false,
-  color = "secondary",
-  onChange,
-  ...props
-}) => /* @__PURE__ */ React.createElement(IconButton, {
-  onClick: onChange,
-  isActive: checked,
-  isDisabled,
-  color
-}, /* @__PURE__ */ React.createElement(HiddenRadioButton, {
-  "data-validate": "checked",
-  type: "radio",
-  name,
-  id: name,
-  onChange,
-  disabled: isDisabled,
-  ...props
-}), /* @__PURE__ */ React.createElement(RadioButtonWrapper, {
-  htmlFor: name,
-  size,
-  color,
-  isChecked: checked,
-  isDisabled
-}, /* @__PURE__ */ React.createElement(OuterCircle, {
-  className: "circle circle--outer"
-}, /* @__PURE__ */ React.createElement(InnerCircle, {
-  className: "circle circle--inner"
-}))));
-
-export { RadioButton, RadioButton as default };

package/components/Range/index.js

@@ -1,73 +0,0 @@
-import styled from 'styled-components';
-import theme from '../../theme.js';
-import { CaptionLink } from '../../typography/BodyText/index.js';
-import { Display1 } from '../../typography/Heading/index.js';
-import '../../shared/media-queries.js';
-
-const Container = styled.div`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  align-items: center;
-`;
-const RangeWrapper = styled.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-`;
-const DisplayValue = styled(Display1)`
-  color: ${({ color }) => theme.colors[color].main};
-  line-height: 1;
-  margin-top: 0;
-  margin-bottom: 0;
-`;
-const Value = styled(CaptionLink)`
-  flex: 1;
-  color: ${theme.colors.gray.light1};
-  line-height: 1.2;
-  position: relative;
-  text-align: center;
-  &:before {
-    content: '';
-    background: ${({ color }) => theme.colors[color].main};
-    margin: 0 auto 2px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 12px;
-    top: 34px;
-    position: relative;
-    width: 2px;
-  }
-`;
-const MinValue = styled(Value)`
-  &:after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    background: ${({ color }) => theme.colors[color].main};
-    top: 40px;
-    left: 50%;
-    transform: translate(0, -50%);
-  }
-`;
-const Range = ({
-  displayValue,
-  maxValue,
-  minValue,
-  color = "primary"
-}) => {
-  return /* @__PURE__ */ React.createElement(Container, null, displayValue && /* @__PURE__ */ React.createElement(DisplayValue, {
-    as: "span",
-    color
-  }, displayValue), /* @__PURE__ */ React.createElement(RangeWrapper, null, /* @__PURE__ */ React.createElement(MinValue, {
-    as: "span",
-    color
-  }, minValue), /* @__PURE__ */ React.createElement(Value, {
-    as: "span",
-    color
-  }, maxValue)));
-};
-
-export { Range, Range as default };

package/components/Select/components/test-icon.js

@@ -1,12 +0,0 @@
-const TestIcon = () => /* @__PURE__ */ React.createElement("svg", {
-  viewBox: "0 0 896.003 896.004",
-  height: "18px",
-  width: "18px",
-  y: "0px",
-  x: "0px",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React.createElement("path", {
-  d: "M850.321,663.513C774.05,802.057,626.63,896.004,457.168,896.004c-247.688,0-448.478-200.578-448.478-448.002 S209.479,0,457.168,0c203.805,0,375.577,135.92,430.145,321.882L428.365,478.82L850.321,663.513z M614.342,318.945 c43.631,0,78.998-35.7,78.998-79.736c0-44.039-35.367-79.735-78.998-79.735c-43.63,0-78.999,35.696-78.999,79.735 C535.343,283.245,570.712,318.945,614.342,318.945"
-}));
-
-export { TestIcon };

package/components/Select/index.js

@@ -1,215 +0,0 @@
-import { useState } from 'react';
-import ReactSelect from 'react-select';
-import styled from 'styled-components';
-import { DEFAULT_TRANSITION_MS } from '../../shared/constants.js';
-import { fadedColor } from '../../shared/helpers.js';
-import theme from '../../theme.js';
-import { Label } from '../FieldLabel.js';
-
-const Container = styled.div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  position: relative;
-`;
-const prefixStyles = (hasPrefix) => hasPrefix && {
-  paddingLeft: "2.5rem"
-};
-const disabledStyles = (isDisabled) => isDisabled && {
-  border: `1px solid ${theme.colors.gray.light1}`,
-  color: theme.colors.gray.dark1,
-  fill: theme.colors.gray.light1
-};
-const Prefix = styled.div`
-  position: absolute;
-  z-index: 1;
-  top: 0.5rem;
-  margin: 0.35rem 0.75rem;
-
-  fill: ${theme.colors.gray.dark5};
-  transition: ${DEFAULT_TRANSITION_MS};
-
-  ${(props) => props.isDisabled && `
-    fill: ${theme.colors.gray.light1};
-`}
-
-  ${(props) => props.isFocused && `
-    fill: ${props.theme.colors.text.dark};
-`}
-`;
-const HelperText = styled.span`
-  display: block;
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  font-size: 0.81rem;
-
-  margin-top: 0.25rem;
-  margin-left: 0.85rem;
-
-  color: ${({ hasError }) => hasError ? theme.colors.error.main : theme.colors.text.dark};
-`;
-const Arrow = (props) => /* @__PURE__ */ React.createElement("svg", {
-  ...props
-}, /* @__PURE__ */ React.createElement("symbol", {
-  id: "icon-arrow",
-  viewBox: "0 0 19 19"
-}, /* @__PURE__ */ React.createElement("path", {
-  d: "M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"
-})), /* @__PURE__ */ React.createElement("use", {
-  xlinkHref: "#icon-arrow"
-}));
-const DropdownArrow = styled(Arrow)`
-  width: 0.8rem;
-  height: 0.8rem;
-  margin: 0 0.5rem;
-  ${(props) => props.$isFocused && `color: ${props.$theme.colors.text.dark}`}
-  ${(props) => props.$isDisabled && `color: ${props.$theme.colors.gray.dark1}`}
-
-
-  path {
-    fill: currentColor;
-    stroke: currentColor;
-  }
-
-  transition: transform ${DEFAULT_TRANSITION_MS};
-
-  transform: ${(props) => props.$isMenuOpen ? "rotate(-180deg)" : "rotate(0deg)"};
-  transform-origin: 50% 60%;
-`;
-const getBorderColor = (isFocused, hasError) => {
-  if (hasError) {
-    return theme.colors.error.main;
-  }
-  return isFocused ? theme.colors.text.dark : theme.colors.gray.light1;
-};
-const DropdownIndicator = ({
-  selectProps: { menuIsOpen = false },
-  isFocused = false,
-  isDisabled
-}) => {
-  return /* @__PURE__ */ React.createElement(DropdownArrow, {
-    $isDisabled: isDisabled,
-    $isFocused: isFocused,
-    $isMenuOpen: menuIsOpen,
-    $theme: theme
-  });
-};
-const Select = ({
-  color = "primary",
-  isDisabled = false,
-  placeholder = "",
-  helperText,
-  height,
-  className,
-  hasError = false,
-  onBlur = () => null,
-  onFocus = () => null,
-  forwardRef,
-  onInputChange = () => null,
-  ...props
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const handleInputChange = (newValue, actionMeta) => {
-    onInputChange(newValue, actionMeta);
-    setInputValue(newValue);
-  };
-  const getOptionColor = ({ isSelected, isFocused: isFocused2 }) => {
-    if (isSelected) {
-      return fadedColor(theme.colors[color].main, 0.72);
-    }
-    if (isFocused2) {
-      return fadedColor(theme.colors[color].main, 0.18);
-    }
-    return "white";
-  };
-  const handleFocus = (event) => {
-    setIsFocused(true);
-    onFocus(event);
-  };
-  const handleBlur = (event) => {
-    setIsFocused(false);
-    onBlur(event);
-  };
-  const borderColor = getBorderColor(isFocused, hasError);
-  return /* @__PURE__ */ React.createElement(Container, {
-    className
-  }, props.label && /* @__PURE__ */ React.createElement(Label, {
-    height,
-    isFocused,
-    hasValue: Boolean(props.value || inputValue),
-    disabled: isDisabled,
-    theme,
-    hasError
-  }, props.label), props.prefix && /* @__PURE__ */ React.createElement(Prefix, {
-    isDisabled,
-    isFocused
-  }, props.prefix), /* @__PURE__ */ React.createElement(ReactSelect, {
-    ...props,
-    ref: forwardRef,
-    isDisabled,
-    onInputChange: handleInputChange,
-    placeholder,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    styles: {
-      control: (styles) => ({
-        ...styles,
-        fontFamily: theme.typography.fontBaseFamily,
-        fontSize: "1rem",
-        fontWeight: 400,
-        cursor: "pointer",
-        padding: "0.7rem 0.75rem",
-        backgroundColor: theme.colors.background.light,
-        borderColor,
-        boxShadow: "none",
-        "&:hover": {
-          borderColor: "none"
-        },
-        ...disabledStyles(isDisabled),
-        ...prefixStyles(Boolean(props.prefix))
-      }),
-      placeholder: (styles) => ({
-        ...styles,
-        display: !isFocused ? "none" : "static"
-      }),
-      singleValue: (styles) => ({
-        ...styles,
-        ...{
-          maxWidth: "calc(100% - 3.3rem)",
-          width: "calc(100% - 3.3rem)"
-        }
-      }),
-      menu: (styles) => ({
-        ...styles,
-        zIndex: 2,
-        padding: "0.25rem 0"
-      }),
-      option: (styles, { isSelected, isFocused: isFocused2 }) => {
-        return {
-          ...styles,
-          padding: "1rem",
-          "&:hover": {
-            background: getOptionColor({ isFocused: true, isSelected })
-          },
-          background: getOptionColor({ isSelected, isFocused: isFocused2 }),
-          cursor: "pointer",
-          ...prefixStyles(Boolean(props.prefix))
-        };
-      },
-      valueContainer: (styles) => ({
-        ...styles,
-        ...{
-          position: "static",
-          padding: height ? `${height - 1}rem 0 ` : 0,
-          height: height ? "auto" : "21px"
-        }
-      })
-    },
-    components: {
-      IndicatorSeparator: () => null,
-      DropdownIndicator
-    }
-  }), helperText && /* @__PURE__ */ React.createElement(HelperText, {
-    hasError
-  }, helperText));
-};
-
-export { Select, Select as default };