@mrshmllw/smores-react 13.20.1 → 13.20.2

package/dist/Accordion/Accordion.js

@@ -20,7 +20,7 @@ export const Accordion = ({ title, children, onToggle, filledBackground, default
             React.createElement(TitleContainer, null,
                 React.createElement(Text, { tag: "h2", typo: "headline-regular" }, title),
                 subTitle && (React.createElement(Text, { tag: "label", typo: "label", mt: { custom: 4 } }, subTitle))),
-            React.createElement(CaretIcon, { render: "caret", size: 24, color: "marzipan", "$isOpen": isOpen, "$borderTop": borderTop })),
+            React.createElement(CaretIcon, { render: "caret", size: 24, color: "color.illustration.neutral.400", "$isOpen": isOpen, "$borderTop": borderTop })),
         isOpen && (React.createElement(Box, { pt: "12px", pb: "16px", px: px }, children))));
 };
 const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $borderColor, $backgroundColor, }) => css `

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 React, { FC, ReactNode, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype UsableNewColors = Extract<\n  NewColor,\n  | 'color.surface.base.000'\n  | 'color.surface.base.100'\n  | 'color.surface.base.300'\n  | 'color.illustration.neutral.300'\n>\n\nexport type AccordionProps = {\n  title: string\n  subTitle?: string\n  filledBackground?: boolean\n  borderTop?: boolean\n  borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut' | UsableNewColors\n  fullBorder?: boolean\n  backgroundColor?:\n    | 'oatmeal'\n    | 'custard'\n    | 'cream'\n    | 'coconut'\n    | UsableNewColors\n  onToggle?: (isOpen: boolean) => void\n  children: ReactNode\n  defaultIsOpen?: boolean\n} & MarginProps\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  children,\n  onToggle,\n  filledBackground,\n  defaultIsOpen = false,\n  borderTop = false,\n  borderColor = 'color.illustration.neutral.300',\n  backgroundColor = 'color.surface.base.300',\n  subTitle,\n  fullBorder = false,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const [isOpen, setIsOpen] = useState(defaultIsOpen)\n  const px = fullBorder ? '16px' : '0'\n\n  const resolvedBorderColor = resolveToThemeColor(borderColor, theme)\n\n  const resolvedBackgroundColour = resolveToThemeColor(backgroundColor, theme)\n\n  const handleToggle = () => {\n    const nextOpenState = !isOpen\n    onToggle?.(nextOpenState)\n    setIsOpen(nextOpenState)\n  }\n\n  return (\n    <Wrapper\n      $borderTop={borderTop}\n      $fullBorder={fullBorder}\n      $filledBackground={filledBackground}\n      $borderColor={resolvedBorderColor}\n      $backgroundColor={resolvedBackgroundColour}\n      {...marginProps}\n    >\n      <TopContainer\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        onClick={handleToggle}\n        py=\"16px\"\n        pr=\"16px\"\n        pl={px}\n      >\n        <TitleContainer>\n          <Text tag=\"h2\" typo=\"headline-regular\">\n            {title}\n          </Text>\n          {subTitle && (\n            <Text tag=\"label\" typo=\"label\" mt={{ custom: 4 }}>\n              {subTitle}\n            </Text>\n          )}\n        </TitleContainer>\n\n        <CaretIcon\n          render=\"caret\"\n          size={24}\n          color=\"marzipan\"\n          $isOpen={isOpen}\n          $borderTop={borderTop}\n        />\n      </TopContainer>\n      {isOpen && (\n        <Box pt=\"12px\" pb=\"16px\" px={px}>\n          {children}\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<\n  TransientProps<\n    Pick<AccordionProps, 'borderTop' | 'fullBorder' | 'filledBackground'>\n  > & { $borderColor: string; $backgroundColor: string }\n>(\n  ({\n    $borderTop,\n    $fullBorder,\n    $filledBackground,\n    $borderColor,\n    $backgroundColor,\n  }) => css`\n    border-bottom: 1px solid ${$borderColor};\n    ${$borderTop && `border-top: 1px solid ${$backgroundColor};`}\n\n    ${$fullBorder &&\n    css`\n      border: 1px solid ${$borderColor};\n      border-radius: 16px;\n    `}\n\n    ${$filledBackground &&\n    css`\n      background-color: ${$backgroundColor};\n    `}\n  `,\n)\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`\nconst TopContainer = styled(Box)`\n  cursor: pointer;\n`\n\nconst CaretIcon = styled(Icon)<\n  TransientProps<Pick<AccordionProps, 'borderTop'>> & { $isOpen: boolean }\n>(\n  ({ $isOpen }) => css`\n    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n    transition: transform 0.6s ease;\n  `,\n)\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype UsableNewColors = Extract<\n  NewColor,\n  | 'color.surface.base.000'\n  | 'color.surface.base.100'\n  | 'color.surface.base.300'\n  | 'color.illustration.neutral.300'\n>\n\nexport type AccordionProps = {\n  title: string\n  subTitle?: string\n  filledBackground?: boolean\n  borderTop?: boolean\n  borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut' | UsableNewColors\n  fullBorder?: boolean\n  backgroundColor?:\n    | 'oatmeal'\n    | 'custard'\n    | 'cream'\n    | 'coconut'\n    | UsableNewColors\n  onToggle?: (isOpen: boolean) => void\n  children: ReactNode\n  defaultIsOpen?: boolean\n} & MarginProps\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  children,\n  onToggle,\n  filledBackground,\n  defaultIsOpen = false,\n  borderTop = false,\n  borderColor = 'color.illustration.neutral.300',\n  backgroundColor = 'color.surface.base.300',\n  subTitle,\n  fullBorder = false,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const [isOpen, setIsOpen] = useState(defaultIsOpen)\n  const px = fullBorder ? '16px' : '0'\n\n  const resolvedBorderColor = resolveToThemeColor(borderColor, theme)\n\n  const resolvedBackgroundColour = resolveToThemeColor(backgroundColor, theme)\n\n  const handleToggle = () => {\n    const nextOpenState = !isOpen\n    onToggle?.(nextOpenState)\n    setIsOpen(nextOpenState)\n  }\n\n  return (\n    <Wrapper\n      $borderTop={borderTop}\n      $fullBorder={fullBorder}\n      $filledBackground={filledBackground}\n      $borderColor={resolvedBorderColor}\n      $backgroundColor={resolvedBackgroundColour}\n      {...marginProps}\n    >\n      <TopContainer\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        onClick={handleToggle}\n        py=\"16px\"\n        pr=\"16px\"\n        pl={px}\n      >\n        <TitleContainer>\n          <Text tag=\"h2\" typo=\"headline-regular\">\n            {title}\n          </Text>\n          {subTitle && (\n            <Text tag=\"label\" typo=\"label\" mt={{ custom: 4 }}>\n              {subTitle}\n            </Text>\n          )}\n        </TitleContainer>\n\n        <CaretIcon\n          render=\"caret\"\n          size={24}\n          color=\"color.illustration.neutral.400\"\n          $isOpen={isOpen}\n          $borderTop={borderTop}\n        />\n      </TopContainer>\n      {isOpen && (\n        <Box pt=\"12px\" pb=\"16px\" px={px}>\n          {children}\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<\n  TransientProps<\n    Pick<AccordionProps, 'borderTop' | 'fullBorder' | 'filledBackground'>\n  > & { $borderColor: string; $backgroundColor: string }\n>(\n  ({\n    $borderTop,\n    $fullBorder,\n    $filledBackground,\n    $borderColor,\n    $backgroundColor,\n  }) => css`\n    border-bottom: 1px solid ${$borderColor};\n    ${$borderTop && `border-top: 1px solid ${$backgroundColor};`}\n\n    ${$fullBorder &&\n    css`\n      border: 1px solid ${$borderColor};\n      border-radius: 16px;\n    `}\n\n    ${$filledBackground &&\n    css`\n      background-color: ${$backgroundColor};\n    `}\n  `,\n)\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`\nconst TopContainer = styled(Box)`\n  cursor: pointer;\n`\n\nconst CaretIcon = styled(Icon)<\n  TransientProps<Pick<AccordionProps, 'borderTop'>> & { $isOpen: boolean }\n>(\n  ({ $isOpen }) => css`\n    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n    transition: transform 0.6s ease;\n  `,\n)\n"]}

package/dist/BadgeList/BadgeList.js

@@ -25,7 +25,7 @@ export function BadgeList({ badges, limit, size = BadgeSize.Lg }) {
                 size,
             } }))),
         showExcessBadge && (React.createElement("div", { className: "limit-badge", style: { zIndex: badgeZIndexMax, marginLeft: '4px' } },
-            React.createElement(Badge, { title: `+${limitExcess}`, borderColour: "oatmeal", size: size, src: React.createElement(ExcessBadge, { excess: limitExcess + 1 }), disabled: true })))));
+            React.createElement(Badge, { title: `+${limitExcess}`, borderColour: "color.illustration.neutral.300", size: size, src: React.createElement(ExcessBadge, { excess: limitExcess + 1 }), disabled: true })))));
 }
 function ExcessBadge({ excess }) {
     return (React.createElement(ExcessBadgeContainer, null,

package/dist/BadgeList/BadgeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Badge, BadgeSize, type BadgeProps } from '../Badge/Badge'\nimport styled from 'styled-components'\nimport { Tooltip } from '../Tooltip'\nimport type { TooltipProps } from '../Tooltip/Tooltip'\nimport { Text } from '../Text'\n\ntype WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {\n  position?: TooltipProps['position']\n}\n\nexport type BadgeListBadge = BadgeProps & { tooltip?: WithTooltip }\n\ntype Props = {\n  size?: BadgeProps['size']\n  limit?: number\n  badges: Omit<BadgeListBadge, 'zIndex'>[]\n}\n\n/**\n * ### A list of badges with optional tooltips\n *\n * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.\n *\n */\nexport function BadgeList({ badges, limit, size = BadgeSize.Lg }: Props) {\n  const badgeZIndexMax = badges.length\n  const limitExcess =\n    // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️\n    limit && (badges.length > limit ? badges.length - limit : 0)\n\n  const maxBadges = limit ? limit - 1 : undefined\n  const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess)\n\n  return (\n    <Container $size={size}>\n      {badges\n        .slice(0, limitExcess ? maxBadges : undefined)\n        .map((badge, index) => (\n          <WithTooltip\n            key={typeof badge.src === 'string' ? badge.src : index}\n            badge={{\n              ...badge,\n              zIndex: badgeZIndexMax - index,\n              size,\n            }}\n          />\n        ))}\n\n      {showExcessBadge && (\n        <div\n          className=\"limit-badge\"\n          style={{ zIndex: badgeZIndexMax, marginLeft: '4px' }}\n        >\n          <Badge\n            title={`+${limitExcess}`}\n            borderColour=\"oatmeal\"\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 React from 'react'\nimport { Badge, BadgeSize, type BadgeProps } from '../Badge/Badge'\nimport styled from 'styled-components'\nimport { Tooltip } from '../Tooltip'\nimport type { TooltipProps } from '../Tooltip/Tooltip'\nimport { Text } from '../Text'\n\ntype WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {\n  position?: TooltipProps['position']\n}\n\nexport type BadgeListBadge = BadgeProps & { tooltip?: WithTooltip }\n\ntype Props = {\n  size?: BadgeProps['size']\n  limit?: number\n  badges: Omit<BadgeListBadge, 'zIndex'>[]\n}\n\n/**\n * ### A list of badges with optional tooltips\n *\n * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.\n *\n */\nexport function BadgeList({ badges, limit, size = BadgeSize.Lg }: Props) {\n  const badgeZIndexMax = badges.length\n  const limitExcess =\n    // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️\n    limit && (badges.length > limit ? badges.length - limit : 0)\n\n  const maxBadges = limit ? limit - 1 : undefined\n  const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess)\n\n  return (\n    <Container $size={size}>\n      {badges\n        .slice(0, limitExcess ? maxBadges : undefined)\n        .map((badge, index) => (\n          <WithTooltip\n            key={typeof badge.src === 'string' ? badge.src : index}\n            badge={{\n              ...badge,\n              zIndex: badgeZIndexMax - index,\n              size,\n            }}\n          />\n        ))}\n\n      {showExcessBadge && (\n        <div\n          className=\"limit-badge\"\n          style={{ zIndex: badgeZIndexMax, marginLeft: '4px' }}\n        >\n          <Badge\n            title={`+${limitExcess}`}\n            borderColour=\"color.illustration.neutral.300\"\n            size={size}\n            src={<ExcessBadge excess={limitExcess + 1} />}\n            disabled\n          />\n        </div>\n      )}\n    </Container>\n  )\n}\n\ntype ExcessBadgeProps = {\n  excess: number\n}\n\nfunction ExcessBadge({ excess }: ExcessBadgeProps) {\n  return (\n    <ExcessBadgeContainer>\n      <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n        +{excess}\n      </Text>\n    </ExcessBadgeContainer>\n  )\n}\n\nconst ExcessBadgeContainer = styled.div`\n  display: flex;\n  align-items: center;\n  place-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: ${({ theme }) => theme.color.surface.base[400]};\n  pointer-events: none;\n`\n\ntype WithTooltipProps = {\n  badge: BadgeListBadge\n}\n\nconst WithTooltip = ({ badge: { tooltip, ...badge } }: WithTooltipProps) => {\n  if (tooltip) {\n    return (\n      <div style={{ zIndex: badge.zIndex }}>\n        <Tooltip\n          position={tooltip.position ?? 'bottom'}\n          title={tooltip?.title}\n          content={tooltip.content}\n        >\n          <Badge {...badge} />\n        </Tooltip>\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ zIndex: badge.zIndex }}>\n      <Badge {...badge} />\n    </div>\n  )\n}\n\nconst marginRightMapping = {\n  [BadgeSize.Lg]: '-18px',\n  [BadgeSize.Md]: '-14px',\n  [BadgeSize.Sm]: '-11px',\n} satisfies Record<BadgeSize, string>\n\nconst Container = styled.div<{ $size: BadgeSize }>`\n  display: flex;\n\n  > * {\n    transition:\n      margin 0.2s ease-in-out,\n      padding 0.2s ease-in-out;\n    margin-right: ${(props) => marginRightMapping[props.$size]};\n\n    &:hover:not(:first-child):not(.limit-badge) {\n      padding-left: 10px;\n      &:not(:last-child) {\n        padding-right: 5px;\n      }\n    }\n  }\n`\n"]}

package/dist/Dropdown/Dropdown.js

@@ -42,7 +42,7 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder,
                     React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel()))) : (React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel())),
                 dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (React.createElement("optgroup", { key: i, label: groupItems[0].optionGroupLabel ?? 'Other' }, groupItems.map((el, j) => (React.createElement("option", { key: `${i}-${j}`, value: el.value }, el.label))))) : (groupItems.map((el, j) => (React.createElement("option", { key: j, value: el.value }, el.label)))))),
             React.createElement(Caret, null,
-                React.createElement(Icon, { render: "caret", color: "marzipan", size: 24 })))));
+                React.createElement(Icon, { render: "caret", color: "color.illustration.neutral.400", size: 24 })))));
 });
 const resetSelect = css `
   border: none;

package/dist/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAmClE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,WAAW,EACX,iBAAiB,GAAG,KAAK,EACzB,mBAAmB,EACnB,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,aAAa,EACb,MAAM,EACN,SAAS,EACT,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAoC;IAEpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC,CAAA;IACF,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;IAE7E,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAA0B,CAAA;QAE5D,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;YACvC,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAA;YAE/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAChB,kBAAkB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;QAEF,OAAO,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,OAAO,WAAW,CAAA;QACpB,CAAC;QACD,OAAO,mBAAmB,IAAI,kBAAkB,CAAA;IAClD,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;YAC1D,SAAS,IAAI,CACZ,oBAAC,eAAe,iBACH,QAAQ,EACnB,MAAM,EAAE,SAAS,EACjB,KAAK,EAAC,QAAQ,GACd,CACH;YACD,oBAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;oBAEvC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAA;oBACjB,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;oBACtB,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACjB,CAAC,YACO,KAAK,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,gBACE,SAAS,oBACL,aAAa,EAC7B,KAAK,EAAE,KAAK,IAAI,EAAE;gBAEjB,YAAY,CAAC,CAAC,CAAC,CACd,kCAAU,KAAK,EAAE,kBAAkB,EAAE;oBACnC,gCAAQ,KAAK,EAAC,EAAE,EAAC,MAAM,EAAE,CAAC,iBAAiB,EAAE,QAAQ,UAClD,kBAAkB,EAAE,CACd,CACA,CACZ,CAAC,CAAC,CAAC,CACF,gCAAQ,KAAK,EAAC,EAAE,EAAC,MAAM,EAAE,CAAC,iBAAiB,EAAE,QAAQ,UAClD,kBAAkB,EAAE,CACd,CACV;gBAEA,mBAAmB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CACzC,YAAY,CAAC,CAAC,CAAC,CACb,kCACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,gBAAgB,IAAI,OAAO,IAE/C,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,gCAAQ,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IACtC,EAAE,CAAC,KAAK,CACF,CACV,CAAC,CACO,CACZ,CAAC,CAAC,CAAC,CACF,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,gCAAQ,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IAC5B,EAAE,CAAC,KAAK,CACF,CACV,CAAC,CACH,CACF,CACY;YACf,oBAAC,KAAK;gBACJ,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,EAAE,GAAI,CAC5C,CACJ,CACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;CAMtB,CAAA;AASD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAS;IACvC,WAAW;;;WAGJ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;sBAE5C,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAChD,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;;;;;MAK/B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACtB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;IAGzE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,UAAU,IAAI,EAAE;IAChB;;KAEC;;;;;;;IAOD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,CAAC,MAAM;IACP,GAAG,CAAA;;;;;;0BAMmB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY;;KAEjE;CACJ,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;WAKb,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY;CACtD,CAAA","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\n\nexport type DropdownItem = {\n  optionGroupLabel?: string\n  label: string\n  value: string\n}\n\nexport interface Props extends CommonFieldProps {\n  placeholder?: string\n  showDefaultOption?: boolean\n  customDefaultOption?: string\n  name?: string\n  value?: string | null\n  defaultValue?: string\n  disabled?: boolean\n  list: DropdownItem[]\n  frontIcon?: Icons\n  fallbackStyle?: boolean\n  onSelect: (element: string) => void\n  onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n  | {\n      onSelect: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n    }\n  | {\n      onSelect?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n    }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n  {\n    id: idProp,\n    placeholder,\n    showDefaultOption = false,\n    customDefaultOption,\n    name,\n    value: valueProp,\n    defaultValue,\n    disabled = false,\n    list,\n    onSelect,\n    error = false,\n    onInputChange,\n    onBlur,\n    frontIcon,\n    fallbackStyle,\n    ...fieldProps\n  }: DropdownProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const [value, setValue] = useControllableState({\n    initialState: defaultValue,\n    stateProp: valueProp,\n  })\n  const id = useUniqueId(idProp)\n  const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n  const dropdownItemsGroups = useMemo(() => {\n    const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n    list.forEach((item) => {\n      const key = item.optionGroupLabel ?? ''\n      const group = itemsPerGroupLabel.get(key) ?? []\n\n      group.push(item)\n      itemsPerGroupLabel.set(key, group)\n    })\n\n    return Array.from(itemsPerGroupLabel.values())\n  }, [list])\n\n  const defaultOptionLabel = () => {\n    if (!showDefaultOption) {\n      return placeholder\n    }\n    return customDefaultOption ?? 'Select an option'\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n        {frontIcon && (\n          <StyledFrontIcon\n            $disabled={disabled}\n            render={frontIcon}\n            color=\"sesame\"\n          />\n        )}\n        <StyledSelect\n          id={id}\n          disabled={disabled || list.length < 1}\n          onChange={(event) => {\n            const value = event.currentTarget.value\n\n            onSelect?.(value)\n            onInputChange?.(event)\n            setValue(value)\n          }}\n          $error={error}\n          ref={ref}\n          onBlur={onBlur}\n          name={name}\n          $frontIcon={frontIcon}\n          $fallbackStyle={fallbackStyle}\n          value={value ?? ''}\n        >\n          {hasOptGroups ? (\n            <optgroup label={defaultOptionLabel()}>\n              <option value=\"\" hidden={!showDefaultOption} disabled>\n                {defaultOptionLabel()}\n              </option>\n            </optgroup>\n          ) : (\n            <option value=\"\" hidden={!showDefaultOption} disabled>\n              {defaultOptionLabel()}\n            </option>\n          )}\n\n          {dropdownItemsGroups.map((groupItems, i) =>\n            hasOptGroups ? (\n              <optgroup\n                key={i}\n                label={groupItems[0].optionGroupLabel ?? 'Other'}\n              >\n                {groupItems.map((el, j) => (\n                  <option key={`${i}-${j}`} value={el.value}>\n                    {el.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              groupItems.map((el, j) => (\n                <option key={j} value={el.value}>\n                  {el.label}\n                </option>\n              ))\n            ),\n          )}\n        </StyledSelect>\n        <Caret>\n          <Icon render=\"caret\" color=\"marzipan\" size={24} />\n        </Caret>\n      </Box>\n    </Field>\n  )\n})\n\nconst resetSelect = css`\n  border: none;\n  border-radius: 0;\n  font-size: 16px;\n  appearance: none; /* remove default arrow */\n  outline: none;\n`\n\ninterface SSelect {\n  $error: boolean\n  $frontIcon?: string\n  $fallbackStyle?: boolean\n  value?: string | null\n}\n\nconst StyledSelect = styled.select<SSelect>`\n  ${resetSelect}\n  width: 100%;\n  height: 32px;\n  color: ${({ value, theme }) =>\n    value === '' ? theme.color.text.subtle : theme.color.text.base};\n  cursor: pointer;\n  background-color: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n\n  border-radius: 12px;\n  padding: 18px 14px;\n  border: 2px solid\n    ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n  height: auto;\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    $frontIcon != '' &&\n    `\n      padding-left: 42px;\n    `}\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ${({ $error }) =>\n    !$error &&\n    css`\n      :not(:disabled) {\n        &:hover,\n        &:focus,\n        &:focus-visible,\n        &:checked {\n          border-color: ${({ theme }) => theme.color.icon.nonEssential};\n      }\n    `}\n`\n\nconst Caret = styled.div`\n  position: absolute;\n  z-index: 1;\n  right: 15px;\n  pointer-events: none;\n  color: ${({ theme }) => theme.color.icon.nonEssential};\n`\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\n\nexport type DropdownItem = {\n  optionGroupLabel?: string\n  label: string\n  value: string\n}\n\nexport interface Props extends CommonFieldProps {\n  placeholder?: string\n  showDefaultOption?: boolean\n  customDefaultOption?: string\n  name?: string\n  value?: string | null\n  defaultValue?: string\n  disabled?: boolean\n  list: DropdownItem[]\n  frontIcon?: Icons\n  fallbackStyle?: boolean\n  onSelect: (element: string) => void\n  onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n  | {\n      onSelect: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n    }\n  | {\n      onSelect?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n    }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n  {\n    id: idProp,\n    placeholder,\n    showDefaultOption = false,\n    customDefaultOption,\n    name,\n    value: valueProp,\n    defaultValue,\n    disabled = false,\n    list,\n    onSelect,\n    error = false,\n    onInputChange,\n    onBlur,\n    frontIcon,\n    fallbackStyle,\n    ...fieldProps\n  }: DropdownProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const [value, setValue] = useControllableState({\n    initialState: defaultValue,\n    stateProp: valueProp,\n  })\n  const id = useUniqueId(idProp)\n  const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n  const dropdownItemsGroups = useMemo(() => {\n    const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n    list.forEach((item) => {\n      const key = item.optionGroupLabel ?? ''\n      const group = itemsPerGroupLabel.get(key) ?? []\n\n      group.push(item)\n      itemsPerGroupLabel.set(key, group)\n    })\n\n    return Array.from(itemsPerGroupLabel.values())\n  }, [list])\n\n  const defaultOptionLabel = () => {\n    if (!showDefaultOption) {\n      return placeholder\n    }\n    return customDefaultOption ?? 'Select an option'\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n        {frontIcon && (\n          <StyledFrontIcon\n            $disabled={disabled}\n            render={frontIcon}\n            color=\"sesame\"\n          />\n        )}\n        <StyledSelect\n          id={id}\n          disabled={disabled || list.length < 1}\n          onChange={(event) => {\n            const value = event.currentTarget.value\n\n            onSelect?.(value)\n            onInputChange?.(event)\n            setValue(value)\n          }}\n          $error={error}\n          ref={ref}\n          onBlur={onBlur}\n          name={name}\n          $frontIcon={frontIcon}\n          $fallbackStyle={fallbackStyle}\n          value={value ?? ''}\n        >\n          {hasOptGroups ? (\n            <optgroup label={defaultOptionLabel()}>\n              <option value=\"\" hidden={!showDefaultOption} disabled>\n                {defaultOptionLabel()}\n              </option>\n            </optgroup>\n          ) : (\n            <option value=\"\" hidden={!showDefaultOption} disabled>\n              {defaultOptionLabel()}\n            </option>\n          )}\n\n          {dropdownItemsGroups.map((groupItems, i) =>\n            hasOptGroups ? (\n              <optgroup\n                key={i}\n                label={groupItems[0].optionGroupLabel ?? 'Other'}\n              >\n                {groupItems.map((el, j) => (\n                  <option key={`${i}-${j}`} value={el.value}>\n                    {el.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              groupItems.map((el, j) => (\n                <option key={j} value={el.value}>\n                  {el.label}\n                </option>\n              ))\n            ),\n          )}\n        </StyledSelect>\n        <Caret>\n          <Icon\n            render=\"caret\"\n            color=\"color.illustration.neutral.400\"\n            size={24}\n          />\n        </Caret>\n      </Box>\n    </Field>\n  )\n})\n\nconst resetSelect = css`\n  border: none;\n  border-radius: 0;\n  font-size: 16px;\n  appearance: none; /* remove default arrow */\n  outline: none;\n`\n\ninterface SSelect {\n  $error: boolean\n  $frontIcon?: string\n  $fallbackStyle?: boolean\n  value?: string | null\n}\n\nconst StyledSelect = styled.select<SSelect>`\n  ${resetSelect}\n  width: 100%;\n  height: 32px;\n  color: ${({ value, theme }) =>\n    value === '' ? theme.color.text.subtle : theme.color.text.base};\n  cursor: pointer;\n  background-color: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n\n  border-radius: 12px;\n  padding: 18px 14px;\n  border: 2px solid\n    ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n  height: auto;\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    $frontIcon != '' &&\n    `\n      padding-left: 42px;\n    `}\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ${({ $error }) =>\n    !$error &&\n    css`\n      :not(:disabled) {\n        &:hover,\n        &:focus,\n        &:focus-visible,\n        &:checked {\n          border-color: ${({ theme }) => theme.color.icon.nonEssential};\n      }\n    `}\n`\n\nconst Caret = styled.div`\n  position: absolute;\n  z-index: 1;\n  right: 15px;\n  pointer-events: none;\n  color: ${({ theme }) => theme.color.icon.nonEssential};\n`\n"]}

package/dist/Modal/Modal.js

@@ -26,7 +26,7 @@ export const Modal = ({ title = '', children, rightPanel, showModal = false, han
                     React.createElement(Text, { ...titleProps })),
                 React.createElement(Box, { flex: true, alignItems: "center", gap: '8px' },
                     rightPanel,
-                    cross && (React.createElement(IconStrict, { render: "cross", title: "Close modal", backgroundColor: "oatmeal", handleClick: handleClick, size: 36 })))),
+                    cross && (React.createElement(IconStrict, { render: "cross", title: "Close modal", backgroundColor: "color.illustration.neutral.300", handleClick: handleClick, size: 36 })))),
             React.createElement(Box, { flex: true, direction: "column" }, children))), portalContainer);
 };
 const Wrapper = styled(Box) `

package/dist/Modal/Modal.js.map

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

package/dist/Row/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAmB9B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,iBAAiB,EACjC,SAAS,EACT,cAAc,GAAG,yBAAyB,EAC1C,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,IAC/B,OAAO,CACH;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,IAC3C,UAAU,CACN,CACH;QACL,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBAC1D,CAAC,KAAK,KAAK,OAAO,IAAI,eAAe,CAAC;IACvD,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC9B,CAAC,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC;IACrC,CAAC;;kBAEa,UAAU,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO;IACjE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;qBACO,aAAa,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM;IACtE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;6BAExB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQlD,YAAY,IAAI,GAAG;;;;;;;;;;GAUrC,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { Text } from '../Text'\n\nimport { MarginProps } from '../utils/space'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type RowProps = {\n  iconLeft?: Icons\n  iconLeftColor?: ColorTypes\n  iconRight?: Icons\n  iconRightColor?: ColorTypes\n  handleClick?: () => void\n  heading: string\n  subHeading?: string\n  type?: 'first' | 'last' | 'curved'\n  borderTop?: boolean\n  borderBottom?: boolean\n  boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n  iconLeft,\n  iconLeftColor = 'color.icon.base',\n  iconRight,\n  iconRightColor = 'color.icon.nonEssential',\n  handleClick,\n  heading,\n  subHeading,\n  type,\n  borderTop = true,\n  borderBottom = true,\n  boldHeading,\n  ...marginProps\n}) => {\n  const windowWidth = screen.width\n\n  return (\n    <Container\n      $type={type}\n      $iconLeft={iconLeft}\n      $borderTop={borderTop}\n      $borderBottom={borderBottom}\n      $iconRight={iconRight}\n      onClick={handleClick}\n      $boldHeading={boldHeading}\n      {...marginProps}\n    >\n      {iconLeft && (\n        <Icon\n          render={iconLeft}\n          size={windowWidth > 768 ? 24 : 18}\n          color={iconLeftColor}\n        />\n      )}\n      <Box>\n        <Text tag=\"h1\" typo=\"body-regular\">\n          {heading}\n        </Text>\n        <Text tag=\"p\" typo=\"body-small\" color=\"sesame\">\n          {subHeading}\n        </Text>\n      </Box>\n      {iconRight && (\n        <Icon\n          className=\"iconRight\"\n          render={iconRight}\n          size={24}\n          rotate={iconRight === 'caret' ? -90 : 0}\n          color={iconRightColor}\n        />\n      )}\n    </Container>\n  )\n}\n\ninterface IContainer {\n  $type?: 'first' | 'last' | 'curved'\n  $iconLeft?: string\n  $iconRight?: string\n  $borderTop: boolean\n  $borderBottom: boolean\n  $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n  ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading, theme }) => css`\n    border-radius: ${($type === 'first' && `16px 16px 0 0`) ||\n    ($type === 'curved' && `16px`) ||\n    ($type === 'last' && `0 0 16px 16px`) ||\n    0};\n\n    border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n\n    background-color: ${theme.color.surface.base[300]};\n    display: grid;\n    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: 16px;\n    grid-gap: 16px;\n    align-items: center;\n\n    cursor: pointer;\n\n    h1 {\n      font-weight: ${$boldHeading && 500};\n    }\n\n    .iconRight {\n      justify-self: end;\n    }\n\n    @media (min-width: 768px) {\n      grid-gap: 24px;\n    }\n  `,\n)\n"]}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAkB9B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,iBAAiB,EACjC,SAAS,EACT,cAAc,GAAG,yBAAyB,EAC1C,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,IAC/B,OAAO,CACH;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,IAC3C,UAAU,CACN,CACH;QACL,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBAC1D,CAAC,KAAK,KAAK,OAAO,IAAI,eAAe,CAAC;IACvD,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC9B,CAAC,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC;IACrC,CAAC;;kBAEa,UAAU,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO;IACjE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;qBACO,aAAa,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM;IACtE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;6BAExB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQlD,YAAY,IAAI,GAAG;;;;;;;;;;GAUrC,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type RowProps = {\n  iconLeft?: Icons\n  iconLeftColor?: ColorTypes\n  iconRight?: Icons\n  iconRightColor?: ColorTypes\n  handleClick?: () => void\n  heading: string\n  subHeading?: string\n  type?: 'first' | 'last' | 'curved'\n  borderTop?: boolean\n  borderBottom?: boolean\n  boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n  iconLeft,\n  iconLeftColor = 'color.icon.base',\n  iconRight,\n  iconRightColor = 'color.icon.nonEssential',\n  handleClick,\n  heading,\n  subHeading,\n  type,\n  borderTop = true,\n  borderBottom = true,\n  boldHeading,\n  ...marginProps\n}) => {\n  const windowWidth = screen.width\n\n  return (\n    <Container\n      $type={type}\n      $iconLeft={iconLeft}\n      $borderTop={borderTop}\n      $borderBottom={borderBottom}\n      $iconRight={iconRight}\n      onClick={handleClick}\n      $boldHeading={boldHeading}\n      {...marginProps}\n    >\n      {iconLeft && (\n        <Icon\n          render={iconLeft}\n          size={windowWidth > 768 ? 24 : 18}\n          color={iconLeftColor}\n        />\n      )}\n      <Box>\n        <Text tag=\"h1\" typo=\"body-regular\">\n          {heading}\n        </Text>\n        <Text tag=\"p\" typo=\"body-small\" color=\"sesame\">\n          {subHeading}\n        </Text>\n      </Box>\n      {iconRight && (\n        <Icon\n          className=\"iconRight\"\n          render={iconRight}\n          size={24}\n          rotate={iconRight === 'caret' ? -90 : 0}\n          color={iconRightColor}\n        />\n      )}\n    </Container>\n  )\n}\n\ninterface IContainer {\n  $type?: 'first' | 'last' | 'curved'\n  $iconLeft?: string\n  $iconRight?: string\n  $borderTop: boolean\n  $borderBottom: boolean\n  $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n  ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading, theme }) => css`\n    border-radius: ${($type === 'first' && `16px 16px 0 0`) ||\n    ($type === 'curved' && `16px`) ||\n    ($type === 'last' && `0 0 16px 16px`) ||\n    0};\n\n    border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n\n    background-color: ${theme.color.surface.base[300]};\n    display: grid;\n    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: 16px;\n    grid-gap: 16px;\n    align-items: center;\n\n    cursor: pointer;\n\n    h1 {\n      font-weight: ${$boldHeading && 500};\n    }\n\n    .iconRight {\n      justify-self: end;\n    }\n\n    @media (min-width: 768px) {\n      grid-gap: 24px;\n    }\n  `,\n)\n"]}

package/dist/SearchInput/SearchInput.js

@@ -143,9 +143,9 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
                         onBlur?.(e);
                     } }),
                 React.createElement(Icons, { flex: true, alignItems: "center", gap: "8px", "$clearSearch": showClearSearchButton },
-                    showClearSearchButton && (React.createElement(IconStrict, { type: "button", render: "plus", rotate: 45, iconColor: "marzipan", title: "Clear search", handleClick: handleClearSearch, size: 24 })),
+                    showClearSearchButton && (React.createElement(IconStrict, { type: "button", render: "plus", rotate: 45, iconColor: "color.illustration.neutral.400", title: "Clear search", handleClick: handleClearSearch, size: 24 })),
                     React.createElement(Line, null),
-                    React.createElement(IconStrict, { type: "button", render: "caret", iconColor: "marzipan", rotate: showOptions ? 180 : 0, handleClick: handleCaretClick, size: 24 }))),
+                    React.createElement(IconStrict, { type: "button", render: "caret", iconColor: "color.illustration.neutral.400", rotate: showOptions ? 180 : 0, handleClick: handleCaretClick, size: 24 }))),
             showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, selectedValue: selectedValue, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onKeyDown: handleKeyDown, searchTerm: searchQuery || '', onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder, onNotFound: onNotFound, notFoundComponent: notFoundComponent?.(searchQuery ?? '') })))));
 });
 const Wrapper = styled(Box) `

package/dist/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import Fuse, { IFuseOptions } from 'fuse.js'\nimport React, {\n  ChangeEvent,\n  FocusEvent,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useOnClickOutside } from '../hooks'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { SearchOptions } from './components/SearchOptions'\n\nexport type SearchInputItem = {\n  label: string\n  value: string\n  tags?: any[]\n}\n\nexport interface SearchInputProps extends CommonFieldProps {\n  /** Optional input className */\n  name?: string\n  /**  Optional placeholder text */\n  placeholder?: string\n  /**  List of input items to search on*/\n  searchList: SearchInputItem[]\n  /**  callback to handle found item click */\n  onFound: (element: string) => void\n  /**  optional callback to run when no results found */\n  onNotFound?: (searchTerm: string) => void\n  /**  optional Component to render when no results found */\n  notFoundComponent?: (searchTerm: string) => ReactNode\n  /**  optional boolean to show search icon */\n  showIcon?: boolean\n  /**  optional boolean to show a clear search button */\n  clearSearch?: boolean\n  /**  Optional callback to run on blur */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**  Optional default value for input */\n  value?: string\n  /**  Optional boolean to move results to a realtive position */\n  resultsRelativePosition?: boolean\n  /**  optional boolean to add border to results */\n  resultsBorder?: boolean\n  /** optional boolean to enable fuzzy search via fuse.js */\n  enableFuzzySearch?: boolean\n  /** optional config of fuzzy search\n   *  passing a value to this prop, automatically enables fuzzy search\n   */\n  fuzzySearchOptions?: IFuseOptions<SearchInputItem>\n}\n\nconst defaultFuzzySearchOptions = {\n  keys: [\n    {\n      name: 'label',\n      weight: 0.6,\n    },\n    {\n      name: 'tags',\n      weight: 0.4,\n    },\n  ],\n  findAllMatches: true,\n  minMatchCharLength: 1,\n  location: 0,\n  threshold: 0.45,\n  distance: 55,\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      id: idProp,\n      name = 'search_input',\n      className = '',\n      placeholder,\n      searchList,\n      showIcon = false,\n      renderAsTitle = false,\n      value,\n      onBlur,\n      onFound,\n      onNotFound,\n      notFoundComponent,\n      fallbackStyle,\n      resultsRelativePosition = false,\n      resultsBorder = true,\n      enableFuzzySearch = false,\n      fuzzySearchOptions,\n      clearSearch,\n      ...otherProps\n    },\n    ref,\n  ) {\n    const wrapperRef = useRef(null)\n    const id = useUniqueId(idProp)\n    const [showOptions, setShowOptions] = useState(false)\n    const [selectedValue, setSelectedValue] = useControllableState<\n      string | null\n    >({\n      initialState: null,\n      stateProp: value,\n    })\n    const [searchQuery, setSearchQuery] = useState<string | null>(null)\n    const [highlightedIndex, setHighlightedIndex] = useState(-1)\n\n    const selectedValueLabel = searchList.find(\n      (option) =>\n        option.label === selectedValue || option.value === selectedValue,\n    )?.label\n\n    const handleBlur = () => {\n      if (selectedValue) {\n        setSearchQuery(selectedValueLabel ?? null)\n      } else if (!selectedValue) {\n        setSearchQuery(null)\n      }\n    }\n\n    useOnClickOutside({\n      ref: wrapperRef,\n      callback: () => {\n        handleBlur()\n        setShowOptions(false)\n      },\n    })\n\n    const fuse = useMemo(() => {\n      return new Fuse(searchList, {\n        ...defaultFuzzySearchOptions,\n        ...fuzzySearchOptions,\n      })\n    }, [searchList])\n\n    const filteredList = useMemo(() => {\n      if (searchQuery === null || searchQuery === '') {\n        return searchList\n      }\n\n      if (enableFuzzySearch || !!fuzzySearchOptions) {\n        return fuse.search(searchQuery).map(({ item }) => item)\n      }\n\n      return searchList.filter(({ label }) =>\n        label.toLowerCase().includes(searchQuery.toLocaleLowerCase()),\n      )\n    }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions])\n\n    const getDisplayedInputText = () => {\n      if (searchQuery !== null) {\n        return searchQuery\n      }\n      if (selectedValue !== null) {\n        return selectedValueLabel || ''\n      }\n      return ''\n    }\n\n    const isSelected = selectedValue !== null\n    const displayedInputText = getDisplayedInputText()\n\n    const updateSearchQuery = (query: string | null) => {\n      setSearchQuery(query)\n      setHighlightedIndex(-1)\n\n      if (query === null) {\n        setSelectedValue(null)\n        setShowOptions(false)\n      } else {\n        setShowOptions(true)\n      }\n    }\n\n    const handleClick = () => {\n      setShowOptions(true)\n      if (searchQuery !== null) {\n        updateSearchQuery(searchQuery)\n        setShowOptions(true)\n      } else if (selectedValue !== null && searchQuery === null) {\n        setSearchQuery(selectedValueLabel || null)\n        setShowOptions(true)\n      }\n    }\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {\n      const nextValue = event.currentTarget.value\n      updateSearchQuery(nextValue)\n    }\n\n    const handleSelect = (nextValue: SearchInputItem): void => {\n      updateSearchQuery(null)\n      setSelectedValue(nextValue.label)\n      onFound(nextValue.value)\n    }\n\n    const handleClearSearch = () => {\n      updateSearchQuery(null)\n      setSelectedValue(null)\n      onFound('')\n    }\n\n    const handleCaretClick = () => {\n      setShowOptions(!showOptions)\n    }\n\n    const handleKeyDown = (event: {\n      key: string\n      preventDefault: () => void\n    }) => {\n      if (event.key === 'Enter' && highlightedIndex !== -1) {\n        event.preventDefault()\n        const focusedItem = filteredList[highlightedIndex]\n        handleSelect(focusedItem)\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        const nextIndex = (highlightedIndex + 1) % filteredList.length\n        setHighlightedIndex(nextIndex)\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        const prevIndex =\n          (highlightedIndex - 1 + filteredList.length) % filteredList.length\n        setHighlightedIndex(prevIndex)\n      }\n    }\n\n    const showClearSearchButton =\n      !!clearSearch && (!!value || !!selectedValue || !!searchQuery)\n\n    return (\n      <Wrapper ref={wrapperRef}>\n        <Field\n          className={className}\n          renderAsTitle={renderAsTitle}\n          htmlFor={id}\n          {...otherProps}\n        >\n          <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n            {showIcon && <StyledFrontIcon render=\"search\" color=\"sesame\" />}\n            <Input\n              id={id}\n              name={name}\n              ref={ref}\n              placeholder={placeholder}\n              $error={otherProps.error}\n              $frontIcon={showIcon ? 'search' : undefined}\n              $fallbackStyle={fallbackStyle}\n              autoComplete=\"off\"\n              value={displayedInputText}\n              onFocus={handleClick}\n              onChange={handleInputChange}\n              selected={isSelected}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n              onBlur={(e) => {\n                onBlur?.(e)\n              }}\n            />\n            <Icons\n              flex\n              alignItems=\"center\"\n              gap=\"8px\"\n              $clearSearch={showClearSearchButton}\n            >\n              {showClearSearchButton && (\n                <IconStrict\n                  type=\"button\"\n                  render=\"plus\"\n                  rotate={45}\n                  iconColor=\"marzipan\"\n                  title=\"Clear search\"\n                  handleClick={handleClearSearch}\n                  size={24}\n                />\n              )}\n              <Line />\n              <IconStrict\n                type=\"button\"\n                render=\"caret\"\n                iconColor=\"marzipan\"\n                rotate={showOptions ? 180 : 0}\n                handleClick={handleCaretClick}\n                size={24}\n              />\n            </Icons>\n          </Box>\n\n          {showOptions && (\n            <SearchOptions\n              displayedList={filteredList}\n              selectedValue={selectedValue}\n              highlightedIndex={highlightedIndex}\n              setHighlightedIndex={setHighlightedIndex}\n              onKeyDown={handleKeyDown}\n              searchTerm={searchQuery || ''}\n              onSelect={handleSelect}\n              positionRelative={resultsRelativePosition}\n              resultsBorder={resultsBorder}\n              onNotFound={onNotFound}\n              notFoundComponent={notFoundComponent?.(searchQuery ?? '')}\n            />\n          )}\n        </Field>\n      </Wrapper>\n    )\n  },\n)\n\nconst Wrapper = styled(Box)`\n  position: relative;\n`\n\nconst Line = styled(Box)`\n  background: ${({ theme }) => theme.color.border.subtle};\n  height: 24px;\n  width: 1px;\n`\n\nexport const Icons = styled(Box)<{ $clearSearch: boolean }>`\n  position: relative;\n  right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};\n  margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};\n`\n"]}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import Fuse, { IFuseOptions } from 'fuse.js'\nimport React, {\n  ChangeEvent,\n  FocusEvent,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useOnClickOutside } from '../hooks'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { SearchOptions } from './components/SearchOptions'\n\nexport type SearchInputItem = {\n  label: string\n  value: string\n  tags?: any[]\n}\n\nexport interface SearchInputProps extends CommonFieldProps {\n  /** Optional input className */\n  name?: string\n  /**  Optional placeholder text */\n  placeholder?: string\n  /**  List of input items to search on*/\n  searchList: SearchInputItem[]\n  /**  callback to handle found item click */\n  onFound: (element: string) => void\n  /**  optional callback to run when no results found */\n  onNotFound?: (searchTerm: string) => void\n  /**  optional Component to render when no results found */\n  notFoundComponent?: (searchTerm: string) => ReactNode\n  /**  optional boolean to show search icon */\n  showIcon?: boolean\n  /**  optional boolean to show a clear search button */\n  clearSearch?: boolean\n  /**  Optional callback to run on blur */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**  Optional default value for input */\n  value?: string\n  /**  Optional boolean to move results to a realtive position */\n  resultsRelativePosition?: boolean\n  /**  optional boolean to add border to results */\n  resultsBorder?: boolean\n  /** optional boolean to enable fuzzy search via fuse.js */\n  enableFuzzySearch?: boolean\n  /** optional config of fuzzy search\n   *  passing a value to this prop, automatically enables fuzzy search\n   */\n  fuzzySearchOptions?: IFuseOptions<SearchInputItem>\n}\n\nconst defaultFuzzySearchOptions = {\n  keys: [\n    {\n      name: 'label',\n      weight: 0.6,\n    },\n    {\n      name: 'tags',\n      weight: 0.4,\n    },\n  ],\n  findAllMatches: true,\n  minMatchCharLength: 1,\n  location: 0,\n  threshold: 0.45,\n  distance: 55,\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      id: idProp,\n      name = 'search_input',\n      className = '',\n      placeholder,\n      searchList,\n      showIcon = false,\n      renderAsTitle = false,\n      value,\n      onBlur,\n      onFound,\n      onNotFound,\n      notFoundComponent,\n      fallbackStyle,\n      resultsRelativePosition = false,\n      resultsBorder = true,\n      enableFuzzySearch = false,\n      fuzzySearchOptions,\n      clearSearch,\n      ...otherProps\n    },\n    ref,\n  ) {\n    const wrapperRef = useRef(null)\n    const id = useUniqueId(idProp)\n    const [showOptions, setShowOptions] = useState(false)\n    const [selectedValue, setSelectedValue] = useControllableState<\n      string | null\n    >({\n      initialState: null,\n      stateProp: value,\n    })\n    const [searchQuery, setSearchQuery] = useState<string | null>(null)\n    const [highlightedIndex, setHighlightedIndex] = useState(-1)\n\n    const selectedValueLabel = searchList.find(\n      (option) =>\n        option.label === selectedValue || option.value === selectedValue,\n    )?.label\n\n    const handleBlur = () => {\n      if (selectedValue) {\n        setSearchQuery(selectedValueLabel ?? null)\n      } else if (!selectedValue) {\n        setSearchQuery(null)\n      }\n    }\n\n    useOnClickOutside({\n      ref: wrapperRef,\n      callback: () => {\n        handleBlur()\n        setShowOptions(false)\n      },\n    })\n\n    const fuse = useMemo(() => {\n      return new Fuse(searchList, {\n        ...defaultFuzzySearchOptions,\n        ...fuzzySearchOptions,\n      })\n    }, [searchList])\n\n    const filteredList = useMemo(() => {\n      if (searchQuery === null || searchQuery === '') {\n        return searchList\n      }\n\n      if (enableFuzzySearch || !!fuzzySearchOptions) {\n        return fuse.search(searchQuery).map(({ item }) => item)\n      }\n\n      return searchList.filter(({ label }) =>\n        label.toLowerCase().includes(searchQuery.toLocaleLowerCase()),\n      )\n    }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions])\n\n    const getDisplayedInputText = () => {\n      if (searchQuery !== null) {\n        return searchQuery\n      }\n      if (selectedValue !== null) {\n        return selectedValueLabel || ''\n      }\n      return ''\n    }\n\n    const isSelected = selectedValue !== null\n    const displayedInputText = getDisplayedInputText()\n\n    const updateSearchQuery = (query: string | null) => {\n      setSearchQuery(query)\n      setHighlightedIndex(-1)\n\n      if (query === null) {\n        setSelectedValue(null)\n        setShowOptions(false)\n      } else {\n        setShowOptions(true)\n      }\n    }\n\n    const handleClick = () => {\n      setShowOptions(true)\n      if (searchQuery !== null) {\n        updateSearchQuery(searchQuery)\n        setShowOptions(true)\n      } else if (selectedValue !== null && searchQuery === null) {\n        setSearchQuery(selectedValueLabel || null)\n        setShowOptions(true)\n      }\n    }\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {\n      const nextValue = event.currentTarget.value\n      updateSearchQuery(nextValue)\n    }\n\n    const handleSelect = (nextValue: SearchInputItem): void => {\n      updateSearchQuery(null)\n      setSelectedValue(nextValue.label)\n      onFound(nextValue.value)\n    }\n\n    const handleClearSearch = () => {\n      updateSearchQuery(null)\n      setSelectedValue(null)\n      onFound('')\n    }\n\n    const handleCaretClick = () => {\n      setShowOptions(!showOptions)\n    }\n\n    const handleKeyDown = (event: {\n      key: string\n      preventDefault: () => void\n    }) => {\n      if (event.key === 'Enter' && highlightedIndex !== -1) {\n        event.preventDefault()\n        const focusedItem = filteredList[highlightedIndex]\n        handleSelect(focusedItem)\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        const nextIndex = (highlightedIndex + 1) % filteredList.length\n        setHighlightedIndex(nextIndex)\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        const prevIndex =\n          (highlightedIndex - 1 + filteredList.length) % filteredList.length\n        setHighlightedIndex(prevIndex)\n      }\n    }\n\n    const showClearSearchButton =\n      !!clearSearch && (!!value || !!selectedValue || !!searchQuery)\n\n    return (\n      <Wrapper ref={wrapperRef}>\n        <Field\n          className={className}\n          renderAsTitle={renderAsTitle}\n          htmlFor={id}\n          {...otherProps}\n        >\n          <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n            {showIcon && <StyledFrontIcon render=\"search\" color=\"sesame\" />}\n            <Input\n              id={id}\n              name={name}\n              ref={ref}\n              placeholder={placeholder}\n              $error={otherProps.error}\n              $frontIcon={showIcon ? 'search' : undefined}\n              $fallbackStyle={fallbackStyle}\n              autoComplete=\"off\"\n              value={displayedInputText}\n              onFocus={handleClick}\n              onChange={handleInputChange}\n              selected={isSelected}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n              onBlur={(e) => {\n                onBlur?.(e)\n              }}\n            />\n            <Icons\n              flex\n              alignItems=\"center\"\n              gap=\"8px\"\n              $clearSearch={showClearSearchButton}\n            >\n              {showClearSearchButton && (\n                <IconStrict\n                  type=\"button\"\n                  render=\"plus\"\n                  rotate={45}\n                  iconColor=\"color.illustration.neutral.400\"\n                  title=\"Clear search\"\n                  handleClick={handleClearSearch}\n                  size={24}\n                />\n              )}\n              <Line />\n              <IconStrict\n                type=\"button\"\n                render=\"caret\"\n                iconColor=\"color.illustration.neutral.400\"\n                rotate={showOptions ? 180 : 0}\n                handleClick={handleCaretClick}\n                size={24}\n              />\n            </Icons>\n          </Box>\n\n          {showOptions && (\n            <SearchOptions\n              displayedList={filteredList}\n              selectedValue={selectedValue}\n              highlightedIndex={highlightedIndex}\n              setHighlightedIndex={setHighlightedIndex}\n              onKeyDown={handleKeyDown}\n              searchTerm={searchQuery || ''}\n              onSelect={handleSelect}\n              positionRelative={resultsRelativePosition}\n              resultsBorder={resultsBorder}\n              onNotFound={onNotFound}\n              notFoundComponent={notFoundComponent?.(searchQuery ?? '')}\n            />\n          )}\n        </Field>\n      </Wrapper>\n    )\n  },\n)\n\nconst Wrapper = styled(Box)`\n  position: relative;\n`\n\nconst Line = styled(Box)`\n  background: ${({ theme }) => theme.color.border.subtle};\n  height: 24px;\n  width: 1px;\n`\n\nexport const Icons = styled(Box)<{ $clearSearch: boolean }>`\n  position: relative;\n  right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};\n  margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};\n`\n"]}

package/dist/SupportMessage/SupportMessage.js

@@ -45,7 +45,7 @@ export const SupportMessage = ({ className, description, onClick, rightSideCompo
             isReactElement(description) ? (React.createElement(DescriptionBox, null, description)) : (React.createElement(Description, { tag: "p" }, description))),
         rightSideComponent,
         onClick && rightSideComponent === undefined && (React.createElement(Box, { ml: { custom: 'auto' } },
-            React.createElement(Icon, { size: 16, render: "caret", color: "marzipan", rotate: 270 })))));
+            React.createElement(Icon, { size: 16, render: "caret", color: "color.illustration.neutral.400", rotate: 270 })))));
 };
 const IconWrapper = styled(Box) `
   align-self: flex-start;

package/dist/SupportMessage/SupportMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: NewColor\n  icon: Icons\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.illustration.neutral.300',\n    icon: 'info',\n  },\n  fallbackStyle: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.surface.base.100',\n    icon: 'info',\n  },\n  alert: {\n    iconColor: 'extended1.100',\n    backgroundColor: 'color.feedback.notice.100',\n    icon: 'alert',\n  },\n  warning: {\n    iconColor: 'color.feedback.negative.200',\n    backgroundColor: 'color.feedback.negative.100',\n    icon: 'warning',\n  },\n  success: {\n    iconColor: 'color.feedback.positive.200',\n    backgroundColor: 'color.feedback.positive.100',\n    icon: 'circle-tick',\n  },\n}\n\ntype SupportMessageType =\n  | 'info'\n  | 'fallbackStyle'\n  | 'alert'\n  | 'warning'\n  | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement<any>\n  onClick?: MouseEventHandler\n  /**\n   * Right side content, usually an icon or a button\n   */\n  rightSideComponent?: ReactElement<any>\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  rightSideComponent,\n  type,\n  title,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const resolveBackgroundColor = resolveToThemeColor(\n    styles[type].backgroundColor,\n    theme,\n  )\n\n  return (\n    <Wrapper\n      className={className}\n      $backgroundColor={resolveBackgroundColor}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconWrapper alignItems=\"center\">\n        <Icon\n          size={20}\n          render={styles[type].icon}\n          color={styles[type].iconColor}\n        />\n      </IconWrapper>\n      <Box flex direction=\"column\" mx=\"8px\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {rightSideComponent}\n      {onClick && rightSideComponent === undefined && (\n        <Box ml={{ custom: 'auto' }}>\n          <Icon size={16} render=\"caret\" color=\"marzipan\" rotate={270} />\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $backgroundColor: string\n  onClick?: MouseEventHandler\n}\n\nconst IconWrapper = styled(Box)`\n  align-self: flex-start;\n`\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $backgroundColor, onClick }) => css`\n    align-items: center;\n    background-color: ${$backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: 12px;\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${darken(0.1, $backgroundColor)};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ theme }) => theme.color.text.base}};\n  line-height: 20.8px;\n  margin-bottom: 4px;\n`\n\nconst DescriptionBox = styled(Box)`\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}
+{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: NewColor\n  icon: Icons\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.illustration.neutral.300',\n    icon: 'info',\n  },\n  fallbackStyle: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.surface.base.100',\n    icon: 'info',\n  },\n  alert: {\n    iconColor: 'extended1.100',\n    backgroundColor: 'color.feedback.notice.100',\n    icon: 'alert',\n  },\n  warning: {\n    iconColor: 'color.feedback.negative.200',\n    backgroundColor: 'color.feedback.negative.100',\n    icon: 'warning',\n  },\n  success: {\n    iconColor: 'color.feedback.positive.200',\n    backgroundColor: 'color.feedback.positive.100',\n    icon: 'circle-tick',\n  },\n}\n\ntype SupportMessageType =\n  | 'info'\n  | 'fallbackStyle'\n  | 'alert'\n  | 'warning'\n  | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement<any>\n  onClick?: MouseEventHandler\n  /**\n   * Right side content, usually an icon or a button\n   */\n  rightSideComponent?: ReactElement<any>\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  rightSideComponent,\n  type,\n  title,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const resolveBackgroundColor = resolveToThemeColor(\n    styles[type].backgroundColor,\n    theme,\n  )\n\n  return (\n    <Wrapper\n      className={className}\n      $backgroundColor={resolveBackgroundColor}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconWrapper alignItems=\"center\">\n        <Icon\n          size={20}\n          render={styles[type].icon}\n          color={styles[type].iconColor}\n        />\n      </IconWrapper>\n      <Box flex direction=\"column\" mx=\"8px\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {rightSideComponent}\n      {onClick && rightSideComponent === undefined && (\n        <Box ml={{ custom: 'auto' }}>\n          <Icon\n            size={16}\n            render=\"caret\"\n            color=\"color.illustration.neutral.400\"\n            rotate={270}\n          />\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $backgroundColor: string\n  onClick?: MouseEventHandler\n}\n\nconst IconWrapper = styled(Box)`\n  align-self: flex-start;\n`\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $backgroundColor, onClick }) => css`\n    align-items: center;\n    background-color: ${$backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: 12px;\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${darken(0.1, $backgroundColor)};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ theme }) => theme.color.text.base}};\n  line-height: 20.8px;\n  margin-bottom: 4px;\n`\n\nconst DescriptionBox = styled(Box)`\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}

package/dist/Tag/Tag.spec.js

@@ -4,7 +4,7 @@ import { it, expect } from 'vitest';
 import { Tag } from '../Tag';
 describe('Tag Component', () => {
     it('renders snapshot test correctly', () => {
-        const { container } = render(React.createElement(Tag, { label: "Snapshot Test Tag", color: "marzipan", bgColor: "satsuma" }));
+        const { container } = render(React.createElement(Tag, { label: "Snapshot Test Tag", color: "color.illustration.neutral.400", bgColor: "extended1.20" }));
         expect(container).toMatchSnapshot();
     });
     describe('old colour name', () => {
@@ -58,16 +58,16 @@ const testCases = [
             color: 'apple',
             bgColor: 'chia',
             icon: 'flag',
-            iconColor: 'blueberry',
+            iconColor: 'color.illustration.accent2.200',
         },
     },
     {
-        description: 'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',
+        description: 'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',
         props: {
             label: 'Test Tag 0003',
             color: 'apple',
             bgColor: 'chia',
-            iconColor: 'blueberry',
+            iconColor: 'color.illustration.accent2.200',
         },
     },
     {
@@ -96,16 +96,16 @@ const testCasesWithNewColourNames = [
             color: 'color.feedback.positive.200',
             bgColor: 'color.feedback.inactive.100',
             icon: 'flag',
-            iconColor: 'blueberry',
+            iconColor: 'color.illustration.accent2.200',
         },
     },
     {
-        description: 'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',
+        description: 'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',
         props: {
             label: 'Test Tag 0003',
             color: 'color.feedback.positive.200',
             bgColor: 'color.feedback.inactive.100',
-            iconColor: 'blueberry',
+            iconColor: 'color.illustration.accent2.200',
         },
     },
     {

package/dist/Tag/Tag.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { render, screen } from '../testUtils'\nimport { it, expect } from 'vitest'\nimport { Tag } from '../Tag'\nimport { TagProps } from './Tag'\n\ndescribe('Tag Component', () => {\n  it('renders snapshot test correctly', () => {\n    const { container } = render(\n      <Tag label=\"Snapshot Test Tag\" color=\"marzipan\" bgColor=\"satsuma\" />,\n    )\n    expect(container).toMatchSnapshot()\n  })\n\n  describe('old colour name', () => {\n    testCases.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n  describe('new colour name', () => {\n    testCasesWithNewColourNames.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n})\n\nconst testCases = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'apple',\n      bgColor: 'chia',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flag',\n      iconColor: 'blueberry',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'apple',\n      bgColor: 'chia',\n      iconColor: 'blueberry',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n\nconst testCasesWithNewColourNames = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flag',\n      iconColor: 'blueberry',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      iconColor: 'blueberry',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n"]}
+{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { render, screen } from '../testUtils'\nimport { it, expect } from 'vitest'\nimport { Tag } from '../Tag'\nimport { TagProps } from './Tag'\n\ndescribe('Tag Component', () => {\n  it('renders snapshot test correctly', () => {\n    const { container } = render(\n      <Tag\n        label=\"Snapshot Test Tag\"\n        color=\"color.illustration.neutral.400\"\n        bgColor=\"extended1.20\"\n      />,\n    )\n    expect(container).toMatchSnapshot()\n  })\n\n  describe('old colour name', () => {\n    testCases.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n  describe('new colour name', () => {\n    testCasesWithNewColourNames.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n})\n\nconst testCases = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'apple',\n      bgColor: 'chia',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flag',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'apple',\n      bgColor: 'chia',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n\nconst testCasesWithNewColourNames = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flag',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "13.20.1",
+  "version": "13.20.2",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "type": "module",
@@ -65,7 +65,7 @@
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.1.2",
-    "playwright": "^1.53.0",
+    "playwright": "^1.56.1",
     "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.1.0",
@@ -75,7 +75,7 @@
     "styled-components": "^6.1.19",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.0",
-    "vite": "^6.3.6",
+    "vite": "^6.4.1",
     "vitest": "^3.2.3"
   },
   "dependencies": {