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

package/dist/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport styled, { css } from 'styled-components'\nimport { theme } from '../theme'\n\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Text, type TextProps } from '../Text'\nimport { useBodyScrollLock } from '../hooks/useBodyScrollLock'\n\ninterface IModalWrapper {\n  // showModal state\n  $showModal: boolean\n}\ninterface IModalContainer {\n  // drawer state\n  $drawer: boolean\n  // modal width\n  $width: string\n}\n\nexport type ModalProps = {\n  /**\n   * Title of the modal\n   * @default \"\" (empty string)\n   *\n   * @example\n   * ```tsx\n   * <Modal title=\"MultiCar Account\" />\n   * ```\n   *\n   * @example\n   * ```tsx\n   * <Modal title={{ typo: 'hero', children: 'MultiCar Account' }} />\n   * ```\n   */\n  title?: string | TitleProps\n  icon?: string\n  children?: ReactNode\n  rightPanel?: ReactNode\n  showModal?: boolean\n  handleClick: () => void\n  drawer?: boolean\n  cross?: boolean\n  width?: string\n  containerClass?: string\n  portalContainer?: Element | DocumentFragment\n  closeOnOverlayClick?: boolean\n}\n\nexport type TitleProps = TextProps\n\nconst getDefaultTitleProps = (title: string): TitleProps => ({\n  children: title,\n  tag: 'h2',\n  typo: 'heading-small',\n  align: 'left',\n})\n\nexport const Modal: FC<ModalProps> = ({\n  title = '',\n  children,\n  rightPanel,\n  showModal = false,\n  handleClick,\n  drawer = true,\n  cross = true,\n  width,\n  containerClass,\n  portalContainer = document.body,\n  closeOnOverlayClick = true,\n}) => {\n  const modalRef = useRef<HTMLDivElement>(null)\n\n  useBodyScrollLock({ node: modalRef.current, showModal })\n\n  const isTitleString = typeof title === 'string'\n  const titleProps = isTitleString ? getDefaultTitleProps(title) : title\n\n  return createPortal(\n    <Wrapper $showModal={showModal} ref={modalRef}>\n      <Overlay\n        onClick={() => closeOnOverlayClick && handleClick()}\n        $closeOnOverlayClick={closeOnOverlayClick}\n      />\n      <Container\n        $drawer={drawer}\n        $width={width || '460px'}\n        className={containerClass}\n      >\n        <Box\n          flex\n          alignItems=\"flex-start\"\n          justifyContent=\"space-between\"\n          mb=\"8px\"\n        >\n          <TitleElements flex direction=\"column\">\n            <Text {...titleProps} />\n          </TitleElements>\n          <Box flex alignItems=\"center\" gap={'8px'}>\n            {rightPanel}\n            {cross && (\n              <IconStrict\n                render=\"cross\"\n                title=\"Close modal\"\n                backgroundColor=\"oatmeal\"\n                handleClick={handleClick}\n                size={36}\n              />\n            )}\n          </Box>\n        </Box>\n        <Box flex direction=\"column\">\n          {children}\n        </Box>\n      </Container>\n    </Wrapper>,\n    portalContainer,\n  )\n}\n\nconst Wrapper = styled(Box)<IModalWrapper>(\n  ({ $showModal }) => css`\n    display: ${$showModal ? 'flex' : 'none'};\n    position: absolute;\n    z-index: 999;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100%;\n    justify-content: center;\n    align-items: center;\n  `,\n)\n\nconst Overlay = styled.div<{ $closeOnOverlayClick: boolean }>`\n  position: fixed;\n  background: ${theme.colors.liquorice};\n  cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};\n  opacity: 0.4;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`\n\nconst Container = styled.div<IModalContainer>(\n  ({ $drawer, $width }) => css`\n    background: ${theme.colors.coconut};\n    box-sizing: border-box;\n    border-radius: 16px;\n    padding: 24px;\n    width: 100%;\n    max-width: ${$width};\n    position: fixed;\n    max-height: calc(100vh - 64px);\n    overflow: auto;\n    transition: all 0.3s ease-in-out;\n\n    ${$drawer === true &&\n    css`\n      @media (max-width: 768px) {\n        max-width: none;\n        border-radius: 16px 16px 0px 0px;\n        padding: 10% 24px;\n        max-height: 90vh;\n\n        position: fixed;\n        right: 0;\n        left: 0;\n        bottom: 0;\n      }\n    `}\n  `,\n)\n\nconst TitleElements = styled(Box)`\n  align-self: center;\n`\n"]}

package/dist/Modal/index.js

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

package/dist/Modal/index.js.map

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

package/dist/NumberInput/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent, FormEvent } from 'react';
+import React, { FocusEvent, FormEvent } from 'react';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 export interface Props extends CommonFieldProps {
     type?: 'number';

package/dist/NumberInput/NumberInput.js

@@ -0,0 +1,91 @@
+import React, { forwardRef, } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Field } from '../fields/Field';
+import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
+import { useUniqueId } from '../utils/id';
+export const NumberInput = forwardRef(function NumberInput({ id: idProp, type = 'number', placeholder, name, value, onChange, onInputChange, onBlur, min = -999999, max = 999999, step = 0, disabled = false, error = false, frontIcon, trailingIcon, fallbackStyle, ...fieldProps }, ref) {
+    const id = useUniqueId(idProp);
+    // Check whether the min/max value exists is within the specified range
+    const isInRange = (value) => {
+        if (min && value < min) {
+            return false;
+        }
+        if (max && value > max) {
+            return false;
+        }
+        return true;
+    };
+    // Round the number to two decimal places
+    const roundNumber = (event) => {
+        return Math.round(event * 100) / 100;
+    };
+    const applyMinMax = (value) => {
+        if (min && value < min)
+            return min;
+        if (max && value > max)
+            return max;
+        return value;
+    };
+    const handleChange = (event) => {
+        if (onChange === undefined)
+            return;
+        const EMPTY_INPUT = '';
+        if (event === EMPTY_INPUT) {
+            onChange(event);
+        }
+        else {
+            const amount = Number(event);
+            const normalisedValue = applyMinMax(amount);
+            onChange(normalisedValue);
+        }
+    };
+    // Increment or decrement the value when clicking the Spinner controls
+    const incrementValue = (event) => {
+        if (onChange === undefined)
+            return;
+        event.preventDefault();
+        const currentValue = Number(value) + step;
+        if (isInRange(currentValue)) {
+            onChange(roundNumber(currentValue));
+        }
+    };
+    const decrementValue = (event) => {
+        if (onChange === undefined)
+            return;
+        event.preventDefault();
+        const currentValue = Number(value) - step;
+        if (isInRange(currentValue)) {
+            onChange(roundNumber(currentValue));
+        }
+    };
+    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
+            frontIcon && (React.createElement(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })),
+            React.createElement(Input, { ref: ref, "$error": error, disabled: disabled, type: type, id: id, name: name, placeholder: placeholder, value: value, "$frontIcon": frontIcon, step: step, "$fallbackStyle": fallbackStyle, onWheel: (e) => e.currentTarget.blur(), onChange: (e) => {
+                    onChange && handleChange(e.currentTarget.value);
+                    onInputChange && onInputChange(e);
+                }, onBlur: onBlur }),
+            onChange && step > 0 && (React.createElement(Spinner, null,
+                React.createElement(SpinnerButton, { "aria-label": "step-up", onClick: incrementValue, disabled: disabled },
+                    React.createElement(Icon, { render: "caret", rotate: 180, color: "sesame", size: 24 })),
+                React.createElement(SpinnerButton, { "aria-label": "step-down", onClick: decrementValue, disabled: disabled },
+                    React.createElement(Icon, { render: "caret", color: "sesame", size: 24 })))),
+            trailingIcon && !step && (React.createElement(StyledTrailingIcon, { "$disabled": disabled, render: trailingIcon, color: "sesame" })))));
+});
+const Spinner = styled.div `
+  position: relative;
+  display: flex;
+  right: 58px;
+  margin-right: -58px;
+`;
+const SpinnerButton = styled.button `
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;
+//# sourceMappingURL=NumberInput.js.map

package/dist/NumberInput/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  forwardRef,\n} from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\n\nimport {\n  Input,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\n\nexport interface Props extends CommonFieldProps {\n  type?: 'number'\n  placeholder: string\n  name?: string\n  value: string\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  min?: number\n  max?: number\n  step?: 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 | number) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string | number) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n\nexport type NumberInputProps = Props & InputProps\n\nexport const NumberInput = forwardRef(function NumberInput(\n  {\n    id: idProp,\n    type = 'number',\n    placeholder,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    onBlur,\n    min = -999999,\n    max = 999999,\n    step = 0,\n    disabled = false,\n    error = false,\n    frontIcon,\n    trailingIcon,\n    fallbackStyle,\n    ...fieldProps\n  }: NumberInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n\n  // Check whether the min/max value exists is within the specified range\n  const isInRange = (value: number) => {\n    if (min && value < min) {\n      return false\n    }\n\n    if (max && value > max) {\n      return false\n    }\n\n    return true\n  }\n\n  // Round the number to two decimal places\n  const roundNumber = (event: number) => {\n    return Math.round(event * 100) / 100\n  }\n\n  const applyMinMax = (value: number) => {\n    if (min && value < min) return min\n    if (max && value > max) return max\n    return value\n  }\n\n  const handleChange = (event: string) => {\n    if (onChange === undefined) return\n    const EMPTY_INPUT = ''\n\n    if (event === EMPTY_INPUT) {\n      onChange(event)\n    } else {\n      const amount = Number(event)\n      const normalisedValue = applyMinMax(amount)\n\n      onChange(normalisedValue)\n    }\n  }\n  // Increment or decrement the value when clicking the Spinner controls\n  const incrementValue = (event: MouseEvent<HTMLButtonElement>) => {\n    if (onChange === undefined) return\n    event.preventDefault()\n    const currentValue = Number(value) + step\n\n    if (isInRange(currentValue)) {\n      onChange(roundNumber(currentValue))\n    }\n  }\n\n  const decrementValue = (event: MouseEvent<HTMLButtonElement>) => {\n    if (onChange === undefined) return\n    event.preventDefault()\n    const currentValue = Number(value) - step\n\n    if (isInRange(currentValue)) {\n      onChange(roundNumber(currentValue))\n    }\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        {frontIcon && (\n          <StyledFrontIcon\n            $disabled={disabled}\n            render={frontIcon}\n            color=\"sesame\"\n          />\n        )}\n        <Input\n          ref={ref}\n          $error={error}\n          disabled={disabled}\n          type={type}\n          id={id}\n          name={name}\n          placeholder={placeholder}\n          value={value}\n          $frontIcon={frontIcon}\n          step={step}\n          $fallbackStyle={fallbackStyle}\n          onWheel={(e) => e.currentTarget.blur()}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && handleChange(e.currentTarget.value)\n            onInputChange && onInputChange(e)\n          }}\n          onBlur={onBlur}\n        />\n\n        {onChange && step > 0 && (\n          <Spinner>\n            <SpinnerButton\n              aria-label=\"step-up\"\n              onClick={incrementValue}\n              disabled={disabled}\n            >\n              <Icon render=\"caret\" rotate={180} color=\"sesame\" size={24} />\n            </SpinnerButton>\n\n            <SpinnerButton\n              aria-label=\"step-down\"\n              onClick={decrementValue}\n              disabled={disabled}\n            >\n              <Icon render=\"caret\" color=\"sesame\" size={24} />\n            </SpinnerButton>\n          </Spinner>\n        )}\n        {trailingIcon && !step && (\n          <StyledTrailingIcon\n            $disabled={disabled}\n            render={trailingIcon}\n            color=\"sesame\"\n          />\n        )}\n      </Box>\n    </Field>\n  )\n})\n\nconst Spinner = styled.div`\n  position: relative;\n  display: flex;\n  right: 58px;\n  margin-right: -58px;\n`\n\ninterface IButton {\n  disabled: boolean\n}\n\nconst SpinnerButton = styled.button<IButton>`\n  width: 24px;\n  height: 24px;\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n`\n"]}

package/dist/NumberInput/index.js

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

package/dist/NumberInput/index.js.map

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

package/dist/Pagination/Pagination.js

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+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, { "aria-label": "previous-page", 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, { "aria-label": "next-page", 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: 24px;
+  width: fit-content;
+  padding: 0px 4px;
+  height: 24px;
+  min-width: 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/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\n\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nconst MAX_PAGES = 7\nconst MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2)\n\nexport type PaginationProps = {\n  /** Total number of records  */\n  total: number\n  /** Number of records per page  */\n  partition: number\n  /** Handle page change */\n  handlePageChange: (page: number) => void\n  /** Sets current page number */\n  currentPage?: number\n} & MarginProps\n\nexport const Pagination: FC<PaginationProps> = ({\n  total,\n  partition,\n  handlePageChange,\n  currentPage,\n  ...marginProps\n}) => {\n  const [lastPage, setLastPage] = useState(0)\n  const [activePage, setActivePage] = useState(1)\n  const [pages, setPages] = useState<number[]>([])\n  const [shownPages, setShownPages] = useState<number[]>([])\n  const [showFirstDots, setShowFirstDots] = useState(false)\n  const [showLastDots, setShowLastDots] = useState(false)\n\n  useEffect(() => {\n    // 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\n    // Using lastPage seems to bypass that\n    if (currentPage) {\n      setActivePage(currentPage)\n    } else {\n      setActivePage(1)\n    }\n  }, [lastPage, currentPage])\n\n  useEffect(() => {\n    const numberOfPages = Math.ceil(total / partition)\n    if (numberOfPages > 1) {\n      setLastPage(numberOfPages)\n    } else if (numberOfPages === 1) {\n      // Sets last page to be null to avoid the last page being kept from previous state.\n      setLastPage(0)\n    }\n    if (numberOfPages > 2) {\n      const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1)\n      setPages(allPages.slice(1, numberOfPages - 1))\n    } else {\n      // Sets pages to empty to avoid using the previous state if pages set before.\n      setPages([])\n    }\n  }, [total, partition])\n\n  useEffect(() => {\n    if (lastPage <= MAX_PAGES) {\n      setShownPages(pages)\n    } else if (activePage <= MAX_ADDITIONAL_PAGES) {\n      setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES))\n    } else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {\n      setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES))\n    } else {\n      const activePageIndex = pages.indexOf(activePage)\n      setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2))\n    }\n  }, [lastPage, activePage, pages])\n\n  useEffect(() => {\n    setShowFirstDots(shownPages[0] !== pages[0])\n    setShowLastDots(\n      shownPages[shownPages.length - 1] !== pages[pages.length - 1],\n    )\n  }, [shownPages, pages])\n\n  const movePage = (page: number) => {\n    if (page > 0 && page <= lastPage) {\n      setActivePage(page)\n      handlePageChange(page)\n    }\n  }\n\n  return (\n    <Container flex direction=\"row\" {...marginProps}>\n      {activePage - 1 > 0 && (\n        <IconBox\n          aria-label=\"previous-page\"\n          onClick={() => movePage(activePage - 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(activePage - 1)\n            }\n          }}\n        >\n          <Icon size={18} render=\"arrow\" />\n        </IconBox>\n      )}\n      <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n        <Text typo={activePage === 1 ? 'desc-medium' : 'desc-light'} tag=\"p\">\n          1\n        </Text>\n      </PageBox>\n      {showFirstDots && (\n        <PageBox>\n          <Text tag=\"p\">...</Text>\n        </PageBox>\n      )}\n      {shownPages.map((i) => {\n        return (\n          <PageBox\n            $active={activePage === i}\n            key={i}\n            onClick={() => movePage(i)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                movePage(i)\n              }\n            }}\n          >\n            <Text\n              typo={activePage === i ? 'desc-medium' : 'desc-light'}\n              tag=\"p\"\n            >\n              {i}\n            </Text>\n          </PageBox>\n        )\n      })}\n      {showLastDots && (\n        <PageBox>\n          <Text tag=\"p\">...</Text>\n        </PageBox>\n      )}\n      {Boolean(lastPage) && (\n        <PageBox\n          $active={activePage === lastPage}\n          onClick={() => movePage(lastPage)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(lastPage)\n            }\n          }}\n        >\n          <Text\n            typo={activePage === lastPage ? 'desc-medium' : 'desc-light'}\n            tag=\"p\"\n          >\n            {lastPage}\n          </Text>\n        </PageBox>\n      )}\n      {activePage + 1 <= lastPage && (\n        <IconBox\n          aria-label=\"next-page\"\n          onClick={() => movePage(activePage + 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(activePage + 1)\n            }\n          }}\n        >\n          <Icon size={18} render=\"arrow\" rotate={180} />\n        </IconBox>\n      )}\n    </Container>\n  )\n}\n\ninterface IPageBox {\n  $active?: boolean\n}\n\nconst Container = styled(Box)`\n  align-items: center;\n  > button {\n    margin-right: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst PageBox = styled.button<IPageBox>`\n  background: ${({ $active }) =>\n    $active ? theme.colors.custard : theme.colors.cream};\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  border-radius: 24px;\n  width: fit-content;\n  padding: 0px 4px;\n  height: 24px;\n  min-width: 24px;\n\n  &:hover {\n    background-color: ${theme.colors.mascarpone};\n  }\n  &:active {\n    background-color: ${theme.colors.custard};\n  }\n\n  ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n  cursor: pointer;\n\n  ${focusOutlineStyle}\n`\n"]}

package/dist/Pagination/index.js

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

package/dist/Pagination/index.js.map

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

package/dist/RadioGroup/RadioElement.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent } from 'react';
+import React, { FocusEvent } from 'react';
 import { MarginProps } from '../utils/space';
 import { BaseValueType } from './types';
 export declare const RadioElement: React.ForwardRefExoticComponent<{

package/dist/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/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,gBAAW,OAAO,cAAY,OAAO,KAAM,WAAW,GAAI,CACrE,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,CAA0C;;WAE9D,UAAU;YACT,UAAU;mBACH,UAAU;sBACP,KAAK,CAAC,MAAM,CAAC,KAAK;;MAElC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;IAE1D,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3B,CAAC,QAAQ;IACT,CAAC,QAAQ;IACT;;0BAEsB,KAAK,CAAC,MAAM,CAAC,SAAS;;GAE7C;;IAEC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3B,QAAQ;IACR,qBACE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SACpD,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA","sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { visuallyHidden } from '../utils/visuallyHidden'\n\nimport { Box } from '../Box'\nimport { BaseValueType } from './types'\n\ntype RadioElementProps = {\n  name: string\n  id: string\n  value: BaseValueType\n  checked: boolean\n  onChange: (value: BaseValueType) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  isError: boolean\n} & MarginProps\n\nexport const RadioElement = forwardRef<HTMLInputElement, RadioElementProps>(\n  function RadioElement(\n    { name, id, value, checked, onChange, onBlur, isError, ...marginProps },\n    ref,\n  ) {\n    return (\n      <>\n        <StyledInput\n          ref={ref}\n          type=\"radio\"\n          name={name}\n          id={id}\n          value={`${value}`}\n          checked={checked}\n          onChange={() => onChange(value)}\n          onBlur={onBlur}\n        />\n        <RadioCircle $isError={isError} $checked={checked} {...marginProps} />\n      </>\n    )\n  },\n)\n\nconst StyledInput = styled.input`\n  ${visuallyHidden}\n`\n\nconst RADIO_SIZE = 24\n\nconst RadioCircle = styled(Box)<{ $isError: boolean; $checked: boolean }>`\n  flex-shrink: 0;\n  width: ${RADIO_SIZE}px;\n  height: ${RADIO_SIZE}px;\n  border-radius: ${RADIO_SIZE}px;\n  background-color: ${theme.colors.cream};\n  border: 2px solid\n    ${({ $isError }) =>\n      $isError ? theme.colors.strawberry : theme.colors.sesame};\n\n  ${({ $checked, $isError }) =>\n    !$checked &&\n    !$isError &&\n    `\n    &:hover {\n      border: 2px solid ${theme.colors.liquorice};\n    }\n  `}\n\n  ${({ $checked, $isError }) =>\n    $checked &&\n    `border: 8px solid ${\n      $isError ? theme.colors.strawberry : theme.colors.liquorice\n    };`}\n\n  ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}\n`\n"]}

package/dist/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent, ReactElement } from 'react';
+import React, { FocusEvent, ReactElement } from 'react';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 import { Icons } from '../Icon/iconsList';
 import { BaseValueType, DisplayType, IconPosition } from './types';

package/dist/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/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;AAG7C,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,CAAuC,EAAE,CAAC,CAAA;IACnE,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,oBAAe,WAAW,IACrC,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,CAI3B,CAAA;AAE7B,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAE/B;;SAEQ,QAAQ;;IAEb,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IACrB,IAAI,YAAY,KAAK,iBAAiB,EAAE,CAAC;QACvC,OAAO;;;OAGN,CAAA;IACH,CAAC;IAED,OAAO,yBAAyB,CAAA;AAClC,CAAC;CACF,CAAA","sourcesContent":["import React, {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react'\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\nimport { Icons } from '../Icon/iconsList'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport { BaseValueType, DisplayType, IconPosition } from './types'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n  options: Array<{\n    visual?: string\n    icon?: Icons\n    iconPosition?: IconPosition\n    label: string\n    value: Value\n    bodyCopy?: string\n  }>\n  onChange: (value: Value) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  value: Value\n  displayType?: DisplayType\n  fallbackStyle?: boolean\n} & CommonFieldProps\n\nexport type RadioGroupElement = {\n  focus: VoidFunction\n}\n\nconst RadioGroupComponent = <Value extends BaseValueType>(\n  {\n    options,\n    onChange,\n    onBlur,\n    value,\n    displayType = 'normal',\n    renderAsTitle = false,\n    error = false,\n    fallbackStyle = false,\n    ...fieldProps\n  }: RadioGroupProps<Value>,\n  ref: ForwardedRef<RadioGroupElement>,\n) => {\n  const name = useUniqueId()\n\n  const optionRefs = useRef<RefObject<HTMLInputElement | null>[]>([])\n  useImperativeHandle(ref, () => {\n    return {\n      focus: () => {\n        const selectedIndex = options.findIndex((item) => item.value === value)\n\n        const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex\n        optionRefs.current[elementToFocus].current?.focus()\n      },\n    }\n  })\n\n  return (\n    <Fieldset renderAsTitle={renderAsTitle} error={error} {...fieldProps}>\n      <RadioItemList $displayType={displayType}>\n        {options.map((option, index) => {\n          const isSelected = option.value === value\n\n          return (\n            <RadioItem\n              ref={(radioOptionRef) => {\n                optionRefs.current[index] = {\n                  current: radioOptionRef,\n                }\n              }}\n              key={`${option.value}`}\n              name={name}\n              visual={option.visual}\n              icon={option.icon}\n              iconPosition={option.iconPosition}\n              label={option.label}\n              value={option.value}\n              checked={isSelected}\n              onChange={onChange}\n              onBlur={onBlur}\n              displayType={displayType}\n              isError={error}\n              fallbackStyle={fallbackStyle}\n              bodyCopy={option.bodyCopy}\n            />\n          )\n        })}\n      </RadioItemList>\n    </Fieldset>\n  )\n}\n\nexport const RadioGroup = forwardRef(RadioGroupComponent) as <\n  Value extends BaseValueType = BaseValueType,\n>(\n  p: RadioGroupProps<Value> & React.RefAttributes<HTMLInputElement>,\n) => ReactElement<any> | null\n\nconst RadioItemList = styled.div<\n  TransientProps<Pick<RadioGroupProps, 'displayType'>>\n>`\n  display: flex;\n  gap: ${ITEM_GAP}px;\n\n  ${({ $displayType }) => {\n    if ($displayType === 'horizontal-card') {\n      return `\n        flex-direction: row;\n        flex-wrap: wrap;\n      `\n    }\n\n    return `flex-direction: column;`\n  }}\n`\n"]}

package/dist/RadioGroup/RadioItem.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent } from 'react';
+import React, { FocusEvent } from 'react';
 import { Icons } from '../Icon/iconsList';
 import { BaseValueType, DisplayType, IconPosition } from './types';
 type RadioItemProps = {

package/dist/RadioGroup/RadioItem.js

@@ -0,0 +1,98 @@
+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/RadioGroup/RadioItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition } from './types'\n\ntype RadioItemProps = {\n  name: string\n  visual?: string\n  icon?: Icons\n  iconPosition?: IconPosition\n  value: BaseValueType\n  label: string\n  checked: boolean\n  onChange: (value: BaseValueType) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  displayType: DisplayType\n  isError: boolean\n  fallbackStyle?: boolean\n  bodyCopy?: string\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n  function RadioItem(\n    {\n      name,\n      visual,\n      icon,\n      iconPosition = 'center',\n      label,\n      value,\n      checked,\n      onChange,\n      onBlur,\n      displayType,\n      isError,\n      fallbackStyle,\n      bodyCopy,\n    },\n    ref,\n  ) {\n    const id = useUniqueId()\n    return (\n      <Wrapper\n        htmlFor={id}\n        checked={checked}\n        $displayType={displayType}\n        data-testid={value}\n        $isError={isError}\n        $fallbackStyle={fallbackStyle}\n      >\n        {visual && !icon && (\n          <VisualWrapper>\n            <Visual $visualUrl={visual} />\n          </VisualWrapper>\n        )}\n        {!visual && icon && (\n          <IconWrapper $iconPosition={iconPosition}>\n            <Icon render={icon} size={24} />\n          </IconWrapper>\n        )}\n        <Box flex alignItems=\"center\">\n          <RadioElement\n            ref={ref}\n            name={name}\n            id={id}\n            value={value}\n            checked={checked}\n            onChange={onChange}\n            onBlur={onBlur}\n            isError={isError}\n            mr=\"8px\"\n          />\n          <Box>\n            <RadioText $isError={isError}>{label}</RadioText>\n            {bodyCopy && (\n              <Box>\n                <Text typo=\"caption\">{bodyCopy}</Text>\n              </Box>\n            )}\n          </Box>\n        </Box>\n      </Wrapper>\n    )\n  },\n)\n\nconst VisualWrapper = styled.div`\n  width: 100%;\n  max-width: 120px;\n  margin: 0 auto 8px;\n`\n\nconst IconWrapper = styled.div<{ $iconPosition?: IconPosition }>`\n  display: flex;\n  padding-bottom: 12px;\n\n  ${({ $iconPosition }) =>\n    $iconPosition === 'center' &&\n    css`\n      justify-content: center;\n    `}\n\n  ${({ $iconPosition }) =>\n    $iconPosition === 'start' &&\n    css`\n      justify-content: flex-start;\n    `}\n`\n\nconst Visual = styled.div<{ $visualUrl: string }>`\n  width: 100%;\n  padding-top: 100%;\n  background-image: url('${(p) => p.$visualUrl}');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n`\n\nconst Wrapper = styled.label<\n  TransientProps<\n    Pick<RadioItemProps, 'displayType' | 'isError' | 'fallbackStyle'>\n  > & { checked: boolean }\n>`\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n\n  ${({ $displayType, checked, $isError, $fallbackStyle }) => css`\n    ${($displayType === 'horizontal-card' ||\n      $displayType === 'vertical-card') &&\n    css`\n      border-radius: 12px;\n      background-color: ${$fallbackStyle\n        ? theme.colors.cream\n        : theme.colors.custard};\n      padding: ${checked ? '10px' : '12px'};\n      border: ${checked &&\n      ($isError\n        ? `2px solid ${theme.colors.strawberry}`\n        : `2px solid ${theme.colors.liquorice}`)};\n\n      &:hover {\n        background-color: ${$fallbackStyle\n          ? theme.colors.coconut\n          : theme.colors.oatmeal};\n      }\n    `}\n    ${$displayType === 'horizontal-card' &&\n    css`\n      width: 100%;\n      justify-content: center;\n\n      @media (min-width: 420px) {\n        width: calc(50% - ${ITEM_GAP / 2}px);\n      }\n\n      @media (min-width: 768px) {\n        width: 201px;\n      }\n    `}\n  `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n  line-height: 16px;\n  font-size: 16px;\n  font-weight: ${theme.font.weight.medium};\n  color: ${({ $isError }) =>\n    $isError ? theme.colors.strawberry : theme.colors.liquorice};\n  margin-top: 4px;\n`\n"]}

package/dist/RadioGroup/constants.js

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

package/dist/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","sourcesContent":["export const ITEM_GAP = 12\n"]}

package/dist/RadioGroup/index.js

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

package/dist/RadioGroup/index.js.map

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

package/dist/RadioGroup/types.js

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

package/dist/RadioGroup/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/RadioGroup/types.ts"],"names":[],"mappings":"","sourcesContent":["export type IconPosition = 'center' | 'start'\n\nexport type DisplayType = 'normal' | 'vertical-card' | 'horizontal-card'\n\nexport type BaseValueType = string | boolean | null\n"]}

package/dist/RichText/RichText.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { MarginProps } from '../utils/space';
 export interface RichTextProps extends MarginProps {
     htmlString: string;