@drivy/cobalt 0.34.1 → 0.34.3

package/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = {\n  children?: React.ReactNode\n  className?: string\n  legacy?: boolean\n  // Not used anymore, to remove in the next release\n  flattened?: boolean\n  responsive?: boolean\n}\n\nexport const Card = ({\n  children,\n  className,\n  legacy,\n  responsive,\n}: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--legacy\": legacy,\n      \"cobalt-Card--responsive\": responsive,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  className?: string\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({\n  className = \"\",\n  tabBar,\n  tight,\n  subdued,\n  divided,\n}: CardSectionProps) => {\n  return cx(className, \"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nCard.Section = CardSection\n\nexport default Card\n"],"names":[],"mappings":";;;AAYa,MAAA,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,GACA,MACV,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,qBAAqB,EAAE,MAAM;AAC7B,QAAA,yBAAyB,EAAE,UAAU;AACtC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AAqBD,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,GACU,KAAI;AACrB,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC3C,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,EAAA,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEhD,MAAa,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe,CAAA;AAM/B,IAAI,CAAC,OAAO,GAAG,WAAW;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = {\n  children?: React.ReactNode\n  className?: string\n  legacy?: boolean\n  // Not used anymore, to remove in the next release\n  flattened?: boolean\n  responsive?: boolean\n}\n\nexport const Card = ({\n  children,\n  className,\n  legacy,\n  responsive,\n}: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--legacy\": legacy,\n      \"cobalt-Card--responsive\": responsive,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  className?: string\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({\n  className = \"\",\n  tabBar,\n  tight,\n  subdued,\n  divided,\n}: CardSectionProps) => {\n  return cx(className, \"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nCard.Section = CardSection\n\nexport default Card\n"],"names":[],"mappings":";;;AAYa,MAAA,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,GACA,MACV,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,qBAAqB,EAAE,MAAM;AAC7B,QAAA,yBAAyB,EAAE,UAAU;AACtC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AAqBD,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,GACU,KAAI;AACrB,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC3C,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,EAAA,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAE1C,MAAO,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe,CAAA;AAM/B,IAAI,CAAC,OAAO,GAAG,WAAW;;;;"}

package/components/Popover/index.js

@@ -44,7 +44,7 @@ arrow = false, placement = "bottom-start", theme = "", distance = 8, zIndex = zI
             onShow();
     };
     const TippyComp = lazy ? LazyTippy : Tippy;
-    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, { content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme} ${arrow ? "cobalt-popover--withArrow" : ""}`, offset: [0, distance], ...{ arrow, placement, zIndex }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close }));
+    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, { content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme} ${arrow ? "cobalt-popover--withArrow" : ""}`, offset: [0, distance], arrow, placement, zIndex, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close }));
 };
 
 export { Popover as default };

package/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = {\n  children?: React.ReactNode\n  isOpen: boolean\n  close: () => void\n  \"aria-label\"?: string\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n  // Desktop props\n  targetRef: TippyProps[\"reference\"]\n  arrow?: boolean\n  placement?: TippyProps[\"placement\"]\n  theme?: string\n  distance?: number\n  zIndex?: number\n  /**\n   * __Only for desktop popover__\n   *\n   * Allow to render the content only when the popover is mounted in the DOM\n   * Useful to render async content in the popover\n   */\n  lazy?: boolean\n}\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" | \"children\" | \"visible\"> =\n  {\n    animation: \"shift-away-subtle\",\n    interactive: true,\n    interactiveBorder: 10,\n    delay: [0, 0],\n    duration: [200, 150],\n    maxWidth: 500,\n    sticky: true,\n    plugins: [sticky],\n    theme: \"light cobalt-popover\",\n    inertia: true,\n  }\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: {\n  children?: React.ReactNode\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  isOpen,\n  targetRef,\n  close,\n  \"aria-label\": ariaLabel,\n  children,\n  bodySpacing = true,\n  onShow,\n  onHidden,\n  // Desktop props\n  arrow = false,\n  placement = \"bottom-start\",\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  lazy,\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = breakpoint === \"sm\" || breakpoint === \"xs\"\n\n  const escListener = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n    },\n    [isOpen, close]\n  )\n\n  useEffect(() => {\n    window.addEventListener(\"keydown\", escListener)\n\n    return () => window.removeEventListener(\"keydown\", escListener)\n  }, [escListener])\n\n  const onTippyClose = () => {\n    if (onHidden) onHidden()\n  }\n\n  const onTippyOpen = () => {\n    if (onShow) onShow()\n  }\n\n  const TippyComp = lazy ? LazyTippy : Tippy\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={isOpen}\n      onDismiss={close}\n      bodySpacing={bodySpacing}\n      ariaLabel={ariaLabel}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </MobilePopover>\n  ) : (\n    <TippyComp\n      content={\n        bodySpacing ? (\n          <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n        ) : (\n          children\n        )\n      }\n      {...defaultTippyProps}\n      visible={isOpen}\n      reference={targetRef}\n      theme={`${defaultTippyProps.theme} ${theme} ${\n        arrow ? \"cobalt-popover--withArrow\" : \"\"\n      }`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n    />\n  )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = {\n  children?: React.ReactNode\n  isOpen: boolean\n  close: () => void\n  \"aria-label\"?: string\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n  // Desktop props\n  targetRef: TippyProps[\"reference\"]\n  arrow?: boolean\n  placement?: TippyProps[\"placement\"]\n  theme?: string\n  distance?: number\n  zIndex?: number\n  /**\n   * __Only for desktop popover__\n   *\n   * Allow to render the content only when the popover is mounted in the DOM\n   * Useful to render async content in the popover\n   */\n  lazy?: boolean\n}\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" | \"children\" | \"visible\"> =\n  {\n    animation: \"shift-away-subtle\",\n    interactive: true,\n    interactiveBorder: 10,\n    delay: [0, 0],\n    duration: [200, 150],\n    maxWidth: 500,\n    sticky: true,\n    plugins: [sticky],\n    theme: \"light cobalt-popover\",\n    inertia: true,\n  }\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: {\n  children?: React.ReactNode\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  isOpen,\n  targetRef,\n  close,\n  \"aria-label\": ariaLabel,\n  children,\n  bodySpacing = true,\n  onShow,\n  onHidden,\n  // Desktop props\n  arrow = false,\n  placement = \"bottom-start\",\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  lazy,\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = breakpoint === \"sm\" || breakpoint === \"xs\"\n\n  const escListener = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n    },\n    [isOpen, close]\n  )\n\n  useEffect(() => {\n    window.addEventListener(\"keydown\", escListener)\n\n    return () => window.removeEventListener(\"keydown\", escListener)\n  }, [escListener])\n\n  const onTippyClose = () => {\n    if (onHidden) onHidden()\n  }\n\n  const onTippyOpen = () => {\n    if (onShow) onShow()\n  }\n\n  const TippyComp = lazy ? LazyTippy : Tippy\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={isOpen}\n      onDismiss={close}\n      bodySpacing={bodySpacing}\n      ariaLabel={ariaLabel}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </MobilePopover>\n  ) : (\n    <TippyComp\n      content={\n        bodySpacing ? (\n          <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n        ) : (\n          children\n        )\n      }\n      {...defaultTippyProps}\n      visible={isOpen}\n      reference={targetRef}\n      theme={`${defaultTippyProps.theme} ${theme} ${\n        arrow ? \"cobalt-popover--withArrow\" : \"\"\n      }`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n    />\n  )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.34.1",
+  "version": "0.34.3",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -8,6 +8,9 @@
     "*.css",
     "*.scss"
   ],
+  "engines": {
+    "node": "^18.15.0"
+  },
   "module": "src/index.js",
   "license": "MIT",
   "author": {
@@ -32,7 +35,7 @@
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "4.0.2",
-    "postcss": "8.4.23",
+    "postcss": "8.4.24",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -41,14 +44,14 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@getaround-eu/babel-preset-app": "1.3.4",
-    "@getaround-eu/eslint-config": "2.0.3",
+    "@getaround-eu/babel-preset-app": "1.4.2",
+    "@getaround-eu/eslint-config": "2.0.4",
     "@getaround-eu/prettier-config": "1.2.0",
     "@getaround-eu/stylelint-config": "2.0.1",
     "@getaround-eu/ts-config": "2.2.0",
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "6.0.0",
-    "@rushstack/eslint-patch": "1.2.0",
+    "@rushstack/eslint-patch": "1.3.0",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/addons": "6.5.16",
     "@storybook/builder-webpack5": "6.5.16",
@@ -59,22 +62,22 @@
     "@testing-library/react": "14.0.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/classnames": "2.3.1",
-    "@types/jest": "29.5.1",
+    "@types/jest": "29.5.2",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "18.2.4",
+    "@types/react": "18.2.8",
     "@whitespace/storybook-addon-html": "^5.1.4",
     "autoprefixer": "10.4.14",
     "core-js": "3.30.2",
-    "css-loader": "6.7.3",
-    "eslint": "8.40.0",
+    "css-loader": "6.8.1",
+    "eslint": "8.42.0",
     "file-loader": "6.2.0",
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
     "nested-object-access": "^0.2.5",
-    "np": "7.7.0",
+    "np": "8.0.2",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "7.3.0",
+    "postcss-loader": "7.3.2",
     "prettier": "2.8.8",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
@@ -88,16 +91,16 @@
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.34.1",
     "sass": "1.62.1",
-    "sass-loader": "13.2.2",
+    "sass-loader": "13.3.1",
     "sharp": "0.32.1",
     "sharp-cli": "4.1.1",
-    "style-loader": "3.3.2",
-    "stylelint": "15.6.1",
+    "style-loader": "3.3.3",
+    "stylelint": "15.7.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.0.2",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.0.4"
+    "typescript": "5.1.3"
   },
   "scripts": {
     "build": "./scripts/build.sh",

package/types/__tests__/AsyncComponent.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 declare const AsyncComponent: ({ children, timeout, }: {
     children?: React.ReactNode;
     timeout?: number | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default AsyncComponent;

package/types/components/Accordion/ToggleIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 type ToggleIconPropsType = {
     isOpen: boolean;
 };
-declare const ToggleIcon: ({ isOpen }: ToggleIconPropsType) => JSX.Element;
+declare const ToggleIcon: ({ isOpen }: ToggleIconPropsType) => React.JSX.Element;
 export default ToggleIcon;

package/types/components/Accordion/index.d.ts

@@ -46,11 +46,11 @@ export declare const AccordionItemHeader: React.ForwardRefExoticComponent<{
     leftToggleIcon?: boolean | undefined;
 } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const AccordionItemPanel: {
-    ({ children, className, ...props }: AccordionItemPanelPropsType): JSX.Element;
+    ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
     displayName: string;
 };
 export declare const AccordionItem: {
-    ({ children, className, ...props }: AccordionItemPropsType): JSX.Element;
+    ({ children, className, ...props }: AccordionItemPropsType): React.JSX.Element;
     displayName: string;
     Header: React.ForwardRefExoticComponent<{
         /**
@@ -64,14 +64,14 @@ export declare const AccordionItem: {
         leftToggleIcon?: boolean | undefined;
     } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Panel: {
-        ({ children, className, ...props }: AccordionItemPanelPropsType): JSX.Element;
+        ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
         displayName: string;
     };
 };
 declare const Accordion: {
-    ({ className, children, index, collapsible, multiple, ...props }: AccordionPropsType): JSX.Element;
+    ({ className, children, index, collapsible, multiple, ...props }: AccordionPropsType): React.JSX.Element;
     Item: {
-        ({ children, className, ...props }: AccordionItemPropsType): JSX.Element;
+        ({ children, className, ...props }: AccordionItemPropsType): React.JSX.Element;
         displayName: string;
         Header: React.ForwardRefExoticComponent<{
             /**
@@ -85,7 +85,7 @@ declare const Accordion: {
             leftToggleIcon?: boolean | undefined;
         } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
         Panel: {
-            ({ children, className, ...props }: AccordionItemPanelPropsType): JSX.Element;
+            ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
             displayName: string;
         };
     };

package/types/components/Alerter/index.d.ts

@@ -17,5 +17,5 @@ export declare const useAlerts: () => {
 };
 declare const Alerter: (props: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Alerter;

package/types/components/BasicCell/index.d.ts

@@ -9,4 +9,4 @@ export interface BasicCellProps {
     rightAddonIcon?: React.ReactNode;
     large?: boolean;
 }
-export declare const BasicCell: ({ leftAddonIcon, leftAddonThumbUrl, leftAddonThumbAlt, leftAddonThumbSquare, title, children, rightAddonIcon, large, }: BasicCellProps) => JSX.Element;
+export declare const BasicCell: ({ leftAddonIcon, leftAddonThumbUrl, leftAddonThumbAlt, leftAddonThumbSquare, title, children, rightAddonIcon, large, }: BasicCellProps) => React.JSX.Element;

package/types/components/BulletList/index.d.ts

@@ -4,10 +4,10 @@ interface BulletListProps {
     children: React.ReactNode;
     iconPosition?: "top" | "centered";
 }
-export declare const BulletList: ({ children, iconPosition, }: BulletListProps) => JSX.Element;
+export declare const BulletList: ({ children, iconPosition, }: BulletListProps) => React.JSX.Element;
 interface BulletListItemProps {
     children: React.ReactNode;
     icon: ReturnType<typeof Icon>;
 }
-export declare const BulletListItem: ({ children, icon }: BulletListItemProps) => JSX.Element;
+export declare const BulletListItem: ({ children, icon }: BulletListItemProps) => React.JSX.Element;
 export {};

package/types/components/Buttons/ButtonsGroup.d.ts

@@ -4,5 +4,5 @@ export interface ButtonsGroupProps {
     children: React.ReactNode;
     align?: "fullWidth" | "right" | "center";
 }
-declare const ButtonsGroup: ({ className, children, align }: ButtonsGroupProps) => JSX.Element;
+declare const ButtonsGroup: ({ className, children, align }: ButtonsGroupProps) => React.JSX.Element;
 export default ButtonsGroup;

package/types/components/Buttons/helpers.d.ts

@@ -12,5 +12,5 @@ export type ButtonCommonPropsType = {
     icon?: IconSources;
 };
 export type ButtonTemplatePropsType<SpecificButtonProps> = SpecificButtonProps & ButtonCommonPropsType;
-export declare const getButtonContent: ({ children, icon, iconPosition, }: Pick<ButtonCommonPropsType, "children" | "icon" | "iconPosition">) => JSX.Element;
+export declare const getButtonContent: ({ children, icon, iconPosition, }: Pick<ButtonCommonPropsType, "children" | "icon" | "iconPosition">) => React.JSX.Element;
 export declare const getButtonCommonClassNames: ({ rounded, size, fullWidth, className, disabled, }: Pick<ButtonCommonPropsType, "rounded" | "size" | "fullWidth" | "className" | "disabled">) => string;

package/types/components/Calendar/CalendarRangePicker/CalendarRangePicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { FormElementStatus } from "../../Form/form";
 type Props = {
     numberOfMonths?: number;
@@ -19,5 +19,5 @@ type Props = {
     onSelectDate?: (date: Date, isOutOfRange: boolean) => void;
     locale?: Record<string, unknown>;
 };
-export declare function CalendarRangePicker({ rangeLimit, firstMonthDate, numberOfMonths, hint, firstAvailableDate, lastAvailableDate, isEditingStartDate, isEditingEndDate, startDate, endDate, onChangeDate, onLeaveDate, onSelectDate, locale, }: Props): JSX.Element;
+export declare function CalendarRangePicker({ rangeLimit, firstMonthDate, numberOfMonths, hint, firstAvailableDate, lastAvailableDate, isEditingStartDate, isEditingEndDate, startDate, endDate, onChangeDate, onLeaveDate, onSelectDate, locale, }: Props): React.JSX.Element;
 export {};

package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.d.ts

@@ -17,6 +17,6 @@ type Props = {
     onMouseEnter: (date: Date, disabled: boolean) => void;
     onMouseLeave?: (date: Date) => void;
 };
-declare function CalendarRangePickerDay({ date, isToday, isFirstDayOfMonth, isLastDayOfMonth, isStartDay, isEndDay, isRange, selected, subdued, disabled, invalid, onSelect, onMouseEnter, onMouseLeave, }: Props): JSX.Element;
+declare function CalendarRangePickerDay({ date, isToday, isFirstDayOfMonth, isLastDayOfMonth, isStartDay, isEndDay, isRange, selected, subdued, disabled, invalid, onSelect, onMouseEnter, onMouseLeave, }: Props): React.JSX.Element;
 declare const MemoizedComponent: React.MemoExoticComponent<typeof CalendarRangePickerDay>;
 export { MemoizedComponent as CalendarRangePickerDay };

package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 type Props = {
     date: Date;
     startDate?: Date;
@@ -13,5 +13,5 @@ type Props = {
     lastAvailableDate?: Date;
     locale: any;
 };
-export declare function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate, isEditingEndDate, rangeLimit, firstAvailableDate, lastAvailableDate, locale, }: Props): JSX.Element;
+export declare function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate, isEditingEndDate, rangeLimit, firstAvailableDate, lastAvailableDate, locale, }: Props): React.JSX.Element;
 export {};

package/types/components/Calendar/CalendarView/CalendarViewMonth.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { MonthType } from "./types";
 type Props = MonthType;
 declare const CalendarViewMonth: {
-    ({ monthName, monthStart, statusByDate, }: Props): JSX.Element;
+    ({ monthName, monthStart, statusByDate, }: Props): React.JSX.Element;
     displayName: string;
 };
 export default CalendarViewMonth;

package/types/components/Calendar/CalendarView/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from "react";
 import { MonthType } from "./types";
 type Props = {
     months: MonthType[];
 };
 declare const CalendarView: {
-    ({ months }: Props): JSX.Element;
+    ({ months }: Props): React.JSX.Element;
     displayName: string;
 };
 export { CalendarView };

package/types/components/Callout/index.d.ts

@@ -5,5 +5,5 @@ export interface CalloutProps {
     status: "info" | "error" | "success";
     close?: () => void;
 }
-export declare const Callout: ({ title, children, status, close, }: CalloutProps) => JSX.Element;
+export declare const Callout: ({ title, children, status, close, }: CalloutProps) => React.JSX.Element;
 export default Callout;

package/types/components/Card/index.d.ts

@@ -7,7 +7,7 @@ export type CardProps = {
     responsive?: boolean;
 };
 export declare const Card: {
-    ({ children, className, legacy, responsive, }: CardProps): JSX.Element;
+    ({ children, className, legacy, responsive, }: CardProps): React.JSX.Element;
     Section: typeof CardSection;
 };
 export type CardSectionProps = {
@@ -29,9 +29,9 @@ export type CardSectionLinkProps = CardSectionProps & {
 };
 export declare class CardSection extends PureComponent<CardSectionProps, never> {
     static Link: {
-        ({ href, target, rel, ...baseProps }: CardSectionLinkProps): JSX.Element;
+        ({ href, target, rel, ...baseProps }: CardSectionLinkProps): React.JSX.Element;
         displayName: string;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Card;

package/types/components/Chip/index.d.ts

@@ -13,4 +13,4 @@ export interface ChipWrapperProps {
     disabled?: boolean;
     className: string;
 }
-export declare const Chip: ({ onClick, text, image, size, disabled, active, }: ChipProps) => JSX.Element;
+export declare const Chip: ({ onClick, text, image, size, disabled, active, }: ChipProps) => React.JSX.Element;

package/types/components/EmptyState/index.d.ts

@@ -7,4 +7,4 @@ export interface EmptyStateProps {
     secondaryAction?: typeof DefaultButton;
     image: string;
 }
-export declare const EmptyState: ({ title, children, action, secondaryAction, image, }: EmptyStateProps) => JSX.Element;
+export declare const EmptyState: ({ title, children, action, secondaryAction, image, }: EmptyStateProps) => React.JSX.Element;

package/types/components/Flag/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 interface FlagsMap {
     [name: string]: string;
 }
@@ -11,5 +11,5 @@ export interface FlagProps {
      */
     size?: 16 | 20 | 24 | 32;
 }
-export declare const Flag: ({ country, size }: FlagProps) => JSX.Element;
+export declare const Flag: ({ country, size }: FlagProps) => React.JSX.Element;
 export {};

package/types/components/Flash/index.d.ts

@@ -4,4 +4,4 @@ export interface FlashProps {
     children: React.ReactNode;
     status: FlashStatus;
 }
-export declare const Flash: ({ children, status }: FlashProps) => JSX.Element;
+export declare const Flash: ({ children, status }: FlashProps) => React.JSX.Element;

package/types/components/Form/CheckablePill.d.ts

@@ -10,11 +10,11 @@ type Props = {
     name: string;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
 export declare const CheckboxPill: {
-    ({ ...props }: Props): JSX.Element;
+    ({ ...props }: Props): React.JSX.Element;
     displayName: string;
 };
 export declare const RadioPill: {
-    ({ ...props }: Props): JSX.Element;
+    ({ ...props }: Props): React.JSX.Element;
     displayName: string;
 };
 interface CheckablePillsGroupProps {

package/types/components/Form/Checkmark.d.ts

@@ -6,11 +6,11 @@ type Props = {
     hint?: string;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
 export declare const Checkbox: {
-    ({ label, ...props }: Props): JSX.Element;
+    ({ label, ...props }: Props): React.JSX.Element;
     displayName: string;
 };
 export declare const Radio: {
-    ({ label, ...props }: Props): JSX.Element;
+    ({ label, ...props }: Props): React.JSX.Element;
     displayName: string;
 };
 type ChoiceListProps = {

package/types/components/Form/Fieldset.d.ts

@@ -3,5 +3,5 @@ type Props = {
     legend: string;
     children: React.ReactNode;
 };
-export declare const Fieldset: ({ legend, children }: Props) => JSX.Element;
+export declare const Fieldset: ({ legend, children }: Props) => React.JSX.Element;
 export {};

package/types/components/Form/Hint.d.ts

@@ -5,4 +5,4 @@ export interface HintPropsType {
     children: React.ReactNode;
     status?: FormElementStatus;
 }
-export declare const Hint: ({ children, status, className }: HintPropsType) => JSX.Element;
+export declare const Hint: ({ children, status, className }: HintPropsType) => React.JSX.Element;

package/types/components/Form/RadioWithDetails.d.ts

@@ -6,5 +6,5 @@ export type RadioWithDetailsPropsType = {
     name: string;
     className?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
-declare const RadioWithDetails: ({ icon, title, description, className, ...inputProps }: RadioWithDetailsPropsType) => JSX.Element;
+declare const RadioWithDetails: ({ icon, title, description, className, ...inputProps }: RadioWithDetailsPropsType) => React.JSX.Element;
 export default RadioWithDetails;

package/types/components/Form/Slider.d.ts

@@ -90,4 +90,4 @@ export default wrappedComponent;
 type SliderValueMetaProps = {
     children: React.ReactNode;
 };
-export declare const SliderValueMeta: ({ children }: SliderValueMetaProps) => JSX.Element;
+export declare const SliderValueMeta: ({ children }: SliderValueMetaProps) => React.JSX.Element;

package/types/components/Form/Stepper.d.ts

@@ -32,5 +32,5 @@ export { wrappedComponent as Stepper };
 type StepperMetaProps = {
     children: React.ReactNode;
 };
-declare const StepperMeta: ({ children }: StepperMetaProps) => JSX.Element;
+declare const StepperMeta: ({ children }: StepperMetaProps) => React.JSX.Element;
 export { StepperMeta };

package/types/components/Form/TextInput.d.ts

@@ -11,7 +11,7 @@ export declare const TextInputWrapper: ({ icon, status, render, }: {
     icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     status?: FormElement["status"];
     render: (className: string) => React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 declare const wrappedComponent: React.ComponentClass<{
     type?: TextInputType | undefined;
     icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;

package/types/components/Form/ToggleSwitch.d.ts

@@ -7,5 +7,5 @@ type Props = {
     position?: Position;
     hint?: string;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
-declare const ToggleSwitch: ({ large, status, label, position, hint, ...inputProps }: Props) => JSX.Element;
+declare const ToggleSwitch: ({ large, status, label, position, hint, ...inputProps }: Props) => React.JSX.Element;
 export { ToggleSwitch };

package/types/components/Helper/index.d.ts

@@ -8,5 +8,5 @@ type HelperPropsType = {
     contentClassName?: string;
     cta?: ReturnType<typeof DefaultButton | typeof DefaultButton.Link>;
 };
-declare const Helper: ({ className, titleClassName, contentClassName, title, children, cta, }: HelperPropsType) => JSX.Element;
+declare const Helper: ({ className, titleClassName, contentClassName, title, children, cta, }: HelperPropsType) => React.JSX.Element;
 export default Helper;

package/types/components/HorizontalList/index.d.ts

@@ -5,9 +5,9 @@ export type HorizontalListPropsType = {
     className?: string;
     fitFrom?: Exclude<CobaltBreakpointType, "over">;
 };
-export default function HorizontalList({ className, fitFrom, children, }: HorizontalListPropsType): JSX.Element;
+export default function HorizontalList({ className, fitFrom, children, }: HorizontalListPropsType): React.JSX.Element;
 type HorizontalScrollerPaddingBlockProps = {
     className?: string;
 };
-export declare function HorizontalListPaddingBlock({ className, }: HorizontalScrollerPaddingBlockProps): JSX.Element;
+export declare function HorizontalListPaddingBlock({ className, }: HorizontalScrollerPaddingBlockProps): React.JSX.Element;
 export {};

package/types/components/Icon/__generated__/AccountDetailsIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconColorsType } from "../";
 export type IconProps = {
     color?: IconColorsType;
@@ -6,5 +6,5 @@ export type IconProps = {
     contained?: boolean;
     className?: string;
 };
-declare const AccountDetailsIcon: ({ color, size, contained, className, }: IconProps) => JSX.Element;
+declare const AccountDetailsIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
 export default AccountDetailsIcon;

package/types/components/Icon/__generated__/AddPictureIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconColorsType } from "../";
 export type IconProps = {
     color?: IconColorsType;
@@ -6,5 +6,5 @@ export type IconProps = {
     contained?: boolean;
     className?: string;
 };
-declare const AddPictureIcon: ({ color, size, contained, className, }: IconProps) => JSX.Element;
+declare const AddPictureIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
 export default AddPictureIcon;

package/types/components/Icon/__generated__/AirConditioningIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconColorsType } from "../";
 export type IconProps = {
     color?: IconColorsType;
@@ -6,5 +6,5 @@ export type IconProps = {
     contained?: boolean;
     className?: string;
 };
-declare const AirConditioningIcon: ({ color, size, contained, className, }: IconProps) => JSX.Element;
+declare const AirConditioningIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
 export default AirConditioningIcon;

package/types/components/Icon/__generated__/AirportIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconColorsType } from "../";
 export type IconProps = {
     color?: IconColorsType;
@@ -6,5 +6,5 @@ export type IconProps = {
     contained?: boolean;
     className?: string;
 };
-declare const AirportIcon: ({ color, size, contained, className, }: IconProps) => JSX.Element;
+declare const AirportIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
 export default AirportIcon;

package/types/components/Icon/__generated__/AndroidIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconColorsType } from "../";
 export type IconProps = {
     color?: IconColorsType;
@@ -6,5 +6,5 @@ export type IconProps = {
     contained?: boolean;
     className?: string;
 };
-declare const AndroidIcon: ({ color, size, contained, className, }: IconProps) => JSX.Element;
+declare const AndroidIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
 export default AndroidIcon;

package/types/components/Icon/__generated__/AntiqueIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconColorsType } from "../";
 export type IconProps = {
     color?: IconColorsType;
@@ -6,5 +6,5 @@ export type IconProps = {
     contained?: boolean;
     className?: string;
 };
-declare const AntiqueIcon: ({ color, size, contained, className, }: IconProps) => JSX.Element;
+declare const AntiqueIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
 export default AntiqueIcon;