@mrshmllw/smores-react 16.0.3 → 16.1.0

package/dist/Accordion/Accordion.js.map

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

package/dist/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactElement } from 'react';
-import { MarginProps } from 'utils/space';
+import { MarginProps } from '../utils/space';
 type AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive';
 type CtaProps = {
     ctaType: 'button';

package/dist/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactElement, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { MarginProps } from 'utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faCircleInfo,\n  faTriangleExclamation,\n  faCircleExclamation,\n  faCircleCheck,\n  faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive'\n\ntype CtaProps =\n  | {\n      ctaType: 'button'\n      ctaAction: () => void\n      ctaLabel: string\n    }\n  | {\n      ctaType: 'link'\n      ctaAction: string\n      ctaLabel: string\n    }\n  | {\n      ctaType?: undefined\n      ctaAction?: undefined\n      ctaLabel?: undefined\n    }\n\nexport type AlertProps = {\n  type?: AlertType\n  title?: string\n  message: string | ReactElement<unknown>\n  isDismissible?: boolean\n  maxWidth?: string\n} & CtaProps &\n  MarginProps\n\ntype AlertTypeConfig = {\n  backgroundColor: NewColor\n  accentColor: NewColor\n  icon: IconDefinition\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n  info: {\n    backgroundColor: 'color.feedback.informative.100',\n    accentColor: 'color.feedback.informative.200',\n    icon: faCircleInfo,\n  },\n  fallback: {\n    backgroundColor: 'color.surface.base.100',\n    accentColor: 'color.surface.base.400',\n    icon: faCircleInfo,\n  },\n  notice: {\n    backgroundColor: 'color.feedback.notice.100',\n    accentColor: 'color.feedback.notice.200',\n    icon: faTriangleExclamation,\n  },\n  negative: {\n    backgroundColor: 'color.feedback.negative.100',\n    accentColor: 'color.feedback.negative.200',\n    icon: faCircleExclamation,\n  },\n  positive: {\n    backgroundColor: 'color.feedback.positive.100',\n    accentColor: 'color.feedback.positive.200',\n    icon: faCircleCheck,\n  },\n}\n\nexport const Alert: FC<AlertProps> = ({\n  type = 'info',\n  title,\n  message,\n  isDismissible = false,\n  ctaType,\n  ctaAction,\n  ctaLabel,\n  maxWidth = '512px',\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const backgroundColor = resolveToThemeColor(\n    typeConfig[type].backgroundColor,\n    theme,\n  )\n  const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme)\n  const [alertClosed, setAlertClosed] = useState(false)\n\n  return (\n    <StyledAlert\n      $backgroundColor={backgroundColor}\n      $accentColor={accentColor}\n      $alertClosed={alertClosed}\n      $maxWidth={maxWidth}\n      {...marginProps}\n    >\n      <IconContainer $size={16} style={{ margin: '2px' }}>\n        <FontAwesomeIcon\n          icon={typeConfig[type].icon}\n          color={theme.color.icon.base}\n        />\n      </IconContainer>\n      <Box\n        flex\n        direction=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        width=\"100%\"\n        gap=\"space.100\"\n      >\n        <Box maxWidth=\"512px\">\n          {title && (\n            <Text mb=\"space.050\" typo=\"headline-regular\">\n              {title}\n            </Text>\n          )}\n          {typeof message === 'string' ? (\n            <Text typo=\"body-small\" mb={ctaType && '8px'}>\n              {message}\n            </Text>\n          ) : (\n            message\n          )}\n          {ctaType === 'button' && typeof ctaAction === 'function' && (\n            <Button smallButton fallbackStyle onClick={() => ctaAction()}>\n              {ctaLabel}\n            </Button>\n          )}\n          {ctaType === 'link' && typeof ctaAction === 'string' && (\n            <Link href={ctaAction}>{ctaLabel}</Link>\n          )}\n        </Box>\n        {isDismissible && (\n          <IconContainer\n            as=\"button\"\n            type=\"button\"\n            title=\"icon-button\"\n            $size={16}\n            style={{ cursor: 'pointer' }}\n            onClick={() => setAlertClosed(true)}\n          >\n            <FontAwesomeIcon icon={faXmark} color={theme.color.icon.base} />\n          </IconContainer>\n        )}\n      </Box>\n    </StyledAlert>\n  )\n}\n\ninterface IStyledAlert {\n  $backgroundColor: string\n  $accentColor: string\n  $alertClosed: boolean\n  $maxWidth?: string\n}\n\nconst StyledAlert = styled(Box)<IStyledAlert>(\n  ({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css`\n    display: flex;\n    width: 100%;\n    max-width: ${$maxWidth};\n    min-width: min-content;\n    padding: 12px 12px 12px 20px;\n    align-items: flex-start;\n    gap: ${({ theme }) => theme.space[100]};\n    border-radius: 8px 16px 16px 8px;\n    background: ${$backgroundColor};\n    position: relative;\n    display: ${$alertClosed ? 'none' : 'flex'};\n\n    &:before {\n      width: 8px;\n      height: 100%;\n      position: absolute;\n      background: ${$accentColor};\n      content: '';\n      top: 0;\n      left: 0;\n      border-radius: 16px 0 0 16px;\n    }\n  `,\n)\n"]}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactElement, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faCircleInfo,\n  faTriangleExclamation,\n  faCircleExclamation,\n  faCircleCheck,\n  faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive'\n\ntype CtaProps =\n  | {\n      ctaType: 'button'\n      ctaAction: () => void\n      ctaLabel: string\n    }\n  | {\n      ctaType: 'link'\n      ctaAction: string\n      ctaLabel: string\n    }\n  | {\n      ctaType?: undefined\n      ctaAction?: undefined\n      ctaLabel?: undefined\n    }\n\nexport type AlertProps = {\n  type?: AlertType\n  title?: string\n  message: string | ReactElement<unknown>\n  isDismissible?: boolean\n  maxWidth?: string\n} & CtaProps &\n  MarginProps\n\ntype AlertTypeConfig = {\n  backgroundColor: NewColor\n  accentColor: NewColor\n  icon: IconDefinition\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n  info: {\n    backgroundColor: 'color.feedback.informative.100',\n    accentColor: 'color.feedback.informative.200',\n    icon: faCircleInfo,\n  },\n  fallback: {\n    backgroundColor: 'color.surface.base.100',\n    accentColor: 'color.surface.base.400',\n    icon: faCircleInfo,\n  },\n  notice: {\n    backgroundColor: 'color.feedback.notice.100',\n    accentColor: 'color.feedback.notice.200',\n    icon: faTriangleExclamation,\n  },\n  negative: {\n    backgroundColor: 'color.feedback.negative.100',\n    accentColor: 'color.feedback.negative.200',\n    icon: faCircleExclamation,\n  },\n  positive: {\n    backgroundColor: 'color.feedback.positive.100',\n    accentColor: 'color.feedback.positive.200',\n    icon: faCircleCheck,\n  },\n}\n\nexport const Alert: FC<AlertProps> = ({\n  type = 'info',\n  title,\n  message,\n  isDismissible = false,\n  ctaType,\n  ctaAction,\n  ctaLabel,\n  maxWidth = '512px',\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const backgroundColor = resolveToThemeColor(\n    typeConfig[type].backgroundColor,\n    theme,\n  )\n  const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme)\n  const [alertClosed, setAlertClosed] = useState(false)\n\n  return (\n    <StyledAlert\n      $backgroundColor={backgroundColor}\n      $accentColor={accentColor}\n      $alertClosed={alertClosed}\n      $maxWidth={maxWidth}\n      {...marginProps}\n    >\n      <IconContainer $size={16} style={{ margin: '2px' }}>\n        <FontAwesomeIcon\n          icon={typeConfig[type].icon}\n          color={theme.color.icon.base}\n        />\n      </IconContainer>\n      <Box\n        flex\n        direction=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        width=\"100%\"\n        gap=\"space.100\"\n      >\n        <Box maxWidth=\"512px\">\n          {title && (\n            <Text mb=\"space.050\" typo=\"headline-regular\">\n              {title}\n            </Text>\n          )}\n          {typeof message === 'string' ? (\n            <Text typo=\"body-small\" mb={ctaType && '8px'}>\n              {message}\n            </Text>\n          ) : (\n            message\n          )}\n          {ctaType === 'button' && typeof ctaAction === 'function' && (\n            <Button smallButton fallbackStyle onClick={() => ctaAction()}>\n              {ctaLabel}\n            </Button>\n          )}\n          {ctaType === 'link' && typeof ctaAction === 'string' && (\n            <Link href={ctaAction}>{ctaLabel}</Link>\n          )}\n        </Box>\n        {isDismissible && (\n          <IconContainer\n            as=\"button\"\n            type=\"button\"\n            title=\"icon-button\"\n            $size={16}\n            style={{ cursor: 'pointer' }}\n            onClick={() => setAlertClosed(true)}\n          >\n            <FontAwesomeIcon icon={faXmark} color={theme.color.icon.base} />\n          </IconContainer>\n        )}\n      </Box>\n    </StyledAlert>\n  )\n}\n\ninterface IStyledAlert {\n  $backgroundColor: string\n  $accentColor: string\n  $alertClosed: boolean\n  $maxWidth?: string\n}\n\nconst StyledAlert = styled(Box)<IStyledAlert>(\n  ({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css`\n    display: flex;\n    width: 100%;\n    max-width: ${$maxWidth};\n    min-width: min-content;\n    padding: 12px 12px 12px 20px;\n    align-items: flex-start;\n    gap: ${({ theme }) => theme.space[100]};\n    border-radius: 8px 16px 16px 8px;\n    background: ${$backgroundColor};\n    position: relative;\n    display: ${$alertClosed ? 'none' : 'flex'};\n\n    &:before {\n      width: 8px;\n      height: 100%;\n      position: absolute;\n      background: ${$accentColor};\n      content: '';\n      top: 0;\n      left: 0;\n      border-radius: 16px 0 0 16px;\n    }\n  `,\n)\n"]}

package/dist/Badge/Badge.d.ts

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

package/dist/Badge/BadgeFallbackImage.d.ts

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

package/dist/BadgeList/BadgeList.d.ts

@@ -17,9 +17,9 @@ type Props = {
  * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.
  *
  */
-export declare function BadgeList({ badges, limit, size }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function BadgeList({ badges, limit, size }: Props): import("react").JSX.Element;
 type WithTooltipProps = {
     badge: BadgeListBadge;
 };
-declare const WithTooltip: ({ badge: { tooltip, ...badge } }: WithTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const WithTooltip: ({ badge: { tooltip, ...badge } }: WithTooltipProps) => import("react").JSX.Element;
 export {};

package/dist/Banner/types.d.ts

@@ -1,4 +1,4 @@
-import { Icons } from 'Icon';
+import { Icons } from '../Icon';
 import { ReactNode } from 'react';
 export interface Banner {
     id: string;

package/dist/Banner/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Banner/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from 'Icon'\nimport { ReactNode } from 'react'\n\nexport interface Banner {\n  id: string\n  message: string\n  type: 'upsell' | 'critical' | 'general' | 'success'\n  topOffset: string\n  exploreAction?: () => void\n  showExploreText?: boolean\n  showExploreIcon?: boolean\n  autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n  leadingIcon?: Icons\n  iconComponent?: ReactNode\n  canManuallyClose?: boolean\n  showCloseIcon?: boolean\n  noTimeout?: boolean\n}\n\nexport type CreateBanner = Omit<Banner, 'id'>\n\nexport interface BannerContextType {\n  addBanner: (banner: CreateBanner) => void\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Banner/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon'\nimport { ReactNode } from 'react'\n\nexport interface Banner {\n  id: string\n  message: string\n  type: 'upsell' | 'critical' | 'general' | 'success'\n  topOffset: string\n  exploreAction?: () => void\n  showExploreText?: boolean\n  showExploreIcon?: boolean\n  autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n  leadingIcon?: Icons\n  iconComponent?: ReactNode\n  canManuallyClose?: boolean\n  showCloseIcon?: boolean\n  noTimeout?: boolean\n}\n\nexport type CreateBanner = Omit<Banner, 'id'>\n\nexport interface BannerContextType {\n  addBanner: (banner: CreateBanner) => void\n}\n"]}

package/dist/Box/Box.d.ts

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

package/dist/Button/Button.js

@@ -35,7 +35,7 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forc
         background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.primary.hover};
       }
       &:active {
-        background-color: ${({ theme }) => theme.color.interactive.primary.pressed};
+        background-color: ${({ theme }) => theme.color.interactive.primary.selected};
       }
     `}
 
@@ -47,18 +47,18 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forc
         background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.secondary.hover};
       }
       &:active {
-        background-color: ${({ theme }) => theme.color.interactive.secondary.pressed};
+        background-color: ${({ theme }) => theme.color.interactive.secondary.selected};
       }
     `}
   ${$fallbackStyle &&
     css `
-      background-color: ${({ theme }) => theme.color.interactive.tertiary.base};
+      background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};
 
       &:hover {
-        background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.tertiary.hover};
+        background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.neutral.subtle.hover};
       }
       &:active {
-        background-color: ${({ theme }) => theme.color.interactive.tertiary.pressed};
+        background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.selected};
       }
     `}
   ${$smallButton &&

package/dist/Button/Button.js.map

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

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 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"]}

package/dist/CheckBox/CheckBox.js

@@ -82,7 +82,7 @@ const BoxContainer = styled.label `
 
   &:hover {
     ${Checkmark} {
-      background-color: ${({ theme }) => theme.color.interactive.tertiary.hover};
+      background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.hover};
     }
   }
 

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.tertiary.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/Icon/iconFiles/Aa.d.ts

@@ -1,2 +1,2 @@
-declare const Aa: () => import("react/jsx-runtime").JSX.Element;
+declare const Aa: () => import("react").JSX.Element;
 export default Aa;

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

@@ -1,2 +1,2 @@
-declare const AaInverted: () => import("react/jsx-runtime").JSX.Element;
+declare const AaInverted: () => import("react").JSX.Element;
 export default AaInverted;

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

@@ -1,2 +1,2 @@
-declare const AccidentalDamage: () => import("react/jsx-runtime").JSX.Element;
+declare const AccidentalDamage: () => import("react").JSX.Element;
 export default AccidentalDamage;

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

@@ -1,2 +1,2 @@
-declare const AccountBreakdown: () => import("react/jsx-runtime").JSX.Element;
+declare const AccountBreakdown: () => import("react").JSX.Element;
 export default AccountBreakdown;

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

@@ -1,2 +1,2 @@
-declare const AccountMlp: () => import("react/jsx-runtime").JSX.Element;
+declare const AccountMlp: () => import("react").JSX.Element;
 export default AccountMlp;

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

@@ -1,2 +1,2 @@
-declare const ActivityClipboard: () => import("react/jsx-runtime").JSX.Element;
+declare const ActivityClipboard: () => import("react").JSX.Element;
 export default ActivityClipboard;

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

@@ -1,2 +1,2 @@
-declare const AddOns: () => import("react/jsx-runtime").JSX.Element;
+declare const AddOns: () => import("react").JSX.Element;
 export default AddOns;

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

@@ -1,2 +1,2 @@
-declare const AddressMta: () => import("react/jsx-runtime").JSX.Element;
+declare const AddressMta: () => import("react").JSX.Element;
 export default AddressMta;

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

@@ -1,2 +1,2 @@
-declare const Ai: () => import("react/jsx-runtime").JSX.Element;
+declare const Ai: () => import("react").JSX.Element;
 export default Ai;

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

@@ -1,2 +1,2 @@
-declare const AlbumAudio: () => import("react/jsx-runtime").JSX.Element;
+declare const AlbumAudio: () => import("react").JSX.Element;
 export default AlbumAudio;

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

@@ -1,2 +1,2 @@
-declare const Alert: () => import("react/jsx-runtime").JSX.Element;
+declare const Alert: () => import("react").JSX.Element;
 export default Alert;

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

@@ -1,2 +1,2 @@
-declare const AlertEngine: () => import("react/jsx-runtime").JSX.Element;
+declare const AlertEngine: () => import("react").JSX.Element;
 export default AlertEngine;

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

@@ -1,2 +1,2 @@
-declare const Amex: () => import("react/jsx-runtime").JSX.Element;
+declare const Amex: () => import("react").JSX.Element;
 export default Amex;

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

@@ -1,2 +1,2 @@
-declare const ApplePay: () => import("react/jsx-runtime").JSX.Element;
+declare const ApplePay: () => import("react").JSX.Element;
 export default ApplePay;

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

@@ -1,2 +1,2 @@
-declare const ApprovedFile: () => import("react/jsx-runtime").JSX.Element;
+declare const ApprovedFile: () => import("react").JSX.Element;
 export default ApprovedFile;

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

@@ -1,2 +1,2 @@
-declare const Archive: () => import("react/jsx-runtime").JSX.Element;
+declare const Archive: () => import("react").JSX.Element;
 export default Archive;

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

@@ -1,2 +1,2 @@
-declare const Arrow: () => import("react/jsx-runtime").JSX.Element;
+declare const Arrow: () => import("react").JSX.Element;
 export default Arrow;

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

@@ -1,2 +1,2 @@
-declare const At: () => import("react/jsx-runtime").JSX.Element;
+declare const At: () => import("react").JSX.Element;
 export default At;

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

@@ -1,2 +1,2 @@
-declare const Axa: () => import("react/jsx-runtime").JSX.Element;
+declare const Axa: () => import("react").JSX.Element;
 export default Axa;

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

@@ -1,2 +1,2 @@
-declare const Bank: () => import("react/jsx-runtime").JSX.Element;
+declare const Bank: () => import("react").JSX.Element;
 export default Bank;

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

@@ -1,2 +1,2 @@
-declare const Basket: () => import("react/jsx-runtime").JSX.Element;
+declare const Basket: () => import("react").JSX.Element;
 export default Basket;

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

@@ -1,2 +1,2 @@
-declare const Bicycle: () => import("react/jsx-runtime").JSX.Element;
+declare const Bicycle: () => import("react").JSX.Element;
 export default Bicycle;

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

@@ -1,2 +1,2 @@
-declare const Boost: () => import("react/jsx-runtime").JSX.Element;
+declare const Boost: () => import("react").JSX.Element;
 export default Boost;

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

@@ -1,2 +1,2 @@
-declare const Breakdown: () => import("react/jsx-runtime").JSX.Element;
+declare const Breakdown: () => import("react").JSX.Element;
 export default Breakdown;

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

@@ -1,2 +1,2 @@
-declare const BreakdownAlt: () => import("react/jsx-runtime").JSX.Element;
+declare const BreakdownAlt: () => import("react").JSX.Element;
 export default BreakdownAlt;

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

@@ -1,2 +1,2 @@
-declare const Briefcase: () => import("react/jsx-runtime").JSX.Element;
+declare const Briefcase: () => import("react").JSX.Element;
 export default Briefcase;

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

@@ -1,2 +1,2 @@
-declare const Bullets: () => import("react/jsx-runtime").JSX.Element;
+declare const Bullets: () => import("react").JSX.Element;
 export default Bullets;

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

@@ -1,2 +1,2 @@
-declare const Burger: () => import("react/jsx-runtime").JSX.Element;
+declare const Burger: () => import("react").JSX.Element;
 export default Burger;

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

@@ -1,2 +1,2 @@
-declare const Calendar: () => import("react/jsx-runtime").JSX.Element;
+declare const Calendar: () => import("react").JSX.Element;
 export default Calendar;

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

@@ -1,2 +1,2 @@
-declare const Camera: () => import("react/jsx-runtime").JSX.Element;
+declare const Camera: () => import("react").JSX.Element;
 export default Camera;

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

@@ -1,2 +1,2 @@
-declare const Cancel: () => import("react/jsx-runtime").JSX.Element;
+declare const Cancel: () => import("react").JSX.Element;
 export default Cancel;

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

@@ -1,2 +1,2 @@
-declare const CancelBw: () => import("react/jsx-runtime").JSX.Element;
+declare const CancelBw: () => import("react").JSX.Element;
 export default CancelBw;

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

@@ -1,2 +1,2 @@
-declare const Car: () => import("react/jsx-runtime").JSX.Element;
+declare const Car: () => import("react").JSX.Element;
 export default Car;

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

@@ -1,2 +1,2 @@
-declare const CarMta: () => import("react/jsx-runtime").JSX.Element;
+declare const CarMta: () => import("react").JSX.Element;
 export default CarMta;

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

@@ -1,2 +1,2 @@
-declare const CarRepairs: () => import("react/jsx-runtime").JSX.Element;
+declare const CarRepairs: () => import("react").JSX.Element;
 export default CarRepairs;

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

@@ -1,2 +1,2 @@
-declare const CarReplacement: () => import("react/jsx-runtime").JSX.Element;
+declare const CarReplacement: () => import("react").JSX.Element;
 export default CarReplacement;

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

@@ -1,2 +1,2 @@
-declare const CarUsage: () => import("react/jsx-runtime").JSX.Element;
+declare const CarUsage: () => import("react").JSX.Element;
 export default CarUsage;

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

@@ -1,2 +1,2 @@
-declare const Card: () => import("react/jsx-runtime").JSX.Element;
+declare const Card: () => import("react").JSX.Element;
 export default Card;

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

@@ -1,4 +1,4 @@
 declare const Caret: ({ className }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Caret;

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

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

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

@@ -1,2 +1,2 @@
-declare const Charge: () => import("react/jsx-runtime").JSX.Element;
+declare const Charge: () => import("react").JSX.Element;
 export default Charge;

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

@@ -1,2 +1,2 @@
-declare const Chat: () => import("react/jsx-runtime").JSX.Element;
+declare const Chat: () => import("react").JSX.Element;
 export default Chat;

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

@@ -1,2 +1,2 @@
-declare const ChatBubble: () => import("react/jsx-runtime").JSX.Element;
+declare const ChatBubble: () => import("react").JSX.Element;
 export default ChatBubble;

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

@@ -1,2 +1,2 @@
-declare const Checkout: () => import("react/jsx-runtime").JSX.Element;
+declare const Checkout: () => import("react").JSX.Element;
 export default Checkout;

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

@@ -1,2 +1,2 @@
-declare const CheckoutWithText: () => import("react/jsx-runtime").JSX.Element;
+declare const CheckoutWithText: () => import("react").JSX.Element;
 export default CheckoutWithText;

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

@@ -1,2 +1,2 @@
-declare const CircleInfoFilled: () => import("react/jsx-runtime").JSX.Element;
+declare const CircleInfoFilled: () => import("react").JSX.Element;
 export default CircleInfoFilled;

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

@@ -1,2 +1,2 @@
-declare const CircleTick: () => import("react/jsx-runtime").JSX.Element;
+declare const CircleTick: () => import("react").JSX.Element;
 export default CircleTick;