@mrshmllw/smores-react 13.23.0 → 13.23.2

package/dist/Accordion/Accordion.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
@@ -15,13 +16,7 @@ export const Accordion = ({ title, children, onToggle, filledBackground, default
         onToggle?.(nextOpenState);
         setIsOpen(nextOpenState);
     };
-    return (React.createElement(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": resolvedBorderColor, "$backgroundColor": resolvedBackgroundColour, ...marginProps },
-        React.createElement(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "16px", pr: "16px", pl: px },
-            React.createElement(TitleContainer, null,
-                React.createElement(Text, { tag: "h2", typo: "headline-regular" }, title),
-                subTitle && (React.createElement(Text, { tag: "label", typo: "label", mt: { custom: 4 } }, subTitle))),
-            React.createElement(CaretIcon, { render: "caret", size: 24, color: "color.illustration.neutral.400", "$isOpen": isOpen, "$borderTop": borderTop })),
-        isOpen && (React.createElement(Box, { pt: "12px", pb: "16px", px: px }, children))));
+    return (_jsxs(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": resolvedBorderColor, "$backgroundColor": resolvedBackgroundColour, ...marginProps, children: [_jsxs(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "16px", pr: "16px", pl: px, children: [_jsxs(TitleContainer, { children: [_jsx(Text, { tag: "h2", typo: "headline-regular", children: title }), subTitle && (_jsx(Text, { tag: "label", typo: "label", mt: { custom: 4 }, children: subTitle }))] }), _jsx(CaretIcon, { render: "caret", size: 24, color: "color.illustration.neutral.400", "$isOpen": isOpen, "$borderTop": borderTop })] }), isOpen && (_jsx(Box, { pt: "12px", pb: "16px", px: px, children: children }))] }));
 };
 const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $borderColor, $backgroundColor, }) => css `
     border-bottom: 1px solid ${$borderColor};

package/dist/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAY,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AA4BhF,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC5C,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,gCAAgC,EAC9C,eAAe,GAAG,wBAAwB,EAC1C,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IACnD,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAA;IAEpC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAEnE,MAAM,wBAAwB,GAAG,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC,CAAA;IAE5E,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,aAAa,GAAG,CAAC,MAAM,CAAA;QAC7B,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAA;QACzB,SAAS,CAAC,aAAa,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,OAAO,kBACM,SAAS,iBACR,UAAU,uBACJ,gBAAgB,kBACrB,mBAAmB,sBACf,wBAAwB,KACtC,WAAW;QAEf,oBAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,OAAO,EAAE,YAAY,EACrB,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAE,EAAE;YAEN,oBAAC,cAAc;gBACb,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,kBAAkB,IACnC,KAAK,CACD;gBACN,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAC7C,QAAQ,CACJ,CACR,CACc;YAEjB,oBAAC,SAAS,IACR,MAAM,EAAC,OAAO,EACd,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,gCAAgC,aAC7B,MAAM,gBACH,SAAS,GACrB,CACW;QACd,MAAM,IAAI,CACT,oBAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,IAC5B,QAAQ,CACL,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAKzB,CAAC,EACC,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,EAAE,EAAE,CAAC,GAAG,CAAA;+BACoB,YAAY;MACrC,UAAU,IAAI,yBAAyB,gBAAgB,GAAG;;MAE1D,WAAW;IACb,GAAG,CAAA;0BACmB,YAAY;;KAEjC;;MAEC,iBAAiB;IACnB,GAAG,CAAA;0BACmB,gBAAgB;KACrC;GACF,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGhC,CAAA;AACD,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE/B,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAG5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;iBACL,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;;GAEzD,CACF,CAAA","sourcesContent":["import React, { FC, ReactNode, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype UsableNewColors = Extract<\n  NewColor,\n  | 'color.surface.base.000'\n  | 'color.surface.base.100'\n  | 'color.surface.base.300'\n  | 'color.illustration.neutral.300'\n>\n\nexport type AccordionProps = {\n  title: string\n  subTitle?: string\n  filledBackground?: boolean\n  borderTop?: boolean\n  borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut' | UsableNewColors\n  fullBorder?: boolean\n  backgroundColor?:\n    | 'oatmeal'\n    | 'custard'\n    | 'cream'\n    | 'coconut'\n    | UsableNewColors\n  onToggle?: (isOpen: boolean) => void\n  children: ReactNode\n  defaultIsOpen?: boolean\n} & MarginProps\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  children,\n  onToggle,\n  filledBackground,\n  defaultIsOpen = false,\n  borderTop = false,\n  borderColor = 'color.illustration.neutral.300',\n  backgroundColor = 'color.surface.base.300',\n  subTitle,\n  fullBorder = false,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const [isOpen, setIsOpen] = useState(defaultIsOpen)\n  const px = fullBorder ? '16px' : '0'\n\n  const resolvedBorderColor = resolveToThemeColor(borderColor, theme)\n\n  const resolvedBackgroundColour = resolveToThemeColor(backgroundColor, theme)\n\n  const handleToggle = () => {\n    const nextOpenState = !isOpen\n    onToggle?.(nextOpenState)\n    setIsOpen(nextOpenState)\n  }\n\n  return (\n    <Wrapper\n      $borderTop={borderTop}\n      $fullBorder={fullBorder}\n      $filledBackground={filledBackground}\n      $borderColor={resolvedBorderColor}\n      $backgroundColor={resolvedBackgroundColour}\n      {...marginProps}\n    >\n      <TopContainer\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        onClick={handleToggle}\n        py=\"16px\"\n        pr=\"16px\"\n        pl={px}\n      >\n        <TitleContainer>\n          <Text tag=\"h2\" typo=\"headline-regular\">\n            {title}\n          </Text>\n          {subTitle && (\n            <Text tag=\"label\" typo=\"label\" mt={{ custom: 4 }}>\n              {subTitle}\n            </Text>\n          )}\n        </TitleContainer>\n\n        <CaretIcon\n          render=\"caret\"\n          size={24}\n          color=\"color.illustration.neutral.400\"\n          $isOpen={isOpen}\n          $borderTop={borderTop}\n        />\n      </TopContainer>\n      {isOpen && (\n        <Box pt=\"12px\" pb=\"16px\" px={px}>\n          {children}\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<\n  TransientProps<\n    Pick<AccordionProps, 'borderTop' | 'fullBorder' | 'filledBackground'>\n  > & { $borderColor: string; $backgroundColor: string }\n>(\n  ({\n    $borderTop,\n    $fullBorder,\n    $filledBackground,\n    $borderColor,\n    $backgroundColor,\n  }) => css`\n    border-bottom: 1px solid ${$borderColor};\n    ${$borderTop && `border-top: 1px solid ${$backgroundColor};`}\n\n    ${$fullBorder &&\n    css`\n      border: 1px solid ${$borderColor};\n      border-radius: 16px;\n    `}\n\n    ${$filledBackground &&\n    css`\n      background-color: ${$backgroundColor};\n    `}\n  `,\n)\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`\nconst TopContainer = styled(Box)`\n  cursor: pointer;\n`\n\nconst CaretIcon = styled(Icon)<\n  TransientProps<Pick<AccordionProps, 'borderTop'>> & { $isOpen: boolean }\n>(\n  ({ $isOpen }) => css`\n    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n    transition: transform 0.6s ease;\n  `,\n)\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, useState } from 'react';\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype UsableNewColors = Extract<\n  NewColor,\n  | 'color.surface.base.000'\n  | 'color.surface.base.100'\n  | 'color.surface.base.300'\n  | 'color.illustration.neutral.300'\n>\n\nexport type AccordionProps = {\n  title: string\n  subTitle?: string\n  filledBackground?: boolean\n  borderTop?: boolean\n  borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut' | UsableNewColors\n  fullBorder?: boolean\n  backgroundColor?:\n    | 'oatmeal'\n    | 'custard'\n    | 'cream'\n    | 'coconut'\n    | UsableNewColors\n  onToggle?: (isOpen: boolean) => void\n  children: ReactNode\n  defaultIsOpen?: boolean\n} & MarginProps\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  children,\n  onToggle,\n  filledBackground,\n  defaultIsOpen = false,\n  borderTop = false,\n  borderColor = 'color.illustration.neutral.300',\n  backgroundColor = 'color.surface.base.300',\n  subTitle,\n  fullBorder = false,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const [isOpen, setIsOpen] = useState(defaultIsOpen)\n  const px = fullBorder ? '16px' : '0'\n\n  const resolvedBorderColor = resolveToThemeColor(borderColor, theme)\n\n  const resolvedBackgroundColour = resolveToThemeColor(backgroundColor, theme)\n\n  const handleToggle = () => {\n    const nextOpenState = !isOpen\n    onToggle?.(nextOpenState)\n    setIsOpen(nextOpenState)\n  }\n\n  return (\n    <Wrapper\n      $borderTop={borderTop}\n      $fullBorder={fullBorder}\n      $filledBackground={filledBackground}\n      $borderColor={resolvedBorderColor}\n      $backgroundColor={resolvedBackgroundColour}\n      {...marginProps}\n    >\n      <TopContainer\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        onClick={handleToggle}\n        py=\"16px\"\n        pr=\"16px\"\n        pl={px}\n      >\n        <TitleContainer>\n          <Text tag=\"h2\" typo=\"headline-regular\">\n            {title}\n          </Text>\n          {subTitle && (\n            <Text tag=\"label\" typo=\"label\" mt={{ custom: 4 }}>\n              {subTitle}\n            </Text>\n          )}\n        </TitleContainer>\n\n        <CaretIcon\n          render=\"caret\"\n          size={24}\n          color=\"color.illustration.neutral.400\"\n          $isOpen={isOpen}\n          $borderTop={borderTop}\n        />\n      </TopContainer>\n      {isOpen && (\n        <Box pt=\"12px\" pb=\"16px\" px={px}>\n          {children}\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<\n  TransientProps<\n    Pick<AccordionProps, 'borderTop' | 'fullBorder' | 'filledBackground'>\n  > & { $borderColor: string; $backgroundColor: string }\n>(\n  ({\n    $borderTop,\n    $fullBorder,\n    $filledBackground,\n    $borderColor,\n    $backgroundColor,\n  }) => css`\n    border-bottom: 1px solid ${$borderColor};\n    ${$borderTop && `border-top: 1px solid ${$backgroundColor};`}\n\n    ${$fullBorder &&\n    css`\n      border: 1px solid ${$borderColor};\n      border-radius: 16px;\n    `}\n\n    ${$filledBackground &&\n    css`\n      background-color: ${$backgroundColor};\n    `}\n  `,\n)\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`\nconst TopContainer = styled(Box)`\n  cursor: pointer;\n`\n\nconst CaretIcon = styled(Icon)<\n  TransientProps<Pick<AccordionProps, 'borderTop'>> & { $isOpen: boolean }\n>(\n  ({ $isOpen }) => css`\n    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n    transition: transform 0.6s ease;\n  `,\n)\n"]}

package/dist/ActionDropdown/ActionDropdown.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
@@ -10,13 +11,7 @@ export const ActionDropdown = ({ id, className = '', label, value, list, onSelec
     const theme = useTheme();
     const resolvedBgColor = resolveToThemeColor(value.bgColor ?? 'color.background.100', theme);
     const resolvedTextColor = resolveToThemeColor(value.textColor ?? 'color.text.base', theme);
-    return (React.createElement(Container, { id: id, className: className, onClick: () => setOpen((currentOpen) => !currentOpen), ...marginProps },
-        label && (React.createElement(Text, { tag: "label", color: "sesame", typo: "label" }, label)),
-        React.createElement(Label, { "$text": resolvedTextColor, "$bg": resolvedBgColor },
-            React.createElement(SelectedOption, null, value.label),
-            React.createElement(Icon, { render: "caret", color: value.textColor ?? 'color.text.base', size: 24, rotate: open ? 180 : 0 })),
-        React.createElement(OuterContainer, { open: open },
-            React.createElement(List, { options: list, selectOption: onSelect }))));
+    return (_jsxs(Container, { id: id, className: className, onClick: () => setOpen((currentOpen) => !currentOpen), ...marginProps, children: [label && (_jsx(Text, { tag: "label", color: "sesame", typo: "label", children: label })), _jsxs(Label, { "$text": resolvedTextColor, "$bg": resolvedBgColor, children: [_jsx(SelectedOption, { children: value.label }), _jsx(Icon, { render: "caret", color: value.textColor ?? 'color.text.base', size: 24, rotate: open ? 180 : 0 })] }), _jsx(OuterContainer, { open: open, children: _jsx(List, { options: list, selectOption: onSelect }) })] }));
 };
 const Label = styled.div(({ $text, $bg }) => css `
     color: ${$text};

package/dist/ActionDropdown/ActionDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAG7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAetE,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CACzC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvC,KAAK,CACN,CAAA;IACD,MAAM,iBAAiB,GAAG,mBAAmB,CAC3C,KAAK,CAAC,SAAS,IAAI,iBAAiB,EACpC,KAAK,CACN,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW;QAEd,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,IAC1C,KAAK,CACD,CACR;QAED,oBAAC,KAAK,aAAQ,iBAAiB,SAAO,eAAe;YACnD,oBAAC,cAAc,QAAE,KAAK,CAAC,KAAK,CAAkB;YAC9C,oBAAC,IAAI,IACH,MAAM,EAAC,OAAO,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,iBAAiB,EAC3C,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACtB,CACI;QACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI;YACxB,oBAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,CAChC,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACZ,KAAK;wBACM,GAAG;;;;;;;;;;;;GAYxB,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;eAKJ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;kBACpB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;wBACjB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;kBAClD,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;GAGvC,CACF,CAAA","sourcesContent":["import React, { FC, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { ActionListItem, List } from './List'\n\nimport { MarginProps } from '../utils/space'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nexport type ActionDropdownProps = {\n  id?: string\n  className?: string\n  /** label displayed above the dropdown  */\n  label?: string\n  /** value */\n  value: ActionListItem\n  /** list of items for the dropdown list */\n  list: ActionListItem[]\n  /** onSelect handler */\n  onSelect: (action: ActionListItem) => void\n} & MarginProps\n\nexport const ActionDropdown: FC<ActionDropdownProps> = ({\n  id,\n  className = '',\n  label,\n  value,\n  list,\n  onSelect,\n  ...marginProps\n}) => {\n  const [open, setOpen] = useState(false)\n\n  const theme = useTheme()\n\n  const resolvedBgColor = resolveToThemeColor(\n    value.bgColor ?? 'color.background.100',\n    theme,\n  )\n  const resolvedTextColor = resolveToThemeColor(\n    value.textColor ?? 'color.text.base',\n    theme,\n  )\n\n  return (\n    <Container\n      id={id}\n      className={className}\n      onClick={() => setOpen((currentOpen) => !currentOpen)}\n      {...marginProps}\n    >\n      {label && (\n        <Text tag=\"label\" color=\"sesame\" typo=\"label\">\n          {label}\n        </Text>\n      )}\n\n      <Label $text={resolvedTextColor} $bg={resolvedBgColor}>\n        <SelectedOption>{value.label}</SelectedOption>\n        <Icon\n          render=\"caret\"\n          color={value.textColor ?? 'color.text.base'}\n          size={24}\n          rotate={open ? 180 : 0}\n        />\n      </Label>\n      <OuterContainer open={open}>\n        <List options={list} selectOption={onSelect} />\n      </OuterContainer>\n    </Container>\n  )\n}\n\ninterface ISelected {\n  $text: string\n  $bg: string\n}\n\nconst Label = styled.div<ISelected>(\n  ({ $text, $bg }) => css`\n    color: ${$text};\n    background-color: ${$bg};\n    position: relative;\n    width: 100%;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: center;\n    border-radius: 100px;\n    padding: 16px 16px 14px;\n    box-sizing: border-box;\n    user-select: none;\n  `,\n)\n\nconst SelectedOption = styled.span`\n  font-size: 14px;\n  font-weight: bold;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nconst Container = styled(Box)`\n  position: relative;\n  display: block;\n  width: 210px;\n  height: 48px;\n  text-align: center;\n  cursor: pointer;\n  outline: none;\n  border-radius: 8px;\n`\n\ninterface IOpen {\n  open: boolean\n}\n\nconst OuterContainer = styled.div<IOpen>(\n  ({ open }) => css`\n    position: absolute;\n    width: 100%;\n    border-radius: 12px;\n    margin-top: 8px;\n    display: ${open ? 'block' : 'none'};\n    max-height: ${open ? '235px' : '48px'};\n    background-color: ${({ theme }) => theme.color.surface.base[300]};\n    overflow-y: ${open ? 'auto' : 'hidden'};\n    z-index: 4;\n    transition: all 0.2s ease-in-out;\n  `,\n)\n"]}
+{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAG7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAetE,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CACzC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvC,KAAK,CACN,CAAA;IACD,MAAM,iBAAiB,GAAG,mBAAmB,CAC3C,KAAK,CAAC,SAAS,IAAI,iBAAiB,EACpC,KAAK,CACN,CAAA;IAED,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW,aAEd,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAC1C,KAAK,GACD,CACR,EAED,MAAC,KAAK,aAAQ,iBAAiB,SAAO,eAAe,aACnD,KAAC,cAAc,cAAE,KAAK,CAAC,KAAK,GAAkB,EAC9C,KAAC,IAAI,IACH,MAAM,EAAC,OAAO,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,iBAAiB,EAC3C,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACtB,IACI,EACR,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,YACxB,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,GAChC,IACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACZ,KAAK;wBACM,GAAG;;;;;;;;;;;;GAYxB,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;eAKJ,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;kBACpB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;wBACjB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;kBAClD,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;GAGvC,CACF,CAAA","sourcesContent":["import { FC, useState } from 'react';\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { ActionListItem, List } from './List'\n\nimport { MarginProps } from '../utils/space'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nexport type ActionDropdownProps = {\n  id?: string\n  className?: string\n  /** label displayed above the dropdown  */\n  label?: string\n  /** value */\n  value: ActionListItem\n  /** list of items for the dropdown list */\n  list: ActionListItem[]\n  /** onSelect handler */\n  onSelect: (action: ActionListItem) => void\n} & MarginProps\n\nexport const ActionDropdown: FC<ActionDropdownProps> = ({\n  id,\n  className = '',\n  label,\n  value,\n  list,\n  onSelect,\n  ...marginProps\n}) => {\n  const [open, setOpen] = useState(false)\n\n  const theme = useTheme()\n\n  const resolvedBgColor = resolveToThemeColor(\n    value.bgColor ?? 'color.background.100',\n    theme,\n  )\n  const resolvedTextColor = resolveToThemeColor(\n    value.textColor ?? 'color.text.base',\n    theme,\n  )\n\n  return (\n    <Container\n      id={id}\n      className={className}\n      onClick={() => setOpen((currentOpen) => !currentOpen)}\n      {...marginProps}\n    >\n      {label && (\n        <Text tag=\"label\" color=\"sesame\" typo=\"label\">\n          {label}\n        </Text>\n      )}\n\n      <Label $text={resolvedTextColor} $bg={resolvedBgColor}>\n        <SelectedOption>{value.label}</SelectedOption>\n        <Icon\n          render=\"caret\"\n          color={value.textColor ?? 'color.text.base'}\n          size={24}\n          rotate={open ? 180 : 0}\n        />\n      </Label>\n      <OuterContainer open={open}>\n        <List options={list} selectOption={onSelect} />\n      </OuterContainer>\n    </Container>\n  )\n}\n\ninterface ISelected {\n  $text: string\n  $bg: string\n}\n\nconst Label = styled.div<ISelected>(\n  ({ $text, $bg }) => css`\n    color: ${$text};\n    background-color: ${$bg};\n    position: relative;\n    width: 100%;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: center;\n    border-radius: 100px;\n    padding: 16px 16px 14px;\n    box-sizing: border-box;\n    user-select: none;\n  `,\n)\n\nconst SelectedOption = styled.span`\n  font-size: 14px;\n  font-weight: bold;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nconst Container = styled(Box)`\n  position: relative;\n  display: block;\n  width: 210px;\n  height: 48px;\n  text-align: center;\n  cursor: pointer;\n  outline: none;\n  border-radius: 8px;\n`\n\ninterface IOpen {\n  open: boolean\n}\n\nconst OuterContainer = styled.div<IOpen>(\n  ({ open }) => css`\n    position: absolute;\n    width: 100%;\n    border-radius: 12px;\n    margin-top: 8px;\n    display: ${open ? 'block' : 'none'};\n    max-height: ${open ? '235px' : '48px'};\n    background-color: ${({ theme }) => theme.color.surface.base[300]};\n    overflow-y: ${open ? 'auto' : 'hidden'};\n    z-index: 4;\n    transition: all 0.2s ease-in-out;\n  `,\n)\n"]}

package/dist/ActionDropdown/List.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { darken } from 'polished';
-export const List = ({ options, selectOption }) => (React.createElement(Container, null, options.map((option) => (React.createElement(ListItem, { key: option.value, onClick: () => selectOption(option) }, option.label)))));
+export const List = ({ options, selectOption }) => (_jsx(Container, { children: options.map((option) => (_jsx(ListItem, { onClick: () => selectOption(option), children: option.label }, option.value))) }));
 const Container = styled.ul `
   padding: 0;
   margin: 0;

package/dist/ActionDropdown/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/ActionDropdown/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAejC,MAAM,CAAC,MAAM,IAAI,GAAc,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAC5D,oBAAC,SAAS,QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAC7D,MAAM,CAAC,KAAK,CACJ,CACZ,CAAC,CACQ,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI1B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;WASf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;wBAG/B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;;;;;CAM/C,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\n\nimport { darken } from 'polished'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type ActionListItem = {\n  label: string\n  value: string\n  bgColor?: ColorTypes\n  textColor?: ColorTypes\n}\n\ntype Props = {\n  options: ActionListItem[]\n  selectOption: (option: ActionListItem) => void\n}\n\nexport const List: FC<Props> = ({ options, selectOption }) => (\n  <Container>\n    {options.map((option) => (\n      <ListItem key={option.value} onClick={() => selectOption(option)}>\n        {option.label}\n      </ListItem>\n    ))}\n  </Container>\n)\n\nconst Container = styled.ul`\n  padding: 0;\n  margin: 0;\n  max-height: 188px;\n`\n\nconst ListItem = styled.li`\n  padding: 16px 24px;\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  font-size: 14px;\n  cursor: pointer;\n  color: ${({ theme }) => theme.color.surface.base[900]};\n\n  &:hover {\n    background-color: ${({ theme }) =>\n      darken(0.1, theme.color.surface.base[300])};\n  }\n\n  &:last-child {\n    border-bottom: none;\n  }\n`\n"]}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/ActionDropdown/List.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAejC,MAAM,CAAC,MAAM,IAAI,GAAc,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAC5D,KAAC,SAAS,cACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,QAAQ,IAAoB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAC7D,MAAM,CAAC,KAAK,IADA,MAAM,CAAC,KAAK,CAEhB,CACZ,CAAC,GACQ,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI1B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;WASf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;wBAG/B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;;;;;CAM/C,CAAA","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components'\n\nimport { darken } from 'polished'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type ActionListItem = {\n  label: string\n  value: string\n  bgColor?: ColorTypes\n  textColor?: ColorTypes\n}\n\ntype Props = {\n  options: ActionListItem[]\n  selectOption: (option: ActionListItem) => void\n}\n\nexport const List: FC<Props> = ({ options, selectOption }) => (\n  <Container>\n    {options.map((option) => (\n      <ListItem key={option.value} onClick={() => selectOption(option)}>\n        {option.label}\n      </ListItem>\n    ))}\n  </Container>\n)\n\nconst Container = styled.ul`\n  padding: 0;\n  margin: 0;\n  max-height: 188px;\n`\n\nconst ListItem = styled.li`\n  padding: 16px 24px;\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  font-size: 14px;\n  cursor: pointer;\n  color: ${({ theme }) => theme.color.surface.base[900]};\n\n  &:hover {\n    background-color: ${({ theme }) =>\n      darken(0.1, theme.color.surface.base[300])};\n  }\n\n  &:last-child {\n    border-bottom: none;\n  }\n`\n"]}

package/dist/Alert/Alert.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { resolveToThemeColor } from '../ThemeProvider/utils/colourMap';
 import { Box } from '../Box';
@@ -39,15 +40,7 @@ export const Alert = ({ type = 'info', title, message, isDismissible = false, ct
     const backgroundColor = resolveToThemeColor(typeConfig[type].backgroundColor, theme);
     const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme);
     const [alertClosed, setAlertClosed] = useState(false);
-    return (React.createElement(StyledAlert, { "$backgroundColor": backgroundColor, "$accentColor": accentColor, "$alertClosed": alertClosed, "$maxWidth": maxWidth, ...marginProps },
-        React.createElement(Icon, { render: typeConfig[type].icon, size: 16, m: { custom: 2 }, color: "liquorice" }),
-        React.createElement(Box, { flex: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start", width: "100%", gap: "8px" },
-            React.createElement(Box, { maxWidth: "512px" },
-                title && (React.createElement(Text, { mb: { custom: '4px' }, typo: "headline-regular" }, title)),
-                typeof message === 'string' ? (React.createElement(Text, { typo: "body-small", mb: ctaType && '8px' }, message)) : (message),
-                ctaType === 'button' && typeof ctaAction === 'function' && (React.createElement(Button, { smallButton: true, fallbackStyle: true, onClick: () => ctaAction() }, ctaLabel)),
-                ctaType === 'link' && typeof ctaAction === 'string' && (React.createElement(Link, { href: ctaAction }, ctaLabel))),
-            isDismissible && (React.createElement(IconStrict, { render: "cross", size: 16, color: "liquorice", onClick: () => setAlertClosed(true) })))));
+    return (_jsxs(StyledAlert, { "$backgroundColor": backgroundColor, "$accentColor": accentColor, "$alertClosed": alertClosed, "$maxWidth": maxWidth, ...marginProps, children: [_jsx(Icon, { render: typeConfig[type].icon, size: 16, m: { custom: 2 }, color: "liquorice" }), _jsxs(Box, { flex: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start", width: "100%", gap: "8px", children: [_jsxs(Box, { maxWidth: "512px", children: [title && (_jsx(Text, { mb: { custom: '4px' }, typo: "headline-regular", children: title })), typeof message === 'string' ? (_jsx(Text, { typo: "body-small", mb: ctaType && '8px', children: message })) : (message), ctaType === 'button' && typeof ctaAction === 'function' && (_jsx(Button, { smallButton: true, fallbackStyle: true, onClick: () => ctaAction(), children: ctaLabel })), ctaType === 'link' && typeof ctaAction === 'string' && (_jsx(Link, { href: ctaAction, children: ctaLabel }))] }), isDismissible && (_jsx(IconStrict, { render: "cross", size: 16, color: "liquorice", onClick: () => setAlertClosed(true) }))] })] }));
 };
 const StyledAlert = styled(Box)(({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css `
     display: flex;

package/dist/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactElement, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { MarginProps } from 'utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { Icons } from '../Icon/iconsList'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\n\ntype AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive'\n\ntype CtaProps =\n  | {\n      ctaType: 'button'\n      ctaAction: () => void\n      ctaLabel: string\n    }\n  | {\n      ctaType: 'link'\n      ctaAction: string\n      ctaLabel: string\n    }\n  | {\n      ctaType?: undefined\n      ctaAction?: undefined\n      ctaLabel?: undefined\n    }\n\ntype AlertProps = {\n  type?: AlertType\n  title?: string\n  message: string | ReactElement<unknown>\n  isDismissible?: boolean\n  maxWidth?: string\n} & CtaProps &\n  MarginProps\n\ntype AlertTypeConfig = {\n  backgroundColor: NewColor\n  accentColor: NewColor\n  icon: Icons\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n  info: {\n    backgroundColor: 'color.feedback.informative.100',\n    accentColor: 'color.feedback.informative.200',\n    icon: 'circle-info-filled',\n  },\n  fallback: {\n    backgroundColor: 'color.surface.base.100',\n    accentColor: 'color.surface.base.400',\n    icon: 'circle-info-filled',\n  },\n  notice: {\n    backgroundColor: 'color.feedback.notice.100',\n    accentColor: 'color.feedback.notice.200',\n    icon: 'triangle-exclamation-solid',\n  },\n  negative: {\n    backgroundColor: 'color.feedback.negative.100',\n    accentColor: 'color.feedback.negative.200',\n    icon: 'warning-circle',\n  },\n  positive: {\n    backgroundColor: 'color.feedback.positive.100',\n    accentColor: 'color.feedback.positive.200',\n    icon: 'included',\n  },\n}\n\nexport const Alert: FC<AlertProps> = ({\n  type = 'info',\n  title,\n  message,\n  isDismissible = false,\n  ctaType,\n  ctaAction,\n  ctaLabel,\n  maxWidth = '512px',\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const backgroundColor = resolveToThemeColor(\n    typeConfig[type].backgroundColor,\n    theme,\n  )\n  const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme)\n  const [alertClosed, setAlertClosed] = useState(false)\n\n  return (\n    <StyledAlert\n      $backgroundColor={backgroundColor}\n      $accentColor={accentColor}\n      $alertClosed={alertClosed}\n      $maxWidth={maxWidth}\n      {...marginProps}\n    >\n      <Icon\n        render={typeConfig[type].icon}\n        size={16}\n        m={{ custom: 2 }}\n        color=\"liquorice\"\n      />\n      <Box\n        flex\n        direction=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        width=\"100%\"\n        gap=\"8px\"\n      >\n        <Box maxWidth=\"512px\">\n          {title && (\n            <Text mb={{ custom: '4px' }} typo=\"headline-regular\">\n              {title}\n            </Text>\n          )}\n          {typeof message === 'string' ? (\n            <Text typo=\"body-small\" mb={ctaType && '8px'}>\n              {message}\n            </Text>\n          ) : (\n            message\n          )}\n          {ctaType === 'button' && typeof ctaAction === 'function' && (\n            <Button smallButton fallbackStyle onClick={() => ctaAction()}>\n              {ctaLabel}\n            </Button>\n          )}\n          {ctaType === 'link' && typeof ctaAction === 'string' && (\n            <Link href={ctaAction}>{ctaLabel}</Link>\n          )}\n        </Box>\n        {isDismissible && (\n          <IconStrict\n            render=\"cross\"\n            size={16}\n            color=\"liquorice\"\n            onClick={() => setAlertClosed(true)}\n          />\n        )}\n      </Box>\n    </StyledAlert>\n  )\n}\n\ninterface IStyledAlert {\n  $backgroundColor: string\n  $accentColor: string\n  $alertClosed: boolean\n  $maxWidth?: string\n}\n\nconst StyledAlert = styled(Box)<IStyledAlert>(\n  ({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css`\n    display: flex;\n    width: 100%;\n    max-width: ${$maxWidth};\n    min-width: min-content;\n    padding: 12px 12px 12px 20px;\n    align-items: flex-start;\n    gap: 8px;\n    border-radius: 8px 16px 16px 8px;\n    background: ${$backgroundColor};\n    position: relative;\n    display: ${$alertClosed ? 'none' : 'flex'};\n\n    &:before {\n      width: 8px;\n      height: 100%;\n      position: absolute;\n      background: ${$accentColor};\n      content: '';\n      top: 0;\n      left: 0;\n      border-radius: 16px 0 0 16px;\n    }\n  `,\n)\n"]}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactElement, useState } from 'react';\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { MarginProps } from 'utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { Icons } from '../Icon/iconsList'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\n\ntype AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive'\n\ntype CtaProps =\n  | {\n      ctaType: 'button'\n      ctaAction: () => void\n      ctaLabel: string\n    }\n  | {\n      ctaType: 'link'\n      ctaAction: string\n      ctaLabel: string\n    }\n  | {\n      ctaType?: undefined\n      ctaAction?: undefined\n      ctaLabel?: undefined\n    }\n\ntype AlertProps = {\n  type?: AlertType\n  title?: string\n  message: string | ReactElement<unknown>\n  isDismissible?: boolean\n  maxWidth?: string\n} & CtaProps &\n  MarginProps\n\ntype AlertTypeConfig = {\n  backgroundColor: NewColor\n  accentColor: NewColor\n  icon: Icons\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n  info: {\n    backgroundColor: 'color.feedback.informative.100',\n    accentColor: 'color.feedback.informative.200',\n    icon: 'circle-info-filled',\n  },\n  fallback: {\n    backgroundColor: 'color.surface.base.100',\n    accentColor: 'color.surface.base.400',\n    icon: 'circle-info-filled',\n  },\n  notice: {\n    backgroundColor: 'color.feedback.notice.100',\n    accentColor: 'color.feedback.notice.200',\n    icon: 'triangle-exclamation-solid',\n  },\n  negative: {\n    backgroundColor: 'color.feedback.negative.100',\n    accentColor: 'color.feedback.negative.200',\n    icon: 'warning-circle',\n  },\n  positive: {\n    backgroundColor: 'color.feedback.positive.100',\n    accentColor: 'color.feedback.positive.200',\n    icon: 'included',\n  },\n}\n\nexport const Alert: FC<AlertProps> = ({\n  type = 'info',\n  title,\n  message,\n  isDismissible = false,\n  ctaType,\n  ctaAction,\n  ctaLabel,\n  maxWidth = '512px',\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const backgroundColor = resolveToThemeColor(\n    typeConfig[type].backgroundColor,\n    theme,\n  )\n  const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme)\n  const [alertClosed, setAlertClosed] = useState(false)\n\n  return (\n    <StyledAlert\n      $backgroundColor={backgroundColor}\n      $accentColor={accentColor}\n      $alertClosed={alertClosed}\n      $maxWidth={maxWidth}\n      {...marginProps}\n    >\n      <Icon\n        render={typeConfig[type].icon}\n        size={16}\n        m={{ custom: 2 }}\n        color=\"liquorice\"\n      />\n      <Box\n        flex\n        direction=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        width=\"100%\"\n        gap=\"8px\"\n      >\n        <Box maxWidth=\"512px\">\n          {title && (\n            <Text mb={{ custom: '4px' }} typo=\"headline-regular\">\n              {title}\n            </Text>\n          )}\n          {typeof message === 'string' ? (\n            <Text typo=\"body-small\" mb={ctaType && '8px'}>\n              {message}\n            </Text>\n          ) : (\n            message\n          )}\n          {ctaType === 'button' && typeof ctaAction === 'function' && (\n            <Button smallButton fallbackStyle onClick={() => ctaAction()}>\n              {ctaLabel}\n            </Button>\n          )}\n          {ctaType === 'link' && typeof ctaAction === 'string' && (\n            <Link href={ctaAction}>{ctaLabel}</Link>\n          )}\n        </Box>\n        {isDismissible && (\n          <IconStrict\n            render=\"cross\"\n            size={16}\n            color=\"liquorice\"\n            onClick={() => setAlertClosed(true)}\n          />\n        )}\n      </Box>\n    </StyledAlert>\n  )\n}\n\ninterface IStyledAlert {\n  $backgroundColor: string\n  $accentColor: string\n  $alertClosed: boolean\n  $maxWidth?: string\n}\n\nconst StyledAlert = styled(Box)<IStyledAlert>(\n  ({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css`\n    display: flex;\n    width: 100%;\n    max-width: ${$maxWidth};\n    min-width: min-content;\n    padding: 12px 12px 12px 20px;\n    align-items: flex-start;\n    gap: 8px;\n    border-radius: 8px 16px 16px 8px;\n    background: ${$backgroundColor};\n    position: relative;\n    display: ${$alertClosed ? 'none' : 'flex'};\n\n    &:before {\n      width: 8px;\n      height: 100%;\n      position: absolute;\n      background: ${$accentColor};\n      content: '';\n      top: 0;\n      left: 0;\n      border-radius: 16px 0 0 16px;\n    }\n  `,\n)\n"]}

package/dist/Badge/Badge.d.ts

@@ -13,4 +13,4 @@ export type BadgeProps = {
     disabled?: boolean;
     zIndex?: number;
 };
-export declare function Badge({ borderColour, size, src, disabled, zIndex, title, }: BadgeProps): JSX.Element;
+export declare function Badge({ borderColour, size, src, disabled, zIndex, title, }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Badge/Badge.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { BadgeFallbackImage } from './BadgeFallbackImage';
 import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
@@ -13,11 +14,9 @@ export function Badge({ borderColour = 'color.surface.brand.400', size = BadgeSi
     const theme = useTheme();
     const resolvedBorderColor = resolveToThemeColor(borderColour, theme);
     if (typeof src === 'string') {
-        return (React.createElement(Container, { "$borderColour": resolvedBorderColor, "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex },
-            hasFailed && React.createElement(BadgeFallbackImage, { title: title }),
-            !hasFailed && (React.createElement("img", { width: '100%', height: '100%', src: src, alt: title, onError: () => setHasFailed(true) }))));
+        return (_jsxs(Container, { "$borderColour": resolvedBorderColor, "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex, children: [hasFailed && _jsx(BadgeFallbackImage, { title: title }), !hasFailed && (_jsx("img", { width: '100%', height: '100%', src: src, alt: title, onError: () => setHasFailed(true) }))] }));
     }
-    return (React.createElement(Container, { "$borderColour": resolvedBorderColor, "$size": size, "$disabled": disabled, "$zIndex": zIndex, "$src": null }, src));
+    return (_jsx(Container, { "$borderColour": resolvedBorderColor, "$size": size, "$disabled": disabled, "$zIndex": zIndex, "$src": null, children: src }));
 }
 const Container = styled.div((props) => {
     return css `

package/dist/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAA;AACjD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAEzC,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,wBAAW,CAAA;AACb,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAWD,MAAM,UAAU,KAAK,CAAC,EACpB,YAAY,GAAG,yBAAyB,EACxC,IAAI,GAAG,SAAS,CAAC,EAAE,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,GACM;IACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;IAEpE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,oBAAC,SAAS,qBACO,mBAAmB,WAC3B,IAAI,UACL,GAAG,eACE,QAAQ,aACV,MAAM;YAEd,SAAS,IAAI,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI;YACjD,CAAC,SAAS,IAAI,CACb,6BACE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,CACH,CACS,CACb,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,qBACO,mBAAmB,WAC3B,IAAI,eACA,QAAQ,aACV,MAAM,UACT,IAAI,IAET,GAAG,CACM,CACb,CAAA;AACH,CAAC;AAUD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,aAAa;wBACnB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM;;;cAGpD,KAAK,CAAC,KAAK;aACZ,KAAK,CAAC,KAAK;;;;wBAIA,KAAK,CAAC,aAAa;cAC7B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;eACzC,KAAK,CAAC,OAAO,IAAI,CAAC;;MAE3B,CAAC,KAAK,CAAC,SAAS;QAClB,GAAG,CAAA;;;;;KAKF;GACF,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { useState, type JSX } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { BadgeFallbackImage } from './BadgeFallbackImage'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport enum BadgeSize {\n  Sm = '24px',\n  Md = '32px',\n  Lg = '40px',\n}\n\nexport type BadgeProps = {\n  src: string | JSX.Element\n  title?: string\n  borderColour?: ColorTypes\n  size?: BadgeSize\n  disabled?: boolean\n  zIndex?: number\n}\n\nexport function Badge({\n  borderColour = 'color.surface.brand.400',\n  size = BadgeSize.Lg,\n  src,\n  disabled,\n  zIndex,\n  title,\n}: BadgeProps) {\n  const [hasFailed, setHasFailed] = useState(false)\n  const theme = useTheme()\n  const resolvedBorderColor = resolveToThemeColor(borderColour, theme)\n\n  if (typeof src === 'string') {\n    return (\n      <Container\n        $borderColour={resolvedBorderColor}\n        $size={size}\n        $src={src}\n        $disabled={disabled}\n        $zIndex={zIndex}\n      >\n        {hasFailed && <BadgeFallbackImage title={title} />}\n        {!hasFailed && (\n          <img\n            width={'100%'}\n            height={'100%'}\n            src={src}\n            alt={title}\n            onError={() => setHasFailed(true)}\n          />\n        )}\n      </Container>\n    )\n  }\n\n  return (\n    <Container\n      $borderColour={resolvedBorderColor}\n      $size={size}\n      $disabled={disabled}\n      $zIndex={zIndex}\n      $src={null}\n    >\n      {src}\n    </Container>\n  )\n}\n\ntype ContainerProps = {\n  $borderColour: string\n  $size: BadgeSize\n  $src: string | null\n  $disabled?: boolean\n  $zIndex?: number\n}\n\nconst Container = styled.div<ContainerProps>((props) => {\n  return css`\n    background-color: ${props.$borderColour};\n    background-image: ${props.$src ? `url(${props.$src})` : 'none'};\n    background-position: center;\n    background-size: cover;\n    height: ${props.$size};\n    width: ${props.$size};\n    border-radius: 50%;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease-in-out;\n    border: 2px solid ${props.$borderColour};\n    filter: ${props.$disabled ? 'contrast(0.5)' : 'none'};\n    z-index: ${props.$zIndex || 0};\n\n    ${!props.$disabled &&\n    css`\n      &:hover {\n        cursor: pointer;\n        box-shadow: 0 0 0px 5px #f0f0f0;\n      }\n    `}\n  `\n})\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAEzC,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,wBAAW,CAAA;AACb,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAWD,MAAM,UAAU,KAAK,CAAC,EACpB,YAAY,GAAG,yBAAyB,EACxC,IAAI,GAAG,SAAS,CAAC,EAAE,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,GACM;IACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;IAEpE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,MAAC,SAAS,qBACO,mBAAmB,WAC3B,IAAI,UACL,GAAG,eACE,QAAQ,aACV,MAAM,aAEd,SAAS,IAAI,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI,EACjD,CAAC,SAAS,IAAI,CACb,cACE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,CACH,IACS,CACb,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,SAAS,qBACO,mBAAmB,WAC3B,IAAI,eACA,QAAQ,aACV,MAAM,UACT,IAAI,YAET,GAAG,GACM,CACb,CAAA;AACH,CAAC;AAUD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,aAAa;wBACnB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM;;;cAGpD,KAAK,CAAC,KAAK;aACZ,KAAK,CAAC,KAAK;;;;wBAIA,KAAK,CAAC,aAAa;cAC7B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;eACzC,KAAK,CAAC,OAAO,IAAI,CAAC;;MAE3B,CAAC,KAAK,CAAC,SAAS;QAClB,GAAG,CAAA;;;;;KAKF;GACF,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { type JSX } from 'react'\nimport { useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { BadgeFallbackImage } from './BadgeFallbackImage'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport enum BadgeSize {\n  Sm = '24px',\n  Md = '32px',\n  Lg = '40px',\n}\n\nexport type BadgeProps = {\n  src: string | JSX.Element\n  title?: string\n  borderColour?: ColorTypes\n  size?: BadgeSize\n  disabled?: boolean\n  zIndex?: number\n}\n\nexport function Badge({\n  borderColour = 'color.surface.brand.400',\n  size = BadgeSize.Lg,\n  src,\n  disabled,\n  zIndex,\n  title,\n}: BadgeProps) {\n  const [hasFailed, setHasFailed] = useState(false)\n  const theme = useTheme()\n  const resolvedBorderColor = resolveToThemeColor(borderColour, theme)\n\n  if (typeof src === 'string') {\n    return (\n      <Container\n        $borderColour={resolvedBorderColor}\n        $size={size}\n        $src={src}\n        $disabled={disabled}\n        $zIndex={zIndex}\n      >\n        {hasFailed && <BadgeFallbackImage title={title} />}\n        {!hasFailed && (\n          <img\n            width={'100%'}\n            height={'100%'}\n            src={src}\n            alt={title}\n            onError={() => setHasFailed(true)}\n          />\n        )}\n      </Container>\n    )\n  }\n\n  return (\n    <Container\n      $borderColour={resolvedBorderColor}\n      $size={size}\n      $disabled={disabled}\n      $zIndex={zIndex}\n      $src={null}\n    >\n      {src}\n    </Container>\n  )\n}\n\ntype ContainerProps = {\n  $borderColour: string\n  $size: BadgeSize\n  $src: string | null\n  $disabled?: boolean\n  $zIndex?: number\n}\n\nconst Container = styled.div<ContainerProps>((props) => {\n  return css`\n    background-color: ${props.$borderColour};\n    background-image: ${props.$src ? `url(${props.$src})` : 'none'};\n    background-position: center;\n    background-size: cover;\n    height: ${props.$size};\n    width: ${props.$size};\n    border-radius: 50%;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease-in-out;\n    border: 2px solid ${props.$borderColour};\n    filter: ${props.$disabled ? 'contrast(0.5)' : 'none'};\n    z-index: ${props.$zIndex || 0};\n\n    ${!props.$disabled &&\n    css`\n      &:hover {\n        cursor: pointer;\n        box-shadow: 0 0 0px 5px #f0f0f0;\n      }\n    `}\n  `\n})\n"]}

package/dist/Badge/BadgeFallbackImage.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 type Props = {
     title?: string;
 };
-export declare function BadgeFallbackImage({ title }: Props): React.JSX.Element;
+export declare function BadgeFallbackImage({ title }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Badge/BadgeFallbackImage.js

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { Text } from '../Text';
 import styled, { useTheme } from 'styled-components';
 export function BadgeFallbackImage({ title }) {
@@ -10,8 +11,7 @@ export function BadgeFallbackImage({ title }) {
         theme.color.surface.brand[400],
     ];
     const bgColour = useRef(fallbackBackgroundColours[Math.floor(Math.random() * fallbackBackgroundColours.length)]);
-    return (React.createElement(StyledFallbackImage, { "$backgroundColour": bgColour.current },
-        React.createElement(Text, { typo: "caption", style: { fontWeight: 'bold' } }, title?.substring(0, 2) ?? null)));
+    return (_jsx(StyledFallbackImage, { "$backgroundColour": bgColour.current, children: _jsx(Text, { typo: "caption", style: { fontWeight: 'bold' }, children: title?.substring(0, 2) ?? null }) }));
 }
 const StyledFallbackImage = styled.div `
   background-color: ${(props) => props.$backgroundColour};

package/dist/Badge/BadgeFallbackImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeFallbackImage.js","sourceRoot":"","sources":["../../src/Badge/BadgeFallbackImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAMpD,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAS;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,yBAAyB,GAAG;QAChC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;KAC/B,CAAA;IAED,MAAM,QAAQ,GAAG,MAAM,CACrB,yBAAyB,CACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAC7D,CACF,CAAA;IACD,OAAO,CACL,oBAAC,mBAAmB,yBAAoB,QAAQ,CAAC,OAAO;QACtD,oBAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAC/C,KAAK,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAC1B,CACa,CACvB,CAAA;AACH,CAAC;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA+B;sBAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,iBAAiB;;;;;;CAMvD,CAAA","sourcesContent":["import React, { useRef } from 'react'\nimport { Text } from '../Text'\nimport styled, { useTheme } from 'styled-components'\n\ntype Props = {\n  title?: string\n}\n\nexport function BadgeFallbackImage({ title }: Props) {\n  const theme = useTheme()\n\n  const fallbackBackgroundColours = [\n    theme.color.surface.brand[100],\n    theme.color.surface.brand[200],\n    theme.color.surface.brand[300],\n    theme.color.surface.brand[400],\n  ]\n\n  const bgColour = useRef(\n    fallbackBackgroundColours[\n      Math.floor(Math.random() * fallbackBackgroundColours.length)\n    ],\n  )\n  return (\n    <StyledFallbackImage $backgroundColour={bgColour.current}>\n      <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n        {title?.substring(0, 2) ?? null}\n      </Text>\n    </StyledFallbackImage>\n  )\n}\n\nconst StyledFallbackImage = styled.div<{ $backgroundColour: string }>`\n  background-color: ${(props) => props.$backgroundColour};\n  display: flex;\n  place-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n`\n"]}
+{"version":3,"file":"BadgeFallbackImage.js","sourceRoot":"","sources":["../../src/Badge/BadgeFallbackImage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAMpD,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAS;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,yBAAyB,GAAG;QAChC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;KAC/B,CAAA;IAED,MAAM,QAAQ,GAAG,MAAM,CACrB,yBAAyB,CACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAC7D,CACF,CAAA;IACD,OAAO,CACL,KAAC,mBAAmB,yBAAoB,QAAQ,CAAC,OAAO,YACtD,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,YAC/C,KAAK,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,GAC1B,GACa,CACvB,CAAA;AACH,CAAC;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA+B;sBAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,iBAAiB;;;;;;CAMvD,CAAA","sourcesContent":["import { useRef } from 'react';\nimport { Text } from '../Text'\nimport styled, { useTheme } from 'styled-components'\n\ntype Props = {\n  title?: string\n}\n\nexport function BadgeFallbackImage({ title }: Props) {\n  const theme = useTheme()\n\n  const fallbackBackgroundColours = [\n    theme.color.surface.brand[100],\n    theme.color.surface.brand[200],\n    theme.color.surface.brand[300],\n    theme.color.surface.brand[400],\n  ]\n\n  const bgColour = useRef(\n    fallbackBackgroundColours[\n      Math.floor(Math.random() * fallbackBackgroundColours.length)\n    ],\n  )\n  return (\n    <StyledFallbackImage $backgroundColour={bgColour.current}>\n      <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n        {title?.substring(0, 2) ?? null}\n      </Text>\n    </StyledFallbackImage>\n  )\n}\n\nconst StyledFallbackImage = styled.div<{ $backgroundColour: string }>`\n  background-color: ${(props) => props.$backgroundColour};\n  display: flex;\n  place-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n`\n"]}

package/dist/BadgeList/BadgeList.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type BadgeProps } from '../Badge/Badge';
 import type { TooltipProps } from '../Tooltip/Tooltip';
 type WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {
@@ -18,9 +17,9 @@ type Props = {
  * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.
  *
  */
-export declare function BadgeList({ badges, limit, size }: Props): React.JSX.Element;
+export declare function BadgeList({ badges, limit, size }: Props): import("react/jsx-runtime").JSX.Element;
 type WithTooltipProps = {
     badge: BadgeListBadge;
 };
-declare const WithTooltip: ({ badge: { tooltip, ...badge } }: WithTooltipProps) => React.JSX.Element;
+declare const WithTooltip: ({ badge: { tooltip, ...badge } }: WithTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/BadgeList/BadgeList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, BadgeSize } from '../Badge/Badge';
 import styled from 'styled-components';
 import { Tooltip } from '../Tooltip';
@@ -16,22 +16,16 @@ export function BadgeList({ badges, limit, size = BadgeSize.Lg }) {
     limit && (badges.length > limit ? badges.length - limit : 0);
     const maxBadges = limit ? limit - 1 : undefined;
     const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess);
-    return (React.createElement(Container, { "$size": size },
-        badges
-            .slice(0, limitExcess ? maxBadges : undefined)
-            .map((badge, index) => (React.createElement(WithTooltip, { key: typeof badge.src === 'string' ? badge.src : index, badge: {
-                ...badge,
-                zIndex: badgeZIndexMax - index,
-                size,
-            } }))),
-        showExcessBadge && (React.createElement("div", { className: "limit-badge", style: { zIndex: badgeZIndexMax, marginLeft: '4px' } },
-            React.createElement(Badge, { title: `+${limitExcess}`, borderColour: "color.illustration.neutral.300", size: size, src: React.createElement(ExcessBadge, { excess: limitExcess + 1 }), disabled: true })))));
+    return (_jsxs(Container, { "$size": size, children: [badges
+                .slice(0, limitExcess ? maxBadges : undefined)
+                .map((badge, index) => (_jsx(WithTooltip, { badge: {
+                    ...badge,
+                    zIndex: badgeZIndexMax - index,
+                    size,
+                } }, typeof badge.src === 'string' ? badge.src : index))), showExcessBadge && (_jsx("div", { className: "limit-badge", style: { zIndex: badgeZIndexMax, marginLeft: '4px' }, children: _jsx(Badge, { title: `+${limitExcess}`, borderColour: "color.illustration.neutral.300", size: size, src: _jsx(ExcessBadge, { excess: limitExcess + 1 }), disabled: true }) }))] }));
 }
 function ExcessBadge({ excess }) {
-    return (React.createElement(ExcessBadgeContainer, null,
-        React.createElement(Text, { typo: "caption", style: { fontWeight: 'bold' } },
-            "+",
-            excess)));
+    return (_jsx(ExcessBadgeContainer, { children: _jsxs(Text, { typo: "caption", style: { fontWeight: 'bold' }, children: ["+", excess] }) }));
 }
 const ExcessBadgeContainer = styled.div `
   display: flex;
@@ -44,12 +38,9 @@ const ExcessBadgeContainer = styled.div `
 `;
 const WithTooltip = ({ badge: { tooltip, ...badge } }) => {
     if (tooltip) {
-        return (React.createElement("div", { style: { zIndex: badge.zIndex } },
-            React.createElement(Tooltip, { position: tooltip.position ?? 'bottom', title: tooltip?.title, content: tooltip.content },
-                React.createElement(Badge, { ...badge }))));
+        return (_jsx("div", { style: { zIndex: badge.zIndex }, children: _jsx(Tooltip, { position: tooltip.position ?? 'bottom', title: tooltip?.title, content: tooltip.content, children: _jsx(Badge, { ...badge }) }) }));
     }
-    return (React.createElement("div", { style: { zIndex: badge.zIndex } },
-        React.createElement(Badge, { ...badge })));
+    return (_jsx("div", { style: { zIndex: badge.zIndex }, children: _jsx(Badge, { ...badge }) }));
 };
 const marginRightMapping = {
     [BadgeSize.Lg]: '-18px',

package/dist/BadgeList/BadgeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Badge, BadgeSize, type BadgeProps } from '../Badge/Badge'\nimport styled from 'styled-components'\nimport { Tooltip } from '../Tooltip'\nimport type { TooltipProps } from '../Tooltip/Tooltip'\nimport { Text } from '../Text'\n\ntype WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {\n  position?: TooltipProps['position']\n}\n\nexport type BadgeListBadge = BadgeProps & { tooltip?: WithTooltip }\n\ntype Props = {\n  size?: BadgeProps['size']\n  limit?: number\n  badges: Omit<BadgeListBadge, 'zIndex'>[]\n}\n\n/**\n * ### A list of badges with optional tooltips\n *\n * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.\n *\n */\nexport function BadgeList({ badges, limit, size = BadgeSize.Lg }: Props) {\n  const badgeZIndexMax = badges.length\n  const limitExcess =\n    // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️\n    limit && (badges.length > limit ? badges.length - limit : 0)\n\n  const maxBadges = limit ? limit - 1 : undefined\n  const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess)\n\n  return (\n    <Container $size={size}>\n      {badges\n        .slice(0, limitExcess ? maxBadges : undefined)\n        .map((badge, index) => (\n          <WithTooltip\n            key={typeof badge.src === 'string' ? badge.src : index}\n            badge={{\n              ...badge,\n              zIndex: badgeZIndexMax - index,\n              size,\n            }}\n          />\n        ))}\n\n      {showExcessBadge && (\n        <div\n          className=\"limit-badge\"\n          style={{ zIndex: badgeZIndexMax, marginLeft: '4px' }}\n        >\n          <Badge\n            title={`+${limitExcess}`}\n            borderColour=\"color.illustration.neutral.300\"\n            size={size}\n            src={<ExcessBadge excess={limitExcess + 1} />}\n            disabled\n          />\n        </div>\n      )}\n    </Container>\n  )\n}\n\ntype ExcessBadgeProps = {\n  excess: number\n}\n\nfunction ExcessBadge({ excess }: ExcessBadgeProps) {\n  return (\n    <ExcessBadgeContainer>\n      <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n        +{excess}\n      </Text>\n    </ExcessBadgeContainer>\n  )\n}\n\nconst ExcessBadgeContainer = styled.div`\n  display: flex;\n  align-items: center;\n  place-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: ${({ theme }) => theme.color.surface.base[400]};\n  pointer-events: none;\n`\n\ntype WithTooltipProps = {\n  badge: BadgeListBadge\n}\n\nconst WithTooltip = ({ badge: { tooltip, ...badge } }: WithTooltipProps) => {\n  if (tooltip) {\n    return (\n      <div style={{ zIndex: badge.zIndex }}>\n        <Tooltip\n          position={tooltip.position ?? 'bottom'}\n          title={tooltip?.title}\n          content={tooltip.content}\n        >\n          <Badge {...badge} />\n        </Tooltip>\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ zIndex: badge.zIndex }}>\n      <Badge {...badge} />\n    </div>\n  )\n}\n\nconst marginRightMapping = {\n  [BadgeSize.Lg]: '-18px',\n  [BadgeSize.Md]: '-14px',\n  [BadgeSize.Sm]: '-11px',\n} satisfies Record<BadgeSize, string>\n\nconst Container = styled.div<{ $size: BadgeSize }>`\n  display: flex;\n\n  > * {\n    transition:\n      margin 0.2s ease-in-out,\n      padding 0.2s ease-in-out;\n    margin-right: ${(props) => marginRightMapping[props.$size]};\n\n    &:hover:not(:first-child):not(.limit-badge) {\n      padding-left: 10px;\n      &:not(:last-child) {\n        padding-right: 5px;\n      }\n    }\n  }\n`\n"]}
+{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAmB,MAAM,gBAAgB,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAc9B;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,EAAE,EAAS;IACrE,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA;IACpC,MAAM,WAAW;IACf,yFAAyF;IACzF,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE9D,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC/C,MAAM,eAAe,GAAG,WAAW,KAAK,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,CAAA;IAEzE,OAAO,CACL,MAAC,SAAS,aAAQ,IAAI,aACnB,MAAM;iBACJ,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;iBAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,WAAW,IAEV,KAAK,EAAE;oBACL,GAAG,KAAK;oBACR,MAAM,EAAE,cAAc,GAAG,KAAK;oBAC9B,IAAI;iBACL,IALI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAMtD,CACH,CAAC,EAEH,eAAe,IAAI,CAClB,cACE,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,YAEpD,KAAC,KAAK,IACJ,KAAK,EAAE,IAAI,WAAW,EAAE,EACxB,YAAY,EAAC,gCAAgC,EAC7C,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAC,WAAW,IAAC,MAAM,EAAE,WAAW,GAAG,CAAC,GAAI,EAC7C,QAAQ,SACR,GACE,CACP,IACS,CACb,CAAA;AACH,CAAC;AAMD,SAAS,WAAW,CAAC,EAAE,MAAM,EAAoB;IAC/C,OAAO,CACL,KAAC,oBAAoB,cACnB,MAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,kBAC9C,MAAM,IACH,GACc,CACxB,CAAA;AACH,CAAC;AAED,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;sBAMjB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;CAEjE,CAAA;AAMD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAoB,EAAE,EAAE;IACzE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,YAClC,KAAC,OAAO,IACN,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,QAAQ,EACtC,KAAK,EAAE,OAAO,EAAE,KAAK,EACrB,OAAO,EAAE,OAAO,CAAC,OAAO,YAExB,KAAC,KAAK,OAAK,KAAK,GAAI,GACZ,GACN,CACP,CAAA;IACH,CAAC;IAED,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,YAClC,KAAC,KAAK,OAAK,KAAK,GAAI,GAChB,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG;IACzB,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,OAAO;IACvB,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,OAAO;IACvB,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,OAAO;CACY,CAAA;AAErC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAsB;;;;;;;oBAO9B,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;CAS7D,CAAA","sourcesContent":["import { Badge, BadgeSize, type BadgeProps } from '../Badge/Badge'\nimport styled from 'styled-components'\nimport { Tooltip } from '../Tooltip'\nimport type { TooltipProps } from '../Tooltip/Tooltip'\nimport { Text } from '../Text'\n\ntype WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {\n  position?: TooltipProps['position']\n}\n\nexport type BadgeListBadge = BadgeProps & { tooltip?: WithTooltip }\n\ntype Props = {\n  size?: BadgeProps['size']\n  limit?: number\n  badges: Omit<BadgeListBadge, 'zIndex'>[]\n}\n\n/**\n * ### A list of badges with optional tooltips\n *\n * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.\n *\n */\nexport function BadgeList({ badges, limit, size = BadgeSize.Lg }: Props) {\n  const badgeZIndexMax = badges.length\n  const limitExcess =\n    // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️\n    limit && (badges.length > limit ? badges.length - limit : 0)\n\n  const maxBadges = limit ? limit - 1 : undefined\n  const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess)\n\n  return (\n    <Container $size={size}>\n      {badges\n        .slice(0, limitExcess ? maxBadges : undefined)\n        .map((badge, index) => (\n          <WithTooltip\n            key={typeof badge.src === 'string' ? badge.src : index}\n            badge={{\n              ...badge,\n              zIndex: badgeZIndexMax - index,\n              size,\n            }}\n          />\n        ))}\n\n      {showExcessBadge && (\n        <div\n          className=\"limit-badge\"\n          style={{ zIndex: badgeZIndexMax, marginLeft: '4px' }}\n        >\n          <Badge\n            title={`+${limitExcess}`}\n            borderColour=\"color.illustration.neutral.300\"\n            size={size}\n            src={<ExcessBadge excess={limitExcess + 1} />}\n            disabled\n          />\n        </div>\n      )}\n    </Container>\n  )\n}\n\ntype ExcessBadgeProps = {\n  excess: number\n}\n\nfunction ExcessBadge({ excess }: ExcessBadgeProps) {\n  return (\n    <ExcessBadgeContainer>\n      <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n        +{excess}\n      </Text>\n    </ExcessBadgeContainer>\n  )\n}\n\nconst ExcessBadgeContainer = styled.div`\n  display: flex;\n  align-items: center;\n  place-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: ${({ theme }) => theme.color.surface.base[400]};\n  pointer-events: none;\n`\n\ntype WithTooltipProps = {\n  badge: BadgeListBadge\n}\n\nconst WithTooltip = ({ badge: { tooltip, ...badge } }: WithTooltipProps) => {\n  if (tooltip) {\n    return (\n      <div style={{ zIndex: badge.zIndex }}>\n        <Tooltip\n          position={tooltip.position ?? 'bottom'}\n          title={tooltip?.title}\n          content={tooltip.content}\n        >\n          <Badge {...badge} />\n        </Tooltip>\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ zIndex: badge.zIndex }}>\n      <Badge {...badge} />\n    </div>\n  )\n}\n\nconst marginRightMapping = {\n  [BadgeSize.Lg]: '-18px',\n  [BadgeSize.Md]: '-14px',\n  [BadgeSize.Sm]: '-11px',\n} satisfies Record<BadgeSize, string>\n\nconst Container = styled.div<{ $size: BadgeSize }>`\n  display: flex;\n\n  > * {\n    transition:\n      margin 0.2s ease-in-out,\n      padding 0.2s ease-in-out;\n    margin-right: ${(props) => marginRightMapping[props.$size]};\n\n    &:hover:not(:first-child):not(.limit-badge) {\n      padding-left: 10px;\n      &:not(:last-child) {\n        padding-right: 5px;\n      }\n    }\n  }\n`\n"]}

package/dist/Banner/BannerContainer.d.ts

@@ -1,6 +1,6 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { BannerContextType } from './types';
-export declare const BannerContext: React.Context<BannerContextType>;
+export declare const BannerContext: import("react").Context<BannerContextType>;
 export declare const useBannerContext: () => BannerContextType;
 export declare const BannerContainer: FC<{
     children?: ReactNode;

package/dist/Banner/BannerContainer.js

@@ -1,4 +1,5 @@
-import React, { createContext, useState, useCallback, useContext, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useContext } from 'react';
 import styled from 'styled-components';
 import { BannerItem } from './BannerItem';
 export const BannerContext = createContext({
@@ -26,11 +27,9 @@ export const BannerContainer = ({ children }) => {
     const deleteBanner = (id) => {
         setBanner(banner.filter((banner) => banner.id !== id));
     };
-    return (React.createElement(BannerContext.Provider, { value: {
+    return (_jsxs(BannerContext.Provider, { value: {
             addBanner,
-        } },
-        children,
-        React.createElement(BannerWrapper, null, banner.map((banner) => (React.createElement(BannerItem, { key: banner.id, ...banner, deleteBanner: deleteBanner }))))));
+        }, children: [children, _jsx(BannerWrapper, { children: banner.map((banner) => (_jsx(BannerItem, { ...banner, deleteBanner: deleteBanner }, banner.id))) })] }));
 };
 const BannerWrapper = styled.div `
   position: fixed;

package/dist/Banner/BannerContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContainer.js","sourceRoot":"","sources":["../../src/Banner/BannerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,QAAQ,EACR,WAAW,EAEX,UAAU,GACX,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAoB;IAC5D,SAAS,EAAE,GAAG,EAAE;QACd,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,IAAI,QAAQ,GAAG,CAAC,CAAA;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAElD,0BAA0B;IAC1B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,KAAK,GAAG,aAAa,QAAQ,EAAE,CAAA;QACrC,QAAQ,EAAE,CAAA;QACV,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,CAAC,MAAoB,EAAE,EAAE;QACzC,MAAM,SAAS,GAAG;YAChB,GAAG,MAAM;YACT,EAAE,EAAE,WAAW,EAAE;SAClB,CAAA;QACD,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,EAAU,EAAE,EAAE;QAClC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACxD,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,SAAS;SACV;QAEA,QAAQ;QACT,oBAAC,aAAa,QACX,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACtB,oBAAC,UAAU,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE,KAAM,MAAM,EAAE,YAAY,EAAE,YAAY,GAAI,CACvE,CAAC,CACY,CACO,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAA","sourcesContent":["import React, {\n  createContext,\n  FC,\n  useState,\n  useCallback,\n  ReactNode,\n  useContext,\n} from 'react'\nimport styled from 'styled-components'\nimport { BannerItem } from './BannerItem'\nimport { CreateBanner, Banner, BannerContextType } from './types'\n\nexport const BannerContext = createContext<BannerContextType>({\n  addBanner: () => {\n    throw new Error('Please add the BannerContainer to your application')\n  },\n})\n\nexport const useBannerContext = () => useContext(BannerContext)\n\nexport const BannerContainer: FC<{ children?: ReactNode }> = ({ children }) => {\n  let bannerId = 0\n  const [banner, setBanner] = useState<Banner[]>([])\n\n  // create banner unique ID\n  const newBannerId = useCallback(() => {\n    const newId = `MM_BANNER_${bannerId}`\n    bannerId++\n    return newId\n  }, [bannerId])\n\n  const addBanner = (banner: CreateBanner) => {\n    const newBanner = {\n      ...banner,\n      id: newBannerId(),\n    }\n    setBanner([newBanner])\n  }\n\n  const deleteBanner = (id: string) => {\n    setBanner(banner.filter((banner) => banner.id !== id))\n  }\n\n  return (\n    <BannerContext.Provider\n      value={{\n        addBanner,\n      }}\n    >\n      {children}\n      <BannerWrapper>\n        {banner.map((banner) => (\n          <BannerItem key={banner.id} {...banner} deleteBanner={deleteBanner} />\n        ))}\n      </BannerWrapper>\n    </BannerContext.Provider>\n  )\n}\n\nconst BannerWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: 99;\n`\n"]}
+{"version":3,"file":"BannerContainer.js","sourceRoot":"","sources":["../../src/Banner/BannerContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAM,QAAQ,EAAE,WAAW,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAoB;IAC5D,SAAS,EAAE,GAAG,EAAE;QACd,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AAE/D,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,IAAI,QAAQ,GAAG,CAAC,CAAA;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAElD,0BAA0B;IAC1B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,KAAK,GAAG,aAAa,QAAQ,EAAE,CAAA;QACrC,QAAQ,EAAE,CAAA;QACV,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,CAAC,MAAoB,EAAE,EAAE;QACzC,MAAM,SAAS,GAAG;YAChB,GAAG,MAAM;YACT,EAAE,EAAE,WAAW,EAAE;SAClB,CAAA;QACD,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,EAAU,EAAE,EAAE;QAClC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACxD,CAAC,CAAA;IAED,OAAO,CACL,MAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,SAAS;SACV,aAEA,QAAQ,EACT,KAAC,aAAa,cACX,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACtB,KAAC,UAAU,OAAqB,MAAM,EAAE,YAAY,EAAE,YAAY,IAAjD,MAAM,CAAC,EAAE,CAA4C,CACvE,CAAC,GACY,IACO,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAA","sourcesContent":["import { createContext, FC, useState, useCallback, ReactNode, useContext } from 'react';\nimport styled from 'styled-components'\nimport { BannerItem } from './BannerItem'\nimport { CreateBanner, Banner, BannerContextType } from './types'\n\nexport const BannerContext = createContext<BannerContextType>({\n  addBanner: () => {\n    throw new Error('Please add the BannerContainer to your application')\n  },\n})\n\nexport const useBannerContext = () => useContext(BannerContext)\n\nexport const BannerContainer: FC<{ children?: ReactNode }> = ({ children }) => {\n  let bannerId = 0\n  const [banner, setBanner] = useState<Banner[]>([])\n\n  // create banner unique ID\n  const newBannerId = useCallback(() => {\n    const newId = `MM_BANNER_${bannerId}`\n    bannerId++\n    return newId\n  }, [bannerId])\n\n  const addBanner = (banner: CreateBanner) => {\n    const newBanner = {\n      ...banner,\n      id: newBannerId(),\n    }\n    setBanner([newBanner])\n  }\n\n  const deleteBanner = (id: string) => {\n    setBanner(banner.filter((banner) => banner.id !== id))\n  }\n\n  return (\n    <BannerContext.Provider\n      value={{\n        addBanner,\n      }}\n    >\n      {children}\n      <BannerWrapper>\n        {banner.map((banner) => (\n          <BannerItem key={banner.id} {...banner} deleteBanner={deleteBanner} />\n        ))}\n      </BannerWrapper>\n    </BannerContext.Provider>\n  )\n}\n\nconst BannerWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: 99;\n`\n"]}

package/dist/Banner/BannerItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
@@ -40,16 +40,7 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
     useTimeout(() => autoCloseBaner(), autoCloseTime * 1000);
     const textColor = styles[type].textColor;
     const iconColor = styles[type].iconColor;
-    return (React.createElement(BannerWrapper, { p: "24px", mt: { custom: topOffset }, key: id, flex: true, justifyContent: "space-between", "$backgroundColour": styles[type].backgroundColor },
-        React.createElement(Box, { flex: true, alignItems: "center" },
-            leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor })),
-            React.createElement(Text, { typo: "headline-small", color: textColor }, message)),
-        React.createElement(Box, { flex: true, alignItems: "center" },
-            canManuallyClose && (React.createElement(GenericButton, { onClick: () => deleteBanner(id), "aria-label": `close banner ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: iconColor })) : (React.createElement(UnderlinedText, { tag: "span", typo: "headline-small", color: textColor }, "Dismiss")))),
-            exploreAction && (React.createElement(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}` },
-                React.createElement(Box, { flex: true, alignItems: "center" },
-                    showExploreText && (React.createElement(UnderlinedText, { ml: "12px", tag: "span", typo: "headline-small", color: textColor }, "Explore")),
-                    showExploreIcon && (React.createElement(Icon, { render: "arrow", ml: "12px", size: 24, color: iconColor, rotate: 180 }))))))));
+    return (_jsxs(BannerWrapper, { p: "24px", mt: { custom: topOffset }, flex: true, justifyContent: "space-between", "$backgroundColour": styles[type].backgroundColor, children: [_jsxs(Box, { flex: true, alignItems: "center", children: [leadingIcon && (_jsx(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor })), _jsx(Text, { typo: "headline-small", color: textColor, children: message })] }), _jsxs(Box, { flex: true, alignItems: "center", children: [canManuallyClose && (_jsx(GenericButton, { onClick: () => deleteBanner(id), "aria-label": `close banner ${message}`, children: showCloseIcon ? (_jsx(Icon, { render: "cross", size: 16, color: iconColor })) : (_jsx(UnderlinedText, { tag: "span", typo: "headline-small", color: textColor, children: "Dismiss" })) })), exploreAction && (_jsx(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}`, children: _jsxs(Box, { flex: true, alignItems: "center", children: [showExploreText && (_jsx(UnderlinedText, { ml: "12px", tag: "span", typo: "headline-small", color: textColor, children: "Explore" })), showExploreIcon && (_jsx(Icon, { render: "arrow", ml: "12px", size: 24, color: iconColor, rotate: 180 }))] }) }))] })] }, id));
 };
 const BannerWrapper = styled(Box)(({ $backgroundColour }) => css `
     border-radius: 0px 0px 16px 16px;

package/dist/Banner/BannerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { useTimeout } from '../hooks'\nimport { Banner } from './types'\nimport { NewColor } from 'ThemeProvider/utils/colourMap'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: string\n  textColor: NewColor\n}\n\ntype BannerType = 'upsell' | 'critical' | 'general' | 'success'\n\ninterface Props extends Banner {\n  deleteBanner: (id: string) => void\n}\n\nexport const BannerItem: FC<Props> = ({\n  type,\n  autoCloseTime = 4,\n  id,\n  message,\n  topOffset,\n  exploreAction,\n  showExploreText,\n  showExploreIcon,\n  leadingIcon,\n  canManuallyClose,\n  showCloseIcon,\n  deleteBanner,\n  noTimeout,\n}) => {\n  const theme = useTheme()\n\n  const styles: Record<BannerType, StylesItem> = {\n    upsell: {\n      iconColor: 'color.icon.base',\n      backgroundColor: theme.color.surface.brand[300],\n      textColor: 'color.text.base',\n    },\n    critical: {\n      iconColor: 'color.icon.on-dark',\n      backgroundColor: theme.color.feedback.negative[200],\n      textColor: 'color.text.on-dark',\n    },\n    general: {\n      iconColor: 'color.icon.on-dark',\n      backgroundColor: theme.color.surface.base[900],\n      textColor: 'color.text.on-dark',\n    },\n    success: {\n      iconColor: 'color.icon.on-dark',\n      backgroundColor: theme.color.feedback.positive[200],\n      textColor: 'color.text.on-dark',\n    },\n  }\n  const autoCloseBaner = () => {\n    if (noTimeout) return\n    if (type !== 'critical') return deleteBanner(id)\n    else {\n      return\n    }\n  }\n  useTimeout(() => autoCloseBaner(), autoCloseTime * 1000)\n\n  const textColor = styles[type].textColor\n  const iconColor = styles[type].iconColor\n\n  return (\n    <BannerWrapper\n      p=\"24px\"\n      mt={{ custom: topOffset }}\n      key={id}\n      flex\n      justifyContent=\"space-between\"\n      $backgroundColour={styles[type].backgroundColor}\n    >\n      <Box flex alignItems=\"center\">\n        {leadingIcon && (\n          <Icon mr=\"12px\" render={leadingIcon} size={24} color={iconColor} />\n        )}\n        <Text typo=\"headline-small\" color={textColor}>\n          {message}\n        </Text>\n      </Box>\n      <Box flex alignItems=\"center\">\n        {canManuallyClose && (\n          <GenericButton\n            onClick={() => deleteBanner(id)}\n            aria-label={`close banner ${message}`}\n          >\n            {showCloseIcon ? (\n              <Icon render=\"cross\" size={16} color={iconColor} />\n            ) : (\n              <UnderlinedText\n                tag=\"span\"\n                typo=\"headline-small\"\n                color={textColor}\n              >\n                Dismiss\n              </UnderlinedText>\n            )}\n          </GenericButton>\n        )}\n        {exploreAction && (\n          <GenericButton onClick={exploreAction} aria-label={`cta ${message}`}>\n            <Box flex alignItems=\"center\">\n              {showExploreText && (\n                <UnderlinedText\n                  ml=\"12px\"\n                  tag=\"span\"\n                  typo=\"headline-small\"\n                  color={textColor}\n                >\n                  Explore\n                </UnderlinedText>\n              )}\n              {showExploreIcon && (\n                <Icon\n                  render=\"arrow\"\n                  ml=\"12px\"\n                  size={24}\n                  color={iconColor}\n                  rotate={180}\n                />\n              )}\n            </Box>\n          </GenericButton>\n        )}\n      </Box>\n    </BannerWrapper>\n  )\n}\n\nconst BannerWrapper = styled(Box)<{ $backgroundColour: string }>(\n  ({ $backgroundColour }) => css`\n    border-radius: 0px 0px 16px 16px;\n    background-color: ${$backgroundColour};\n  `,\n)\n\nconst GenericButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"]}
+{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport styled, { css, useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { useTimeout } from '../hooks'\nimport { Banner } from './types'\nimport { NewColor } from 'ThemeProvider/utils/colourMap'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: string\n  textColor: NewColor\n}\n\ntype BannerType = 'upsell' | 'critical' | 'general' | 'success'\n\ninterface Props extends Banner {\n  deleteBanner: (id: string) => void\n}\n\nexport const BannerItem: FC<Props> = ({\n  type,\n  autoCloseTime = 4,\n  id,\n  message,\n  topOffset,\n  exploreAction,\n  showExploreText,\n  showExploreIcon,\n  leadingIcon,\n  canManuallyClose,\n  showCloseIcon,\n  deleteBanner,\n  noTimeout,\n}) => {\n  const theme = useTheme()\n\n  const styles: Record<BannerType, StylesItem> = {\n    upsell: {\n      iconColor: 'color.icon.base',\n      backgroundColor: theme.color.surface.brand[300],\n      textColor: 'color.text.base',\n    },\n    critical: {\n      iconColor: 'color.icon.on-dark',\n      backgroundColor: theme.color.feedback.negative[200],\n      textColor: 'color.text.on-dark',\n    },\n    general: {\n      iconColor: 'color.icon.on-dark',\n      backgroundColor: theme.color.surface.base[900],\n      textColor: 'color.text.on-dark',\n    },\n    success: {\n      iconColor: 'color.icon.on-dark',\n      backgroundColor: theme.color.feedback.positive[200],\n      textColor: 'color.text.on-dark',\n    },\n  }\n  const autoCloseBaner = () => {\n    if (noTimeout) return\n    if (type !== 'critical') return deleteBanner(id)\n    else {\n      return\n    }\n  }\n  useTimeout(() => autoCloseBaner(), autoCloseTime * 1000)\n\n  const textColor = styles[type].textColor\n  const iconColor = styles[type].iconColor\n\n  return (\n    <BannerWrapper\n      p=\"24px\"\n      mt={{ custom: topOffset }}\n      key={id}\n      flex\n      justifyContent=\"space-between\"\n      $backgroundColour={styles[type].backgroundColor}\n    >\n      <Box flex alignItems=\"center\">\n        {leadingIcon && (\n          <Icon mr=\"12px\" render={leadingIcon} size={24} color={iconColor} />\n        )}\n        <Text typo=\"headline-small\" color={textColor}>\n          {message}\n        </Text>\n      </Box>\n      <Box flex alignItems=\"center\">\n        {canManuallyClose && (\n          <GenericButton\n            onClick={() => deleteBanner(id)}\n            aria-label={`close banner ${message}`}\n          >\n            {showCloseIcon ? (\n              <Icon render=\"cross\" size={16} color={iconColor} />\n            ) : (\n              <UnderlinedText\n                tag=\"span\"\n                typo=\"headline-small\"\n                color={textColor}\n              >\n                Dismiss\n              </UnderlinedText>\n            )}\n          </GenericButton>\n        )}\n        {exploreAction && (\n          <GenericButton onClick={exploreAction} aria-label={`cta ${message}`}>\n            <Box flex alignItems=\"center\">\n              {showExploreText && (\n                <UnderlinedText\n                  ml=\"12px\"\n                  tag=\"span\"\n                  typo=\"headline-small\"\n                  color={textColor}\n                >\n                  Explore\n                </UnderlinedText>\n              )}\n              {showExploreIcon && (\n                <Icon\n                  render=\"arrow\"\n                  ml=\"12px\"\n                  size={24}\n                  color={iconColor}\n                  rotate={180}\n                />\n              )}\n            </Box>\n          </GenericButton>\n        )}\n      </Box>\n    </BannerWrapper>\n  )\n}\n\nconst BannerWrapper = styled(Box)<{ $backgroundColour: string }>(\n  ({ $backgroundColour }) => css`\n    border-radius: 0px 0px 16px 16px;\n    background-color: ${$backgroundColour};\n  `,\n)\n\nconst GenericButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"]}

package/dist/Box/Box.d.ts

@@ -1,4 +1,4 @@
-import React, { ElementType, HTMLAttributes } from 'react';
+import { ElementType, HTMLAttributes } from 'react';
 import { FlexProps, TransientFlexProps } from '../utils/flex';
 import { MeasureProps, TransientMeasureProps } from '../utils/measure';
 import { MarginProps, PaddingProps, TransientMarginProps, TransientPaddingProps } from '../utils/space';
@@ -7,8 +7,8 @@ export type BoxProps = MarginProps & PaddingProps & FlexProps & MeasureProps & H
     forwardedAs?: ElementType;
 };
 export type TransientBoxProps = TransientMarginProps & TransientPaddingProps & TransientFlexProps & TransientMeasureProps;
-export declare const Box: React.ForwardRefExoticComponent<MarginProps & PaddingProps & FlexProps & MeasureProps & React.HTMLAttributes<HTMLElement> & {
+export declare const Box: import("react").ForwardRefExoticComponent<MarginProps & PaddingProps & FlexProps & MeasureProps & HTMLAttributes<HTMLElement> & {
     as?: ElementType;
     forwardedAs?: ElementType;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const CustomBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TransientBoxProps>> & string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CustomBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TransientBoxProps>> & string;

package/dist/Box/Box.js

@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { flex } from '../utils/flex';
 import { measure } from '../utils/measure';
 import { margin, padding, } from '../utils/space';
 export const Box = forwardRef(({ children, ...props }, ref) => {
     const { m, mx, my, ml, mr, mt, mb, p, px, py, pl, pr, pt, pb, direction, wrap, flex, flow, justifyContent, alignItems, alignContent, gap, rowGap, columnGap, width, maxWidth, minWidth, height, maxHeight, minHeight, ...otherProps } = props;
-    return (React.createElement(CustomBox, { ref: ref, "$m": m, "$mx": mx, "$my": my, "$ml": ml, "$mr": mr, "$mt": mt, "$mb": mb, "$p": p, "$px": px, "$py": py, "$pl": pl, "$pr": pr, "$pt": pt, "$pb": pb, "$direction": direction, "$wrap": wrap, "$flex": flex, "$flow": flow, "$justifyContent": justifyContent, "$alignItems": alignItems, "$alignContent": alignContent, "$gap": gap, "$rowGap": rowGap, "$columnGap": columnGap, "$width": width, "$maxWidth": maxWidth, "$minWidth": minWidth, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, ...otherProps }, children));
+    return (_jsx(CustomBox, { ref: ref, "$m": m, "$mx": mx, "$my": my, "$ml": ml, "$mr": mr, "$mt": mt, "$mb": mb, "$p": p, "$px": px, "$py": py, "$pl": pl, "$pr": pr, "$pt": pt, "$pb": pb, "$direction": direction, "$wrap": wrap, "$flex": flex, "$flow": flow, "$justifyContent": justifyContent, "$alignItems": alignItems, "$alignContent": alignContent, "$gap": gap, "$rowGap": rowGap, "$columnGap": columnGap, "$width": width, "$maxWidth": maxWidth, "$minWidth": minWidth, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, ...otherProps, children: children }));
 });
 Box.displayName = 'Box';
 export const CustomBox = styled.div `