@kvdbil/components 3.3.3 → 3.3.5-2

package/esm/components/Header/Hamburger.js

@@ -0,0 +1,47 @@
+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 }) => /* @__PURE__ */ React.createElement(IconWrapper, {
+  onClick
+}, /* @__PURE__ */ React.createElement("span", null, text), /* @__PURE__ */ React.createElement("svg", null, /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-hamburger",
+  viewBox: "0 0 16 12"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-hamburger"
+})));
+
+export { Hamburger as default };

package/esm/components/Header/Link.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+import theme from '../../theme.js';
+
+const LinkItem = styled.li`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.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 }) => /* @__PURE__ */ React.createElement(LinkItem, null, component || /* @__PURE__ */ React.createElement(CommonLink, {
+  href: to,
+  ...rest
+}, text));
+
+export { Link as default };

package/esm/components/Header/index.js

@@ -0,0 +1,109 @@
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+import theme from '../../theme.js';
+import { Logo } from '../Logo/index.js';
+import Hamburger from './Hamburger.js';
+import Link from './Link.js';
+import '../Logo/LogoSv.js';
+import '../Logo/LogoEn.js';
+
+const LogoWrapper = styled.a`
+  cursor: pointer;
+  padding: 0 0.625rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${theme.colors.background.light};
+
+  ${mq("tablet")} {
+    display: block;
+    width: auto;
+    padding: 0 1.5rem 0 0;
+  }
+`;
+const HeaderContainer = styled.nav`
+  width: 100%;
+  z-index: 17;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: ${theme.colors.text.dark};
+  background-color: ${theme.colors.background.light};
+  transition: 300ms;
+`;
+const HeaderContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${theme.colors.background.gray};
+
+  ${mq("tablet")} {
+    background-color: ${theme.colors.background.light};
+    flex-direction: row;
+    padding: 0em 1.5em;
+  }
+`;
+const MainContent = styled.div`
+  display: flex;
+  width: 100%;
+`;
+const PrimaryLinks = styled.ul`
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+
+  ${mq("tablet")} {
+    justify-content: flex-start;
+    padding: 0.5em 0;
+    display: flex;
+    padding: 0;
+    flex: 1;
+  }
+`;
+const SecondaryLinks = styled.ul`
+  display: none;
+
+  ${mq("laptop")} {
+    padding: 0.5em 0;
+    display: flex;
+    padding: 0;
+  }
+`;
+const Header = ({
+  locale,
+  primaryLinks,
+  secondaryLinks,
+  menuIconText,
+  onMenuClick,
+  onHeaderClick,
+  forwardRef,
+  css = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(HeaderContainer, {
+    css,
+    ...props,
+    ref: forwardRef
+  }, /* @__PURE__ */ React.createElement(HeaderContent, null, /* @__PURE__ */ React.createElement(LogoWrapper, {
+    onClick: onHeaderClick
+  }, /* @__PURE__ */ React.createElement(Logo, {
+    locale
+  })), /* @__PURE__ */ React.createElement(MainContent, null, /* @__PURE__ */ React.createElement(PrimaryLinks, null, primaryLinks.map((link, index) => /* @__PURE__ */ React.createElement(Link, {
+    key: link.text || index,
+    ...link
+  }))), /* @__PURE__ */ React.createElement(Hamburger, {
+    text: menuIconText,
+    onClick: onMenuClick
+  })), /* @__PURE__ */ React.createElement(SecondaryLinks, null, secondaryLinks.map((link, index) => /* @__PURE__ */ React.createElement(Link, {
+    key: link.text || index,
+    ...link
+  })))));
+};
+
+export { Header, Header as default };

package/esm/components/Hero/index.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import theme from '../../theme.js';
+
+const Root = styled.div`
+  position: relative;
+  height: 60vh;
+  max-height: 600px;
+  background-color: ${theme.colors.primary.main};
+  background-size: cover;
+`;
+const Content = styled.div`
+  position: relative;
+  display: flex;
+  padding: 50px;
+  z-index: 1;
+`;
+const Video = styled.iframe`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+const Image = styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  background-color: ${theme.colors.primary.main};
+`;
+function Hero(props) {
+  const { imageProps, containerStyle, videoProps, children } = props;
+  const imageStyle = {
+    objectPosition: `${(imageProps == null ? void 0 : imageProps.x) ? imageProps.x : "50%"} ${(imageProps == null ? void 0 : imageProps.y) ? imageProps.y : "50%"}`
+  };
+  return /* @__PURE__ */ React.createElement(Root, {
+    style: containerStyle
+  }, videoProps ? /* @__PURE__ */ React.createElement(Video, {
+    "data-testid": "hero-video",
+    title: "video-frame",
+    src: videoProps.src,
+    width: "100%",
+    height: "100%",
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true
+  }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Image, {
+    src: imageProps == null ? void 0 : imageProps.src,
+    alt: "Hero background",
+    style: imageStyle
+  }), /* @__PURE__ */ React.createElement(Content, null, children)));
+}
+
+export { Hero, Hero as default };

package/esm/components/Icon/index.js

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Caption } from '../../typography/BodyText/index.js';
+import { Title as Title$1 } from '../../typography/Heading/index.js';
+import theme from '../../theme.js';
+import { Snackbar } from '../Snackbar/index.js';
+import '../../shared/media-queries.js';
+import '../Icons/CheckCircle.js';
+import '../Icons/Close.js';
+import '../Icons/ErrorCircle.js';
+import '../Icons/InfoCircle.js';
+import 'react-transition-group';
+
+const Wrapper = styled.div`
+  margin: 0 auto;
+  max-width: 700px;
+`;
+const Title = styled(Title$1)`
+  margin: 0.5rem;
+`;
+const IconsList = styled.ul`
+  display: flex;
+  list-style: none;
+  flex-wrap: wrap;
+  padding: 0;
+`;
+const ListItem = styled.li`
+  background: ${({ background }) => background};
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: calc(25% - 2px - 1.5rem);
+  padding: 0 0.25rem;
+  border: 1px solid ${theme.colors.gray.dark5};
+  border-radius: 3px;
+  margin: 0.5rem;
+  cursor: pointer;
+`;
+const Name = styled(Caption)`
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+  text-align: center;
+`;
+const IconContainer = styled.span`
+  font-size: ${({ size }) => size};
+  color: ${({ color }) => color};
+`;
+const Icons = ({
+  background = theme.colors.background.light,
+  color = theme.colors.text.dark,
+  icons,
+  size = "2rem"
+}) => {
+  const [state, setState] = useState({
+    isOpen: false,
+    message: "",
+    type: "info",
+    color: "neutral"
+  });
+  const copyImport = async (name) => {
+    const importPath = `import { ${name} } from 'kvdbil-components';`;
+    if (!navigator.clipboard) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(importPath);
+      setState((s) => ({
+        ...s,
+        isOpen: true,
+        message: `copied import for ${name}`,
+        type: "success",
+        color: "success"
+      }));
+    } catch (error) {
+      setState((s) => ({
+        ...s,
+        isOpen: true,
+        message: `Could not copy text: ${error}`,
+        type: "error",
+        color: "error"
+      }));
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(Title, {
+    as: "h2"
+  }, "Click to copy import declaration for icon"), /* @__PURE__ */ React.createElement(IconsList, null, icons.map(([name, Icon], index) => /* @__PURE__ */ React.createElement(ListItem, {
+    key: index,
+    background,
+    onClick: () => {
+      copyImport(name);
+    }
+  }, /* @__PURE__ */ React.createElement(Name, null, name), /* @__PURE__ */ React.createElement(IconContainer, {
+    size,
+    color
+  }, /* @__PURE__ */ React.createElement(Icon, null)))))), /* @__PURE__ */ React.createElement(Snackbar, {
+    message: state.message,
+    isOpen: state.isOpen,
+    type: state.type,
+    color: state.color,
+    onClose: () => setState((s) => ({ ...s, isOpen: false }))
+  }));
+};
+
+export { Icons as default };

package/esm/components/IconButton.js

@@ -0,0 +1,122 @@
+import styled, { css } from 'styled-components';
+import theme from '../theme.js';
+
+const disabledBackground = css`
+  background-color: transparent;
+`;
+const initialMS = "400ms";
+const focusRippleMS = "1500ms";
+const activeRippleMS = "750ms";
+const Container = styled.div`
+  cursor: ${(props) => props.isDisabled ? "default" : "pointer"};
+  outline: none;
+
+  display: inline-block;
+  position: relative;
+
+  .button-background {
+    :focus {
+      outline: none;
+    }
+  }
+
+  :hover {
+    .button-background {
+      transition: background-color ${initialMS};
+      background-color: ${(props) => props.isActive ? theme.colors[props.color].main : "rgb(136, 136, 136)"};
+
+      opacity: 0.06;
+      ${(props) => props.isDisabled && disabledBackground};
+    }
+  }
+
+  :focus {
+    .button-background {
+      transition: background-color ${initialMS};
+      animation: FocusRipple ${focusRippleMS} 0ms infinite alternate-reverse;
+      background-color: ${(props) => props.isActive ? theme.colors[props.color].main : "rgba(136, 136, 136)"};
+
+      opacity: 0.12;
+      ${(props) => props.isDisabled && disabledBackground};
+    }
+  }
+
+  :active {
+    .button-background {
+      animation: ActiveRipple ${activeRippleMS};
+      background-color: ${(props) => props.isActive ? theme.colors[props.color].main : "rgb(136, 136, 136)"};
+
+      opacity: 0.24;
+      ${(props) => props.isDisabled && disabledBackground};
+    }
+  }
+
+  @keyframes ActiveRipple {
+    0% {
+      clip-path: circle(50%);
+    }
+
+    25% {
+      clip-path: circle(46%);
+    }
+
+    100% {
+      clip-path: circle(50%);
+    }
+  }
+
+  @keyframes FocusRipple {
+    0% {
+      clip-path: circle(46%);
+    }
+
+    100% {
+      clip-path: circle(50%);
+    }
+  }
+`;
+const Background = styled.div`
+  top: 0;
+  left: 0;
+
+  height: calc(100% + 2rem);
+  width: calc(100% + 2rem);
+  transform: translate(-1rem, -1rem);
+
+  position: absolute;
+  border-radius: 10rem;
+`;
+const IconButton = ({
+  children,
+  isActive,
+  isDisabled,
+  onClick,
+  color
+}) => {
+  const handleEnter = (event) => {
+    if (event.key === "Enter" && !isDisabled && typeof onClick === "function") {
+      event.persist();
+      onClick(event);
+    }
+  };
+  const handleClick = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    event.persist();
+    if (!isDisabled && typeof onClick === "function") {
+      onClick(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Container, {
+    color,
+    isActive,
+    isDisabled,
+    onClick: handleClick,
+    onKeyDown: handleEnter,
+    tabIndex: isDisabled ? void 0 : 1
+  }, /* @__PURE__ */ React.createElement(Background, {
+    className: "button-background"
+  }), children);
+};
+
+export { IconButton as default };

package/esm/components/Icons/Arrow.js

@@ -0,0 +1,12 @@
+const Arrow = ({ title, ...props }) => /* @__PURE__ */ React.createElement("svg", {
+  ...props
+}, title && /* @__PURE__ */ React.createElement("title", null, title), /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-arrow",
+  viewBox: "0 0 22 22"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M1.29412 9.70588L10.7843 19.1961C10.9034 19.3152 11.0966 19.3152 11.2157 19.1961L20.7059 9.70588L22 11L12.5098 20.4902C11.676 21.324 10.324 21.324 9.4902 20.4902L0 11L1.29412 9.70588Z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-arrow"
+}));
+
+export { Arrow as default };

package/esm/components/Icons/CheckCircle.js

@@ -0,0 +1,12 @@
+const CheckCircle = ({ title = "CheckCircle", ...props }) => /* @__PURE__ */ React.createElement("svg", {
+  ...props
+}, title && /* @__PURE__ */ React.createElement("title", null, title), /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-checkCircle",
+  viewBox: "0 0 24 24"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M12.5 23.0012C6.42487 23.0012 1.5 18.0764 1.5 12.0012C1.5 5.92609 6.42487 1.00122 12.5 1.00122C18.5751 1.00122 23.5 5.92609 23.5 12.0012C23.5 18.0764 18.5751 23.0012 12.5 23.0012ZM12.5 21.1679C17.5626 21.1679 21.6667 17.0638 21.6667 12.0012C21.6667 6.93861 17.5626 2.83455 12.5 2.83455C7.43739 2.83455 3.33333 6.93861 3.33333 12.0012C3.33333 17.0638 7.43739 21.1679 12.5 21.1679ZM9.10748 13.2429C9.33504 13.5121 9.55429 13.7564 9.76125 13.9695C10.1479 14.3676 10.4817 14.6294 10.6107 14.7179C10.6392 14.7003 10.6714 14.6794 10.7067 14.6551C10.9006 14.522 11.1553 14.3144 11.4591 14.0413C12.0292 13.5287 12.7476 12.8084 13.5766 11.9265C13.7427 11.7497 13.9125 11.5673 14.0856 11.3797C14.819 10.5847 15.5796 9.73162 16.3227 8.87836C16.5829 8.5796 16.8222 8.30225 17.0352 8.0535C17.1626 7.90465 17.2527 7.79871 17.2999 7.74287L18.7001 8.92624C18.6505 8.98498 18.5579 9.09389 18.4278 9.24582C18.2116 9.49837 17.9689 9.77961 17.7052 10.0824C16.9514 10.9479 16.1796 11.8136 15.4331 12.6228C15.2562 12.8145 15.0826 13.0011 14.9124 13.1821C12.7154 15.5196 11.5309 16.5846 10.6667 16.5846C9.95327 16.5846 9.28235 16.1078 8.44613 15.2468C8.20742 15.0011 7.96047 14.7259 7.70721 14.4262C7.35453 14.0089 7.00646 13.5644 6.67696 13.1203C6.47905 12.8535 6.33026 12.6446 6.24558 12.5219L7.75443 11.4805C7.82792 11.587 7.96481 11.7792 8.14939 12.028C8.4574 12.4432 8.78234 12.8581 9.10748 13.2429Z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-checkCircle"
+}));
+
+export { CheckCircle as default };

package/esm/components/Icons/CheckIcon.js

@@ -0,0 +1,12 @@
+const CheckIcon = ({ className = "icon__svg" }) => /* @__PURE__ */ React.createElement("svg", {
+  className
+}, /* @__PURE__ */ React.createElement("title", null, "Check"), /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-check",
+  viewBox: "0 0 20 16"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M5.64559 11.2678C5.31325 10.8822 4.96116 10.4401 4.59575 9.95286C4.07361 9.25661 3.55182 8.50577 3.0572 7.75441C2.76079 7.30414 2.54098 6.95638 2.42297 6.7637L0 8.6482C0.135982 8.87023 0.3749 9.2482 0.692726 9.73101C1.22184 10.5348 1.78078 11.3391 2.34713 12.0943C2.75382 12.6366 3.15039 13.1345 3.53372 13.5793C4.87655 15.1373 5.95393 16 7.09955 16C8.48728 16 10.3894 14.0728 13.9175 9.84286C14.1908 9.51527 14.4697 9.17762 14.7536 8.83074C15.9524 7.36638 17.1918 5.79987 18.4023 4.23366C18.8257 3.6857 19.2155 3.17676 19.5627 2.71975C19.7716 2.44481 19.9203 2.24773 20 2.14142L17.7514 0C17.6756 0.101045 17.531 0.292744 17.3263 0.562104C16.9843 1.01226 16.6 1.51416 16.1821 2.05479C14.9888 3.59885 13.7675 5.1426 12.5898 6.58116C12.3118 6.92065 12.0392 7.25078 11.7723 7.57068C10.4411 9.16669 9.28751 10.4701 8.37209 11.3976C7.8842 11.892 7.47522 12.2676 7.16387 12.5084C7.10708 12.5523 7.05542 12.5903 7.00971 12.6221C6.8025 12.4619 6.2665 11.9882 5.64559 11.2678Z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-check"
+}));
+
+export { CheckIcon as default };

package/esm/components/Icons/Close.js

@@ -0,0 +1,12 @@
+const Close = ({ title = "Close", ...props }) => /* @__PURE__ */ React.createElement("svg", {
+  ...props
+}, title && /* @__PURE__ */ React.createElement("title", null, title), /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-close",
+  viewBox: "0 0 24 24"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M12.0001 10.5859L21.7629 0.823223L23.1771 2.23744L13.4144 12.0002L23.1771 21.7629L21.7629 23.1771L12.0001 13.4144L2.23744 23.1771L0.823223 21.7629L10.5859 12.0002L0.823223 2.23745L2.23744 0.823234L12.0001 10.5859Z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-close"
+}));
+
+export { Close as default };

package/esm/components/Icons/ErrorCircle.js

@@ -0,0 +1,12 @@
+const ErrorCircle = ({ title, ...props }) => /* @__PURE__ */ React.createElement("svg", {
+  ...props
+}, title && /* @__PURE__ */ React.createElement("title", null, title), /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-errorCircle",
+  viewBox: "0 0 24 24"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M1.5 12.0012C1.5 18.0764 6.42487 23.0012 12.5 23.0012C18.5751 23.0012 23.5 18.0764 23.5 12.0012C23.5 5.92609 18.5751 1.00122 12.5 1.00122C6.42487 1.00122 1.5 5.92609 1.5 12.0012ZM21.6667 12.0012C21.6667 17.0638 17.5626 21.1679 12.5 21.1679C7.43739 21.1679 3.33333 17.0638 3.33333 12.0012C3.33333 6.93861 7.43739 2.83455 12.5 2.83455C17.5626 2.83455 21.6667 6.93861 21.6667 12.0012ZM13.4167 13.8346V6.50122H11.5833V13.8346H13.4167ZM13.4167 15.6679V17.5012H11.5833V15.6679H13.4167Z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-errorCircle"
+}));
+
+export { ErrorCircle as default };

package/esm/components/Icons/InfoCircle.js

@@ -0,0 +1,12 @@
+const InfoCircle = ({ title, ...props }) => /* @__PURE__ */ React.createElement("svg", {
+  ...props
+}, title && /* @__PURE__ */ React.createElement("title", null, title), /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-infoCircle",
+  viewBox: "0 0 24 24"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M1.5 12.0012C1.5 18.0764 6.42487 23.0012 12.5 23.0012C18.5751 23.0012 23.5 18.0764 23.5 12.0012C23.5 5.92609 18.5751 1.00122 12.5 1.00122C6.42487 1.00122 1.5 5.92609 1.5 12.0012ZM21.6667 12.0012C21.6667 17.0638 17.5626 21.1679 12.5 21.1679C7.43739 21.1679 3.33333 17.0638 3.33333 12.0012C3.33333 6.93861 7.43739 2.83455 12.5 2.83455C17.5626 2.83455 21.6667 6.93861 21.6667 12.0012ZM13.4167 10.1679V17.5012H11.5833V10.1679H13.4167ZM13.4167 8.33455V6.50122H11.5833V8.33455H13.4167Z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-infoCircle"
+}));
+
+export { InfoCircle as default };

package/esm/components/InlineStepper/Step.js

@@ -0,0 +1,107 @@
+import styled from 'styled-components';
+import theme from '../../theme.js';
+import { CaptionLink } from '../../typography/BodyText/index.js';
+import StepCircle from './StepCircle.js';
+import '../Icons/CheckIcon.js';
+
+const HorizontalLine = styled.div`
+  background-color: ${theme.colors.gray.dark3};
+  height: 1px;
+  right: 0;
+  left: calc(50% + 20px);
+  top: 1.25rem;
+  position: absolute;
+  width: calc(100% - 40px);
+`;
+const StepWrapper = styled.div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  display: flex;
+  position: relative;
+  padding: 0 0.5rem;
+  flex: 1;
+  align-items: center;
+  flex-direction: column;
+
+  &:last-child {
+    padding-bottom: 0;
+    ${HorizontalLine} {
+      display: none;
+    }
+  }
+`;
+const Content = styled(CaptionLink)`
+  width: 100%;
+  margin: 0.5rem 0 0;
+  line-height: 1.2;
+  text-align: center;
+  color: ${theme.colors.text.dark};
+`;
+const VerticalLine = styled.div`
+  margin: 0 auto;
+  width: 1px;
+  height: 100%;
+  background-color: ${theme.colors.gray.dark3};
+`;
+const Graphic = styled.div`
+  margin-right: 0.75rem;
+`;
+const VerticalStepWrapper = styled.div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  display: flex;
+  padding-bottom: 1rem;
+
+  &:last-child {
+    ${VerticalLine} {
+      display: none;
+    }
+  }
+`;
+const VerticalContent = styled(CaptionLink)`
+  margin: 0;
+  width: 100%;
+  line-height: 1.2;
+  text-align: left;
+  color: ${theme.colors.text.dark};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+const getStepState = ({ active, disabled }) => {
+  if (active) {
+    return "active";
+  }
+  if (disabled) {
+    return "disabled";
+  }
+  return "completed";
+};
+const Step = ({
+  step = 0,
+  active = false,
+  completed = false,
+  disabled = false,
+  orientation,
+  children,
+  backgroundColor,
+  ...props
+}) => {
+  const state = getStepState({ active, disabled, completed });
+  return orientation === "horizontal" ? /* @__PURE__ */ React.createElement(StepWrapper, {
+    ...props
+  }, /* @__PURE__ */ React.createElement(StepCircle, {
+    state,
+    step,
+    backgroundColor
+  }), /* @__PURE__ */ React.createElement(HorizontalLine, null), /* @__PURE__ */ React.createElement(Content, {
+    as: "div"
+  }, children)) : /* @__PURE__ */ React.createElement(VerticalStepWrapper, {
+    ...props
+  }, /* @__PURE__ */ React.createElement(Graphic, null, /* @__PURE__ */ React.createElement(StepCircle, {
+    state,
+    step
+  }), /* @__PURE__ */ React.createElement(VerticalLine, null)), /* @__PURE__ */ React.createElement(VerticalContent, {
+    as: "div"
+  }, children));
+};
+
+export { Step as default, getStepState };