@mrshmllw/smores-react 16.2.13 → 16.2.15

package/dist/Pagination/Pagination.js

@@ -20,6 +20,7 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
         // 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) {
+            // oxlint-disable-next-line react/react-compiler
             setActivePage(currentPage);
         }
         else {
@@ -29,6 +30,7 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
     useEffect(() => {
         const numberOfPages = Math.ceil(total / partition);
         if (numberOfPages > 1) {
+            // oxlint-disable-next-line react/react-compiler
             setLastPage(numberOfPages);
         }
         else if (numberOfPages === 1) {
@@ -46,6 +48,7 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
     }, [total, partition]);
     useEffect(() => {
         if (lastPage <= MAX_PAGES) {
+            // oxlint-disable-next-line react/react-compiler
             setShownPages(pages);
         }
         else if (activePage <= MAX_ADDITIONAL_PAGES) {
@@ -60,7 +63,9 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
         }
     }, [lastPage, activePage, pages]);
     useEffect(() => {
+        // oxlint-disable-next-line react/react-compiler
         setShowFirstDots(shownPages[0] !== pages[0]);
+        // oxlint-disable-next-line react/react-compiler
         setShowLastDots(shownPages[shownPages.length - 1] !== pages[pages.length - 1]);
     }, [shownPages, pages]);
     const movePage = (page) => {
@@ -73,13 +78,13 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
                     if (e.key === 'Enter') {
                         movePage(activePage - 1);
                     }
-                }, children: _jsx(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faArrowLeft }) }) })), _jsx(PageBox, { "$active": activePage === 1, onClick: () => movePage(1), children: _jsx(Text, { typo: activePage === 1 ? 'headline-small' : 'body-regular', tag: "p", children: "1" }) }), showFirstDots && (_jsx(PageBox, { children: _jsx(Text, { tag: "p", children: "..." }) })), shownPages.map((i) => {
-                return (_jsx(PageBox, { "$active": activePage === i, onClick: () => movePage(i), onKeyDown: (e) => {
+                }, children: _jsx(IconContainer, { $size: 16, children: _jsx(FontAwesomeIcon, { icon: faArrowLeft }) }) })), _jsx(PageBox, { $active: activePage === 1, onClick: () => movePage(1), children: _jsx(Text, { typo: activePage === 1 ? 'headline-small' : 'body-regular', tag: "p", children: "1" }) }), showFirstDots && (_jsx(PageBox, { children: _jsx(Text, { tag: "p", children: "..." }) })), shownPages.map((i) => {
+                return (_jsx(PageBox, { $active: activePage === i, onClick: () => movePage(i), onKeyDown: (e) => {
                         if (e.key === 'Enter') {
                             movePage(i);
                         }
                     }, children: _jsx(Text, { typo: activePage === i ? 'headline-small' : 'body-regular', tag: "p", children: i }) }, i));
-            }), showLastDots && (_jsx(PageBox, { children: _jsx(Text, { tag: "p", children: "..." }) })), Boolean(lastPage) && (_jsx(PageBox, { "$active": activePage === lastPage, onClick: () => movePage(lastPage), onKeyDown: (e) => {
+            }), showLastDots && (_jsx(PageBox, { children: _jsx(Text, { tag: "p", children: "..." }) })), Boolean(lastPage) && (_jsx(PageBox, { $active: activePage === lastPage, onClick: () => movePage(lastPage), onKeyDown: (e) => {
                     if (e.key === 'Enter') {
                         movePage(lastPage);
                     }
@@ -87,7 +92,7 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
                     if (e.key === 'Enter') {
                         movePage(activePage + 1);
                     }
-                }, children: _jsx(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faArrowRight }) }) }))] }));
+                }, children: _jsx(IconContainer, { $size: 16, children: _jsx(FontAwesomeIcon, { icon: faArrowRight }) }) }))] }));
 };
 const Container = styled(Box) `
   align-items: center;

package/dist/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\n\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport {\n  faArrowLeft,\n  faArrowRight,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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          <IconContainer $size={16}>\n            <FontAwesomeIcon icon={faArrowLeft} />\n          </IconContainer>\n        </IconBox>\n      )}\n      <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n        <Text\n          typo={activePage === 1 ? 'headline-small' : 'body-regular'}\n          tag=\"p\"\n        >\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 ? 'headline-small' : 'body-regular'}\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 ? 'headline-small' : 'body-regular'}\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          <IconContainer $size={16}>\n            <FontAwesomeIcon icon={faArrowRight} />\n          </IconContainer>\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: ${({ theme }) => theme.space['050']};\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst PageBox = styled.button<IPageBox>`\n  background: ${({ $active, theme }) =>\n    $active ? theme.color.surface.base[300] : theme.color.surface.base['000']};\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 }) => theme.color.surface.base[300]};\n  }\n  &:active {\n    background-color: ${({ theme }) => theme.color.surface.base[200]};\n  }\n\n  ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n  cursor: pointer;\n\n  ${focusOutlineStyle}\n`\n"]}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EACL,WAAW,EACX,YAAY,GACb,MAAM,kDAAkD,CAAA;AAEzD,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAA;AAarD,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC3C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAC1D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,2KAA2K;QAC3K,sCAAsC;QACtC,IAAI,WAAW,EAAE,CAAC;YAChB,gDAAgD;YAChD,aAAa,CAAC,WAAW,CAAC,CAAA;QAC5B,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,CAAC,CAAC,CAAA;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAA;QAClD,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;YACtB,gDAAgD;YAChD,WAAW,CAAC,aAAa,CAAC,CAAA;QAC5B,CAAC;aAAM,IAAI,aAAa,KAAK,CAAC,EAAE,CAAC;YAC/B,mFAAmF;YACnF,WAAW,CAAC,CAAC,CAAC,CAAA;QAChB,CAAC;QACD,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;YACvE,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,GAAG,CAAC,CAAC,CAAC,CAAA;QAChD,CAAC;aAAM,CAAC;YACN,6EAA6E;YAC7E,QAAQ,CAAC,EAAE,CAAC,CAAA;QACd,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAA;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,SAAS,EAAE,CAAC;YAC1B,gDAAgD;YAChD,aAAa,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;aAAM,IAAI,UAAU,IAAI,oBAAoB,EAAE,CAAC;YAC9C,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAA;QACrD,CAAC;aAAM,IAAI,UAAU,GAAG,QAAQ,GAAG,oBAAoB,EAAE,CAAC;YACxD,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,oBAAoB,CAAC,CAAC,CAAA;QACjE,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;YACjD,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,EAAE,eAAe,GAAG,CAAC,CAAC,CAAC,CAAA;QACtE,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,gDAAgD;QAChD,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;QAC5C,gDAAgD;QAChD,eAAe,CACb,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAC9D,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAA;IAEvB,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,EAAE;QAChC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,QAAQ,EAAE,CAAC;YACjC,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,MAAC,SAAS,IAAC,IAAI,QAAC,SAAS,EAAC,KAAK,KAAK,WAAW,aAC5C,UAAU,GAAG,CAAC,GAAG,CAAC,IAAI,CACrB,KAAC,OAAO,kBACK,eAAe,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;oBAC1B,CAAC;gBACH,CAAC,YAED,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,YACtB,KAAC,eAAe,IAAC,IAAI,EAAE,WAAW,GAAI,GACxB,GACR,CACX,EACD,KAAC,OAAO,IAAC,OAAO,EAAE,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,YAC5D,KAAC,IAAI,IACH,IAAI,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,EAC1D,GAAG,EAAC,GAAG,kBAGF,GACC,EACT,aAAa,IAAI,CAChB,KAAC,OAAO,cACN,KAAC,IAAI,IAAC,GAAG,EAAC,GAAG,oBAAW,GAChB,CACX,EACA,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;gBACpB,OAAO,CACL,KAAC,OAAO,IACN,OAAO,EAAE,UAAU,KAAK,CAAC,EAEzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC1B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;4BACtB,QAAQ,CAAC,CAAC,CAAC,CAAA;wBACb,CAAC;oBACH,CAAC,YAED,KAAC,IAAI,IACH,IAAI,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,EAC1D,GAAG,EAAC,GAAG,YAEN,CAAC,GACG,IAbF,CAAC,CAcE,CACX,CAAA;YACH,CAAC,CAAC,EACD,YAAY,IAAI,CACf,KAAC,OAAO,cACN,KAAC,IAAI,IAAC,GAAG,EAAC,GAAG,oBAAW,GAChB,CACX,EACA,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,KAAC,OAAO,IACN,OAAO,EAAE,UAAU,KAAK,QAAQ,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,EACjC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,QAAQ,CAAC,QAAQ,CAAC,CAAA;oBACpB,CAAC;gBACH,CAAC,YAED,KAAC,IAAI,IACH,IAAI,EAAE,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,EACjE,GAAG,EAAC,GAAG,YAEN,QAAQ,GACJ,GACC,CACX,EACA,UAAU,GAAG,CAAC,IAAI,QAAQ,IAAI,CAC7B,KAAC,OAAO,kBACK,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;oBAC1B,CAAC;gBACH,CAAC,YAED,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,YACtB,KAAC,eAAe,IAAC,IAAI,EAAE,YAAY,GAAI,GACzB,GACR,CACX,IACS,CACb,CAAA;AACH,CAAC,CAAA;AAMD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;oBAGT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;CAMpD,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAU;gBACvB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CACnC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;;;;;;wBAWrD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;wBAG5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;IAGhE,iBAAiB;CACpB,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAU;;;IAGnC,iBAAiB;CACpB,CAAA","sourcesContent":["import { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\n\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport {\n  faArrowLeft,\n  faArrowRight,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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      // oxlint-disable-next-line react/react-compiler\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      // oxlint-disable-next-line react/react-compiler\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      // oxlint-disable-next-line react/react-compiler\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    // oxlint-disable-next-line react/react-compiler\n    setShowFirstDots(shownPages[0] !== pages[0])\n    // oxlint-disable-next-line react/react-compiler\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          <IconContainer $size={16}>\n            <FontAwesomeIcon icon={faArrowLeft} />\n          </IconContainer>\n        </IconBox>\n      )}\n      <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n        <Text\n          typo={activePage === 1 ? 'headline-small' : 'body-regular'}\n          tag=\"p\"\n        >\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 ? 'headline-small' : 'body-regular'}\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 ? 'headline-small' : 'body-regular'}\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          <IconContainer $size={16}>\n            <FontAwesomeIcon icon={faArrowRight} />\n          </IconContainer>\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: ${({ theme }) => theme.space['050']};\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst PageBox = styled.button<IPageBox>`\n  background: ${({ $active, theme }) =>\n    $active ? theme.color.surface.base[300] : theme.color.surface.base['000']};\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 }) => theme.color.surface.base[300]};\n  }\n  &:active {\n    background-color: ${({ theme }) => theme.color.surface.base[200]};\n  }\n\n  ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n  cursor: pointer;\n\n  ${focusOutlineStyle}\n`\n"]}

package/dist/ProgressIndicator/ProgressIndicator.js

@@ -17,7 +17,7 @@ export const ProgressIndicator = ({ handleStepChange, onStepClick, simpleStep =
             handleStepChange(stepData);
         }
     };
-    return (_jsxs(Wrapper, { width: `${totalWidth}px`, flex: true, justifyContent: "flex-start", alignItems: "center", children: [_jsx(DefaultProgress, { "$simpleStep": simpleStep }), _jsx(Box, { flex: true, children: visibleSteps.map((step, index) => {
+    return (_jsxs(Wrapper, { width: `${totalWidth}px`, flex: true, justifyContent: "flex-start", alignItems: "center", children: [_jsx(DefaultProgress, { $simpleStep: simpleStep }), _jsx(Box, { flex: true, children: visibleSteps.map((step, index) => {
                     const stepState = calculateStepState(index, currentStepIndex);
                     return (_jsx(StepItem, { isCompleted: stepState === 'completed', isCurrentStep: stepState === 'current', isDisabled: stepState === 'disabled', isLastCompleted: lastCompletedStepIndex === index, onClick: () => handleStepClick(index, stepState, step), stepWidth: `${stepWidth}px`, label: step.label, isSimple: simpleStep, isLastItem: index === visibleSteps.length - 1 }, step.id));
                 }) })] }));

package/dist/ProgressIndicator/ProgressIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../src/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAahD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,gBAAgB,EAChB,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,WAAW,GACL,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC3D,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAC7C,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,CAClC,CAAA;IAED,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,uBAAuB,CACvD,YAAY,CAAC,MAAM,EACnB,UAAU,CACX,CAAA;IAED,MAAM,sBAAsB,GAAG,YAAY,CAAC,aAAa,CACvD,CAAC,IAAI,EAAE,EAAE,CACP,kBAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QAChE,WAAW,CACd,CAAA;IAED,MAAM,eAAe,GAAG,CACtB,gBAAwB,EACxB,gBAA2B,EAC3B,QAAkB,EAClB,EAAE;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC,CAAA;QACrD,CAAC;QAED,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YACpC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,MAAC,OAAO,IACN,KAAK,EAAE,GAAG,UAAU,IAAI,EACxB,IAAI,QACJ,cAAc,EAAC,YAAY,EAC3B,UAAU,EAAC,QAAQ,aAEnB,KAAC,eAAe,mBAAc,UAAU,GAAI,EAC5C,KAAC,GAAG,IAAC,IAAI,kBACN,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAChC,MAAM,SAAS,GAAG,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;oBAC7D,OAAO,CACL,KAAC,QAAQ,IAEP,WAAW,EAAE,SAAS,KAAK,WAAW,EACtC,aAAa,EAAE,SAAS,KAAK,SAAS,EACtC,UAAU,EAAE,SAAS,KAAK,UAAU,EACpC,eAAe,EAAE,sBAAsB,KAAK,KAAK,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EACtD,SAAS,EAAE,GAAG,SAAS,IAAI,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,UAAU,EACpB,UAAU,EAAE,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,IATxC,IAAI,CAAC,EAAE,CAUZ,CACH,CAAA;gBACH,CAAC,CAAC,GACE,IACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1B,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAA2B;;;;gBAI9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;IAI7D,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,sBAAsB;CAC7D,CAAA","sourcesContent":["import { StepData, StepState } from './types'\nimport { calculateStepState, calculateProgressWidths } from './helpers'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { StepItem } from './components/StepItem'\n\ninterface Props {\n  steps: ReadonlyArray<StepData>\n  handleStepChange: (step: StepData) => void\n  simpleStep?: boolean\n  onStepClick?: (data: {\n    currentStepIndex: number\n    currentStepState: StepState\n  }) => void\n  currentStep: string\n}\n\nexport const ProgressIndicator = ({\n  handleStepChange,\n  onStepClick,\n  simpleStep = false,\n  steps,\n  currentStep,\n}: Props) => {\n  const visibleSteps = steps.filter((step) => !step.isHidden)\n  const currentStepIndex = visibleSteps.findIndex(\n    (step) => step.id === currentStep,\n  )\n\n  const { totalWidth, stepWidth } = calculateProgressWidths(\n    visibleSteps.length,\n    simpleStep,\n  )\n\n  const lastCompletedStepIndex = visibleSteps.findLastIndex(\n    (step) =>\n      calculateStepState(visibleSteps.indexOf(step), currentStepIndex) ===\n      'completed',\n  )\n\n  const handleStepClick = (\n    currentStepIndex: number,\n    currentStepState: StepState,\n    stepData: StepData,\n  ) => {\n    if (onStepClick) {\n      onStepClick({ currentStepIndex, currentStepState })\n    }\n\n    if (currentStepState !== 'disabled') {\n      handleStepChange(stepData)\n    }\n  }\n\n  return (\n    <Wrapper\n      width={`${totalWidth}px`}\n      flex\n      justifyContent=\"flex-start\"\n      alignItems=\"center\"\n    >\n      <DefaultProgress $simpleStep={simpleStep} />\n      <Box flex>\n        {visibleSteps.map((step, index) => {\n          const stepState = calculateStepState(index, currentStepIndex)\n          return (\n            <StepItem\n              key={step.id}\n              isCompleted={stepState === 'completed'}\n              isCurrentStep={stepState === 'current'}\n              isDisabled={stepState === 'disabled'}\n              isLastCompleted={lastCompletedStepIndex === index}\n              onClick={() => handleStepClick(index, stepState, step)}\n              stepWidth={`${stepWidth}px`}\n              label={step.label}\n              isSimple={simpleStep}\n              isLastItem={index === visibleSteps.length - 1}\n            />\n          )\n        })}\n      </Box>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  position: relative;\n`\n\nconst DefaultProgress = styled(Box)<{ $simpleStep?: boolean }>`\n  z-index: 0;\n  content: '';\n  position: absolute;\n  background: ${({ theme }) => theme.color.feedback.positive[100]};\n  width: 100%;\n  height: 12px;\n\n  ${({ $simpleStep }) => $simpleStep && `border-radius:100px;`}\n`\n"]}
+{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../src/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAahD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,gBAAgB,EAChB,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,WAAW,GACL,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC3D,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAC7C,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,CAClC,CAAA;IAED,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,uBAAuB,CACvD,YAAY,CAAC,MAAM,EACnB,UAAU,CACX,CAAA;IAED,MAAM,sBAAsB,GAAG,YAAY,CAAC,aAAa,CACvD,CAAC,IAAI,EAAE,EAAE,CACP,kBAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QAChE,WAAW,CACd,CAAA;IAED,MAAM,eAAe,GAAG,CACtB,gBAAwB,EACxB,gBAA2B,EAC3B,QAAkB,EAClB,EAAE;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC,CAAA;QACrD,CAAC;QAED,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YACpC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,MAAC,OAAO,IACN,KAAK,EAAE,GAAG,UAAU,IAAI,EACxB,IAAI,QACJ,cAAc,EAAC,YAAY,EAC3B,UAAU,EAAC,QAAQ,aAEnB,KAAC,eAAe,IAAC,WAAW,EAAE,UAAU,GAAI,EAC5C,KAAC,GAAG,IAAC,IAAI,kBACN,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAChC,MAAM,SAAS,GAAG,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;oBAC7D,OAAO,CACL,KAAC,QAAQ,IAEP,WAAW,EAAE,SAAS,KAAK,WAAW,EACtC,aAAa,EAAE,SAAS,KAAK,SAAS,EACtC,UAAU,EAAE,SAAS,KAAK,UAAU,EACpC,eAAe,EAAE,sBAAsB,KAAK,KAAK,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EACtD,SAAS,EAAE,GAAG,SAAS,IAAI,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,UAAU,EACpB,UAAU,EAAE,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,IATxC,IAAI,CAAC,EAAE,CAUZ,CACH,CAAA;gBACH,CAAC,CAAC,GACE,IACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1B,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAA2B;;;;gBAI9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;IAI7D,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,sBAAsB;CAC7D,CAAA","sourcesContent":["import { StepData, StepState } from './types'\nimport { calculateStepState, calculateProgressWidths } from './helpers'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { StepItem } from './components/StepItem'\n\ninterface Props {\n  steps: ReadonlyArray<StepData>\n  handleStepChange: (step: StepData) => void\n  simpleStep?: boolean\n  onStepClick?: (data: {\n    currentStepIndex: number\n    currentStepState: StepState\n  }) => void\n  currentStep: string\n}\n\nexport const ProgressIndicator = ({\n  handleStepChange,\n  onStepClick,\n  simpleStep = false,\n  steps,\n  currentStep,\n}: Props) => {\n  const visibleSteps = steps.filter((step) => !step.isHidden)\n  const currentStepIndex = visibleSteps.findIndex(\n    (step) => step.id === currentStep,\n  )\n\n  const { totalWidth, stepWidth } = calculateProgressWidths(\n    visibleSteps.length,\n    simpleStep,\n  )\n\n  const lastCompletedStepIndex = visibleSteps.findLastIndex(\n    (step) =>\n      calculateStepState(visibleSteps.indexOf(step), currentStepIndex) ===\n      'completed',\n  )\n\n  const handleStepClick = (\n    currentStepIndex: number,\n    currentStepState: StepState,\n    stepData: StepData,\n  ) => {\n    if (onStepClick) {\n      onStepClick({ currentStepIndex, currentStepState })\n    }\n\n    if (currentStepState !== 'disabled') {\n      handleStepChange(stepData)\n    }\n  }\n\n  return (\n    <Wrapper\n      width={`${totalWidth}px`}\n      flex\n      justifyContent=\"flex-start\"\n      alignItems=\"center\"\n    >\n      <DefaultProgress $simpleStep={simpleStep} />\n      <Box flex>\n        {visibleSteps.map((step, index) => {\n          const stepState = calculateStepState(index, currentStepIndex)\n          return (\n            <StepItem\n              key={step.id}\n              isCompleted={stepState === 'completed'}\n              isCurrentStep={stepState === 'current'}\n              isDisabled={stepState === 'disabled'}\n              isLastCompleted={lastCompletedStepIndex === index}\n              onClick={() => handleStepClick(index, stepState, step)}\n              stepWidth={`${stepWidth}px`}\n              label={step.label}\n              isSimple={simpleStep}\n              isLastItem={index === visibleSteps.length - 1}\n            />\n          )\n        })}\n      </Box>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  position: relative;\n`\n\nconst DefaultProgress = styled(Box)<{ $simpleStep?: boolean }>`\n  z-index: 0;\n  content: '';\n  position: absolute;\n  background: ${({ theme }) => theme.color.feedback.positive[100]};\n  width: 100%;\n  height: 12px;\n\n  ${({ $simpleStep }) => $simpleStep && `border-radius:100px;`}\n`\n"]}

package/dist/ProgressIndicator/components/StepItem.js

@@ -9,9 +9,9 @@ import { faCheck } from '@awesome.me/kit-46ca99185c/icons/classic/solid';
 export const StepItem = ({ label, isSimple = false, isCurrentStep, stepWidth, onClick, isCompleted = false, isLastCompleted = false, isLastItem = false, isDisabled, }) => {
     const theme = useTheme();
     if (isSimple) {
-        return (_jsx(SimpleItem, { "$completed": isCompleted, "$lastCompleted": isLastCompleted, width: stepWidth, height: "12px" }));
+        return (_jsx(SimpleItem, { $completed: isCompleted, $lastCompleted: isLastCompleted, width: stepWidth, height: "12px" }));
     }
-    return (_jsxs(ProgressItem, { flex: true, alignItems: "flex-start", "$completed": isCompleted, "$lastCompleted": isLastCompleted, width: stepWidth, children: [_jsxs(ClickableArea, { flex: true, "data-testid": `step-item-${label}`, direction: "column", alignItems: "center", onClick: onClick, "$isDisabled": isDisabled, children: [_jsx(ProgressIndicator, { "$completed": isCompleted, "$currentStep": isCurrentStep, flex: true, alignItems: "center", justifyContent: "center", children: isCompleted && (_jsx(IconContainer, { "$size": 12, children: _jsx(FontAwesomeIcon, { icon: faCheck, color: theme.color.surface.base['000'] }) })) }), _jsx(StyledText, { typo: "caption", children: label })] }), isCompleted && !isLastItem && _jsx(CompletedBar, {})] }));
+    return (_jsxs(ProgressItem, { flex: true, alignItems: "flex-start", $completed: isCompleted, $lastCompleted: isLastCompleted, width: stepWidth, children: [_jsxs(ClickableArea, { flex: true, "data-testid": `step-item-${label}`, direction: "column", alignItems: "center", onClick: onClick, $isDisabled: isDisabled, children: [_jsx(ProgressIndicator, { $completed: isCompleted, $currentStep: isCurrentStep, flex: true, alignItems: "center", justifyContent: "center", children: isCompleted && (_jsx(IconContainer, { $size: 12, children: _jsx(FontAwesomeIcon, { icon: faCheck, color: theme.color.surface.base['000'] }) })) }), _jsx(StyledText, { typo: "caption", children: label })] }), isCompleted && !isLastItem && _jsx(CompletedBar, {})] }));
 };
 const lastCompleted = css `
   border-radius: 0 100px 100px 0;

package/dist/ProgressIndicator/components/StepItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepItem.js","sourceRoot":"","sources":["../../../src/ProgressIndicator/components/StepItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box } from '../../Box'\nimport { StepData } from '../types'\nimport styled, { css, useTheme } from 'styled-components'\nimport { theme as oldTheme } from '../../theme'\nimport { Text } from '../../Text'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\n\nexport interface StepItemProps extends Pick<StepData, 'label'> {\n  isCompleted?: boolean\n  isLastCompleted?: boolean\n  isDisabled: boolean\n  isCurrentStep: boolean\n  isSimple?: boolean\n  onClick: () => void\n  stepWidth: string\n  isLastItem: boolean\n}\n\nexport const StepItem = ({\n  label,\n  isSimple = false,\n  isCurrentStep,\n  stepWidth,\n  onClick,\n  isCompleted = false,\n  isLastCompleted = false,\n  isLastItem = false,\n  isDisabled,\n}: StepItemProps) => {\n  const theme = useTheme()\n  if (isSimple) {\n    return (\n      <SimpleItem\n        $completed={isCompleted}\n        $lastCompleted={isLastCompleted}\n        width={stepWidth}\n        height=\"12px\"\n      />\n    )\n  }\n\n  return (\n    <ProgressItem\n      flex\n      alignItems=\"flex-start\"\n      $completed={isCompleted}\n      $lastCompleted={isLastCompleted}\n      width={stepWidth}\n    >\n      <ClickableArea\n        flex\n        data-testid={`step-item-${label}`}\n        direction=\"column\"\n        alignItems=\"center\"\n        onClick={onClick}\n        $isDisabled={isDisabled}\n      >\n        <ProgressIndicator\n          $completed={isCompleted}\n          $currentStep={isCurrentStep}\n          flex\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {isCompleted && (\n            <IconContainer $size={12}>\n              <FontAwesomeIcon\n                icon={faCheck}\n                color={theme.color.surface.base['000']}\n              />\n            </IconContainer>\n          )}\n        </ProgressIndicator>\n        <StyledText typo=\"caption\">{label}</StyledText>\n      </ClickableArea>\n      {isCompleted && !isLastItem && <CompletedBar />}\n    </ProgressItem>\n  )\n}\n\ninterface StyledComponentProps {\n  $completed?: boolean\n  $lastCompleted?: boolean\n  $currentStep?: boolean\n  $isDisabled?: boolean\n  $completedStep?: boolean\n}\n\nconst lastCompleted = css`\n  border-radius: 0 100px 100px 0;\n\n  &:first-child {\n    border-radius: 100px;\n  }\n`\n\nconst borderRadiusCss = css<StyledComponentProps>`\n  &:first-child {\n    border-radius: 100px 0 0 100px;\n  }\n\n  ${({ $lastCompleted }) => $lastCompleted && lastCompleted}\n`\n\nconst SimpleItem = styled(Box)<StyledComponentProps>`\n  position: relative;\n  z-index: 1;\n  ${borderRadiusCss}\n\n  background: ${({ $completed, theme }) =>\n    $completed ? theme.color.feedback.positive[200] : 'none'};\n`\n\nconst ProgressItem = styled(Box)<StyledComponentProps>`\n  position: relative;\n  z-index: 1;\n  top: 9px;\n  left: -10px;\n\n  &:last-child {\n    width: auto;\n  }\n`\nconst ClickableArea = styled(Box)<StyledComponentProps>`\n  position: relative;\n  cursor: ${({ $isDisabled }) => ($isDisabled ? 'auto' : 'pointer')};\n`\n\nconst ProgressIndicator = styled(Box)<StyledComponentProps>`\n  border-radius: 50%;\n  height: 24px;\n  width: 24px;\n  position: relative;\n  z-index: 1;\n  background: ${({ $completed, $currentStep, theme }) =>\n    $completed || $currentStep\n      ? theme.color.feedback.positive[200]\n      : theme.color.feedback.positive[100]};\n`\n\nconst StyledText = styled(Text)`\n  margin-top: ${({ theme }) => theme.space['025']};\n  font-weight: ${oldTheme.font.weight.medium};\n  white-space: nowrap;\n`\n\nconst CompletedBar = styled(Box)`\n  position: absolute;\n  height: 12px;\n  width: 100%;\n  top: 7px;\n  left: 13px;\n  background: ${({ theme }) => theme.color.feedback.positive[200]};\n  z-index: 0;\n`\n"]}
+{"version":3,"file":"StepItem.js","sourceRoot":"","sources":["../../../src/ProgressIndicator/components/StepItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box } from '../../Box'\nimport { StepData } from '../types'\nimport styled, { css, useTheme } from 'styled-components'\nimport { theme as oldTheme } from '../../theme'\nimport { Text } from '../../Text'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\n\nexport interface StepItemProps extends Pick<StepData, 'label'> {\n  isCompleted?: boolean\n  isLastCompleted?: boolean\n  isDisabled: boolean\n  isCurrentStep: boolean\n  isSimple?: boolean\n  onClick: () => void\n  stepWidth: string\n  isLastItem: boolean\n}\n\nexport const StepItem = ({\n  label,\n  isSimple = false,\n  isCurrentStep,\n  stepWidth,\n  onClick,\n  isCompleted = false,\n  isLastCompleted = false,\n  isLastItem = false,\n  isDisabled,\n}: StepItemProps) => {\n  const theme = useTheme()\n  if (isSimple) {\n    return (\n      <SimpleItem\n        $completed={isCompleted}\n        $lastCompleted={isLastCompleted}\n        width={stepWidth}\n        height=\"12px\"\n      />\n    )\n  }\n\n  return (\n    <ProgressItem\n      flex\n      alignItems=\"flex-start\"\n      $completed={isCompleted}\n      $lastCompleted={isLastCompleted}\n      width={stepWidth}\n    >\n      <ClickableArea\n        flex\n        data-testid={`step-item-${label}`}\n        direction=\"column\"\n        alignItems=\"center\"\n        onClick={onClick}\n        $isDisabled={isDisabled}\n      >\n        <ProgressIndicator\n          $completed={isCompleted}\n          $currentStep={isCurrentStep}\n          flex\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {isCompleted && (\n            <IconContainer $size={12}>\n              <FontAwesomeIcon\n                icon={faCheck}\n                color={theme.color.surface.base['000']}\n              />\n            </IconContainer>\n          )}\n        </ProgressIndicator>\n        <StyledText typo=\"caption\">{label}</StyledText>\n      </ClickableArea>\n      {isCompleted && !isLastItem && <CompletedBar />}\n    </ProgressItem>\n  )\n}\n\ninterface StyledComponentProps {\n  $completed?: boolean\n  $lastCompleted?: boolean\n  $currentStep?: boolean\n  $isDisabled?: boolean\n  $completedStep?: boolean\n}\n\nconst lastCompleted = css`\n  border-radius: 0 100px 100px 0;\n\n  &:first-child {\n    border-radius: 100px;\n  }\n`\n\nconst borderRadiusCss = css<StyledComponentProps>`\n  &:first-child {\n    border-radius: 100px 0 0 100px;\n  }\n\n  ${({ $lastCompleted }) => $lastCompleted && lastCompleted}\n`\n\nconst SimpleItem = styled(Box)<StyledComponentProps>`\n  position: relative;\n  z-index: 1;\n  ${borderRadiusCss}\n\n  background: ${({ $completed, theme }) =>\n    $completed ? theme.color.feedback.positive[200] : 'none'};\n`\n\nconst ProgressItem = styled(Box)<StyledComponentProps>`\n  position: relative;\n  z-index: 1;\n  top: 9px;\n  left: -10px;\n\n  &:last-child {\n    width: auto;\n  }\n`\nconst ClickableArea = styled(Box)<StyledComponentProps>`\n  position: relative;\n  cursor: ${({ $isDisabled }) => ($isDisabled ? 'auto' : 'pointer')};\n`\n\nconst ProgressIndicator = styled(Box)<StyledComponentProps>`\n  border-radius: 50%;\n  height: 24px;\n  width: 24px;\n  position: relative;\n  z-index: 1;\n  background: ${({ $completed, $currentStep, theme }) =>\n    $completed || $currentStep\n      ? theme.color.feedback.positive[200]\n      : theme.color.feedback.positive[100]};\n`\n\nconst StyledText = styled(Text)`\n  margin-top: ${({ theme }) => theme.space['025']};\n  font-weight: ${oldTheme.font.weight.medium};\n  white-space: nowrap;\n`\n\nconst CompletedBar = styled(Box)`\n  position: absolute;\n  height: 12px;\n  width: 100%;\n  top: 7px;\n  left: 13px;\n  background: ${({ theme }) => theme.color.feedback.positive[200]};\n  z-index: 0;\n`\n"]}

package/dist/PromoCard/PromoCard.js

@@ -28,7 +28,7 @@ const toButtonProps = ({ variant, disabled, loading }, defaultVariant) => {
  *
  * @see https://www.figma.com/design/FqSaizGOyOzXFZNmZ4X0LGMn/%F0%9F%A7%B1-S-mores-components?node-id=33734-3198
  */
-export const PromoCard = ({ title, body, imagePosition = 'left', backgroundColor = 'custard', illustration, primaryButton, secondaryButton, className, ...marginProps }) => (_jsxs(Container, { "$imagePosition": imagePosition, "$backgroundColor": backgroundColor, className: className, ...marginProps, children: [illustration && _jsx(IllustrationWrapper, { children: illustration }), _jsxs(Content, { children: [_jsxs(Box, { flex: true, direction: "column", gap: "space.050", children: [_jsx(Text, { typo: "heading-small", children: title }), body && _jsx(Text, { typo: "body-regular", children: body })] }), (primaryButton ?? secondaryButton) && (_jsxs(Box, { flex: true, direction: "row", gap: "space.100", children: [primaryButton && (_jsx(Button, { smallButton: true, handleClick: primaryButton.onClick, ...toButtonProps(primaryButton, 'secondary'), children: primaryButton.label })), secondaryButton && (_jsx(Button, { smallButton: true, handleClick: secondaryButton.onClick, ...toButtonProps(secondaryButton, 'fallbackStyle'), children: secondaryButton.label }))] }))] })] }));
+export const PromoCard = ({ title, body, imagePosition = 'left', backgroundColor = 'custard', illustration, primaryButton, secondaryButton, className, ...marginProps }) => (_jsxs(Container, { $imagePosition: imagePosition, $backgroundColor: backgroundColor, className: className, ...marginProps, children: [illustration && _jsx(IllustrationWrapper, { children: illustration }), _jsxs(Content, { children: [_jsxs(Box, { flex: true, direction: "column", gap: "space.050", children: [_jsx(Text, { typo: "heading-small", children: title }), body && _jsx(Text, { typo: "body-regular", children: body })] }), (primaryButton ?? secondaryButton) && (_jsxs(Box, { flex: true, direction: "row", gap: "space.100", children: [primaryButton && (_jsx(Button, { smallButton: true, handleClick: primaryButton.onClick, ...toButtonProps(primaryButton, 'secondary'), children: primaryButton.label })), secondaryButton && (_jsx(Button, { smallButton: true, handleClick: secondaryButton.onClick, ...toButtonProps(secondaryButton, 'fallbackStyle'), children: secondaryButton.label }))] }))] })] }));
 PromoCard.displayName = 'PromoCard';
 const Container = styled(Box) `
   display: flex;

package/dist/PromoCard/PromoCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCard.js","sourceRoot":"","sources":["../../src/PromoCard/PromoCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\n\nimport { MarginProps } from '../utils/space'\nimport { TransientProps } from '../utils/utilTypes'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { Box } from '../Box'\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\ntype PromoCardButtonVariant = 'secondary' | 'fallbackStyle' | 'tertiary'\n\nexport type PromoCardAction = {\n  label: string\n  onClick: () => void\n  variant?: PromoCardButtonVariant\n  disabled?: boolean\n  loading?: boolean\n}\n\nexport type PromoCardProps = {\n  title: string\n  body?: string\n  imagePosition?: 'left' | 'right'\n  /** Card background, as a theme colour. Defaults to `custard`. */\n  backgroundColor?: ColorTypes\n  illustration?: ReactNode\n  primaryButton?: PromoCardAction\n  secondaryButton?: PromoCardAction\n  className?: string\n} & MarginProps\n\nconst toButtonProps = (\n  { variant, disabled, loading }: PromoCardAction,\n  defaultVariant: PromoCardButtonVariant,\n) => {\n  const resolved = variant ?? defaultVariant\n  return {\n    disabled,\n    loading,\n    secondary: resolved === 'secondary',\n    fallbackStyle: resolved === 'fallbackStyle',\n    textBtn: resolved === 'tertiary',\n  }\n}\n\n/**\n * A small promotional card following the Figma \"PromoCardSmall\" design\n * (S-mores components, node 33734-3198).\n *\n * The card is a horizontal layout containing an optional illustration slot\n * (positioned left or right via `imagePosition`), a heading + body text\n * group, and an optional pair of CTA buttons whose variant, disabled, and\n * loading states are fully controlled by the consumer.\n *\n * **Scope:** this component implements the *small* iteration of PromoCard\n * only. A larger variant (if required) would need to be added separately.\n *\n * @see https://www.figma.com/design/FqSaizGOyOzXFZNmZ4X0LGMn/%F0%9F%A7%B1-S-mores-components?node-id=33734-3198\n */\nexport const PromoCard: FC<PromoCardProps> = ({\n  title,\n  body,\n  imagePosition = 'left',\n  backgroundColor = 'custard',\n  illustration,\n  primaryButton,\n  secondaryButton,\n  className,\n  ...marginProps\n}) => (\n  <Container\n    $imagePosition={imagePosition}\n    $backgroundColor={backgroundColor}\n    className={className}\n    {...marginProps}\n  >\n    {illustration && <IllustrationWrapper>{illustration}</IllustrationWrapper>}\n    <Content>\n      <Box flex direction=\"column\" gap=\"space.050\">\n        <Text typo=\"heading-small\">{title}</Text>\n        {body && <Text typo=\"body-regular\">{body}</Text>}\n      </Box>\n      {(primaryButton ?? secondaryButton) && (\n        <Box flex direction=\"row\" gap=\"space.100\">\n          {primaryButton && (\n            <Button\n              smallButton\n              handleClick={primaryButton.onClick}\n              {...toButtonProps(primaryButton, 'secondary')}\n            >\n              {primaryButton.label}\n            </Button>\n          )}\n          {secondaryButton && (\n            <Button\n              smallButton\n              handleClick={secondaryButton.onClick}\n              {...toButtonProps(secondaryButton, 'fallbackStyle')}\n            >\n              {secondaryButton.label}\n            </Button>\n          )}\n        </Box>\n      )}\n    </Content>\n  </Container>\n)\n\nPromoCard.displayName = 'PromoCard'\n\ntype IContainer = TransientProps<\n  Required<Pick<PromoCardProps, 'imagePosition' | 'backgroundColor'>>\n>\n\nconst Container = styled(Box)<IContainer>`\n  display: flex;\n  flex-direction: ${({ $imagePosition }) =>\n    $imagePosition === 'right' ? 'row-reverse' : 'row'};\n  align-items: flex-end;\n  gap: ${({ theme }) => theme.space[200]};\n  padding: ${({ theme }) => theme.space[200]};\n  background: ${({ theme, $backgroundColor }) =>\n    resolveToThemeColor($backgroundColor, theme)};\n  border-radius: 24px;\n  box-sizing: border-box;\n`\n\nconst Content = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  gap: ${({ theme }) => theme.space[150]};\n  flex: 1;\n  overflow: hidden;\n`\n\nconst IllustrationWrapper = styled(Box)`\n  flex-shrink: 0;\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n"]}
+{"version":3,"file":"PromoCard.js","sourceRoot":"","sources":["../../src/PromoCard/PromoCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\n\nimport { MarginProps } from '../utils/space'\nimport { TransientProps } from '../utils/utilTypes'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { Box } from '../Box'\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\ntype PromoCardButtonVariant = 'secondary' | 'fallbackStyle' | 'tertiary'\n\nexport type PromoCardAction = {\n  label: string\n  onClick: () => void\n  variant?: PromoCardButtonVariant\n  disabled?: boolean\n  loading?: boolean\n}\n\nexport type PromoCardProps = {\n  title: string\n  body?: string\n  imagePosition?: 'left' | 'right'\n  /** Card background, as a theme colour. Defaults to `custard`. */\n  backgroundColor?: ColorTypes\n  illustration?: ReactNode\n  primaryButton?: PromoCardAction\n  secondaryButton?: PromoCardAction\n  className?: string\n} & MarginProps\n\nconst toButtonProps = (\n  { variant, disabled, loading }: PromoCardAction,\n  defaultVariant: PromoCardButtonVariant,\n) => {\n  const resolved = variant ?? defaultVariant\n  return {\n    disabled,\n    loading,\n    secondary: resolved === 'secondary',\n    fallbackStyle: resolved === 'fallbackStyle',\n    textBtn: resolved === 'tertiary',\n  }\n}\n\n/**\n * A small promotional card following the Figma \"PromoCardSmall\" design\n * (S-mores components, node 33734-3198).\n *\n * The card is a horizontal layout containing an optional illustration slot\n * (positioned left or right via `imagePosition`), a heading + body text\n * group, and an optional pair of CTA buttons whose variant, disabled, and\n * loading states are fully controlled by the consumer.\n *\n * **Scope:** this component implements the *small* iteration of PromoCard\n * only. A larger variant (if required) would need to be added separately.\n *\n * @see https://www.figma.com/design/FqSaizGOyOzXFZNmZ4X0LGMn/%F0%9F%A7%B1-S-mores-components?node-id=33734-3198\n */\nexport const PromoCard: FC<PromoCardProps> = ({\n  title,\n  body,\n  imagePosition = 'left',\n  backgroundColor = 'custard',\n  illustration,\n  primaryButton,\n  secondaryButton,\n  className,\n  ...marginProps\n}) => (\n  <Container\n    $imagePosition={imagePosition}\n    $backgroundColor={backgroundColor}\n    className={className}\n    {...marginProps}\n  >\n    {illustration && <IllustrationWrapper>{illustration}</IllustrationWrapper>}\n    <Content>\n      <Box flex direction=\"column\" gap=\"space.050\">\n        <Text typo=\"heading-small\">{title}</Text>\n        {body && <Text typo=\"body-regular\">{body}</Text>}\n      </Box>\n      {(primaryButton ?? secondaryButton) && (\n        <Box flex direction=\"row\" gap=\"space.100\">\n          {primaryButton && (\n            <Button\n              smallButton\n              handleClick={primaryButton.onClick}\n              {...toButtonProps(primaryButton, 'secondary')}\n            >\n              {primaryButton.label}\n            </Button>\n          )}\n          {secondaryButton && (\n            <Button\n              smallButton\n              handleClick={secondaryButton.onClick}\n              {...toButtonProps(secondaryButton, 'fallbackStyle')}\n            >\n              {secondaryButton.label}\n            </Button>\n          )}\n        </Box>\n      )}\n    </Content>\n  </Container>\n)\n\nPromoCard.displayName = 'PromoCard'\n\ntype IContainer = TransientProps<\n  Required<Pick<PromoCardProps, 'imagePosition' | 'backgroundColor'>>\n>\n\nconst Container = styled(Box)<IContainer>`\n  display: flex;\n  flex-direction: ${({ $imagePosition }) =>\n    $imagePosition === 'right' ? 'row-reverse' : 'row'};\n  align-items: flex-end;\n  gap: ${({ theme }) => theme.space[200]};\n  padding: ${({ theme }) => theme.space[200]};\n  background: ${({ theme, $backgroundColor }) =>\n    resolveToThemeColor($backgroundColor, theme)};\n  border-radius: 24px;\n  box-sizing: border-box;\n`\n\nconst Content = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  gap: ${({ theme }) => theme.space[150]};\n  flex: 1;\n  overflow: hidden;\n`\n\nconst IllustrationWrapper = styled(Box)`\n  flex-shrink: 0;\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n"]}

package/dist/RadioGroup/RadioElement.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { focusOutline } from '../utils/focusOutline';
 import { visuallyHidden } from '../utils/visuallyHidden';
 import { Box } from '../Box';
 export const RadioElement = forwardRef(function RadioElement({ name, id, value, isDisabled, checked, onChange, onBlur, isError, ...marginProps }, ref) {
-    return (_jsxs(_Fragment, { children: [_jsx(StyledInput, { ref: ref, type: "radio", name: name, id: id, value: `${value}`, checked: checked, onChange: () => onChange(value), onBlur: onBlur, disabled: isDisabled }), _jsx(RadioCircle, { "$isError": isError, "$checked": checked, ...marginProps })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledInput, { ref: ref, type: "radio", name: name, id: id, value: `${value}`, checked: checked, onChange: () => onChange(value), onBlur: onBlur, disabled: isDisabled }), _jsx(RadioCircle, { $isError: isError, $checked: checked, ...marginProps })] }));
 });
 const StyledInput = styled.input `
   ${visuallyHidden}

package/dist/RadioGroup/RadioElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAc5B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,IAAI,EACJ,EAAE,EACF,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,WAAW,EACf,EACD,GAAG;IAEH,OAAO,CACL,8BACE,KAAC,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,EACd,QAAQ,EAAE,UAAU,GACpB,EACF,KAAC,WAAW,gBAAW,OAAO,cAAY,OAAO,KAAM,WAAW,GAAI,IACrE,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,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;;MAE5D,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACxB,QAAQ;IACN,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;IACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;IAEjC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAClC,CAAC,QAAQ;IACT,CAAC,QAAQ;IACT;;0BAEsB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;GAEpD;;IAEC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAClC,QAAQ;IACR,qBACE,QAAQ;QACN,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;QACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAClC,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA","sourcesContent":["import { FocusEvent, forwardRef } from 'react'\nimport styled from 'styled-components'\n\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  isDisabled?: boolean\n} & MarginProps\n\nexport const RadioElement = forwardRef<HTMLInputElement, RadioElementProps>(\n  function RadioElement(\n    {\n      name,\n      id,\n      value,\n      isDisabled,\n      checked,\n      onChange,\n      onBlur,\n      isError,\n      ...marginProps\n    },\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          disabled={isDisabled}\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 }) => theme.color.background['000']};\n  border: 2px solid\n    ${({ $isError, theme }) =>\n      $isError\n        ? theme.color.feedback.negative[200]\n        : theme.color.border.contrast};\n\n  ${({ $checked, $isError, theme }) =>\n    !$checked &&\n    !$isError &&\n    `\n    &:hover {\n      border: 2px solid ${theme.color.surface.base[900]};\n    }\n  `}\n\n  ${({ $checked, $isError, theme }) =>\n    $checked &&\n    `border: 8px solid ${\n      $isError\n        ? theme.color.feedback.negative[200]\n        : theme.color.surface.base[900]\n    };`}\n\n  ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}\n`\n"]}
+{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAc5B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,IAAI,EACJ,EAAE,EACF,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,WAAW,EACf,EACD,GAAG;IAEH,OAAO,CACL,8BACE,KAAC,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,EACd,QAAQ,EAAE,UAAU,GACpB,EACF,KAAC,WAAW,IAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAM,WAAW,GAAI,IACrE,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,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;;MAE5D,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACxB,QAAQ;IACN,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;IACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;IAEjC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAClC,CAAC,QAAQ;IACT,CAAC,QAAQ;IACT;;0BAEsB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;GAEpD;;IAEC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAClC,QAAQ;IACR,qBACE,QAAQ;QACN,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;QACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAClC,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA","sourcesContent":["import { FocusEvent, forwardRef } from 'react'\nimport styled from 'styled-components'\n\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  isDisabled?: boolean\n} & MarginProps\n\nexport const RadioElement = forwardRef<HTMLInputElement, RadioElementProps>(\n  function RadioElement(\n    {\n      name,\n      id,\n      value,\n      isDisabled,\n      checked,\n      onChange,\n      onBlur,\n      isError,\n      ...marginProps\n    },\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          disabled={isDisabled}\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 }) => theme.color.background['000']};\n  border: 2px solid\n    ${({ $isError, theme }) =>\n      $isError\n        ? theme.color.feedback.negative[200]\n        : theme.color.border.contrast};\n\n  ${({ $checked, $isError, theme }) =>\n    !$checked &&\n    !$isError &&\n    `\n    &:hover {\n      border: 2px solid ${theme.color.surface.base[900]};\n    }\n  `}\n\n  ${({ $checked, $isError, theme }) =>\n    $checked &&\n    `border: 8px solid ${\n      $isError\n        ? theme.color.feedback.negative[200]\n        : theme.color.surface.base[900]\n    };`}\n\n  ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}\n`\n"]}

package/dist/RadioGroup/RadioGroup.js

@@ -17,7 +17,7 @@ const RadioGroupComponent = ({ options, onChange, onBlur, value, displayType = '
             },
         };
     });
-    return (_jsx(Fieldset, { renderAsTitle: renderAsTitle, error: error, ...fieldProps, children: _jsx(RadioItemList, { "$displayType": displayType, "$justifyContent": justifyContent, children: options.map((option, index) => {
+    return (_jsx(Fieldset, { renderAsTitle: renderAsTitle, error: error, ...fieldProps, children: _jsx(RadioItemList, { $displayType: displayType, $justifyContent: justifyContent, children: options.map((option, index) => {
                 const isSelected = option.value === value;
                 return (_jsx(RadioItem, { ref: (radioOptionRef) => {
                         optionRefs.current[index] = {

package/dist/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react'\n\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport {\n  BaseValueType,\n  DisplayType,\n  IconPosition,\n  ItemWidth,\n  JustifyContent,\n} from './types'\nimport { TransientProps } from '../utils/utilTypes'\nimport { Icons } from '../Icon'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n  options: Array<{\n    visual?: string\n    icon?: Icons\n    iconPosition?: IconPosition\n    iconComponent?: ReactNode\n    label: string\n    value: Value\n    bodyCopy?: string | ReactElement\n    disabled?: boolean\n  }>\n  justifyContent?: JustifyContent\n  itemWidth?: ItemWidth\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    justifyContent,\n    itemWidth,\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\n        $displayType={displayType}\n        $justifyContent={justifyContent}\n      >\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              iconComponent={option.iconComponent}\n              iconPosition={option.iconPosition}\n              label={option.label}\n              value={option.value}\n              checked={isSelected}\n              // @ts-expect-error TODO: address this type inconsistency in another PR\n              onChange={onChange}\n              onBlur={onBlur}\n              displayType={displayType}\n              isError={error}\n              fallbackStyle={fallbackStyle}\n              bodyCopy={option.bodyCopy}\n              disabled={option.disabled}\n              itemWidth={itemWidth}\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> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null\n\nconst RadioItemList = styled.div<\n  TransientProps<Pick<RadioGroupProps, 'displayType' | 'justifyContent'>>\n>`\n  display: flex;\n  gap: ${ITEM_GAP}px;\n  justify-content: ${({ $justifyContent }) => $justifyContent ?? 'flex-start'};\n\n  ${({ $displayType }) => {\n    switch ($displayType) {\n      case 'horizontal-normal':\n        return `\n        flex-direction: row;\n        align-items: center;\n        `\n      case 'horizontal-card':\n        return `\n          flex-direction: row;\n          flex-wrap: wrap;\n        `\n      default:\n        return 'flex-direction: column;'\n    }\n  }}\n`\n"]}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAKV,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAA;AAEd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAGzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAmCvC,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,cAAc,EACd,SAAS,EACT,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,KAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU,YAClE,KAAC,aAAa,IACZ,YAAY,EAAE,WAAW,EACzB,eAAe,EAAE,cAAc,YAE9B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAA;gBAEzC,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE;wBACtB,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG;4BAC1B,OAAO,EAAE,cAAc;yBACxB,CAAA;oBACH,CAAC,EAED,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,UAAU;oBACnB,uEAAuE;oBACvE,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,EACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,SAAS,IAjBf,GAAG,MAAM,CAAC,KAAK,EAAE,CAkBtB,CACH,CAAA;YACH,CAAC,CAAC,GACY,GACP,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,mBAAmB,CAIhC,CAAA;AAExB,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAE/B;;SAEQ,QAAQ;qBACI,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,IAAI,YAAY;;IAEzE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IACrB,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,mBAAmB;YACtB,OAAO;;;SAGN,CAAA;QACH,KAAK,iBAAiB;YACpB,OAAO;;;SAGN,CAAA;QACH;YACE,OAAO,yBAAyB,CAAA;IACpC,CAAC;AACH,CAAC;CACF,CAAA","sourcesContent":["import {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react'\n\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport {\n  BaseValueType,\n  DisplayType,\n  IconPosition,\n  ItemWidth,\n  JustifyContent,\n} from './types'\nimport { TransientProps } from '../utils/utilTypes'\nimport { Icons } from '../Icon'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n  options: Array<{\n    visual?: string\n    icon?: Icons\n    iconPosition?: IconPosition\n    iconComponent?: ReactNode\n    label: string\n    value: Value\n    bodyCopy?: string | ReactElement\n    disabled?: boolean\n  }>\n  justifyContent?: JustifyContent\n  itemWidth?: ItemWidth\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    justifyContent,\n    itemWidth,\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\n        $displayType={displayType}\n        $justifyContent={justifyContent}\n      >\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              iconComponent={option.iconComponent}\n              iconPosition={option.iconPosition}\n              label={option.label}\n              value={option.value}\n              checked={isSelected}\n              // @ts-expect-error TODO: address this type inconsistency in another PR\n              onChange={onChange}\n              onBlur={onBlur}\n              displayType={displayType}\n              isError={error}\n              fallbackStyle={fallbackStyle}\n              bodyCopy={option.bodyCopy}\n              disabled={option.disabled}\n              itemWidth={itemWidth}\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> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null\n\nconst RadioItemList = styled.div<\n  TransientProps<Pick<RadioGroupProps, 'displayType' | 'justifyContent'>>\n>`\n  display: flex;\n  gap: ${ITEM_GAP}px;\n  justify-content: ${({ $justifyContent }) => $justifyContent ?? 'flex-start'};\n\n  ${({ $displayType }) => {\n    switch ($displayType) {\n      case 'horizontal-normal':\n        return `\n        flex-direction: row;\n        align-items: center;\n        `\n      case 'horizontal-card':\n        return `\n          flex-direction: row;\n          flex-wrap: wrap;\n        `\n      default:\n        return 'flex-direction: column;'\n    }\n  }}\n`\n"]}

package/dist/RadioGroup/RadioItem.js

@@ -11,11 +11,11 @@ import { ITEM_GAP } from './constants';
 import { IconContainer } from '../sharedStyles/shared.styles';
 export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconComponent, iconPosition = 'center', label, value, checked, onChange, onBlur, displayType, isError, fallbackStyle, bodyCopy, disabled, itemWidth, }, ref) {
     const id = useUniqueId();
-    const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": 24, style: {
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { $size: 24, style: {
             display: 'flex',
             justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',
-        }, children: iconComponent })) : icon ? (_jsx(IconWrapper, { "$iconPosition": iconPosition, children: _jsx(Icon, { render: icon, size: 24 }) })) : null;
-    return (_jsxs(Wrapper, { htmlFor: id, checked: checked, "$displayType": displayType, "data-testid": value, "$isError": isError, "$fallbackStyle": fallbackStyle, "$disabled": disabled, "$itemWidth": itemWidth, children: [visual && !icon && (_jsx(VisualWrapper, { children: _jsx(Visual, { "$visualUrl": visual }) })), !visual && iconToRender, _jsxs(Box, { flex: true, alignItems: "center", children: [_jsx(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "space.100", isDisabled: disabled }), _jsxs(Box, { children: [_jsx(RadioText, { "$isError": isError, children: label }), bodyCopy && (_jsx(Box, { children: typeof bodyCopy === 'string' ? (_jsx(Text, { typo: "caption", children: bodyCopy })) : (bodyCopy) }))] })] })] }));
+        }, children: iconComponent })) : icon ? (_jsx(IconWrapper, { $iconPosition: iconPosition, children: _jsx(Icon, { render: icon, size: 24 }) })) : null;
+    return (_jsxs(Wrapper, { htmlFor: id, checked: checked, $displayType: displayType, "data-testid": value, $isError: isError, $fallbackStyle: fallbackStyle, $disabled: disabled, $itemWidth: itemWidth, children: [visual && !icon && (_jsx(VisualWrapper, { children: _jsx(Visual, { $visualUrl: visual }) })), !visual && iconToRender, _jsxs(Box, { flex: true, alignItems: "center", children: [_jsx(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "space.100", isDisabled: disabled }), _jsxs(Box, { children: [_jsx(RadioText, { $isError: isError, children: label }), bodyCopy && (_jsx(Box, { children: typeof bodyCopy === 'string' ? (_jsx(Text, { typo: "caption", children: bodyCopy })) : (bodyCopy) }))] })] })] }));
 });
 const VisualWrapper = styled.div `
   width: 100%;
@@ -53,39 +53,39 @@ const Wrapper = styled.label `
     ${($displayType === 'horizontal-card' ||
     $displayType === 'vertical-card') &&
     css `
-      border-radius: 12px;
-      background-color: ${$fallbackStyle
+        border-radius: 12px;
+        background-color: ${$fallbackStyle
         ? theme.color.surface.base['000']
         : theme.color.surface.base[300]};
-      padding: ${checked ? '10px' : '12px'};
-      border: ${checked &&
+        padding: ${checked ? '10px' : '12px'};
+        border: ${checked &&
         ($isError
             ? `2px solid ${theme.color.feedback.negative[200]}`
             : `2px solid ${theme.color.border.contrast}`)};
 
-      &:hover {
-        ${!$disabled &&
+        &:hover {
+          ${!$disabled &&
         css `
-          background-color: ${$fallbackStyle
+              background-color: ${$fallbackStyle
             ? theme.color.surface.base[100]
             : theme.color.surface.base[400]};
-        `}
-      }
-    `}
+            `}
+        }
+      `}
     ${$displayType === 'horizontal-card' &&
     css `
-      justify-content: center;
-      ${!$itemWidth &&
+        justify-content: center;
+        ${!$itemWidth &&
         css `
-        @media (min-width: 420px) {
-          width: calc(50% - ${ITEM_GAP / 2}px);
-        }
+            @media (min-width: 420px) {
+              width: calc(50% - ${ITEM_GAP / 2}px);
+            }
 
-        @media (min-width: 768px) {
-          width: 201px;
-        }
+            @media (min-width: 768px) {
+              width: 201px;
+            }
+          `}
       `}
-    `}
   width: ${$itemWidth ?? '100%'};
   `}
 `;

package/dist/RadioGroup/RadioItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FocusEvent, forwardRef, ReactNode, type ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\nimport { theme as oldTheme } from '../theme'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype RadioItemProps = {\n  name: string\n  visual?: string\n  icon?: Icons\n  iconComponent?: ReactNode\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 | ReactElement\n  disabled?: boolean\n  itemWidth?: ItemWidth\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n  function RadioItem(\n    {\n      name,\n      visual,\n      icon,\n      iconComponent,\n      iconPosition = 'center',\n      label,\n      value,\n      checked,\n      onChange,\n      onBlur,\n      displayType,\n      isError,\n      fallbackStyle,\n      bodyCopy,\n      disabled,\n      itemWidth,\n    },\n    ref,\n  ) {\n    const id = useUniqueId()\n\n    const iconToRender = iconComponent ? (\n      <IconContainer\n        $size={24}\n        style={{\n          display: 'flex',\n          justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',\n        }}\n      >\n        {iconComponent}\n      </IconContainer>\n    ) : icon ? (\n      <IconWrapper $iconPosition={iconPosition}>\n        <Icon render={icon} size={24} />\n      </IconWrapper>\n    ) : null\n\n    return (\n      <Wrapper\n        htmlFor={id}\n        checked={checked}\n        $displayType={displayType}\n        data-testid={value}\n        $isError={isError}\n        $fallbackStyle={fallbackStyle}\n        $disabled={disabled}\n        $itemWidth={itemWidth}\n      >\n        {visual && !icon && (\n          <VisualWrapper>\n            <Visual $visualUrl={visual} />\n          </VisualWrapper>\n        )}\n        {!visual && iconToRender}\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=\"space.100\"\n            isDisabled={disabled}\n          />\n          <Box>\n            <RadioText $isError={isError}>{label}</RadioText>\n            {bodyCopy && (\n              <Box>\n                {typeof bodyCopy === 'string' ? (\n                  <Text typo=\"caption\">{bodyCopy}</Text>\n                ) : (\n                  bodyCopy\n                )}\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: ${({ theme }) => theme.space[150]};\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; $disabled?: boolean; $itemWidth?: ItemWidth }\n>`\n  display: flex;\n  flex-direction: column;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  ${({\n    $displayType,\n    checked,\n    $isError,\n    $fallbackStyle,\n    $disabled,\n    $itemWidth,\n    theme,\n  }) => css`\n    ${($displayType === 'horizontal-card' ||\n      $displayType === 'vertical-card') &&\n    css`\n      border-radius: 12px;\n      background-color: ${$fallbackStyle\n        ? theme.color.surface.base['000']\n        : theme.color.surface.base[300]};\n      padding: ${checked ? '10px' : '12px'};\n      border: ${checked &&\n      ($isError\n        ? `2px solid ${theme.color.feedback.negative[200]}`\n        : `2px solid ${theme.color.border.contrast}`)};\n\n      &:hover {\n        ${!$disabled &&\n        css`\n          background-color: ${$fallbackStyle\n            ? theme.color.surface.base[100]\n            : theme.color.surface.base[400]};\n        `}\n      }\n    `}\n    ${$displayType === 'horizontal-card' &&\n    css`\n      justify-content: center;\n      ${!$itemWidth &&\n      css`\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  width: ${$itemWidth ?? '100%'};\n  `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n  line-height: 16px;\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ $isError, theme }) =>\n    $isError ? theme.color.feedback.negative[200] : theme.color.text.base};\n  margin-top: ${({ theme }) => theme.space['050']};\n`\n"]}
+{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FocusEvent, forwardRef, ReactNode, type ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\nimport { theme as oldTheme } from '../theme'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype RadioItemProps = {\n  name: string\n  visual?: string\n  icon?: Icons\n  iconComponent?: ReactNode\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 | ReactElement\n  disabled?: boolean\n  itemWidth?: ItemWidth\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n  function RadioItem(\n    {\n      name,\n      visual,\n      icon,\n      iconComponent,\n      iconPosition = 'center',\n      label,\n      value,\n      checked,\n      onChange,\n      onBlur,\n      displayType,\n      isError,\n      fallbackStyle,\n      bodyCopy,\n      disabled,\n      itemWidth,\n    },\n    ref,\n  ) {\n    const id = useUniqueId()\n\n    const iconToRender = iconComponent ? (\n      <IconContainer\n        $size={24}\n        style={{\n          display: 'flex',\n          justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',\n        }}\n      >\n        {iconComponent}\n      </IconContainer>\n    ) : icon ? (\n      <IconWrapper $iconPosition={iconPosition}>\n        <Icon render={icon} size={24} />\n      </IconWrapper>\n    ) : null\n\n    return (\n      <Wrapper\n        htmlFor={id}\n        checked={checked}\n        $displayType={displayType}\n        data-testid={value}\n        $isError={isError}\n        $fallbackStyle={fallbackStyle}\n        $disabled={disabled}\n        $itemWidth={itemWidth}\n      >\n        {visual && !icon && (\n          <VisualWrapper>\n            <Visual $visualUrl={visual} />\n          </VisualWrapper>\n        )}\n        {!visual && iconToRender}\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=\"space.100\"\n            isDisabled={disabled}\n          />\n          <Box>\n            <RadioText $isError={isError}>{label}</RadioText>\n            {bodyCopy && (\n              <Box>\n                {typeof bodyCopy === 'string' ? (\n                  <Text typo=\"caption\">{bodyCopy}</Text>\n                ) : (\n                  bodyCopy\n                )}\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: ${({ theme }) => theme.space[150]};\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; $disabled?: boolean; $itemWidth?: ItemWidth }\n>`\n  display: flex;\n  flex-direction: column;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  ${({\n    $displayType,\n    checked,\n    $isError,\n    $fallbackStyle,\n    $disabled,\n    $itemWidth,\n    theme,\n  }) => css`\n    ${\n      ($displayType === 'horizontal-card' ||\n        $displayType === 'vertical-card') &&\n      css`\n        border-radius: 12px;\n        background-color: ${\n          $fallbackStyle\n            ? theme.color.surface.base['000']\n            : theme.color.surface.base[300]\n        };\n        padding: ${checked ? '10px' : '12px'};\n        border: ${\n          checked &&\n          ($isError\n            ? `2px solid ${theme.color.feedback.negative[200]}`\n            : `2px solid ${theme.color.border.contrast}`)\n        };\n\n        &:hover {\n          ${\n            !$disabled &&\n            css`\n              background-color: ${\n                $fallbackStyle\n                  ? theme.color.surface.base[100]\n                  : theme.color.surface.base[400]\n              };\n            `\n          }\n        }\n      `\n    }\n    ${\n      $displayType === 'horizontal-card' &&\n      css`\n        justify-content: center;\n        ${\n          !$itemWidth &&\n          css`\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    }\n  width: ${$itemWidth ?? '100%'};\n  `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n  line-height: 16px;\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ $isError, theme }) =>\n    $isError ? theme.color.feedback.negative[200] : theme.color.text.base};\n  margin-top: ${({ theme }) => theme.space['050']};\n`\n"]}

package/dist/RadioGroup/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/RadioGroup/types.ts"],"names":[],"mappings":"","sourcesContent":["export type IconPosition = 'center' | 'start'\n\n/**\n * Defines the display type for the RadioGroup component.\n *\n * @remarks\n * An additional type 'horizontal-normal' represents a temporary solution implemented to quickly support\n * design requirements without introducing breaking changes. In the long term,\n * a refactor of the RadioGroup component is planned to provide more flexible\n * display options in a more maintainable way.\n * Ref ticket: https://marshmallow1.atlassian.net/browse/CLM-1509\n *\n */\nexport type DisplayType =\n  | 'normal'\n  | 'horizontal-normal'\n  | 'vertical-card'\n  | 'horizontal-card'\n\nexport type BaseValueType = string | boolean | null\n\nexport type JustifyContent =\n  | 'center'\n  | 'flex-end'\n  | 'flex-start'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly'\n\nexport type ItemWidth =\n  | `${number}${'px' | 'em' | 'rem' | '%' | 'vw' | 'vh'}`\n  | 'fit-content'\n  | 'min-content'\n  | 'max-content'\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/RadioGroup/types.ts"],"names":[],"mappings":"","sourcesContent":["export type IconPosition = 'center' | 'start'\n\n/**\n * Defines the display type for the RadioGroup component.\n *\n * @remarks\n * An additional type 'horizontal-normal' represents a temporary solution implemented to quickly support\n * design requirements without introducing breaking changes. In the long term,\n * a refactor of the RadioGroup component is planned to provide more flexible\n * display options in a more maintainable way.\n * Ref ticket: https://marshmallow1.atlassian.net/browse/CLM-1509\n *\n */\nexport type DisplayType =\n  'normal' | 'horizontal-normal' | 'vertical-card' | 'horizontal-card'\n\nexport type BaseValueType = string | boolean | null\n\nexport type JustifyContent =\n  | 'center'\n  | 'flex-end'\n  | 'flex-start'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly'\n\nexport type ItemWidth =\n  | `${number}${'px' | 'em' | 'rem' | '%' | 'vw' | 'vh'}`\n  | 'fit-content'\n  | 'min-content'\n  | 'max-content'\n"]}

package/dist/RichText/RichText.js

@@ -9,7 +9,7 @@ import { IconContainer } from '../sharedStyles/shared.styles';
 export const RichText = forwardRef(function RichText({ htmlString, ...props }, ref) {
     const sanitisedHtml = domPurify.sanitize(htmlString);
     if (!domPurify.isSupported) {
-        return (_jsxs(Box, { ...props, children: [_jsxs(WarningText, { children: [_jsx(IconContainer, { "$size": 24, children: _jsx(FontAwesomeIcon, { icon: faWarning }) }), "Your browser is not supported, please upgrade to a newer version"] }), htmlString] }));
+        return (_jsxs(Box, { ...props, children: [_jsxs(WarningText, { children: [_jsx(IconContainer, { $size: 24, children: _jsx(FontAwesomeIcon, { icon: faWarning }) }), "Your browser is not supported, please upgrade to a newer version"] }), htmlString] }));
     }
     else {
         return (_jsx(HtmlBox, { ref: ref, ...props, dangerouslySetInnerHTML: { __html: sanitisedHtml } }));

package/dist/RichText/RichText.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../src/RichText/RichText.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAA;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAM7D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAAE,UAAU,EAAE,GAAG,KAAK,EAAiB,EACvC,GAAiC;IAEjC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;IAEpD,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;QAC3B,OAAO,CACL,MAAC,GAAG,OAAK,KAAK,aACZ,MAAC,WAAW,eACV,KAAC,aAAa,aAAQ,EAAE,YACtB,KAAC,eAAe,IAAC,IAAI,EAAE,SAAS,GAAI,GACtB,wEAEJ,EACb,UAAU,IACP,CACP,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,CACL,KAAC,OAAO,IACN,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAClD,CACH,CAAA;IACH,CAAC;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;sBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;aAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;SAKnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;mBACrB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;CACjD,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI1B,CAAA","sourcesContent":["import domPurify from 'dompurify'\nimport { ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faWarning } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport interface RichTextProps extends MarginProps {\n  htmlString: string\n}\n\nexport const RichText = forwardRef(function RichText(\n  { htmlString, ...props }: RichTextProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const sanitisedHtml = domPurify.sanitize(htmlString)\n\n  if (!domPurify.isSupported) {\n    return (\n      <Box {...props}>\n        <WarningText>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faWarning} />\n          </IconContainer>\n          Your browser is not supported, please upgrade to a newer version\n        </WarningText>\n        {htmlString}\n      </Box>\n    )\n  } else {\n    return (\n      <HtmlBox\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{ __html: sanitisedHtml }}\n      />\n    )\n  }\n})\n\nconst WarningText = styled(Box)`\n  background-color: ${({ theme }) => theme.color.feedback.negative[200]};\n  padding: ${({ theme }) => theme.space[200]};\n  border-radius: 16px;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.space[200]};\n  margin-bottom: ${({ theme }) => theme.space[200]};\n`\n\nconst HtmlBox = styled(Box)`\n  * {\n    all: revert;\n  }\n`\n"]}
+{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../src/RichText/RichText.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAA;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAM7D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAAE,UAAU,EAAE,GAAG,KAAK,EAAiB,EACvC,GAAiC;IAEjC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;IAEpD,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;QAC3B,OAAO,CACL,MAAC,GAAG,OAAK,KAAK,aACZ,MAAC,WAAW,eACV,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,YACtB,KAAC,eAAe,IAAC,IAAI,EAAE,SAAS,GAAI,GACtB,wEAEJ,EACb,UAAU,IACP,CACP,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,CACL,KAAC,OAAO,IACN,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAClD,CACH,CAAA;IACH,CAAC;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;sBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;aAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;SAKnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;mBACrB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;CACjD,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI1B,CAAA","sourcesContent":["import domPurify from 'dompurify'\nimport { ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faWarning } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport interface RichTextProps extends MarginProps {\n  htmlString: string\n}\n\nexport const RichText = forwardRef(function RichText(\n  { htmlString, ...props }: RichTextProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const sanitisedHtml = domPurify.sanitize(htmlString)\n\n  if (!domPurify.isSupported) {\n    return (\n      <Box {...props}>\n        <WarningText>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faWarning} />\n          </IconContainer>\n          Your browser is not supported, please upgrade to a newer version\n        </WarningText>\n        {htmlString}\n      </Box>\n    )\n  } else {\n    return (\n      <HtmlBox\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{ __html: sanitisedHtml }}\n      />\n    )\n  }\n})\n\nconst WarningText = styled(Box)`\n  background-color: ${({ theme }) => theme.color.feedback.negative[200]};\n  padding: ${({ theme }) => theme.space[200]};\n  border-radius: 16px;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.space[200]};\n  margin-bottom: ${({ theme }) => theme.space[200]};\n`\n\nconst HtmlBox = styled(Box)`\n  * {\n    all: revert;\n  }\n`\n"]}

package/dist/RichTextEditor/RichTextEditor.js

@@ -35,7 +35,7 @@ export const RichTextEditor = ({ defaultValue, height, outline = false, maxHeigh
     const initialConfig = {
         editorState: defaultEditorState,
         namespace: 'MarshmallowRichTextEditor',
-        onError: (e) => console.log(e),
+        onError: (e) => console.error(e),
         nodes: [
             AutoLinkNode,
             LinkNode,
@@ -47,7 +47,7 @@ export const RichTextEditor = ({ defaultValue, height, outline = false, maxHeigh
             CodeNode,
         ],
     };
-    return (_jsx(Container, { "$outline": outline, ...props, children: _jsx(Editor, { "$maxHeight": maxHeight, "$height": height, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(ToolbarPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "editor-input" }), placeholder: _jsx("div", {}), ErrorBoundary: LexicalErrorBoundary }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HistoryPlugin, {}), _jsx(CustomAutoLinkPlugin, {}), _jsx(CodeHighlightPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(EditorUpdatePlugin, { onChange: onChange }), _jsx(EditorDefaultUpdatePlugin, { defaultValue: defaultValue })] }) }) }));
+    return (_jsx(Container, { $outline: outline, ...props, children: _jsx(Editor, { $maxHeight: maxHeight, $height: height, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(ToolbarPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "editor-input" }), placeholder: _jsx("div", {}), ErrorBoundary: LexicalErrorBoundary }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HistoryPlugin, {}), _jsx(CustomAutoLinkPlugin, {}), _jsx(CodeHighlightPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(EditorUpdatePlugin, { onChange: onChange }), _jsx(EditorDefaultUpdatePlugin, { defaultValue: defaultValue })] }) }) }));
 };
 const Editor = styled(Box) `
   .editor-input {

package/dist/RichTextEditor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CodeHighlightNode, CodeNode } from '@lexical/code-core'\nimport { $generateNodesFromDOM } from '@lexical/html'\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\nimport { ListItemNode, ListNode } from '@lexical/list'\nimport { TRANSFORMERS } from '@lexical/markdown'\nimport { LexicalComposer } from '@lexical/react/LexicalComposer'\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable'\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin'\nimport { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport DOMPurify from 'dompurify'\nimport { $getRoot, LexicalEditor } from 'lexical'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport CustomAutoLinkPlugin from './plugins/AutoLinkPlugin'\nimport { CodeHighlightPlugin } from './plugins/CodeHighlightPlugin'\nimport { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin'\nimport { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin'\nimport ToolbarPlugin from './plugins/ToolbarPlugin'\nimport { appendNodes } from './utils'\n\nexport interface RichTextEditorProps extends MarginProps {\n  defaultValue?: string\n  maxHeight?: string\n  height?: string\n  outline?: boolean\n  onChange: (e: string) => void\n}\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n  defaultValue,\n  height,\n  outline = false,\n  maxHeight = '300px',\n  onChange,\n  ...props\n}) => {\n  const defaultEditorState = (editor: LexicalEditor) => {\n    const parser = new DOMParser()\n    const dom = parser.parseFromString(\n      defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>',\n      'text/html',\n    )\n    const nodes = $generateNodesFromDOM(editor, dom)\n    const root = $getRoot()\n    root.clear()\n\n    appendNodes(root, nodes)\n  }\n\n  const initialConfig = {\n    editorState: defaultEditorState,\n    namespace: 'MarshmallowRichTextEditor',\n    onError: (e: Error) => console.log(e),\n    nodes: [\n      AutoLinkNode,\n      LinkNode,\n      ListNode,\n      ListItemNode,\n      HeadingNode,\n      QuoteNode,\n      CodeHighlightNode,\n      CodeNode,\n    ],\n  }\n\n  return (\n    <Container $outline={outline} {...props}>\n      <Editor $maxHeight={maxHeight} $height={height}>\n        <LexicalComposer initialConfig={initialConfig}>\n          <ToolbarPlugin />\n          <RichTextPlugin\n            contentEditable={<ContentEditable className=\"editor-input\" />}\n            placeholder={<div></div>}\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n          <LinkPlugin />\n          <ListPlugin />\n          <HistoryPlugin />\n          <CustomAutoLinkPlugin />\n          <CodeHighlightPlugin />\n          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />\n          <EditorUpdatePlugin onChange={onChange} />\n          <EditorDefaultUpdatePlugin defaultValue={defaultValue} />\n        </LexicalComposer>\n      </Editor>\n    </Container>\n  )\n}\n\nconst Editor = styled(Box)<{ $maxHeight: string; $height?: string }>`\n  .editor-input {\n    margin-top: ${({ theme }) => theme.space[150]};\n    background-color: ${({ theme }) => theme.color.background['000']};\n    border-radius: 12px;\n    border: 2px solid ${({ theme }) => theme.color.surface.base[400]};\n    padding: ${({ theme }) => theme.space[200]};\n    overflow: scroll;\n    outline-color: ${({ theme }) => theme.color.border.base};\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    ${({ $height }) => $height && `height: ${$height}`};\n    min-height: 84px;\n\n    * {\n      all: revert;\n      outline: none;\n    }\n  }\n`\n\nconst Container = styled(Box)<{ $outline: boolean }>`\n  background-color: ${({ theme }) => theme.color.background[100]};\n  border-radius: 16px;\n  padding: ${({ theme }) => theme.space[150]};\n  ${({ $outline, theme }) =>\n    $outline && `border: 2px solid ${theme.color.surface.base[400]}`}\n`\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CodeHighlightNode, CodeNode } from '@lexical/code-core'\nimport { $generateNodesFromDOM } from '@lexical/html'\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\nimport { ListItemNode, ListNode } from '@lexical/list'\nimport { TRANSFORMERS } from '@lexical/markdown'\nimport { LexicalComposer } from '@lexical/react/LexicalComposer'\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable'\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin'\nimport { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport DOMPurify from 'dompurify'\nimport { $getRoot, LexicalEditor } from 'lexical'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport CustomAutoLinkPlugin from './plugins/AutoLinkPlugin'\nimport { CodeHighlightPlugin } from './plugins/CodeHighlightPlugin'\nimport { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin'\nimport { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin'\nimport ToolbarPlugin from './plugins/ToolbarPlugin'\nimport { appendNodes } from './utils'\n\nexport interface RichTextEditorProps extends MarginProps {\n  defaultValue?: string\n  maxHeight?: string\n  height?: string\n  outline?: boolean\n  onChange: (e: string) => void\n}\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n  defaultValue,\n  height,\n  outline = false,\n  maxHeight = '300px',\n  onChange,\n  ...props\n}) => {\n  const defaultEditorState = (editor: LexicalEditor) => {\n    const parser = new DOMParser()\n    const dom = parser.parseFromString(\n      defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>',\n      'text/html',\n    )\n    const nodes = $generateNodesFromDOM(editor, dom)\n    const root = $getRoot()\n    root.clear()\n\n    appendNodes(root, nodes)\n  }\n\n  const initialConfig = {\n    editorState: defaultEditorState,\n    namespace: 'MarshmallowRichTextEditor',\n    onError: (e: Error) => console.error(e),\n    nodes: [\n      AutoLinkNode,\n      LinkNode,\n      ListNode,\n      ListItemNode,\n      HeadingNode,\n      QuoteNode,\n      CodeHighlightNode,\n      CodeNode,\n    ],\n  }\n\n  return (\n    <Container $outline={outline} {...props}>\n      <Editor $maxHeight={maxHeight} $height={height}>\n        <LexicalComposer initialConfig={initialConfig}>\n          <ToolbarPlugin />\n          <RichTextPlugin\n            contentEditable={<ContentEditable className=\"editor-input\" />}\n            placeholder={<div></div>}\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n          <LinkPlugin />\n          <ListPlugin />\n          <HistoryPlugin />\n          <CustomAutoLinkPlugin />\n          <CodeHighlightPlugin />\n          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />\n          <EditorUpdatePlugin onChange={onChange} />\n          <EditorDefaultUpdatePlugin defaultValue={defaultValue} />\n        </LexicalComposer>\n      </Editor>\n    </Container>\n  )\n}\n\nconst Editor = styled(Box)<{ $maxHeight: string; $height?: string }>`\n  .editor-input {\n    margin-top: ${({ theme }) => theme.space[150]};\n    background-color: ${({ theme }) => theme.color.background['000']};\n    border-radius: 12px;\n    border: 2px solid ${({ theme }) => theme.color.surface.base[400]};\n    padding: ${({ theme }) => theme.space[200]};\n    overflow: scroll;\n    outline-color: ${({ theme }) => theme.color.border.base};\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    ${({ $height }) => $height && `height: ${$height}`};\n    min-height: 84px;\n\n    * {\n      all: revert;\n      outline: none;\n    }\n  }\n`\n\nconst Container = styled(Box)<{ $outline: boolean }>`\n  background-color: ${({ theme }) => theme.color.background[100]};\n  border-radius: 16px;\n  padding: ${({ theme }) => theme.space[150]};\n  ${({ $outline, theme }) =>\n    $outline && `border: 2px solid ${theme.color.surface.base[400]}`}\n`\n"]}