@kvdbil/components 3.3.5-0 → 3.3.5-5

package/README.md

@@ -1,3 +1,3 @@
 ### Kvdbil Components
 
-A component library
+Temporary - Don't use

package/cjs/ColorCard.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var utils_utils = require('./utils/utils.js');
+var theme = require('./theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const SubList = styled__default['default'].ul `
+  padding-left: 2rem;
+`;
+const ColorItem = styled__default['default'].li `
+  list-style: none;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
+  border: 1px solid ${theme['default'].colors.gray.light2};
+  border-radius: 4px;
+  font-family: 'Ralway', sans-serif;
+  margin-top: 0.75rem;
+`;
+const Header = styled__default['default'].span `
+  text-transform: capitalize;
+  padding: 0.5em;
+  display: block;
+  border-bottom: 1px solid ${theme['default'].colors.gray.light2};
+`;
+const Color = styled__default['default'].li `
+  display: block;
+  background: ${({ hex }) => hex};
+  color: ${({ hex }) => (utils_utils.getLuminosity(hex) < 40 ? '#fff' : '#000')};
+  padding: 1em;
+`;
+const SwatchArea = styled__default['default'].ul `
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+const getColor = variants => Object.entries(variants).map(([name, hex]) => typeof hex === 'string' ? (jsxRuntime.jsxs(Color, Object.assign({ hex: hex }, { children: [name, " (", hex, ")"] }), hex)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Header, { children: name }, void 0), jsxRuntime.jsx(SubList, { children: getColor(hex) }, void 0)] }, void 0)));
+const ColorCard = ({ colorName, variants }) => (jsxRuntime.jsxs(ColorItem, { children: [jsxRuntime.jsx(Header, { children: colorName }, void 0), jsxRuntime.jsx(SwatchArea, { children: getColor(variants) }, void 0)] }, void 0));
+
+exports['default'] = ColorCard;

package/cjs/ElevationCard.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Card = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  font-size: 1.25rem;
+  box-shadow: ${({ elevation }) => elevation};
+  width: 14rem;
+  height: 10rem;
+  margin: 1rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ElevationCard = ({ children, value, as = 'div', }) => {
+    return (jsxRuntime.jsx(Card, Object.assign({ as: as, elevation: value }, { children: children }), void 0));
+};
+
+exports.ElevationCard = ElevationCard;

package/cjs/Interfaces.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/Types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/components/Accordion/index.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styled = require('styled-components');
+var reactCollapse = require('react-collapse');
+var shared_mediaQueries = require('../../shared/media-queries.js');
+var icons_components_ArrowDownIcon = require('../../icons/components/ArrowDownIcon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Container = styled__default['default'].div `
+  display: flex;
+  flex-direction: column;
+  .ReactCollapse--collapse {
+    transition: height 300ms;
+  }
+`;
+const List = styled__default['default'].ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+const Title = styled__default['default'].div `
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  margin: 0.5rem 0;
+`;
+const Arrow = styled__default['default'].div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.75rem;
+  color: ${({ theme }) => theme.colors.text.dark};
+  transition: 200ms ease-in-out;
+  transform: ${({ isOpen }) => `rotate(${isOpen ? '180deg' : '0deg'})`};
+`;
+const Item = styled__default['default'].li `
+  border-top: ${({ theme }) => `1px solid ${theme.colors.gray.light2}`};
+  padding: ${({ isOpen }) => (isOpen ? '0.5rem 0 1rem 0' : '0.5rem 0')};
+
+  &:last-child {
+    border-bottom: ${({ theme }) => `1px solid ${theme.colors.gray.light2}`};
+  }
+`;
+const Text = styled__default['default'].span `
+  color: ${({ theme }) => theme.colors.text.dark};
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  font-size: 0.9375rem;
+  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+`;
+const Content = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  color: ${({ theme }) => theme.colors.text.dark};
+  font-size: 0.9375rem;
+  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+  line-height: 1.3;
+  transition: 200ms ease-in-out;
+  ${shared_mediaQueries.mq('tablet')} {
+    padding: 0;
+  }
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+`;
+const Accordion = ({ items, ...props }) => {
+    const [isOpened, setIsOpened] = react.useState({});
+    const toggleIsOpened = (index) => {
+        setIsOpened(prevState => ({ ...prevState, [index]: !prevState[index] }));
+    };
+    const onClick = (index) => () => {
+        toggleIsOpened(index);
+    };
+    const onKeyPress = (index) => (e) => {
+        if (e.key === 'Enter') {
+            toggleIsOpened(index);
+        }
+    };
+    return (jsxRuntime.jsx(Container, Object.assign({}, props, { children: jsxRuntime.jsx(List, Object.assign({ className: "accordionList" }, { children: items.map((item, index) => {
+                const isOpen = Boolean(isOpened[index]);
+                return (jsxRuntime.jsxs(Item, Object.assign({ isOpen: isOpen, className: "accordionItem" }, { children: [jsxRuntime.jsxs(Title, Object.assign({ onClick: onClick(index), onKeyPress: onKeyPress(index), className: "accordionItemTitle", role: "button", tabIndex: 0, "aria-expanded": isOpen, id: `panel${index}-header`, "aria-controls": `panel${index}-content` }, { children: [jsxRuntime.jsx(Text, Object.assign({ as: "span" }, { children: item.title }), void 0), jsxRuntime.jsx(Arrow, Object.assign({ isOpen: isOpen }, { children: jsxRuntime.jsx(icons_components_ArrowDownIcon['default'], {}, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(reactCollapse.UnmountClosed, Object.assign({ isOpened: isOpen }, { children: jsxRuntime.jsx(Content, { "aria-labelledby": `panel${index}-header`, id: `panel${index}-content`, role: "region", className: "wysiwyg", dangerouslySetInnerHTML: {
+                                    __html: item.text,
+                                } }, void 0) }), index)] }), item.title));
+            }) }), void 0) }), void 0));
+};
+
+exports.Accordion = Accordion;
+exports['default'] = Accordion;

package/cjs/components/Badge/index.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const BadgeContainer = styled__default['default'].div `
+  border-radius: 0.75rem;
+  background: ${theme['default'].colors.secondary.main};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  box-sizing: border-box;
+  cursor: default;
+`;
+const SmallBadgeContainer = styled__default['default'](BadgeContainer) `
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  min-width: 1rem;
+  position: relative;
+`;
+const MiddleDot = styled__default['default'].div `
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  opacity: 0.1;
+  transform: scale(0.5);
+  background: ${theme['default'].colors.text.dark};
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const Label = styled__default['default'].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 (jsxRuntime.jsx(SmallBadgeContainer, Object.assign({}, rest, { children: jsxRuntime.jsx(MiddleDot, { "data-test": "middle-dot" }, void 0) }), void 0));
+    }
+    const label = numberToLabel(notificationAmount);
+    return (jsxRuntime.jsx(BadgeContainer, Object.assign({}, rest, { children: jsxRuntime.jsx(Label, { children: label }, void 0) }), void 0));
+};
+
+exports.Badge = Badge;
+exports['default'] = Badge;

package/cjs/components/Button/index.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+var components_Spinner_index = require('../Spinner/index.js');
+var typography_ButtonText_index = require('../../typography/ButtonText/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/****************************************************************************/
+/*                               Font styles                                */
+/****************************************************************************/
+const getFontStyles = (size) => {
+    switch (size) {
+        case 'smaller':
+            return typography_ButtonText_index.ButtonSmallTextStyle;
+        case 'small':
+            return typography_ButtonText_index.ButtonRegularTextStyle;
+        case 'regular':
+            return typography_ButtonText_index.ButtonRegularTextStyle;
+        case 'large':
+            return typography_ButtonText_index.ButtonLargeTextStyle;
+        default:
+            return typography_ButtonText_index.ButtonRegularTextStyle;
+    }
+};
+/****************************************************************************/
+/*                               Size styles                                */
+/****************************************************************************/
+const smallerSizeStyles = (isLoading) => `
+  min-width: 76px;
+  padding: ${isLoading ? '7px 10px 5.5px' : '10px 10px 8px'};
+`;
+const smallSizeStyles = (isLoading) => `
+  min-width: 76px;
+  padding: ${isLoading ? '8px 10px 6px' : '11px 10px 9px'};
+`;
+const regularSizeStyles = (isLoading) => `
+  min-width: 250px;
+  padding: ${isLoading ? '7px 22px 5px' : '15px 22px 13px'};
+`;
+const largeSizeStyles = (isLoading) => `
+  min-width: 250px;
+  padding: ${isLoading ? '9px 22px 6px' : '21px 22px 19px'};
+`;
+/****************************************************************************/
+/*                               Color styles                               */
+/****************************************************************************/
+const solidColorStyles = (theme) => (color) => `
+  color: white;
+  border-color: ${theme.colors[color].main};
+  background-color: ${theme.colors[color].main};
+
+  :hover {
+    border-color: ${theme.colors[color].light};
+    background-color: ${theme.colors[color].light};
+  }
+
+  :active {
+    border-color: ${theme.colors[color].dark};
+    background-color: ${theme.colors[color].dark}
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+  }
+`;
+const outlineColorStyles = (theme) => (color) => `
+  color: ${theme.colors[color].main};
+  border-color: ${theme.colors[color].main};
+  background-color: transparent;
+
+  :hover {
+      color: white;
+      border-color: ${theme.colors[color].light};
+      background-color: ${theme.colors[color].light};
+  }
+
+  :active {
+    color: white;
+    border-color: ${theme.colors[color].dark};
+    background-color: ${theme.colors[color].dark};
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+  }
+`;
+const flatColorStyles = (theme) => (color) => `
+  color: ${theme.colors[color].main};
+  border-color: transparent;
+  background-color: transparent;
+
+  :hover {
+    color: ${theme.colors[color].dark};
+  }
+
+  :active {
+    color: ${theme.colors[color].light};
+  }
+`;
+const disabledCommonColorStyles = (theme) => `
+  background-color: ${theme.colors.gray.light4};
+  border-color: ${theme.colors.gray.light4};
+  color: ${theme.colors.gray.light1};
+  cursor: not-allowed;
+`;
+const disabledFlatColorStyles = (theme) => `
+  border-color: transparent;
+  background-color: transparent;
+  color: ${theme.colors.gray.light1};
+  cursor: not-allowed;
+`;
+/****************************************************************************/
+/*                               Root styles                                */
+/****************************************************************************/
+const Root = styled__default['default'].button `
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  border: 2px solid transparent;
+  border-radius: 3px;
+  width: ${({ fullWidth }) => fullWidth && '100%'};
+
+  ${typography_ButtonText_index.BasicButtonTextStyle}
+  ${({ size }) => getFontStyles(size)}
+  ${({ size, isLoading }) => styled.css `
+    ${size === 'smaller' && smallerSizeStyles(isLoading)}
+    ${size === 'small' && smallSizeStyles(isLoading)}
+    ${size === 'regular' && regularSizeStyles(isLoading)}
+    ${size === 'large' && largeSizeStyles(isLoading)}
+  `}
+  background-color: transparent;
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+  ${({ variant, color, disabled, theme }) => styled.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)}
+  `}
+`;
+/****************************************************************************/
+/*                              Main component                              */
+/****************************************************************************/
+const LoadingSpinner = styled__default['default'](components_Spinner_index['default']) ``;
+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 (jsxRuntime.jsx(Root, Object.assign({}, props, { color: color, disabled: isDisabled || isLoading, fullWidth: fullWidth, theme: theme['default'], variant: variant, size: size, isLoading: isLoading }, { children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, { color: "neutral", size: spinnerSizes[size] }, void 0)) : (children) }), void 0));
+};
+
+exports.Button = Button;
+exports['default'] = Button;

package/cjs/components/Card/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const CardWrapper = styled__default['default'].div `
+  background: ${theme['default'].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%),
+    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 (jsxRuntime.jsx(CardWrapper, Object.assign({ topBorder: props.topBorder, boxShadow: props.boxShadow }, { children: props.children }), void 0));
+};
+
+exports.Card = Card;
+exports['default'] = Card;

package/cjs/components/CheckBox/index.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_helpers = require('../../shared/helpers.js');
+var theme = require('../../theme.js');
+var components_IconButton = require('../IconButton.js');
+var components_Icons_CheckIcon = require('../Icons/CheckIcon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const regularSize = styled.css `
+  width: 24px;
+  height: 24px;
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+const largeSize = styled.css `
+  width: 32px;
+  height: 32px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const sizes = {
+    regular: regularSize,
+    large: largeSize,
+};
+const disabledStyle = styled.css `
+  cursor: default;
+  border: 2px solid ${theme['default'].colors.gray.light1};
+`;
+const checkedStyle = (color) => styled.css `
+  svg {
+    fill: #fefefe;
+    opacity: 1;
+  }
+
+  :hover {
+  }
+
+  background: ${theme['default'].colors[color].main};
+  border: 2px solid ${theme['default'].colors[color].main};
+`;
+const checkedDisabledStyle = styled.css `
+  background: ${theme['default'].colors.gray.light1};
+`;
+const HiddenCheckbox = styled__default['default'].input.attrs({ type: 'checkbox' }) `
+  display: none;
+`;
+const CheckboxWrapper = styled__default['default'].label `
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  border: 2px solid ${theme['default'].colors.gray.light1};
+  border-radius: 3px;
+
+  ${props => sizes[props.size]};
+
+  svg {
+    opacity: 0;
+  }
+
+  ${props => props.isChecked && checkedStyle(props.color)};
+  ${props => props.isDisabled && disabledStyle};
+
+  ${props => props.isChecked && props.isDisabled && checkedDisabledStyle};
+`;
+const CheckBox = ({ name = shared_helpers.generateNameHash('check-box'), isDisabled = false, size = 'regular', checked, color = 'secondary', onClick, ...rest }) => (jsxRuntime.jsxs(components_IconButton['default'], Object.assign({ onClick: onClick, isActive: checked, isDisabled: isDisabled, color: color }, { children: [jsxRuntime.jsx(HiddenCheckbox, Object.assign({}, rest, { "data-validate": "checked", name: name, id: name, disabled: isDisabled }), void 0), jsxRuntime.jsx(CheckboxWrapper, Object.assign({ htmlFor: name, size: size, color: color, isChecked: checked, isDisabled: isDisabled }, { children: jsxRuntime.jsx(components_Icons_CheckIcon['default'], {}, void 0) }), void 0)] }), void 0));
+
+exports.CheckBox = CheckBox;
+exports['default'] = CheckBox;

package/cjs/components/Chip/index.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_helpers = require('../../shared/helpers.js');
+var theme = require('../../theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const getBackgroundColor = ({ isDisabled, isActive, activeColor, }) => {
+    if (isActive && isDisabled) {
+        return shared_helpers.fadedColor(theme['default'].colors[activeColor].main, 0.5);
+    }
+    if (isDisabled) {
+        return theme['default'].colors.gray.light4;
+    }
+    if (isActive) {
+        return theme['default'].colors[activeColor].main;
+    }
+    return 'transparent';
+};
+const getColor = ({ isActive, isDisabled }) => {
+    if (isActive || (isActive && isDisabled)) {
+        return theme['default'].colors.text.light;
+    }
+    if (isDisabled) {
+        return theme['default'].colors.text.disabled;
+    }
+    return theme['default'].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__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-size: ${({ size }) => getFontSize(size)};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  display: inline-block;
+  cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'auto')};
+  align-items: center;
+  background: ${getBackgroundColor};
+  color: ${getColor};
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ isActive, isDisabled }) => !isActive && !isDisabled ? theme['default'].colors.background.dark : 'transparent'};
+  border-radius: 1.293rem;
+`;
+const ContentWrapper = styled__default['default'].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 (jsxRuntime.jsx(Item, Object.assign({}, props, { as: component, activeColor: activeColor, isDisabled: isDisabled, isActive: isActive, size: size }, { children: jsxRuntime.jsx(ContentWrapper, Object.assign({ onClick: handleClick }, { children: children }), void 0) }), void 0));
+};
+
+exports.Chip = Chip;
+exports['default'] = Chip;

package/cjs/components/DayPicker/DayPickerNavBar.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var components_Icons_Arrow = require('../Icons/Arrow.js');
+var theme = require('../../theme.js');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+var components_DayPicker_localeUtils = require('./localeUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const NavBarWrapper = styled__default['default'].div `
+  display: flex;
+  justify-content: space-between;
+`;
+const NavTitle = styled__default['default'](typography_BodyText_index.BodyText) `
+  color: ${theme['default'].colors.text.dark};
+`;
+const NavButton = styled__default['default'].button `
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  display: flex;
+  align-items: center;
+`;
+const Arrow = styled__default['default'](components_Icons_Arrow['default']) `
+  width: 16px;
+  height: 16px;
+  fill: ${theme['default'].colors.gray.dark3};
+`;
+const BackArrow = styled__default['default'](Arrow) `
+  transform: rotate(90deg);
+`;
+const ForwardArrow = styled__default['default'](Arrow) `
+  transform: rotate(-90deg);
+`;
+const DayPickerNavBar = ({ month, onPreviousClick, onNextClick, locale, }) => (jsxRuntime.jsxs(NavBarWrapper, { children: [jsxRuntime.jsx(NavButton, Object.assign({ onClick: () => onPreviousClick() }, { children: jsxRuntime.jsx(BackArrow, { title: "prev-month" }, void 0) }), void 0), jsxRuntime.jsx(NavTitle, Object.assign({ as: "h3" }, { children: components_DayPicker_localeUtils.formatMonthTitle(month, locale) }), void 0), jsxRuntime.jsx(NavButton, Object.assign({ onClick: () => onNextClick() }, { children: jsxRuntime.jsx(ForwardArrow, { title: "next-month" }, void 0) }), void 0)] }, void 0));
+
+exports['default'] = DayPickerNavBar;