@reapit/elements 2.2.1 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/foundations#readme",
   "bugs": {
@@ -24,11 +24,11 @@
     "build": "yarn build:dist && yarn build:storybook && yarn build:v3",
     "build:storybook": "cross-env NODE_ENV=production && build-storybook -o public/dist",
     "build:dist": "cross-env NODE_ENV=production && rimraf public/dist && rollup -c",
-    "build:v3": "cross-env NODE_ENV=production && rimraf ./v3 && yarn workspace @reapit/elements run build:dist && cd ../elements && move-file dist/ ../elements-legacy/v3/ && cd ../elements-legacy && cp v3-manifest.js v3/index.js",
+    "build:v3": "cross-env NODE_ENV=production && rimraf ./v3 && yarn workspace @reapit/elements run build:dist && cd ../elements && move-file dist/cjs ../elements-legacy/v3/ && cp dist/index.css ../elements-legacy/v3/index.css",
     "commit": "concurrently \"yarn test --coverage --no-cache --silent --forceExit --detectOpenHandles --runInBand --watch=false && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges\" \"yarn lint\"",
     "conf": "yarn config-manager --namespace cloud --entity elements-legacy --name local --mode fetch",
     "lint": "eslint --cache --ext=ts,tsx,js src --fix",
-    "publish": "yarn npm publish --access public",
+    "publis": "yarn npm publish --access public",
     "release": "serverless deploy",
     "start": "start-storybook -p 6006",
     "test": "cross-env TZ=UTC jest --watch --colors --silent"
@@ -39,18 +39,18 @@
     "chrome 69"
   ],
   "dependencies": {
-    "@linaria/core": "^3.0.0-beta.4",
-    "@linaria/react": "^3.0.0-beta.7",
+    "@linaria/core": "^3.0.0-beta.15",
+    "@linaria/react": "^3.0.0-beta.15",
     "bulma": "^0.9.3",
     "file-saver": "^2.0.5",
-    "formik": "^2.2.6",
+    "formik": "^2.2.9",
     "hardtack": "^4.1.2",
     "himalaya": "^1.1.0",
     "jsonwebtoken": "^8.5.1",
     "move-file-cli": "^2.0.0",
     "papaparse": "^5.3.1",
     "pell": "^1.0.6",
-    "rc-dialog": "^8.5.2",
+    "rc-dialog": "^8.6.0",
     "rc-notification": "^4.5.7",
     "rc-select": "^10.5.1",
     "rc-tooltip": "^4.2.3",
@@ -63,15 +63,15 @@
     "react-image-crop": "8.6.12",
     "react-table": "^7.7.0",
     "react-transition-group": "^4.4.2",
-    "snyk": "^1.662.0"
+    "snyk": "^1.793.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-transform-runtime": "7.14.5",
-    "@babel/runtime": "7.14.6",
-    "@linaria/babel-preset": "^3.0.0-beta.4",
-    "@linaria/shaker": "^3.0.0-beta.8",
-    "@linaria/webpack-loader": "^3.0.0-beta.7",
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-transform-runtime": "7.16.5",
+    "@babel/runtime": "7.16.5",
+    "@linaria/babel-preset": "^3.0.0-beta.15",
+    "@linaria/shaker": "^3.0.0-beta.15",
+    "@linaria/webpack-loader": "^3.0.0-beta.16",
     "@mdx-js/react": "^1.6.22",
     "@reapit/config-manager": "workspace:packages/config-manager",
     "@reapit/foundations-ts-definitions": "workspace:packages/foundations-ts-definitions",
@@ -79,49 +79,49 @@
     "@reapit/ts-scripts": "workspace:packages/ts-scripts",
     "@reapit/ts-types": "workspace:packages/ts-types",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-typescript": "^8.2.3",
-    "@storybook/addon-actions": "^6.4.0-alpha.18",
-    "@storybook/addon-docs": "^6.4.0-alpha.18",
-    "@storybook/addon-essentials": "^6.4.0-alpha.18",
-    "@storybook/addon-links": "^6.4.0-alpha.18",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-docs": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "^6.4.0-alpha.18",
-    "@storybook/addons": "^6.4.0-alpha.18",
-    "@storybook/builder-webpack5": "^6.4.0-alpha.18",
-    "@storybook/cli": "^6.4.0-alpha.18",
+    "@storybook/addon-storysource": "^6.4.9",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/builder-webpack5": "^6.4.9",
+    "@storybook/cli": "^6.4.9",
     "@storybook/csf": "^0.0.2-alpha.0",
-    "@storybook/manager-webpack5": "^6.4.0-alpha.18",
-    "@storybook/react": "^6.4.0-alpha.18",
-    "@storybook/theming": "^6.4.0-alpha.18",
-    "@svgr/rollup": "^5.5.0",
-    "@svgr/webpack": "^5.5.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "concurrently": "^6.2.0",
+    "@storybook/manager-webpack5": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "@storybook/theming": "^6.4.9",
+    "@svgr/rollup": "^6.1.2",
+    "@svgr/webpack": "^6.1.2",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "babel-jest": "^27.4.5",
+    "babel-loader": "^8.2.3",
+    "concurrently": "^6.4.0",
     "cross-env": "^7.0.3",
     "dashify": "2.0.0",
-    "eslint": "7.31.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint": "8.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "fs-extra": "^9.1.0",
-    "jest": "^27.0.6",
+    "jest": "^27.4.5",
     "jest-coverage-badges": "^1.1.2",
     "node-polyfill-webpack-plugin": "^1.1.4",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.5",
     "prettier": "2.2.1",
     "react-is": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "2.53.3",
+    "rollup": "2.61.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-scss": "^3.0.0",
-    "serverless": "^2.52.0",
+    "serverless": "^2.69.1",
     "serverless-s3-deploy": "^0.10.1",
     "serverless-s3-remover": "^0.6.0",
-    "serverless-single-page-app-plugin": "^1.0.2",
-    "tslib": "^2.3.0",
+    "serverless-single-page-app-plugin": "^1.0.4",
+    "tslib": "^2.3.1",
     "typescript": "^4.3.5",
-    "webpack": "^5.45.1"
+    "webpack": "^5.65.0"
   },
   "peerDependencies": {
     "dayjs": "^1.8.19",

package/src/tests/badges/badge-branches.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20" role="img" aria-label="Coverage:branches: 80.27%"><title>Coverage:branches: 80.27%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#dfb317"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:branches</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">80.27%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">80.27%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20" role="img" aria-label="Coverage:branches: 80.59%"><title>Coverage:branches: 80.59%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#dfb317"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:branches</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">80.59%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">80.59%</text></g></svg>

package/src/tests/badges/badge-functions.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20" role="img" aria-label="Coverage:functions: 92.31%"><title>Coverage:functions: 92.31%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#4c1"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:functions</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">92.31%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">92.31%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20" role="img" aria-label="Coverage:functions: 92.36%"><title>Coverage:functions: 92.36%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#4c1"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:functions</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">92.36%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">92.36%</text></g></svg>

package/src/tests/badges/badge-lines.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="20" role="img" aria-label="Coverage:lines: 91.1%"><title>Coverage:lines: 91.1%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="140" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="47" height="20" fill="#4c1"/><rect width="140" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" fill="#fff" textLength="830">Coverage:lines</text><text aria-hidden="true" x="1155" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">91.1%</text><text x="1155" y="140" transform="scale(.1)" fill="#fff" textLength="370">91.1%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20" role="img" aria-label="Coverage:lines: 91.16%"><title>Coverage:lines: 91.16%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" fill="#fff" textLength="830">Coverage:lines</text><text aria-hidden="true" x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">91.16%</text><text x="1185" y="140" transform="scale(.1)" fill="#fff" textLength="430">91.16%</text></g></svg>

package/src/tests/badges/badge-statements.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20" role="img" aria-label="Coverage:statements: 90.87%"><title>Coverage:statements: 90.87%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#4c1"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="1190">Coverage:statements</text><text aria-hidden="true" x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.87%</text><text x="1545" y="140" transform="scale(.1)" fill="#fff" textLength="430">90.87%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20" role="img" aria-label="Coverage:statements: 90.94%"><title>Coverage:statements: 90.94%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#4c1"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="1190">Coverage:statements</text><text aria-hidden="true" x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.94%</text><text x="1545" y="140" transform="scale(.1)" fill="#fff" textLength="430">90.94%</text></g></svg>

package/v3/components/button/__styles__/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const elButtonSize2: import("@linaria/core").LinariaClassName;
+export declare const elButtonSize3: import("@linaria/core").LinariaClassName;
+export declare const elButtonSize4: import("@linaria/core").LinariaClassName;
+export declare const elFloatingButton: import("@linaria/core").LinariaClassName;
+export declare const elButtonGroupAlignLeft: import("@linaria/core").LinariaClassName;
+export declare const elButtonGroupAlignRight: import("@linaria/core").LinariaClassName;
+export declare const elButtonGroupAlignCenter: import("@linaria/core").LinariaClassName;
+export declare const ElButton: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const elButtonHasLeftChevron: import("@linaria/core").LinariaClassName;
+export declare const elButtonHasRightChevron: import("@linaria/core").LinariaClassName;
+export declare const ElButtonGroup: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElButtonGroupInner: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/v3/components/button/button.d.ts

@@ -0,0 +1,25 @@
+import { ButtonHTMLAttributes, FC, HTMLAttributes } from 'react';
+import { Intent } from '../../helpers/intent';
+import { IconNames } from '../icon';
+export declare type ButtonSizeType = 2 | 3 | 4;
+export declare type ButtonGroupAlignment = 'left' | 'right' | 'center';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    intent?: Intent;
+    loading?: boolean;
+    chevronLeft?: boolean;
+    chevronRight?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    /** Deprecated - remains part of API to avoid a breaking change but no longer part of style guide */
+    size?: ButtonSizeType;
+}
+export interface FloatingButtonProps extends ButtonProps {
+    icon: IconNames;
+}
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    alignment?: ButtonGroupAlignment;
+}
+export declare const resolveButtonSize: (size: ButtonSizeType) => string;
+export declare const Button: FC<ButtonProps>;
+export declare const ButtonGroup: FC<ButtonGroupProps>;
+export declare const FloatingButton: FC<FloatingButtonProps>;

package/v3/{cjs/components → components}/card/__styles__/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const elCardContextMenuOpen: string;
-export declare const elCardFocussed: string;
+export declare const elCardContextMenuOpen: import("@linaria/core").LinariaClassName;
+export declare const elCardFocussed: import("@linaria/core").LinariaClassName;
 export declare const ElCardWrap: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
@@ -16,15 +16,15 @@ export declare const ElCardHeading: import("@linaria/core").StyledMeta & import(
 export declare const ElCardSubHeading: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
-export declare const elCardSubHeadingAdditionalExpanded: string;
+export declare const elCardSubHeadingAdditionalExpanded: import("@linaria/core").LinariaClassName;
 export declare const ElCardSubHeadingAdditional: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
-export declare const elCardBodyWrapExpanded: string;
+export declare const elCardBodyWrapExpanded: import("@linaria/core").LinariaClassName;
 export declare const ElCardBodyWrap: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
-export declare const elMobileListToggle: string;
+export declare const elMobileListToggle: import("@linaria/core").LinariaClassName;
 export declare const ElMobileToggle: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
@@ -34,7 +34,7 @@ export declare const ElCardImageWrap: import("@linaria/core").StyledMeta & impor
 export declare const ElCardList: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
-export declare const elCardListMainWrapExpanded: string;
+export declare const elCardListMainWrapExpanded: import("@linaria/core").LinariaClassName;
 export declare const ElCardListMainWrap: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
@@ -44,7 +44,7 @@ export declare const ElCardListHeading: import("@linaria/core").StyledMeta & imp
 export declare const ElCardListSubHeading: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
-export declare const elCardListItemExpanded: string;
+export declare const elCardListItemExpanded: import("@linaria/core").LinariaClassName;
 export declare const ElCardListItem: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/v3/components/form-layout/__styles__/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const ElFormLayout: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElInputWrap: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElInputWrapMed: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const ElInputWrapFull: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/v3/components/form-layout/form-layout.d.ts

@@ -0,0 +1,6 @@
+import React, { FC, HTMLAttributes } from 'react';
+export declare type FormLayoutProps = HTMLAttributes<HTMLDivElement>;
+export declare const FormLayout: FC<FormLayoutProps>;
+export declare const InputWrap: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export declare const InputWrapMed: FC<FormLayoutProps>;
+export declare const InputWrapFull: FC<FormLayoutProps>;

package/v3/components/form-layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './form-layout';
+export * from './__styles__';

package/v3/{cjs/components → components}/grid/__styles__/index.d.ts

@@ -5,3 +5,6 @@ export declare const ElGrid: import("@linaria/core").StyledMeta & import("react"
 export declare const ElCol: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
+export declare const ElColSplit: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/v3/components/grid/__styles__/units.d.ts

@@ -0,0 +1,58 @@
+export declare const elColGap0: import("@linaria/core").LinariaClassName;
+export declare const elColGap1: import("@linaria/core").LinariaClassName;
+export declare const elColGap2: import("@linaria/core").LinariaClassName;
+export declare const elColGap3: import("@linaria/core").LinariaClassName;
+export declare const elColGap4: import("@linaria/core").LinariaClassName;
+export declare const elColGap6: import("@linaria/core").LinariaClassName;
+export declare const elColGap8: import("@linaria/core").LinariaClassName;
+export declare const elColGap10: import("@linaria/core").LinariaClassName;
+export declare const elColGap12: import("@linaria/core").LinariaClassName;
+export declare const elRowGap0: import("@linaria/core").LinariaClassName;
+export declare const elRowGap1: import("@linaria/core").LinariaClassName;
+export declare const elRowGap2: import("@linaria/core").LinariaClassName;
+export declare const elRowGap3: import("@linaria/core").LinariaClassName;
+export declare const elRowGap4: import("@linaria/core").LinariaClassName;
+export declare const elRowGap6: import("@linaria/core").LinariaClassName;
+export declare const elRowGap8: import("@linaria/core").LinariaClassName;
+export declare const elRowGap10: import("@linaria/core").LinariaClassName;
+export declare const elRowGap12: import("@linaria/core").LinariaClassName;
+export declare const elSpan1: import("@linaria/core").LinariaClassName;
+export declare const elSpan2: import("@linaria/core").LinariaClassName;
+export declare const elSpan3: import("@linaria/core").LinariaClassName;
+export declare const elSpan4: import("@linaria/core").LinariaClassName;
+export declare const elSpan5: import("@linaria/core").LinariaClassName;
+export declare const elSpan6: import("@linaria/core").LinariaClassName;
+export declare const elSpan7: import("@linaria/core").LinariaClassName;
+export declare const elSpan8: import("@linaria/core").LinariaClassName;
+export declare const elSpan9: import("@linaria/core").LinariaClassName;
+export declare const elSpan10: import("@linaria/core").LinariaClassName;
+export declare const elSpan11: import("@linaria/core").LinariaClassName;
+export declare const elSpan12: import("@linaria/core").LinariaClassName;
+export declare const elSpan13: import("@linaria/core").LinariaClassName;
+export declare const elSpan14: import("@linaria/core").LinariaClassName;
+export declare const elSpan15: import("@linaria/core").LinariaClassName;
+export declare const elSpan16: import("@linaria/core").LinariaClassName;
+export declare const elSpan17: import("@linaria/core").LinariaClassName;
+export declare const elSpan18: import("@linaria/core").LinariaClassName;
+export declare const elSpan19: import("@linaria/core").LinariaClassName;
+export declare const elSpan20: import("@linaria/core").LinariaClassName;
+export declare const elOffset1: import("@linaria/core").LinariaClassName;
+export declare const elOffset2: import("@linaria/core").LinariaClassName;
+export declare const elOffset3: import("@linaria/core").LinariaClassName;
+export declare const elOffset4: import("@linaria/core").LinariaClassName;
+export declare const elOffset5: import("@linaria/core").LinariaClassName;
+export declare const elOffset6: import("@linaria/core").LinariaClassName;
+export declare const elOffset7: import("@linaria/core").LinariaClassName;
+export declare const elOffset8: import("@linaria/core").LinariaClassName;
+export declare const elOffset9: import("@linaria/core").LinariaClassName;
+export declare const elOffset10: import("@linaria/core").LinariaClassName;
+export declare const elOffset11: import("@linaria/core").LinariaClassName;
+export declare const elOffset12: import("@linaria/core").LinariaClassName;
+export declare const elOffset13: import("@linaria/core").LinariaClassName;
+export declare const elOffset14: import("@linaria/core").LinariaClassName;
+export declare const elOffset15: import("@linaria/core").LinariaClassName;
+export declare const elOffset16: import("@linaria/core").LinariaClassName;
+export declare const elOffset17: import("@linaria/core").LinariaClassName;
+export declare const elOffset18: import("@linaria/core").LinariaClassName;
+export declare const elOffset19: import("@linaria/core").LinariaClassName;
+export declare const elOffset20: import("@linaria/core").LinariaClassName;

package/v3/{esm/components → components}/grid/grid-responsive.d.ts

@@ -7,20 +7,28 @@ export interface GridResponsiveProps extends HTMLAttributes<HTMLElement> {
     colGapTablet?: GridUnitType;
     colGapDesktop?: GridUnitType;
     colGapWideScreen?: GridUnitType;
+    colGapSuperWideScreen?: GridUnitType;
+    colGap4KScreen?: GridUnitType;
     rowGapMobile?: GridUnitType;
     rowGapTablet?: GridUnitType;
     rowGapDesktop?: GridUnitType;
     rowGapWideScreen?: GridUnitType;
+    rowGapSuperWideScreen?: GridUnitType;
+    rowGap4KScreen?: GridUnitType;
 }
 export interface ColResponsiveProps extends HTMLAttributes<HTMLElement> {
     spanMobile?: ColUnitType;
     spanTablet?: ColUnitType;
     spanDesktop?: ColUnitType;
     spanWideScreen?: ColUnitType;
+    spanSuperWideScreen?: ColUnitType;
+    span4KScreen?: ColUnitType;
     offsetMobile?: ColUnitType;
     offsetTablet?: ColUnitType;
     offsetDesktop?: ColUnitType;
     offsetWideScreen?: ColUnitType;
+    offsetSuperWideScreen?: ColUnitType;
+    offset4KScreen?: ColUnitType;
 }
 export declare const getGridClasses: (props: GridResponsiveProps, mediaType: MediaType) => string | null;
 export declare const getColClasses: (props: ColResponsiveProps, mediaType: MediaType) => string | null;

package/v3/{cjs/components → components}/grid/grid.d.ts

@@ -5,3 +5,4 @@ export interface ColProps extends HTMLAttributes<HTMLElement> {
 }
 export declare const Grid: FC<GridProps>;
 export declare const Col: FC<ColProps>;
+export declare const ColSplit: FC<ColProps>;

package/v3/components/icon/__styles__/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const elIconSizeSmallest: import("@linaria/core").LinariaClassName;
+export declare const elIconSizeSmall: import("@linaria/core").LinariaClassName;
+export declare const elIconSizeMedium: import("@linaria/core").LinariaClassName;
+export declare const elIconSizeLarge: import("@linaria/core").LinariaClassName;
+export declare const elIconSizeLargest: import("@linaria/core").LinariaClassName;
+export declare const elIconMenu: import("@linaria/core").LinariaClassName;
+export declare const ElIcon: import("@linaria/core").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;

package/v3/{cjs/components → components}/icon/icons/index.d.ts

@@ -110,4 +110,24 @@ export declare const iconSet: {
     apiDocsInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
     myAppsInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
     webhooksInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    selectInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    devicesInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    doorLockInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    feedAltInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    feedInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    globeInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    htmlInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    logoKeyInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    logoSettingsInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    refreshInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    reportingInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    serverInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    userDeviceInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    userHouseInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    userInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    userAuthInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    foundationsCustomerInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    newCustomerInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    propTechInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
+    webDeveloperInfographic: import("react").MemoExoticComponent<() => JSX.Element>;
 };