@reapit/elements 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/foundations#readme",
   "bugs": {
@@ -24,12 +24,13 @@
     "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/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\"",
+    "build:v3": "cd ./node_modules/@reapit/elements && move-file dist/cjs ../../../v3/ && cp dist/index.css ../../../v3/index.css",
     "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",
-    "release": "serverless deploy",
+    "check": "tsc --noEmit --skipLibCheck",
+    "publish": "yarn npm publish --access public --tag legacy",
+    "release-dev": "serverless deploy",
+    "release": "serverless deploy --stage prod",
     "start": "start-storybook -p 6006",
     "test": "cross-env TZ=UTC jest --watch --colors --silent"
   },
@@ -39,94 +40,115 @@
     "chrome 69"
   ],
   "dependencies": {
-    "@linaria/core": "^3.0.0-beta.4",
-    "@linaria/react": "^3.0.0-beta.7",
-    "bulma": "^0.9.3",
+    "@linaria/core": "^3.0.0-beta.15",
+    "@linaria/react": "^3.0.0-beta.15",
+    "@reapit/elements": "latest",
+    "bulma": "^0.9.4",
     "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",
+    "papaparse": "^5.3.2",
     "pell": "^1.0.6",
-    "rc-dialog": "^8.5.2",
-    "rc-notification": "^4.5.7",
+    "rc-dialog": "^8.9.0",
+    "rc-notification": "^4.6.0",
     "rc-select": "^10.5.1",
     "rc-tooltip": "^4.2.3",
-    "react-datasheet": "^1.4.9",
+    "react-datasheet": "^1.4.12",
     "react-datepicker": "^2.16.0",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-google-map": "^3.1.1",
     "react-google-maps-loader": "4.3.0",
     "react-icons": "^3.11.0",
     "react-image-crop": "8.6.12",
-    "react-table": "^7.7.0",
+    "react-table": "^7.8.0",
     "react-transition-group": "^4.4.2",
-    "snyk": "^1.662.0"
+    "snyk": "^1.980.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",
+    "@linaria/babel-preset": "^3.0.0-beta.15",
+    "@linaria/rollup": "^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",
+    "@reapit/config-manager": "latest",
+    "@reapit/foundations-ts-definitions": "latest",
     "@reapit/storybook-addon-html": "^5.0.1",
-    "@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",
-    "@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/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",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^23.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-docs": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/addon-storysource": "6.5.9",
+    "@storybook/addons": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/cli": "6.5.9",
+    "@storybook/csf": "0.0.1",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/react": "6.5.9",
+    "@storybook/react-docgen-typescript-plugin": "1.0.1",
+    "@storybook/theming": "6.5.9",
+    "@svgr/rollup": "^6.2.1",
+    "@svgr/webpack": "^6.2.1",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.1.2",
+    "@types/node": "14",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "babel-jest": "^28.1.3",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "concurrently": "^6.5.1",
     "cross-env": "^7.0.3",
     "dashify": "2.0.0",
-    "eslint": "7.31.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "dayjs": "^1.11.5",
+    "esbuild-loader": "^2.20.0",
+    "eslint": "8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "fs-extra": "^9.1.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.3",
     "jest-coverage-badges": "^1.1.2",
+    "jest-environment-jsdom": "^29.1.2",
+    "jest-fetch-mock": "^3.0.3",
+    "mini-css-extract-plugin": "^2.6.1",
+    "mockdate": "^3.0.5",
     "node-polyfill-webpack-plugin": "^1.1.4",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.14",
     "prettier": "2.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^17.0.2",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "2.53.3",
+    "rollup": "2.78.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-scss": "^3.0.0",
-    "serverless": "^2.52.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
+    "serverless": "^2.72.3",
+    "serverless-deployment-bucket": "^1.6.0",
     "serverless-s3-deploy": "^0.10.1",
     "serverless-s3-remover": "^0.6.0",
-    "serverless-single-page-app-plugin": "^1.0.2",
-    "tslib": "^2.3.0",
-    "typescript": "^4.3.5",
-    "webpack": "^5.45.1"
+    "serverless-single-page-app-plugin": "^1.0.4",
+    "tslib": "^2.4.0",
+    "typescript": "4.3.5",
+    "webpack": "^5.74.0"
   },
   "peerDependencies": {
     "dayjs": "^1.8.19",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2"
   },

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.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>
+<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: 79.77%"><title>Coverage:branches: 79.77%</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="#e05d44"/><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">79.77%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">79.77%</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.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>
+<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: 87.26%"><title>Coverage:functions: 87.26%</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: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">87.26%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">87.26%</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="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>
+<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: 87.22%"><title>Coverage:lines: 87.22%</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="#dfb317"/><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">87.22%</text><text x="1185" y="140" transform="scale(.1)" fill="#fff" textLength="430">87.22%</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.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>
+<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: 87.26%"><title>Coverage:statements: 87.26%</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="#dfb317"/><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">87.26%</text><text x="1545" y="140" transform="scale(.1)" fill="#fff" textLength="430">87.26%</text></g></svg>

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

@@ -1,16 +1,17 @@
 /// <reference types="react" />
-export declare const elButtonSize2: string;
-export declare const elButtonSize3: string;
-export declare const elButtonSize4: string;
-export declare const elFloatingButton: string;
-export declare const elButtonGroupAlignLeft: string;
-export declare const elButtonGroupAlignRight: string;
-export declare const elButtonGroupAlignCenter: string;
+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 elButtonFixedWidth: 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: string;
-export declare const elButtonHasRightChevron: string;
+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;
 }>;

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

@@ -10,6 +10,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     chevronRight?: boolean;
     fullWidth?: boolean;
     className?: string;
+    fixedWidth?: boolean;
     /** Deprecated - remains part of API to avoid a breaking change but no longer part of style guide */
     size?: ButtonSizeType;
 }

package/v3/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/card/card-components.d.ts

@@ -1,9 +1,9 @@
-import { Dispatch, FC, HTMLAttributes, SetStateAction } from 'react';
+import { Dispatch, FC, HTMLAttributes, SetStateAction, MouseEvent, ReactNode } from 'react';
 import { IconNames } from '../icon';
 import { Intent } from '../../helpers/intent';
 export interface CardListItemProps {
-    listCardItemHeading?: string;
-    listCardItemSubHeading?: string;
+    listCardItemHeading?: ReactNode;
+    listCardItemSubHeading?: ReactNode;
     listCardItemIcon?: IconNames;
     onClick?: () => void;
 }
@@ -17,22 +17,23 @@ export interface CardContextMenuProps extends HTMLAttributes<HTMLDivElement> {
 }
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     hasMainCard?: boolean;
-    mainCardHeading?: string;
-    mainCardSubHeading?: string;
-    mainCardSubHeadingAdditional?: string;
-    mainCardBody?: string;
-    mainCardImgUrl?: string;
+    mainCardHeading?: ReactNode;
+    mainCardSubHeading?: ReactNode;
+    mainCardSubHeadingAdditional?: ReactNode;
+    mainCardBody?: ReactNode;
+    mainCardImgUrl?: ReactNode;
     mainContextMenuItems?: ContextMenuItem[];
     hasListCard?: boolean;
-    listCardHeading?: string;
-    listCardSubHeading?: string;
+    listCardHeading?: ReactNode;
+    listCardSubHeading?: ReactNode;
     listCardItems?: CardListItemProps[];
     listContextMenuItems?: ContextMenuItem[];
     isSelected?: boolean;
 }
-export declare const handleToggleContextMenu: (contextMenuOpen: boolean, setContextMenuOpen: Dispatch<SetStateAction<boolean>>) => () => void;
-export declare const handleToggleMainMobileOpen: (mainMobileOpen: boolean, setMainMobileOpen: Dispatch<SetStateAction<boolean>>) => () => void;
-export declare const handleToggleListMobileOpen: (listMobileOpen: boolean, setListMobileOpen: Dispatch<SetStateAction<boolean>>) => () => void;
-export declare const handleToggleBothMobileOpen: (mainMobileOpen: boolean, setMainMobileOpen: Dispatch<SetStateAction<boolean>>, listMobileOpen: boolean, setListMobileOpen: Dispatch<SetStateAction<boolean>>) => () => void;
+export declare const handleToggleContextMenu: (contextMenuOpen: boolean, setContextMenuOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => void;
+export declare const handleToggleMainMobileOpen: (mainMobileOpen: boolean, setMainMobileOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => void;
+export declare const handleToggleListMobileOpen: (listMobileOpen: boolean, setListMobileOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => void;
+export declare const handleToggleBothMobileOpen: (mainMobileOpen: boolean, setMainMobileOpen: Dispatch<SetStateAction<boolean>>, listMobileOpen: boolean, setListMobileOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => void;
+export declare const handleMouseHover: (hoverIndex: number | null, setHoverIndex: Dispatch<SetStateAction<number | null>>) => () => void;
 export declare const CardContextMenu: FC<CardContextMenuProps>;
 export declare const Card: FC<CardProps>;

package/v3/components/file-input/__styles__/index.d.ts

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

package/v3/components/file-input/file-input.d.ts

@@ -0,0 +1,21 @@
+import React, { ChangeEvent, Dispatch, SetStateAction, MouseEvent } from 'react';
+export interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onFileUpload?: (uploadImageModel: CreateImageUploadModel) => Promise<any | ImageUploadModel>;
+    onFileView?: (base64: string) => void;
+    placeholderText?: string;
+    defaultValue?: string;
+    label?: string;
+    fileName?: string;
+}
+export declare type FileInputWrapped = React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<React.InputHTMLAttributes<HTMLInputElement>>>;
+export interface CreateImageUploadModel {
+    name?: string;
+    imageData?: string;
+}
+export interface ImageUploadModel {
+    Url: string;
+}
+export declare const handleFileChange: (setFileName: Dispatch<SetStateAction<string>>, fileName: string, onFileUpload?: ((uploadImageModel: CreateImageUploadModel) => Promise<string | ImageUploadModel>) | undefined) => (event: ChangeEvent<HTMLInputElement>) => FileReader | undefined;
+export declare const handleFileClear: (setFileName: Dispatch<SetStateAction<string>>) => (event: MouseEvent<HTMLSpanElement>) => void;
+export declare const handleFileView: (onFileView: (fileUrl: string) => void, fileUrl: string) => (event: MouseEvent<HTMLSpanElement>) => void;
+export declare const FileInput: FileInputWrapped;

package/v3/components/file-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './__styles__';
+export * from './file-input';

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const elFormLayoutHasMargin: import("@linaria/core").LinariaClassName;
 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;
 }>;

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

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

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

@@ -1,58 +1,58 @@
-export declare const elColGap0: string;
-export declare const elColGap1: string;
-export declare const elColGap2: string;
-export declare const elColGap3: string;
-export declare const elColGap4: string;
-export declare const elColGap6: string;
-export declare const elColGap8: string;
-export declare const elColGap10: string;
-export declare const elColGap12: string;
-export declare const elRowGap0: string;
-export declare const elRowGap1: string;
-export declare const elRowGap2: string;
-export declare const elRowGap3: string;
-export declare const elRowGap4: string;
-export declare const elRowGap6: string;
-export declare const elRowGap8: string;
-export declare const elRowGap10: string;
-export declare const elRowGap12: string;
-export declare const elSpan1: string;
-export declare const elSpan2: string;
-export declare const elSpan3: string;
-export declare const elSpan4: string;
-export declare const elSpan5: string;
-export declare const elSpan6: string;
-export declare const elSpan7: string;
-export declare const elSpan8: string;
-export declare const elSpan9: string;
-export declare const elSpan10: string;
-export declare const elSpan11: string;
-export declare const elSpan12: string;
-export declare const elSpan13: string;
-export declare const elSpan14: string;
-export declare const elSpan15: string;
-export declare const elSpan16: string;
-export declare const elSpan17: string;
-export declare const elSpan18: string;
-export declare const elSpan19: string;
-export declare const elSpan20: string;
-export declare const elOffset1: string;
-export declare const elOffset2: string;
-export declare const elOffset3: string;
-export declare const elOffset4: string;
-export declare const elOffset5: string;
-export declare const elOffset6: string;
-export declare const elOffset7: string;
-export declare const elOffset8: string;
-export declare const elOffset9: string;
-export declare const elOffset10: string;
-export declare const elOffset11: string;
-export declare const elOffset12: string;
-export declare const elOffset13: string;
-export declare const elOffset14: string;
-export declare const elOffset15: string;
-export declare const elOffset16: string;
-export declare const elOffset17: string;
-export declare const elOffset18: string;
-export declare const elOffset19: string;
-export declare const elOffset20: string;
+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/components/icon/__styles__/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-export declare const elIconSizeSmallest: string;
-export declare const elIconSizeSmall: string;
-export declare const elIconSizeMedium: string;
-export declare const elIconSizeLarge: string;
-export declare const elIconSizeLargest: string;
-export declare const elIconMenu: string;
+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;
 }>;