@kvdbil/components 3.3.5-4 → 3.4.0

package/esm/components/Badge/index.js

@@ -1,10 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import theme from '../../theme.js';
-
-const BadgeContainer = styled.div `
+import t from"react";import r from"styled-components";import a from"../../theme.js";const i=r.div`
   border-radius: 0.75rem;
-  background: ${theme.colors.secondary.main};
+  background: ${a.colors.secondary.main};
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -13,48 +9,27 @@ const BadgeContainer = styled.div `
   height: 1.5rem;
   box-sizing: border-box;
   cursor: default;
-`;
-const SmallBadgeContainer = styled(BadgeContainer) `
+`,s=r(i)`
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
   min-width: 1rem;
   position: relative;
-`;
-const MiddleDot = styled.div `
+`,m=r.div`
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   opacity: 0.1;
   transform: scale(0.5);
-  background: ${theme.colors.text.dark};
+  background: ${a.colors.text.dark};
   position: absolute;
   top: 0;
   left: 0;
-`;
-const Label = styled.span `
+`,c=r.span`
   font-size: 0.75rem;
   line-height: 0.75rem;
   color: white;
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-`;
-const numberToLabel = (notificationAmount) => {
-    if (notificationAmount >= 100) {
-        return '99+';
-    }
-    return `${notificationAmount}`;
-};
-const Badge = ({ notificationAmount = 0, withNumber = true, ...rest }) => {
-    if ((notificationAmount <= 0 || !notificationAmount) && withNumber) {
-        return null;
-    }
-    if (!withNumber) {
-        return (jsx(SmallBadgeContainer, Object.assign({}, rest, { children: jsx(MiddleDot, { "data-test": "middle-dot" }, void 0) }), void 0));
-    }
-    const label = numberToLabel(notificationAmount);
-    return (jsx(BadgeContainer, Object.assign({}, rest, { children: jsx(Label, { children: label }, void 0) }), void 0));
-};
-
-export { Badge, Badge as default };
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+`,h=e=>e>=100?"99+":`${e}`,l=({notificationAmount:e=0,withNumber:o=!0,...n})=>{if((e<=0||!e)&&o)return null;if(!o)return t.createElement(s,{...n},t.createElement(m,{"data-test":"middle-dot"}));const d=h(e);return t.createElement(i,{...n},t.createElement(c,null,d))};export{l as Badge,l as default};

package/esm/components/Button/index.js

@@ -1,117 +1,76 @@
-import { jsx } from 'react/jsx-runtime';
-import styled, { css } from 'styled-components';
-import theme from '../../theme.js';
-import Spinner from '../Spinner/index.js';
-import { BasicButtonTextStyle, ButtonRegularTextStyle, ButtonLargeTextStyle, ButtonSmallTextStyle } from '../../typography/ButtonText/index.js';
-
-/****************************************************************************/
-/*                               Font styles                                */
-/****************************************************************************/
-const getFontStyles = (size) => {
-    switch (size) {
-        case 'smaller':
-            return ButtonSmallTextStyle;
-        case 'small':
-            return ButtonRegularTextStyle;
-        case 'regular':
-            return ButtonRegularTextStyle;
-        case 'large':
-            return ButtonLargeTextStyle;
-        default:
-            return ButtonRegularTextStyle;
-    }
-};
-/****************************************************************************/
-/*                               Size styles                                */
-/****************************************************************************/
-const smallerSizeStyles = (isLoading) => `
+import n from"react";import e,{css as c}from"styled-components";import u from"../../theme.js";import $ from"../Spinner/index.js";import{BasicButtonTextStyle as g,ButtonRegularTextStyle as a,ButtonLargeTextStyle as b,ButtonSmallTextStyle as f}from"../../typography/ButtonText/index.js";const y=o=>{switch(o){case"smaller":return f;case"small":return a;case"regular":return a;case"large":return b;default:return a}},S=o=>`
   min-width: 76px;
-  padding: ${isLoading ? '7px 10px 5.5px' : '10px 10px 8px'};
-`;
-const smallSizeStyles = (isLoading) => `
+  padding: ${o?"7px 10px 5.5px":"10px 10px 8px"};
+`,k=o=>`
   min-width: 76px;
-  padding: ${isLoading ? '8px 10px 6px' : '11px 10px 9px'};
-`;
-const regularSizeStyles = (isLoading) => `
+  padding: ${o?"8px 10px 6px":"11px 10px 9px"};
+`,m=o=>`
   min-width: 250px;
-  padding: ${isLoading ? '7px 22px 5px' : '15px 22px 13px'};
-`;
-const largeSizeStyles = (isLoading) => `
+  padding: ${o?"7px 22px 5px":"15px 22px 13px"};
+`,w=o=>`
   min-width: 250px;
-  padding: ${isLoading ? '9px 22px 6px' : '21px 22px 19px'};
-`;
-/****************************************************************************/
-/*                               Color styles                               */
-/****************************************************************************/
-const solidColorStyles = (theme) => (color) => `
+  padding: ${o?"9px 22px 6px":"21px 22px 19px"};
+`,h=o=>r=>`
   color: white;
-  border-color: ${theme.colors[color].main};
-  background-color: ${theme.colors[color].main};
+  border-color: ${o.colors[r].main};
+  background-color: ${o.colors[r].main};
 
   :hover {
-    border-color: ${theme.colors[color].light};
-    background-color: ${theme.colors[color].light};
+    border-color: ${o.colors[r].light};
+    background-color: ${o.colors[r].light};
   }
 
   :active {
-    border-color: ${theme.colors[color].dark};
-    background-color: ${theme.colors[color].dark}
+    border-color: ${o.colors[r].dark};
+    background-color: ${o.colors[r].dark}
   }
 
   :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${o.colors[r].dark};
   }
-`;
-const outlineColorStyles = (theme) => (color) => `
-  color: ${theme.colors[color].main};
-  border-color: ${theme.colors[color].main};
+`,B=o=>r=>`
+  color: ${o.colors[r].main};
+  border-color: ${o.colors[r].main};
   background-color: transparent;
 
   :hover {
       color: white;
-      border-color: ${theme.colors[color].light};
-      background-color: ${theme.colors[color].light};
+      border-color: ${o.colors[r].light};
+      background-color: ${o.colors[r].light};
   }
 
   :active {
     color: white;
-    border-color: ${theme.colors[color].dark};
-    background-color: ${theme.colors[color].dark};
+    border-color: ${o.colors[r].dark};
+    background-color: ${o.colors[r].dark};
   }
 
   :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${o.colors[r].dark};
   }
-`;
-const flatColorStyles = (theme) => (color) => `
-  color: ${theme.colors[color].main};
+`,C=o=>r=>`
+  color: ${o.colors[r].main};
   border-color: transparent;
   background-color: transparent;
 
   :hover {
-    color: ${theme.colors[color].dark};
+    color: ${o.colors[r].dark};
   }
 
   :active {
-    color: ${theme.colors[color].light};
+    color: ${o.colors[r].light};
   }
-`;
-const disabledCommonColorStyles = (theme) => `
-  background-color: ${theme.colors.gray.light4};
-  border-color: ${theme.colors.gray.light4};
-  color: ${theme.colors.gray.light1};
+`,T=o=>`
+  background-color: ${o.colors.gray.light4};
+  border-color: ${o.colors.gray.light4};
+  color: ${o.colors.gray.light1};
   cursor: not-allowed;
-`;
-const disabledFlatColorStyles = (theme) => `
+`,j=o=>`
   border-color: transparent;
   background-color: transparent;
-  color: ${theme.colors.gray.light1};
+  color: ${o.colors.gray.light1};
   cursor: not-allowed;
-`;
-/****************************************************************************/
-/*                               Root styles                                */
-/****************************************************************************/
-const Root = styled.button `
+`,v=e.button`
   outline: none;
   cursor: pointer;
   user-select: none;
@@ -119,38 +78,23 @@ const Root = styled.button `
   white-space: nowrap;
   border: 2px solid transparent;
   border-radius: 3px;
-  width: ${({ fullWidth }) => fullWidth && '100%'};
+  width: ${({fullWidth:o})=>o&&"100%"};
 
-  ${BasicButtonTextStyle}
-  ${({ size }) => getFontStyles(size)}
-  ${({ size, isLoading }) => css `
-    ${size === 'smaller' && smallerSizeStyles(isLoading)}
-    ${size === 'small' && smallSizeStyles(isLoading)}
-    ${size === 'regular' && regularSizeStyles(isLoading)}
-    ${size === 'large' && largeSizeStyles(isLoading)}
+  ${g}
+  ${({size:o})=>y(o)}
+  ${({size:o,isLoading:r})=>c`
+    ${o==="smaller"&&S(r)}
+    ${o==="small"&&k(r)}
+    ${o==="regular"&&m(r)}
+    ${o==="large"&&w(r)}
   `}
   background-color: transparent;
   transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({ variant, color, disabled, theme }) => css `
-    ${!disabled && variant === 'solid' && solidColorStyles(theme)(color)}
-    ${!disabled && variant === 'outline' && outlineColorStyles(theme)(color)}
-    ${!disabled && variant === 'flat' && flatColorStyles(theme)(color)}
-    ${disabled && variant !== 'flat' && disabledCommonColorStyles(theme)}
-    ${disabled && variant === 'flat' && disabledFlatColorStyles(theme)}
+  ${({variant:o,color:r,disabled:l,theme:t})=>c`
+    ${!l&&o==="solid"&&h(t)(r)}
+    ${!l&&o==="outline"&&B(t)(r)}
+    ${!l&&o==="flat"&&C(t)(r)}
+    ${l&&o!=="flat"&&T(t)}
+    ${l&&o==="flat"&&j(t)}
   `}
-`;
-/****************************************************************************/
-/*                              Main component                              */
-/****************************************************************************/
-const LoadingSpinner = styled(Spinner) ``;
-const spinnerSizes = {
-    smaller: 1,
-    small: 1,
-    regular: 1.5,
-    large: 1.75,
-};
-const Button = ({ size = 'small', color = 'primary', variant = 'solid', fullWidth = false, isDisabled = false, isLoading = false, children, ...props }) => {
-    return (jsx(Root, Object.assign({}, props, { color: color, disabled: isDisabled || isLoading, fullWidth: fullWidth, theme: theme, variant: variant, size: size, isLoading: isLoading }, { children: isLoading ? (jsx(LoadingSpinner, { color: "neutral", size: spinnerSizes[size] }, void 0)) : (children) }), void 0));
-};
-
-export { Button, Button as default };
+`,R=e($)``,z={smaller:1,small:1,regular:1.5,large:1.75},p=({size:o="small",color:r="primary",variant:l="solid",fullWidth:t=!1,isDisabled:x=!1,isLoading:s=!1,children:d,...i})=>n.createElement(v,{...i,color:r,disabled:x||s,fullWidth:t,theme:u,variant:l,size:o,isLoading:s},s?n.createElement(R,{color:"neutral",size:z[o]}):d);export{p as Button,p as default};

package/esm/components/Card/index.js

@@ -1,18 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import theme from '../../theme.js';
-
-const CardWrapper = styled.div `
-  background: ${theme.colors.background.light};
-  ${({ boxShadow }) => boxShadow && `box-shadow: ${boxShadow};`}
-  ${({ boxShadow }) => !boxShadow &&
-    `box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
+import e from"react";import t from"styled-components";import a from"../../theme.js";const d=t.div`
+  background: ${a.colors.background.light};
+  ${({boxShadow:r})=>r&&`box-shadow: ${r};`}
+  ${({boxShadow:r})=>!r&&`box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
     0 1px 5px rgba(0, 0, 0, 15%);`}
   border-radius: 0 0 3px 3px;
-  ${({ topBorder }) => topBorder && `border-top: 4px solid ${topBorder};`}
-`;
-const Card = ({ ...props }) => {
-    return (jsx(CardWrapper, Object.assign({ topBorder: props.topBorder, boxShadow: props.boxShadow }, { children: props.children }), void 0));
-};
-
-export { Card, Card as default };
+  ${({topBorder:r})=>r&&`border-top: 4px solid ${r};`}
+`,o=({...r})=>e.createElement(d,{topBorder:r.topBorder,boxShadow:r.boxShadow},r.children);export{o as Card,o as default};

package/esm/components/CheckBox/index.js

@@ -1,11 +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';
-import CheckIcon from '../Icons/CheckIcon.js';
-
-const regularSize = css `
+import r from"react";import l,{css as t}from"styled-components";import{generateNameHash as p}from"../../shared/helpers.js";import o from"../../theme.js";import g from"../IconButton.js";import m from"../Icons/CheckIcon.js";const x=t`
   width: 24px;
   height: 24px;
 
@@ -13,8 +6,7 @@ const regularSize = css `
     width: 15px;
     height: 15px;
   }
-`;
-const largeSize = css `
+`,b=t`
   width: 32px;
   height: 32px;
 
@@ -22,16 +14,10 @@ const largeSize = css `
     width: 20px;
     height: 20px;
   }
-`;
-const sizes = {
-    regular: regularSize,
-    large: largeSize,
-};
-const disabledStyle = css `
+`,f={regular:x,large:b},u=t`
   cursor: default;
-  border: 2px solid ${theme.colors.gray.light1};
-`;
-const checkedStyle = (color) => css `
+  border: 2px solid ${o.colors.gray.light1};
+`,y=e=>t`
   svg {
     fill: #fefefe;
     opacity: 1;
@@ -40,16 +26,13 @@ const checkedStyle = (color) => css `
   :hover {
   }
 
-  background: ${theme.colors[color].main};
-  border: 2px solid ${theme.colors[color].main};
-`;
-const checkedDisabledStyle = css `
-  background: ${theme.colors.gray.light1};
-`;
-const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' }) `
+  background: ${o.colors[e].main};
+  border: 2px solid ${o.colors[e].main};
+`,k=t`
+  background: ${o.colors.gray.light1};
+`,$=l.input.attrs({type:"checkbox"})`
   display: none;
-`;
-const CheckboxWrapper = styled.label `
+`,v=l.label`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -57,20 +40,17 @@ const CheckboxWrapper = styled.label `
   align-items: center;
   justify-content: center;
 
-  border: 2px solid ${theme.colors.gray.light1};
+  border: 2px solid ${o.colors.gray.light1};
   border-radius: 3px;
 
-  ${props => sizes[props.size]};
+  ${e=>f[e.size]};
 
   svg {
     opacity: 0;
   }
 
-  ${props => props.isChecked && checkedStyle(props.color)};
-  ${props => props.isDisabled && disabledStyle};
-
-  ${props => props.isChecked && props.isDisabled && checkedDisabledStyle};
-`;
-const CheckBox = ({ name = generateNameHash('check-box'), isDisabled = false, size = 'regular', checked, color = 'secondary', onClick, ...rest }) => (jsxs(IconButton, Object.assign({ onClick: onClick, isActive: checked, isDisabled: isDisabled, color: color }, { children: [jsx(HiddenCheckbox, Object.assign({}, rest, { "data-validate": "checked", name: name, id: name, disabled: isDisabled }), void 0), jsx(CheckboxWrapper, Object.assign({ htmlFor: name, size: size, color: color, isChecked: checked, isDisabled: isDisabled }, { children: jsx(CheckIcon, {}, void 0) }), void 0)] }), void 0));
+  ${e=>e.isChecked&&y(e.color)};
+  ${e=>e.isDisabled&&u};
 
-export { CheckBox, CheckBox as default };
+  ${e=>e.isChecked&&e.isDisabled&&k};
+`,a=({name:e=p("check-box"),isDisabled:s=!1,size:d="regular",checked:c,color:i="secondary",onClick:n,...h})=>r.createElement(g,{onClick:n,isActive:c,isDisabled:s,color:i},r.createElement($,{...h,"data-validate":"checked",name:e,id:e,disabled:s}),r.createElement(v,{htmlFor:e,size:d,color:i,isChecked:c,isDisabled:s},r.createElement(m,null)));export{a as CheckBox,a as default};

package/esm/components/Chip/index.js

@@ -1,69 +1,23 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { fadedColor } from '../../shared/helpers.js';
-import theme from '../../theme.js';
-
-const getBackgroundColor = ({ isDisabled, isActive, activeColor, }) => {
-    if (isActive && isDisabled) {
-        return fadedColor(theme.colors[activeColor].main, 0.5);
-    }
-    if (isDisabled) {
-        return theme.colors.gray.light4;
-    }
-    if (isActive) {
-        return theme.colors[activeColor].main;
-    }
-    return 'transparent';
-};
-const getColor = ({ isActive, isDisabled }) => {
-    if (isActive || (isActive && isDisabled)) {
-        return theme.colors.text.light;
-    }
-    if (isDisabled) {
-        return theme.colors.text.disabled;
-    }
-    return theme.colors.text.dark;
-};
-const getFontSize = (size = 'smaller') => {
-    const sizes = {
-        smaller: '0.8125rem',
-        small: '1rem',
-        regular: '1rem',
-        large: '1.25rem',
-    };
-    return sizes[size];
-};
-const Item = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-size: ${({ size }) => getFontSize(size)};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+import a from"react";import s from"styled-components";import{fadedColor as g}from"../../shared/helpers.js";import t from"../../theme.js";const u=({isDisabled:e,isActive:r,activeColor:o})=>r&&e?g(t.colors[o].main,.5):e?t.colors.gray.light4:r?t.colors[o].main:"transparent",h=({isActive:e,isDisabled:r})=>e||e&&r?t.colors.text.light:r?t.colors.text.disabled:t.colors.text.dark,y=(e="smaller")=>({smaller:"0.8125rem",small:"1rem",regular:"1rem",large:"1.25rem"})[e],x=s.div`
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  font-size: ${({size:e})=>y(e)};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
   line-height: 1.25;
   letter-spacing: 0.1px;
   display: inline-block;
-  cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'auto')};
+  cursor: ${({isDisabled:e})=>e?"auto":"pointer"};
   align-items: center;
-  background: ${getBackgroundColor};
-  color: ${getColor};
+  background: ${u};
+  color: ${h};
   justify-content: center;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ isActive, isDisabled }) => !isActive && !isDisabled ? theme.colors.background.dark : 'transparent'};
+  border-color: ${({isActive:e,isDisabled:r})=>!e&&!r?t.colors.background.dark:"transparent"};
   border-radius: 1.293rem;
-`;
-const ContentWrapper = styled.span `
+`,k=s.span`
   padding: 0.5rem 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-`;
-const Chip = ({ activeColor = 'primary', children, component = 'div', isActive, isDisabled, onClick, size, ...props }) => {
-    const handleClick = (e) => {
-        if (!isDisabled && onClick) {
-            onClick(e);
-        }
-    };
-    return (jsx(Item, Object.assign({}, props, { as: component, activeColor: activeColor, isDisabled: isDisabled, isActive: isActive, size: size }, { children: jsx(ContentWrapper, Object.assign({ onClick: handleClick }, { children: children }), void 0) }), void 0));
-};
-
-export { Chip, Chip as default };
+`,i=({activeColor:e="primary",children:r,component:o="div",isActive:c,isDisabled:n,onClick:l,size:m,...d})=>{const p=f=>{!n&&l&&l(f)};return a.createElement(x,{...d,as:o,activeColor:e,isDisabled:n,isActive:c,size:m},a.createElement(k,{onClick:p},r))};export{i as Chip,i as default};

package/esm/components/DayPicker/DayPickerNavBar.js

@@ -1,18 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import Arrow$1 from '../Icons/Arrow.js';
-import theme from '../../theme.js';
-import { BodyText } from '../../typography/BodyText/index.js';
-import { formatMonthTitle } from './localeUtils.js';
-
-const NavBarWrapper = styled.div `
+import t from"react";import e from"styled-components";import s from"../Icons/Arrow.js";import r from"../../theme.js";import{BodyText as m}from"../../typography/BodyText/index.js";import{formatMonthTitle as p}from"./localeUtils.js";const d=e.div`
   display: flex;
   justify-content: space-between;
-`;
-const NavTitle = styled(BodyText) `
-  color: ${theme.colors.text.dark};
-`;
-const NavButton = styled.button `
+`,f=e(m)`
+  color: ${r.colors.text.dark};
+`,o=e.button`
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -21,18 +12,12 @@ const NavButton = styled.button `
   outline: none;
   display: flex;
   align-items: center;
-`;
-const Arrow = styled(Arrow$1) `
+`,n=e(s)`
   width: 16px;
   height: 16px;
-  fill: ${theme.colors.gray.dark3};
-`;
-const BackArrow = styled(Arrow) `
+  fill: ${r.colors.gray.dark3};
+`,y=e(n)`
   transform: rotate(90deg);
-`;
-const ForwardArrow = styled(Arrow) `
+`,h=e(n)`
   transform: rotate(-90deg);
-`;
-const DayPickerNavBar = ({ month, onPreviousClick, onNextClick, locale, }) => (jsxs(NavBarWrapper, { children: [jsx(NavButton, Object.assign({ onClick: () => onPreviousClick() }, { children: jsx(BackArrow, { title: "prev-month" }, void 0) }), void 0), jsx(NavTitle, Object.assign({ as: "h3" }, { children: formatMonthTitle(month, locale) }), void 0), jsx(NavButton, Object.assign({ onClick: () => onNextClick() }, { children: jsx(ForwardArrow, { title: "next-month" }, void 0) }), void 0)] }, void 0));
-
-export { DayPickerNavBar as default };
+`,x=({month:a,onPreviousClick:l,onNextClick:c,locale:i})=>t.createElement(d,null,t.createElement(o,{onClick:()=>l()},t.createElement(y,{title:"prev-month"})),t.createElement(f,{as:"h3"},p(a,i)),t.createElement(o,{onClick:()=>c()},t.createElement(h,{title:"next-month"})));export{x as default};

package/esm/components/DayPicker/index.js

@@ -1,54 +1,34 @@
-import { jsx } from 'react/jsx-runtime';
-import 'react-day-picker/lib/style.css';
-import ReactDayPicker from 'react-day-picker';
-import styled from 'styled-components';
-import theme from '../../theme.js';
-import DayPickerNavBar from './DayPickerNavBar.js';
-import { MONTHS, WEEKDAYS_LONG, WEEKDAYS_SHORT, FIRST_DAY_OF_THE_WEEK } from './localeUtils.js';
-import '../Icons/Arrow.js';
-import '../../typography/BodyText/index.js';
+import t from"react";import c from"react-day-picker";import n from"styled-components";import r from"../../theme.js";import s from"./DayPickerNavBar.js";import{MONTHS as y,WEEKDAYS_LONG as l,WEEKDAYS_SHORT as m,FIRST_DAY_OF_THE_WEEK as d}from"./localeUtils.js";import p from"./style.js";import"../Icons/Arrow.js";import"../../typography/BodyText/index.js";const k=n.div`
+  ${p}
 
-const DayPickerWrapper = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
   .DayPicker-wrapper {
     &:focus {
       outline: none;
     }
   }
   .DayPicker-Weekday {
-    color: ${({ theme }) => theme.colors.gray.light1};
+    color: ${({theme:e})=>e.colors.gray.light1};
   }
   .DayPicker-Day {
     font-size: 12px;
     padding: 14px;
-    font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
-    color: ${({ theme }) => theme.colors.text.dark};
+    font-weight: ${({theme:e})=>e.typography.fontAlternativeBoldWeight};
+    color: ${({theme:e})=>e.colors.text.dark};
     &:focus {
       outline: none;
-      box-shadow: 0 0 4px ${theme.colors.gray.dark3};
+      box-shadow: 0 0 4px ${r.colors.gray.dark3};
     }
     &:not(.DayPicker--interactionDisabled):not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) {
       &:focus {
-        box-shadow: 0 0 4px ${theme.colors.gray.dark3};
+        box-shadow: 0 0 4px ${r.colors.gray.dark3};
       }
       &:hover {
         background-color: rgba(253, 171, 74, 0.25);
       }
     }
     &.DayPicker-Day--disabled {
-      color: ${theme.colors.gray.dark3};
+      color: ${r.colors.gray.dark3};
     }
   }
-`;
-const modifiersStyles = {
-    selected: {
-        color: theme.colors.text.light,
-        background: theme.colors.primary.main,
-        fontWeight: 700,
-    },
-};
-const DayPicker = ({ locale = 'sv', ...props }) => {
-    return (jsx(DayPickerWrapper, { children: jsx(ReactDayPicker, Object.assign({}, props, { locale: locale, months: MONTHS[locale], weekdaysLong: WEEKDAYS_LONG[locale], weekdaysShort: WEEKDAYS_SHORT[locale], firstDayOfWeek: FIRST_DAY_OF_THE_WEEK[locale], navbarElement: navProps => (jsx(DayPickerNavBar, Object.assign({}, navProps, { locale: locale }), void 0)), captionElement: jsx("div", {}, void 0), modifiersStyles: modifiersStyles }), void 0) }, void 0));
-};
-
-export { DayPicker, DayPicker as default };
+`,D={selected:{color:r.colors.text.light,background:r.colors.primary.main,fontWeight:700}},o=({locale:e="sv",...a})=>t.createElement(k,null,t.createElement(c,{...a,locale:e,months:y[e],weekdaysLong:l[e],weekdaysShort:m[e],firstDayOfWeek:d[e],navbarElement:i=>t.createElement(s,{...i,locale:e}),captionElement:t.createElement("div",null),modifiersStyles:D}));export{o as DayPicker,o as default};

package/esm/components/DayPicker/localeUtils.js

@@ -1,52 +1 @@
-const MONTHS = {
-    sv: [
-        'Januari',
-        'Februari',
-        'Mars',
-        'April',
-        'Maj',
-        'Juni',
-        'Juli',
-        'Augusti',
-        'September',
-        'Oktober',
-        'November',
-        'December',
-    ],
-    en: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ],
-};
-const WEEKDAYS_LONG = {
-    sv: ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag'],
-    en: [
-        'Sunday',
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday',
-    ],
-};
-const WEEKDAYS_SHORT = {
-    sv: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
-    en: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-};
-const FIRST_DAY_OF_THE_WEEK = { sv: 1, en: 1 };
-const formatMonthTitle = (d, locale = 'sv') => {
-    return `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`;
-};
-
-export { FIRST_DAY_OF_THE_WEEK, MONTHS, WEEKDAYS_LONG, WEEKDAYS_SHORT, formatMonthTitle };
+const r={sv:["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"],en:["January","February","March","April","May","June","July","August","September","October","November","December"]},n={sv:["S\xF6ndag","M\xE5ndag","Tisdag","Onsdag","Torsdag","Fredag","L\xF6rdag"],en:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},t={sv:["S\xF6","M\xE5","Ti","On","To","Fr","L\xF6"],en:["Su","Mo","Tu","We","Th","Fr","Sa"]},u={sv:1,en:1},s=(e,a="sv")=>`${r[a][e.getMonth()]} ${e.getFullYear()}`;export{u as FIRST_DAY_OF_THE_WEEK,r as MONTHS,n as WEEKDAYS_LONG,t as WEEKDAYS_SHORT,s as formatMonthTitle};