@kvdbil/components 3.3.5-4 → 3.4.0

package/esm/components/MenuItem/index.js

@@ -1,74 +1,38 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import theme from '../../theme.js';
-
-const fontSizes = {
-    1: {
-        size: '2rem',
-        lineHeight: '3rem',
-        bottom: '2rem',
-        fontFamily: theme.typography.fontAlternativeFamily,
-    },
-    2: {
-        size: '1.5rem',
-        lineHeight: '2.5rem',
-        bottom: '1rem',
-        fontFamily: theme.typography.fontAlternativeFamily,
-    },
-    3: {
-        size: '1rem',
-        lineHeight: '1.5rem',
-        bottom: '1rem',
-        fontFamily: theme.typography.fontBaseFamily,
-    },
-};
-const Wrapper = styled.li `
+import o from"react";import t from"styled-components";import m from"../../theme.js";const r={1:{size:"2rem",lineHeight:"3rem",bottom:"2rem",fontFamily:m.typography.fontAlternativeFamily},2:{size:"1.5rem",lineHeight:"2.5rem",bottom:"1rem",fontFamily:m.typography.fontAlternativeFamily},3:{size:"1rem",lineHeight:"1.5rem",bottom:"1rem",fontFamily:m.typography.fontBaseFamily}},p=t.li`
   list-style-type: none;
   display: flex;
   flex-direction: column;
-  ${({ hasPreamble }) => hasPreamble && 'grid-column-end: span 2'};
+  ${({hasPreamble:e})=>e&&"grid-column-end: span 2"};
 
   :hover {
     cursor: pointer;
   }
-`;
-const BaseText = styled.span `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
-`;
-const TextContainer = styled.div `
+`,a=t.span`
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeRegularWeight};
+`,c=t.div`
   display: flex;
   flex-direction: column;
-  padding-bottom: ${({ level }) => fontSizes[level].bottom};
-`;
-const Text = styled(BaseText) `
-  color: ${({ theme }) => theme.colors.text.dark};
-  font-size: ${({ level }) => fontSizes[level].size};
-  line-height: ${({ level }) => fontSizes[level].lineHeight};
-  font-family: ${({ level }) => fontSizes[level].fontFamily};
+  padding-bottom: ${({level:e})=>r[e].bottom};
+`,g=t(a)`
+  color: ${({theme:e})=>e.colors.text.dark};
+  font-size: ${({level:e})=>r[e].size};
+  line-height: ${({level:e})=>r[e].lineHeight};
+  font-family: ${({level:e})=>r[e].fontFamily};
 
-  ${({ level, theme }) => level === 3 &&
-    `font-weight: ${theme.typography.fontAlternativeRegularWeight}`};
-`;
-const Title = styled(BaseText) `
+  ${({level:e,theme:n})=>e===3&&`font-weight: ${n.typography.fontAlternativeRegularWeight}`};
+`,d=t(a)`
   font-size: 0.75rem;
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
   line-height: 1.25rem;
-  color: ${({ theme }) => theme.colors.text.dark};
+  color: ${({theme:e})=>e.colors.text.dark};
   text-transform: uppercase;
   margin-bottom: 1.5rem;
-`;
-const Preamble = styled(BaseText) `
+`,$=t(a)`
   font-size: 0.8125rem;
-  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+  font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
   line-height: 1.5rem;
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-  color: ${({ theme }) => theme.colors.text.dark};
-  margin-top: ${({ level }) => (level === 3 ? '0.25rem' : 0)};
-`;
-const MenuItem = ({ preamble, title, level, component: Component = 'li', children, ...props }) => {
-    const hasPreamble = Boolean(preamble);
-    return (jsxs(Wrapper, Object.assign({ as: Component }, props, { hasPreamble: hasPreamble }, { children: [title && jsx(Title, { children: title }, void 0), jsxs(TextContainer, Object.assign({ level: level }, { children: [jsx(Text, Object.assign({ level: level, hasPreamble: hasPreamble }, { children: children }), void 0), preamble && jsx(Preamble, Object.assign({ level: level }, { children: preamble }), void 0)] }), void 0)] }), void 0));
-};
-
-export { MenuItem, MenuItem as default };
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
+  color: ${({theme:e})=>e.colors.text.dark};
+  margin-top: ${({level:e})=>e===3?"0.25rem":0};
+`,h=({preamble:e,title:n,level:i,component:s="li",children:f,...y})=>{const l=Boolean(e);return o.createElement(p,{as:s,...y,hasPreamble:l},n&&o.createElement(d,null,n),o.createElement(c,{level:i},o.createElement(g,{level:i,hasPreamble:l},f),e&&o.createElement($,{level:i},e)))};export{h as MenuItem,h as default};

package/esm/components/Modal/index.js

@@ -1,11 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { CSSTransition } from 'react-transition-group';
-import styled, { css, createGlobalStyle } from 'styled-components';
-import Close from '../Icons/Close.js';
-
-const transitions = css `
+import t,{useEffect as u}from"react";import{createPortal as g}from"react-dom";import{CSSTransition as x}from"react-transition-group";import n,{css as h,createGlobalStyle as a}from"styled-components";import b from"../Icons/Close.js";const d=h`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -23,24 +16,21 @@ const transitions = css `
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`;
-const Container = styled.div `
-  ${transitions}
+`,f=n.div`
+  ${d}
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 200;
-`;
-const Background = styled.div `
+`,w=n.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`;
-const Content = styled.div `
+`,y=n.div`
   position: relative;
   max-width: 512px;
   padding: 24px 32px 24px 32px;
@@ -61,8 +51,7 @@ const Content = styled.div `
     margin-right: auto;
     min-width: 355px;
   }
-`;
-const CloseContainer = styled.div `
+`,k=n.div`
   position: absolute;
   top: 24px;
   right: 32px;
@@ -75,37 +64,14 @@ const CloseContainer = styled.div `
     width: 1rem;
     height: 1rem;
   }
-`;
-const BodyStyleInjector = createGlobalStyle `
+`,v=a`
   body {
     overflow: hidden;
 
-    ${typeof window !== 'undefined' &&
-    window.innerWidth > 1024 &&
-    `
+    ${typeof window!="undefined"&&window.innerWidth>1024&&`
         padding-right: 15px !important;
     `}
   }
-`;
-const Transitions = createGlobalStyle `
-  ${transitions}
-`;
-const Modal = ({ children, isOpen, contentStyles, withPortal = false, onClose, }) => {
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                if (isOpen) {
-                    onClose();
-                }
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [onClose, isOpen]);
-    const Component = (jsx(CSSTransition, Object.assign({ in: isOpen, mountOnEnter: true, unmountOnExit: true, timeout: 400, classNames: "backgroundTransition" }, { children: jsxs(Fragment, { children: [jsx(Transitions, {}, void 0), jsxs(Container, { children: [jsx(Background, { "data-testid": "background", onClick: onClose }, void 0), jsxs(Content, Object.assign({ style: contentStyles }, { children: [jsx(CloseContainer, Object.assign({ onClick: onClose, "data-testid": "close" }, { children: jsx(Close, {}, void 0) }), void 0), children] }), void 0), jsx(BodyStyleInjector, {}, void 0)] }, void 0)] }, void 0) }), void 0));
-    return withPortal ? createPortal(Component, document.body) : Component;
-};
-
-export { Modal, Modal as default };
+`,E=a`
+  ${d}
+`,s=({children:c,isOpen:o,contentStyles:l,withPortal:m=!1,onClose:e})=>{u(()=>{const r=p=>{p.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const i=t.createElement(x,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(E,null),t.createElement(f,null,t.createElement(w,{"data-testid":"background",onClick:e}),t.createElement(y,{style:l},t.createElement(k,{onClick:e,"data-testid":"close"},t.createElement(b,null)),c),t.createElement(v,null))));return m?g(i,document.body):i};export{s as Modal,s as default};

package/esm/components/NotificationButton/index.js

@@ -1,27 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Badge } from '../Badge/index.js';
-import { Button } from '../Button/index.js';
-import '../../theme.js';
-import '../Spinner/index.js';
-import '../../typography/ButtonText/index.js';
-
-const Container = styled.div `
+import o from"react";import e from"styled-components";import{Badge as i}from"../Badge/index.js";import{Button as r}from"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";const d=e.div`
   position: relative;
   display: inline-block;
-`;
-const StyledBadge = styled(Badge) `
+`,a=e(i)`
   position: absolute;
   top: 0;
   right: 0;
   margin: -10px;
   border: 2px solid white;
-  ${props => props.noPadding && `padding: 0;`}
-`;
-const NotificationButton = (props) => {
-    const count = props.badgeProps.notificationAmount || 0;
-    const noPadding = count < 10;
-    return (jsxs(Container, { children: [jsx(Button, Object.assign({}, props.buttonProps, { children: props.children }), void 0), jsx(StyledBadge, Object.assign({}, props.badgeProps, { noPadding: noPadding }), void 0)] }, void 0));
-};
-
-export { NotificationButton };
+  ${t=>t.noPadding&&"padding: 0;"}
+`,m=t=>{const n=(t.badgeProps.notificationAmount||0)<10;return o.createElement(d,null,o.createElement(r,{...t.buttonProps},t.children),o.createElement(a,{...t.badgeProps,noPadding:n}))};export{m as NotificationButton};

package/esm/components/OffCanvas/Overlay.js

@@ -1,17 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
-import { CSSTransition } from 'react-transition-group';
-import styled from 'styled-components';
-
-const defaultTransitionProps = {
-    classNames: 'backgroundTransition',
-    timeout: {
-        enter: 400,
-        exit: 400,
-    },
-    mountOnEnter: true,
-    unmountOnExit: true,
-};
-const Background = styled.div `
+import n from"react";import{CSSTransition as a}from"react-transition-group";import c from"styled-components";const s={classNames:"backgroundTransition",timeout:{enter:400,exit:400},mountOnEnter:!0,unmountOnExit:!0},u=c.div`
   position: fixed;
   z-index: 1000;
   width: 100%;
@@ -37,14 +24,4 @@ const Background = styled.div `
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
   }
-`;
-const Overlay = ({ className, isOpen, onClick, transitionProps = defaultTransitionProps, }) => {
-    const handleClick = () => {
-        if (onClick) {
-            onClick();
-        }
-    };
-    return (jsx(CSSTransition, Object.assign({ in: isOpen }, transitionProps, { className: className }, { children: jsx(Background, { onClick: handleClick }, void 0) }), void 0));
-};
-
-export { Overlay as default };
+`,d=({className:i,isOpen:o,onClick:t,transitionProps:e=s})=>{const r=()=>{t&&t()};return n.createElement(a,{in:o,...e,className:i},n.createElement(u,{onClick:r}))};export{d as default};

package/esm/components/OffCanvas/index.js

@@ -1,89 +1,57 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-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 `
+import e,{useRef as p}from"react";import{createPortal as v}from"react-dom";import d from"styled-components";import{CSSTransition as x}from"react-transition-group";import E from"./Overlay.js";import{useOutsideClick as b}from"./useClickOutside.js";const y="offCanvasAnimation",C={timeout:{enter:300,exit:300},mountOnEnter:!0,unmountOnExit:!0},O=d.div`
+  ${({animationName:t,animationDuration:s,width:r,from:n,backgroundColor:l,theme:o})=>`
     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};
+    ${n==="left"?"left: 0;":"right: 0;"}
+    background-color: ${l||o.colors.background.light};
+    width: ${r};
     box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
 
     
-    &.${animationName}--right-enter {
-      transform: translate3d(${width}, 0, 0);
+    &.${t}--right-enter {
+      transform: translate3d(${r}, 0, 0);
     }
     
-    &.${animationName}--right-enter.${animationName}--right-enter-active {
+    &.${t}--right-enter.${t}--right-enter-active {
       transform: translate3d(0, 0, 0);
       transition: transform 0.2s ease-in-out;
     }
     
-    &.${animationName}--right-exit {
+    &.${t}--right-exit {
       transform: translate3d(0, 0, 0);
     }
     
-    &.${animationName}--right-exit.${animationName}--right-exit-active {
-      transform: translate3d(${width}, 0, 0);
+    &.${t}--right-exit.${t}--right-exit-active {
+      transform: translate3d(${r}, 0, 0);
       transition: transform 0.2s ease-in-out;
     }
     
-    &.${animationName}--left-enter {
-      transform: translate3d(-${width}, 0, 0);
+    &.${t}--left-enter {
+      transform: translate3d(-${r}, 0, 0);
     }
     
-    &.${animationName}--left-enter.${animationName}--left-enter-active {
+    &.${t}--left-enter.${t}--left-enter-active {
       transform: translate3d(0, 0, 0);
       transition: transform 0.2s ease-in-out;
     }
     
-    &.${animationName}--left-exit {
+    &.${t}--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;
+    &.${t}--left-exit.${t}--left-exit-active {
+      transform: translate3d(-${r}, 0, 0);
+      transition: transform ${s}ms ease-in-out;
     }
-  `;
-}}
-`;
-const Contents = styled.div `
+  `}
+`,w=d.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 || onClickOutside === void 0 ? 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 = (jsxs(Fragment, { children: [backgroundOverlay && jsx(Overlay, { isOpen: isOpen }, void 0), jsx(Fragment, { children: jsx(CSSTransition, Object.assign({ in: isOpen, className: `${animationName} ${className}`, classNames: className }, defaultTransitionProps, transitionProps, { children: jsx(Container, Object.assign({ ref: contentRef, animationName: animationName, animationDuration: animationDuration, backgroundColor: backgroundColor, from: from, width: width }, { children: jsx(Contents, Object.assign({ className: `${animationName}-content` }, { children: children }), void 0) }), void 0) }), void 0) }, void 0)] }, void 0));
-    return withPortal ? createPortal(component, document.body) : component;
-};
-
-export { OffCanvas, OffCanvas as default };
+`,$=({animationName:t=y,animationDuration:s=300,backgroundColor:r,backgroundOverlay:n,children:l,from:o="right",isOpen:i,onClickOutside:a,width:m="375px",withPortal:g,transitionProps:h})=>{const f=p(null);b(f,()=>a==null?void 0:a()),n&&!a&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const c=`${t}--${o}`,u=e.createElement(e.Fragment,null,n&&e.createElement(E,{isOpen:i}),e.createElement(e.Fragment,null,e.createElement(x,{in:i,className:`${t} ${c}`,classNames:c,...C,...h},e.createElement(O,{ref:f,animationName:t,animationDuration:s,backgroundColor:r,from:o,width:m},e.createElement(w,{className:`${t}-content`},l)))));return g?v(u,document.body):u};export{$ as OffCanvas,$ as default};

package/esm/components/OffCanvas/useClickOutside.js

@@ -1,17 +1 @@
-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 };
+import{useCallback as r,useEffect as s}from"react";const u=(e,n)=>{const t=r(o=>{e.current&&!e.current.contains(o.target)&&n()},[n,e]);s(()=>(document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}),[t])};export{u as useOutsideClick};

package/esm/components/RadioButton/index.js

@@ -1,10 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-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 `
+import t from"react";import i,{css as o}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import r from"../../theme.js";import h from"../IconButton.js";const m=o`
   .circle {
     &--outer {
       height: 24px;
@@ -17,8 +11,7 @@ const regularSize = css `
       transform: scale(0.6);
     }
   }
-`;
-const largeSize = css `
+`,p=o`
   .circle {
     &--outer {
       height: 32px;
@@ -31,79 +24,65 @@ const largeSize = css `
       transform: scale(0.6);
     }
   }
-`;
-const sizes = {
-    regular: regularSize,
-    large: largeSize,
-};
-const disabledStyle = css `
+`,b={regular:m,large:p},y=o`
   cursor: default;
 
   .circle {
     &--inner {
-      background-color: ${theme.colors.gray.light1};
+      background-color: ${r.colors.gray.light1};
     }
 
     &--outer {
-      border: 2px solid ${theme.colors.gray.light1};
+      border: 2px solid ${r.colors.gray.light1};
     }
   }
-`;
-const checkedDisabledStyle = css `
+`,f=o`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${theme.colors.gray.light1};
+      background-color: ${r.colors.gray.light1};
     }
   }
-`;
-const checkedStyle = (color) => css `
+`,x=e=>o`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${theme.colors[color].main};
+      background-color: ${r.colors[e].main};
     }
 
     &--outer {
-      border: 2px solid ${theme.colors[color].main};
+      border: 2px solid ${r.colors[e].main};
     }
   }
-`;
-const RadioButtonWrapper = styled.label `
+`,$=i.label`
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
 
-  ${props => sizes[props.size]};
+  ${e=>b[e.size]};
 
-  ${props => !props.isDisabled && props.isChecked && checkedStyle(props.color)};
-  ${props => props.isDisabled && disabledStyle};
+  ${e=>!e.isDisabled&&e.isChecked&&x(e.color)};
+  ${e=>e.isDisabled&&y};
 
-  ${props => props.isChecked && props.isDisabled && checkedDisabledStyle};
-`;
-const HiddenRadioButton = styled.input `
+  ${e=>e.isChecked&&e.isDisabled&&f};
+`,k=i.input`
   display: none;
-`;
-const OuterCircle = styled.span `
+`,z=i.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
-  border: 2px solid ${theme.colors.gray.light1};
-`;
-const InnerCircle = styled.span `
+  border: 2px solid ${r.colors.gray.light1};
+`,B=i.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
   border-radius: 50%;
-  background-color: ${theme.colors.gray.light1};
+  background-color: ${r.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 }) => (jsxs(IconButton, Object.assign({ onClick: onChange, isActive: checked, isDisabled: isDisabled, color: color }, { children: [jsx(HiddenRadioButton, Object.assign({ "data-validate": "checked", type: "radio", name: name, id: name, onChange: onChange, disabled: isDisabled }, props), void 0), jsx(RadioButtonWrapper, Object.assign({ htmlFor: name, size: size, color: color, isChecked: checked, isDisabled: isDisabled }, { children: jsx(OuterCircle, Object.assign({ className: "circle circle--outer" }, { children: jsx(InnerCircle, { className: "circle circle--inner" }, void 0) }), void 0) }), void 0)] }), void 0));
-
-export { RadioButton, RadioButton as default };
+`,n=({name:e=g("radio-button"),size:d="regular",checked:l=!1,isDisabled:c=!1,color:a="secondary",onChange:s,...u})=>t.createElement(h,{onClick:s,isActive:l,isDisabled:c,color:a},t.createElement(k,{"data-validate":"checked",type:"radio",name:e,id:e,onChange:s,disabled:c,...u}),t.createElement($,{htmlFor:e,size:d,color:a,isChecked:l,isDisabled:c},t.createElement(z,{className:"circle circle--outer"},t.createElement(B,{className:"circle circle--inner"}))));export{n as RadioButton,n as default};

package/esm/components/Range/index.js

@@ -1,36 +1,26 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-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 `
+import t from"react";import n from"styled-components";import i from"../../theme.js";import{CaptionLink as p}from"../../typography/BodyText/index.js";import{Display1 as m}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const c=n.div`
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
-`;
-const RangeWrapper = styled.div `
+`,d=n.div`
   display: flex;
   position: relative;
   width: 100%;
-`;
-const DisplayValue = styled(Display1) `
-  color: ${({ color }) => theme.colors[color].main};
+`,g=n(m)`
+  color: ${({color:e})=>i.colors[e].main};
   line-height: 1;
   margin-top: 0;
   margin-bottom: 0;
-`;
-const Value = styled(CaptionLink) `
+`,a=n(p)`
   flex: 1;
-  color: ${theme.colors.gray.light1};
+  color: ${i.colors.gray.light1};
   line-height: 1.2;
   position: relative;
   text-align: center;
   &:before {
     content: '';
-    background: ${({ color }) => theme.colors[color].main};
+    background: ${({color:e})=>i.colors[e].main};
     margin: 0 auto 2px;
     display: flex;
     justify-content: center;
@@ -40,21 +30,15 @@ const Value = styled(CaptionLink) `
     position: relative;
     width: 2px;
   }
-`;
-const MinValue = styled(Value) `
+`,f=n(a)`
   &:after {
     content: '';
     position: absolute;
     width: 100%;
     height: 4px;
-    background: ${({ color }) => theme.colors[color].main};
+    background: ${({color:e})=>i.colors[e].main};
     top: 40px;
     left: 50%;
     transform: translate(0, -50%);
   }
-`;
-const Range = ({ displayValue, maxValue, minValue, color = 'primary', }) => {
-    return (jsxs(Container, { children: [displayValue && (jsx(DisplayValue, Object.assign({ as: "span", color: color }, { children: displayValue }), void 0)), jsxs(RangeWrapper, { children: [jsx(MinValue, Object.assign({ as: "span", color: color }, { children: minValue }), void 0), jsx(Value, Object.assign({ as: "span", color: color }, { children: maxValue }), void 0)] }, void 0)] }, void 0));
-};
-
-export { Range, Range as default };
+`,r=({displayValue:e,maxValue:l,minValue:s,color:o="primary"})=>t.createElement(c,null,e&&t.createElement(g,{as:"span",color:o},e),t.createElement(d,null,t.createElement(f,{as:"span",color:o},s),t.createElement(a,{as:"span",color:o},l)));export{r as Range,r as default};

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

@@ -1,5 +1 @@
-import { jsx } from 'react/jsx-runtime';
-
-const TestIcon = () => (jsx("svg", Object.assign({ viewBox: "0 0 896.003 896.004", height: "18px", width: "18px", y: "0px", x: "0px", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("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" }, void 0) }), void 0));
-
-export { TestIcon };
+import t from"react";const e=()=>t.createElement("svg",{viewBox:"0 0 896.003 896.004",height:"18px",width:"18px",y:"0px",x:"0px",xmlns:"http://www.w3.org/2000/svg"},t.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{e as TestIcon};