@mrshmllw/smores-react 6.0.1 → 6.0.3

package/dist/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Icon } from '../Icon'\n\nimport { theme } from '../theme'\nimport { MarginProps } from '../utils/space'\nimport { focusOutlineStyle } from '../utils/focusOutline'\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          firstPage={true}\n          onClick={() => movePage(activePage - 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(activePage - 1)\n            }\n          }}\n        >\n          <Icon size={18} render=\"arrow\" />\n        </IconBox>\n      )}\n      <PageBox active={activePage === 1} onClick={() => movePage(1)}>\n        <Text typo={activePage === 1 ? 'desc-medium' : 'desc-light'} tag=\"p\">\n          1\n        </Text>\n      </PageBox>\n      {showFirstDots && (\n        <PageBox>\n          <Text tag=\"p\">...</Text>\n        </PageBox>\n      )}\n      {shownPages.map((i) => {\n        return (\n          <PageBox\n            active={activePage === i}\n            key={i}\n            onClick={() => movePage(i)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                movePage(i)\n              }\n            }}\n          >\n            <Text\n              typo={activePage === i ? 'desc-medium' : 'desc-light'}\n              tag=\"p\"\n            >\n              {i}\n            </Text>\n          </PageBox>\n        )\n      })}\n      {showLastDots && (\n        <PageBox>\n          <Text tag=\"p\">...</Text>\n        </PageBox>\n      )}\n      {Boolean(lastPage) && (\n        <PageBox\n          active={activePage === lastPage}\n          onClick={() => movePage(lastPage)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(lastPage)\n            }\n          }}\n        >\n          <Text\n            typo={activePage === lastPage ? 'desc-medium' : 'desc-light'}\n            tag=\"p\"\n          >\n            {lastPage}\n          </Text>\n        </PageBox>\n      )}\n      {activePage + 1 <= lastPage && (\n        <IconBox\n          onClick={() => movePage(activePage + 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              movePage(activePage + 1)\n            }\n          }}\n        >\n          <Icon size={18} render=\"arrow\" rotate={180} />\n        </IconBox>\n      )}\n    </Container>\n  )\n}\n\ninterface IPageBox {\n  active?: boolean\n  firstPage?: boolean\n}\n\nconst Container = styled(Box)`\n  align-items: center;\n  > button {\n    margin-right: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst PageBox = styled.button<IPageBox>`\n  background: ${({ active }) =>\n    active ? theme.colors.custard : theme.colors.cream};\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background-color: ${theme.colors.mascarpone};\n  }\n  &:active {\n    background-color: ${theme.colors.custard};\n  }\n\n  ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n  cursor: pointer;\n\n  ${focusOutlineStyle}\n`\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,SAAY,GAAA,CAAA,CAAA;AAClB,MAAM,oBAAuB,GAAA,IAAA,CAAK,IAAK,CAAA,SAAA,GAAY,CAAC,CAAA,CAAA;AAa7C,MAAM,aAAkC,CAAC;AAAA,EAC9C,KAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA,CAAA;AACzD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACxD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AAGd,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,aAAA,CAAc,WAAW,CAAA,CAAA;AAAA,KACpB,MAAA;AACL,MAAA,aAAA,CAAc,CAAC,CAAA,CAAA;AAAA,KACjB;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,WAAW,CAAC,CAAA,CAAA;AAE1B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,IAAK,CAAA,KAAA,GAAQ,SAAS,CAAA,CAAA;AACjD,IAAA,IAAI,gBAAgB,CAAG,EAAA;AACrB,MAAA,WAAA,CAAY,aAAa,CAAA,CAAA;AAAA,KAC3B,MAAA,IAAW,kBAAkB,CAAG,EAAA;AAE9B,MAAA,WAAA,CAAY,CAAC,CAAA,CAAA;AAAA,KACf;AACA,IAAA,IAAI,gBAAgB,CAAG,EAAA;AACrB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,IAAA,CAAK,EAAE,MAAA,EAAQ,aAAc,EAAA,EAAG,CAAC,CAAA,EAAG,CAAM,KAAA,CAAA,GAAI,CAAC,CAAA,CAAA;AACtE,MAAA,QAAA,CAAS,QAAS,CAAA,KAAA,CAAM,CAAG,EAAA,aAAA,GAAgB,CAAC,CAAC,CAAA,CAAA;AAAA,KACxC,MAAA;AAEL,MAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAAA,KACb;AAAA,GACC,EAAA,CAAC,KAAO,EAAA,SAAS,CAAC,CAAA,CAAA;AAErB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAY,SAAW,EAAA;AACzB,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,KACrB,MAAA,IAAW,cAAc,oBAAsB,EAAA;AAC7C,MAAA,aAAA,CAAc,KAAM,CAAA,KAAA,CAAM,CAAG,EAAA,oBAAoB,CAAC,CAAA,CAAA;AAAA,KACpD,MAAA,IAAW,UAAa,GAAA,QAAA,GAAW,oBAAsB,EAAA;AACvD,MAAA,aAAA,CAAc,KAAM,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,GAAS,oBAAoB,CAAC,CAAA,CAAA;AAAA,KACzD,MAAA;AACL,MAAM,MAAA,eAAA,GAAkB,KAAM,CAAA,OAAA,CAAQ,UAAU,CAAA,CAAA;AAChD,MAAA,aAAA,CAAc,MAAM,KAAM,CAAA,eAAA,GAAkB,CAAG,EAAA,eAAA,GAAkB,CAAC,CAAC,CAAA,CAAA;AAAA,KACrE;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,KAAK,CAAC,CAAA,CAAA;AAEhC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,UAAW,CAAA,CAAC,CAAM,KAAA,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AAC3C,IAAA,eAAA;AAAA,MACE,UAAA,CAAW,WAAW,MAAS,GAAA,CAAC,MAAM,KAAM,CAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAAA,KAC9D,CAAA;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,KAAK,CAAC,CAAA,CAAA;AAEtB,EAAM,MAAA,QAAA,GAAW,CAAC,IAAiB,KAAA;AACjC,IAAI,IAAA,IAAA,GAAO,CAAK,IAAA,IAAA,IAAQ,QAAU,EAAA;AAChC,MAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAClB,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACF,CAAA;AAEA,EAAA,4BACG,SAAU,EAAA,EAAA,IAAA,EAAI,MAAC,SAAU,EAAA,KAAA,EAAO,GAAG,WACjC,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA,GAAa,IAAI,CAChB,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,QACX,OAAS,EAAA,MAAM,QAAS,CAAA,UAAA,GAAa,CAAC,CAAA;AAAA,QACtC,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,UAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,YAAA,QAAA,CAAS,aAAa,CAAC,CAAA,CAAA;AAAA,WACzB;AAAA,SACF;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAI,QAAO,OAAQ,EAAA,CAAA;AAAA,OAAA;AAAA,KACjC;AAAA,oBAEF,GAAA,CAAC,WAAQ,MAAQ,EAAA,UAAA,KAAe,GAAG,OAAS,EAAA,MAAM,SAAS,CAAC,CAAA,EAC1D,8BAAC,IAAK,EAAA,EAAA,IAAA,EAAM,eAAe,CAAI,GAAA,aAAA,GAAgB,cAAc,GAAI,EAAA,GAAA,EAAI,eAErE,CACF,EAAA,CAAA;AAAA,IACC,aAAA,wBACE,OACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,GAAI,EAAA,GAAA,EAAI,iBAAG,CACnB,EAAA,CAAA;AAAA,IAED,UAAA,CAAW,GAAI,CAAA,CAAC,CAAM,KAAA;AACrB,MACE,uBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,QAAQ,UAAe,KAAA,CAAA;AAAA,UAEvB,OAAA,EAAS,MAAM,QAAA,CAAS,CAAC,CAAA;AAAA,UACzB,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,YAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,cAAA,QAAA,CAAS,CAAC,CAAA,CAAA;AAAA,aACZ;AAAA,WACF;AAAA,UAEA,QAAA,kBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,UAAe,KAAA,CAAA,GAAI,aAAgB,GAAA,YAAA;AAAA,cACzC,GAAI,EAAA,GAAA;AAAA,cAEH,QAAA,EAAA,CAAA;AAAA,aAAA;AAAA,WACH;AAAA,SAAA;AAAA,QAbK,CAAA;AAAA,OAcP,CAAA;AAAA,KAEH,CAAA;AAAA,IACA,YAAA,wBACE,OACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,GAAI,EAAA,GAAA,EAAI,iBAAG,CACnB,EAAA,CAAA;AAAA,IAED,OAAA,CAAQ,QAAQ,CACf,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAQ,UAAe,KAAA,QAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,QAAQ,CAAA;AAAA,QAChC,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,UAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,YAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,WACnB;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,UAAe,KAAA,QAAA,GAAW,aAAgB,GAAA,YAAA;AAAA,YAChD,GAAI,EAAA,GAAA;AAAA,YAEH,QAAA,EAAA,QAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KACF;AAAA,IAED,UAAA,GAAa,KAAK,QACjB,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,MAAM,QAAS,CAAA,UAAA,GAAa,CAAC,CAAA;AAAA,QACtC,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,UAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,YAAA,QAAA,CAAS,aAAa,CAAC,CAAA,CAAA;AAAA,WACzB;AAAA,SACF;AAAA,QAEA,8BAAC,IAAK,EAAA,EAAA,IAAA,EAAM,IAAI,MAAO,EAAA,OAAA,EAAQ,QAAQ,GAAK,EAAA,CAAA;AAAA,OAAA;AAAA,KAC9C;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ,EAAA;AAOA,MAAM,SAAA,GAAY,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAW5B,MAAM,UAAU,MAAO,CAAA,MAAA,CAAA;AAAA,cACP,EAAA,CAAC,EAAE,MAAA,EACf,KAAA,MAAA,GAAS,MAAM,MAAO,CAAA,OAAA,GAAU,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAS9B,EAAA,KAAA,CAAM,OAAO,UAAU,CAAA;AAAA;AAAA;AAAA,sBAGvB,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA,EAAA,EAGxC,iBAAiB,CAAA;AAAA,CAAA,CAAA;AAGrB,MAAM,UAAU,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA;AAAA,EAAA,EAGnB,iBAAiB,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}

package/dist/Pagination/index.js

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

package/dist/Pagination/index.js.map

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

package/dist/RadioGroup/RadioElement.js

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

package/dist/RadioGroup/RadioElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioElement.js","sources":["../../src/RadioGroup/RadioElement.tsx"],"sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { visuallyHidden } from '../utils/visuallyHidden'\n\nimport { Box } from '../Box'\nimport { BaseValueType } from './types'\n\ntype RadioElementProps = {\n  name: string\n  id: string\n  value: BaseValueType\n  checked: boolean\n  onChange: (value: BaseValueType) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  isError: boolean\n} & MarginProps\n\nexport const RadioElement = forwardRef<HTMLInputElement, RadioElementProps>(\n  function RadioElement(\n    { name, id, value, checked, onChange, onBlur, isError, ...marginProps },\n    ref,\n  ) {\n    return (\n      <>\n        <StyledInput\n          ref={ref}\n          type=\"radio\"\n          name={name}\n          id={id}\n          value={`${value}`}\n          checked={checked}\n          onChange={() => onChange(value)}\n          onBlur={onBlur}\n        />\n        <RadioCircle isError={isError} checked={checked} {...marginProps} />\n      </>\n    )\n  },\n)\n\nconst StyledInput = styled.input`\n  ${visuallyHidden}\n`\n\nconst RADIO_SIZE = 24\n\nconst RadioCircle = styled(Box)<{ isError: boolean; checked: boolean }>`\n  flex-shrink: 0;\n  width: ${RADIO_SIZE}px;\n  height: ${RADIO_SIZE}px;\n  border-radius: ${RADIO_SIZE}px;\n  background-color: ${theme.colors.cream};\n  border: 2px solid\n    ${({ isError }) =>\n      isError ? theme.colors.strawberry : theme.colors.sesame};\n\n  ${({ checked, isError }) =>\n    !checked &&\n    !isError &&\n    `\n    &:hover {\n      border: 2px solid ${theme.colors.liquorice};\n    }\n  `}\n\n  ${({ checked, isError }) =>\n    checked &&\n    `border: 8px solid ${\n      isError ? theme.colors.strawberry : theme.colors.liquorice\n    };`}\n\n  ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}\n`\n"],"names":["RadioElement"],"mappings":";;;;;;;;AAqBO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,IAAA,EAAM,EAAI,EAAA,KAAA,EAAO,OAAS,EAAA,QAAA,EAAU,MAAQ,EAAA,OAAA,EAAS,GAAG,WAAA,IAC1D,GACA,EAAA;AACA,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,UACL,IAAA;AAAA,UACA,EAAA;AAAA,UACA,KAAA,EAAO,GAAG,KAAK,CAAA,CAAA;AAAA,UACf,OAAA;AAAA,UACA,QAAA,EAAU,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,UAC9B,MAAA;AAAA,SAAA;AAAA,OACF;AAAA,sBACC,GAAA,CAAA,WAAA,EAAA,EAAY,OAAkB,EAAA,OAAA,EAAmB,GAAG,WAAa,EAAA,CAAA;AAAA,KACpE,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,MAAM,cAAc,MAAO,CAAA,KAAA,CAAA;AAAA,EAAA,EACvB,cAAc,CAAA;AAAA,CAAA,CAAA;AAGlB,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,MAAM,WAAA,GAAc,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA,SAAA,EAEnB,UAAU,CAAA;AAAA,UAAA,EACT,UAAU,CAAA;AAAA,iBAAA,EACH,UAAU,CAAA;AAAA,oBACP,EAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AAAA,IAElC,EAAA,CAAC,EAAE,OAAA,EACH,KAAA,OAAA,GAAU,MAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAEzD,EAAA,CAAC,EAAE,OAAS,EAAA,OAAA,OACZ,CAAC,OAAA,IACD,CAAC,OACD,IAAA,CAAA;AAAA;AAAA,wBAEsB,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;AAAA,EAE7C,CAAA,CAAA;AAAA;AAAA,EAAA,EAEC,CAAC,EAAE,OAAS,EAAA,OAAA,OACZ,OACA,IAAA,CAAA,kBAAA,EACE,OAAU,GAAA,KAAA,CAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,SACnD,CAAG,CAAA,CAAA,CAAA;AAAA;AAAA,EAAA,EAEH,aAAa,EAAE,QAAA,EAAU,GAAG,WAAW,CAAA,kBAAA,CAAA,EAAsB,CAAC,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAa5B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,EACvE,GAAG;IAEH,OAAO,CACL;QACE,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,GAAG,KAAK,EAAE,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,GACd;QACF,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAM,WAAW,GAAI,CACnE,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAC5B,cAAc;CACjB,CAAA;AAED,MAAM,UAAU,GAAG,EAAE,CAAA;AAErB,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAwC;;WAE5D,UAAU;YACT,UAAU;mBACH,UAAU;sBACP,KAAK,CAAC,MAAM,CAAC,KAAK;;MAElC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAChB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;IAEzD,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CACzB,CAAC,OAAO;IACR,CAAC,OAAO;IACR;;0BAEsB,KAAK,CAAC,MAAM,CAAC,SAAS;;GAE7C;;IAEC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CACzB,OAAO;IACP,qBACE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SACnD,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA"}

package/dist/RadioGroup/RadioGroup.d.ts

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

package/dist/RadioGroup/RadioGroup.js

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

package/dist/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react'\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { Icons } from 'Icon/iconsList'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport { BaseValueType, DisplayType, IconPosition } from './types'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n  options: Array<{\n    visual?: string\n    icon?: Icons\n    iconPosition?: IconPosition\n    label: string\n    value: Value\n    bodyCopy?: string\n  }>\n  onChange: (value: Value) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  value: Value\n  displayType?: DisplayType\n  fallbackStyle?: boolean\n} & CommonFieldProps\n\nexport type RadioGroupElement = {\n  focus: VoidFunction\n}\n\nconst RadioGroupComponent = <Value extends BaseValueType>(\n  {\n    options,\n    onChange,\n    onBlur,\n    value,\n    displayType = 'normal',\n    renderAsTitle = false,\n    error = false,\n    fallbackStyle = false,\n    ...fieldProps\n  }: RadioGroupProps<Value>,\n  ref: ForwardedRef<RadioGroupElement>,\n) => {\n  const name = useUniqueId()\n\n  const optionRefs = useRef<RefObject<HTMLInputElement>[]>([])\n  useImperativeHandle(ref, () => {\n    return {\n      focus: () => {\n        const selectedIndex = options.findIndex((item) => item.value === value)\n\n        const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex\n        optionRefs.current[elementToFocus].current?.focus()\n      },\n    }\n  })\n\n  return (\n    <Fieldset renderAsTitle={renderAsTitle} error={error} {...fieldProps}>\n      <RadioItemList displayType={displayType}>\n        {options.map((option, index) => {\n          const isSelected = option.value === value\n\n          return (\n            <RadioItem\n              ref={(radioOptionRef) => {\n                optionRefs.current[index] = {\n                  current: radioOptionRef,\n                }\n              }}\n              key={`${option.value}`}\n              name={name}\n              visual={option.visual}\n              icon={option.icon}\n              iconPosition={option.iconPosition}\n              label={option.label}\n              value={option.value}\n              checked={isSelected}\n              onChange={onChange}\n              onBlur={onBlur}\n              displayType={displayType}\n              isError={error}\n              fallbackStyle={fallbackStyle}\n              bodyCopy={option.bodyCopy}\n            />\n          )\n        })}\n      </RadioItemList>\n    </Fieldset>\n  )\n}\n\nexport const RadioGroup = forwardRef(RadioGroupComponent) as <\n  Value extends BaseValueType = BaseValueType,\n>(\n  p: RadioGroupProps<Value> & React.RefAttributes<HTMLInputElement>,\n) => ReactElement | null\n\nconst RadioItemList = styled.div<Pick<RadioGroupProps, 'displayType'>>`\n  display: flex;\n  gap: ${ITEM_GAP}px;\n\n  ${({ displayType }) => {\n    if (displayType === 'horizontal-card') {\n      return `\n        flex-direction: row;\n        flex-wrap: wrap;\n      `\n    }\n\n    return `flex-direction: column;`\n  }}\n`\n"],"names":[],"mappings":";;;;;;;;AAyCA,MAAM,sBAAsB,CAC1B;AAAA,EACE,OAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,QAAA;AAAA,EACd,aAAgB,GAAA,KAAA;AAAA,EAChB,KAAQ,GAAA,KAAA;AAAA,EACR,aAAgB,GAAA,KAAA;AAAA,EAChB,GAAG,UAAA;AACL,CAAA,EACA,GACG,KAAA;AACH,EAAA,MAAM,OAAO,WAAY,EAAA,CAAA;AAEzB,EAAM,MAAA,UAAA,GAAa,MAAsC,CAAA,EAAE,CAAA,CAAA;AAC3D,EAAA,mBAAA,CAAoB,KAAK,MAAM;AAC7B,IAAO,OAAA;AAAA,MACL,OAAO,MAAM;AACX,QAAA,MAAM,gBAAgB,OAAQ,CAAA,SAAA,CAAU,CAAC,IAAS,KAAA,IAAA,CAAK,UAAU,KAAK,CAAA,CAAA;AAEtE,QAAM,MAAA,cAAA,GAAiB,aAAkB,KAAA,CAAA,CAAA,GAAK,CAAI,GAAA,aAAA,CAAA;AAClD,QAAA,UAAA,CAAW,OAAQ,CAAA,cAAc,CAAE,CAAA,OAAA,EAAS,KAAM,EAAA,CAAA;AAAA,OACpD;AAAA,KACF,CAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA,EAAS,aAA8B,EAAA,KAAA,EAAe,GAAG,UAAA,EACxD,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,WACZ,EAAA,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,QAAQ,KAAU,KAAA;AAC9B,IAAM,MAAA,UAAA,GAAa,OAAO,KAAU,KAAA,KAAA,CAAA;AAEpC,IACE,uBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,CAAC,cAAmB,KAAA;AACvB,UAAW,UAAA,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA;AAAA,YAC1B,OAAS,EAAA,cAAA;AAAA,WACX,CAAA;AAAA,SACF;AAAA,QAEA,IAAA;AAAA,QACA,QAAQ,MAAO,CAAA,MAAA;AAAA,QACf,MAAM,MAAO,CAAA,IAAA;AAAA,QACb,cAAc,MAAO,CAAA,YAAA;AAAA,QACrB,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,OAAS,EAAA,UAAA;AAAA,QACT,QAAA;AAAA,QACA,MAAA;AAAA,QACA,WAAA;AAAA,QACA,OAAS,EAAA,KAAA;AAAA,QACT,aAAA;AAAA,QACA,UAAU,MAAO,CAAA,QAAA;AAAA,OAAA;AAAA,MAbZ,CAAA,EAAG,OAAO,KAAK,CAAA,CAAA;AAAA,KActB,CAAA;AAAA,GAEH,GACH,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,WAAW,mBAAmB,EAAA;AAMxD,MAAM,gBAAgB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA,OAAA,EAEpB,QAAQ,CAAA;AAAA;AAAA,EAEb,EAAA,CAAC,EAAE,WAAA,EAAkB,KAAA;AACrB,EAAA,IAAI,gBAAgB,iBAAmB,EAAA;AACrC,IAAO,OAAA,CAAA;AAAA;AAAA;AAAA,MAAA,CAAA,CAAA;AAAA,GAIT;AAEA,EAAO,OAAA,CAAA,uBAAA,CAAA,CAAA;AACT,CAAC,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,UAAU,EAGV,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAIzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAuBvC,MAAM,mBAAmB,GAAG,CAC1B,EACE,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,KAAK,EACb,aAAa,GAAG,KAAK,EACrB,GAAG,UAAU,EACU,EACzB,GAAoC,EACpC,EAAE;IACF,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,MAAM,UAAU,GAAG,MAAM,CAAgC,EAAE,CAAC,CAAA;IAC5D,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,OAAO;YACL,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAA;gBAEvE,MAAM,cAAc,GAAG,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAA;gBAC/D,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,CAAA;YACrD,CAAC;SACF,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU;QAClE,oBAAC,aAAa,IAAC,WAAW,EAAE,WAAW,IACpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAA;YAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE;oBACtB,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG;wBAC1B,OAAO,EAAE,cAAc;qBACxB,CAAA;gBACH,CAAC,EACD,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,KAAK,EACd,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,MAAM,CAAC,QAAQ,GACzB,CACH,CAAA;QACH,CAAC,CAAC,CACY,CACP,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,mBAAmB,CAIhC,CAAA;AAExB,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAsC;;SAE7D,QAAQ;;IAEb,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IACpB,IAAI,WAAW,KAAK,iBAAiB,EAAE,CAAC;QACtC,OAAO;;;OAGN,CAAA;IACH,CAAC;IAED,OAAO,yBAAyB,CAAA;AAClC,CAAC;CACF,CAAA"}

package/dist/RadioGroup/RadioItem.js

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

package/dist/RadioGroup/RadioItem.js.map

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

package/dist/RadioGroup/constants.js

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

package/dist/RadioGroup/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../src/RadioGroup/constants.ts"],"sourcesContent":["export const ITEM_GAP = 12\n"],"names":[],"mappings":"AAAO,MAAM,QAAW,GAAA;;;;"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/RadioGroup/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAA"}

package/dist/RadioGroup/index.js

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

package/dist/RadioGroup/index.js.map

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

package/dist/RadioGroup/types.js

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

package/dist/RadioGroup/types.js.map

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