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

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":"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","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.d.ts

@@ -0,0 +1 @@
+export { Datepicker } from './Datepicker';

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.d.ts

@@ -0,0 +1,6 @@
+export interface Day {
+    label: string;
+    disabled: boolean;
+    active: boolean;
+    date: Date;
+}

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.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Color } from '../theme';
+import { MarginProps } from '../utils/space';
+export type DividerProps = {
+    maxWidth?: string;
+    height?: string;
+    color?: Color;
+} & MarginProps;
+export declare const Divider: FC<DividerProps>;

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.d.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider';

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

@@ -0,0 +1,32 @@
+import React, { FocusEvent, FormEvent } from 'react';
+import { Icons } from '../Icon/iconsList';
+import { CommonFieldProps } from '../fields/commonFieldTypes';
+export type DropdownItem = {
+    optionGroupLabel?: string;
+    label: string;
+    value: string;
+};
+export interface Props extends CommonFieldProps {
+    placeholder?: string;
+    showDefaultOption?: boolean;
+    customDefaultOption?: string;
+    name?: string;
+    value?: string | null;
+    defaultValue?: string;
+    disabled?: boolean;
+    list: DropdownItem[];
+    frontIcon?: Icons;
+    fallbackStyle?: boolean;
+    onSelect: (element: string) => void;
+    onBlur?: (e: FocusEvent<HTMLSelectElement>) => void;
+}
+type TruncateProps = {
+    onSelect: (e: string) => void;
+    onInputChange?: (e: FormEvent<HTMLSelectElement>) => void;
+} | {
+    onSelect?: (e: string) => void;
+    onInputChange: (e: FormEvent<HTMLSelectElement>) => void;
+};
+export type DropdownProps = Props & TruncateProps;
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>>;
+export {};

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.d.ts

@@ -0,0 +1 @@
+export { Dropdown } from './Dropdown';

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/Emoji/Emoji.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { MarginProps } from '../utils/space';
+export type EmojiProps = {
+    /** className attribute to apply classes from props */
+    className?: string;
+    /** Emoji symbol */
+    symbol: string;
+    /** set size of the Emoji  */
+    size?: number;
+    /** aria-label to identify Emoji */
+    label: string;
+} & MarginProps;
+export declare const Emoji: FC<EmojiProps>;

package/dist/Emoji/Emoji.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+export const Emoji = ({ className = '', symbol, size = 12, label, ...marginProps }) => (React.createElement(Container, { forwardedAs: "span", className: className, "$size": size, role: "img", "aria-label": label, ...marginProps }, symbol));
+const Container = styled(Box)(({ $size }) => css `
+    font-size: ${$size}px;
+  `);
+//# sourceMappingURL=Emoji.js.map

package/dist/Emoji/Emoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","sourceRoot":"","sources":["../../src/Emoji/Emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAc5B,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,EACL,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,SAAS,IACR,WAAW,EAAC,MAAM,EAClB,SAAS,EAAE,SAAS,WACb,IAAI,EACX,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,WAAW,IAEd,MAAM,CACG,CACb,CAAA;AAMD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;iBACH,KAAK;GACnB,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\n\nexport type EmojiProps = {\n  /** className attribute to apply classes from props */\n  className?: string\n  /** Emoji symbol */\n  symbol: string\n  /** set size of the Emoji  */\n  size?: number\n  /** aria-label to identify Emoji */\n  label: string\n} & MarginProps\n\nexport const Emoji: FC<EmojiProps> = ({\n  className = '',\n  symbol,\n  size = 12,\n  label,\n  ...marginProps\n}) => (\n  <Container\n    forwardedAs=\"span\"\n    className={className}\n    $size={size}\n    role=\"img\"\n    aria-label={label}\n    {...marginProps}\n  >\n    {symbol}\n  </Container>\n)\n\ninterface IEmoji {\n  $size: number\n}\n\nconst Container = styled(Box)<IEmoji>(\n  ({ $size }) => css`\n    font-size: ${$size}px;\n  `,\n)\n"]}

package/dist/Emoji/index.d.ts

@@ -0,0 +1 @@
+export { Emoji } from './Emoji';

package/dist/Emoji/index.js

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

package/dist/Emoji/index.js.map

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

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { MarginProps } from '../utils/space';
+import { Color } from '../theme';
+import { Icons } from './iconsList';
+export type IconProps = {
+    /** className attribute to apply classes from props */
+    className?: string;
+    /** specify what Icon to render  */
+    render: Icons;
+    /** set size of the Icon  */
+    size?: number;
+    /** set color of the Icon */
+    color?: Color;
+    /** rotation degrees */
+    rotate?: number;
+} & MarginProps;
+export declare const Icon: FC<IconProps>;

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

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