@mrshmllw/smores-react 16.2.13 → 16.2.15

package/dist/Accordion/Accordion.js

@@ -18,7 +18,7 @@ export const Accordion = ({ title, children, onToggle, filledBackground, default
         onToggle?.(nextOpenState);
         setIsOpen(nextOpenState);
     };
-    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: "space.200", pr: "space.200", pl: px, children: [_jsxs(TitleContainer, { children: [_jsx(Text, { tag: "h2", typo: "headline-regular", children: title }), subTitle && (_jsx(Text, { tag: "label", typo: "label", mt: "space.050", children: subTitle }))] }), _jsx(CaretIcon, { "$size": 20, "$isOpen": isOpen, "$borderTop": borderTop, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.illustration.neutral[400] }) })] }), isOpen && (_jsx(Box, { pt: "space.150", pb: "space.200", px: px, children: 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: "space.200", pr: "space.200", pl: px, children: [_jsxs(TitleContainer, { children: [_jsx(Text, { tag: "h2", typo: "headline-regular", children: title }), subTitle && (_jsx(Text, { tag: "label", typo: "label", mt: "space.050", children: subTitle }))] }), _jsx(CaretIcon, { $size: 20, $isOpen: isOpen, $borderTop: borderTop, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.illustration.neutral[400] }) })] }), isOpen && (_jsx(Box, { pt: "space.150", pb: "space.200", px: px, children: children }))] }));
 };
 const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $borderColor, $backgroundColor, }) => css `
     border-bottom: 1px solid ${$borderColor};
@@ -26,14 +26,14 @@ const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $bord
 
     ${$fullBorder &&
     css `
-      border: 1px solid ${$borderColor};
-      border-radius: 16px;
-    `}
+        border: 1px solid ${$borderColor};
+        border-radius: 16px;
+      `}
 
     ${$filledBackground &&
     css `
-      background-color: ${$backgroundColor};
-    `}
+        background-color: ${$backgroundColor};
+      `}
   `);
 const TitleContainer = styled.div `
   display: flex;

package/dist/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"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 { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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=\"space.200\"\n        pr=\"space.200\"\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=\"space.050\">\n              {subTitle}\n            </Text>\n          )}\n        </TitleContainer>\n\n        <CaretIcon $size={20} $isOpen={isOpen} $borderTop={borderTop}>\n          <FontAwesomeIcon\n            icon={faChevronDown}\n            color={theme.color.illustration.neutral[400]}\n          />\n        </CaretIcon>\n      </TopContainer>\n      {isOpen && (\n        <Box pt=\"space.150\" pb=\"space.200\" 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(IconContainer)<\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 { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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' | 'custard' | 'cream' | 'coconut' | 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=\"space.200\"\n        pr=\"space.200\"\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=\"space.050\">\n              {subTitle}\n            </Text>\n          )}\n        </TitleContainer>\n\n        <CaretIcon $size={20} $isOpen={isOpen} $borderTop={borderTop}>\n          <FontAwesomeIcon\n            icon={faChevronDown}\n            color={theme.color.illustration.neutral[400]}\n          />\n        </CaretIcon>\n      </TopContainer>\n      {isOpen && (\n        <Box pt=\"space.150\" pb=\"space.200\" 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    ${\n      $fullBorder &&\n      css`\n        border: 1px solid ${$borderColor};\n        border-radius: 16px;\n      `\n    }\n\n    ${\n      $filledBackground &&\n      css`\n        background-color: ${$backgroundColor};\n      `\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(IconContainer)<\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

@@ -13,7 +13,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 (_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(IconContainer, { "$size": 20, style: {
+    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(IconContainer, { $size: 20, style: {
                             rotate: open ? '180deg' : '0deg',
                         }, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: resolvedTextColor }) })] }), _jsx(OuterContainer, { open: open, children: _jsx(List, { options: list, selectOption: onSelect }) })] }));
 };

package/dist/ActionDropdown/ActionDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { ActionListItem, List } from './List'\n\nimport { MarginProps } from '../utils/space'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { IconContainer } from '../sharedStyles/shared.styles'\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        <IconContainer\n          $size={20}\n          style={{\n            rotate: open ? '180deg' : '0deg',\n          }}\n        >\n          <FontAwesomeIcon icon={faChevronDown} color={resolvedTextColor} />\n        </IconContainer>\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: ${({ theme }) => theme.space[100]};\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":"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","sourcesContent":["import { FC, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { ActionListItem, List } from './List'\n\nimport { MarginProps } from '../utils/space'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { IconContainer } from '../sharedStyles/shared.styles'\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        <IconContainer\n          $size={20}\n          style={{\n            rotate: open ? '180deg' : '0deg',\n          }}\n        >\n          <FontAwesomeIcon icon={faChevronDown} color={resolvedTextColor} />\n        </IconContainer>\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: ${({ theme }) => theme.space[100]};\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/Alert/Alert.js

@@ -41,7 +41,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 (_jsxs(StyledAlert, { "$backgroundColor": backgroundColor, "$accentColor": accentColor, "$alertClosed": alertClosed, "$maxWidth": maxWidth, ...marginProps, children: [_jsx(IconContainer, { "$size": 16, style: { margin: '2px' }, children: _jsx(FontAwesomeIcon, { icon: typeConfig[type].icon, color: theme.color.icon.base }) }), _jsxs(Box, { flex: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start", width: "100%", gap: "space.100", children: [_jsxs(Box, { maxWidth: "512px", children: [title && (_jsx(Text, { mb: "space.050", 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(IconContainer, { as: "button", type: "button", title: "icon-button", "$size": 16, style: { cursor: 'pointer' }, onClick: () => setAlertClosed(true), children: _jsx(FontAwesomeIcon, { icon: faXmark, color: theme.color.icon.base }) }))] })] }));
+    return (_jsxs(StyledAlert, { $backgroundColor: backgroundColor, $accentColor: accentColor, $alertClosed: alertClosed, $maxWidth: maxWidth, ...marginProps, children: [_jsx(IconContainer, { $size: 16, style: { margin: '2px' }, children: _jsx(FontAwesomeIcon, { icon: typeConfig[type].icon, color: theme.color.icon.base }) }), _jsxs(Box, { flex: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start", width: "100%", gap: "space.100", children: [_jsxs(Box, { maxWidth: "512px", children: [title && (_jsx(Text, { mb: "space.050", 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(IconContainer, { as: "button", type: "button", title: "icon-button", $size: 16, style: { cursor: 'pointer' }, onClick: () => setAlertClosed(true), children: _jsx(FontAwesomeIcon, { icon: faXmark, color: theme.color.icon.base }) }))] })] }));
 };
 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 { 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 { Text } from '../Text'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faCircleInfo,\n  faTriangleExclamation,\n  faCircleExclamation,\n  faCircleCheck,\n  faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { IconContainer } from '../sharedStyles/shared.styles'\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\nexport type 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: IconDefinition\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n  info: {\n    backgroundColor: 'color.feedback.informative.100',\n    accentColor: 'color.feedback.informative.200',\n    icon: faCircleInfo,\n  },\n  fallback: {\n    backgroundColor: 'color.surface.base.100',\n    accentColor: 'color.surface.base.400',\n    icon: faCircleInfo,\n  },\n  notice: {\n    backgroundColor: 'color.feedback.notice.100',\n    accentColor: 'color.feedback.notice.200',\n    icon: faTriangleExclamation,\n  },\n  negative: {\n    backgroundColor: 'color.feedback.negative.100',\n    accentColor: 'color.feedback.negative.200',\n    icon: faCircleExclamation,\n  },\n  positive: {\n    backgroundColor: 'color.feedback.positive.100',\n    accentColor: 'color.feedback.positive.200',\n    icon: faCircleCheck,\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      <IconContainer $size={16} style={{ margin: '2px' }}>\n        <FontAwesomeIcon\n          icon={typeConfig[type].icon}\n          color={theme.color.icon.base}\n        />\n      </IconContainer>\n      <Box\n        flex\n        direction=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        width=\"100%\"\n        gap=\"space.100\"\n      >\n        <Box maxWidth=\"512px\">\n          {title && (\n            <Text mb=\"space.050\" 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          <IconContainer\n            as=\"button\"\n            type=\"button\"\n            title=\"icon-button\"\n            $size={16}\n            style={{ cursor: 'pointer' }}\n            onClick={() => setAlertClosed(true)}\n          >\n            <FontAwesomeIcon icon={faXmark} color={theme.color.icon.base} />\n          </IconContainer>\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: ${({ theme }) => theme.space[100]};\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 { Text } from '../Text'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faCircleInfo,\n  faTriangleExclamation,\n  faCircleExclamation,\n  faCircleCheck,\n  faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { IconContainer } from '../sharedStyles/shared.styles'\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\nexport type 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: IconDefinition\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n  info: {\n    backgroundColor: 'color.feedback.informative.100',\n    accentColor: 'color.feedback.informative.200',\n    icon: faCircleInfo,\n  },\n  fallback: {\n    backgroundColor: 'color.surface.base.100',\n    accentColor: 'color.surface.base.400',\n    icon: faCircleInfo,\n  },\n  notice: {\n    backgroundColor: 'color.feedback.notice.100',\n    accentColor: 'color.feedback.notice.200',\n    icon: faTriangleExclamation,\n  },\n  negative: {\n    backgroundColor: 'color.feedback.negative.100',\n    accentColor: 'color.feedback.negative.200',\n    icon: faCircleExclamation,\n  },\n  positive: {\n    backgroundColor: 'color.feedback.positive.100',\n    accentColor: 'color.feedback.positive.200',\n    icon: faCircleCheck,\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      <IconContainer $size={16} style={{ margin: '2px' }}>\n        <FontAwesomeIcon\n          icon={typeConfig[type].icon}\n          color={theme.color.icon.base}\n        />\n      </IconContainer>\n      <Box\n        flex\n        direction=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        width=\"100%\"\n        gap=\"space.100\"\n      >\n        <Box maxWidth=\"512px\">\n          {title && (\n            <Text mb=\"space.050\" 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          <IconContainer\n            as=\"button\"\n            type=\"button\"\n            title=\"icon-button\"\n            $size={16}\n            style={{ cursor: 'pointer' }}\n            onClick={() => setAlertClosed(true)}\n          >\n            <FontAwesomeIcon icon={faXmark} color={theme.color.icon.base} />\n          </IconContainer>\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: ${({ theme }) => theme.space[100]};\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.js

@@ -14,9 +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 (_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 (_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 (_jsx(Container, { "$borderColour": resolvedBorderColor, "$size": size, "$disabled": disabled, "$zIndex": zIndex, "$src": null, children: src }));
+    return (_jsx(Container, { $borderColour: resolvedBorderColor, $size: size, $disabled: disabled, $zIndex: zIndex, $src: null, children: src }));
 }
 const Container = styled.div((props) => {
     return css `
@@ -35,11 +35,11 @@ const Container = styled.div((props) => {
 
     ${!props.$disabled &&
         css `
-      &:hover {
-        cursor: pointer;
-        box-shadow: 0 0 0px 5px #f0f0f0;
-      }
-    `}
+        &:hover {
+          cursor: pointer;
+          box-shadow: 0 0 0px 5px #f0f0f0;
+        }
+      `}
   `;
 });
 //# sourceMappingURL=Badge.js.map

package/dist/Badge/Badge.js.map

@@ -1 +1 @@
-{"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"]}
+{"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,IACR,aAAa,EAAE,mBAAmB,EAClC,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,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,IACR,aAAa,EAAE,mBAAmB,EAClC,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,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;;MAG3B,CAAC,KAAK,CAAC,SAAS;QAChB,GAAG,CAAA;;;;;OAML;GACD,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    ${\n      !props.$disabled &&\n      css`\n        &:hover {\n          cursor: pointer;\n          box-shadow: 0 0 0px 5px #f0f0f0;\n        }\n      `\n    }\n  `\n})\n"]}

package/dist/Badge/BadgeFallbackImage.js

@@ -10,8 +10,10 @@ export function BadgeFallbackImage({ title }) {
         theme.color.surface.brand[300],
         theme.color.surface.brand[400],
     ];
-    const bgColour = useRef(fallbackBackgroundColours[Math.floor(Math.random() * fallbackBackgroundColours.length)]);
-    return (_jsx(StyledFallbackImage, { "$backgroundColour": bgColour.current, children: _jsx(Text, { typo: "caption", style: { fontWeight: 'bold' }, children: title?.substring(0, 2) ?? null }) }));
+    const bgColour = useRef(fallbackBackgroundColours[
+    // oxlint-disable-next-line react/react-compiler
+    Math.floor(Math.random() * fallbackBackgroundColours.length)]);
+    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,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,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"]}
+{"version":3,"file":"BadgeFallbackImage.js","sourceRoot":"","sources":["../../src/Badge/BadgeFallbackImage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,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;IACvB,gDAAgD;IAChD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAC7D,CACF,CAAA;IACD,OAAO,CAEL,KAAC,mBAAmB,IAAC,iBAAiB,EAAE,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      // oxlint-disable-next-line react/react-compiler\n      Math.floor(Math.random() * fallbackBackgroundColours.length)\n    ],\n  )\n  return (\n    // oxlint-disable-next-line react/react-compiler\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.js

@@ -16,7 +16,7 @@ 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 (_jsxs(Container, { "$size": size, children: [badges
+    return (_jsxs(Container, { $size: size, children: [badges
                 .slice(0, limitExcess ? maxBadges : undefined)
                 .map((badge, index) => (_jsx(WithTooltip, { badge: {
                     ...badge,

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 { 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":"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","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/BannerItem.js

@@ -45,8 +45,8 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
     const textColor = styles[type].textColor;
     const iconColor = styles[type].iconColor;
     const resolvedIconColor = resolveToThemeColor(iconColor, theme);
-    const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": 24, "$iconColor": resolvedIconColor, style: { marginRight: '12px' }, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "space.150", render: leadingIcon, size: 24, color: iconColor })) : null;
-    return (_jsxs(BannerWrapper, { p: "space.300", mt: { custom: topOffset }, flex: true, justifyContent: "space-between", "$backgroundColour": styles[type].backgroundColor, children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _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(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faXmark, color: resolveToThemeColor(iconColor, theme) }) })) : (_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: "space.150", tag: "span", typo: "headline-small", color: textColor, children: "Explore" })), showExploreIcon && (_jsx(IconContainer, { "$size": 24, style: { marginLeft: '12px' }, children: _jsx(FontAwesomeIcon, { color: resolvedIconColor, icon: faArrowRight }) }))] }) }))] })] }, id));
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { $size: 24, $iconColor: resolvedIconColor, style: { marginRight: '12px' }, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "space.150", render: leadingIcon, size: 24, color: iconColor })) : null;
+    return (_jsxs(BannerWrapper, { p: "space.300", mt: { custom: topOffset }, flex: true, justifyContent: "space-between", $backgroundColour: styles[type].backgroundColor, children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _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(IconContainer, { $size: 16, children: _jsx(FontAwesomeIcon, { icon: faXmark, color: resolveToThemeColor(iconColor, theme) }) })) : (_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: "space.150", tag: "span", typo: "headline-small", color: textColor, children: "Explore" })), showExploreIcon && (_jsx(IconContainer, { $size: 24, style: { marginLeft: '12px' }, children: _jsx(FontAwesomeIcon, { color: resolvedIconColor, icon: faArrowRight }) }))] }) }))] })] }, 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 { 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, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faArrowRight,\n  faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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  iconComponent,\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.inverse',\n      backgroundColor: theme.color.feedback.negative[200],\n      textColor: 'color.text.inverse',\n    },\n    general: {\n      iconColor: 'color.icon.inverse',\n      backgroundColor: theme.color.surface.base[900],\n      textColor: 'color.text.inverse',\n    },\n    success: {\n      iconColor: 'color.icon.inverse',\n      backgroundColor: theme.color.feedback.positive[200],\n      textColor: 'color.text.inverse',\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  const resolvedIconColor = resolveToThemeColor(iconColor, theme)\n\n  const iconToRender = iconComponent ? (\n    <IconContainer\n      $size={24}\n      $iconColor={resolvedIconColor}\n      style={{ marginRight: '12px' }}\n    >\n      {iconComponent}\n    </IconContainer>\n  ) : leadingIcon ? (\n    <Icon mr=\"space.150\" render={leadingIcon} size={24} color={iconColor} />\n  ) : null\n\n  return (\n    <BannerWrapper\n      p=\"space.300\"\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        {iconToRender}\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              <IconContainer $size={16}>\n                <FontAwesomeIcon\n                  icon={faXmark}\n                  color={resolveToThemeColor(iconColor, theme)}\n                />\n              </IconContainer>\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=\"space.150\"\n                  tag=\"span\"\n                  typo=\"headline-small\"\n                  color={textColor}\n                >\n                  Explore\n                </UnderlinedText>\n              )}\n              {showExploreIcon && (\n                <IconContainer $size={24} style={{ marginLeft: '12px' }}>\n                  <FontAwesomeIcon\n                    color={resolvedIconColor}\n                    icon={faArrowRight}\n                  />\n                </IconContainer>\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, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faArrowRight,\n  faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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  iconComponent,\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.inverse',\n      backgroundColor: theme.color.feedback.negative[200],\n      textColor: 'color.text.inverse',\n    },\n    general: {\n      iconColor: 'color.icon.inverse',\n      backgroundColor: theme.color.surface.base[900],\n      textColor: 'color.text.inverse',\n    },\n    success: {\n      iconColor: 'color.icon.inverse',\n      backgroundColor: theme.color.feedback.positive[200],\n      textColor: 'color.text.inverse',\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  const resolvedIconColor = resolveToThemeColor(iconColor, theme)\n\n  const iconToRender = iconComponent ? (\n    <IconContainer\n      $size={24}\n      $iconColor={resolvedIconColor}\n      style={{ marginRight: '12px' }}\n    >\n      {iconComponent}\n    </IconContainer>\n  ) : leadingIcon ? (\n    <Icon mr=\"space.150\" render={leadingIcon} size={24} color={iconColor} />\n  ) : null\n\n  return (\n    <BannerWrapper\n      p=\"space.300\"\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        {iconToRender}\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              <IconContainer $size={16}>\n                <FontAwesomeIcon\n                  icon={faXmark}\n                  color={resolveToThemeColor(iconColor, theme)}\n                />\n              </IconContainer>\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=\"space.150\"\n                  tag=\"span\"\n                  typo=\"headline-small\"\n                  color={textColor}\n                >\n                  Explore\n                </UnderlinedText>\n              )}\n              {showExploreIcon && (\n                <IconContainer $size={24} style={{ marginLeft: '12px' }}>\n                  <FontAwesomeIcon\n                    color={resolvedIconColor}\n                    icon={faArrowRight}\n                  />\n                </IconContainer>\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

@@ -11,4 +11,4 @@ export declare const Box: import("react").ForwardRefExoticComponent<MarginProps
     as?: ElementType;
     forwardedAs?: ElementType;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CustomBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$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"> & import("..").TransientProps<MarginProps> & import("..").TransientProps<PaddingProps> & import("..").TransientProps<FlexProps> & import("..").TransientProps<MeasureProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$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"> & import("..").TransientProps<MarginProps> & import("..").TransientProps<PaddingProps> & import("..").TransientProps<FlexProps> & import("..").TransientProps<MeasureProps>, never>>> & string;
+export declare const CustomBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$alignContent" | "$alignItems" | "$columnGap" | "$direction" | "$flex" | "$flow" | "$gap" | "$height" | "$justifyContent" | "$m" | "$maxHeight" | "$maxWidth" | "$mb" | "$minHeight" | "$minWidth" | "$ml" | "$mr" | "$mt" | "$mx" | "$my" | "$p" | "$pb" | "$pl" | "$pr" | "$pt" | "$px" | "$py" | "$rowGap" | "$width" | "$wrap"> & import("..").TransientProps<MarginProps> & import("..").TransientProps<PaddingProps> & import("..").TransientProps<FlexProps> & import("..").TransientProps<MeasureProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$alignContent" | "$alignItems" | "$columnGap" | "$direction" | "$flex" | "$flow" | "$gap" | "$height" | "$justifyContent" | "$m" | "$maxHeight" | "$maxWidth" | "$mb" | "$minHeight" | "$minWidth" | "$ml" | "$mr" | "$mt" | "$mx" | "$my" | "$p" | "$pb" | "$pl" | "$pr" | "$pt" | "$px" | "$py" | "$rowGap" | "$width" | "$wrap"> & import("..").TransientProps<MarginProps> & import("..").TransientProps<PaddingProps> & import("..").TransientProps<FlexProps> & import("..").TransientProps<MeasureProps>, never>>> & string;

package/dist/Box/Box.js

@@ -6,7 +6,7 @@ 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 (_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 }));
+    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 `

package/dist/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAiC,IAAI,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAuC,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAKL,MAAM,EACN,OAAO,GACR,MAAM,gBAAgB,CAAA;AAgBvB,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,MAAM,EACJ,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,QACJ,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,QACH,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,gBACK,SAAS,WACd,IAAI,WACJ,IAAI,WACJ,IAAI,qBACM,cAAc,iBAClB,UAAU,mBACR,YAAY,UACrB,GAAG,aACA,MAAM,gBACH,SAAS,YACb,KAAK,eACF,QAAQ,eACR,QAAQ,aACV,MAAM,gBACH,SAAS,gBACT,SAAS,KACjB,UAAU,YAEb,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AACD,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA;AAEvB,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAmB;IAClD,MAAM;IACN,OAAO;IACP,IAAI;IACJ,OAAO;CACV,CAAA","sourcesContent":["import { ElementType, HTMLAttributes, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { FlexProps, TransientFlexProps, flex } from '../utils/flex'\nimport { MeasureProps, TransientMeasureProps, measure } from '../utils/measure'\nimport {\n  MarginProps,\n  PaddingProps,\n  TransientMarginProps,\n  TransientPaddingProps,\n  margin,\n  padding,\n} from '../utils/space'\n\nexport type BoxProps = MarginProps &\n  PaddingProps &\n  FlexProps &\n  MeasureProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: ElementType\n    forwardedAs?: ElementType\n  }\n\nexport type TransientBoxProps = TransientMarginProps &\n  TransientPaddingProps &\n  TransientFlexProps &\n  TransientMeasureProps\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  ({ children, ...props }, ref) => {\n    const {\n      m,\n      mx,\n      my,\n      ml,\n      mr,\n      mt,\n      mb,\n      p,\n      px,\n      py,\n      pl,\n      pr,\n      pt,\n      pb,\n      direction,\n      wrap,\n      flex,\n      flow,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n      width,\n      maxWidth,\n      minWidth,\n      height,\n      maxHeight,\n      minHeight,\n      ...otherProps\n    } = props\n\n    return (\n      <CustomBox\n        ref={ref}\n        $m={m}\n        $mx={mx}\n        $my={my}\n        $ml={ml}\n        $mr={mr}\n        $mt={mt}\n        $mb={mb}\n        $p={p}\n        $px={px}\n        $py={py}\n        $pl={pl}\n        $pr={pr}\n        $pt={pt}\n        $pb={pb}\n        $direction={direction}\n        $wrap={wrap}\n        $flex={flex}\n        $flow={flow}\n        $justifyContent={justifyContent}\n        $alignItems={alignItems}\n        $alignContent={alignContent}\n        $gap={gap}\n        $rowGap={rowGap}\n        $columnGap={columnGap}\n        $width={width}\n        $maxWidth={maxWidth}\n        $minWidth={minWidth}\n        $height={height}\n        $maxHeight={maxHeight}\n        $minHeight={minHeight}\n        {...otherProps}\n      >\n        {children}\n      </CustomBox>\n    )\n  },\n)\nBox.displayName = 'Box'\n\nexport const CustomBox = styled.div<TransientBoxProps>`\n  ${margin};\n  ${padding};\n  ${flex};\n  ${measure};\n`\n"]}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAiC,IAAI,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAuC,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAKL,MAAM,EACN,OAAO,GACR,MAAM,gBAAgB,CAAA;AAgBvB,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,MAAM,EACJ,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,CAAC,EACL,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,EAAE,EAAE,CAAC,EACL,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,UAAU,EAAE,SAAS,EACrB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,IAAI,EACX,eAAe,EAAE,cAAc,EAC/B,WAAW,EAAE,UAAU,EACvB,aAAa,EAAE,YAAY,EAC3B,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,SAAS,EACrB,UAAU,EAAE,SAAS,KACjB,UAAU,YAEb,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AACD,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA;AAEvB,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAmB;IAClD,MAAM;IACN,OAAO;IACP,IAAI;IACJ,OAAO;CACV,CAAA","sourcesContent":["import { ElementType, HTMLAttributes, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { FlexProps, TransientFlexProps, flex } from '../utils/flex'\nimport { MeasureProps, TransientMeasureProps, measure } from '../utils/measure'\nimport {\n  MarginProps,\n  PaddingProps,\n  TransientMarginProps,\n  TransientPaddingProps,\n  margin,\n  padding,\n} from '../utils/space'\n\nexport type BoxProps = MarginProps &\n  PaddingProps &\n  FlexProps &\n  MeasureProps &\n  HTMLAttributes<HTMLElement> & {\n    as?: ElementType\n    forwardedAs?: ElementType\n  }\n\nexport type TransientBoxProps = TransientMarginProps &\n  TransientPaddingProps &\n  TransientFlexProps &\n  TransientMeasureProps\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  ({ children, ...props }, ref) => {\n    const {\n      m,\n      mx,\n      my,\n      ml,\n      mr,\n      mt,\n      mb,\n      p,\n      px,\n      py,\n      pl,\n      pr,\n      pt,\n      pb,\n      direction,\n      wrap,\n      flex,\n      flow,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n      width,\n      maxWidth,\n      minWidth,\n      height,\n      maxHeight,\n      minHeight,\n      ...otherProps\n    } = props\n\n    return (\n      <CustomBox\n        ref={ref}\n        $m={m}\n        $mx={mx}\n        $my={my}\n        $ml={ml}\n        $mr={mr}\n        $mt={mt}\n        $mb={mb}\n        $p={p}\n        $px={px}\n        $py={py}\n        $pl={pl}\n        $pr={pr}\n        $pt={pt}\n        $pb={pb}\n        $direction={direction}\n        $wrap={wrap}\n        $flex={flex}\n        $flow={flow}\n        $justifyContent={justifyContent}\n        $alignItems={alignItems}\n        $alignContent={alignContent}\n        $gap={gap}\n        $rowGap={rowGap}\n        $columnGap={columnGap}\n        $width={width}\n        $maxWidth={maxWidth}\n        $minWidth={minWidth}\n        $height={height}\n        $maxHeight={maxHeight}\n        $minHeight={minHeight}\n        {...otherProps}\n      >\n        {children}\n      </CustomBox>\n    )\n  },\n)\nBox.displayName = 'Box'\n\nexport const CustomBox = styled.div<TransientBoxProps>`\n  ${margin};\n  ${padding};\n  ${flex};\n  ${measure};\n`\n"]}

package/dist/Button/Button.js

@@ -8,8 +8,8 @@ import { Loader } from '../Loader';
 import { focusOutlineStyle } from '../utils/focusOutline';
 export const Button = forwardRef((props, ref) => {
     const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, iconComponent, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
-    const iconToRender = iconComponent ? (_jsx(CommonIconContainer, { "$size": smallButton ? 16 : 24, children: iconComponent })) : icon ? (_jsx(IconContainer, { "$trailingIcon": trailingIcon, render: icon, size: smallButton ? 16 : 24, color: "color.icon.base" })) : null;
-    return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, "$loading": loading, "$primary": primary, "$secondary": secondary, "$fallbackStyle": fallbackStyle, "$textBtn": textBtn, "$smallButton": smallButton, "$trailingIcon": trailingIcon, "$forcedWidth": forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { "$hasIcon": !!iconToRender, "$loading": loading, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender && textBtn ? iconToRender : null] })] }));
+    const iconToRender = iconComponent ? (_jsx(CommonIconContainer, { $size: smallButton ? 16 : 24, children: iconComponent })) : icon ? (_jsx(IconContainer, { $trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: "color.icon.base" })) : null;
+    return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, $loading: loading, $primary: primary, $secondary: secondary, $fallbackStyle: fallbackStyle, $textBtn: textBtn, $smallButton: smallButton, $trailingIcon: trailingIcon, $forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { $hasIcon: !!iconToRender, $loading: loading, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender && textBtn ? iconToRender : null] })] }));
 });
 Button.displayName = 'Button';
 const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
@@ -31,31 +31,32 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forc
 
     ${$primary &&
     css `
-      &:hover {
-        background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.primary.hover};
-      }
-      &:active {
-        background-color: ${({ theme }) => theme.color.interactive.primary.selected};
-      }
-    `}
+        &:hover {
+          background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.primary.hover};
+        }
+        &:active {
+          background-color: ${({ theme }) => theme.color.interactive.primary.selected};
+        }
+      `}
 
     ${$secondary &&
     css `
-      background-color: ${({ theme }) => theme.color.interactive.secondary.base};
+        background-color: ${({ theme }) => theme.color.interactive.secondary.base};
 
-      &:hover {
-        background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.secondary.hover};
-      }
-      &:active {
-        background-color: ${({ theme }) => theme.color.interactive.secondary.selected};
-      }
-    `}
+        &:hover {
+          background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.secondary.hover};
+        }
+        &:active {
+          background-color: ${({ theme }) => theme.color.interactive.secondary.selected};
+        }
+      `}
   ${$fallbackStyle &&
     css `
       background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};
 
       &:hover {
-        background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.neutral.subtle.hover};
+        background-color: ${({ theme }) => !(disabled || $loading) &&
+        theme.color.interactive.neutral.subtle.hover};
       }
       &:active {
         background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.selected};

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonHTMLAttributes,\n  FC,\n  FormEvent,\n  ReactNode,\n  forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n  children: ReactNode\n  id?: string\n  className?: string\n  disabled?: boolean\n  handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n  loading?: boolean\n  primary?: boolean\n  secondary?: boolean\n  fallbackStyle?: boolean\n  textBtn?: boolean\n  smallButton?: boolean\n  icon?: Icons\n  iconComponent?: ReactNode\n  trailingIcon?: boolean\n  forcedWidth?: string\n  form?: string\n}\n\nexport type ButtonProps = Props &\n  MarginProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>((props, ref) => {\n  const {\n    children,\n    id,\n    className = '',\n    disabled = false,\n    handleClick,\n    loading = false,\n    primary = false,\n    secondary = false,\n    fallbackStyle = false,\n    textBtn = false,\n    smallButton = false,\n    icon,\n    iconComponent,\n    trailingIcon = false,\n    forcedWidth = '',\n    form,\n    type,\n    ...otherProps\n  } = props\n\n  const iconToRender = iconComponent ? (\n    <CommonIconContainer $size={smallButton ? 16 : 24}>\n      {iconComponent}\n    </CommonIconContainer>\n  ) : icon ? (\n    <IconContainer\n      $trailingIcon={trailingIcon}\n      render={icon}\n      size={smallButton ? 16 : 24}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  return (\n    <Container\n      forwardedAs=\"button\"\n      id={id}\n      className={className}\n      disabled={disabled || loading}\n      onClick={handleClick}\n      $loading={loading}\n      $primary={primary}\n      $secondary={secondary}\n      $fallbackStyle={fallbackStyle}\n      $textBtn={textBtn}\n      $smallButton={smallButton}\n      $trailingIcon={trailingIcon}\n      $forcedWidth={forcedWidth}\n      {...(form ? { form } : {})}\n      type={type}\n      {...otherProps}\n      ref={ref}\n    >\n      {loading && (\n        <LoaderContainer>\n          <Loader color=\"color.icon.base\" height=\"16\" />\n        </LoaderContainer>\n      )}\n      <ContentContainer $hasIcon={!!iconToRender} $loading={loading}>\n        {!trailingIcon && iconToRender ? iconToRender : null}\n        <ChildrenContainer className=\"childrenContainer\">\n          {children}\n        </ChildrenContainer>\n        {trailingIcon && iconToRender && textBtn ? iconToRender : null}\n      </ContentContainer>\n    </Container>\n  )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n  Required<\n    Pick<\n      ButtonProps,\n      | 'primary'\n      | 'secondary'\n      | 'forcedWidth'\n      | 'fallbackStyle'\n      | 'textBtn'\n      | 'trailingIcon'\n      | 'smallButton'\n    >\n  >\n> & {\n  $loading: NonNullable<ButtonProps['loading']>\n  disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n  ({\n    disabled,\n    $loading,\n    $primary,\n    $secondary,\n    $forcedWidth,\n    $fallbackStyle,\n    $textBtn,\n    $smallButton,\n  }) => css`\n    position: relative;\n    background-color: ${({ theme }) => theme.color.interactive.primary.base};\n    box-shadow: none;\n    color: ${({ theme }) => theme.color.text.base};\n    padding: 0 20px;\n    outline: none;\n    border-radius: 10000px;\n    font-weight: ${({ theme }) => theme.fontWeight[500]};\n    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n    line-height: 100%;\n    font-size: 16px;\n    opacity: ${disabled ? '0.5' : '1'};\n    width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n    ${focusOutlineStyle}\n\n    ${$primary &&\n    css`\n      &:hover {\n        background-color: ${({ theme }) =>\n          !(disabled || $loading) && theme.color.interactive.primary.hover};\n      }\n      &:active {\n        background-color: ${({ theme }) =>\n          theme.color.interactive.primary.selected};\n      }\n    `}\n\n    ${$secondary &&\n    css`\n      background-color: ${({ theme }) =>\n        theme.color.interactive.secondary.base};\n\n      &:hover {\n        background-color: ${({ theme }) =>\n          !(disabled || $loading) && theme.color.interactive.secondary.hover};\n      }\n      &:active {\n        background-color: ${({ theme }) =>\n          theme.color.interactive.secondary.selected};\n      }\n    `}\n  ${$fallbackStyle &&\n    css`\n      background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n      &:hover {\n        background-color: ${({ theme }) =>\n          !(disabled || $loading) && theme.color.interactive.neutral.subtle.hover};\n      }\n      &:active {\n        background-color: ${({ theme }) =>\n          theme.color.interactive.neutral.subtle.selected};\n      }\n    `}\n  ${$smallButton &&\n    css`\n      padding: 0 10px;\n      min-width: 54px;\n      font-size: 14px;\n\n      .childrenContainer {\n        padding: 9px 0;\n      }\n\n      span {\n        margin: 0 5px 0 0;\n      }\n    `}\n  ${$textBtn &&\n    css`\n      background-color: transparent;\n      padding: 0;\n      border-radius: 0;\n      text-decoration: underline;\n\n      &:hover {\n        background-color: ${({ theme }) =>\n          !(disabled || $loading) && theme.color.interactive.primary.hover};\n      }\n      &:active {\n        background-color: transparent;\n        color: ${({ theme }) => theme.color.text.subtle};\n      }\n    `}\n  `,\n)\n\nconst LoaderContainer = styled.div`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasIcon?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};\n  opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n  TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n  ({ $trailingIcon }) => css`\n    margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n  `,\n)\n\nconst ChildrenContainer = styled.div`\n  padding: 16px 0;\n  flex-grow: 1;\n`\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonHTMLAttributes,\n  FC,\n  FormEvent,\n  ReactNode,\n  forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n  children: ReactNode\n  id?: string\n  className?: string\n  disabled?: boolean\n  handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n  loading?: boolean\n  primary?: boolean\n  secondary?: boolean\n  fallbackStyle?: boolean\n  textBtn?: boolean\n  smallButton?: boolean\n  icon?: Icons\n  iconComponent?: ReactNode\n  trailingIcon?: boolean\n  forcedWidth?: string\n  form?: string\n}\n\nexport type ButtonProps = Props &\n  MarginProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>((props, ref) => {\n  const {\n    children,\n    id,\n    className = '',\n    disabled = false,\n    handleClick,\n    loading = false,\n    primary = false,\n    secondary = false,\n    fallbackStyle = false,\n    textBtn = false,\n    smallButton = false,\n    icon,\n    iconComponent,\n    trailingIcon = false,\n    forcedWidth = '',\n    form,\n    type,\n    ...otherProps\n  } = props\n\n  const iconToRender = iconComponent ? (\n    <CommonIconContainer $size={smallButton ? 16 : 24}>\n      {iconComponent}\n    </CommonIconContainer>\n  ) : icon ? (\n    <IconContainer\n      $trailingIcon={trailingIcon}\n      render={icon}\n      size={smallButton ? 16 : 24}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  return (\n    <Container\n      forwardedAs=\"button\"\n      id={id}\n      className={className}\n      disabled={disabled || loading}\n      onClick={handleClick}\n      $loading={loading}\n      $primary={primary}\n      $secondary={secondary}\n      $fallbackStyle={fallbackStyle}\n      $textBtn={textBtn}\n      $smallButton={smallButton}\n      $trailingIcon={trailingIcon}\n      $forcedWidth={forcedWidth}\n      {...(form ? { form } : {})}\n      type={type}\n      {...otherProps}\n      ref={ref}\n    >\n      {loading && (\n        <LoaderContainer>\n          <Loader color=\"color.icon.base\" height=\"16\" />\n        </LoaderContainer>\n      )}\n      <ContentContainer $hasIcon={!!iconToRender} $loading={loading}>\n        {!trailingIcon && iconToRender ? iconToRender : null}\n        <ChildrenContainer className=\"childrenContainer\">\n          {children}\n        </ChildrenContainer>\n        {trailingIcon && iconToRender && textBtn ? iconToRender : null}\n      </ContentContainer>\n    </Container>\n  )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n  Required<\n    Pick<\n      ButtonProps,\n      | 'primary'\n      | 'secondary'\n      | 'forcedWidth'\n      | 'fallbackStyle'\n      | 'textBtn'\n      | 'trailingIcon'\n      | 'smallButton'\n    >\n  >\n> & {\n  $loading: NonNullable<ButtonProps['loading']>\n  disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n  ({\n    disabled,\n    $loading,\n    $primary,\n    $secondary,\n    $forcedWidth,\n    $fallbackStyle,\n    $textBtn,\n    $smallButton,\n  }) => css`\n    position: relative;\n    background-color: ${({ theme }) => theme.color.interactive.primary.base};\n    box-shadow: none;\n    color: ${({ theme }) => theme.color.text.base};\n    padding: 0 20px;\n    outline: none;\n    border-radius: 10000px;\n    font-weight: ${({ theme }) => theme.fontWeight[500]};\n    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n    line-height: 100%;\n    font-size: 16px;\n    opacity: ${disabled ? '0.5' : '1'};\n    width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n    ${focusOutlineStyle}\n\n    ${\n      $primary &&\n      css`\n        &:hover {\n          background-color: ${({ theme }) =>\n            !(disabled || $loading) && theme.color.interactive.primary.hover};\n        }\n        &:active {\n          background-color: ${({ theme }) =>\n            theme.color.interactive.primary.selected};\n        }\n      `\n    }\n\n    ${\n      $secondary &&\n      css`\n        background-color: ${({ theme }) =>\n          theme.color.interactive.secondary.base};\n\n        &:hover {\n          background-color: ${({ theme }) =>\n            !(disabled || $loading) && theme.color.interactive.secondary.hover};\n        }\n        &:active {\n          background-color: ${({ theme }) =>\n            theme.color.interactive.secondary.selected};\n        }\n      `\n    }\n  ${\n    $fallbackStyle &&\n    css`\n      background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n      &:hover {\n        background-color: ${({ theme }) =>\n          !(disabled || $loading) &&\n          theme.color.interactive.neutral.subtle.hover};\n      }\n      &:active {\n        background-color: ${({ theme }) =>\n          theme.color.interactive.neutral.subtle.selected};\n      }\n    `\n  }\n  ${\n    $smallButton &&\n    css`\n      padding: 0 10px;\n      min-width: 54px;\n      font-size: 14px;\n\n      .childrenContainer {\n        padding: 9px 0;\n      }\n\n      span {\n        margin: 0 5px 0 0;\n      }\n    `\n  }\n  ${\n    $textBtn &&\n    css`\n      background-color: transparent;\n      padding: 0;\n      border-radius: 0;\n      text-decoration: underline;\n\n      &:hover {\n        background-color: ${({ theme }) =>\n          !(disabled || $loading) && theme.color.interactive.primary.hover};\n      }\n      &:active {\n        background-color: transparent;\n        color: ${({ theme }) => theme.color.text.subtle};\n      }\n    `\n  }\n  `,\n)\n\nconst LoaderContainer = styled.div`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasIcon?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};\n  opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n  TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n  ({ $trailingIcon }) => css`\n    margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n  `,\n)\n\nconst ChildrenContainer = styled.div`\n  padding: 16px 0;\n  flex-grow: 1;\n`\n"]}

package/dist/Card/Card.js

@@ -10,8 +10,8 @@ export const Card = ({ children, leadingIcon, iconComponent, title, body, visual
     const theme = useTheme();
     const addChildMargin = (!!iconComponent || !!leadingIcon || !!title || !!body) && children;
     const isNotClickable = !cardOnClickAction;
-    const iconToRender = iconComponent ? (_jsx(IconContainer, { style: { marginRight: '12px' }, "$size": 24, "$iconColor": theme.color.icon.base, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "space.150", render: leadingIcon, size: 24, color: "color.icon.base" })) : null;
-    return (_jsxs(Container, { className: className, "$maxWidth": maxWidth, "$marginX": marginX, "$marginY": marginY, "$narrow": narrow, "$wide": wide, "$visual": visual, "$fallbackStyle": fallbackStyle, "$isNotClickable": isNotClickable, onClick: cardOnClickAction, tabIndex: isNotClickable ? undefined : 0, ...otherProps, children: [tag && visual && _jsx(TagWrapper, { children: tag }), visual && (_jsx(VisualWrapper, { "$visualHeight": visualHeight, children: _jsx(Visual, { "$visualUrl": visual, "$visualHeight": visualHeight }) })), _jsxs(Box, { p: visual ? '16px' : { custom: '0px' }, children: [_jsxs(Box, { flex: true, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _jsxs(Box, { children: [title && (_jsx(Text, { typo: "headline-regular", color: "color.text.base", children: title })), body && (_jsx(Text, { typo: "body-regular", color: "color.text.subtle", children: body }))] })] }), rightAction && rightAction] }), _jsx(Box, { mt: addChildMargin ? '16px' : { custom: '0px' }, children: children }), buttonAction && _jsx(Box, { mt: "space.200", children: buttonAction })] })] }));
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { style: { marginRight: '12px' }, $size: 24, $iconColor: theme.color.icon.base, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "space.150", render: leadingIcon, size: 24, color: "color.icon.base" })) : null;
+    return (_jsxs(Container, { className: className, $maxWidth: maxWidth, $marginX: marginX, $marginY: marginY, $narrow: narrow, $wide: wide, $visual: visual, $fallbackStyle: fallbackStyle, $isNotClickable: isNotClickable, onClick: cardOnClickAction, tabIndex: isNotClickable ? undefined : 0, ...otherProps, children: [tag && visual && _jsx(TagWrapper, { children: tag }), visual && (_jsx(VisualWrapper, { $visualHeight: visualHeight, children: _jsx(Visual, { $visualUrl: visual, $visualHeight: visualHeight }) })), _jsxs(Box, { p: visual ? '16px' : { custom: '0px' }, children: [_jsxs(Box, { flex: true, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _jsxs(Box, { children: [title && (_jsx(Text, { typo: "headline-regular", color: "color.text.base", children: title })), body && (_jsx(Text, { typo: "body-regular", color: "color.text.subtle", children: body }))] })] }), rightAction] }), _jsx(Box, { mt: addChildMargin ? '16px' : { custom: '0px' }, children: children }), buttonAction && _jsx(Box, { mt: "space.200", children: buttonAction })] })] }));
 };
 const Container = styled(Box) `
   background: ${({ $fallbackStyle, theme }) => $fallbackStyle