@kvdbil/components 8.3.6 → 8.4.3

package/esm/components/InlineStepper/Step.js

@@ -1,56 +0,0 @@
-import e from"react";import r from"styled-components";import o from"../../theme.js";import{CaptionLink as c}from"../../typography/BodyText/index.js";import m from"./StepCircle.js";import"../../shared/media-queries.js";import"../Icons/CheckIcon.js";const s=r.div`
-  background-color: ${o.colors.gray.dark3};
-  height: 1px;
-  right: 0;
-  left: calc(50% + 20px);
-  top: 1.25rem;
-  position: absolute;
-  width: calc(100% - 40px);
-`,u=r.div`
-  font-family: ${({theme:t})=>t.typography.fontBaseFamily};
-  display: flex;
-  position: relative;
-  padding: 0 0.5rem;
-  flex: 1;
-  align-items: center;
-  flex-direction: column;
-
-  &:last-child {
-    padding-bottom: 0;
-    ${s} {
-      display: none;
-    }
-  }
-`,x=r(c)`
-  width: 100%;
-  margin: 0.5rem 0 0;
-  line-height: 1.2;
-  text-align: center;
-  color: ${o.colors.text.dark};
-`,d=r.div`
-  margin: 0 auto;
-  width: 1px;
-  height: 100%;
-  background-color: ${o.colors.gray.dark3};
-`,v=r.div`
-  margin-right: 0.75rem;
-`,E=r.div`
-  font-family: ${({theme:t})=>t.typography.fontBaseFamily};
-  display: flex;
-  padding-bottom: 1rem;
-
-  &:last-child {
-    ${d} {
-      display: none;
-    }
-  }
-`,k=r(c)`
-  margin: 0;
-  width: 100%;
-  line-height: 1.2;
-  text-align: left;
-  color: ${o.colors.text.dark};
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`,p=({active:t,disabled:i})=>t?"active":i?"disabled":"completed",$=({step:t=0,active:i=!1,completed:f=!1,disabled:h=!1,orientation:g,children:a,backgroundColor:y,...n})=>{const l=p({active:i,disabled:h,completed:f});return g==="horizontal"?e.createElement(u,{...n},e.createElement(m,{state:l,step:t,backgroundColor:y}),e.createElement(s,null),e.createElement(x,{as:"div"},a)):e.createElement(E,{...n},e.createElement(v,null,e.createElement(m,{state:l,step:t}),e.createElement(d,null)),e.createElement(k,{as:"div"},a))};export{$ as default,p as getStepState};

package/esm/components/InlineStepper/StepCircle.js

@@ -1,43 +0,0 @@
-import r from"react";import i from"styled-components";import t from"../../theme.js";import s from"../Icons/CheckIcon.js";const l=e=>({active:{background:t.colors.primary.main,color:t.colors.text.light,border:`1px solid ${t.colors.primary.main}`},completed:{background:t.colors.success.main,color:t.colors.text.light,border:`1px solid ${t.colors.success.main}`},disabled:{background:e,color:t.colors.primary.main,border:`1px solid ${t.colors.primary.main}`}}),a=i.div`
-  box-sizing: content-box;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: ${({state:e,backgroundColor:o})=>l(o)[e].border};
-  justify-content: center;
-  background-color: ${({state:e,backgroundColor:o})=>l(o)[e].background};
-  color: ${({state:e,backgroundColor:o})=>l(o)[e].color};
-  &:after {
-    content: '';
-    width: 42px;
-    height: 42px;
-    border-radius: 50%;
-    top: -11px;
-    left: -11px;
-    position: absolute;
-    z-index: 2;
-    border: ${({backgroundColor:e})=>`10px solid ${e}`};
-  }
-`,d=i.div`
-  display: flex;
-  font-size: 1.25rem;
-  line-height: 1;
-  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
-  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`,m=i.div`
-  width: 14px;
-  height: 14px;
-  display: flex;
-  & svg {
-    fill: ${({theme:e})=>e.colors.text.light};
-    width: 100%;
-  }
-`,p=({state:e,step:o,backgroundColor:c=t.colors.background.light,...n})=>r.createElement("div",null,r.createElement(a,{className:e,state:e,...n,backgroundColor:c},r.createElement(d,{as:"div"},e==="completed"?r.createElement(m,null,r.createElement(s,{className:""})):r.createElement("span",{className:"step-content-text"},o))));export{p as default};

package/esm/components/InlineStepper/index.js

@@ -1,7 +0,0 @@
-import m,{cloneElement as i}from"react";import d from"styled-components";import h from"../../theme.js";const u=d.div`
-  min-height: 4rem;
-  padding: 10px 0;
-  display: ${({orientation:e})=>e==="horizontal"?"flex":"block"};
-  justify-content: space-between;
-  background-color: ${({backgroundColor:e})=>e};
-`,y=(e,r)=>i(e,r),f=({children:e,activeStep:r=0,orientation:n="horizontal",backgroundColor:l=h.colors.background.light,...c})=>{const p=(Array.isArray(e)?e:[e]).map((o,t)=>{var s;const a={active:t===r,step:t+1,completed:t<r,disabled:t>r,children:(s=o==null?void 0:o.props)==null?void 0:s.children,orientation:n,backgroundColor:l};return y(o,a)});return m.createElement(u,{...c,orientation:n,backgroundColor:l},p)};export{f as InlineStepper};

package/types/components/InlineStepper/Step.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { Orientation } from '.';
-export interface StepProps {
-    backgroundColor?: string;
-    step?: number;
-    active?: boolean;
-    completed?: boolean;
-    disabled?: boolean;
-    children?: ReactNode;
-    orientation?: Orientation;
-}
-declare type State = 'active' | 'completed' | 'disabled';
-interface States {
-    active?: boolean;
-    disabled?: boolean;
-    completed?: boolean;
-}
-export declare const getStepState: ({ active, disabled }: States) => State;
-declare const Step: ({ step, active, completed, disabled, orientation, children, backgroundColor, ...props }: StepProps) => JSX.Element;
-export default Step;

package/types/components/InlineStepper/StepCircle.d.ts

@@ -1,8 +0,0 @@
-declare type State = 'active' | 'completed' | 'disabled';
-interface Props {
-    state: State;
-    step: number;
-    backgroundColor?: string;
-}
-declare const StepCircle: ({ state, step, backgroundColor, ...props }: Props) => JSX.Element;
-export default StepCircle;

package/types/components/InlineStepper/index.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-import { StepProps } from './Step';
-export declare type Orientation = 'horizontal' | 'vertical';
-export interface InlineStepperProps {
-    activeStep: number;
-    children: ReactElement<StepProps>[] | ReactElement<StepProps>;
-    orientation?: Orientation;
-    backgroundColor?: string;
-}
-export declare const InlineStepper: ({ children, activeStep, orientation, backgroundColor, ...props }: InlineStepperProps) => JSX.Element;