@mrshmllw/smores-react 4.0.1 → 5.0.0

package/dist/Chip/Chip.js

@@ -1,15 +1,51 @@
-import React, { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { theme } from '../theme';
-import { Box } from '../Box';
-import { Icon as IconComponent } from '../Icon';
-import { Loader } from '../Loader';
-import { focusOutline } from '../utils/focusOutline';
-export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon = '', ...props }, ref) => (React.createElement(Container, { as: "button", primary: primary, secondary: secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, icon: icon, ...props, ref: ref }, loading ? (React.createElement(Loader, { color: primary ? 'liquorice' : 'cream', height: "16" })) : (React.createElement(React.Fragment, null,
-    icon && (React.createElement(IconComponent, { render: icon, size: 20, color: primary ? 'liquorice' : 'cream' })),
-    React.createElement(ChildrenContainer, null, children))))));
-Chip.displayName = 'Chip';
-const Container = styled(Box)(({ primary, secondary, icon, $loading, disabled }) => css `
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Loader } from '../Loader/Loader.js';
+import { theme } from '../theme.js';
+import { focusOutline } from '../utils/focusOutline.js';
+
+const Chip = forwardRef(
+  ({
+    children,
+    handleClick,
+    primary = false,
+    secondary = false,
+    disabled = false,
+    loading = false,
+    icon,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    Container,
+    {
+      as: "button",
+      primary,
+      secondary,
+      disabled: disabled || loading,
+      $loading: loading,
+      onClick: handleClick,
+      icon,
+      ...props,
+      ref,
+      children: loading ? /* @__PURE__ */ jsx(Loader, { color: primary ? "liquorice" : "cream", height: "16" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            render: icon,
+            size: 20,
+            color: primary ? "liquorice" : "cream"
+          }
+        ),
+        /* @__PURE__ */ jsx(ChildrenContainer, { children })
+      ] })
+    }
+  )
+);
+Chip.displayName = "Chip";
+const Container = styled(Box)(
+  ({ primary, secondary, icon, $loading, disabled }) => css`
     ${focusOutline()}
 
     align-items: center;
@@ -19,35 +55,33 @@ const Container = styled(Box)(({ primary, secondary, icon, $loading, disabled })
     color: ${theme.colors.liquorice};
     display: flex;
     font-size: 16px;
-    justify-content: ${icon ? 'space-evenly' : 'center'};
+    justify-content: ${icon ? "space-evenly" : "center"};
     line-height: 100%;
-    padding: 8px 16px 8px ${icon ? '8px' : '16px'};
+    padding: 8px 16px 8px ${icon ? "8px" : "16px"};
     width: 98px;
     min-height: 40px;
-    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
-    opacity: ${disabled ? '0.5' : '1'};
+    cursor: ${disabled || $loading ? "not-allowed" : "pointer"};
+    opacity: ${disabled ? "0.5" : "1"};
 
-    ${primary &&
-    css `
+    ${primary && css`
       &:hover {
-        border: ${!(disabled || $loading) &&
-        `2px solid ${theme.colors.mascarpone}`};
+        border: ${!(disabled || $loading) && `2px solid ${theme.colors.mascarpone}`};
         background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
       }
     `}
-    ${secondary &&
-    css `
+    ${secondary && css`
       color: ${theme.colors.cream};
       background-color: ${theme.colors.liquorice};
       border: 2px solid ${theme.colors.liquorice};
       &:hover {
-        border: ${!(disabled || $loading) &&
-        `2px solid ${theme.colors.sesame}`};
+        border: ${!(disabled || $loading) && `2px solid ${theme.colors.sesame}`};
         background-color: ${!(disabled || $loading) && theme.colors.sesame};
       }
     `};
-  `);
-const ChildrenContainer = styled.div `
+  `
+);
+const ChildrenContainer = styled.div`
   flex-grow: 1;
 `;
-//# sourceMappingURL=Chip.js.map
+
+export { Chip };

package/dist/CurrencyInput/CurrencyInput.js

@@ -1,51 +1,90 @@
-import React, { forwardRef } from 'react';
-import { Box } from '../Box';
-import { Field } from '../fields/Field';
-import { useUniqueId } from '../utils/id';
-import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
-export const CurrencyInput = forwardRef(function CurrencyInput({ id: idProp, placeholder, name, value, decimalNumber = true, onChange, onInputChange, onBlur, min, max, disabled = false, error = false, fallbackStyle, ...fieldProps }, ref) {
-    const id = useUniqueId(idProp);
-    const frontIcon = 'pound-regular';
-    const formatCurrency = (value) => {
-        const decimalIndex = value.indexOf('.');
-        if (!decimalNumber) {
-            return Math.trunc(Number(value)).toString();
-        }
-        if (decimalIndex >= 0 && value.length > decimalIndex + 1) {
-            const fractionalString = value.substring(decimalIndex + 1).substring(0, 2);
-            return `${value.substring(0, decimalIndex)}.${fractionalString}`;
-        }
-        else {
-            return value;
-        }
-    };
-    const applyMinMax = (value) => {
-        const numberValue = Number(value);
-        if (min && numberValue < min)
-            return min.toString();
-        if (max && numberValue > max)
-            return max.toString();
-        return value;
-    };
-    const handleChange = (value) => {
-        if (onChange === undefined)
-            return;
-        const EMPTY_INPUT = '';
-        if (value === EMPTY_INPUT) {
-            onChange(value);
-        }
-        else {
-            const amount = formatCurrency(value);
-            const normalisedValue = applyMinMax(amount);
-            onChange(normalisedValue);
-        }
-    };
-    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
-        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
-            React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" }),
-            React.createElement(Input, { ref: ref, error: error, disabled: disabled, type: "number", id: id, name: name, placeholder: placeholder, value: value, frontIcon: frontIcon, fallbackStyle: fallbackStyle, onChange: (e) => {
-                    onChange && handleChange(e.currentTarget.value);
-                    onInputChange && onInputChange(e);
-                }, onBlur: onBlur }))));
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../Box/Box.js';
+import { Field } from '../fields/Field/Field.js';
+import { useUniqueId } from '../utils/id.js';
+import { StyledFrontIcon, Input } from '../fields/components/CommonInput.js';
+
+const CurrencyInput = forwardRef(function CurrencyInput2({
+  id: idProp,
+  placeholder,
+  name,
+  value,
+  decimalNumber = true,
+  onChange,
+  onInputChange,
+  onBlur,
+  min,
+  max,
+  disabled = false,
+  error = false,
+  fallbackStyle,
+  ...fieldProps
+}, ref) {
+  const id = useUniqueId(idProp);
+  const frontIcon = "pound-regular";
+  const formatCurrency = (value2) => {
+    const decimalIndex = value2.indexOf(".");
+    if (!decimalNumber) {
+      return Math.trunc(Number(value2)).toString();
+    }
+    if (decimalIndex >= 0 && value2.length > decimalIndex + 1) {
+      const fractionalString = value2.substring(decimalIndex + 1).substring(0, 2);
+      return `${value2.substring(0, decimalIndex)}.${fractionalString}`;
+    } else {
+      return value2;
+    }
+  };
+  const applyMinMax = (value2) => {
+    const numberValue = Number(value2);
+    if (min && numberValue < min)
+      return min.toString();
+    if (max && numberValue > max)
+      return max.toString();
+    return value2;
+  };
+  const handleChange = (value2) => {
+    if (onChange === void 0)
+      return;
+    const EMPTY_INPUT = "";
+    if (value2 === EMPTY_INPUT) {
+      onChange(value2);
+    } else {
+      const amount = formatCurrency(value2);
+      const normalisedValue = applyMinMax(amount);
+      onChange(normalisedValue);
+    }
+  };
+  return /* @__PURE__ */ jsx(Field, { ...fieldProps, htmlFor: id, error, children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [
+    /* @__PURE__ */ jsx(
+      StyledFrontIcon,
+      {
+        disabled,
+        render: frontIcon,
+        color: "sesame"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        error,
+        disabled,
+        type: "number",
+        id,
+        name,
+        placeholder,
+        value,
+        frontIcon,
+        fallbackStyle,
+        onChange: (e) => {
+          onChange && handleChange(e.currentTarget.value);
+          onInputChange && onInputChange(e);
+        },
+        onBlur
+      }
+    )
+  ] }) });
 });
-//# sourceMappingURL=CurrencyInput.js.map
+
+export { CurrencyInput };

package/dist/Datepicker/Datepicker.js

@@ -1,82 +1,130 @@
-import { addDays, eachMonthOfInterval, format, getDaysInMonth, getMonth, getYear, isSameDay, isSameMonth, isWeekend, isWithinInterval, } from 'date-fns';
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { addDays, isSameMonth, getYear, eachMonthOfInterval, format, getDaysInMonth, getMonth, isSameDay, isWithinInterval, isWeekend } from 'date-fns';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Text } from '../Text';
-import { theme } from '../theme';
-import { convertToUkDate } from '../utils/date';
-import { focusOutlineStyle } from '../utils/focusOutline';
-import { useControllableState } from '../utils/useControlledState';
-import { DatesList } from './DatesList';
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { theme } from '../theme.js';
+import { convertToUkDate } from '../utils/date.js';
+import { focusOutlineStyle } from '../utils/focusOutline.js';
+import { useControllableState } from '../utils/useControlledState.js';
+import { DatesList } from './DatesList.js';
+
 const getAvailableMonths = (startDate, endDate) => {
-    const monthList = eachMonthOfInterval({
-        start: startDate,
-        end: endDate,
-    });
-    return monthList.map((monthDate) => ({
-        date: monthDate,
-        label: format(monthDate, 'MMMM'),
-    }));
+  const monthList = eachMonthOfInterval({
+    start: startDate,
+    end: endDate
+  });
+  return monthList.map((monthDate) => ({
+    date: monthDate,
+    label: format(monthDate, "MMMM")
+  }));
 };
-export const Datepicker = ({ showDayLabels = false, disableWeekend = true, range = 14, fromDate = new Date(), endingDate, showYear = false, showSelectedDate = false, onDateSelect, onChange, value, fallbackStyle = false, ...marginProps }) => {
-    // We want to make sure that the date is in the UK timezone,
-    // this might need to be revisit when opening up to new countries
-    const startDate = convertToUkDate(fromDate);
-    const endDate = endingDate ? endingDate : addDays(startDate, range);
-    const availableMonths = getAvailableMonths(startDate, endDate);
-    const selectedDate = value ?? new Date();
-    const [activeDay, setActiveDay] = useControllableState({
-        initialState: undefined,
-        stateProp: value,
-    });
-    const [activeMonthIndex, setActiveMonth] = useState(showSelectedDate
-        ? availableMonths.findIndex((month) => isSameMonth(month.date, selectedDate))
-        : 0);
-    const handleSelectEvent = (date) => {
-        setActiveDay(date);
-        onChange?.(date);
-        onDateSelect(format(date, 'yyyy-MM-dd'));
-    };
-    const generateDaysForMonth = (monthDate) => {
-        const daysInMonth = getDaysInMonth(monthDate);
-        const month = getMonth(monthDate);
-        const year = getYear(monthDate);
-        const filteredDays = [];
-        for (let i = 1; i <= daysInMonth; i += 1) {
-            const date = new Date(year, month, i);
-            filteredDays.push({
-                date,
-                label: format(date, 'dd'),
-                active: activeDay ? isSameDay(date, activeDay) : false,
-                disabled: !isWithinInterval(date, { start: startDate, end: endDate }) ||
-                    (disableWeekend && isWeekend(date)),
-            });
-        }
-        return filteredDays;
-    };
-    return (React.createElement(Container, { id: "datepicker", ...marginProps, fallbackStyle: fallbackStyle },
-        React.createElement(Header, { flex: true, alignItems: "center", justifyContent: "space-between", direction: "row" },
-            React.createElement(Circle, { type: "button", disabled: activeMonthIndex === 0, onClick: () => setActiveMonth(activeMonthIndex - 1), onKeyDown: (e) => {
-                    if (e.key === 'Enter') {
-                        setActiveMonth(activeMonthIndex - 1);
-                    }
-                } },
-                React.createElement(Icon, { render: "caret", color: "cream", size: 18, rotate: 90 })),
-            React.createElement(Heading, { tag: "h4", typo: "body-regular" },
-                availableMonths[activeMonthIndex].label,
-                ' ',
-                showYear && `- ${getYear(availableMonths[activeMonthIndex].date)}`),
-            React.createElement(Circle, { type: "button", disabled: activeMonthIndex === availableMonths.length - 1, onClick: () => setActiveMonth(activeMonthIndex + 1), onKeyDown: (e) => {
-                    if (e.key === 'Enter') {
-                        setActiveMonth(activeMonthIndex + 1);
-                    }
-                } },
-                React.createElement(Icon, { render: "caret", color: "cream", size: 18, rotate: -90 }))),
-        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "center" },
-            React.createElement(DatesList, { items: generateDaysForMonth(availableMonths[activeMonthIndex].date), showDayLabels: showDayLabels, handleDateSelect: handleSelectEvent }))));
+const Datepicker = ({
+  showDayLabels = false,
+  disableWeekend = true,
+  range = 14,
+  fromDate = /* @__PURE__ */ new Date(),
+  endingDate,
+  showYear = false,
+  showSelectedDate = false,
+  onDateSelect,
+  onChange,
+  value,
+  fallbackStyle = false,
+  ...marginProps
+}) => {
+  const startDate = convertToUkDate(fromDate);
+  const endDate = endingDate ? endingDate : addDays(startDate, range);
+  const availableMonths = getAvailableMonths(startDate, endDate);
+  const selectedDate = value ?? /* @__PURE__ */ new Date();
+  const [activeDay, setActiveDay] = useControllableState({
+    initialState: void 0,
+    stateProp: value
+  });
+  const [activeMonthIndex, setActiveMonth] = useState(
+    showSelectedDate ? availableMonths.findIndex(
+      (month) => isSameMonth(month.date, selectedDate)
+    ) : 0
+  );
+  const handleSelectEvent = (date) => {
+    setActiveDay(date);
+    onChange?.(date);
+    onDateSelect(format(date, "yyyy-MM-dd"));
+  };
+  const generateDaysForMonth = (monthDate) => {
+    const daysInMonth = getDaysInMonth(monthDate);
+    const month = getMonth(monthDate);
+    const year = getYear(monthDate);
+    const filteredDays = [];
+    for (let i = 1; i <= daysInMonth; i += 1) {
+      const date = new Date(year, month, i);
+      filteredDays.push({
+        date,
+        label: format(date, "dd"),
+        active: activeDay ? isSameDay(date, activeDay) : false,
+        disabled: !isWithinInterval(date, { start: startDate, end: endDate }) || disableWeekend && isWeekend(date)
+      });
+    }
+    return filteredDays;
+  };
+  return /* @__PURE__ */ jsxs(Container, { id: "datepicker", ...marginProps, fallbackStyle, children: [
+    /* @__PURE__ */ jsxs(
+      Header,
+      {
+        flex: true,
+        alignItems: "center",
+        justifyContent: "space-between",
+        direction: "row",
+        children: [
+          /* @__PURE__ */ jsx(
+            Circle,
+            {
+              type: "button",
+              disabled: activeMonthIndex === 0,
+              onClick: () => setActiveMonth(activeMonthIndex - 1),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  setActiveMonth(activeMonthIndex - 1);
+                }
+              },
+              children: /* @__PURE__ */ jsx(Icon, { render: "caret", color: "cream", size: 18, rotate: 90 })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Heading, { tag: "h4", typo: "body-regular", children: [
+            availableMonths[activeMonthIndex].label,
+            " ",
+            showYear && `- ${getYear(availableMonths[activeMonthIndex].date)}`
+          ] }),
+          /* @__PURE__ */ jsx(
+            Circle,
+            {
+              type: "button",
+              disabled: activeMonthIndex === availableMonths.length - 1,
+              onClick: () => setActiveMonth(activeMonthIndex + 1),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  setActiveMonth(activeMonthIndex + 1);
+                }
+              },
+              children: /* @__PURE__ */ jsx(Icon, { render: "caret", color: "cream", size: 18, rotate: -90 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(
+      DatesList,
+      {
+        items: generateDaysForMonth(availableMonths[activeMonthIndex].date),
+        showDayLabels,
+        handleDateSelect: handleSelectEvent
+      }
+    ) })
+  ] });
 };
-const Container = styled(Box) `
+const Container = styled(Box)`
   font-family: ${theme.font.system};
   display: inline-block;
   box-sizing: border-box;
@@ -84,16 +132,14 @@ const Container = styled(Box) `
   border-radius: 16px;
 
   ${({ fallbackStyle }) => {
-    return fallbackStyle
-        ? css `
+  return fallbackStyle ? css`
           background-color: ${theme.colors.cream};
-        `
-        : css `
+        ` : css`
           background-color: ${theme.colors.custard};
         `;
 }}
 `;
-const Header = styled(Box) `
+const Header = styled(Box)`
   color: ${theme.colors.liquorice};
   user-select: none;
   padding: 16px;
@@ -104,12 +150,12 @@ const Header = styled(Box) `
     line-height: 1;
   }
 `;
-const Heading = styled(Text) `
+const Heading = styled(Text)`
   position: relative;
   top: 2px;
   font-weight: ${theme.font.weight.medium};
 `;
-const Circle = styled.button `
+const Circle = styled.button`
   background-color: ${theme.colors.liquorice};
   height: 32px;
   width: 32px;
@@ -128,4 +174,5 @@ const Circle = styled.button `
 
   ${focusOutlineStyle}
 `;
-//# sourceMappingURL=Datepicker.js.map
+
+export { Datepicker };

package/dist/Datepicker/DatesList.js

@@ -1,30 +1,45 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { getISODay } from 'date-fns';
-import { theme } from '../theme';
-import { Text } from '../Text';
-import { focusOutlineStyle } from '../utils/focusOutline';
+import { theme } from '../theme.js';
+import { Text } from '../Text/Text.js';
+import { focusOutlineStyle } from '../utils/focusOutline.js';
+
 const getBlankDaysCount = (firstDayOfTheMonth) => {
-    const dayOfTheWeek = getISODay(firstDayOfTheMonth);
-    return dayOfTheWeek - 1;
+  const dayOfTheWeek = getISODay(firstDayOfTheMonth);
+  return dayOfTheWeek - 1;
 };
-const daysOfTheWeek = ['mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun'];
-export const DatesList = ({ items, handleDateSelect, showDayLabels, }) => {
-    return (React.createElement(Container, null,
-        showDayLabels &&
-            daysOfTheWeek.map((day) => {
-                return (React.createElement(Text, { key: day, color: "sesame", typo: "label", mb: "24px" }, day));
-            }),
-        Array(getBlankDaysCount(items[0].date))
-            .fill(null)
-            .map((_, index) => (React.createElement(ListButton, { key: `blankItem-${index}`, disabled: true }))),
-        items.map((item, i) => (React.createElement(ListButton, { key: i, type: "button", disabled: item.disabled, className: `ListButton ${item.active ? 'active' : ''}`, onClick: () => handleDateSelect(item.date), onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    handleDateSelect(item.date);
-                }
-            }, "data-testid": item.label }, item.label)))));
+const daysOfTheWeek = ["mon", "tues", "wed", "thurs", "fri", "sat", "sun"];
+const DatesList = ({
+  items,
+  handleDateSelect,
+  showDayLabels
+}) => {
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    showDayLabels && daysOfTheWeek.map((day) => {
+      return /* @__PURE__ */ jsx(Text, { color: "sesame", typo: "label", mb: "24px", children: day }, day);
+    }),
+    Array(getBlankDaysCount(items[0].date)).fill(null).map((_, index) => /* @__PURE__ */ jsx(ListButton, { disabled: true }, `blankItem-${index}`)),
+    items.map((item, i) => /* @__PURE__ */ jsx(
+      ListButton,
+      {
+        type: "button",
+        disabled: item.disabled,
+        className: `ListButton ${item.active ? "active" : ""}`,
+        onClick: () => handleDateSelect(item.date),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            handleDateSelect(item.date);
+          }
+        },
+        "data-testid": item.label,
+        children: item.label
+      },
+      i
+    ))
+  ] });
 };
-const Container = styled.div `
+const Container = styled.div`
   justify-items: center;
   display: grid;
   grid-column-gap: 4px;
@@ -42,7 +57,7 @@ const Container = styled.div `
     padding: 32px;
   }
 `;
-const ListButton = styled.button `
+const ListButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,8 +70,8 @@ const ListButton = styled.button `
   line-height: 15px;
   color: ${theme.colors.liquorice};
   background-color: transparent;
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
-  opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};
+  pointer-events: ${({ disabled }) => disabled ? "none" : ""};
+  opacity: ${({ disabled }) => disabled ? "0.2" : "1"};
   cursor: pointer;
 
   &:hover:not(.active) {
@@ -72,4 +87,5 @@ const ListButton = styled.button `
 
   ${focusOutlineStyle}
 `;
-//# sourceMappingURL=DatesList.js.map
+
+export { DatesList };

package/dist/Divider/Divider.js

@@ -1,19 +1,25 @@
-import React, { memo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { theme } from '../theme';
-export const Divider = memo(function Divider({ maxWidth = 'none', height = '1px', color = 'oatmeal', ...marginProps }) {
-    return (React.createElement(Line, { maxWidth: maxWidth, height: height, color: color, ...marginProps }));
+import { Box } from '../Box/Box.js';
+import { theme } from '../theme.js';
+
+const Divider = memo(function Divider2({
+  maxWidth = "none",
+  height = "1px",
+  color = "oatmeal",
+  ...marginProps
+}) {
+  return /* @__PURE__ */ jsx(Line, { maxWidth, height, color, ...marginProps });
 });
-const Line = styled(Box) `
-  ${({ color }) => color
-    ? css `
+const Line = styled(Box)`
+  ${({ color }) => color ? css`
           background: ${theme.colors[color]};
-        `
-    : ''}
+        ` : ""}
   display: block;
   height: ${({ height }) => height};
   max-width: ${({ maxWidth }) => maxWidth};
   width: 100%;
 `;
-//# sourceMappingURL=Divider.js.map
+
+export { Divider };