@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/src/Pagination/Pagination.js

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
+import { theme } from '../theme';
+import { focusOutlineStyle } from '../utils/focusOutline';
+const MAX_PAGES = 7;
+const MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2);
+export const Pagination = ({ total, partition, handlePageChange, currentPage, ...marginProps }) => {
+    const [lastPage, setLastPage] = useState(0);
+    const [activePage, setActivePage] = useState(1);
+    const [pages, setPages] = useState([]);
+    const [shownPages, setShownPages] = useState([]);
+    const [showFirstDots, setShowFirstDots] = useState(false);
+    const [showLastDots, setShowLastDots] = useState(false);
+    useEffect(() => {
+        // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time
+        // Using lastPage seems to bypass that
+        if (currentPage) {
+            setActivePage(currentPage);
+        }
+        else {
+            setActivePage(1);
+        }
+    }, [lastPage, currentPage]);
+    useEffect(() => {
+        const numberOfPages = Math.ceil(total / partition);
+        if (numberOfPages > 1) {
+            setLastPage(numberOfPages);
+        }
+        else if (numberOfPages === 1) {
+            // Sets last page to be null to avoid the last page being kept from previous state.
+            setLastPage(0);
+        }
+        if (numberOfPages > 2) {
+            const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1);
+            setPages(allPages.slice(1, numberOfPages - 1));
+        }
+        else {
+            // Sets pages to empty to avoid using the previous state if pages set before.
+            setPages([]);
+        }
+    }, [total, partition]);
+    useEffect(() => {
+        if (lastPage <= MAX_PAGES) {
+            setShownPages(pages);
+        }
+        else if (activePage <= MAX_ADDITIONAL_PAGES) {
+            setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES));
+        }
+        else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {
+            setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES));
+        }
+        else {
+            const activePageIndex = pages.indexOf(activePage);
+            setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2));
+        }
+    }, [lastPage, activePage, pages]);
+    useEffect(() => {
+        setShowFirstDots(shownPages[0] !== pages[0]);
+        setShowLastDots(shownPages[shownPages.length - 1] !== pages[pages.length - 1]);
+    }, [shownPages, pages]);
+    const movePage = (page) => {
+        if (page > 0 && page <= lastPage) {
+            setActivePage(page);
+            handlePageChange(page);
+        }
+    };
+    return (React.createElement(Container, { flex: true, direction: "row", ...marginProps },
+        activePage - 1 > 0 && (React.createElement(IconBox, { firstPage: true, onClick: () => movePage(activePage - 1), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    movePage(activePage - 1);
+                }
+            } },
+            React.createElement(Icon, { size: 18, render: "arrow" }))),
+        React.createElement(PageBox, { active: activePage === 1, onClick: () => movePage(1) },
+            React.createElement(Text, { typo: activePage === 1 ? 'desc-medium' : 'desc-light', tag: "p" }, "1")),
+        showFirstDots && (React.createElement(PageBox, null,
+            React.createElement(Text, { tag: "p" }, "..."))),
+        shownPages.map((i) => {
+            return (React.createElement(PageBox, { active: activePage === i, key: i, onClick: () => movePage(i), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        movePage(i);
+                    }
+                } },
+                React.createElement(Text, { typo: activePage === i ? 'desc-medium' : 'desc-light', tag: "p" }, i)));
+        }),
+        showLastDots && (React.createElement(PageBox, null,
+            React.createElement(Text, { tag: "p" }, "..."))),
+        Boolean(lastPage) && (React.createElement(PageBox, { active: activePage === lastPage, onClick: () => movePage(lastPage), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    movePage(lastPage);
+                }
+            } },
+            React.createElement(Text, { typo: activePage === lastPage ? 'desc-medium' : 'desc-light', tag: "p" }, lastPage))),
+        activePage + 1 <= lastPage && (React.createElement(IconBox, { onClick: () => movePage(activePage + 1), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    movePage(activePage + 1);
+                }
+            } },
+            React.createElement(Icon, { size: 18, render: "arrow", rotate: 180 })))));
+};
+const Container = styled(Box) `
+  align-items: center;
+  > button {
+    margin-right: 4px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;
+const PageBox = styled.button `
+  background: ${({ active }) => active ? theme.colors.custard : theme.colors.cream};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+
+  &:hover {
+    background-color: ${theme.colors.mascarpone};
+  }
+  &:active {
+    background-color: ${theme.colors.custard};
+  }
+
+  ${focusOutlineStyle}
+`;
+const IconBox = styled.button `
+  cursor: pointer;
+
+  ${focusOutlineStyle}
+`;
+//# sourceMappingURL=Pagination.js.map

package/dist/src/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}

package/dist/src/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from './Pagination';
+//# sourceMappingURL=index.js.map

package/dist/src/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/src/RadioGroup/RadioElement.js

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { focusOutline } from '../utils/focusOutline';
+import { visuallyHidden } from '../utils/visuallyHidden';
+import { Box } from '../Box';
+export const RadioElement = forwardRef(function RadioElement({ name, id, value, checked, onChange, onBlur, isError, ...marginProps }, ref) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledInput, { ref: ref, type: "radio", name: name, id: id, value: `${value}`, checked: checked, onChange: () => onChange(value), onBlur: onBlur }),
+        React.createElement(RadioCircle, { isError: isError, checked: checked, ...marginProps })));
+});
+const StyledInput = styled.input `
+  ${visuallyHidden}
+`;
+const RADIO_SIZE = 24;
+const RadioCircle = styled(Box) `
+  flex-shrink: 0;
+  width: ${RADIO_SIZE}px;
+  height: ${RADIO_SIZE}px;
+  border-radius: ${RADIO_SIZE}px;
+  background-color: ${theme.colors.cream};
+  border: 2px solid
+    ${({ isError }) => isError ? theme.colors.strawberry : theme.colors.sesame};
+
+  ${({ checked, isError }) => !checked &&
+    !isError &&
+    `
+    &:hover {
+      border: 2px solid ${theme.colors.liquorice};
+    }
+  `}
+
+  ${({ checked, isError }) => checked &&
+    `border: 8px solid ${isError ? theme.colors.strawberry : theme.colors.liquorice};`}
+
+  ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}
+`;
+//# sourceMappingURL=RadioElement.js.map

package/dist/src/RadioGroup/RadioElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAa5B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,EACvE,GAAG;IAEH,OAAO,CACL;QACE,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,GAAG,KAAK,EAAE,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,GACd;QACF,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAM,WAAW,GAAI,CACnE,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAC5B,cAAc;CACjB,CAAA;AAED,MAAM,UAAU,GAAG,EAAE,CAAA;AAErB,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAwC;;WAE5D,UAAU;YACT,UAAU;mBACH,UAAU;sBACP,KAAK,CAAC,MAAM,CAAC,KAAK;;MAElC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAChB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;IAEzD,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CACzB,CAAC,OAAO;IACR,CAAC,OAAO;IACR;;0BAEsB,KAAK,CAAC,MAAM,CAAC,SAAS;;GAE7C;;IAEC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CACzB,OAAO;IACP,qBACE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SACnD,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA"}

package/dist/src/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,37 @@
+import React, { FocusEvent, ReactElement } from 'react';
+import { Icons } from 'Icon/iconsList';
+import { CommonFieldProps } from '../fields/commonFieldTypes';
+import { BaseValueType, DisplayType, IconPosition } from './types';
+export type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
+    options: Array<{
+        visual?: string;
+        icon?: Icons;
+        iconPosition?: IconPosition;
+        label: string;
+        value: Value;
+        bodyCopy?: string;
+    }>;
+    onChange: (value: Value) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    value: Value;
+    displayType?: DisplayType;
+    fallbackStyle?: boolean;
+} & CommonFieldProps;
+export type RadioGroupElement = {
+    focus: VoidFunction;
+};
+export declare const RadioGroup: <Value extends BaseValueType = BaseValueType>(p: {
+    options: {
+        visual?: string | undefined;
+        icon?: "search" | "link" | "at" | "filter" | "key" | "location" | "id" | "file" | "cancel" | "copy" | "alert" | "other" | "calendar" | "caret" | "crop" | "cross" | "download" | "property" | "security" | "amex" | "axa" | "breakdown" | "earth" | "help-aboutus" | "injury" | "onfido" | "rac" | "renewal" | "stack" | "aa-inverted" | "accidental-damage" | "account-breakdown" | "account-mlp" | "activity-clipboard" | "add-ons" | "address-mta" | "album-audio" | "alert-engine" | "apple-pay" | "approved-file" | "breakdown-alt" | "cancel-bw" | "car-mta" | "car-repairs" | "car-replacement" | "car-usage" | "chat-bubble" | "checkout-with-text" | "circle-tick" | "claim-line" | "clipboard-check" | "close-panel" | "confused-blue" | "contact-email" | "dashboard-high" | "direct-debit" | "doc-download" | "doc-upload" | "edit-contact" | "edit-outline" | "email-filled" | "falling-items" | "file-badge-2" | "file-cabinet" | "fraud-alert" | "freezer-food" | "google-play-badge" | "help-buypolicy" | "help-center" | "help-idcheck" | "help-manage-policy" | "help-ncd" | "help-verification" | "home-excluded" | "house-tree" | "ios-store-badge" | "live-chat" | "live-chat2" | "log-out" | "manage-drivers" | "manage-policy" | "maximise-window" | "minus-circle" | "money-bag" | "money-heart" | "more-dots" | "new-window" | "no-excess" | "open-panel" | "out-of-home" | "padlock-outline" | "phone-filled" | "phone-outline" | "pin-code" | "plus-circle" | "policy-details" | "policy-doc" | "policy-docs" | "pound-bold" | "pound-filled-circle" | "pound-medium" | "pound-outline" | "pound-regular" | "question-help" | "refer-a-friend" | "reg-plate" | "renewal-line" | "repeat-charge" | "schedule-quote" | "send-message" | "shield-check" | "thumbs-up" | "tow-truck" | "trace-and-access" | "up-down" | "upload-documents" | "upload-email" | "wheel-flat" | "windscreen-repair" | "windscreen-replacement" | "aa" | "addons" | "arrow" | "bank" | "basket" | "bicycle" | "boost" | "briefcase" | "burger" | "camera" | "car" | "card" | "charge" | "chat" | "checkout" | "city" | "claim" | "clipboard" | "clock" | "collpase" | "confused" | "edit" | "engine" | "europe" | "excluded" | "expand" | "facebook" | "fence" | "fire" | "flag" | "folder" | "fuel" | "globe" | "gpay" | "house" | "inbox" | "included" | "info" | "instagram" | "intercom" | "intercom2" | "iphone" | "jewellery" | "laptop" | "leaks" | "lightbulb" | "linkedin" | "marshmallow" | "mastercard" | "maximise" | "medical" | "minimise" | "minus" | "mulsanne" | "notes" | "notification" | "padlock" | "people" | "person" | "photo" | "plus" | "policy" | "premfina" | "profile" | "prohibited" | "ravelin" | "refund" | "return" | "settings" | "shield" | "shopping" | "sofa" | "storm" | "stripe" | "subsidence" | "theft" | "tick" | "training" | "trash" | "twitter" | "upload" | "vandalism" | "village" | "visa" | "warning" | "watch" | "wave" | "wellbeing" | "windscreen" | undefined;
+        iconPosition?: IconPosition | undefined;
+        label: string;
+        value: Value;
+        bodyCopy?: string | undefined;
+    }[];
+    onChange: (value: Value) => void;
+    onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
+    value: Value;
+    displayType?: DisplayType | undefined;
+    fallbackStyle?: boolean | undefined;
+} & CommonFieldProps & React.RefAttributes<HTMLInputElement>) => ReactElement | null;

package/dist/src/RadioGroup/RadioGroup.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useImperativeHandle, useRef, } from 'react';
+import styled from 'styled-components';
+import { useUniqueId } from '../utils/id';
+import { Fieldset } from '../fields/Fieldset';
+import { ITEM_GAP } from './constants';
+import { RadioItem } from './RadioItem';
+const RadioGroupComponent = ({ options, onChange, onBlur, value, displayType = 'normal', renderAsTitle = false, error = false, fallbackStyle = false, ...fieldProps }, ref) => {
+    const name = useUniqueId();
+    const optionRefs = useRef([]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus: () => {
+                const selectedIndex = options.findIndex((item) => item.value === value);
+                const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex;
+                optionRefs.current[elementToFocus].current?.focus();
+            },
+        };
+    });
+    return (React.createElement(Fieldset, { renderAsTitle: renderAsTitle, error: error, ...fieldProps },
+        React.createElement(RadioItemList, { displayType: displayType }, options.map((option, index) => {
+            const isSelected = option.value === value;
+            return (React.createElement(RadioItem, { ref: (radioOptionRef) => {
+                    optionRefs.current[index] = {
+                        current: radioOptionRef,
+                    };
+                }, key: `${option.value}`, name: name, visual: option.visual, icon: option.icon, iconPosition: option.iconPosition, label: option.label, value: option.value, checked: isSelected, onChange: onChange, onBlur: onBlur, displayType: displayType, isError: error, fallbackStyle: fallbackStyle, bodyCopy: option.bodyCopy }));
+        }))));
+};
+export const RadioGroup = forwardRef(RadioGroupComponent);
+const RadioItemList = styled.div `
+  display: flex;
+  gap: ${ITEM_GAP}px;
+
+  ${({ displayType }) => {
+    if (displayType === 'horizontal-card') {
+        return `
+        flex-direction: row;
+        flex-wrap: wrap;
+      `;
+    }
+    return `flex-direction: column;`;
+}}
+`;
+//# sourceMappingURL=RadioGroup.js.map

package/dist/src/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,UAAU,EAGV,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAIzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAuBvC,MAAM,mBAAmB,GAAG,CAC1B,EACE,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,KAAK,EACb,aAAa,GAAG,KAAK,EACrB,GAAG,UAAU,EACU,EACzB,GAAoC,EACpC,EAAE;IACF,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,MAAM,UAAU,GAAG,MAAM,CAAgC,EAAE,CAAC,CAAA;IAC5D,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,OAAO;YACL,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAA;gBAEvE,MAAM,cAAc,GAAG,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAA;gBAC/D,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,CAAA;YACrD,CAAC;SACF,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU;QAClE,oBAAC,aAAa,IAAC,WAAW,EAAE,WAAW,IACpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAA;YAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE;oBACtB,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG;wBAC1B,OAAO,EAAE,cAAc;qBACxB,CAAA;gBACH,CAAC,EACD,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,KAAK,EACd,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,MAAM,CAAC,QAAQ,GACzB,CACH,CAAA;QACH,CAAC,CAAC,CACY,CACP,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,mBAAmB,CAIhC,CAAA;AAExB,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAsC;;SAE7D,QAAQ;;IAEb,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IACpB,IAAI,WAAW,KAAK,iBAAiB,EAAE,CAAC;QACtC,OAAO;;;OAGN,CAAA;IACH,CAAC;IAED,OAAO,yBAAyB,CAAA;AAClC,CAAC;CACF,CAAA"}

package/dist/src/RadioGroup/RadioItem.js

@@ -0,0 +1,97 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../theme';
+import { useUniqueId } from '../utils/id';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { RadioElement } from './RadioElement';
+import { ITEM_GAP } from './constants';
+export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconPosition = 'center', label, value, checked, onChange, onBlur, displayType, isError, fallbackStyle, bodyCopy, }, ref) {
+    const id = useUniqueId();
+    return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType, "data-testid": value, isError: isError, fallbackStyle: fallbackStyle },
+        visual && !icon && (React.createElement(VisualWrapper, null,
+            React.createElement(Visual, { visualUrl: visual }))),
+        !visual && icon && (React.createElement(IconWrapper, { iconPosition: iconPosition },
+            React.createElement(Icon, { render: icon, size: 24 }))),
+        React.createElement(Box, { flex: true, alignItems: "center" },
+            React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px" }),
+            React.createElement(Box, null,
+                React.createElement(RadioText, { isError: isError }, label),
+                bodyCopy && (React.createElement(Box, null,
+                    React.createElement(Text, { typo: "caption" }, bodyCopy)))))));
+});
+const VisualWrapper = styled.div `
+  width: 100%;
+  max-width: 120px;
+  margin: 0 auto 8px;
+`;
+const IconWrapper = styled.div `
+  display: flex;
+  padding-bottom: 12px;
+
+  ${({ iconPosition }) => iconPosition === 'center' &&
+    css `
+      justify-content: center;
+    `}
+
+  ${({ iconPosition }) => iconPosition === 'start' &&
+    css `
+      justify-content: flex-start;
+    `}
+`;
+const Visual = styled.div `
+  width: 100%;
+  padding-top: 100%;
+  background-image: url('${(p) => p.visualUrl}');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+`;
+const Wrapper = styled.label `
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+
+  ${({ displayType, checked, isError, fallbackStyle }) => css `
+    ${(displayType === 'horizontal-card' || displayType === 'vertical-card') &&
+    css `
+      border-radius: 12px;
+      background-color: ${fallbackStyle
+        ? theme.colors.cream
+        : theme.colors.custard};
+      padding: ${checked ? '10px' : '12px'};
+      border: ${checked &&
+        (isError
+            ? `2px solid ${theme.colors.strawberry}`
+            : `2px solid ${theme.colors.liquorice}`)};
+
+      &:hover {
+        background-color: ${fallbackStyle
+        ? theme.colors.coconut
+        : theme.colors.oatmeal};
+      }
+    `}
+    ${displayType === 'horizontal-card' &&
+    css `
+      width: 100%;
+      justify-content: center;
+
+      @media (min-width: 420px) {
+        width: calc(50% - ${ITEM_GAP / 2}px);
+      }
+
+      @media (min-width: 768px) {
+        width: 201px;
+      }
+    `}
+  `}
+`;
+const RadioText = styled.span `
+  line-height: 16px;
+  font-size: 16px;
+  font-weight: ${theme.font.weight.medium};
+  color: ${({ isError }) => isError ? theme.colors.strawberry : theme.colors.liquorice};
+  margin-top: 4px;
+`;
+//# sourceMappingURL=RadioItem.js.map

package/dist/src/RadioGroup/RadioItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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"}

package/dist/src/RadioGroup/constants.js

@@ -0,0 +1,2 @@
+export const ITEM_GAP = 12;
+//# sourceMappingURL=constants.js.map

package/dist/src/RadioGroup/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/RadioGroup/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAA"}

package/dist/src/RadioGroup/index.js

@@ -0,0 +1,2 @@
+export * from './RadioGroup';
+//# sourceMappingURL=index.js.map

package/dist/src/RadioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/src/RadioGroup/types.js

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

package/dist/src/RadioGroup/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/RadioGroup/types.ts"],"names":[],"mappings":""}

package/dist/src/Row/Row.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+export const Row = ({ iconLeft, iconLeftColor = 'liquorice', iconRight, iconRightColor = 'marzipan', handleClick, heading, subHeading, type, borderTop = true, borderBottom = true, boldHeading, ...marginProps }) => {
+    const windowWidth = screen.width;
+    return (React.createElement(Container, { type: type, iconLeft: iconLeft, borderTop: borderTop, borderBottom: borderBottom, iconRight: iconRight, onClick: handleClick, boldHeading: boldHeading, ...marginProps },
+        iconLeft && (React.createElement(Icon, { render: iconLeft, size: windowWidth > 768 ? 24 : 18, color: iconLeftColor })),
+        React.createElement(Box, null,
+            React.createElement(Text, { tag: "h1", typo: "base" }, heading),
+            React.createElement(Text, { tag: "p", typo: "desc-small", color: "sesame" }, subHeading)),
+        iconRight && (React.createElement(Icon, { className: "iconRight", render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor }))));
+};
+const Container = styled(Box)(({ type, iconLeft, borderTop, borderBottom, boldHeading }) => css `
+    border-radius: ${(type === 'first' && `16px 16px 0 0`) ||
+    (type === 'curved' && `16px`) ||
+    (type === 'last' && `0 0 16px 16px`) ||
+    0};
+
+    border-top: ${borderTop && type !== 'curved' && type !== 'first'
+    ? `1px solid ${theme.colors.oatmeal}`
+    : 'none'};
+    border-bottom: ${borderBottom && type !== 'curved' && type !== 'last'
+    ? `1px solid ${theme.colors.oatmeal}`
+    : 'none'};
+
+    background-color: ${theme.colors.custard};
+    display: grid;
+    grid-template-columns: ${iconLeft ? `24px auto 24px` : `auto 24px`};
+    padding: 16px;
+    grid-gap: 16px;
+    align-items: center;
+
+    cursor: pointer;
+
+    h1 {
+      font-weight: ${boldHeading && 500};
+    }
+
+    .iconRight {
+      justify-self: end;
+    }
+
+    @media (min-width: 768px) {
+      grid-gap: 24px;
+    }
+  `);
+//# sourceMappingURL=Row.js.map

package/dist/src/Row/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/Row/Row.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,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAiBvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,WAAW,EAC3B,SAAS,EACT,cAAc,GAAG,UAAU,EAC3B,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,KACpB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,IACvB,OAAO,CACH;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,IAC3C,UAAU,CACN,CACH;QACL,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBAC9C,CAAC,IAAI,KAAK,OAAO,IAAI,eAAe,CAAC;IACtD,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC7B,CAAC,IAAI,KAAK,MAAM,IAAI,eAAe,CAAC;IACpC,CAAC;;kBAEa,SAAS,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,OAAO;IAC9D,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;qBACO,YAAY,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,MAAM;IACnE,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,MAAM,CAAC,OAAO;;6BAEf,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQjD,WAAW,IAAI,GAAG;;;;;;;;;;GAUpC,CACF,CAAA"}

package/dist/src/Row/index.js

@@ -0,0 +1,2 @@
+export * from './Row';
+//# sourceMappingURL=index.js.map

package/dist/src/Row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Row/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA"}

package/dist/src/SearchInput/SearchInput.js

@@ -0,0 +1,62 @@
+import React, { forwardRef, useMemo, useState, } from 'react';
+import { Box } from '../Box';
+import { Field } from '../fields/Field';
+import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
+import { useUniqueId } from '../utils/id';
+import { useControllableState } from '../utils/useControlledState';
+import { SearchOptions } from './SearchOptions';
+export const SearchInput = forwardRef(function SearchInput({ id: idProp, name = 'search_input', className = '', placeholder, searchList, showIcon = false, renderAsTitle = false, value, onBlur, onFound, fallbackStyle, resultsRelativePosition = false, resultsBorder = true, ...otherProps }, ref) {
+    const id = useUniqueId(idProp);
+    const [showOptions, setShowOptions] = useState(false);
+    const [selectedValue, setSelectedValue] = useControllableState({
+        initialState: null,
+        stateProp: value,
+    });
+    const [searchQuery, setSearchQuery] = useState(null);
+    const filteredList = useMemo(() => {
+        if (searchQuery === null || searchQuery === '') {
+            return searchList;
+        }
+        return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
+    }, [searchQuery]);
+    const getDisplayedInputText = () => {
+        if (searchQuery !== null) {
+            return searchQuery;
+        }
+        if (selectedValue !== null) {
+            return (searchList.find((option) => option.label === selectedValue || option.value === selectedValue)?.label || '');
+        }
+        return '';
+    };
+    const isSelected = selectedValue !== null;
+    const displayedInputText = getDisplayedInputText();
+    const updateSearchQuery = (query) => {
+        setSearchQuery(query);
+        if (query === null) {
+            setShowOptions(false);
+        }
+        else {
+            setShowOptions(2 <= query.length);
+        }
+    };
+    const handleInputChange = (event) => {
+        const nextValue = event.currentTarget.value;
+        updateSearchQuery(nextValue);
+    };
+    const handleSelect = (nextValue) => {
+        updateSearchQuery(null);
+        setSelectedValue(nextValue.label);
+        onFound(nextValue.value);
+    };
+    return (React.createElement(Field, { className: className, renderAsTitle: renderAsTitle, htmlFor: id, ...otherProps },
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
+            showIcon && React.createElement(StyledFrontIcon, { render: "search", color: "sesame" }),
+            React.createElement(Input, { id: id, name: name, ref: ref, placeholder: placeholder, frontIcon: showIcon ? 'search' : undefined, fallbackStyle: fallbackStyle, autoComplete: "off", value: displayedInputText, onChange: handleInputChange, selected: isSelected, onBlur: (e) => {
+                    if (displayedInputText === '') {
+                        setSearchQuery(null);
+                    }
+                    onBlur?.(e);
+                } })),
+        showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder }))));
+});
+//# sourceMappingURL=SearchInput.js.map

package/dist/src/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}

package/dist/src/SearchInput/SearchOptions.js

@@ -0,0 +1,59 @@
+import { darken } from 'polished';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { theme } from '../theme';
+export const SearchOptions = ({ displayedList, onSelect, positionRelative, resultsBorder, }) => {
+    return (React.createElement(BoxWithPositionRelative, null,
+        React.createElement(StyledResultsContainer, { positionRelative: positionRelative },
+            React.createElement(ResultsList, { resultsBorder: resultsBorder }, displayedList.length ? (displayedList.map((el, i) => (React.createElement("li", { key: i, onClick: () => onSelect(el) }, el.label)))) : (React.createElement("li", null, "No results"))))));
+};
+const StyledResultsContainer = styled.div `
+  box-sizing: border-box;
+  overflow-y: hidden;
+  ${({ positionRelative }) => !positionRelative && 'position: absolute;'}
+  width: 100%;
+  left: 0px;
+  top: -8px;
+
+  ul {
+    max-height: 192px;
+  }
+`;
+const ResultsList = styled.ul `
+  position: relative;
+  list-style: none;
+  overflow-y: auto;
+  padding: 0;
+  margin: 0;
+  background-color: ${theme.colors.custard};
+  border-radius: 12px;
+  margin-top: 14px;
+  z-index: 1000;
+  ${({ resultsBorder }) => resultsBorder &&
+    css `
+      border: 2px solid ${theme.colors.oatmeal};
+    `}
+
+  li {
+    padding: 16px 14px;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: ${theme.colors.liquorice};
+    cursor: pointer;
+
+    ${({ resultsBorder }) => resultsBorder && `border-bottom: 2px solid ${theme.colors.oatmeal};`}
+
+    &:last-child {
+      ${({ resultsBorder }) => resultsBorder && `border-bottom:none`}
+    }
+
+    &:hover {
+      background-color: ${darken(0.1, theme.colors.custard)};
+    }
+  }
+`;
+const BoxWithPositionRelative = styled(Box) `
+  position: relative;
+`;
+//# sourceMappingURL=SearchOptions.js.map

package/dist/src/SearchInput/SearchOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,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,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,aAAa,GACd,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,uBAAuB;QACtB,oBAAC,sBAAsB,IAAC,gBAAgB,EAAE,gBAAgB;YACxD,oBAAC,WAAW,IAAC,aAAa,EAAE,aAAa,IACtC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,IACpC,EAAE,CAAC,KAAK,CACN,CACN,CAAC,CACH,CAAC,CAAC,CAAC,CACF,6CAAmB,CACpB,CACW,CACS,CACD,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;IAGG,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,gBAAgB,IAAI,qBAAqB;;;;;;;;CAQvE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAA2C;;;;;;sBAMlD,KAAK,CAAC,MAAM,CAAC,OAAO;;;;IAItC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;0BACmB,KAAK,CAAC,MAAM,CAAC,OAAO;KACzC;;;;;;aAMQ,KAAK,CAAC,MAAM,CAAC,SAAS;;;MAG7B,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa,IAAI,4BAA4B,KAAK,CAAC,MAAM,CAAC,OAAO,GAAG;;;QAGlE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,oBAAoB;;;;0BAI1C,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;CAG1D,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1C,CAAA"}

package/dist/src/SearchInput/index.js

@@ -0,0 +1,2 @@
+export * from './SearchInput';
+//# sourceMappingURL=index.js.map

package/dist/src/SearchInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SearchInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}