vcc-ui - npm Package Compare versions

Comparing version 4.8.0 to 4.9.0

dist/components/block/block.d.ts

@@ -7,3 +7,4 @@ import React from 'react';
  * By default renders a div with display: block, as a starting point for building your own custom block components.
+ * @deprecated Use a <div> element instead
  */
-export declare const Block: ComponentWithAs<import("../../types/shared").Extendable<{}>, "div", React.Ref<HTMLElement>>;
+export declare const Block: ComponentWithAs<BlockUniqueProps, "div", React.Ref<HTMLElement>>;

dist/components/block/block.js

@@ -20,2 +20,3 @@ "use strict";
  * By default renders a div with display: block, as a starting point for building your own custom block components.
+ * @deprecated Use a <div> element instead
  */
@@ -22,0 +23,0 @@ const Block = exports.Block = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {

dist/components/block/block.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // <Block href="www.volvocars.com" />;
@@ -20,2 +20,3 @@
 // <Block hrefLang="" ref={ref} />;
+
 //@ts-expect-error
@@ -22,0 +23,0 @@ /*#__PURE__*/_react.default.createElement(_vccUi.Block, {

dist/components/button/button.d.ts

@@ -15,2 +15,5 @@ import React from 'react';
 export type ButtonProps<T = undefined> = PropsWithHref<ButtonUniqueProps, T>;
-export declare const Button: ComponentWithHref<ButtonUniqueProps, undefined> & React.FunctionComponent<{}>;
+/**
+ * @deprecated Use a `<button>` or `<a>` element instead. See also [Button](https://developer.volvocars.com/design-system/web/?path=/docs/components-button-filled--docs)
+ */
+export declare const Button: ComponentWithHref<ButtonUniqueProps, undefined> & React.FunctionComponent;

dist/components/button/button.js

@@ -18,3 +18,6 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @deprecated Use a `<button>` or `<a>` element instead. See also [Button](https://developer.volvocars.com/design-system/web/?path=/docs/components-button-filled--docs)
+ */
 const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -21,0 +24,0 @@ let {

dist/components/card-content/card-content.js

@@ -16,2 +16,6 @@ "use strict";
 });
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [ClickableCard Example](https://developer.volvocars.com/design-system/web/?path=/docs/how-to-clickablecard--docs)
+ */
 const CardContent = exports.CardContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -18,0 +22,0 @@ let {

dist/components/card-content/card-content.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // passes ref and allow div attributes
@@ -9,0 +9,0 @@ () => {

dist/components/card/card.js

@@ -63,2 +63,6 @@ "use strict";
 };
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [ClickableCard Example](https://developer.volvocars.com/design-system/web/?path=/docs/how-to-clickablecard--docs)
+ */
 const Card = exports.Card = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
@@ -65,0 +69,0 @@ let {

dist/components/card/card.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // TODO: Fix eslint issues the next time this file is edited.
@@ -9,0 +9,0 @@ /* eslint-disable jsx-a11y/aria-role */

dist/components/checkbox/checkbox.d.ts

@@ -17,16 +17,19 @@ import React, { ChangeEventHandler, ReactNode } from 'react';
 } & React.ComponentPropsWithoutRef<'input'>;
+/**
+ * @deprecated Use `import { Checkbox } from '@volvo-cars/react-forms'` instead. See [Checkbox](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-checkbox--docs)
+ */
 export declare const Checkbox: React.ForwardRefExoticComponent<{
     /** Renders a label inside the input. */
-    name?: string | undefined;
+    name?: string;
     /** Accessible description of the outcome of interaction with the checkbox */
     label: ReactNode;
     /** Renders a description text underneath the input. */
-    description?: string | undefined;
+    description?: string;
     /** Renders a red error message for validation underneath the input. */
-    errorMessage?: string | undefined;
+    errorMessage?: string;
     onChange: ChangeEventHandler<HTMLInputElement>;
-    isValid?: boolean | undefined;
-    checked?: boolean | undefined;
+    isValid?: boolean;
+    checked?: boolean;
     /** Superfluous property returned from useField. Can be removed at a later date. */
-    loading?: boolean | undefined;
+    loading?: boolean;
 } & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

dist/components/checkbox/checkbox.js

@@ -17,3 +17,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const CheckBoxMessages = _ref => {
@@ -28,2 +28,6 @@ let {
 };
+
+/**
+ * @deprecated Use `import { Checkbox } from '@volvo-cars/react-forms'` instead. See [Checkbox](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-checkbox--docs)
+ */
 const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
@@ -72,2 +76,3 @@ let {
   name: _propTypes.string,
+  // @ts-ignore
   label: _propTypes.node.isRequired,
@@ -74,0 +79,0 @@ description: _propTypes.string,

dist/components/click/click.js

@@ -31,2 +31,6 @@ "use strict";
 };
+
+/**
+ * @deprecated Use either a `<button>` or `<a>` tag instead.
+ */
 const Click = exports.Click = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -33,0 +37,0 @@ let {

dist/components/click/click.typecheck.js

@@ -9,2 +9,3 @@ "use strict";
 // };
+
 /*#__PURE__*/_react.default.createElement(_vccUi.Click, {
@@ -11,0 +12,0 @@ href: ""

dist/components/col/col.js

@@ -13,3 +13,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Not worth converting to TypeScript until Grid implementation is revisited /Jacob Rask
@@ -102,2 +102,7 @@
 }
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [Grid](https://developer.volvocars.com/design-system/web/?path=/docs/layout-grid--docs)
+ */
+
 function Col(_ref2) {
@@ -104,0 +109,0 @@ let {

dist/components/flex/flex.js

@@ -20,2 +20,6 @@ "use strict";
 };
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [Flex](https://developer.volvocars.com/design-system/web/?path=/docs/layout-flex--docs)
+ */
 const Flex = exports.Flex = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -22,0 +26,0 @@ let {

dist/components/grid/grid.d.ts

 import React from 'react';
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [Grid](https://developer.volvocars.com/design-system/web/?path=/docs/layout-grid--docs)
+ */
 export declare const Grid: React.FC<{
     children: React.ReactNode;
 }>;

dist/components/grid/grid.js

@@ -11,2 +11,5 @@ "use strict";
 var _flex = require("../flex");
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [Grid](https://developer.volvocars.com/design-system/web/?path=/docs/layout-grid--docs)
+ */
 const Grid = _ref => {
@@ -23,2 +26,3 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: _propTypes.default.node.isRequired
@@ -25,0 +29,0 @@ };

dist/components/icon-button/IconButton.d.ts

@@ -47,2 +47,5 @@ import React from 'react';
 }
+/**
+ * @deprecated Use `import { IconButton } from '@volvo-cars/react-icons'` instead. See [IconButton](https://developer.volvocars.com/design-system/web/?path=/docs/components-iconbutton--docs)
+ */
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

dist/components/icon-button/IconButton.js

@@ -18,3 +18,6 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @deprecated Use `import { IconButton } from '@volvo-cars/react-icons'` instead. See [IconButton](https://developer.volvocars.com/design-system/web/?path=/docs/components-iconbutton--docs)
+ */
 const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -21,0 +24,0 @@ let {

dist/components/icon-button/IconButton.styles.d.ts

@@ -7,2 +7,2 @@ import { ExtendCSS } from '../..';
 }) => ExtendCSS;
-export declare const iconButtonStyle: (variant: IconButtonProps['variant'], intent: IconButtonProps['intent']) => ExtendCSS;
+export declare const iconButtonStyle: (variant: IconButtonProps["variant"], intent: IconButtonProps["intent"]) => ExtendCSS;

dist/components/icon/Icon.d.ts

@@ -13,2 +13,5 @@ import PropTypes from 'prop-types';
 }
+/**
+ * @deprecated Use `import { Icon } from '@volvo-cars/react-icons'` instead. See [Icon](https://developer.volvocars.com/design-system/web/?path=/docs/components-icon--docs)
+ */
 export declare function Icon({ type, color, label, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
@@ -15,0 +18,0 @@ export declare namespace Icon {

dist/components/icon/Icon.js

@@ -15,2 +15,5 @@ "use strict";
 var _iconTypes = require("./iconTypes");
+/**
+ * @deprecated Use `import { Icon } from '@volvo-cars/react-icons'` instead. See [Icon](https://developer.volvocars.com/design-system/web/?path=/docs/components-icon--docs)
+ */
 function Icon(_ref) {
@@ -17,0 +20,0 @@ let {

dist/components/inline/inline.d.ts

@@ -5,2 +5,5 @@ import React from 'react';
 export type InlineProps<T extends keyof OmittedIntrinsicElements = 'span'> = PropsWithAs<InlineUniqueProps, T>;
-export declare const Inline: ComponentWithAs<import("../../types/shared").Extendable<{}>, "span", React.Ref<HTMLElement>>;
+/**
+ * @deprecated Use a `<span>` element instead
+ */
+export declare const Inline: ComponentWithAs<InlineUniqueProps, "span", React.Ref<HTMLElement>>;

dist/components/inline/inline.js

@@ -18,2 +18,5 @@ "use strict";
 };
+/**
+ * @deprecated Use a `<span>` element instead
+ */
 const Inline = exports.Inline = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -20,0 +23,0 @@ let {

dist/components/link/index.d.ts

@@ -10,9 +10,12 @@ import React, { AnchorHTMLAttributes, ReactNode } from 'react';
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
+/**
+ * @deprecated Use `<a>` element instead, with or without arrows. See [Link](https://developer.volvocars.com/design-system/web/?path=/docs/components-link--docs)
+ */
 export declare const Link: React.ForwardRefExoticComponent<{
     /** @default 'primary' */
-    intent?: "primary" | "destructive" | undefined;
-    arrow?: "left" | "right" | "up" | "down" | null | undefined;
+    intent?: "primary" | "destructive";
+    arrow?: "up" | "down" | "right" | "left" | null;
     children?: ReactNode;
-    disabled?: boolean | undefined;
-    textTransform?: "none" | "capitalize" | "first-letter-uppercase" | undefined;
+    disabled?: boolean;
+    textTransform?: "none" | "capitalize" | "first-letter-uppercase";
 } & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;

dist/components/link/index.js

@@ -18,3 +18,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Svg = _ref => {
@@ -66,2 +66,5 @@ let {
 };
+/**
+ * @deprecated Use `<a>` element instead, with or without arrows. See [Link](https://developer.volvocars.com/design-system/web/?path=/docs/components-link--docs)
+ */
 const Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
@@ -183,2 +186,3 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: _propTypes.default.node,
@@ -185,0 +189,0 @@ intent: _propTypes.default.oneOf(['primary', 'destructive']),

dist/components/loading-bar/index.js

@@ -11,2 +11,5 @@ "use strict";
 var _block = require("../block");
+/**
+ * @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
+ */
 const LoadingBar = exports.LoadingBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -13,0 +16,0 @@ let {

dist/components/message/index.js

@@ -35,2 +35,6 @@ "use strict";
 };
+
+/**
+ * @deprecated Use `import { FormMessage } from '@volvo-cars/react-forms'` instead. See [FormMessage](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-checkbox--docs)
+ */
 function Message(_ref) {
@@ -37,0 +41,0 @@ let {

dist/components/nav-item/index.d.ts

@@ -8,7 +8,10 @@ import React, { HTMLAttributes } from 'react';
 } & HTMLAttributes<HTMLButtonElement>;
+/**
+ * @deprecated
+ */
 export declare const NavItem: React.ForwardRefExoticComponent<{
     /** Indicate if the NavItem will open a dropdown menu */
-    isDropdown?: boolean | undefined;
+    isDropdown?: boolean;
     /** Indicate if the NavItem is in an active state */
-    isActive?: boolean | undefined;
+    isActive?: boolean;
 } & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

dist/components/nav-item/index.js

@@ -17,3 +17,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const navItemStyle = _ref => {
@@ -76,2 +76,5 @@ let {
 };
+/**
+ * @deprecated
+ */
 const NavItem = exports.NavItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
@@ -122,2 +125,3 @@ let {
 NavItem.propTypes = {
+  // @ts-ignore
   children: _propTypes.default.node,
@@ -124,0 +128,0 @@ /** Indicate if the NavItem will open a dropdown menu */

dist/components/nav/index.d.ts

 import React, { ReactNode } from 'react';
-export declare const useKeyboardNavigation: <T_1 extends HTMLElement>({ orientation, direction, ref, onKeyDown, }?: (import("@volvo-cars/react-aria").UseKeyboardNavigationResults<T_1> & {
-    orientation?: "horizontal" | "vertical" | undefined;
-    direction?: "ltr" | "rtl" | undefined;
-}) | undefined) => {
-    ref: React.MutableRefObject<T_1 | null>;
-    onKeyDown: React.KeyboardEventHandler<T_1>;
+export declare const useKeyboardNavigation: <T extends HTMLElement>({ orientation, direction, ref, onKeyDown, }?: import("@volvo-cars/react-aria").UseKeyboardNavigationResults<T> & {
+    orientation?: "horizontal" | "vertical";
+    direction?: "ltr" | "rtl";
+}) => {
+    ref: import("react").MutableRefObject<T | null>;
+    onKeyDown: import("react").KeyboardEventHandler<T>;
 }, KeyboardNavigationProvider: React.FC<{
-    children: React.ReactNode;
+    children: import("react").ReactNode;
 }>;
@@ -19,2 +19,5 @@ export type NavProps = {
 };
+/**
+ * @deprecated Use `<nav>` element instead.
+ */
 export declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<HTMLElement>>;

dist/components/nav/index.js

@@ -14,3 +14,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const {
@@ -71,2 +71,5 @@ useKeyboardNavigation,
 let previousScrollY = 0;
+/**
+ * @deprecated Use `<nav>` element instead.
+ */
 const Nav = exports.Nav = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
@@ -119,3 +122,4 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: _propTypes.default.node
 };

dist/components/nav/nav.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // passes ref and allow div attributes and custom props
@@ -9,0 +9,0 @@ () => {

dist/components/radio/radio.js

@@ -16,3 +16,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const radioStyle = _ref => {
@@ -104,2 +104,5 @@ let {
 };
+/**
+ * @deprecated Use `import { Radio } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
+ */
 const Radio = exports.Radio = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
@@ -106,0 +109,0 @@ let {

dist/components/radioGroup/radio-group.d.ts

@@ -21,2 +21,5 @@ import React, { ChangeEventHandler } from 'react';
 };
+/**
+ * @deprecated Use `import { RadioGroup } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
+ */
 export declare const RadioGroup: React.FC<RadioGroupProps>;

dist/components/radioGroup/radio-group.js

@@ -13,3 +13,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const labelStyle = _ref => {
@@ -33,2 +33,5 @@ let {
 const RadioContext = exports.RadioContext = /*#__PURE__*/(0, _react.createContext)({});
+/**
+ * @deprecated Use `import { RadioGroup } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
+ */
 const RadioGroup = _ref3 => {
@@ -84,3 +87,4 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: _propTypes.node
 };

dist/components/row/row.d.ts

@@ -11,3 +11,4 @@ import React from 'react';
  * Groups a number of columns and can align them.
+ * @deprecated
  */
 export declare const Row: React.FC<RowProps>;

dist/components/row/row.js

@@ -13,2 +13,3 @@ "use strict";
  * Groups a number of columns and can align them.
+ * @deprecated
  */
@@ -53,3 +54,4 @@ const Row = _ref => {
   /** A JSX node */
+  // @ts-ignore
   children: _propTypes.default.node
 };

dist/components/select-input/select-input.d.ts

@@ -19,2 +19,5 @@ import React, { ChangeEventHandler, ReactNode } from 'react';
 } & React.ComponentPropsWithRef<'select'>;
+/**
+ * @deprecated Use `import { Select } from '@volvo-cars/react-forms'` instead. See [Select](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-select--docs)
+ */
 export declare const SelectInput: React.ForwardRefExoticComponent<Omit<SelectInputProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;

dist/components/select-input/select-input.js

@@ -19,2 +19,5 @@ "use strict";
 var _selectInput = require("./select-input.styles");
+/**
+ * @deprecated Use `import { Select } from '@volvo-cars/react-forms'` instead. See [Select](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-select--docs)
+ */
 const SelectInput = exports.SelectInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -108,2 +111,3 @@ let {
   loading: _propTypes.bool,
+  // @ts-ignore
   children: _propTypes.node,
@@ -110,0 +114,0 @@ isValid: _propTypes.bool,

dist/components/select-input/select-input.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // passes ref and allow input attributes and custom props
@@ -9,0 +9,0 @@ () => {

dist/components/slider/index.d.ts

@@ -15,2 +15,5 @@ import { FC } from 'react';
 };
+/**
+ * @deprecated Use `import { RangeSlider } from '@volvo-cars/react-forms'` instead. See [RangeSlider](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-rangeslider--docs)
+ */
 export declare const Slider: FC<SliderProps>;

dist/components/slider/index.js

@@ -15,3 +15,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const KEY_LEFT = 37;
@@ -370,2 +370,6 @@ const KEY_UP = 38;
 SliderComponent.displayName = 'Slider';
+
+/**
+ * @deprecated Use `import { RangeSlider } from '@volvo-cars/react-forms'` instead. See [RangeSlider](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-rangeslider--docs)
+ */
 const Slider = props => {
@@ -372,0 +376,0 @@ const ComponentWithTheme = (0, _reactFela.withTheme)(SliderComponent);

dist/components/spacer/index.js

@@ -13,2 +13,5 @@ "use strict";
 var _view = require("../view");
+/**
+ * @deprecated Use margin or gaps instead. Read [Layout](https://developer.volvocars.com/design-system/web/?path=/docs/layout-introduction--docs)
+ */
 function Spacer(_ref) {
@@ -15,0 +18,0 @@ let {

dist/components/spinner/spinner.d.ts

@@ -11,2 +11,5 @@ import React from 'react';
 };
+/**
+ * @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
+ */
 export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;

dist/components/spinner/spinner.js

@@ -39,2 +39,6 @@ "use strict";
 };
+
+/**
+ * @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
+ */
 const Spinner = exports.Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
@@ -41,0 +45,0 @@ let {

dist/components/tab-nav-item/index.js

@@ -16,3 +16,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // TODO: Fix eslint issues the next time this file is edited.
@@ -151,2 +151,5 @@ /* eslint-disable react-hooks/exhaustive-deps */
 }
+/**
+ * @deprecated
+ */
 const TabNavItem = exports.TabNavItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
@@ -153,0 +156,0 @@ let {

dist/components/tab-nav-item/tab-nav-item.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // passes ref and allow button attributes and custom props
@@ -9,0 +9,0 @@ () => {

dist/components/tab-nav/index.d.ts

@@ -1,8 +0,8 @@
-import React, { MouseEventHandler, ReactNode } from 'react';
+import React, { Dispatch, MouseEventHandler, ReactNode, RefObject, SetStateAction } from 'react';
 export declare const TabNavContext: React.Context<{
-    active?: boolean | undefined;
-    setActive?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
-    scrollRef?: React.RefObject<HTMLDivElement> | undefined;
-    borderRef?: React.RefObject<HTMLDivElement> | undefined;
-    duration?: number | undefined;
+    active?: boolean;
+    setActive?: Dispatch<SetStateAction<boolean>>;
+    scrollRef?: RefObject<HTMLDivElement>;
+    borderRef?: RefObject<HTMLDivElement>;
+    duration?: number;
 }>;
@@ -32,3 +32,6 @@ type BackButtonConfig = {
 };
+/**
+ * @deprecated Use `<nav>` element instead. See [TabNav](https://developer.volvocars.com/design-system/web/?path=/docs/components-tabs--docs)
+ */
 export declare const TabNav: React.ForwardRefExoticComponent<TabNavProps & React.RefAttributes<HTMLElement>>;
 export {};

dist/components/tab-nav/index.js

@@ -19,3 +19,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const TabNavContext = exports.TabNavContext = /*#__PURE__*/(0, _react.createContext)({});
@@ -185,2 +185,5 @@ const styles = {
 }
+/**
+ * @deprecated Use `<nav>` element instead. See [TabNav](https://developer.volvocars.com/design-system/web/?path=/docs/components-tabs--docs)
+ */
 const TabNav = exports.TabNav = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
@@ -256,6 +259,9 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: _propTypes.default.node,
   /** A JSX node sticky to the left */
+  // @ts-ignore
   stickyChildrenLeft: _propTypes.default.node,
   /** A JSX node sticky to the right */
+  // @ts-ignore
   stickyChildrenRight: _propTypes.default.node,
@@ -262,0 +268,0 @@ /** Which viewports to show the back button on */

dist/components/tab-nav/tab-nav.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // passes ref and allow button attributes and custom props
@@ -9,0 +9,0 @@ () => {

dist/components/text-area/text-area.d.ts

@@ -20,11 +20,14 @@ import React, { ChangeEventHandler, ReactNode } from 'react';
 } & React.ComponentPropsWithoutRef<'textarea'>;
+/**
+ * @deprecated Use `import { TextArea } from '@volvo-cars/react-forms'` instead. See [TextArea](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-textarea--docs)
+ */
 export declare const TextArea: React.ForwardRefExoticComponent<{
-    id?: string | undefined;
-    name?: string | undefined;
+    id?: string;
+    name?: string;
     /** Renders a label inside the input.  */
     label: ReactNode;
     /** Renders a neutral helper message underneath the input.  */
-    description?: string | undefined;
+    description?: string;
     /** Renders a red error message for validation underneath the input.  */
-    errorMessage?: string | undefined;
+    errorMessage?: string;
     onChange: ChangeEventHandler<HTMLTextAreaElement>;
@@ -35,5 +38,5 @@ /** Value of the input. This should be stored in the
     /** Renders the input as valid or invalid */
-    isValid?: boolean | undefined;
-    loading?: boolean | undefined;
-    disabled?: boolean | undefined;
+    isValid?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
 } & Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

dist/components/text-area/text-area.js

@@ -20,3 +20,6 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @deprecated Use `import { TextArea } from '@volvo-cars/react-forms'` instead. See [TextArea](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-textarea--docs)
+ */
 const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -23,0 +26,0 @@ let {

dist/components/text-input/text-input.js

@@ -108,2 +108,6 @@ "use strict";
 };
+
+/**
+ * @deprecated Use `import { TextInput } from '@volvo-cars/react-forms'` instead. See [TextInput](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-input-textinput--docs)
+ */
 const TextInput = exports.TextInput = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
@@ -110,0 +114,0 @@ let {

dist/components/text/text.d.ts

@@ -1,5 +0,7 @@
-import React from 'react';
 import { ComponentWithAs } from '../../types/shared';
-import { TextUniqueProps } from './types';
+import { GenericRef, TextUniqueProps } from './types';
 export declare const SUB_STYLES: string[];
-export declare const Text: ComponentWithAs<TextUniqueProps, "p", React.LegacyRef<HTMLElement> | undefined>;
+/**
+ * @deprecated Use proper semantic elements instead like heading, paragraph, etc. See [Typography](https://developer.volvocars.com/design-system/web/?path=/docs/typography-introduction--docs)
+ */
+export declare const Text: ComponentWithAs<TextUniqueProps, "p", GenericRef>;

dist/components/text/text.js

@@ -16,3 +16,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SUB_STYLES = exports.SUB_STYLES = ['standard', 'inline-link', 'emphasis'];
@@ -24,2 +24,5 @@ const TextContext = /*#__PURE__*/_react.default.createContext({
 const defaultSubStyle = 'standard';
+/**
+ * @deprecated Use proper semantic elements instead like heading, paragraph, etc. See [Typography](https://developer.volvocars.com/design-system/web/?path=/docs/typography-introduction--docs)
+ */
 const Text = exports.Text = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
@@ -26,0 +29,0 @@ let {

dist/components/text/text.typecheck.js

@@ -6,6 +6,7 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // <Text<'h3'> aria-label="label" variant="amundsen">
 //   child
 // </Text>;
+
 /*#__PURE__*/_react.default.createElement(_vccUi.Text, {
@@ -12,0 +13,0 @@ as: "h1",

dist/components/text/types.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { CSSProperties, OmittedIntrinsicElements, PropsWithAs, PropsWithExtend, ResponsiveProp, TypeVariants } from '../../types/shared';
@@ -3,0 +2,0 @@ export type TextUniqueProps = PropsWithExtend<{

dist/components/toggle/index.d.ts

@@ -8,3 +8,6 @@ import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
 }
+/**
+ * @deprecated Use `<button role="switch">` instead. See [Switch](https://developer.volvocars.com/design-system/web/?path=/docs/components-switch--docs)
+ */
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
 export {};

dist/components/toggle/index.js

@@ -12,3 +12,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const rootCSS = {
@@ -128,2 +128,6 @@ width: 40,
 };
+/**
+ * @deprecated Use `<button role="switch">` instead. See [Switch](https://developer.volvocars.com/design-system/web/?path=/docs/components-switch--docs)
+ */
+
 const Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
@@ -130,0 +134,0 @@ let {

dist/components/toggle/toggle.typecheck.js

@@ -6,3 +6,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // passes ref and allow input attributes and custom props
@@ -9,0 +9,0 @@ () => {

dist/components/view/view.d.ts

@@ -66,2 +66,5 @@ import { ComponentWithAs, CSSProperties, OmittedIntrinsicElements, PropsWithAs, PropsWithExtend, ResponsiveProp } from '../../types/shared';
 export type ViewProps<T extends keyof OmittedIntrinsicElements = 'div'> = PropsWithAs<ViewUniqueProps, T>;
+/**
+ * @deprecated Use a `<div className="flex-(col|row)">` element instead
+ */
 export declare const View: ComponentWithAs<ViewUniqueProps, "div">;

dist/components/view/view.js

@@ -16,3 +16,6 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @deprecated Use a `<div className="flex-(col|row)">` element instead
+ */
 const View = exports.View = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -19,0 +22,0 @@ let {

dist/esm/components/block/block.js

@@ -12,2 +12,3 @@ import _extends from "@babel/runtime/helpers/extends";
  * By default renders a div with display: block, as a starting point for building your own custom block components.
+ * @deprecated Use a <div> element instead
  */
@@ -14,0 +15,0 @@ export const Block = /*#__PURE__*/React.forwardRef((_ref, ref) => {

dist/esm/components/button/button.js

@@ -10,2 +10,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Spinner } from '../spinner';
+/**
+ * @deprecated Use a `<button>` or `<a>` element instead. See also [Button](https://developer.volvocars.com/design-system/web/?path=/docs/components-button-filled--docs)
+ */
 export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -12,0 +15,0 @@ let {

dist/esm/components/card-content/card-content.js

@@ -9,2 +9,6 @@ import _extends from "@babel/runtime/helpers/extends";
 });
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [ClickableCard Example](https://developer.volvocars.com/design-system/web/?path=/docs/how-to-clickablecard--docs)
+ */
 export const CardContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -11,0 +15,0 @@ let {

dist/esm/components/card/card.js

@@ -56,2 +56,6 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [ClickableCard Example](https://developer.volvocars.com/design-system/web/?path=/docs/how-to-clickablecard--docs)
+ */
 export const Card = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
@@ -58,0 +62,0 @@ let {

dist/esm/components/checkbox/checkbox.js

@@ -18,2 +18,6 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+
+/**
+ * @deprecated Use `import { Checkbox } from '@volvo-cars/react-forms'` instead. See [Checkbox](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-checkbox--docs)
+ */
 export const Checkbox = /*#__PURE__*/forwardRef((_ref2, ref) => {
@@ -62,2 +66,3 @@ let {
   name: string,
+  // @ts-ignore
   label: node.isRequired,
@@ -64,0 +69,0 @@ description: string,

dist/esm/components/click/click.js

@@ -24,2 +24,6 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+
+/**
+ * @deprecated Use either a `<button>` or `<a>` tag instead.
+ */
 export const Click = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -26,0 +30,0 @@ let {

dist/esm/components/col/col.js

@@ -91,2 +91,7 @@ // Not worth converting to TypeScript until Grid implementation is revisited /Jacob Rask
 }
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [Grid](https://developer.volvocars.com/design-system/web/?path=/docs/layout-grid--docs)
+ */
+
 export function Col(_ref2) {
@@ -93,0 +98,0 @@ let {

dist/esm/components/flex/flex.js

@@ -13,2 +13,6 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [Flex](https://developer.volvocars.com/design-system/web/?path=/docs/layout-flex--docs)
+ */
 export const Flex = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -15,0 +19,0 @@ let {

dist/esm/components/grid/grid.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { Flex } from '../flex';
+
+/**
+ * @deprecated This component is deprecated and can be recreated using CSS only. See [Grid](https://developer.volvocars.com/design-system/web/?path=/docs/layout-grid--docs)
+ */
 export const Grid = _ref => {
@@ -14,2 +18,3 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: PropTypes.node.isRequired
@@ -16,0 +21,0 @@ };

dist/esm/components/icon-button/IconButton.js

@@ -10,2 +10,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import { INTENTS, NAMES, VARIANTS } from './types';
+/**
+ * @deprecated Use `import { IconButton } from '@volvo-cars/react-icons'` instead. See [IconButton](https://developer.volvocars.com/design-system/web/?path=/docs/components-iconbutton--docs)
+ */
 export const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -12,0 +15,0 @@ let {

dist/esm/components/icon/Icon.js

@@ -8,2 +8,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import { COLORS } from './iconTypes';
+/**
+ * @deprecated Use `import { Icon } from '@volvo-cars/react-icons'` instead. See [Icon](https://developer.volvocars.com/design-system/web/?path=/docs/components-icon--docs)
+ */
 export function Icon(_ref) {
@@ -10,0 +13,0 @@ let {

dist/esm/components/inline/inline.js

@@ -10,2 +10,5 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+/**
+ * @deprecated Use a `<span>` element instead
+ */
 export const Inline = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -12,0 +15,0 @@ let {

dist/esm/components/link/index.js

@@ -56,2 +56,5 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+/**
+ * @deprecated Use `<a>` element instead, with or without arrows. See [Link](https://developer.volvocars.com/design-system/web/?path=/docs/components-link--docs)
+ */
 export const Link = /*#__PURE__*/forwardRef((_ref3, ref) => {
@@ -173,2 +176,3 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: PropTypes.node,
@@ -175,0 +179,0 @@ intent: PropTypes.oneOf(['primary', 'destructive']),

dist/esm/components/loading-bar/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { Block } from '../block';
+
+/**
+ * @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
+ */
 export const LoadingBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -5,0 +9,0 @@ let {

dist/esm/components/message/index.js

@@ -29,2 +29,6 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+
+/**
+ * @deprecated Use `import { FormMessage } from '@volvo-cars/react-forms'` instead. See [FormMessage](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-checkbox--docs)
+ */
 export function Message(_ref) {
@@ -31,0 +35,0 @@ let {

dist/esm/components/nav-item/index.js

@@ -66,2 +66,5 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+/**
+ * @deprecated
+ */
 export const NavItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
@@ -112,2 +115,3 @@ let {
 NavItem.propTypes = {
+  // @ts-ignore
   children: PropTypes.node,
@@ -114,0 +118,0 @@ /** Indicate if the NavItem will open a dropdown menu */

dist/esm/components/nav/index.js

@@ -59,2 +59,5 @@ import React, { forwardRef, useEffect, useState } from 'react';
 let previousScrollY = 0;
+/**
+ * @deprecated Use `<nav>` element instead.
+ */
 export const Nav = /*#__PURE__*/forwardRef((_ref2, ref) => {
@@ -107,3 +110,4 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: PropTypes.node
 };

dist/esm/components/radio/radio.js

@@ -94,2 +94,5 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+/**
+ * @deprecated Use `import { Radio } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
+ */
 export const Radio = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
@@ -96,0 +99,0 @@ let {

dist/esm/components/radioGroup/radio-group.js

@@ -24,2 +24,5 @@ import React, { createContext } from 'react';
 export const RadioContext = /*#__PURE__*/createContext({});
+/**
+ * @deprecated Use `import { RadioGroup } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
+ */
 export const RadioGroup = _ref3 => {
@@ -74,3 +77,4 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: node
 };

dist/esm/components/row/row.js

@@ -6,2 +6,3 @@ import React from 'react';
  * Groups a number of columns and can align them.
+ * @deprecated
  */
@@ -45,3 +46,4 @@ export const Row = _ref => {
   /** A JSX node */
+  // @ts-ignore
   children: PropTypes.node
 };

dist/esm/components/select-input/select-input.js

@@ -12,2 +12,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import { labelStyle, styles, wrapperStyle } from './select-input.styles';
+/**
+ * @deprecated Use `import { Select } from '@volvo-cars/react-forms'` instead. See [Select](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-select--docs)
+ */
 export const SelectInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -101,2 +104,3 @@ let {
   loading: bool,
+  // @ts-ignore
   children: node,
@@ -103,0 +107,0 @@ isValid: bool,

dist/esm/components/slider/index.js

@@ -360,2 +360,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 SliderComponent.displayName = 'Slider';
+
+/**
+ * @deprecated Use `import { RangeSlider } from '@volvo-cars/react-forms'` instead. See [RangeSlider](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-rangeslider--docs)
+ */
 export const Slider = props => {
@@ -362,0 +366,0 @@ const ComponentWithTheme = withTheme(SliderComponent);

dist/esm/components/spacer/index.js

@@ -6,2 +6,6 @@ import React from 'react';
 import { View } from '../view';
+
+/**
+ * @deprecated Use margin or gaps instead. Read [Layout](https://developer.volvocars.com/design-system/web/?path=/docs/layout-introduction--docs)
+ */
 export function Spacer(_ref) {
@@ -8,0 +12,0 @@ let {

dist/esm/components/spinner/spinner.js

@@ -32,2 +32,6 @@ import React from 'react';
 };
+
+/**
+ * @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
+ */
 export const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
@@ -34,0 +38,0 @@ let {

dist/esm/components/tab-nav-item/index.js

@@ -140,2 +140,5 @@ import _extends from "@babel/runtime/helpers/extends";
 }
+/**
+ * @deprecated
+ */
 export const TabNavItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
@@ -142,0 +145,0 @@ let {

dist/esm/components/tab-nav/index.js

@@ -175,2 +175,5 @@ import _extends from "@babel/runtime/helpers/extends";
 }
+/**
+ * @deprecated Use `<nav>` element instead. See [TabNav](https://developer.volvocars.com/design-system/web/?path=/docs/components-tabs--docs)
+ */
 export const TabNav = /*#__PURE__*/forwardRef((_ref7, ref) => {
@@ -246,6 +249,9 @@ let {
   /** A JSX node */
+  // @ts-ignore
   children: PropTypes.node,
   /** A JSX node sticky to the left */
+  // @ts-ignore
   stickyChildrenLeft: PropTypes.node,
   /** A JSX node sticky to the right */
+  // @ts-ignore
   stickyChildrenRight: PropTypes.node,
@@ -252,0 +258,0 @@ /** Which viewports to show the back button on */

dist/esm/components/text-area/text-area.js

@@ -12,2 +12,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import { defaultStyles, labelStyle, wrapperStyle } from './text-area.style';
+/**
+ * @deprecated Use `import { TextArea } from '@volvo-cars/react-forms'` instead. See [TextArea](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-textarea--docs)
+ */
 export const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -14,0 +17,0 @@ let {

dist/esm/components/text-input/text-input.js

@@ -101,2 +101,6 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+
+/**
+ * @deprecated Use `import { TextInput } from '@volvo-cars/react-forms'` instead. See [TextInput](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-input-textinput--docs)
+ */
 export const TextInput = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
@@ -103,0 +107,0 @@ let {

dist/esm/components/text/text.js

@@ -14,2 +14,5 @@ import _extends from "@babel/runtime/helpers/extends";
 const defaultSubStyle = 'standard';
+/**
+ * @deprecated Use proper semantic elements instead like heading, paragraph, etc. See [Typography](https://developer.volvocars.com/design-system/web/?path=/docs/typography-introduction--docs)
+ */
 export const Text = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -16,0 +19,0 @@ let {

dist/esm/components/toggle/index.js

@@ -118,2 +118,6 @@ import _extends from "@babel/runtime/helpers/extends";
 };
+/**
+ * @deprecated Use `<button role="switch">` instead. See [Switch](https://developer.volvocars.com/design-system/web/?path=/docs/components-switch--docs)
+ */
+
 export const Toggle = /*#__PURE__*/forwardRef((_ref6, ref) => {
@@ -120,0 +124,0 @@ let {

dist/esm/components/view/view.js

@@ -8,2 +8,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Spacer } from '../spacer';
+/**
+ * @deprecated Use a `<div className="flex-(col|row)">` element instead
+ */
 export const View = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -10,0 +13,0 @@ let {

dist/esm/styling/style-provider.js

 import React, { useContext } from 'react';
 import { RendererContext, RendererProvider } from 'react-fela';
 import { styleRenderer } from './style-renderer';
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
 const clientRenderer = styleRenderer({
@@ -5,0 +7,0 @@ wrapHoverWithMediaHover: true

dist/esm/styling/style-renderer.js

@@ -76,2 +76,3 @@ import { assignStyle } from 'css-in-js-utils';
   const options = rest || {};
+  // eslint-disable-next-line testing-library/render-result-naming-convention
   const renderer = createRenderer({
@@ -78,0 +79,0 @@ ...options,

dist/esm/styling/theme-picker.js

@@ -43,3 +43,4 @@ import React, { useContext } from 'react';
   variant: PropTypes.oneOf(['light', 'dark']),
+  // @ts-ignore
   children: PropTypes.node.isRequired
 };

dist/esm/utils/merge.js

 // TODO: Fix eslint issues the next time this file is edited.
-/* eslint-disable prefer-rest-params */
+
 /*!
@@ -4,0 +4,0 @@ * Deep merge two or more objects together.

dist/styling/style-provider.js

@@ -11,3 +11,4 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// eslint-disable-next-line testing-library/render-result-naming-convention
 const clientRenderer = (0, _styleRenderer.styleRenderer)({
@@ -14,0 +15,0 @@ wrapHoverWithMediaHover: true

dist/styling/style-renderer.js

@@ -83,2 +83,3 @@ "use strict";
   const options = rest || {};
+  // eslint-disable-next-line testing-library/render-result-naming-convention
   const renderer = (0, _fela.createRenderer)({
@@ -85,0 +86,0 @@ ...options,

dist/styling/theme-picker.js

@@ -14,3 +14,3 @@ "use strict";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ThemePicker = _ref => {
@@ -54,3 +54,4 @@ let {
   variant: _propTypes.default.oneOf(['light', 'dark']),
+  // @ts-ignore
   children: _propTypes.default.node.isRequired
 };

dist/themes/buildTypeScale.d.ts

@@ -0,1 +1,2 @@
+import { CurrentTheme } from '../types/shared';
 /**
@@ -5,2 +6,2 @@ Makes all sub-style variants inherit from the
 */
-export declare const buildTypeScale: (typeScale: any) => Record<import("../types/shared").TypeVariants, any>;
+export declare const buildTypeScale: (typeScale: any) => CurrentTheme["typeScale"];

dist/themes/getBreakpoints.d.ts

@@ -0,1 +1,2 @@
+import { CurrentTheme } from '../types/shared';
 export declare const breakpointSizes: {
@@ -6,2 +7,2 @@ m: number;
 };
-export declare const breakpoints: import("../types/shared").ThemeBreakpoints;
+export declare const breakpoints: CurrentTheme["breakpoints"];

dist/utils/helpers.d.ts

@@ -19,5 +19,5 @@ declare global {
 export declare const getLinkRel: ({ href, target, rel, }: {
-    href?: string | undefined;
-    target?: string | undefined;
-    rel?: string | undefined;
+    href?: string;
+    target?: string;
+    rel?: string;
 }) => string | undefined;

dist/utils/merge.js

@@ -8,3 +8,3 @@ "use strict";
 // TODO: Fix eslint issues the next time this file is edited.
-/* eslint-disable prefer-rest-params */
+
 /*!
@@ -11,0 +11,0 @@ * Deep merge two or more objects together.

package.json

 {
   "name": "vcc-ui",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "license": "UNLICENSED",
@@ -31,2 +31,3 @@ "description": "A React library for building user interfaces at Volvo Cars",
     "types:check": "tsc -b tsconfig.src-check.json tsconfig.tests.json --verbose",
+    "prepare-publish": "yarn pack && tar xfvz package.tgz --strip 1 package/package.json && rm package.tgz",
     "clean": "rm -rf .turbo dist docs && rm -rf *.tsbuildinfo"
@@ -64,14 +65,14 @@ },
   "devDependencies": {
-    "@babel/cli": "7.23.0",
+    "@babel/cli": "7.24.8",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-transform-modules-commonjs": "7.23.0",
-    "@babel/plugin-transform-runtime": "7.23.2",
+    "@babel/plugin-transform-modules-commonjs": "7.24.8",
+    "@babel/plugin-transform-runtime": "7.24.7",
     "@babel/polyfill": "7.12.1",
-    "@babel/preset-env": "7.23.2",
-    "@babel/preset-react": "7.22.15",
-    "@babel/preset-typescript": "7.23.2",
-    "@storybook/react": "7.5.1",
-    "@types/react": "18.2.22",
-    "@vcc/docs-utils": "workspace:*",
-    "@volvo-cars/browserslist-config": "workspace:*",
+    "@babel/preset-env": "7.24.8",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
+    "@storybook/react": "8.1.11",
+    "@types/react": "18.3.4",
+    "@vcc/docs-utils": "0.0.0",
+    "@volvo-cars/browserslist-config": "1.4.4",
     "babel-core": "7.0.0-bridge.0",
@@ -81,15 +82,15 @@ "babel-loader": "9.1.3",
     "chromatic-cli": "1.0.0",
-    "core-js": "3.33.1",
-    "cpx": "1.5.0",
+    "core-js": "3.37.1",
+    "cpx2": "7.0.1",
     "fela-monolithic": "12.2.1",
-    "fs-extra": "11.1.1",
-    "glob": "10.3.10",
-    "jsdom": "22.1.0",
+    "fs-extra": "11.2.0",
+    "glob": "11.0.0",
+    "jsdom": "24.1.3",
     "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-docgen": "7.0.0",
+    "react": "18.3.1",
+    "react-docgen": "7.0.3",
     "react-docgen-typescript": "2.2.2",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "shelljs": "0.8.5",
-    "typescript": "5.2.2"
+    "typescript": "5.5.4"
   },
@@ -102,2 +103,2 @@ "browserslist": [
   }
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

547377

increased by2.25%

Lines of code

15654

increased by1.69%

No dependency changes