@wayke-se/components-react 3.8.0 → 3.9.0-beta.1

package/dist-src/components/Gallery/wrapper.js

@@ -1,256 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-import { Wrapper as Container } from '../Container/wrapper';
-const quickNavWidth = 83; // 75px + 8px
-export const Wrapper = styled.div `
-  ${(props) => props.theme.breakpoint.LtMd} {
-    ${Container} & {
-      margin-left: ${size(-3)};
-      margin-right: ${size(-3)};
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    ${Container} & {
-      margin-left: ${size(-2)};
-      margin-right: ${size(-2)};
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.Md} {
-    position: relative;
-    padding-right: ${quickNavWidth}px;
-  }
-`;
-export const Main = styled.div `
-  position: relative;
-  height: 0;
-  padding-bottom: 66.66666667%;
-
-  ${(props) => props.theme.breakpoint.Md} {
-    //background-color: ${(props) => props.theme.color.accent};
-  }
-
-  .slick-slider,
-  .slick-list,
-  .slick-track,
-  .slick-slide,
-  .slick-slide > * {
-    height: 100%;
-  }
-
-  .slick-slide > * {
-    font-size: 0;
-
-    > * {
-      font-size: 1rem;
-    }
-  }
-`;
-export const Alt = styled.div `
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: ${quickNavWidth}px;
-  padding-left: ${size(1)};
-
-  ${(props) => props.theme.breakpoint.LtMd} {
-    display: none;
-  }
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: ${size(2.5)};
-    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-    pointer-events: none;
-  }
-`;
-export const Item = styled.div `
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  :focus {
-    outline: none;
-  }
-
-  ${(props) => props.theme.breakpoint.LtMd} {
-    //background-color: ${(props) => props.theme.color.textDark};
-    transition: border-radius 150ms ease;
-  }
-`;
-export const SliderWrapper = styled.div `
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  .slick-slider {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  ${(props) => props.theme.breakpoint.LtMd} {
-    overflow: hidden;
-
-    .slick-list {
-      overflow: visible;
-      width: 95%;
-    }
-
-    .slick-slide {
-      border-right: ${size(1)} solid ${(props) => props.theme.color.bg};
-      //transform: scale(0.95);
-      transform-origin: 0 50%;
-      transition: transform 150ms ease;
-    }
-
-    .slick-slide.slick-active {
-      transform: none;
-
-      ${Item} {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-`;
-export const Image = styled.img `
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: cover;
-  cursor: pointer;
-`;
-export const ImageFull = styled.img `
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`;
-// Arrow Nav
-const Arrow = styled.div `
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    display: none;
-  }
-`;
-export const ArrowLeft = styled(Arrow) `
-  left: ${size(2)};
-`;
-export const ArrowRight = styled(Arrow) `
-  right: ${size(2)};
-`;
-// Quick Nav
-export const QuickNav = styled.ul `
-  position: relative;
-  max-height: 100%;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-`;
-export const QuickNavItem = styled.li.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
-  position: relative;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-
-  ${({ active }) => active &&
-    css `
-      :before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: 3px solid currentColor;
-        z-index: 2;
-      }
-    `}
-`;
-export const QuickNavBtn = styled(ButtonReset) `
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 0;
-  padding-bottom: 66.66666667%; // 3:2
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.15);
-    opacity: 0;
-    z-index: 1;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-export const QuickNavImg = styled.img `
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`;
-// Media Button
-export const MediaButtonWrapper = styled.div `
-  position: absolute;
-  bottom: ${size(2)};
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-`;
-// Sphere Close Button
-export const EnableNavigationButton = styled.div `
-  position: absolute;
-  bottom: ${size(2)};
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-`;

package/dist-src/components/Grid/index.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Wrapper, List, Item } from './wrapper';
-import ProductCard from '../ProductCard/index';
-import { numberSeparator } from '../../utils/formats';
-const resolveImage = (document) => {
-    const img = document.featuredImage?.files?.[0]?.url;
-    if (img) {
-        return `${img}?w=567&q=72`;
-    }
-    return undefined;
-};
-const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, displayBranchName, onClickItem, }) => {
-    if (!documents) {
-        return null;
-    }
-    return (React.createElement(Wrapper, null,
-        React.createElement(List, null, documents.map((document) => {
-            /*
-            const _path = pathRoute?.replace(/^\/|\/$/g, '');
-  
-            const prefix = _path ? `/${_path}/` : '/';
-  
-            const pathRouteUrl =
-              window.location.pathname === '/'
-                ? `${prefix}${document._id}`
-                : `${window.location.pathname}${prefix}${document._id}`;
-            */
-            /*
-            const _pathRoute = pathRoute
-              ? pathRoute.startsWith('/')
-                ? `${location.pathname}${pathRoute}/${document._id}`
-                : `${pathRoute}/${document._id}`
-              : undefined;
-  
-            console.log(_pathRoute);
-            */
-            const _pathRoute = pathRoute ? `${pathRoute}/${document._id}` : undefined;
-            return (React.createElement(Item, { key: document._id },
-                React.createElement(ProductCard, { id: document._id, onClick: onClickItem, title: document.title, pathRoute: pathRoute, href: _pathRoute ? _pathRoute : hashRoute ? `#${document._id}` : undefined, image: resolveImage(document), placeholderImage: placeholderImage, description: document.shortDescription, branchName: displayBranchName ? document.branches?.[0]?.name : undefined, uspList: [
-                        {
-                            title: document.modelYear,
-                        },
-                        {
-                            title: `${numberSeparator(document.mileage)} mil`,
-                        },
-                        {
-                            title: document.gearboxType,
-                        },
-                        {
-                            title: document.fuelType,
-                        },
-                    ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
-                        ? `${numberSeparator(document.oldPrice)} kr`
-                        : undefined, leasingPrice: document.leasingPrice !== undefined
-                        ? `${numberSeparator(document.leasingPrice)} kr/mån`
-                        : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
-                        ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
-                        : undefined })));
-        }))));
-};
-export default Grid;

package/dist-src/components/Grid/wrapper.js

@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.div ``;
-export const List = styled.ul `
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-2)} ${size(-1)};
-`;
-export const Item = styled.li `
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-  padding: ${size(2)} ${size(1)};
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    width: 50%;
-    max-width: 50%;
-  }
-
-  ${(props) => props.theme.breakpoint.Md} {
-    width: 33.333%;
-    max-width: 33.333%;
-  }
-`;

package/dist-src/components/Heading/index.js

@@ -1,52 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-const HeadingBase = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  margin-top: 0;
-  margin-bottom: ${size(2)};
-  font-weight: normal;
-  line-height: 1.2;
-
-  ${({ noMargin }) => noMargin &&
-    css `
-      margin-bottom: 0;
-    `}
-`;
-export const H1 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h1',
-})) `
-  font-size: 1.875rem;
-`;
-export const H2 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h2',
-})) `
-  font-size: 1.5rem;
-`;
-export const H3 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h3',
-})) `
-  font-size: 1.125rem;
-`;
-export const H4 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h4',
-})) `
-  font-size: 1rem;
-`;
-export const H5 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h5',
-})) `
-  font-size: 0.875rem;
-`;
-/*
-export const H6 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
-  as: props.as || 'h6',
-}))`
-  font-size: 0.67rem;
-`;
-*/
-export const VisualHeading = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  font-size: 1em;
-`;

package/dist-src/components/Icon/index.js

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-const Icon = styled.svg.attrs(() => ({
-    xmlns: 'http://www.w3.org/2000/svg',
-})) `
-  display: inline-block;
-  vertical-align: middle;
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-
-  ${({ block }) => block &&
-    css `
-      display: block;
-    `}
-`;
-export const IconInfo = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 24 24", block: block },
-    React.createElement("path", { d: "M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 2c5.5234 0 10 4.4766 10 10s-4.4766 10-10 10S2 17.5234 2 12 6.4766 2 12 2zm0 3.8125c-.1836 0-.336-.004-.5.0313-.164.0351-.3164.125-.4375.2187-.121.0938-.211.2227-.2813.375s-.0937.332-.0937.5625c0 .2266.0234.4063.0938.5625.0703.1563.1601.2813.2812.375.121.0938.2734.1484.4375.1875.164.039.3164.0625.5.0625.1797 0 .371-.0234.5313-.0625.1601-.039.2851-.0938.4062-.1875.121-.0938.211-.2188.2813-.375.0703-.1523.125-.336.125-.5625 0-.2305-.0547-.4102-.125-.5625-.0704-.1523-.1602-.2813-.2813-.375-.121-.0938-.246-.1836-.4063-.2188-.1601-.0351-.3515-.0312-.5312-.0312zm-1.2188 3.3438v8.9687h2.4375V9.1562z" })));
-export const IconCancel = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M15.7 14.3c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3s-.5-.1-.7-.3L8 9.4l-6.3 6.3c-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.4-.4-.4-1 0-1.4L6.6 8 .3 1.7C-.1 1.3-.1.7.3.3c.4-.4 1-.4 1.4 0L8 6.6 14.3.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L9.4 8l6.3 6.3z" })));
-export const IconChevronDown = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 18 18", block: block },
-    React.createElement("path", { d: "M17.7 5L9 13.7.3 5l.7-.7 8 8 8-8 .7.7z" })));
-export const IconChevronLeft = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 18 18", block: block },
-    React.createElement("path", { d: "M13 17.7L4.3 9 13 .3l.7.7-8 8 8 8-.7.7z" })));
-export const IconChevronRight = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 18 18", block: block },
-    React.createElement("path", { d: "M5 .3L13.7 9 5 17.7l-.7-.7 8-8-8-8L5 .3z" })));
-export const IconCheck = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M15.6 4.3l-9.3 9.4c-.5.5-1.4.5-1.9 0l-4-4c-.5-.5-.5-1.4 0-1.9s1.3-.5 1.9 0l3.1 3.1 8.4-8.5c.5-.5 1.4-.5 1.9 0s.4 1.3-.1 1.9z" })));
-export const IconRadio = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M13 8c0 2.8-2.2 5-5 5s-5-2.2-5-5 2.2-5 5-5 5 2.2 5 5zm3 0c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zm-1 0c0-3.9-3.1-7-7-7S1 4.1 1 8s3.1 7 7 7 7-3.1 7-7z" })));
-export const IconSearch = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M15.5 15.3L11 10.8c1.2-1.1 2-2.7 2-4.5C13 2.9 10.2.1 6.8.1S.5 2.8.5 6.2s2.8 6.2 6.2 6.2c1.3 0 2.5-.4 3.5-1.1l4.6 4.6.7-.6zM1.4 6.2C1.4 3.3 3.8 1 6.7 1S12 3.3 12 6.2c0 1.5-.7 2.9-1.7 3.9l-.7.5c-.8.5-1.8.8-2.8.8-3 .1-5.4-2.3-5.4-5.2z" })));
-export const IconExclamationCircle = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 32 32", block: block },
-    React.createElement("path", { d: "M14.482 21.893c0-0.857 0.694-1.551 1.551-1.551s1.551 0.694 1.551 1.551c0 0.857-0.694 1.551-1.551 1.551s-1.551-0.694-1.551-1.551zM16.033 2.838c-7.271 0-13.187 5.916-13.187 13.187s5.916 13.187 13.187 13.187 13.187-5.916 13.187-13.187c0-7.271-5.916-13.187-13.187-13.187zM16.033 27.203c-6.163 0-11.178-5.015-11.178-11.178s5.015-11.178 11.178-11.178c6.164 0 11.178 5.015 11.178 11.178s-5.014 11.178-11.178 11.178zM16.033 8.308c-0.555 0-1.004 0.45-1.004 1.004v8.227c0 0.555 0.45 1.004 1.004 1.004s1.004-0.45 1.004-1.004v-8.227c0-0.555-0.45-1.004-1.004-1.004z" })));
-export const IconExclamationTriangle = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 32 32", block: block },
-    React.createElement("path", { d: "M15.951 19.663c-0.457 0-0.828-0.37-0.828-0.828v-4.357c0-0.457 0.37-0.828 0.828-0.828s0.828 0.37 0.828 0.828v4.357c0 0.457-0.371 0.828-0.828 0.828zM15.952 22.906c-0.305 0-0.606-0.126-0.821-0.341s-0.338-0.514-0.338-0.818 0.122-0.606 0.338-0.821c0.431-0.43 1.209-0.43 1.639 0 0.215 0.215 0.341 0.516 0.341 0.821s-0.126 0.603-0.341 0.818c-0.215 0.215-0.513 0.341-0.818 0.341zM27.049 27.070h-22.196c-0.352 0-0.677-0.186-0.855-0.489s-0.184-0.677-0.014-0.985l11.098-20.105c0.175-0.317 0.508-0.513 0.87-0.513s0.695 0.197 0.87 0.513l11.098 20.105c0.17 0.308 0.165 0.683-0.014 0.985s-0.504 0.489-0.856 0.489zM6.536 25.083h18.83l-9.415-17.056-9.415 17.056z" })));
-export const IconImage = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M14.4 1.6H1.6C.7 1.6 0 2.3 0 3.2v9.6c0 .9.7 1.6 1.6 1.6h12.8c.9 0 1.6-.7 1.6-1.6V3.2c0-.9-.7-1.6-1.6-1.6zm0 11.2H1.6V3.2h12.8v9.6zM3.2 6c0-.7.5-1.2 1.2-1.2s1.2.5 1.2 1.2-.5 1.2-1.2 1.2S3.2 6.7 3.2 6zm.2 4.5l6.2-4.4c.4-.3.9-.2 1.1.2v.1l2.4 4.2c.1.2 0 .4-.1.5-.1 0-.1.1-.2.1H3.7c-.2 0-.4-.2-.4-.4 0-.1 0-.3.1-.3z", fillRule: "evenodd", clipRule: "evenodd" })));

package/dist-src/components/Image/index.js

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-export const Image = styled.img `
-  display: block;
-  width: 100%;
-`;

package/dist-src/components/InputCheckbox/index.js

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Input, Label, LabelText, Wrapper } from './wrapper';
-const InputCheckbox = ({ children, ...props }) => {
-    const { id } = props;
-    return (React.createElement(Wrapper, { "aria-labelledby": id ? `${id}-label` : undefined },
-        React.createElement(Input, { ...props }),
-        React.createElement(Label, { id: `${id}-label`, htmlFor: id },
-            React.createElement(LabelText, null, children))));
-};
-export default InputCheckbox;

package/dist-src/components/InputCheckbox/wrapper.js

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Label = styled.label.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  font-size: 1rem;
-  line-height: 1.2;
-  cursor: pointer;
-
-  :before {
-    content: '';
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: ${size(2.5)};
-    height: ${size(2.5)};
-    margin-right: ${size(1)};
-    background-color: ${(props) => props.theme.color.accent};
-    color: currentColor;
-    border: none;
-    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.07);
-    text-align: center;
-    font-size: 15px;
-    cursor: pointer;
-    border-radius: 3px;
-    margin-top: -2px;
-  }
-`;
-export const Wrapper = styled((props) => React.createElement("div", { ...props })).attrs(({ type, checked }) => ({
-    role: type || 'checkbox',
-    'aria-checked': checked,
-})) `
-  ${({ error }) => error &&
-    css `
-      ${Label} {
-        color: ${(props) => props.theme.color.ui.negative};
-
-        :before {
-          background-color: ${(props) => props.theme.color.ui.negativeLight};
-        }
-      }
-    `}
-`;
-export const Input = styled((props) => (React.createElement("input", { ...props, className: `${props.checked ? 'checked' : undefined} ${props.className}` }))).attrs(({ type, checked }) => ({
-    checked,
-    type: type || 'checkbox',
-})) `
-  position: fixed;
-  left: -9999px;
-  opacity: 0;
-
-  &[disabled] {
-    & + ${Label} {
-      color: ${(props) => props.theme.color.disabledText};
-
-      &:before {
-        background-color: ${(props) => props.theme.color.disabledBg};
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &:checked,
-  &.checked {
-    & + ${Label} {
-      :before {
-        content: '✓';
-      }
-    }
-  }
-`;
-export const LabelText = styled.div `
-  color: ${(props) => props.theme.color.textDark};
-`;

package/dist-src/components/InputGroup/index.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-export const InputGroup = styled.div `
-  ${(props) => props.theme.breakpoint.Sm} {
-    display: flex;
-    align-items: flex-start;
-    margin: ${size(-0.5)};
-  }
-`;
-export const InputGroupColumn = styled.div `
-  ${(props) => props.theme.breakpoint.LtSm} {
-    & + & {
-      margin-top: ${size(1)};
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    flex: 1 1 50%;
-    padding: ${size(0.5)};
-  }
-`;

package/dist-src/components/InputLabel/index.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Wrapper } from './wrapper';
-const InputLabel = ({ children, htmlFor }) => (React.createElement(Wrapper, { htmlFor: htmlFor }, children));
-export default InputLabel;

package/dist-src/components/InputLabel/wrapper.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.label.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  margin-bottom: ${size(0.5)};
-  font-size: 0.875rem;
-`;

package/dist-src/components/InputSearch/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Wrapper, Search, Action, ActionBtn, Input, Label } from './wrapper';
-import { IconSearch } from '../Icon/index';
-const InputSearch = React.forwardRef(({ placeholder, label, value, id, onSearch, onChange, onKeyDown }, ref) => (React.createElement(Wrapper, { ref: ref },
-    React.createElement(Label, { htmlFor: id }, label),
-    React.createElement(Search, null,
-        React.createElement(Input, { placeholder: placeholder, name: "search", value: value, id: id, onChange: onChange, onKeyDown: onKeyDown })),
-    React.createElement(Action, null,
-        React.createElement(ActionBtn, { onClick: onSearch, title: `Genomför ${label}`, "aria-label": `Genomför ${label}` },
-            React.createElement(IconSearch, { block: true }))))));
-InputSearch.displayName = 'InputSearch';
-export default InputSearch;

package/dist-src/components/InputSearch/wrapper.js

@@ -1,90 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-export const Wrapper = styled.div.attrs(() => ({
-    role: 'search',
-})) `
-  display: flex;
-  align-items: stretch;
-  border-radius: 3px;
-`;
-export const Label = styled.label `
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-export const Search = styled.div `
-  flex: 1 1 auto;
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  background-color: ${(props) => props.theme.color.accentDark};
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-`;
-export const Action = styled.div `
-  flex-shrink: 0;
-`;
-export const ActionBtn = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-bg',
-})) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => props.theme.distances.inputHeight};
-  height: ${(props) => props.theme.distances.inputHeight};
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  font-size: 1rem;
-`;
-export const Input = styled.input.attrs(() => ({
-    type: 'search',
-    className: 'wayke__theme wayke__font--regular',
-})) `
-  flex: 1 1 auto;
-  display: block;
-  width: 100%;
-  height: ${(props) => props.theme.distances.inputHeight};
-  padding: 0 ${size(2)};
-  background-color: transparent;
-  font-size: 16px;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-
-  :focus {
-    outline: none;
-  }
-
-  &::-webkit-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &::-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-ms-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-`;

package/dist-src/components/InputSelect/index.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Wrapper, Select, Option, Icon } from './wrapper';
-import { IconChevronDown } from '../Icon/index';
-const InputSelect = ({ value, options, onChange, unit, title }) => (React.createElement(Wrapper, null,
-    React.createElement(Select, { value: value, onChange: onChange, title: title, "aria-label": title }, options?.map((option) => (React.createElement(Option, { key: option.value, value: option.value },
-        option.displayName || option.value,
-        unit ? ` ${unit}` : '')))),
-    React.createElement(Icon, null,
-        React.createElement(IconChevronDown, { block: true }))));
-export default InputSelect;