@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.2 → 10.7.1

package/dist/CurrencyInput/CurrencyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../src/CurrencyInput/CurrencyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  WheelEvent,\n  forwardRef,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\n\nimport { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\n\nexport interface Props extends CommonFieldProps {\n  placeholder: string\n  name?: string\n  value: string\n  decimalNumber?: boolean\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  min?: number\n  max?: number\n}\n\n/** on change or on input required */\ntype InputProps =\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n\nexport type CurrencyInputProps = Props & InputProps\n\nexport const CurrencyInput = forwardRef(function CurrencyInput(\n  {\n    id: idProp,\n    placeholder,\n    name,\n    value,\n    decimalNumber = true,\n    onChange,\n    onInputChange,\n    onBlur,\n    min,\n    max,\n    disabled = false,\n    error = false,\n    fallbackStyle,\n    ...fieldProps\n  }: CurrencyInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n  const frontIcon = 'pound-regular'\n\n  const formatCurrency = (value: string) => {\n    const decimalIndex = value.indexOf('.')\n\n    if (!decimalNumber) {\n      return Math.trunc(Number(value)).toString()\n    }\n\n    if (decimalIndex >= 0 && value.length > decimalIndex + 1) {\n      const fractionalString = value.substring(decimalIndex + 1).substring(0, 2)\n      return `${value.substring(0, decimalIndex)}.${fractionalString}`\n    } else {\n      return value\n    }\n  }\n\n  const applyMinMax = (value: string) => {\n    const numberValue = Number(value)\n    if (min && numberValue < min) return min.toString()\n    if (max && numberValue > max) return max.toString()\n    return value\n  }\n\n  const handleChange = (value: string) => {\n    if (onChange === undefined) return\n    const EMPTY_INPUT = ''\n\n    if (value === EMPTY_INPUT) {\n      onChange(value)\n    } else {\n      const amount = formatCurrency(value)\n      const normalisedValue = applyMinMax(amount)\n\n      onChange(normalisedValue)\n    }\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        <StyledFrontIcon\n          $disabled={disabled}\n          render={frontIcon}\n          color=\"sesame\"\n        />\n        <Input\n          ref={ref}\n          $error={error}\n          disabled={disabled}\n          type=\"number\"\n          id={id}\n          name={name}\n          placeholder={placeholder}\n          value={value}\n          $frontIcon={frontIcon}\n          $fallbackStyle={fallbackStyle}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && handleChange(e.currentTarget.value)\n            onInputChange && onInputChange(e)\n          }}\n          onWheel={(e: WheelEvent<HTMLInputElement>) => e.currentTarget.blur()}\n          onBlur={onBlur}\n        />\n      </Box>\n    </Field>\n  )\n})\n"]}

package/dist/CurrencyInput/index.js

@@ -0,0 +1,2 @@
+export { CurrencyInput } from './CurrencyInput';
+//# sourceMappingURL=index.js.map

package/dist/CurrencyInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CurrencyInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA","sourcesContent":["export { CurrencyInput } from './CurrencyInput'\n"]}

package/dist/Datepicker/Datepicker.js

@@ -0,0 +1,133 @@
+import { addDays, eachMonthOfInterval, format, getDaysInMonth, getMonth, getYear, isSameDay, isSameMonth, isWeekend, isWithinInterval, } from 'date-fns';
+import React, { 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';
+const getAvailableMonths = (startDate, endDate) => {
+    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, disabled, 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: disabled
+                    ? true
+                    : !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, { "aria-label": "previous-month", type: "button", "data-testid": "last-month", 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, { "aria-label": "next-month", type: "button", "data-testid": "next-month", 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 Container = styled(Box) `
+  font-family: ${theme.font.system};
+  display: inline-block;
+  box-sizing: border-box;
+  outline: none;
+  border-radius: 16px;
+
+  ${({ $fallbackStyle }) => {
+    return $fallbackStyle
+        ? css `
+          background-color: ${theme.colors.cream};
+        `
+        : css `
+          background-color: ${theme.colors.custard};
+        `;
+}}
+`;
+const Header = styled(Box) `
+  color: ${theme.colors.liquorice};
+  user-select: none;
+  padding: 16px;
+  border-bottom: 1px solid ${theme.colors.oatmeal};
+
+  span {
+    font-size: 16px;
+    line-height: 1;
+  }
+`;
+const Heading = styled(Text) `
+  position: relative;
+  top: 2px;
+  font-weight: ${theme.font.weight.medium};
+`;
+const Circle = styled.button `
+  background-color: ${theme.colors.liquorice};
+  height: 32px;
+  width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: none;
+  padding: 0 !important;
+  cursor: pointer;
+
+  :disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  ${focusOutlineStyle}
+`;
+//# sourceMappingURL=Datepicker.js.map

package/dist/Datepicker/Datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  addDays,\n  eachMonthOfInterval,\n  format,\n  getDaysInMonth,\n  getMonth,\n  getYear,\n  isSameDay,\n  isSameMonth,\n  isWeekend,\n  isWithinInterval,\n} from 'date-fns'\nimport React, { FC, useState } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\n\nimport { convertToUkDate } from '../utils/date'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { useControllableState } from '../utils/useControlledState'\nimport { DatesList } from './DatesList'\n\nconst getAvailableMonths = (startDate: Date, endDate: Date) => {\n  const monthList = eachMonthOfInterval({\n    start: startDate,\n    end: endDate,\n  })\n\n  return monthList.map((monthDate) => ({\n    date: monthDate,\n    label: format(monthDate, 'MMMM'),\n  }))\n}\n\nexport type DatepickerProps = {\n  showDayLabels?: boolean\n  disableWeekend?: boolean\n  fromDate?: Date\n  endingDate?: Date\n  showYear?: boolean\n  showSelectedDate?: boolean\n  range?: number\n  onDateSelect: (date: string) => void\n  onChange?: (value: Date) => void\n  value?: Date\n  /** Disables all dates, defaults to false */\n  disabled?: boolean\n  fallbackStyle?: boolean\n} & MarginProps\n\nexport const Datepicker: FC<DatepickerProps> = ({\n  showDayLabels = false,\n  disableWeekend = true,\n  range = 14,\n  fromDate = new Date(),\n  endingDate,\n  showYear = false,\n  showSelectedDate = false,\n  onDateSelect,\n  onChange,\n  value,\n  disabled,\n  fallbackStyle = false,\n  ...marginProps\n}) => {\n  // We want to make sure that the date is in the UK timezone,\n  // this might need to be revisit when opening up to new countries\n  const startDate = convertToUkDate(fromDate)\n  const endDate = endingDate ? endingDate : addDays(startDate, range)\n  const availableMonths = getAvailableMonths(startDate, endDate)\n\n  const selectedDate = value ?? new Date()\n\n  const [activeDay, setActiveDay] = useControllableState({\n    initialState: undefined,\n    stateProp: value,\n  })\n  const [activeMonthIndex, setActiveMonth] = useState(\n    showSelectedDate\n      ? availableMonths.findIndex((month) =>\n          isSameMonth(month.date, selectedDate),\n        )\n      : 0,\n  )\n\n  const handleSelectEvent = (date: Date) => {\n    setActiveDay(date)\n    onChange?.(date)\n    onDateSelect(format(date, 'yyyy-MM-dd'))\n  }\n\n  const generateDaysForMonth = (monthDate: Date) => {\n    const daysInMonth = getDaysInMonth(monthDate)\n    const month = getMonth(monthDate)\n    const year = getYear(monthDate)\n    const filteredDays = []\n\n    for (let i = 1; i <= daysInMonth; i += 1) {\n      const date = new Date(year, month, i)\n\n      filteredDays.push({\n        date,\n        label: format(date, 'dd'),\n        active: activeDay ? isSameDay(date, activeDay) : false,\n        disabled: disabled\n          ? true\n          : !isWithinInterval(date, { start: startDate, end: endDate }) ||\n            (disableWeekend && isWeekend(date)),\n      })\n    }\n\n    return filteredDays\n  }\n\n  return (\n    <Container id=\"datepicker\" {...marginProps} $fallbackStyle={fallbackStyle}>\n      <Header\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        direction=\"row\"\n      >\n        <Circle\n          aria-label=\"previous-month\"\n          type=\"button\"\n          data-testid=\"last-month\"\n          disabled={activeMonthIndex === 0}\n          onClick={() => setActiveMonth(activeMonthIndex - 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex - 1)\n            }\n          }}\n        >\n          <Icon render=\"caret\" color=\"cream\" size={18} rotate={90} />\n        </Circle>\n\n        <Heading tag=\"h4\" typo=\"body-regular\">\n          {availableMonths[activeMonthIndex]?.label}{' '}\n          {showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`}\n        </Heading>\n\n        <Circle\n          aria-label=\"next-month\"\n          type=\"button\"\n          data-testid=\"next-month\"\n          disabled={activeMonthIndex === availableMonths.length - 1}\n          onClick={() => setActiveMonth(activeMonthIndex + 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex + 1)\n            }\n          }}\n        >\n          <Icon render=\"caret\" color=\"cream\" size={18} rotate={-90} />\n        </Circle>\n      </Header>\n\n      <Box flex alignItems=\"center\" justifyContent=\"center\">\n        <DatesList\n          items={generateDaysForMonth(availableMonths[activeMonthIndex]?.date)}\n          showDayLabels={showDayLabels}\n          handleDateSelect={handleSelectEvent}\n        />\n      </Box>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ $fallbackStyle: boolean }>`\n  font-family: ${theme.font.system};\n  display: inline-block;\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 16px;\n\n  ${({ $fallbackStyle }) => {\n    return $fallbackStyle\n      ? css`\n          background-color: ${theme.colors.cream};\n        `\n      : css`\n          background-color: ${theme.colors.custard};\n        `\n  }}\n`\n\nconst Header = styled(Box)`\n  color: ${theme.colors.liquorice};\n  user-select: none;\n  padding: 16px;\n  border-bottom: 1px solid ${theme.colors.oatmeal};\n\n  span {\n    font-size: 16px;\n    line-height: 1;\n  }\n`\n\nconst Heading = styled(Text)`\n  position: relative;\n  top: 2px;\n  font-weight: ${theme.font.weight.medium};\n`\n\nconst Circle = styled.button`\n  background-color: ${theme.colors.liquorice};\n  height: 32px;\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: none;\n  padding: 0 !important;\n  cursor: pointer;\n\n  :disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  ${focusOutlineStyle}\n`\n"]}

package/dist/Datepicker/DatesList.js

@@ -0,0 +1,77 @@
+import { getISODay } from 'date-fns';
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import { focusOutlineStyle } from '../utils/focusOutline';
+const getBlankDaysCount = (firstDayOfTheMonth) => {
+    if (!firstDayOfTheMonth)
+        return;
+    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, { "aria-label": `${index}-unselectable-date`, 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 Container = styled.div `
+  justify-items: center;
+  display: grid;
+  grid-column-gap: 4px;
+  grid-row-gap: 8px;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 8px;
+
+  @media (min-width: 360px) {
+    grid-gap: 8px;
+    padding: 16px;
+  }
+
+  @media (min-width: 768px) {
+    grid-column-gap: 16px;
+    padding: 32px;
+  }
+`;
+const ListButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  border: 1px solid transparent;
+  font-weight: ${theme.font.weight.medium};
+  font-size: 14px;
+  line-height: 15px;
+  color: ${theme.colors.liquorice};
+  background-color: transparent;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
+  opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};
+  cursor: pointer;
+
+  &:hover:not(.active) {
+    color: ${theme.colors.custard};
+    background-color: ${theme.colors.liquorice};
+  }
+
+  &.active {
+    color: ${theme.colors.custard};
+    background-color: ${theme.colors.liquorice};
+    cursor: default;
+  }
+
+  ${focusOutlineStyle}
+`;
+//# sourceMappingURL=DatesList.js.map

package/dist/Datepicker/DatesList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AASzD,MAAM,iBAAiB,GAAG,CAAC,kBAAwB,EAAE,EAAE;IACrD,IAAI,CAAC,kBAAkB;QAAE,OAAM;IAC/B,MAAM,YAAY,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAA;IAClD,OAAO,YAAY,GAAG,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAE1E,MAAM,CAAC,MAAM,SAAS,GAAc,CAAC,EACnC,KAAK,EACL,gBAAgB,EAChB,aAAa,GACd,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,SAAS;QACP,aAAa;YACZ,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBACxB,OAAO,CACL,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,IAClD,GAAG,CACC,CACR,CAAA;YACH,CAAC,CAAC;QACH,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;aACtC,IAAI,CAAC,IAAI,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACjB,oBAAC,UAAU,kBACG,GAAG,KAAK,oBAAoB,EACxC,GAAG,EAAE,aAAa,KAAK,EAAE,EACzB,QAAQ,SACR,CACH,CAAC;QACH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,oBAAC,UAAU,IACT,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,cAAc,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACtD,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC7B,CAAC;YACH,CAAC,iBACY,IAAI,CAAC,KAAK,IAEtB,IAAI,CAAC,KAAK,CACA,CACd,CAAC,CACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiB3B,CAAA;AAMD,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAa;;;;;;;;iBAQ5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;WAG9B,KAAK,CAAC,MAAM,CAAC,SAAS;;oBAEb,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;aACjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;;;;aAI1C,KAAK,CAAC,MAAM,CAAC,OAAO;wBACT,KAAK,CAAC,MAAM,CAAC,SAAS;;;;aAIjC,KAAK,CAAC,MAAM,CAAC,OAAO;wBACT,KAAK,CAAC,MAAM,CAAC,SAAS;;;;IAI1C,iBAAiB;CACpB,CAAA","sourcesContent":["import { getISODay } from 'date-fns'\nimport React, { FC } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\n\nimport { Text } from '../Text'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { Day } from './types'\n\ntype Props = {\n  items: Day[]\n  showDayLabels: boolean\n  handleDateSelect: (date: Date) => void\n}\n\nconst getBlankDaysCount = (firstDayOfTheMonth: Date) => {\n  if (!firstDayOfTheMonth) return\n  const dayOfTheWeek = getISODay(firstDayOfTheMonth)\n  return dayOfTheWeek - 1\n}\n\nconst daysOfTheWeek = ['mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun']\n\nexport const DatesList: FC<Props> = ({\n  items,\n  handleDateSelect,\n  showDayLabels,\n}) => {\n  return (\n    <Container>\n      {showDayLabels &&\n        daysOfTheWeek.map((day) => {\n          return (\n            <Text key={day} color=\"sesame\" typo=\"label\" mb=\"24px\">\n              {day}\n            </Text>\n          )\n        })}\n      {Array(getBlankDaysCount(items[0]?.date))\n        .fill(null)\n        .map((_, index) => (\n          <ListButton\n            aria-label={`${index}-unselectable-date`}\n            key={`blankItem-${index}`}\n            disabled\n          />\n        ))}\n      {items.map((item: Day, i) => (\n        <ListButton\n          key={i}\n          type=\"button\"\n          disabled={item.disabled}\n          className={`ListButton ${item.active ? 'active' : ''}`}\n          onClick={() => handleDateSelect(item.date)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              handleDateSelect(item.date)\n            }\n          }}\n          data-testid={item.label}\n        >\n          {item.label}\n        </ListButton>\n      ))}\n    </Container>\n  )\n}\n\nconst Container = styled.div`\n  justify-items: center;\n  display: grid;\n  grid-column-gap: 4px;\n  grid-row-gap: 8px;\n  grid-template-columns: repeat(7, 1fr);\n  padding: 8px;\n\n  @media (min-width: 360px) {\n    grid-gap: 8px;\n    padding: 16px;\n  }\n\n  @media (min-width: 768px) {\n    grid-column-gap: 16px;\n    padding: 32px;\n  }\n`\n\ninterface IListButton {\n  disabled?: boolean\n}\n\nconst ListButton = styled.button<IListButton>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  width: 32px;\n  height: 32px;\n  border: 1px solid transparent;\n  font-weight: ${theme.font.weight.medium};\n  font-size: 14px;\n  line-height: 15px;\n  color: ${theme.colors.liquorice};\n  background-color: transparent;\n  pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};\n  opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};\n  cursor: pointer;\n\n  &:hover:not(.active) {\n    color: ${theme.colors.custard};\n    background-color: ${theme.colors.liquorice};\n  }\n\n  &.active {\n    color: ${theme.colors.custard};\n    background-color: ${theme.colors.liquorice};\n    cursor: default;\n  }\n\n  ${focusOutlineStyle}\n`\n"]}

package/dist/Datepicker/index.js

@@ -0,0 +1,2 @@
+export { Datepicker } from './Datepicker';
+//# sourceMappingURL=index.js.map

package/dist/Datepicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Datepicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA","sourcesContent":["export { Datepicker } from './Datepicker'\n"]}

package/dist/Datepicker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/Datepicker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Datepicker/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Day {\n  label: string\n  disabled: boolean\n  active: boolean\n  date: Date\n}\n"]}

package/dist/Divider/Divider.js

@@ -0,0 +1,18 @@
+import React, { 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 }));
+});
+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

package/dist/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AASvC,MAAM,CAAC,MAAM,OAAO,GAAqB,IAAI,CAAC,SAAS,OAAO,CAAC,EAC7D,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,SAAS,EACjB,GAAG,WAAW,EACf;IACC,OAAO,CACL,oBAAC,IAAI,iBACQ,QAAQ,aACV,MAAM,YACP,KAAK,KACT,WAAW,GACf,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAEvB;IACG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM;IACN,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;KACnC;;YAEO,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;eACrB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;;CAE1C,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type DividerProps = {\n  maxWidth?: string\n  height?: string\n  color?: Color\n} & MarginProps\n\nexport const Divider: FC<DividerProps> = memo(function Divider({\n  maxWidth = 'none',\n  height = '1px',\n  color = 'oatmeal',\n  ...marginProps\n}) {\n  return (\n    <Line\n      $maxWidth={maxWidth}\n      $height={height}\n      $color={color}\n      {...marginProps}\n    />\n  )\n})\n\nconst Line = styled(Box)<\n  TransientProps<Pick<DividerProps, 'color' | 'height' | 'maxWidth'>>\n>`\n  ${({ $color }) =>\n    $color &&\n    css`\n      background: ${theme.colors[$color]};\n    `}\n  display: block;\n  height: ${({ $height }) => $height};\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  width: 100%;\n`\n"]}

package/dist/Divider/index.js

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+//# sourceMappingURL=index.js.map

package/dist/Divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA","sourcesContent":["export { Divider } from './Divider'\n"]}

package/dist/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent, FormEvent } from 'react';
+import React, { FocusEvent, FormEvent } from 'react';
 import { Icons } from '../Icon/iconsList';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 export type DropdownItem = {

package/dist/Dropdown/Dropdown.js

@@ -0,0 +1,98 @@
+import React, { forwardRef, useMemo, } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Field } from '../fields/Field';
+import { StyledFrontIcon } from '../fields/components/CommonInput';
+import { theme } from '../theme';
+import { useUniqueId } from '../utils/id';
+import { useControllableState } from '../utils/useControlledState';
+export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, fallbackStyle, ...fieldProps }, ref) {
+    const [value, setValue] = useControllableState({
+        initialState: defaultValue,
+        stateProp: valueProp,
+    });
+    const id = useUniqueId(idProp);
+    const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1;
+    const dropdownItemsGroups = useMemo(() => {
+        const itemsPerGroupLabel = new Map();
+        list.forEach((item) => {
+            const key = item.optionGroupLabel ?? '';
+            const group = itemsPerGroupLabel.get(key) ?? [];
+            group.push(item);
+            itemsPerGroupLabel.set(key, group);
+        });
+        return Array.from(itemsPerGroupLabel.values());
+    }, [list]);
+    const defaultOptionLabel = () => {
+        if (!showDefaultOption) {
+            return placeholder;
+        }
+        return customDefaultOption ?? 'Select an option';
+    };
+    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
+        React.createElement(Box, { flex: true, alignItems: "center" },
+            frontIcon && (React.createElement(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })),
+            React.createElement(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
+                    const value = event.currentTarget.value;
+                    onSelect?.(value);
+                    onInputChange?.(event);
+                    setValue(value);
+                }, "$error": error, ref: ref, onBlur: onBlur, name: name, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, value: value ? value : '' },
+                hasOptGroups ? (React.createElement("optgroup", { label: defaultOptionLabel() },
+                    React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel()))) : (React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel())),
+                dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (React.createElement("optgroup", { key: i, label: groupItems[0].optionGroupLabel ?? 'Other' }, groupItems.map((el, j) => (React.createElement("option", { key: `${i}-${j}`, value: el.value }, el.label))))) : (groupItems.map((el, j) => (React.createElement("option", { key: j, value: el.value }, el.label)))))),
+            React.createElement(Caret, null,
+                React.createElement(Icon, { render: "caret", color: "marzipan", size: 24 })))));
+});
+const resetSelect = css `
+  border: none;
+  border-radius: 0;
+  font-size: 16px;
+  appearance: none; /* remove default arrow */
+  outline: none;
+`;
+const StyledSelect = styled.select `
+  ${resetSelect}
+  width: 100%;
+  height: 32px;
+
+  cursor: pointer;
+  background-color: ${({ $fallbackStyle }) => $fallbackStyle ? theme.colors.custard : theme.colors.cream};
+
+  border-radius: 12px;
+  padding: 18px 14px;
+  border: 2px solid
+    ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};
+  height: auto;
+
+  ${({ $frontIcon }) => $frontIcon &&
+    $frontIcon != '' &&
+    `
+      padding-left: 42px;
+    `}
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ${({ $error }) => !$error &&
+    css `
+      :not(:disabled) {
+        &:hover,
+        &:focus,
+        &:focus-visible,
+        &:checked {
+          border-color: ${theme.colors.marzipan}
+      }
+    `}
+`;
+const Caret = styled.div `
+  position: absolute;
+  z-index: 1;
+  right: 15px;
+  pointer-events: none;
+  color: ${theme.colors.marzipan};
+`;
+//# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { StyledFrontIcon } from '../fields/components/CommonInput'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\n\nexport type DropdownItem = {\n  optionGroupLabel?: string\n  label: string\n  value: string\n}\n\nexport interface Props extends CommonFieldProps {\n  placeholder?: string\n  showDefaultOption?: boolean\n  customDefaultOption?: string\n  name?: string\n  value?: string | null\n  defaultValue?: string\n  disabled?: boolean\n  list: DropdownItem[]\n  frontIcon?: Icons\n  fallbackStyle?: boolean\n  onSelect: (element: string) => void\n  onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n  | {\n      onSelect: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n    }\n  | {\n      onSelect?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n    }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n  {\n    id: idProp,\n    placeholder,\n    showDefaultOption = false,\n    customDefaultOption,\n    name,\n    value: valueProp,\n    defaultValue,\n    disabled = false,\n    list,\n    onSelect,\n    error = false,\n    onInputChange,\n    onBlur,\n    frontIcon,\n    fallbackStyle,\n    ...fieldProps\n  }: DropdownProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const [value, setValue] = useControllableState({\n    initialState: defaultValue,\n    stateProp: valueProp,\n  })\n  const id = useUniqueId(idProp)\n  const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n  const dropdownItemsGroups = useMemo(() => {\n    const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n    list.forEach((item) => {\n      const key = item.optionGroupLabel ?? ''\n      const group = itemsPerGroupLabel.get(key) ?? []\n\n      group.push(item)\n      itemsPerGroupLabel.set(key, group)\n    })\n\n    return Array.from(itemsPerGroupLabel.values())\n  }, [list])\n\n  const defaultOptionLabel = () => {\n    if (!showDefaultOption) {\n      return placeholder\n    }\n    return customDefaultOption ?? 'Select an option'\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\">\n        {frontIcon && (\n          <StyledFrontIcon\n            $disabled={disabled}\n            render={frontIcon}\n            color=\"sesame\"\n          />\n        )}\n        <StyledSelect\n          id={id}\n          disabled={disabled || list.length < 1}\n          onChange={(event) => {\n            const value = event.currentTarget.value\n\n            onSelect?.(value)\n            onInputChange?.(event)\n            setValue(value)\n          }}\n          $error={error}\n          ref={ref}\n          onBlur={onBlur}\n          name={name}\n          $frontIcon={frontIcon}\n          $fallbackStyle={fallbackStyle}\n          value={value ? value : ''}\n        >\n          {hasOptGroups ? (\n            <optgroup label={defaultOptionLabel()}>\n              <option value=\"\" hidden={!showDefaultOption} disabled>\n                {defaultOptionLabel()}\n              </option>\n            </optgroup>\n          ) : (\n            <option value=\"\" hidden={!showDefaultOption} disabled>\n              {defaultOptionLabel()}\n            </option>\n          )}\n\n          {dropdownItemsGroups.map((groupItems, i) =>\n            hasOptGroups ? (\n              <optgroup\n                key={i}\n                label={groupItems[0].optionGroupLabel ?? 'Other'}\n              >\n                {groupItems.map((el, j) => (\n                  <option key={`${i}-${j}`} value={el.value}>\n                    {el.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              groupItems.map((el, j) => (\n                <option key={j} value={el.value}>\n                  {el.label}\n                </option>\n              ))\n            ),\n          )}\n        </StyledSelect>\n        <Caret>\n          <Icon render=\"caret\" color=\"marzipan\" size={24} />\n        </Caret>\n      </Box>\n    </Field>\n  )\n})\n\nconst resetSelect = css`\n  border: none;\n  border-radius: 0;\n  font-size: 16px;\n  appearance: none; /* remove default arrow */\n  outline: none;\n`\n\ninterface SSelect {\n  $error: boolean\n  $frontIcon?: string\n  $fallbackStyle?: boolean\n}\n\nconst StyledSelect = styled.select<SSelect>`\n  ${resetSelect}\n  width: 100%;\n  height: 32px;\n\n  cursor: pointer;\n  background-color: ${({ $fallbackStyle }) =>\n    $fallbackStyle ? theme.colors.custard : theme.colors.cream};\n\n  border-radius: 12px;\n  padding: 18px 14px;\n  border: 2px solid\n    ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};\n  height: auto;\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    $frontIcon != '' &&\n    `\n      padding-left: 42px;\n    `}\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ${({ $error }) =>\n    !$error &&\n    css`\n      :not(:disabled) {\n        &:hover,\n        &:focus,\n        &:focus-visible,\n        &:checked {\n          border-color: ${theme.colors.marzipan}\n      }\n    `}\n`\n\nconst Caret = styled.div`\n  position: absolute;\n  z-index: 1;\n  right: 15px;\n  pointer-events: none;\n  color: ${theme.colors.marzipan};\n`\n"]}

package/dist/Dropdown/index.js

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+//# sourceMappingURL=index.js.map

package/dist/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA","sourcesContent":["export { Dropdown } from './Dropdown'\n"]}

package/dist/Icon/Icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { theme } from '../theme';
+import { iconList } from './iconsList';
+export const Icon = ({ className = '', render, size = 24, color = 'liquorice', rotate = 0, ...marginProps }) => {
+    if (!render || !iconList[render] || render.length === 0)
+        return null;
+    const IconComponent = iconList[render];
+    return (React.createElement(Container, { forwardedAs: "span", className: className, size: size, rotate: rotate, color: color, ...marginProps },
+        React.createElement(IconComponent, null)));
+};
+const Container = styled(Box)(({ size, rotate, color }) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: ${size}px;
+    height: ${size}px;
+    transform: rotate(${rotate}deg);
+    svg {
+      color: ${theme.colors[color]} !important;
+    }
+  `);
+//# sourceMappingURL=Icon.js.map

package/dist/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAe7C,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEpE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAC,MAAM,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,WAAW;QAEf,oBAAC,aAAa,OAAG,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKrB,IAAI;cACH,IAAI;wBACM,MAAM;;eAEf,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;GAE/B,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Box } from '../Box'\nimport { Color, theme } from '../theme'\nimport { Icons, iconList } from './iconsList'\n\nexport type IconProps = {\n  /** className attribute to apply classes from props */\n  className?: string\n  /** specify what Icon to render  */\n  render: Icons\n  /** set size of the Icon  */\n  size?: number\n  /** set color of the Icon */\n  color?: Color\n  /** rotation degrees */\n  rotate?: number\n} & MarginProps\n\nexport const Icon: FC<IconProps> = ({\n  className = '',\n  render,\n  size = 24,\n  color = 'liquorice',\n  rotate = 0,\n  ...marginProps\n}) => {\n  if (!render || !iconList[render] || render.length === 0) return null\n\n  const IconComponent = iconList[render]\n\n  return (\n    <Container\n      forwardedAs=\"span\"\n      className={className}\n      size={size}\n      rotate={rotate}\n      color={color}\n      {...marginProps}\n    >\n      <IconComponent />\n    </Container>\n  )\n}\n\ninterface IIcon extends MarginProps {\n  size: number\n  color: Color\n  rotate: number\n}\n\nconst Container = styled(Box)<IIcon>(\n  ({ size, rotate, color }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: ${size}px;\n    height: ${size}px;\n    transform: rotate(${rotate}deg);\n    svg {\n      color: ${theme.colors[color]} !important;\n    }\n  `,\n)\n"]}

package/dist/Icon/iconFiles/Aa.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
+import React from 'react';
 declare const Aa: () => React.JSX.Element;
 export default Aa;