@kvdbil/components 3.3.5-2 → 4.0.0

package/cjs/components/Snackbar/index.js

@@ -1,155 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React$1 = require('react');
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var components_Icons_CheckCircle = require('../Icons/CheckCircle.js');
-var components_Icons_Close = require('../Icons/Close.js');
-var components_Icons_ErrorCircle = require('../Icons/ErrorCircle.js');
-var components_Icons_InfoCircle = require('../Icons/InfoCircle.js');
-var reactTransitionGroup = require('react-transition-group');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const verticalStyles = {
-  top: styled.css`
-    top: 0;
-  `,
-  bottom: styled.css`
-    bottom: 0;
-  `
-};
-const horizontalStyles = {
-  right: styled.css`
-    right: 0;
-  `,
-  center: styled.css`
-    left: 50%;
-    transform: translate(-50%, 0);
-  `,
-  left: styled.css`
-    left: 0;
-  `
-};
-const animationDuration = 200;
-const transitionClassName = "anim";
-const Container = styled__default['default'].div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  position: fixed;
-  display: flex;
-  align-items: center;
-
-  line-height: 1rem;
-  margin: 1rem;
-
-  max-width: 630px;
-
-  border-radius: 0.4rem;
-  padding: 1.15rem 1.25rem;
-
-  font-weight: ${({ theme: theme2 }) => theme2.typography.fontBaseBoldWeight};
-  font-size: 0.875rem;
-
-  box-shadow: ${theme['default'].elevations.elevation8};
-  background-color: ${(props) => props.color !== "none" ? theme['default'].colors[props.color].main : theme['default'].colors.background.light};
-  color: ${(props) => props.color !== "none" ? theme['default'].colors.text.light : theme['default'].colors.text.dark};
-
-  ${(props) => verticalStyles[props.origin.vertical || "bottom"]}
-  ${(props) => horizontalStyles[props.origin.horizontal || "left"]}
-
-  transition: opacity ${animationDuration}ms ease-in;
-
-  &.${transitionClassName}-enter {
-    opacity: 0;
-  }
-  &.${transitionClassName}-enter-active {
-    opacity: 1;
-  }
-  &.${transitionClassName}-exit {
-    opacity: 1;
-  }
-  &.${transitionClassName}-exit-active {
-    opacity: 0;
-  }
-`;
-const Icon = styled__default['default'].div`
-  display: inline-flex;
-  margin: -0.25rem 0;
-  margin-right: 0.75rem;
-
-  ${(props) => props.type === "text" && "margin-right: 0;"}
-
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    fill: ${(props) => props.color !== "none" ? theme['default'].colors.background.light : theme['default'].colors.background.dark};
-  }
-`;
-const CloseIcon = styled__default['default'](Icon)`
-  cursor: pointer;
-
-  /* Bigger click area */
-  padding: 0.25rem;
-
-  /* Negate padding */
-  margin: -0.25rem;
-  margin-left: 0.5rem;
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-`;
-const Message = styled__default['default'].span`
-  flex: 1;
-`;
-const icons = {
-  error: /* @__PURE__ */ React.createElement(components_Icons_ErrorCircle['default'], null),
-  success: /* @__PURE__ */ React.createElement(components_Icons_CheckCircle['default'], null),
-  info: /* @__PURE__ */ React.createElement(components_Icons_InfoCircle['default'], null),
-  text: ""
-};
-const Snackbar = ({
-  message,
-  color = "none",
-  type = "info",
-  action,
-  isOpen,
-  origin = {},
-  onClose = () => {
-  },
-  onExited = () => {
-  },
-  autoHideDuration = 4e3,
-  ...props
-}) => {
-  React$1.useEffect(() => {
-    const timeout = setTimeout(onClose, autoHideDuration);
-    return () => clearTimeout(timeout);
-  }, [autoHideDuration, onClose]);
-  return /* @__PURE__ */ React.createElement(reactTransitionGroup.CSSTransition, {
-    in: isOpen,
-    timeout: animationDuration,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    onExited,
-    classNames: transitionClassName
-  }, /* @__PURE__ */ React.createElement(Container, {
-    ...props,
-    color,
-    origin
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    color,
-    type
-  }, icons[type]), /* @__PURE__ */ React.createElement(Message, null, message), action && action, /* @__PURE__ */ React.createElement(CloseIcon, {
-    color: color != null ? color : "none",
-    onClick: onClose
-  }, /* @__PURE__ */ React.createElement(components_Icons_Close['default'], null))));
-};
-
-exports.Snackbar = Snackbar;
-exports['default'] = Snackbar;

package/cjs/components/Spinner/index.js

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const getDuration = (speed) => {
-  const durations = {
-    slow: "2s",
-    default: "1s",
-    fast: "0.5s"
-  };
-  return durations[speed] || durations.default;
-};
-const getSize = (size) => {
-  const sizes = {
-    smaller: 1,
-    small: 2,
-    regular: 3,
-    large: 4
-  };
-  if (typeof size === "number") {
-    return size;
-  }
-  return sizes[size] || sizes.regular;
-};
-const spin = styled.keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const StyledSpinner = styled__default['default'].div`
-  display: inline-block;
-  border-radius: 50%;
-  border-top: ${({ theme: theme2, color, size }) => `${getSize(size) / 10}em solid ${theme2.colors[color].main}`};
-  border-bottom: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  border-right: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  border-left: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  width: ${({ size }) => getSize(size)}em;
-  height: ${({ size }) => getSize(size)}em;
-  animation: ${spin} ${({ speed }) => getDuration(speed)} infinite linear;
-  will-change: transform;
-`;
-const Spinner = ({
-  size = "regular",
-  color = "primary",
-  speed = "default",
-  ...props
-}) => /* @__PURE__ */ React.createElement(StyledSpinner, {
-  ...props,
-  role: "status",
-  "aria-live": "polite",
-  "aria-busy": "true",
-  size,
-  speed,
-  color,
-  theme: theme['default']
-});
-
-exports['default'] = Spinner;

package/cjs/components/Stepper/index.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var typography_Heading_index = require('../../typography/Heading/index.js');
-require('../../shared/media-queries.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Container = styled__default['default'].div`
-  min-height: 4rem;
-`;
-const Line = styled__default['default'].div`
-  margin: auto;
-  width: 2px;
-  height: 100%;
-  background-color: ${theme['default'].colors.primary.main};
-`;
-const Graphic = styled__default['default'].div`
-  margin-right: 0.75rem;
-`;
-const Step = styled__default['default'].div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  display: flex;
-  padding-bottom: 1rem;
-
-  &:last-child {
-    ${Line} {
-      display: none;
-    }
-  }
-`;
-const Circle = styled__default['default'].div`
-  width: 3rem;
-  height: 3rem;
-  border-radius: 3rem;
-
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${theme['default'].colors.primary.main};
-`;
-const CircleText = styled__default['default'](typography_Heading_index.Title)`
-  font-size: 1.5rem;
-  font-variant: lining-nums;
-`;
-const Stepper = ({ children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Container, {
-    ...props
-  }, children.map((step, index) => /* @__PURE__ */ React.createElement(Step, {
-    key: index
-  }, /* @__PURE__ */ React.createElement(Graphic, null, /* @__PURE__ */ React.createElement(Circle, null, /* @__PURE__ */ React.createElement(CircleText, null, index + 1)), /* @__PURE__ */ React.createElement(Line, null)), step)));
-};
-
-exports.Stepper = Stepper;

package/cjs/components/StepperAccordion/index.js

@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React$1 = require('react');
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var typography_Heading_index = require('../../typography/Heading/index.js');
-var components_Icons_CheckIcon = require('../Icons/CheckIcon.js');
-var components_Icons_Arrow = require('../Icons/Arrow.js');
-var shared_helpers = require('../../shared/helpers.js');
-var reactCollapse = require('react-collapse');
-require('../../shared/media-queries.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const DEFAULT_TRANSITION_TIME = "200ms";
-const Container = styled__default['default'].div`
-  .ReactCollapse--collapse {
-    transition: height ${DEFAULT_TRANSITION_TIME} ease-in-out;
-  }
-`;
-const HeaderExpandedProps = styled.css`
-  margin-top: 0.25rem;
-  transform: rotate(-180deg);
-`;
-const Header = styled__default['default'].div`
-  display: flex;
-  align-items: center;
-  height: 4rem;
-
-  color: ${(props) => props.isDisabled ? theme['default'].colors.text.disabled : theme['default'].colors.text.dark};
-`;
-const StyledTitle = styled__default['default'](typography_Heading_index.Title)`
-  margin: 0;
-`;
-const HeaderArrow = styled__default['default'](components_Icons_Arrow['default'])`
-  margin-left: auto;
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-top: -0.75rem;
-
-  fill: currentColor;
-
-  transition: ${DEFAULT_TRANSITION_TIME};
-  transform: rotate(0deg);
-  transform-origin: center;
-  ${(props) => props.isExpanded && HeaderExpandedProps};
-`;
-const CircleIsCompleteStyles = (color) => styled.css`
-  color: white;
-  background-color: ${theme['default'].colors[color].main};
-`;
-const CircleIsDisabledStyles = (isComplete, color) => styled.css`
-  fill: white;
-  border: 2px solid ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0.2)};
-
-  ${isComplete && `
-      border: 2px solid ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0)};
-      background-color: ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0.5)};
-    `}
-`;
-const Circle = styled__default['default'].div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  font-size: 1.25rem;
-  margin-right: 0.75rem;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 2rem;
-  border: 2px solid ${(props) => theme['default'].colors[props.color].main};
-
-  svg {
-    fill: currentColor;
-    height: 1rem;
-    width: 1rem;
-
-    /* Kvd.se compatible stuff */
-    margin: 0;
-    top: inherit;
-    left: inherit;
-    font-size: inherit;
-  }
-
-  span {
-    font-variant: lining-nums;
-    margin-top: 0.1rem;
-  }
-
-  transition: background-color ${DEFAULT_TRANSITION_TIME};
-  ${(props) => props.isComplete && CircleIsCompleteStyles(props.color)};
-  ${(props) => props.isDisabled && CircleIsDisabledStyles(props.isComplete, props.color)};
-`;
-const StepperAccordion = (props) => {
-  const [isExpanded, setIsExpanded] = React$1.useState(props.isExpanded || false);
-  const toggleIsExpanded = React$1.useCallback(() => {
-    if (!props.isDisabled) {
-      setIsExpanded((previousValue) => !previousValue);
-    }
-  }, [props.isDisabled]);
-  React$1.useEffect(() => {
-    setIsExpanded(props.isExpanded || false);
-  }, [props.isDisabled, props.isExpanded]);
-  const hasSteps = props.step || props.step === 0;
-  const handleClick = (event) => {
-    const onClick = props.onClick || toggleIsExpanded;
-    if (!props.isDisabled) {
-      onClick(event);
-    }
-  };
-  return /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Header, {
-    ...props,
-    onClick: handleClick,
-    isExpanded,
-    isDisabled: props.isDisabled || false
-  }, hasSteps && /* @__PURE__ */ React.createElement(Circle, {
-    isComplete: props.isComplete || false,
-    isDisabled: props.isDisabled || false,
-    color: props.color || "primary"
-  }, props.isComplete ? /* @__PURE__ */ React.createElement(components_Icons_CheckIcon['default'], null) : /* @__PURE__ */ React.createElement("span", null, props.step)), /* @__PURE__ */ React.createElement(StyledTitle, null, props.title), /* @__PURE__ */ React.createElement(HeaderArrow, {
-    isExpanded
-  })), /* @__PURE__ */ React.createElement(reactCollapse.Collapse, {
-    isOpened: isExpanded
-  }, props.children), props.closedChildren && props.closedChildren);
-};
-
-exports.StepperAccordion = StepperAccordion;
-exports['default'] = StepperAccordion;

package/cjs/components/Tabs/index.js

@@ -1,71 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React$1 = require('react');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const TabsContainer = styled__default['default'].div`
-  display: inline-flex;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray.light4};
-`;
-const TabWrapper = styled__default['default'].div`
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
-  padding: 1em;
-  border-bottom: ${({ theme, isActive, activeColor }) => isActive ? `3px solid ${theme.colors[activeColor].main}` : "3px solid transparent"};
-  transition: color 0.3s ease, border 0.3s ease;
-  cursor: pointer;
-`;
-const Tab = ({
-  children,
-  isActive = false,
-  onClick,
-  activeColor = "primary"
-}) => {
-  return /* @__PURE__ */ React.createElement(TabWrapper, {
-    isActive,
-    onClick,
-    activeColor
-  }, children);
-};
-const Tabs = ({
-  activeIndex,
-  activeColor = "primary",
-  children,
-  onTabClick,
-  className
-}) => {
-  if (React$1.Children.count(children) <= 1) {
-    console.error("<Tabs /> component has too few children!");
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(TabsContainer, {
-    className
-  }, React$1.Children.map(children, (child, index) => {
-    if (!child) {
-      return null;
-    }
-    const onClick = child.props.onClick;
-    return /* @__PURE__ */ React.createElement(TabWrapper, {
-      ...child.props,
-      isActive: activeIndex === index,
-      activeColor,
-      onClick: (event) => {
-        onTabClick(index);
-        if (typeof onClick === "function") {
-          onClick(event);
-        }
-      },
-      as: child.type || "div"
-    }, child.props.children);
-  }));
-};
-
-exports.Tab = Tab;
-exports.Tabs = Tabs;
-exports['default'] = Tabs;

package/cjs/components/TextArea/index.js

@@ -1,120 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React$1 = require('react');
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var components_FieldLabel = require('../FieldLabel.js');
-var typography_BodyText_index = require('../../typography/BodyText/index.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const disabledStyles = styled.css`
-  border: 1px solid ${theme['default'].colors.gray.light1};
-  color: ${theme['default'].colors.gray.dark1};
-  fill: ${theme['default'].colors.gray.light1};
-`;
-const errorStyles = styled.css`
-  border: 1px solid ${theme['default'].colors.error.main};
-`;
-const focusStyles = styled.css`
-  color: ${theme['default'].colors.text.dark};
-  border: 1px solid ${theme['default'].colors.text.dark};
-  fill: ${theme['default'].colors.text.dark};
-`;
-const TextAreaWrapper = styled__default['default'].div`
-  position: relative;
-  padding: 0;
-  display: inline-block;
-`;
-const InputWrapper = styled__default['default'].div`
-  display: inline-black;
-
-  color: ${theme['default'].colors.gray.light1};
-  fill: ${theme['default'].colors.gray.light1};
-  background-color: ${theme['default'].colors.background.light};
-
-  border: 1px solid ${theme['default'].colors.gray.light1};
-  border-radius: 0.25em;
-  transition: all 150ms;
-
-  padding: 0.7rem 0.75rem;
-
-  ${({ hasError, isFocused }) => !hasError && isFocused && focusStyles}
-  ${({ disabled }) => disabled && disabledStyles}
-  ${({ hasError }) => hasError && errorStyles}
-  ${({ centered }) => centered && `text-align: center;`}
-`;
-const TextAreaInput = styled__default['default'].textarea`
-  ${typography_BodyText_index.BodyTextStyle}
-
-  width: 100%;
-  cursor: text;
-  outline: none;
-  border: none;
-  background-color: transparent;
-
-  ${({ resize }) => !resize && "resize: none;"}
-`;
-const Suffix = styled__default['default'].div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-`;
-const HelperText = styled__default['default'].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['default'].colors.error.main : theme['default'].colors.text.dark};
-
-  ${({ centered }) => centered && `width: 100%; text-align: center; display: block;`}
-`;
-const TextArea = ({
-  placeholder = "",
-  isDisabled = false,
-  centered = false,
-  hasError = false,
-  className,
-  helperText,
-  label = "",
-  resize = true,
-  ...props
-}) => {
-  const [isFocused, setIsFocused] = React$1.useState(false);
-  const hasValue = Boolean(props.value);
-  return /* @__PURE__ */ React.createElement(TextAreaWrapper, {
-    className
-  }, /* @__PURE__ */ React.createElement(InputWrapper, {
-    isFocused,
-    disabled: isDisabled,
-    centered,
-    hasError,
-    hasPlaceholder: !!placeholder
-  }, /* @__PURE__ */ React.createElement(TextAreaInput, {
-    ...props,
-    resize,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    disabled: isDisabled,
-    theme: theme['default'],
-    placeholder: label && !isFocused ? "" : placeholder
-  }), props.suffix && /* @__PURE__ */ React.createElement(Suffix, null, props.suffix)), label && /* @__PURE__ */ React.createElement(components_FieldLabel.Label, {
-    isFocused,
-    centered,
-    hasError,
-    hasValue,
-    disabled: isDisabled,
-    theme: theme['default']
-  }, label), helperText && /* @__PURE__ */ React.createElement(HelperText, {
-    centered,
-    hasError
-  }, helperText));
-};
-
-exports.TextArea = TextArea;
-exports['default'] = TextArea;