@mrshmllw/smores-react 14.1.1 → 14.3.0

package/dist/Chip/Chip.js

@@ -1,11 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
-import { Icon as IconComponent } from '../Icon';
+import { Icon } from '../Icon';
 import { Loader } from '../Loader';
 import { focusOutline } from '../utils/focusOutline';
-export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, ...props }, ref) => (_jsx(Container, { forwardedAs: "button", "$primary": primary, "$secondary": secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, "$icon": icon, ...props, ref: ref, "aria-label": "chip-button", children: loading ? (_jsx(Loader, { color: primary ? 'color.icon.base' : 'color.icon.inverse', height: "16" })) : (_jsxs(_Fragment, { children: [icon && (_jsx(IconComponent, { render: icon, size: 16, color: primary ? 'color.icon.base' : 'color.icon.inverse' })), _jsx(ChildrenContainer, { children: children })] })) })));
+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
+            ? 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 })] })) }));
+});
 Chip.displayName = 'Chip';
 const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled, theme }) => css `
     ${focusOutline()}

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 } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon as IconComponent } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Loader } from '../Loader'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ninterface IButton {\n  $primary: boolean\n  $secondary: boolean\n  $icon?: Icons\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  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      ...props\n    },\n    ref,\n  ) => (\n    <Container\n      forwardedAs=\"button\"\n      $primary={primary}\n      $secondary={secondary}\n      disabled={disabled || loading}\n      $loading={loading}\n      onClick={handleClick}\n      $icon={icon}\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          {icon && (\n            <IconComponent\n              render={icon}\n              size={16}\n              color={primary ? 'color.icon.base' : 'color.icon.inverse'}\n            />\n          )}\n          <ChildrenContainer>{children}</ChildrenContainer>\n        </>\n      )}\n    </Container>\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    ${$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"]}

package/dist/CurrencyInput/CurrencyInput.js

@@ -2,11 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { Box } from '../Box';
 import { Field } from '../fields/Field';
-import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
+import { Input, InputLeadingIconContainer, } from '../fields/components/CommonInput';
 import { useUniqueId } from '../utils/id';
+import { faSterlingSign } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useTheme } from 'styled-components';
 export const CurrencyInput = forwardRef(function CurrencyInput({ id: idProp, placeholder, name, value, decimalNumber = true, onChange, onInputChange, onBlur, min, max, disabled = false, error = false, fallbackStyle, ...fieldProps }, ref) {
+    const theme = useTheme();
     const id = useUniqueId(idProp);
-    const frontIcon = 'pound-regular';
     const formatCurrency = (value) => {
         const decimalIndex = value.indexOf('.');
         if (!decimalNumber) {
@@ -41,7 +44,7 @@ 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(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" }), _jsx(Input, { ref: ref, "$error": error, disabled: disabled, type: "number", id: id, name: name, placeholder: placeholder, value: value, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, onChange: (e) => {
+    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);
                         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 { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\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 id = useUniqueId(idProp)\n  const frontIcon = 'pound-regular'\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        <StyledFrontIcon\n          $disabled={disabled}\n          render={frontIcon}\n          color=\"sesame\"\n        />\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={frontIcon}\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            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

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { addDays, eachMonthOfInterval, format, getDaysInMonth, getMonth, getYear, isSameDay, isSameMonth, isWeekend, isWithinInterval, } from 'date-fns';
 import { useState } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
-import { Icon } from '../Icon';
 import { Text } from '../Text';
 import { theme } from '../theme';
 import { convertToUkDate } from '../utils/date';
 import { focusOutlineStyle } from '../utils/focusOutline';
 import { useControllableState } from '../utils/useControlledState';
 import { DatesList } from './DatesList';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faChevronRight, } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
+import { IconContainer } from '../sharedStyles/shared.styles';
 const getAvailableMonths = (startDate, endDate) => {
     const monthList = eachMonthOfInterval({
         start: startDate,
@@ -21,6 +23,7 @@ const getAvailableMonths = (startDate, endDate) => {
     }));
 };
 export const Datepicker = ({ showDayLabels = false, disableWeekend = true, range = 14, fromDate = new Date(), endingDate, showYear = false, showSelectedDate = false, onDateSelect, onChange, value, disabled, fallbackStyle = false, ...marginProps }) => {
+    const theme = useTheme();
     // We want to make sure that the date is in the UK timezone,
     // this might need to be revisit when opening up to new countries
     const startDate = convertToUkDate(fromDate);
@@ -62,11 +65,11 @@ export const Datepicker = ({ showDayLabels = false, disableWeekend = true, range
                             if (e.key === 'Enter') {
                                 setActiveMonth(activeMonthIndex - 1);
                             }
-                        }, children: _jsx(Icon, { render: "caret", color: "color.surface.base.000", size: 18, rotate: 90 }) }), _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(Icon, { render: "caret", color: "color.surface.base.000", size: 18, rotate: -90 }) })] }), _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 } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\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'\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  // 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          <Icon\n            render=\"caret\"\n            color=\"color.surface.base.000\"\n            size={18}\n            rotate={90}\n          />\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          <Icon\n            render=\"caret\"\n            color=\"color.surface.base.000\"\n            size={18}\n            rotate={-90}\n          />\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: 16px;\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: 16px;\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/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
-import { FocusEvent, FormEvent } from 'react';
-import { Icons } from '../Icon/iconsList';
+import { FocusEvent, FormEvent, ReactNode } from 'react';
+import { Icons } from '../Icon';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 export type DropdownItem = {
     optionGroupLabel?: string;
@@ -16,6 +16,7 @@ export interface Props extends CommonFieldProps {
     disabled?: boolean;
     list: DropdownItem[];
     frontIcon?: Icons;
+    iconComponent?: ReactNode;
     fallbackStyle?: boolean;
     onSelect: (element: string) => void;
     onBlur?: (e: FocusEvent<HTMLSelectElement>) => void;

package/dist/Dropdown/Dropdown.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef, useMemo, } from 'react';
+import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
-import { Icon } from '../Icon';
 import { Field } from '../fields/Field';
-import { StyledFrontIcon } from '../fields/components/CommonInput';
+import { InputLeadingIconContainer, StyledFrontIcon, } from '../fields/components/CommonInput';
 import { useUniqueId } from '../utils/id';
 import { useControllableState } from '../utils/useControlledState';
-export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, fallbackStyle, ...fieldProps }, ref) {
+import { IconContainer } from '../sharedStyles/shared.styles';
+import { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, iconComponent, fallbackStyle, ...fieldProps }, ref) {
+    const theme = useTheme();
     const [value, setValue] = useControllableState({
         initialState: defaultValue,
         stateProp: valueProp,
@@ -30,12 +33,13 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder,
         }
         return customDefaultOption ?? 'Select an option';
     };
-    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", style: { position: 'relative' }, children: [frontIcon && (_jsx(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })), _jsxs(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
+    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(Icon, { render: "caret", color: "color.illustration.neutral.400", size: 24 }) })] }) }));
+                    }, "$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 { FocusEvent, FormEvent, ForwardedRef, forwardRef, useMemo } 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"]}
+{"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/Dropdown/index.d.ts

@@ -1 +1 @@
-export { Dropdown } from './Dropdown';
+export { Dropdown, DropdownItem } from './Dropdown';

package/dist/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA","sourcesContent":["export { Dropdown } from './Dropdown'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAA","sourcesContent":["export { Dropdown, DropdownItem } from './Dropdown'\n"]}

package/dist/Icon/Icon.js

@@ -3,8 +3,13 @@ import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
 import { iconList } from './iconsList';
 import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
+import { useDeprecatedWarning } from '../utils/deprecated';
 export const Icon = ({ className = '', render, size = 24, color = 'color.icon.base', rotate = 0, ...marginProps }) => {
     const theme = useTheme();
+    useDeprecatedWarning({
+        title: 'Icon',
+        message: 'The Icon component is deprecated and will be removed in future releases. Please migrate to using the font awesome library directly.',
+    });
     if (!render || !iconList[render] || render.length === 0)
         return null;
     const resolvedColor = resolveToThemeColor(color, theme);

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;AAezC,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,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'\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  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,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"]}

package/dist/Icon/index.d.ts

@@ -1 +1,2 @@
 export { Icon } from './Icon';
+export type { Icons } from './iconsList';

package/dist/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Icon } from './Icon'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Icon } from './Icon'\nexport type { Icons } from './iconsList'\n"]}

package/dist/IconStrict/IconStrict.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, FC, FormEvent } from 'react';
-import { Icons } from '../Icon/iconsList';
+import { Icons } from '../Icon';
 import { MarginProps } from '../utils/space';
 import { ColorTypes } from '../ThemeProvider/utils/colourMap';
 export type IconStrictProps = {

package/dist/IconStrict/IconStrict.js

@@ -4,6 +4,7 @@ import { darken } from 'polished';
 import { Icon } from '../Icon';
 import { focusOutlineStyle } from '../utils/focusOutline';
 import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
+import { useDeprecatedWarning } from '../utils/deprecated';
 const iconSizes = {
     48: {
         smallSize: 28,
@@ -23,6 +24,10 @@ const iconSizes = {
     },
 };
 export const IconStrict = ({ id, className = '', size = 16, render, iconColor, backgroundColor, rotate, handleClick, title, ...otherProps }) => {
+    useDeprecatedWarning({
+        title: 'IconStrict',
+        message: 'The IconStrict component is deprecated and will be removed in future releases. Please migrate to using the font awesome library directly.',
+    });
     const isButton = !!handleClick;
     const defaultLabel = title ?? (isButton ? (title ?? 'icon-button') : undefined);
     const theme = useTheme();

package/dist/IconStrict/IconStrict.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAqBzC,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,GAChB,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAE5D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,eAAe,GAAG,eAAe;QACrC,CAAC,CAAC,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC;QAC7C,CAAC,CAAC,SAAS,CAAA;IAEb,OAAO,CACL,KAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC/B,SAAS,EAAE,SAAS,WACb,IAAI,sBACO,eAAe,EACjC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,KACf,UAAU,YAEd,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACd,GACY,CACjB,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;eAEhC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;iBAEpD,KAAK;cACR,KAAK;;wBAEK,gBAAgB,IAAI,MAAM;cACpC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;MAEvC,OAAO;IACT;;0BAGI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,MACrD;;;KAGD;;MAEC,iBAAiB;GACpB,CACF,CAAA","sourcesContent":["import { ButtonHTMLAttributes, FC, FormEvent } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { darken } from 'polished'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type IconStrictProps = {\n  id?: string\n  /** className attribute to apply classes from props */\n  className?: string\n  /** set size of the Icon (including background) */\n  size?: 16 | 24 | 36 | 48\n  /** specify what Icon to render  */\n  render: Icons\n  /** set icon colour */\n  iconColor?: ColorTypes\n  /** set background colour */\n  backgroundColor?: ColorTypes\n  /** function to handle click */\n  handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n  /** rotation degrees */\n  rotate?: number\n} & MarginProps &\n  Partial<ButtonHTMLAttributes<HTMLButtonElement>>\n\nconst iconSizes = {\n  48: {\n    smallSize: 28,\n    padding: 10,\n  },\n  36: {\n    smallSize: 20,\n    padding: 8,\n  },\n  24: {\n    smallSize: 12,\n    padding: 6,\n  },\n  16: {\n    smallSize: 10,\n    padding: 3,\n  },\n}\n\nexport const IconStrict: FC<IconStrictProps> = ({\n  id,\n  className = '',\n  size = 16,\n  render,\n  iconColor,\n  backgroundColor,\n  rotate,\n  handleClick,\n  title,\n  ...otherProps\n}) => {\n  const isButton = !!handleClick\n  const defaultLabel =\n    title ?? (isButton ? (title ?? 'icon-button') : undefined)\n\n  const theme = useTheme()\n  const resolvedBgColor = backgroundColor\n    ? resolveToThemeColor(backgroundColor, theme)\n    : undefined\n\n  return (\n    <IconContainer\n      id={id}\n      as={isButton ? 'button' : 'div'}\n      className={className}\n      $size={size}\n      $backgroundColor={resolvedBgColor}\n      onClick={handleClick}\n      title={defaultLabel}\n      {...otherProps}\n    >\n      <Icon\n        render={render}\n        size={backgroundColor ? iconSizes[size].smallSize : size}\n        color={iconColor}\n        rotate={rotate}\n      />\n    </IconContainer>\n  )\n}\n\ninterface IIconStrict {\n  $size: 16 | 24 | 36 | 48\n  $backgroundColor?: string\n  onClick?: (e: FormEvent<HTMLButtonElement>) => void\n}\n\nconst IconContainer = styled.div<IIconStrict>(\n  ({ $size, $backgroundColor, onClick }) => css`\n    position: relative;\n    padding: ${$backgroundColor ? `${iconSizes[$size].padding}px` : 0};\n    width: 100%;\n    max-width: ${$size}px;\n    height: ${$size}px;\n    border-radius: 100%;\n    background-color: ${$backgroundColor ?? 'none'};\n    cursor: ${onClick ? 'pointer' : 'default'};\n\n    ${onClick &&\n    `\n    &:hover {\n      background-color: ${\n        $backgroundColor ? darken(0.1, $backgroundColor) : 'none'\n      };\n    }\n      \n    `}\n\n    ${focusOutlineStyle}\n  `,\n)\n"]}
+{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAqB1D,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,oBAAoB,CAAC;QACnB,KAAK,EAAE,YAAY;QACnB,OAAO,EACL,2IAA2I;KAC9I,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,GAChB,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAE5D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,eAAe,GAAG,eAAe;QACrC,CAAC,CAAC,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC;QAC7C,CAAC,CAAC,SAAS,CAAA;IAEb,OAAO,CACL,KAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC/B,SAAS,EAAE,SAAS,WACb,IAAI,sBACO,eAAe,EACjC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,KACf,UAAU,YAEd,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACd,GACY,CACjB,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;eAEhC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;iBAEpD,KAAK;cACR,KAAK;;wBAEK,gBAAgB,IAAI,MAAM;cACpC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;MAEvC,OAAO;IACT;;0BAGI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,MACrD;;;KAGD;;MAEC,iBAAiB;GACpB,CACF,CAAA","sourcesContent":["import { ButtonHTMLAttributes, FC, FormEvent } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { darken } from 'polished'\nimport { Icon, Icons } from '../Icon'\n\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { useDeprecatedWarning } from '../utils/deprecated'\n\nexport type IconStrictProps = {\n  id?: string\n  /** className attribute to apply classes from props */\n  className?: string\n  /** set size of the Icon (including background) */\n  size?: 16 | 24 | 36 | 48\n  /** specify what Icon to render  */\n  render: Icons\n  /** set icon colour */\n  iconColor?: ColorTypes\n  /** set background colour */\n  backgroundColor?: ColorTypes\n  /** function to handle click */\n  handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n  /** rotation degrees */\n  rotate?: number\n} & MarginProps &\n  Partial<ButtonHTMLAttributes<HTMLButtonElement>>\n\nconst iconSizes = {\n  48: {\n    smallSize: 28,\n    padding: 10,\n  },\n  36: {\n    smallSize: 20,\n    padding: 8,\n  },\n  24: {\n    smallSize: 12,\n    padding: 6,\n  },\n  16: {\n    smallSize: 10,\n    padding: 3,\n  },\n}\n\nexport const IconStrict: FC<IconStrictProps> = ({\n  id,\n  className = '',\n  size = 16,\n  render,\n  iconColor,\n  backgroundColor,\n  rotate,\n  handleClick,\n  title,\n  ...otherProps\n}) => {\n  useDeprecatedWarning({\n    title: 'IconStrict',\n    message:\n      'The IconStrict component is deprecated and will be removed in future releases. Please migrate to using the font awesome library directly.',\n  })\n\n  const isButton = !!handleClick\n  const defaultLabel =\n    title ?? (isButton ? (title ?? 'icon-button') : undefined)\n\n  const theme = useTheme()\n  const resolvedBgColor = backgroundColor\n    ? resolveToThemeColor(backgroundColor, theme)\n    : undefined\n\n  return (\n    <IconContainer\n      id={id}\n      as={isButton ? 'button' : 'div'}\n      className={className}\n      $size={size}\n      $backgroundColor={resolvedBgColor}\n      onClick={handleClick}\n      title={defaultLabel}\n      {...otherProps}\n    >\n      <Icon\n        render={render}\n        size={backgroundColor ? iconSizes[size].smallSize : size}\n        color={iconColor}\n        rotate={rotate}\n      />\n    </IconContainer>\n  )\n}\n\ninterface IIconStrict {\n  $size: 16 | 24 | 36 | 48\n  $backgroundColor?: string\n  onClick?: (e: FormEvent<HTMLButtonElement>) => void\n}\n\nconst IconContainer = styled.div<IIconStrict>(\n  ({ $size, $backgroundColor, onClick }) => css`\n    position: relative;\n    padding: ${$backgroundColor ? `${iconSizes[$size].padding}px` : 0};\n    width: 100%;\n    max-width: ${$size}px;\n    height: ${$size}px;\n    border-radius: 100%;\n    background-color: ${$backgroundColor ?? 'none'};\n    cursor: ${onClick ? 'pointer' : 'default'};\n\n    ${onClick &&\n    `\n    &:hover {\n      background-color: ${\n        $backgroundColor ? darken(0.1, $backgroundColor) : 'none'\n      };\n    }\n      \n    `}\n\n    ${focusOutlineStyle}\n  `,\n)\n"]}

package/dist/IconWrapper/IconWrapper.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { Icons } from '../Icon/iconsList';
+import { Icons } from '../Icon';
 import { MarginProps } from '../utils/space';
 export type IconWrapperProps = {
     /** className attribute to apply classes from props */

package/dist/IconWrapper/IconWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.js","sourceRoot":"","sources":["../../src/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";AACA,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;AAqB9B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,UAAU,EACnB,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,MAAC,SAAS,IAAC,SAAS,EAAE,SAAS,KAAM,WAAW,aAC7C,QAAQ,EACT,MAAC,aAAa,aAAQ,IAAI,QAAM,CAAC,QAAM,CAAC,QAAM,CAAC,QAAM,CAAC,aACnD,MAAM,KAAK,UAAU,IAAI,CACxB,KAAC,IAAI,IACH,MAAM,EAAC,UAAU,EACjB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,6BAA6B,GACnC,CACH,EACA,MAAM,KAAK,UAAU,IAAI,CACxB,KAAC,IAAI,IACH,MAAM,EAAC,UAAU,EACjB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,6BAA6B,GACnC,CACH,IACa,IACN,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG5B,CAAA;AAUD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;iBAGnB,KAAK;cACR,KAAK;WACR,EAAE;aACA,EAAE;cACD,EAAE;YACJ,EAAE;GACX,CACF,CAAA","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { MarginProps } from '../utils/space'\n\nexport type IconWrapperProps = {\n  /** className attribute to apply classes from props */\n  className?: string\n  /* */\n  children: ReactNode\n  /** specify what Icon to render  */\n  render: Icons\n  /** set size of the Icon  */\n  size?: number\n  /** TOP-RIGHT-BOTTOM-LEFT position of the Icon */\n  t?: string\n  r?: string\n  b?: string\n  l?: string\n} & MarginProps\n\nexport const IconWrapper: FC<IconWrapperProps> = ({\n  className = '',\n  children,\n  size = 16,\n  render = 'included',\n  t = 'auto',\n  r = 'auto',\n  b = 'auto',\n  l = 'auto',\n  ...marginProps\n}) => (\n  <Container className={className} {...marginProps}>\n    {children}\n    <IconContainer $size={size} $t={t} $r={r} $b={b} $l={l}>\n      {render === 'included' && (\n        <Icon\n          render=\"included\"\n          size={size}\n          color=\"color.feedback.positive.200\"\n        />\n      )}\n      {render === 'excluded' && (\n        <Icon\n          render=\"excluded\"\n          size={size}\n          color=\"color.feedback.negative.200\"\n        />\n      )}\n    </IconContainer>\n  </Container>\n)\n\nconst Container = styled(Box)`\n  position: relative;\n  width: fit-content;\n`\n\ninterface IIcon {\n  $size: number\n  $t: string\n  $r: string\n  $b: string\n  $l: string\n}\n\nconst IconContainer = styled.div<IIcon>(\n  ({ $size, $t, $r, $b, $l }) => css`\n    position: absolute;\n    width: 100%;\n    max-width: ${$size}px;\n    height: ${$size}px;\n    top: ${$t};\n    right: ${$r};\n    bottom: ${$b};\n    left: ${$l};\n  `,\n)\n"]}
+{"version":3,"file":"IconWrapper.js","sourceRoot":"","sources":["../../src/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AAoBrC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,UAAU,EACnB,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,CAAC,GAAG,MAAM,EACV,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,MAAC,SAAS,IAAC,SAAS,EAAE,SAAS,KAAM,WAAW,aAC7C,QAAQ,EACT,MAAC,aAAa,aAAQ,IAAI,QAAM,CAAC,QAAM,CAAC,QAAM,CAAC,QAAM,CAAC,aACnD,MAAM,KAAK,UAAU,IAAI,CACxB,KAAC,IAAI,IACH,MAAM,EAAC,UAAU,EACjB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,6BAA6B,GACnC,CACH,EACA,MAAM,KAAK,UAAU,IAAI,CACxB,KAAC,IAAI,IACH,MAAM,EAAC,UAAU,EACjB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,6BAA6B,GACnC,CACH,IACa,IACN,CACb,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG5B,CAAA;AAUD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;iBAGnB,KAAK;cACR,KAAK;WACR,EAAE;aACA,EAAE;cACD,EAAE;YACJ,EAAE;GACX,CACF,CAAA","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { MarginProps } from '../utils/space'\n\nexport type IconWrapperProps = {\n  /** className attribute to apply classes from props */\n  className?: string\n  /* */\n  children: ReactNode\n  /** specify what Icon to render  */\n  render: Icons\n  /** set size of the Icon  */\n  size?: number\n  /** TOP-RIGHT-BOTTOM-LEFT position of the Icon */\n  t?: string\n  r?: string\n  b?: string\n  l?: string\n} & MarginProps\n\nexport const IconWrapper: FC<IconWrapperProps> = ({\n  className = '',\n  children,\n  size = 16,\n  render = 'included',\n  t = 'auto',\n  r = 'auto',\n  b = 'auto',\n  l = 'auto',\n  ...marginProps\n}) => (\n  <Container className={className} {...marginProps}>\n    {children}\n    <IconContainer $size={size} $t={t} $r={r} $b={b} $l={l}>\n      {render === 'included' && (\n        <Icon\n          render=\"included\"\n          size={size}\n          color=\"color.feedback.positive.200\"\n        />\n      )}\n      {render === 'excluded' && (\n        <Icon\n          render=\"excluded\"\n          size={size}\n          color=\"color.feedback.negative.200\"\n        />\n      )}\n    </IconContainer>\n  </Container>\n)\n\nconst Container = styled(Box)`\n  position: relative;\n  width: fit-content;\n`\n\ninterface IIcon {\n  $size: number\n  $t: string\n  $r: string\n  $b: string\n  $l: string\n}\n\nconst IconContainer = styled.div<IIcon>(\n  ({ $size, $t, $r, $b, $l }) => css`\n    position: absolute;\n    width: 100%;\n    max-width: ${$size}px;\n    height: ${$size}px;\n    top: ${$t};\n    right: ${$r};\n    bottom: ${$b};\n    left: ${$l};\n  `,\n)\n"]}

package/dist/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, ReactNode } from 'react';
-import { Icons } from '../Icon/iconsList';
+import { Icons } from '../Icon';
 type LinkTypo = 'regular' | 'small';
 export type LinkProps = {
     className?: string;
@@ -11,6 +11,7 @@ export type LinkProps = {
     typo?: LinkTypo;
     highlight?: boolean;
     iconToRender?: Icons;
+    iconComponent?: ReactNode;
     isTrailingIcon?: boolean;
 };
 export declare const Link: FC<LinkProps>;

package/dist/Link/Link.js

@@ -4,11 +4,16 @@ import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 import { theme as oldTheme } from '../theme';
 import { focusOutline } from '../utils/focusOutline';
-export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', highlight = false, iconToRender = openInNewTab ? 'new-window' : undefined, isTrailingIcon = true, }) => {
+import { IconContainer } from '../sharedStyles/shared.styles';
+export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', highlight = false, iconToRender: legacyIcon = openInNewTab ? 'new-window' : undefined, iconComponent, isTrailingIcon = true, }) => {
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": typo === 'regular' ? 16 : 12, style: {
+            paddingRight: isTrailingIcon ? '0' : '4px',
+            paddingLeft: isTrailingIcon ? '8px' : '0',
+        }, children: iconComponent })) : legacyIcon ? (_jsx(Icon, { mt: { custom: '3px' }, size: typo === 'regular' ? 14 : 12, render: legacyIcon, color: highlight ? 'color.surface.brand.400' : 'color.surface.base.900' })) : null;
     return (_jsxs(LinkWrapper, { href: href, className: className, onClick: onClick, download: download, "$typo": typo, "$highlight": highlight, ...(openInNewTab && {
             rel: 'noopener noreferrer',
             target: '_blank',
-        }), children: [iconToRender && !isTrailingIcon && (_jsx(Icon, { mt: { custom: '3px' }, mr: { custom: '4px' }, render: iconToRender, size: typo === 'regular' ? 14 : 12, color: highlight ? 'color.surface.brand.400' : 'color.surface.base.900' })), children, iconToRender && isTrailingIcon && (_jsx(Icon, { mt: { custom: '3px' }, ml: "8px", render: iconToRender, size: typo === 'regular' ? 14 : 12, color: highlight ? 'color.surface.brand.400' : 'color.surface.base.900' }))] }));
+        }), children: [!isTrailingIcon && iconToRender, children, isTrailingIcon && iconToRender] }));
 };
 const LinkWrapper = styled.a(({ $typo, $highlight, theme }) => css `
     ${focusOutline()}

package/dist/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { theme as oldTheme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\n\ntype LinkTypo = 'regular' | 'small'\n\nexport type LinkProps = {\n  className?: string\n  href: string\n  onClick?: MouseEventHandler\n  openInNewTab?: boolean\n  children?: ReactNode\n  download?: boolean\n  typo?: LinkTypo\n  highlight?: boolean\n  iconToRender?: Icons\n  isTrailingIcon?: boolean\n}\n\nexport const Link: FC<LinkProps> = ({\n  className,\n  href,\n  onClick,\n  openInNewTab,\n  download,\n  children,\n  typo = 'regular',\n  highlight = false,\n  iconToRender = openInNewTab ? 'new-window' : undefined,\n  isTrailingIcon = true,\n}) => {\n  return (\n    <LinkWrapper\n      href={href}\n      className={className}\n      onClick={onClick}\n      download={download}\n      $typo={typo}\n      $highlight={highlight}\n      {...(openInNewTab && {\n        rel: 'noopener noreferrer',\n        target: '_blank',\n      })}\n    >\n      {iconToRender && !isTrailingIcon && (\n        <Icon\n          mt={{ custom: '3px' }}\n          mr={{ custom: '4px' }}\n          render={iconToRender}\n          size={typo === 'regular' ? 14 : 12}\n          color={\n            highlight ? 'color.surface.brand.400' : 'color.surface.base.900'\n          }\n        />\n      )}\n      {children}\n      {iconToRender && isTrailingIcon && (\n        <Icon\n          mt={{ custom: '3px' }}\n          ml=\"8px\"\n          render={iconToRender}\n          size={typo === 'regular' ? 14 : 12}\n          color={\n            highlight ? 'color.surface.brand.400' : 'color.surface.base.900'\n          }\n        />\n      )}\n    </LinkWrapper>\n  )\n}\n\nconst LinkWrapper = styled.a<{ $typo: LinkTypo; $highlight: boolean }>(\n  ({ $typo, $highlight, theme }) => css`\n    ${focusOutline()}\n    display: inline-flex;\n    flex-direction: row;\n\n    ${$typo === 'regular' &&\n    css`\n      font-size: 16px;\n      line-height: 20px;\n    `}\n\n    ${$typo === 'small' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n    `}\n\n    font-weight: ${oldTheme.font.weight.medium};\n    text-decoration: underline;\n    color: ${$highlight\n      ? theme.color.interactive.primary.base\n      : theme.color.text.base};\n\n    background: none;\n    cursor: pointer;\n\n    &:hover {\n      color: ${theme.color.text.subtle};\n\n      path {\n        fill: ${theme.color.icon.subtle};\n      }\n    }\n\n    &:active {\n      color: ${theme.color.text.base};\n\n      path {\n        fill: ${theme.color.icon.subtle};\n      }\n    }\n  `,\n)\n\n/**\n * Internal utility to override styling in other components (see Text)\n * @internal\n */\nexport const linkStyleOverride = ({ color }: { color: string }) => css`\n  & ${LinkWrapper} {\n    color: ${color};\n\n    path {\n      fill: ${color};\n    }\n\n    &:hover {\n      color: ${darken(0.1, color)};\n\n      path {\n        fill: ${darken(0.1, color)};\n      }\n    }\n  }\n`\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Icon, Icons } from '../Icon'\nimport { theme as oldTheme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype LinkTypo = 'regular' | 'small'\n\nexport type LinkProps = {\n  className?: string\n  href: string\n  onClick?: MouseEventHandler\n  openInNewTab?: boolean\n  children?: ReactNode\n  download?: boolean\n  typo?: LinkTypo\n  highlight?: boolean\n  iconToRender?: Icons\n  iconComponent?: ReactNode\n  isTrailingIcon?: boolean\n}\n\nexport const Link: FC<LinkProps> = ({\n  className,\n  href,\n  onClick,\n  openInNewTab,\n  download,\n  children,\n  typo = 'regular',\n  highlight = false,\n  iconToRender: legacyIcon = openInNewTab ? 'new-window' : undefined,\n  iconComponent,\n  isTrailingIcon = true,\n}) => {\n  const iconToRender = iconComponent ? (\n    <IconContainer\n      $size={typo === 'regular' ? 16 : 12}\n      style={{\n        paddingRight: isTrailingIcon ? '0' : '4px',\n        paddingLeft: isTrailingIcon ? '8px' : '0',\n      }}\n    >\n      {iconComponent}\n    </IconContainer>\n  ) : legacyIcon ? (\n    <Icon\n      mt={{ custom: '3px' }}\n      size={typo === 'regular' ? 14 : 12}\n      render={legacyIcon}\n      color={highlight ? 'color.surface.brand.400' : 'color.surface.base.900'}\n    />\n  ) : null\n\n  return (\n    <LinkWrapper\n      href={href}\n      className={className}\n      onClick={onClick}\n      download={download}\n      $typo={typo}\n      $highlight={highlight}\n      {...(openInNewTab && {\n        rel: 'noopener noreferrer',\n        target: '_blank',\n      })}\n    >\n      {!isTrailingIcon && iconToRender}\n      {children}\n      {isTrailingIcon && iconToRender}\n    </LinkWrapper>\n  )\n}\n\nconst LinkWrapper = styled.a<{ $typo: LinkTypo; $highlight: boolean }>(\n  ({ $typo, $highlight, theme }) => css`\n    ${focusOutline()}\n    display: inline-flex;\n    flex-direction: row;\n\n    ${$typo === 'regular' &&\n    css`\n      font-size: 16px;\n      line-height: 20px;\n    `}\n\n    ${$typo === 'small' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n    `}\n\n    font-weight: ${oldTheme.font.weight.medium};\n    text-decoration: underline;\n    color: ${$highlight\n      ? theme.color.interactive.primary.base\n      : theme.color.text.base};\n\n    background: none;\n    cursor: pointer;\n\n    &:hover {\n      color: ${theme.color.text.subtle};\n\n      path {\n        fill: ${theme.color.icon.subtle};\n      }\n    }\n\n    &:active {\n      color: ${theme.color.text.base};\n\n      path {\n        fill: ${theme.color.icon.subtle};\n      }\n    }\n  `,\n)\n\n/**\n * Internal utility to override styling in other components (see Text)\n * @internal\n */\nexport const linkStyleOverride = ({ color }: { color: string }) => css`\n  & ${LinkWrapper} {\n    color: ${color};\n\n    path {\n      fill: ${color};\n    }\n\n    &:hover {\n      color: ${darken(0.1, color)};\n\n      path {\n        fill: ${darken(0.1, color)};\n      }\n    }\n  }\n`\n"]}