@mrshmllw/smores-react 16.2.13 → 16.2.15

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type CardProps = {\n  children?: ReactNode\n  leadingIcon?: Icons\n  iconComponent?: ReactNode\n  title?: string\n  body?: string\n  visual?: string\n  visualHeight?: string\n  tag?: ReactNode\n  cardOnClickAction?: MouseEventHandler<HTMLDivElement>\n  rightAction?: ReactNode\n  buttonAction?: ReactNode\n  fallbackStyle?: boolean\n  className?: string\n  maxWidth?: string\n  marginX?: string\n  marginY?: string\n  narrow?: boolean\n  wide?: boolean\n} & MarginProps\n\nexport const Card: FC<CardProps> = ({\n  children,\n  leadingIcon,\n  iconComponent,\n  title,\n  body,\n  visual,\n  tag,\n  cardOnClickAction,\n  rightAction,\n  buttonAction,\n  fallbackStyle = false,\n  visualHeight = '',\n  className = '',\n  maxWidth = '',\n  marginX = '',\n  marginY = '',\n  narrow = false,\n  wide = false,\n  ...otherProps\n}) => {\n  const theme = useTheme()\n  const addChildMargin =\n    (!!iconComponent || !!leadingIcon || !!title || !!body) && children\n\n  const isNotClickable = !cardOnClickAction\n\n  const iconToRender = iconComponent ? (\n    <IconContainer\n      style={{ marginRight: '12px' }}\n      $size={24}\n      $iconColor={theme.color.icon.base}\n    >\n      {iconComponent}\n    </IconContainer>\n  ) : leadingIcon ? (\n    <Icon mr=\"space.150\" render={leadingIcon} size={24} color=\"color.icon.base\" />\n  ) : null\n\n  return (\n    <Container\n      className={className}\n      $maxWidth={maxWidth}\n      $marginX={marginX}\n      $marginY={marginY}\n      $narrow={narrow}\n      $wide={wide}\n      $visual={visual}\n      $fallbackStyle={fallbackStyle}\n      $isNotClickable={isNotClickable}\n      onClick={cardOnClickAction}\n      tabIndex={isNotClickable ? undefined : 0}\n      {...otherProps}\n    >\n      {tag && visual && <TagWrapper>{tag}</TagWrapper>}\n      {visual && (\n        <VisualWrapper $visualHeight={visualHeight}>\n          <Visual $visualUrl={visual} $visualHeight={visualHeight} />\n        </VisualWrapper>\n      )}\n      <Box p={visual ? '16px' : { custom: '0px' }}>\n        <Box flex alignItems=\"center\" justifyContent=\"space-between\">\n          <Box flex alignItems=\"center\">\n            {iconToRender}\n            <Box>\n              {title && (\n                <Text typo=\"headline-regular\" color=\"color.text.base\">\n                  {title}\n                </Text>\n              )}\n              {body && (\n                <Text typo=\"body-regular\" color=\"color.text.subtle\">\n                  {body}\n                </Text>\n              )}\n            </Box>\n          </Box>\n          {rightAction && rightAction}\n        </Box>\n        <Box mt={addChildMargin ? '16px' : { custom: '0px' }}>{children}</Box>\n        {buttonAction && <Box mt=\"space.200\">{buttonAction}</Box>}\n      </Box>\n    </Container>\n  )\n}\n\ntype ICard = TransientProps<\n  Required<\n    Pick<\n      CardProps,\n      'maxWidth' | 'marginX' | 'marginY' | 'narrow' | 'wide' | 'fallbackStyle'\n    >\n  >\n> &\n  Partial<TransientProps<Pick<CardProps, 'visual'>>> & {\n    $isNotClickable?: boolean\n  }\n\nconst Container = styled(Box)<ICard>`\n  background: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base['000']\n      : theme.color.surface.base[300]};\n  box-sizing: border-box;\n  border-radius: 16px;\n\n  max-width: ${(p) => p.$maxWidth};\n  margin-top: ${(p) => p.$marginY};\n  margin-right: ${(p) => p.$marginX};\n  margin-bottom: ${(p) => p.$marginY};\n  margin-left: ${(p) => p.$marginX};\n\n  padding: ${({ $visual }) => ($visual ? '0px' : '16px')};\n  position: relative;\n  overflow: hidden;\n\n  ${({ $isNotClickable, $fallbackStyle, theme }) =>\n    !$isNotClickable &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(\n          0.1,\n          $fallbackStyle\n            ? theme.color.surface.base['000']\n            : theme.color.surface.base[300],\n        )};\n      }\n\n      ${focusOutlineStyle}\n    `};\n`\n\nconst TagWrapper = styled(Box)`\n  position: absolute;\n  top: 12px;\n  right: 12px;\n`\n\nconst VisualWrapper = styled(Box)<{ $visualHeight: string }>`\n  width: 100%;\n  margin-top: -16px;\n\n  ${({ $visualHeight }) => $visualHeight && `height: ${$visualHeight};`}\n`\n\nconst Visual = styled(Box)<{ $visualUrl: string; $visualHeight: string }>`\n  width: 100%;\n  background-image: url('${(p) => p.$visualUrl}');\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n\n  ${({ $visualHeight }) =>\n    $visualHeight ? `height: ${$visualHeight};` : 'padding-top: 100%;'}\n`\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type CardProps = {\n  children?: ReactNode\n  leadingIcon?: Icons\n  iconComponent?: ReactNode\n  title?: string\n  body?: string\n  visual?: string\n  visualHeight?: string\n  tag?: ReactNode\n  cardOnClickAction?: MouseEventHandler<HTMLDivElement>\n  rightAction?: ReactNode\n  buttonAction?: ReactNode\n  fallbackStyle?: boolean\n  className?: string\n  maxWidth?: string\n  marginX?: string\n  marginY?: string\n  narrow?: boolean\n  wide?: boolean\n} & MarginProps\n\nexport const Card: FC<CardProps> = ({\n  children,\n  leadingIcon,\n  iconComponent,\n  title,\n  body,\n  visual,\n  tag,\n  cardOnClickAction,\n  rightAction,\n  buttonAction,\n  fallbackStyle = false,\n  visualHeight = '',\n  className = '',\n  maxWidth = '',\n  marginX = '',\n  marginY = '',\n  narrow = false,\n  wide = false,\n  ...otherProps\n}) => {\n  const theme = useTheme()\n  const addChildMargin =\n    (!!iconComponent || !!leadingIcon || !!title || !!body) && children\n\n  const isNotClickable = !cardOnClickAction\n\n  const iconToRender = iconComponent ? (\n    <IconContainer\n      style={{ marginRight: '12px' }}\n      $size={24}\n      $iconColor={theme.color.icon.base}\n    >\n      {iconComponent}\n    </IconContainer>\n  ) : leadingIcon ? (\n    <Icon\n      mr=\"space.150\"\n      render={leadingIcon}\n      size={24}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  return (\n    <Container\n      className={className}\n      $maxWidth={maxWidth}\n      $marginX={marginX}\n      $marginY={marginY}\n      $narrow={narrow}\n      $wide={wide}\n      $visual={visual}\n      $fallbackStyle={fallbackStyle}\n      $isNotClickable={isNotClickable}\n      onClick={cardOnClickAction}\n      tabIndex={isNotClickable ? undefined : 0}\n      {...otherProps}\n    >\n      {tag && visual && <TagWrapper>{tag}</TagWrapper>}\n      {visual && (\n        <VisualWrapper $visualHeight={visualHeight}>\n          <Visual $visualUrl={visual} $visualHeight={visualHeight} />\n        </VisualWrapper>\n      )}\n      <Box p={visual ? '16px' : { custom: '0px' }}>\n        <Box flex alignItems=\"center\" justifyContent=\"space-between\">\n          <Box flex alignItems=\"center\">\n            {iconToRender}\n            <Box>\n              {title && (\n                <Text typo=\"headline-regular\" color=\"color.text.base\">\n                  {title}\n                </Text>\n              )}\n              {body && (\n                <Text typo=\"body-regular\" color=\"color.text.subtle\">\n                  {body}\n                </Text>\n              )}\n            </Box>\n          </Box>\n          {rightAction}\n        </Box>\n        <Box mt={addChildMargin ? '16px' : { custom: '0px' }}>{children}</Box>\n        {buttonAction && <Box mt=\"space.200\">{buttonAction}</Box>}\n      </Box>\n    </Container>\n  )\n}\n\ntype ICard = TransientProps<\n  Required<\n    Pick<\n      CardProps,\n      'maxWidth' | 'marginX' | 'marginY' | 'narrow' | 'wide' | 'fallbackStyle'\n    >\n  >\n> &\n  Partial<TransientProps<Pick<CardProps, 'visual'>>> & {\n    $isNotClickable?: boolean\n  }\n\nconst Container = styled(Box)<ICard>`\n  background: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base['000']\n      : theme.color.surface.base[300]};\n  box-sizing: border-box;\n  border-radius: 16px;\n\n  max-width: ${(p) => p.$maxWidth};\n  margin-top: ${(p) => p.$marginY};\n  margin-right: ${(p) => p.$marginX};\n  margin-bottom: ${(p) => p.$marginY};\n  margin-left: ${(p) => p.$marginX};\n\n  padding: ${({ $visual }) => ($visual ? '0px' : '16px')};\n  position: relative;\n  overflow: hidden;\n\n  ${({ $isNotClickable, $fallbackStyle, theme }) =>\n    !$isNotClickable &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(\n          0.1,\n          $fallbackStyle\n            ? theme.color.surface.base['000']\n            : theme.color.surface.base[300],\n        )};\n      }\n\n      ${focusOutlineStyle}\n    `};\n`\n\nconst TagWrapper = styled(Box)`\n  position: absolute;\n  top: 12px;\n  right: 12px;\n`\n\nconst VisualWrapper = styled(Box)<{ $visualHeight: string }>`\n  width: 100%;\n  margin-top: -16px;\n\n  ${({ $visualHeight }) => $visualHeight && `height: ${$visualHeight};`}\n`\n\nconst Visual = styled(Box)<{ $visualUrl: string; $visualHeight: string }>`\n  width: 100%;\n  background-image: url('${(p) => p.$visualUrl}');\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n\n  ${({ $visualHeight }) =>\n    $visualHeight ? `height: ${$visualHeight};` : 'padding-top: 100%;'}\n`\n"]}

package/dist/CheckBox/CheckBox.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { focusOutline } from '../utils/focusOutline';
@@ -6,7 +6,7 @@ import { Text } from '../Text';
 import { useUniqueId } from '../utils/id';
 export const CheckBox = forwardRef(function CheckBox({ id: idProp, checked, children, toggle, error, errorMsg }, ref) {
     const id = useUniqueId(idProp);
-    return (_jsxs(_Fragment, { children: [_jsxs(BoxContainer, { id: id, children: [_jsx(Text, { tag: "span", typo: "body-regular", color: error ? 'color.feedback.negative.200' : 'color.text.base', children: children }), _jsx("input", { ref: ref, type: "checkbox", checked: checked, onChange: toggle }), _jsx(Checkmark, { "$error": error })] }), error && errorMsg && _jsx(ErrorBox, { children: errorMsg })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(BoxContainer, { id: id, children: [_jsx(Text, { tag: "span", typo: "body-regular", color: error ? 'color.feedback.negative.200' : 'color.text.base', children: children }), _jsx("input", { ref: ref, type: "checkbox", checked: checked, onChange: toggle }), _jsx(Checkmark, { $error: error })] }), error && errorMsg && _jsx(ErrorBox, { children: errorMsg })] }));
 });
 const Checkmark = styled.span `
   position: absolute;

package/dist/CheckBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { focusOutline } from '../utils/focusOutline'\n\nimport { Text } from '../Text'\nimport { useUniqueId } from '../utils/id'\n\nexport type CheckBoxProps = {\n  id?: string\n  checked: boolean\n  children: ReactNode\n  toggle: () => void\n  error?: boolean\n  errorMsg?: string\n}\n\nexport const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\n  function CheckBox(\n    { id: idProp, checked, children, toggle, error, errorMsg },\n    ref,\n  ) {\n    const id = useUniqueId(idProp)\n    return (\n      <>\n        <BoxContainer id={id}>\n          <Text\n            tag=\"span\"\n            typo=\"body-regular\"\n            color={error ? 'color.feedback.negative.200' : 'color.text.base'}\n          >\n            {children}\n          </Text>\n\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            checked={checked}\n            onChange={toggle}\n          />\n          <Checkmark $error={error} />\n        </BoxContainer>\n        {error && errorMsg && <ErrorBox>{errorMsg}</ErrorBox>}\n      </>\n    )\n  },\n)\n\nconst Checkmark = styled.span<{ $error?: boolean }>`\n  position: absolute;\n  left: 0;\n  width: 24px;\n  height: 24px;\n  border: ${({ $error, theme }) =>\n    $error\n      ? `solid 2px ${theme.color.feedback.negative[200]}`\n      : `solid 2px ${theme.color.border.contrast}`};\n  box-sizing: border-box;\n  border-radius: 1px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: none;\n    top: 9px;\n    left: 5px;\n    width: 3px;\n    height: 8px;\n    border-radius: 4px;\n    background-color: ${({ theme }) => theme.color.surface.base['000']};\n    -webkit-transform: rotate(316deg);\n    -ms-transform: rotate(316deg);\n    transform: rotate(316deg);\n  }\n\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n    top: 3px;\n    left: 11px;\n    width: 3px;\n    height: 15px;\n    border-radius: 4px;\n    background-color: ${({ theme }) => theme.color.surface.base['000']};\n    -webkit-transform: rotate(43deg);\n    -ms-transform: rotate(43deg);\n    transform: rotate(43deg);\n  }\n`\n\nconst BoxContainer = styled.label`\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding-left: ${({ theme }) => theme.space[400]};\n  user-select: none;\n  cursor: pointer;\n  min-height: 24px;\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    background-color: ${({ theme }) => theme.color.surface.base['000']};\n\n    &:checked ~ ${Checkmark} {\n      background-color: ${({ theme }) => theme.color.icon.base};\n      border: solid 2px ${({ theme }) => theme.color.icon.base};\n    }\n\n    &:checked ~ ${Checkmark}:before {\n      display: block;\n    }\n\n    &:checked ~ ${Checkmark}:after {\n      display: block;\n    }\n\n    ${focusOutline({ selector: `&:focus-visible ~ ${Checkmark}` })}\n  }\n\n  &:hover {\n    ${Checkmark} {\n      background-color: ${({ theme }) =>\n        theme.color.interactive.neutral.subtle.hover};\n    }\n  }\n\n  @media (min-width: 768px) {\n    padding-left: ${({ theme }) => theme.space[400]};\n  }\n\n  span {\n    border-radius: 6px;\n    line-height: 24px;\n  }\n`\n\nconst ErrorBox = styled.div`\n  margin-top: ${({ theme }) => theme.space['050']};\n  font-size: 12px;\n  color: ${({ theme }) => theme.color.feedback.negative[200]};\n`\n"]}
+{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { focusOutline } from '../utils/focusOutline'\n\nimport { Text } from '../Text'\nimport { useUniqueId } from '../utils/id'\n\nexport type CheckBoxProps = {\n  id?: string\n  checked: boolean\n  children: ReactNode\n  toggle: () => void\n  error?: boolean\n  errorMsg?: string\n}\n\nexport const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\n  function CheckBox(\n    { id: idProp, checked, children, toggle, error, errorMsg },\n    ref,\n  ) {\n    const id = useUniqueId(idProp)\n    return (\n      <>\n        <BoxContainer id={id}>\n          <Text\n            tag=\"span\"\n            typo=\"body-regular\"\n            color={error ? 'color.feedback.negative.200' : 'color.text.base'}\n          >\n            {children}\n          </Text>\n\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            checked={checked}\n            onChange={toggle}\n          />\n          <Checkmark $error={error} />\n        </BoxContainer>\n        {error && errorMsg && <ErrorBox>{errorMsg}</ErrorBox>}\n      </>\n    )\n  },\n)\n\nconst Checkmark = styled.span<{ $error?: boolean }>`\n  position: absolute;\n  left: 0;\n  width: 24px;\n  height: 24px;\n  border: ${({ $error, theme }) =>\n    $error\n      ? `solid 2px ${theme.color.feedback.negative[200]}`\n      : `solid 2px ${theme.color.border.contrast}`};\n  box-sizing: border-box;\n  border-radius: 1px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: none;\n    top: 9px;\n    left: 5px;\n    width: 3px;\n    height: 8px;\n    border-radius: 4px;\n    background-color: ${({ theme }) => theme.color.surface.base['000']};\n    -webkit-transform: rotate(316deg);\n    -ms-transform: rotate(316deg);\n    transform: rotate(316deg);\n  }\n\n  &:after {\n    content: '';\n    position: absolute;\n    display: none;\n    top: 3px;\n    left: 11px;\n    width: 3px;\n    height: 15px;\n    border-radius: 4px;\n    background-color: ${({ theme }) => theme.color.surface.base['000']};\n    -webkit-transform: rotate(43deg);\n    -ms-transform: rotate(43deg);\n    transform: rotate(43deg);\n  }\n`\n\nconst BoxContainer = styled.label`\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding-left: ${({ theme }) => theme.space[400]};\n  user-select: none;\n  cursor: pointer;\n  min-height: 24px;\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    background-color: ${({ theme }) => theme.color.surface.base['000']};\n\n    &:checked ~ ${Checkmark} {\n      background-color: ${({ theme }) => theme.color.icon.base};\n      border: solid 2px ${({ theme }) => theme.color.icon.base};\n    }\n\n    &:checked ~ ${Checkmark}:before {\n      display: block;\n    }\n\n    &:checked ~ ${Checkmark}:after {\n      display: block;\n    }\n\n    ${focusOutline({ selector: `&:focus-visible ~ ${Checkmark}` })}\n  }\n\n  &:hover {\n    ${Checkmark} {\n      background-color: ${({ theme }) =>\n        theme.color.interactive.neutral.subtle.hover};\n    }\n  }\n\n  @media (min-width: 768px) {\n    padding-left: ${({ theme }) => theme.space[400]};\n  }\n\n  span {\n    border-radius: 6px;\n    line-height: 24px;\n  }\n`\n\nconst ErrorBox = styled.div`\n  margin-top: ${({ theme }) => theme.space['050']};\n  font-size: 12px;\n  color: ${({ theme }) => theme.color.feedback.negative[200]};\n`\n"]}

package/dist/Chip/Chip.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
@@ -9,10 +9,10 @@ import { IconContainer } from '../sharedStyles/shared.styles';
 import { resolveToThemeColor } from '../ThemeProvider/utils/colourMap';
 export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, iconComponent, ...props }, ref) => {
     const theme = useTheme();
-    const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": 16, "$iconColor": primary
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { $size: 16, $iconColor: primary
             ? resolveToThemeColor('color.icon.base', theme)
             : resolveToThemeColor('color.icon.inverse', theme), children: iconComponent })) : icon ? (_jsx(Icon, { render: icon, size: 16, color: primary ? 'color.icon.base' : 'color.icon.inverse' })) : null;
-    return (_jsx(Container, { forwardedAs: "button", "$primary": primary, "$secondary": secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, "$icon": Boolean(icon || iconComponent), ...props, ref: ref, "aria-label": "chip-button", children: loading ? (_jsx(Loader, { color: primary ? 'color.icon.base' : 'color.icon.inverse', height: "16" })) : (_jsxs(_Fragment, { children: [iconToRender, _jsx(ChildrenContainer, { children: children })] })) }));
+    return (_jsx(Container, { forwardedAs: "button", $primary: primary, $secondary: secondary, disabled: disabled || loading, $loading: loading, onClick: handleClick, $icon: Boolean(icon || iconComponent), ...props, ref: ref, "aria-label": "chip-button", children: loading ? (_jsx(Loader, { color: primary ? 'color.icon.base' : 'color.icon.inverse', height: "16" })) : (_jsxs(_Fragment, { children: [iconToRender, _jsx(ChildrenContainer, { children: children })] })) }));
 });
 Chip.displayName = 'Chip';
 const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled, theme }) => css `
@@ -35,24 +35,22 @@ const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled
 
     ${$primary &&
     css `
-      &:hover {
-        border: ${!(disabled || $loading) &&
+        &:hover {
+          border: ${!(disabled || $loading) &&
         `2px solid ${theme.color.background[200]}`};
-        background-color: ${!(disabled || $loading) &&
-        theme.color.background[200]};
-      }
-    `}
+          background-color: ${!(disabled || $loading) && theme.color.background[200]};
+        }
+      `}
     ${$secondary &&
     css `
-      color: ${theme.color.text.inverse};
-      background-color: ${theme.color.surface.base[900]};
-      border: 2px solid ${theme.color.surface.base[900]};
-      &:hover {
-        border: ${!(disabled || $loading) &&
-        `2px solid ${theme.color.text.subtle}`};
-        background-color: ${!(disabled || $loading) && theme.color.text.subtle};
-      }
-    `};
+        color: ${theme.color.text.inverse};
+        background-color: ${theme.color.surface.base[900]};
+        border: 2px solid ${theme.color.surface.base[900]};
+        &:hover {
+          border: ${!(disabled || $loading) && `2px solid ${theme.color.text.subtle}`};
+          background-color: ${!(disabled || $loading) && theme.color.text.subtle};
+        }
+      `};
   `);
 const ChildrenContainer = styled.div `
   flex-grow: 1;

package/dist/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonHTMLAttributes,\n  FC,\n  FormEvent,\n  ReactNode,\n  forwardRef,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ninterface IButton {\n  $primary: boolean\n  $secondary: boolean\n  $icon?: boolean\n  $loading: boolean\n  disabled: boolean\n}\n\ntype Props = {\n  children: ReactNode\n  handleClick: (e: FormEvent<HTMLButtonElement>) => void\n  primary?: boolean\n  secondary?: boolean\n  icon?: Icons\n  iconComponent?: ReactNode\n  disabled?: boolean\n  loading?: boolean\n} & MarginProps\n\nexport type ChipProps = Props & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Chip: FC<ChipProps> = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      children,\n      handleClick,\n      primary = false,\n      secondary = false,\n      disabled = false,\n      loading = false,\n      icon,\n      iconComponent,\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const iconToRender = iconComponent ? (\n      <IconContainer\n        $size={16}\n        $iconColor={\n          primary\n            ? resolveToThemeColor('color.icon.base', theme)\n            : resolveToThemeColor('color.icon.inverse', theme)\n        }\n      >\n        {iconComponent}\n      </IconContainer>\n    ) : icon ? (\n      <Icon\n        render={icon}\n        size={16}\n        color={primary ? 'color.icon.base' : 'color.icon.inverse'}\n      />\n    ) : null\n\n    return (\n      <Container\n        forwardedAs=\"button\"\n        $primary={primary}\n        $secondary={secondary}\n        disabled={disabled || loading}\n        $loading={loading}\n        onClick={handleClick}\n        $icon={Boolean(icon || iconComponent)}\n        {...props}\n        ref={ref}\n        aria-label=\"chip-button\"\n      >\n        {loading ? (\n          <Loader\n            color={primary ? 'color.icon.base' : 'color.icon.inverse'}\n            height=\"16\"\n          />\n        ) : (\n          <>\n            {iconToRender}\n            <ChildrenContainer>{children}</ChildrenContainer>\n          </>\n        )}\n      </Container>\n    )\n  },\n)\n\nChip.displayName = 'Chip'\n\nconst Container = styled(Box)<IButton>(\n  ({ $primary, $secondary, $icon, $loading, disabled, theme }) => css`\n    ${focusOutline()}\n\n    align-items: center;\n    background-color: ${theme.color.surface.base[300]};\n    border-radius: 100px;\n    border: 2px solid ${theme.color.surface.base[300]};\n    color: ${theme.color.text.base};\n    display: flex;\n    font-size: 16px;\n    justify-content: ${$icon ? 'space-evenly' : 'center'};\n    line-height: 100%;\n    padding: 8px 16px 8px ${$icon ? '8px' : '16px'};\n    min-width: 98px;\n    min-height: 40px;\n    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n    opacity: ${disabled ? '0.5' : '1'};\n\n    ${$primary &&\n    css`\n      &:hover {\n        border: ${!(disabled || $loading) &&\n        `2px solid ${theme.color.background[200]}`};\n        background-color: ${!(disabled || $loading) &&\n        theme.color.background[200]};\n      }\n    `}\n    ${$secondary &&\n    css`\n      color: ${theme.color.text.inverse};\n      background-color: ${theme.color.surface.base[900]};\n      border: 2px solid ${theme.color.surface.base[900]};\n      &:hover {\n        border: ${!(disabled || $loading) &&\n        `2px solid ${theme.color.text.subtle}`};\n        background-color: ${!(disabled || $loading) && theme.color.text.subtle};\n      }\n    `};\n  `,\n)\n\nconst ChildrenContainer = styled.div`\n  flex-grow: 1;\n`\n"]}
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonHTMLAttributes,\n  FC,\n  FormEvent,\n  ReactNode,\n  forwardRef,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ninterface IButton {\n  $primary: boolean\n  $secondary: boolean\n  $icon?: boolean\n  $loading: boolean\n  disabled: boolean\n}\n\ntype Props = {\n  children: ReactNode\n  handleClick: (e: FormEvent<HTMLButtonElement>) => void\n  primary?: boolean\n  secondary?: boolean\n  icon?: Icons\n  iconComponent?: ReactNode\n  disabled?: boolean\n  loading?: boolean\n} & MarginProps\n\nexport type ChipProps = Props & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Chip: FC<ChipProps> = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      children,\n      handleClick,\n      primary = false,\n      secondary = false,\n      disabled = false,\n      loading = false,\n      icon,\n      iconComponent,\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const iconToRender = iconComponent ? (\n      <IconContainer\n        $size={16}\n        $iconColor={\n          primary\n            ? resolveToThemeColor('color.icon.base', theme)\n            : resolveToThemeColor('color.icon.inverse', theme)\n        }\n      >\n        {iconComponent}\n      </IconContainer>\n    ) : icon ? (\n      <Icon\n        render={icon}\n        size={16}\n        color={primary ? 'color.icon.base' : 'color.icon.inverse'}\n      />\n    ) : null\n\n    return (\n      <Container\n        forwardedAs=\"button\"\n        $primary={primary}\n        $secondary={secondary}\n        disabled={disabled || loading}\n        $loading={loading}\n        onClick={handleClick}\n        $icon={Boolean(icon || iconComponent)}\n        {...props}\n        ref={ref}\n        aria-label=\"chip-button\"\n      >\n        {loading ? (\n          <Loader\n            color={primary ? 'color.icon.base' : 'color.icon.inverse'}\n            height=\"16\"\n          />\n        ) : (\n          <>\n            {iconToRender}\n            <ChildrenContainer>{children}</ChildrenContainer>\n          </>\n        )}\n      </Container>\n    )\n  },\n)\n\nChip.displayName = 'Chip'\n\nconst Container = styled(Box)<IButton>(\n  ({ $primary, $secondary, $icon, $loading, disabled, theme }) => css`\n    ${focusOutline()}\n\n    align-items: center;\n    background-color: ${theme.color.surface.base[300]};\n    border-radius: 100px;\n    border: 2px solid ${theme.color.surface.base[300]};\n    color: ${theme.color.text.base};\n    display: flex;\n    font-size: 16px;\n    justify-content: ${$icon ? 'space-evenly' : 'center'};\n    line-height: 100%;\n    padding: 8px 16px 8px ${$icon ? '8px' : '16px'};\n    min-width: 98px;\n    min-height: 40px;\n    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n    opacity: ${disabled ? '0.5' : '1'};\n\n    ${\n      $primary &&\n      css`\n        &:hover {\n          border: ${\n            !(disabled || $loading) &&\n            `2px solid ${theme.color.background[200]}`\n          };\n          background-color: ${\n            !(disabled || $loading) && theme.color.background[200]\n          };\n        }\n      `\n    }\n    ${\n      $secondary &&\n      css`\n        color: ${theme.color.text.inverse};\n        background-color: ${theme.color.surface.base[900]};\n        border: 2px solid ${theme.color.surface.base[900]};\n        &:hover {\n          border: ${\n            !(disabled || $loading) && `2px solid ${theme.color.text.subtle}`\n          };\n          background-color: ${!(disabled || $loading) && theme.color.text.subtle};\n        }\n      `\n    };\n  `,\n)\n\nconst ChildrenContainer = styled.div`\n  flex-grow: 1;\n`\n"]}

package/dist/CurrencyInput/CurrencyInput.js

@@ -44,8 +44,9 @@ export const CurrencyInput = forwardRef(function CurrencyInput({ id: idProp, pla
             onChange(normalisedValue);
         }
     };
-    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [_jsx(InputLeadingIconContainer, { "$size": 20, "$disabled": disabled, style: { top: '-1px' }, children: _jsx(FontAwesomeIcon, { icon: faSterlingSign, color: theme.color.text.subtle }) }), _jsx(Input, { ref: ref, "$error": error, disabled: disabled, type: "number", id: id, name: name, placeholder: placeholder, value: value, "$frontIcon": true, "$fallbackStyle": fallbackStyle, onChange: (e) => {
-                        onChange && handleChange(e.currentTarget.value);
+    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [_jsx(InputLeadingIconContainer, { $size: 20, $disabled: disabled, style: { top: '-1px' }, children: _jsx(FontAwesomeIcon, { icon: faSterlingSign, color: theme.color.text.subtle }) }), _jsx(Input, { ref: ref, $error: error, disabled: disabled, type: "number", id: id, name: name, placeholder: placeholder, value: value, $frontIcon: true, $fallbackStyle: fallbackStyle, onChange: (e) => {
+                        if (onChange)
+                            handleChange(e.currentTarget.value);
                         onInputChange?.(e);
                     }, onWheel: (e) => e.currentTarget.blur(), onBlur: onBlur })] }) }));
 });

package/dist/CurrencyInput/CurrencyInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../src/CurrencyInput/CurrencyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  WheelEvent,\n  forwardRef,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\n\nimport {\n  Input,\n  InputLeadingIconContainer,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { faSterlingSign } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { useTheme } from 'styled-components'\n\nexport interface Props extends CommonFieldProps {\n  placeholder: string\n  name?: string\n  value: string\n  decimalNumber?: boolean\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  min?: number\n  max?: number\n}\n\n/** on change or on input required */\ntype InputProps =\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n\nexport type CurrencyInputProps = Props & InputProps\n\nexport const CurrencyInput = forwardRef(function CurrencyInput(\n  {\n    id: idProp,\n    placeholder,\n    name,\n    value,\n    decimalNumber = true,\n    onChange,\n    onInputChange,\n    onBlur,\n    min,\n    max,\n    disabled = false,\n    error = false,\n    fallbackStyle,\n    ...fieldProps\n  }: CurrencyInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const theme = useTheme()\n  const id = useUniqueId(idProp)\n\n  const formatCurrency = (value: string) => {\n    const decimalIndex = value.indexOf('.')\n\n    if (!decimalNumber) {\n      return Math.trunc(Number(value)).toString()\n    }\n\n    if (decimalIndex >= 0 && value.length > decimalIndex + 1) {\n      const fractionalString = value.substring(decimalIndex + 1).substring(0, 2)\n      return `${value.substring(0, decimalIndex)}.${fractionalString}`\n    } else {\n      return value\n    }\n  }\n\n  const applyMinMax = (value: string) => {\n    const numberValue = Number(value)\n    if (min && numberValue < min) return min.toString()\n    if (max && numberValue > max) return max.toString()\n    return value\n  }\n\n  const handleChange = (value: string) => {\n    if (onChange === undefined) return\n    const EMPTY_INPUT = ''\n\n    if (value === EMPTY_INPUT) {\n      onChange(value)\n    } else {\n      const amount = formatCurrency(value)\n      const normalisedValue = applyMinMax(amount)\n\n      onChange(normalisedValue)\n    }\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        <InputLeadingIconContainer\n          $size={20}\n          $disabled={disabled}\n          style={{ top: '-1px' }}\n        >\n          <FontAwesomeIcon\n            icon={faSterlingSign}\n            color={theme.color.text.subtle}\n          />\n        </InputLeadingIconContainer>\n        <Input\n          ref={ref}\n          $error={error}\n          disabled={disabled}\n          type=\"number\"\n          id={id}\n          name={name}\n          placeholder={placeholder}\n          value={value}\n          $frontIcon={true}\n          $fallbackStyle={fallbackStyle}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && handleChange(e.currentTarget.value)\n            onInputChange?.(e)\n          }}\n          onWheel={(e: WheelEvent<HTMLInputElement>) => e.currentTarget.blur()}\n          onBlur={onBlur}\n        />\n      </Box>\n    </Field>\n  )\n})\n"]}
+{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../src/CurrencyInput/CurrencyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  WheelEvent,\n  forwardRef,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\n\nimport {\n  Input,\n  InputLeadingIconContainer,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { faSterlingSign } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { useTheme } from 'styled-components'\n\nexport interface Props extends CommonFieldProps {\n  placeholder: string\n  name?: string\n  value: string\n  decimalNumber?: boolean\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  min?: number\n  max?: number\n}\n\n/** on change or on input required */\ntype InputProps =\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n\nexport type CurrencyInputProps = Props & InputProps\n\nexport const CurrencyInput = forwardRef(function CurrencyInput(\n  {\n    id: idProp,\n    placeholder,\n    name,\n    value,\n    decimalNumber = true,\n    onChange,\n    onInputChange,\n    onBlur,\n    min,\n    max,\n    disabled = false,\n    error = false,\n    fallbackStyle,\n    ...fieldProps\n  }: CurrencyInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const theme = useTheme()\n  const id = useUniqueId(idProp)\n\n  const formatCurrency = (value: string) => {\n    const decimalIndex = value.indexOf('.')\n\n    if (!decimalNumber) {\n      return Math.trunc(Number(value)).toString()\n    }\n\n    if (decimalIndex >= 0 && value.length > decimalIndex + 1) {\n      const fractionalString = value.substring(decimalIndex + 1).substring(0, 2)\n      return `${value.substring(0, decimalIndex)}.${fractionalString}`\n    } else {\n      return value\n    }\n  }\n\n  const applyMinMax = (value: string) => {\n    const numberValue = Number(value)\n    if (min && numberValue < min) return min.toString()\n    if (max && numberValue > max) return max.toString()\n    return value\n  }\n\n  const handleChange = (value: string) => {\n    if (onChange === undefined) return\n    const EMPTY_INPUT = ''\n\n    if (value === EMPTY_INPUT) {\n      onChange(value)\n    } else {\n      const amount = formatCurrency(value)\n      const normalisedValue = applyMinMax(amount)\n\n      onChange(normalisedValue)\n    }\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        <InputLeadingIconContainer\n          $size={20}\n          $disabled={disabled}\n          style={{ top: '-1px' }}\n        >\n          <FontAwesomeIcon\n            icon={faSterlingSign}\n            color={theme.color.text.subtle}\n          />\n        </InputLeadingIconContainer>\n        <Input\n          ref={ref}\n          $error={error}\n          disabled={disabled}\n          type=\"number\"\n          id={id}\n          name={name}\n          placeholder={placeholder}\n          value={value}\n          $frontIcon={true}\n          $fallbackStyle={fallbackStyle}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            if (onChange) handleChange(e.currentTarget.value)\n            onInputChange?.(e)\n          }}\n          onWheel={(e: WheelEvent<HTMLInputElement>) => e.currentTarget.blur()}\n          onBlur={onBlur}\n        />\n      </Box>\n    </Field>\n  )\n})\n"]}

package/dist/Datepicker/Datepicker.js

@@ -61,15 +61,15 @@ export const Datepicker = ({ showDayLabels = false, disableWeekend = true, range
         }
         return filteredDays;
     };
-    return (_jsxs(Container, { id: "datepicker", ...marginProps, "$fallbackStyle": fallbackStyle, children: [_jsxs(Header, { flex: true, alignItems: "center", justifyContent: "space-between", direction: "row", children: [_jsx(Circle, { "aria-label": "previous-month", type: "button", "data-testid": "last-month", disabled: activeMonthIndex === 0, onClick: () => setActiveMonth(activeMonthIndex - 1), onKeyDown: (e) => {
+    return (_jsxs(Container, { id: "datepicker", ...marginProps, $fallbackStyle: fallbackStyle, children: [_jsxs(Header, { flex: true, alignItems: "center", justifyContent: "space-between", direction: "row", children: [_jsx(Circle, { "aria-label": "previous-month", type: "button", "data-testid": "last-month", disabled: activeMonthIndex === 0, onClick: () => setActiveMonth(activeMonthIndex - 1), onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 setActiveMonth(activeMonthIndex - 1);
                             }
-                        }, children: _jsx(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft, color: theme.color.surface.base['000'] }) }) }), _jsxs(Heading, { tag: "h4", typo: "body-regular", children: [availableMonths[activeMonthIndex]?.label, ' ', showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`] }), _jsx(Circle, { "aria-label": "next-month", type: "button", "data-testid": "next-month", disabled: activeMonthIndex === availableMonths.length - 1, onClick: () => setActiveMonth(activeMonthIndex + 1), onKeyDown: (e) => {
+                        }, children: _jsx(IconContainer, { $size: 16, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft, color: theme.color.surface.base['000'] }) }) }), _jsxs(Heading, { tag: "h4", typo: "body-regular", children: [availableMonths[activeMonthIndex]?.label, ' ', showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`] }), _jsx(Circle, { "aria-label": "next-month", type: "button", "data-testid": "next-month", disabled: activeMonthIndex === availableMonths.length - 1, onClick: () => setActiveMonth(activeMonthIndex + 1), onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 setActiveMonth(activeMonthIndex + 1);
                             }
-                        }, children: _jsx(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faChevronRight, color: theme.color.surface.base['000'] }) }) })] }), _jsx(Box, { flex: true, alignItems: "center", justifyContent: "center", children: _jsx(DatesList, { items: generateDaysForMonth(availableMonths[activeMonthIndex]?.date), showDayLabels: showDayLabels, handleDateSelect: handleSelectEvent }) })] }));
+                        }, children: _jsx(IconContainer, { $size: 16, children: _jsx(FontAwesomeIcon, { icon: faChevronRight, color: theme.color.surface.base['000'] }) }) })] }), _jsx(Box, { flex: true, alignItems: "center", justifyContent: "center", children: _jsx(DatesList, { items: generateDaysForMonth(availableMonths[activeMonthIndex]?.date), showDayLabels: showDayLabels, handleDateSelect: handleSelectEvent }) })] }));
 };
 const Container = styled(Box) `
   font-family: ${theme.font.system};

package/dist/Datepicker/Datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  addDays,\n  eachMonthOfInterval,\n  format,\n  getDaysInMonth,\n  getMonth,\n  getYear,\n  isSameDay,\n  isSameMonth,\n  isWeekend,\n  isWithinInterval,\n} from 'date-fns'\nimport { FC, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\n\nimport { convertToUkDate } from '../utils/date'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { useControllableState } from '../utils/useControlledState'\nimport { DatesList } from './DatesList'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nconst getAvailableMonths = (startDate: Date, endDate: Date) => {\n  const monthList = eachMonthOfInterval({\n    start: startDate,\n    end: endDate,\n  })\n\n  return monthList.map((monthDate) => ({\n    date: monthDate,\n    label: format(monthDate, 'MMMM'),\n  }))\n}\n\nexport type DatepickerProps = {\n  showDayLabels?: boolean\n  disableWeekend?: boolean\n  fromDate?: Date\n  endingDate?: Date\n  showYear?: boolean\n  showSelectedDate?: boolean\n  range?: number\n  onDateSelect: (date: string) => void\n  onChange?: (value: Date) => void\n  value?: Date\n  /** Disables all dates, defaults to false */\n  disabled?: boolean\n  fallbackStyle?: boolean\n} & MarginProps\n\nexport const Datepicker: FC<DatepickerProps> = ({\n  showDayLabels = false,\n  disableWeekend = true,\n  range = 14,\n  fromDate = new Date(),\n  endingDate,\n  showYear = false,\n  showSelectedDate = false,\n  onDateSelect,\n  onChange,\n  value,\n  disabled,\n  fallbackStyle = false,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  // We want to make sure that the date is in the UK timezone,\n  // this might need to be revisit when opening up to new countries\n  const startDate = convertToUkDate(fromDate)\n  const endDate = endingDate ? endingDate : addDays(startDate, range)\n  const availableMonths = getAvailableMonths(startDate, endDate)\n\n  const selectedDate = value ?? new Date()\n\n  const [activeDay, setActiveDay] = useControllableState({\n    initialState: undefined,\n    stateProp: value,\n  })\n  const [activeMonthIndex, setActiveMonth] = useState(\n    showSelectedDate\n      ? availableMonths.findIndex((month) =>\n          isSameMonth(month.date, selectedDate),\n        )\n      : 0,\n  )\n\n  const handleSelectEvent = (date: Date) => {\n    setActiveDay(date)\n    onChange?.(date)\n    onDateSelect(format(date, 'yyyy-MM-dd'))\n  }\n\n  const generateDaysForMonth = (monthDate: Date) => {\n    const daysInMonth = getDaysInMonth(monthDate)\n    const month = getMonth(monthDate)\n    const year = getYear(monthDate)\n    const filteredDays = []\n\n    for (let i = 1; i <= daysInMonth; i += 1) {\n      const date = new Date(year, month, i)\n\n      filteredDays.push({\n        date,\n        label: format(date, 'dd'),\n        active: activeDay ? isSameDay(date, activeDay) : false,\n        disabled: disabled\n          ? true\n          : !isWithinInterval(date, { start: startDate, end: endDate }) ||\n            (disableWeekend && isWeekend(date)),\n      })\n    }\n\n    return filteredDays\n  }\n\n  return (\n    <Container id=\"datepicker\" {...marginProps} $fallbackStyle={fallbackStyle}>\n      <Header\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        direction=\"row\"\n      >\n        <Circle\n          aria-label=\"previous-month\"\n          type=\"button\"\n          data-testid=\"last-month\"\n          disabled={activeMonthIndex === 0}\n          onClick={() => setActiveMonth(activeMonthIndex - 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex - 1)\n            }\n          }}\n        >\n          <IconContainer $size={16}>\n            <FontAwesomeIcon\n              icon={faChevronLeft}\n              color={theme.color.surface.base['000']}\n            />\n          </IconContainer>\n        </Circle>\n\n        <Heading tag=\"h4\" typo=\"body-regular\">\n          {availableMonths[activeMonthIndex]?.label}{' '}\n          {showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`}\n        </Heading>\n\n        <Circle\n          aria-label=\"next-month\"\n          type=\"button\"\n          data-testid=\"next-month\"\n          disabled={activeMonthIndex === availableMonths.length - 1}\n          onClick={() => setActiveMonth(activeMonthIndex + 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex + 1)\n            }\n          }}\n        >\n          <IconContainer $size={16}>\n            <FontAwesomeIcon\n              icon={faChevronRight}\n              color={theme.color.surface.base['000']}\n            />\n          </IconContainer>\n        </Circle>\n      </Header>\n\n      <Box flex alignItems=\"center\" justifyContent=\"center\">\n        <DatesList\n          items={generateDaysForMonth(availableMonths[activeMonthIndex]?.date)}\n          showDayLabels={showDayLabels}\n          handleDateSelect={handleSelectEvent}\n        />\n      </Box>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ $fallbackStyle: boolean }>`\n  font-family: ${theme.font.system};\n  display: inline-block;\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 16px;\n\n  ${({ $fallbackStyle, theme }) => {\n    return $fallbackStyle\n      ? css`\n          background-color: ${theme.color.surface.base['000']};\n        `\n      : css`\n          background-color: ${theme.color.surface.base[300]};\n        `\n  }}\n`\n\nconst Header = styled(Box)`\n  color: ${({ theme }) => theme.color.text.base};\n  user-select: none;\n  padding: ${({ theme }) => theme.space[200]};\n  border-bottom: 1px solid ${({ theme }) => theme.color.border.subtle};\n\n  span {\n    font-size: 16px;\n    line-height: 1;\n  }\n`\n\nconst Heading = styled(Text)`\n  position: relative;\n  top: 2px;\n  font-weight: ${theme.font.weight.medium};\n`\n\nconst Circle = styled.button`\n  background-color: ${({ theme }) => theme.color.surface.base[900]};\n  height: 32px;\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: none;\n  padding: 0 !important;\n  cursor: pointer;\n\n  :disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  ${focusOutlineStyle}\n`\n"]}
+{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  addDays,\n  eachMonthOfInterval,\n  format,\n  getDaysInMonth,\n  getMonth,\n  getYear,\n  isSameDay,\n  isSameMonth,\n  isWeekend,\n  isWithinInterval,\n} from 'date-fns'\nimport { FC, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\n\nimport { convertToUkDate } from '../utils/date'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { useControllableState } from '../utils/useControlledState'\nimport { DatesList } from './DatesList'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nconst getAvailableMonths = (startDate: Date, endDate: Date) => {\n  const monthList = eachMonthOfInterval({\n    start: startDate,\n    end: endDate,\n  })\n\n  return monthList.map((monthDate) => ({\n    date: monthDate,\n    label: format(monthDate, 'MMMM'),\n  }))\n}\n\nexport type DatepickerProps = {\n  showDayLabels?: boolean\n  disableWeekend?: boolean\n  fromDate?: Date\n  endingDate?: Date\n  showYear?: boolean\n  showSelectedDate?: boolean\n  range?: number\n  onDateSelect: (date: string) => void\n  onChange?: (value: Date) => void\n  value?: Date\n  /** Disables all dates, defaults to false */\n  disabled?: boolean\n  fallbackStyle?: boolean\n} & MarginProps\n\nexport const Datepicker: FC<DatepickerProps> = ({\n  showDayLabels = false,\n  disableWeekend = true,\n  range = 14,\n  fromDate = new Date(),\n  endingDate,\n  showYear = false,\n  showSelectedDate = false,\n  onDateSelect,\n  onChange,\n  value,\n  disabled,\n  fallbackStyle = false,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  // We want to make sure that the date is in the UK timezone,\n  // this might need to be revisit when opening up to new countries\n  const startDate = convertToUkDate(fromDate)\n  const endDate = endingDate ? endingDate : addDays(startDate, range)\n  const availableMonths = getAvailableMonths(startDate, endDate)\n\n  const selectedDate = value ?? new Date()\n\n  const [activeDay, setActiveDay] = useControllableState({\n    initialState: undefined,\n    stateProp: value,\n  })\n  const [activeMonthIndex, setActiveMonth] = useState(\n    showSelectedDate\n      ? availableMonths.findIndex((month) =>\n          isSameMonth(month.date, selectedDate),\n        )\n      : 0,\n  )\n\n  const handleSelectEvent = (date: Date) => {\n    setActiveDay(date)\n    onChange?.(date)\n    onDateSelect(format(date, 'yyyy-MM-dd'))\n  }\n\n  const generateDaysForMonth = (monthDate: Date) => {\n    const daysInMonth = getDaysInMonth(monthDate)\n    const month = getMonth(monthDate)\n    const year = getYear(monthDate)\n    const filteredDays = []\n\n    for (let i = 1; i <= daysInMonth; i += 1) {\n      const date = new Date(year, month, i)\n\n      filteredDays.push({\n        date,\n        label: format(date, 'dd'),\n        active: activeDay ? isSameDay(date, activeDay) : false,\n        disabled: disabled\n          ? true\n          : !isWithinInterval(date, { start: startDate, end: endDate }) ||\n            (disableWeekend && isWeekend(date)),\n      })\n    }\n\n    return filteredDays\n  }\n\n  return (\n    <Container id=\"datepicker\" {...marginProps} $fallbackStyle={fallbackStyle}>\n      <Header\n        flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        direction=\"row\"\n      >\n        <Circle\n          aria-label=\"previous-month\"\n          type=\"button\"\n          data-testid=\"last-month\"\n          disabled={activeMonthIndex === 0}\n          onClick={() => setActiveMonth(activeMonthIndex - 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex - 1)\n            }\n          }}\n        >\n          <IconContainer $size={16}>\n            <FontAwesomeIcon\n              icon={faChevronLeft}\n              color={theme.color.surface.base['000']}\n            />\n          </IconContainer>\n        </Circle>\n\n        <Heading tag=\"h4\" typo=\"body-regular\">\n          {availableMonths[activeMonthIndex]?.label}{' '}\n          {showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`}\n        </Heading>\n\n        <Circle\n          aria-label=\"next-month\"\n          type=\"button\"\n          data-testid=\"next-month\"\n          disabled={activeMonthIndex === availableMonths.length - 1}\n          onClick={() => setActiveMonth(activeMonthIndex + 1)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              setActiveMonth(activeMonthIndex + 1)\n            }\n          }}\n        >\n          <IconContainer $size={16}>\n            <FontAwesomeIcon\n              icon={faChevronRight}\n              color={theme.color.surface.base['000']}\n            />\n          </IconContainer>\n        </Circle>\n      </Header>\n\n      <Box flex alignItems=\"center\" justifyContent=\"center\">\n        <DatesList\n          items={generateDaysForMonth(availableMonths[activeMonthIndex]?.date)}\n          showDayLabels={showDayLabels}\n          handleDateSelect={handleSelectEvent}\n        />\n      </Box>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ $fallbackStyle: boolean }>`\n  font-family: ${theme.font.system};\n  display: inline-block;\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 16px;\n\n  ${({ $fallbackStyle, theme }) => {\n    return $fallbackStyle\n      ? css`\n          background-color: ${theme.color.surface.base['000']};\n        `\n      : css`\n          background-color: ${theme.color.surface.base[300]};\n        `\n  }}\n`\n\nconst Header = styled(Box)`\n  color: ${({ theme }) => theme.color.text.base};\n  user-select: none;\n  padding: ${({ theme }) => theme.space[200]};\n  border-bottom: 1px solid ${({ theme }) => theme.color.border.subtle};\n\n  span {\n    font-size: 16px;\n    line-height: 1;\n  }\n`\n\nconst Heading = styled(Text)`\n  position: relative;\n  top: 2px;\n  font-weight: ${theme.font.weight.medium};\n`\n\nconst Circle = styled.button`\n  background-color: ${({ theme }) => theme.color.surface.base[900]};\n  height: 32px;\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: none;\n  padding: 0 !important;\n  cursor: pointer;\n\n  :disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  ${focusOutlineStyle}\n`\n"]}

package/dist/Divider/Divider.js

@@ -6,7 +6,7 @@ import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
 export const Divider = memo(function Divider({ maxWidth = 'none', height = '1px', color = 'color.illustration.neutral.300', ...marginProps }) {
     const theme = useTheme();
     const resolvedColor = resolveToThemeColor(color, theme);
-    return (_jsx(Line, { "$maxWidth": maxWidth, "$height": height, "$color": resolvedColor, ...marginProps }));
+    return (_jsx(Line, { $maxWidth: maxWidth, $height: height, $color: resolvedColor, ...marginProps }));
 });
 const Line = styled(Box) `
   ${({ $color }) => $color &&

package/dist/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAQzC,MAAM,CAAC,MAAM,OAAO,GAAqB,IAAI,CAAC,SAAS,OAAO,CAAC,EAC7D,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,gCAAgC,EACxC,GAAG,WAAW,EACf;IACC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,OAAO,CACL,KAAC,IAAI,iBACQ,QAAQ,aACV,MAAM,YACP,aAAa,KACjB,WAAW,GACf,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAIvB;IACG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM;IACN,GAAG,CAAA;oBACa,MAAM;KACrB;;YAEO,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;eACrB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;;CAE1C,CAAA","sourcesContent":["import { FC, memo } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type DividerProps = {\n  maxWidth?: string\n  height?: string\n  color?: ColorTypes\n} & MarginProps\n\nexport const Divider: FC<DividerProps> = memo(function Divider({\n  maxWidth = 'none',\n  height = '1px',\n  color = 'color.illustration.neutral.300',\n  ...marginProps\n}) {\n  const theme = useTheme()\n  const resolvedColor = resolveToThemeColor(color, theme)\n\n  return (\n    <Line\n      $maxWidth={maxWidth}\n      $height={height}\n      $color={resolvedColor}\n      {...marginProps}\n    />\n  )\n})\n\nconst Line = styled(Box)<\n  TransientProps<Pick<DividerProps, 'height' | 'maxWidth'>> & {\n    $color: string\n  }\n>`\n  ${({ $color }) =>\n    $color &&\n    css`\n      background: ${$color};\n    `}\n  display: block;\n  height: ${({ $height }) => $height};\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  width: 100%;\n`\n"]}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/Divider/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAQzC,MAAM,CAAC,MAAM,OAAO,GAAqB,IAAI,CAAC,SAAS,OAAO,CAAC,EAC7D,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,gCAAgC,EACxC,GAAG,WAAW,EACf;IACC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,aAAa,KACjB,WAAW,GACf,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAIvB;IACG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM;IACN,GAAG,CAAA;oBACa,MAAM;KACrB;;YAEO,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;eACrB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;;CAE1C,CAAA","sourcesContent":["import { FC, memo } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type DividerProps = {\n  maxWidth?: string\n  height?: string\n  color?: ColorTypes\n} & MarginProps\n\nexport const Divider: FC<DividerProps> = memo(function Divider({\n  maxWidth = 'none',\n  height = '1px',\n  color = 'color.illustration.neutral.300',\n  ...marginProps\n}) {\n  const theme = useTheme()\n  const resolvedColor = resolveToThemeColor(color, theme)\n\n  return (\n    <Line\n      $maxWidth={maxWidth}\n      $height={height}\n      $color={resolvedColor}\n      {...marginProps}\n    />\n  )\n})\n\nconst Line = styled(Box)<\n  TransientProps<Pick<DividerProps, 'height' | 'maxWidth'>> & {\n    $color: string\n  }\n>`\n  ${({ $color }) =>\n    $color &&\n    css`\n      background: ${$color};\n    `}\n  display: block;\n  height: ${({ $height }) => $height};\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  width: 100%;\n`\n"]}

package/dist/Dropdown/Dropdown.js

@@ -33,13 +33,13 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder,
         }
         return customDefaultOption ?? 'Select an option';
     };
-    const iconToRender = iconComponent ? (_jsx(InputLeadingIconContainer, { "$size": 16, "$iconColor": theme.color.text.base, children: iconComponent })) : frontIcon ? (_jsx(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })) : null;
+    const iconToRender = iconComponent ? (_jsx(InputLeadingIconContainer, { $size: 16, $iconColor: theme.color.text.base, children: iconComponent })) : frontIcon ? (_jsx(StyledFrontIcon, { $disabled: disabled, render: frontIcon, color: "sesame" })) : null;
     return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", style: { position: 'relative' }, children: [iconToRender, _jsxs(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
                         const value = event.currentTarget.value;
                         onSelect?.(value);
                         onInputChange?.(event);
                         setValue(value);
-                    }, "$error": error, ref: ref, onBlur: onBlur, name: name, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, value: value ?? '', children: [hasOptGroups ? (_jsx("optgroup", { label: defaultOptionLabel(), children: _jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }) })) : (_jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() })), dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (_jsx("optgroup", { label: groupItems[0].optionGroupLabel ?? 'Other', children: groupItems.map((el, j) => (_jsx("option", { value: el.value, children: el.label }, `${i}-${j}`))) }, i)) : (groupItems.map((el, j) => (_jsx("option", { value: el.value, children: el.label }, j)))))] }), _jsx(Caret, { children: _jsx(IconContainer, { "$size": 20, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.illustration.neutral[400] }) }) })] }) }));
+                    }, $error: error, ref: ref, onBlur: onBlur, name: name, $frontIcon: frontIcon, $fallbackStyle: fallbackStyle, value: value ?? '', children: [hasOptGroups ? (_jsx("optgroup", { label: defaultOptionLabel(), children: _jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }) })) : (_jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() })), dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (_jsx("optgroup", { label: groupItems[0].optionGroupLabel ?? 'Other', children: groupItems.map((el, j) => (_jsx("option", { value: el.value, children: el.label }, `${i}-${j}`))) }, i)) : (groupItems.map((el, j) => (_jsx("option", { value: el.value, children: el.label }, j)))))] }), _jsx(Caret, { children: _jsx(IconContainer, { $size: 20, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.illustration.neutral[400] }) }) })] }) }));
 });
 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":"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","sourcesContent":["import {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useMemo,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icons } from '../Icon'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  InputLeadingIconContainer,\n  StyledFrontIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\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  iconComponent?: ReactNode\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    iconComponent,\n    fallbackStyle,\n    ...fieldProps\n  }: DropdownProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const theme = useTheme()\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  const iconToRender = iconComponent ? (\n    <InputLeadingIconContainer $size={16} $iconColor={theme.color.text.base}>\n      {iconComponent}\n    </InputLeadingIconContainer>\n  ) : frontIcon ? (\n    <StyledFrontIcon $disabled={disabled} render={frontIcon} color=\"sesame\" />\n  ) : null\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n        {iconToRender}\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          <IconContainer $size={20}>\n            <FontAwesomeIcon\n              icon={faChevronDown}\n              color={theme.color.illustration.neutral[400]}\n            />\n          </IconContainer>\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 {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useMemo,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icons } from '../Icon'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  InputLeadingIconContainer,\n  StyledFrontIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\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  iconComponent?: ReactNode\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    iconComponent,\n    fallbackStyle,\n    ...fieldProps\n  }: DropdownProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const theme = useTheme()\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  const iconToRender = iconComponent ? (\n    <InputLeadingIconContainer $size={16} $iconColor={theme.color.text.base}>\n      {iconComponent}\n    </InputLeadingIconContainer>\n  ) : frontIcon ? (\n    <StyledFrontIcon $disabled={disabled} render={frontIcon} color=\"sesame\" />\n  ) : null\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n        {iconToRender}\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          <IconContainer $size={20}>\n            <FontAwesomeIcon\n              icon={faChevronDown}\n              color={theme.color.illustration.neutral[400]}\n            />\n          </IconContainer>\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/Icon/Icon.js

@@ -14,7 +14,7 @@ export const Icon = ({ className = '', render, size = 24, color = 'color.icon.ba
         return null;
     const resolvedColor = resolveToThemeColor(color, theme);
     const IconComponent = iconList[render];
-    return (_jsx(Container, { forwardedAs: "span", "data-testid": `${render}-container`, className: className, "$size": size, "$rotate": rotate, "$color": resolvedColor, ...marginProps, children: _jsx(IconComponent, {}) }));
+    return (_jsx(Container, { forwardedAs: "span", "data-testid": `${render}-container`, className: className, $size: size, $rotate: rotate, $color: resolvedColor, ...marginProps, children: _jsx(IconComponent, {}) }));
 };
 const Container = styled(Box)(({ $size, $rotate, $color }) => css `
     display: flex;

package/dist/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAe1D,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,iBAAiB,EACzB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,oBAAoB,CAAC;QACnB,KAAK,EAAE,MAAM;QACb,OAAO,EACL,qIAAqI;KACxI,CAAC,CAAA;IAEF,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACpE,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAC,MAAM,iBACL,GAAG,MAAM,YAAY,EAClC,SAAS,EAAE,SAAS,WACb,IAAI,aACF,MAAM,YACP,aAAa,KACjB,WAAW,YAEf,KAAC,aAAa,KAAG,GACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKxB,KAAK;cACJ,KAAK;wBACK,OAAO;;eAEhB,MAAM;;GAElB,CACF,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Box } from '../Box'\nimport { Icons, iconList } from './iconsList'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { useDeprecatedWarning } from '../utils/deprecated'\n\nexport type IconProps = {\n  /** className attribute to apply classes from props */\n  className?: string\n  /** specify what Icon to render  */\n  render: Icons\n  /** set size of the Icon  */\n  size?: number\n  /** set color of the Icon */\n  color?: ColorTypes\n  /** rotation degrees */\n  rotate?: number\n} & MarginProps\n\nexport const Icon: FC<IconProps> = ({\n  className = '',\n  render,\n  size = 24,\n  color = 'color.icon.base',\n  rotate = 0,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  useDeprecatedWarning({\n    title: 'Icon',\n    message:\n      'The Icon component is deprecated and will be removed in future releases. Please migrate to using the font awesome library directly.',\n  })\n\n  if (!render || !iconList[render] || render.length === 0) return null\n  const resolvedColor = resolveToThemeColor(color, theme)\n\n  const IconComponent = iconList[render]\n\n  return (\n    <Container\n      forwardedAs=\"span\"\n      data-testid={`${render}-container`}\n      className={className}\n      $size={size}\n      $rotate={rotate}\n      $color={resolvedColor}\n      {...marginProps}\n    >\n      <IconComponent />\n    </Container>\n  )\n}\n\ninterface IIcon extends MarginProps {\n  $size: number\n  $color: string\n  $rotate: number\n}\n\nconst Container = styled(Box)<IIcon>(\n  ({ $size, $rotate, $color }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: ${$size}px;\n    height: ${$size}px;\n    transform: rotate(${$rotate}deg);\n    svg {\n      color: ${$color} !important;\n    }\n  `,\n)\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAe1D,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,iBAAiB,EACzB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,oBAAoB,CAAC;QACnB,KAAK,EAAE,MAAM;QACb,OAAO,EACL,qIAAqI;KACxI,CAAC,CAAA;IAEF,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACpE,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAC,MAAM,iBACL,GAAG,MAAM,YAAY,EAClC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,aAAa,KACjB,WAAW,YAEf,KAAC,aAAa,KAAG,GACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKxB,KAAK;cACJ,KAAK;wBACK,OAAO;;eAEhB,MAAM;;GAElB,CACF,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Box } from '../Box'\nimport { Icons, iconList } from './iconsList'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { useDeprecatedWarning } from '../utils/deprecated'\n\nexport type IconProps = {\n  /** className attribute to apply classes from props */\n  className?: string\n  /** specify what Icon to render  */\n  render: Icons\n  /** set size of the Icon  */\n  size?: number\n  /** set color of the Icon */\n  color?: ColorTypes\n  /** rotation degrees */\n  rotate?: number\n} & MarginProps\n\nexport const Icon: FC<IconProps> = ({\n  className = '',\n  render,\n  size = 24,\n  color = 'color.icon.base',\n  rotate = 0,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  useDeprecatedWarning({\n    title: 'Icon',\n    message:\n      'The Icon component is deprecated and will be removed in future releases. Please migrate to using the font awesome library directly.',\n  })\n\n  if (!render || !iconList[render] || render.length === 0) return null\n  const resolvedColor = resolveToThemeColor(color, theme)\n\n  const IconComponent = iconList[render]\n\n  return (\n    <Container\n      forwardedAs=\"span\"\n      data-testid={`${render}-container`}\n      className={className}\n      $size={size}\n      $rotate={rotate}\n      $color={resolvedColor}\n      {...marginProps}\n    >\n      <IconComponent />\n    </Container>\n  )\n}\n\ninterface IIcon extends MarginProps {\n  $size: number\n  $color: string\n  $rotate: number\n}\n\nconst Container = styled(Box)<IIcon>(\n  ({ $size, $rotate, $color }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: ${$size}px;\n    height: ${$size}px;\n    transform: rotate(${$rotate}deg);\n    svg {\n      color: ${$color} !important;\n    }\n  `,\n)\n"]}

package/dist/Icon/iconFiles/CaretUp.d.ts

@@ -1,8 +1,7 @@
+import Caret from './Caret';
 declare const CaretUp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
     className?: string;
 }, never> & Partial<Pick<{
     className?: string;
-}, never>>> & string & Omit<({ className }: {
-    className?: string;
-}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+}, never>>> & string & Omit<typeof Caret, keyof import("react").Component<any, {}, any>>;
 export default CaretUp;