@veeqo/ui 9.0.0-beta-2 → 9.0.0-beta-v2-1

package/dist/components/ToggleButton/styled.cjs

@@ -1,2 +1,49 @@
-"use strict";var e=require("styled-components"),o=require("../../theme/index.cjs");function n(e){return e&&e.__esModule?e:{default:e}}const t=n(e).default.button.withConfig({displayName:"vui--StyledButton",componentId:"vui--xt3hiw"})`user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${o.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({size:e,checked:o})=>{let n="40px",t="24px",r="24px",i="8px",d="16px",c="4px",l="white",s="#CDD1D5",u="#37424D";return"sm"===e&&(n="32px",t="16px",r="16px",i="4px",d="14px",c="2px"),o&&(l="#0079D1",s="#0079D1",u="white"),`\n      --outline-width: ${c};\n\n      height: ${n};\n      padding-left: ${t};\n      padding-right: ${r};\n      border-radius: ${i};\n      font-size: ${d};\n\n      background-color: ${l};\n      border-color: ${s};\n      color: ${u};\n    `}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({checked:e})=>e?"#005A9C":"#FAFAFB"};}&:active{background-color:${({checked:e})=>e?"#005A9C":"#FAFAFB"};border-color:${({checked:e})=>e?"#005A9C":"#0079D1"};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;exports.StyledButton=t;
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const StyledButton = styled__default.default.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--xt3hiw" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+    let height = '40px';
+    let paddingLeft = '24px';
+    let paddingRight = '24px';
+    let borderRadius = '8px';
+    let fontSize = '16px';
+    let outlineWidth = '4px';
+    let backgroundColor = 'white';
+    let borderColor = '#CDD1D5';
+    let color = '#37424D';
+    if (size === 'sm') {
+        height = '32px';
+        paddingLeft = '16px';
+        paddingRight = '16px';
+        borderRadius = '4px';
+        fontSize = '14px';
+        outlineWidth = '2px';
+    }
+    if (checked) {
+        backgroundColor = '#0079D1';
+        borderColor = '#0079D1';
+        color = 'white';
+    }
+    return `
+      --outline-width: ${outlineWidth};
+
+      height: ${height};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      border-radius: ${borderRadius};
+      font-size: ${fontSize};
+
+      background-color: ${backgroundColor};
+      border-color: ${borderColor};
+      color: ${color};
+    `;
+}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};}&:active{background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};border-color:${({ checked }) => (checked ? '#005A9C' : '#0079D1')};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;
+
+exports.StyledButton = StyledButton;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/ToggleButton/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ToggleButton/styled.ts"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,YAAY,GAAGA,uBAAM,CAAC,MAAM,CAOxB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+HAAA,EAAAC,WAAK,CAAC,UAAU,CAAA,8EAAA,EAK7B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI;IACtB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,eAAe,GAAG,OAAO;IAC7B,IAAI,WAAW,GAAG,SAAS;IAC3B,IAAI,KAAK,GAAG,SAAS;IAErB,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;AACrB;AAED,IAAA,IAAI,OAAO,EAAE;QACX,eAAe,GAAG,SAAS;QAC3B,WAAW,GAAG,SAAS;QACvB,KAAK,GAAG,OAAO;AAChB;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;;0BAED,eAAe,CAAA;sBACnB,WAAW,CAAA;eAClB,KAAK,CAAA;KACf;AACH,CAAC,CAAA,oEAAA,EAQqB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAIlD,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CACtD,cAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,yPAAA;;;;"}

package/dist/components/ToggleButton/styled.d.ts

@@ -1,2 +1 @@
 export declare const StyledButton: import("styled-components").StyledComponent<"button", any, any, never>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/ToggleButton/styled.js

@@ -1,2 +1,43 @@
-import o from"styled-components";import{theme as e}from"../../theme/index.js";const n=o.button.withConfig({displayName:"vui--StyledButton",componentId:"vui--xt3hiw"})`user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${e.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({size:o,checked:e})=>{let n="40px",r="24px",t="24px",i="8px",d="16px",c="4px",l="white",p="#CDD1D5",s="#37424D";return"sm"===o&&(n="32px",r="16px",t="16px",i="4px",d="14px",c="2px"),e&&(l="#0079D1",p="#0079D1",s="white"),`\n      --outline-width: ${c};\n\n      height: ${n};\n      padding-left: ${r};\n      padding-right: ${t};\n      border-radius: ${i};\n      font-size: ${d};\n\n      background-color: ${l};\n      border-color: ${p};\n      color: ${s};\n    `}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({checked:o})=>o?"#005A9C":"#FAFAFB"};}&:active{background-color:${({checked:o})=>o?"#005A9C":"#FAFAFB"};border-color:${({checked:o})=>o?"#005A9C":"#0079D1"};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;export{n as StyledButton};
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+
+const StyledButton = styled.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--xt3hiw" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
+    let height = '40px';
+    let paddingLeft = '24px';
+    let paddingRight = '24px';
+    let borderRadius = '8px';
+    let fontSize = '16px';
+    let outlineWidth = '4px';
+    let backgroundColor = 'white';
+    let borderColor = '#CDD1D5';
+    let color = '#37424D';
+    if (size === 'sm') {
+        height = '32px';
+        paddingLeft = '16px';
+        paddingRight = '16px';
+        borderRadius = '4px';
+        fontSize = '14px';
+        outlineWidth = '2px';
+    }
+    if (checked) {
+        backgroundColor = '#0079D1';
+        borderColor = '#0079D1';
+        color = 'white';
+    }
+    return `
+      --outline-width: ${outlineWidth};
+
+      height: ${height};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      border-radius: ${borderRadius};
+      font-size: ${fontSize};
+
+      background-color: ${backgroundColor};
+      border-color: ${borderColor};
+      color: ${color};
+    `;
+}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};}&:active{background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};border-color:${({ checked }) => (checked ? '#005A9C' : '#0079D1')};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;
+
+export { StyledButton };
 //# sourceMappingURL=styled.js.map

package/dist/components/ToggleButton/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ToggleButton/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIa,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAOxB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+HAAA,EAAA,KAAK,CAAC,UAAU,CAAA,8EAAA,EAK7B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI;IACtB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,eAAe,GAAG,OAAO;IAC7B,IAAI,WAAW,GAAG,SAAS;IAC3B,IAAI,KAAK,GAAG,SAAS;IAErB,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;AACrB;AAED,IAAA,IAAI,OAAO,EAAE;QACX,eAAe,GAAG,SAAS;QAC3B,WAAW,GAAG,SAAS;QACvB,KAAK,GAAG,OAAO;AAChB;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;;0BAED,eAAe,CAAA;sBACnB,WAAW,CAAA;eAClB,KAAK,CAAA;KACf;AACH,CAAC,CAAA,oEAAA,EAQqB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAIlD,4BAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CACtD,cAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,yPAAA;;;;"}

package/dist/components/Tooltip/Tooltip.cjs

@@ -1,2 +1,36 @@
-"use strict";var e=require("react"),t=require("react-dom"),r=require("./components/styled.cjs"),a=require("./components/TooltipPopover.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var n=o(e),l=o(t);exports.Tooltip=({children:t,text:o,content:i,config:c,reversed:s=!1,className:u,withTriangle:d,initialShouldShow:m=!1,useReactPortal:p=!0})=>{const[v,f]=e.useState(m),[h,g]=e.useState(null),b=!!o&&o.trim().length>0,$={container:u&&`${u} ${u}-container`,tip:u&&`${u}-tip`,wrap:u&&`${u}-wrap`,triangle:u&&`${u}-triangle`,hoverable:u&&`${u}-hoverable`},w=!(!i&&!b);if(!w)return t;const E=v&&w&&n.default.createElement(a.TooltipPopover,{classNames:$,hoverableElement:h,config:c,reversed:s,withTriangle:d,text:o,content:i});return n.default.createElement(r.Container,{className:$.container},p?l.default.createPortal(E,document.body):E,n.default.createElement(r.Hoverable,{ref:g,className:$.hoverable,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1)},t))};
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var styled = require('./components/styled.cjs');
+var TooltipPopover = require('./components/TooltipPopover.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
+
+const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+    const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
+    const [hoverableElement, setHoverableElement] = React.useState(null);
+    const hasText = text ? text.trim().length > 0 : false;
+    const classNames = {
+        container: className && `${className} ${className}-container`,
+        tip: className && `${className}-tip`,
+        wrap: className && `${className}-wrap`,
+        triangle: className && `${className}-triangle`,
+        hoverable: className && `${className}-hoverable`,
+    };
+    const hasContent = !!(content || hasText);
+    if (!hasContent)
+        return children;
+    const show = () => setShouldShow(true);
+    const hide = () => setShouldShow(false);
+    const tooltipMarkup = shouldShow && hasContent && (React__default.default.createElement(TooltipPopover.TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    return (React__default.default.createElement(styled.Container, { className: classNames.container },
+        useReactPortal ? ReactDOM__default.default.createPortal(tooltipMarkup, document.body) : tooltipMarkup,
+        React__default.default.createElement(styled.Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+};
+
+exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.cjs.map

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":["useState","React","TooltipPopover","Container","ReactDOM","Hoverable"],"mappings":";;;;;;;;;;;;AAQO,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;AAErD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AACzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,aAAa,GAAG,UAAU,IAAI,UAAU,KAC5CC,sBAAA,CAAA,aAAA,CAACC,6BAAc,EAAA,EACb,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACH;IAED,QACED,qCAACE,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AACvC,QAAA,cAAc,GAAGC,yBAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa;QACrFH,sBAAC,CAAA,aAAA,CAAAI,gBAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,2 @@
 import { TooltipProps } from './types';
 export declare const Tooltip: ({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => JSX.Element | null;
-//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.js

@@ -1,2 +1,29 @@
-import e,{useState as t}from"react";import r from"react-dom";import{Container as o,Hoverable as n}from"./components/styled.js";import{TooltipPopover as a}from"./components/TooltipPopover.js";const l=({children:l,text:c,content:i,config:s,reversed:m=!1,className:p,withTriangle:h,initialShouldShow:d=!1,useReactPortal:f=!0})=>{const[u,v]=t(d),[g,$]=t(null),b=!!c&&c.trim().length>0,w={container:p&&`${p} ${p}-container`,tip:p&&`${p}-tip`,wrap:p&&`${p}-wrap`,triangle:p&&`${p}-triangle`,hoverable:p&&`${p}-hoverable`},E=!(!i&&!b);if(!E)return l;const N=u&&E&&e.createElement(a,{classNames:w,hoverableElement:g,config:s,reversed:m,withTriangle:h,text:c,content:i});return e.createElement(o,{className:w.container},f?r.createPortal(N,document.body):N,e.createElement(n,{ref:$,className:w.hoverable,onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1)},l))};export{l as Tooltip};
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Hoverable } from './components/styled.js';
+import { TooltipPopover } from './components/TooltipPopover.js';
+
+const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
+    const [shouldShow, setShouldShow] = useState(initialShouldShow);
+    const [hoverableElement, setHoverableElement] = useState(null);
+    const hasText = text ? text.trim().length > 0 : false;
+    const classNames = {
+        container: className && `${className} ${className}-container`,
+        tip: className && `${className}-tip`,
+        wrap: className && `${className}-wrap`,
+        triangle: className && `${className}-triangle`,
+        hoverable: className && `${className}-hoverable`,
+    };
+    const hasContent = !!(content || hasText);
+    if (!hasContent)
+        return children;
+    const show = () => setShouldShow(true);
+    const hide = () => setShouldShow(false);
+    const tooltipMarkup = shouldShow && hasContent && (React.createElement(TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    return (React.createElement(Container, { className: classNames.container },
+        useReactPortal ? ReactDOM.createPortal(tooltipMarkup, document.body) : tooltipMarkup,
+        React.createElement(Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
+};
+
+export { Tooltip };
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAQO,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;AAErD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AACzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,aAAa,GAAG,UAAU,IAAI,UAAU,KAC5C,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACH;IAED,QACE,oBAAC,SAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AACvC,QAAA,cAAc,GAAG,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa;QACrF,KAAC,CAAA,aAAA,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.cjs

@@ -1,2 +1,45 @@
-"use strict";var e=require("react"),t=require("react-popper"),i=require("./styled.cjs"),r=require("../types.cjs"),a=require("../../../theme/index.cjs");function s(e){return e&&e.__esModule?e:{default:e}}var l=s(e);const n={duration:400,side:r.Sides.TOP,triangleOffset:8,tipMinWidth:60,tipMaxWidth:340};exports.TooltipPopover=({content:r,text:s,hoverableElement:o,config:p,reversed:d,withTriangle:u,classNames:c})=>{const[f,m]=e.useState(null),h={...n,...p},{duration:g,side:x,triangleOffset:M,tipMinWidth:T,tipMaxWidth:W}=h,{styles:q,attributes:v}=t.usePopper(o,f,{placement:`${x}-${d?"end":"start"}`,modifiers:[{name:"offset",options:{offset:[0,10]}}]}),y={...q.popper,zIndex:a.theme.layers.tooltip};return l.default.createElement(i.Tip,{className:c.tip,ref:m,duration:g,triangleOffsetSize:M,style:y,...v.popper,role:"tooltip"},l.default.createElement(i.Wrap,{className:c.wrap,tipMinWidth:T,tipMaxWidth:W},null!=r?r:l.default.createElement(i.TooltipText,null,s)),u&&l.default.createElement(i.Triangle,{id:"veeqo-components-triangle",className:c.triangle}))};
+'use strict';
+
+var React = require('react');
+var reactPopper = require('react-popper');
+var styled = require('./styled.cjs');
+var types = require('../types.cjs');
+var index = require('../../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const defaultConfig = {
+    duration: 400,
+    side: types.Sides.TOP,
+    triangleOffset: 8,
+    tipMinWidth: 60,
+    tipMaxWidth: 340,
+};
+const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
+    const [popperElement, setPopperElement] = React.useState(null);
+    const usedConfig = { ...defaultConfig, ...config };
+    const { duration, side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { styles, attributes } = reactPopper.usePopper(hoverableElement, popperElement, {
+        placement: `${side}-${reversed ? 'end' : 'start'}`,
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 10],
+                },
+            },
+        ],
+    });
+    const tooltipStyles = {
+        ...styles.popper,
+        zIndex: index.theme.layers.tooltip,
+    };
+    return (React__default.default.createElement(styled.Tip, { className: classNames.tip, ref: setPopperElement, duration: duration, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
+        React__default.default.createElement(styled.Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== undefined ? content : React__default.default.createElement(styled.TooltipText, null, text)),
+        withTriangle && React__default.default.createElement(styled.Triangle, { id: "veeqo-components-triangle", className: classNames.triangle })));
+};
+
+exports.TooltipPopover = TooltipPopover;
 //# sourceMappingURL=TooltipPopover.cjs.map

package/dist/components/Tooltip/components/TooltipPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPopover.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":[null],"names":["Sides","useState","usePopper","theme","React","Tip","Wrap","TooltipText","Triangle"],"mappings":";;;;;;;;;;;;AAOA,MAAM,aAAa,GAAY;AAC7B,IAAA,QAAQ,EAAE,GAAG;IACb,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;AAClD,IAAA,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAE/E,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAGC,qBAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAe,CAAA;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAChB,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,UAAG,EAAA,EACF,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAChB,GAAA,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;QAEdD,sBAAC,CAAA,aAAA,CAAAE,WAAI,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EACjF,EAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,OAAO,GAAIF,sBAAA,CAAA,aAAA,CAACG,kBAAW,EAAA,IAAA,EAAE,IAAI,CAAe,CACxC;AACN,QAAA,YAAY,IAAIH,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAI,CAAA,CACxF;AAEV;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { TooltipPopoverProps } from './types';
 export declare const TooltipPopover: ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }: TooltipPopoverProps) => React.JSX.Element;
-//# sourceMappingURL=TooltipPopover.d.ts.map

package/dist/components/Tooltip/components/TooltipPopover.js

@@ -1,2 +1,39 @@
-import e,{useState as t}from"react";import{usePopper as i}from"react-popper";import{Tip as r,Wrap as o,TooltipText as n,Triangle as a}from"./styled.js";import{Sides as s}from"../types.js";import{theme as l}from"../../../theme/index.js";const p={duration:400,side:s.TOP,triangleOffset:8,tipMinWidth:60,tipMaxWidth:340},m=({content:s,text:m,hoverableElement:d,config:f,reversed:c,withTriangle:h,classNames:u})=>{const[g,x]=t(null),M={...p,...f},{duration:W,side:y,triangleOffset:E,tipMinWidth:N,tipMaxWidth:O}=M,{styles:j,attributes:v}=i(d,g,{placement:`${y}-${c?"end":"start"}`,modifiers:[{name:"offset",options:{offset:[0,10]}}]}),b={...j.popper,zIndex:l.layers.tooltip};return e.createElement(r,{className:u.tip,ref:x,duration:W,triangleOffsetSize:E,style:b,...v.popper,role:"tooltip"},e.createElement(o,{className:u.wrap,tipMinWidth:N,tipMaxWidth:O},null!=s?s:e.createElement(n,null,m)),h&&e.createElement(a,{id:"veeqo-components-triangle",className:u.triangle}))};export{m as TooltipPopover};
+import React, { useState } from 'react';
+import { usePopper } from 'react-popper';
+import { Tip, Wrap, TooltipText, Triangle } from './styled.js';
+import { Sides } from '../types.js';
+import { theme } from '../../../theme/index.js';
+
+const defaultConfig = {
+    duration: 400,
+    side: Sides.TOP,
+    triangleOffset: 8,
+    tipMinWidth: 60,
+    tipMaxWidth: 340,
+};
+const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, classNames, }) => {
+    const [popperElement, setPopperElement] = useState(null);
+    const usedConfig = { ...defaultConfig, ...config };
+    const { duration, side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
+    const { styles, attributes } = usePopper(hoverableElement, popperElement, {
+        placement: `${side}-${reversed ? 'end' : 'start'}`,
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 10],
+                },
+            },
+        ],
+    });
+    const tooltipStyles = {
+        ...styles.popper,
+        zIndex: theme.layers.tooltip,
+    };
+    return (React.createElement(Tip, { className: classNames.tip, ref: setPopperElement, duration: duration, triangleOffsetSize: triangleOffset, style: tooltipStyles, ...attributes.popper, role: "tooltip" },
+        React.createElement(Wrap, { className: classNames.wrap, tipMinWidth: tipMinWidth, tipMaxWidth: tipMaxWidth }, content !== null && content !== undefined ? content : React.createElement(TooltipText, null, text)),
+        withTriangle && React.createElement(Triangle, { id: "veeqo-components-triangle", className: classNames.triangle })));
+};
+
+export { TooltipPopover };
 //# sourceMappingURL=TooltipPopover.js.map

package/dist/components/Tooltip/components/TooltipPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPopover.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA,MAAM,aAAa,GAAY;AAC7B,IAAA,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,KAAK,CAAC,GAAG;AACf,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,UAAU,GACU,KAAI;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;AAClD,IAAA,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAE/E,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;AACxE,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAe,CAAA;AAC/D,QAAA,SAAS,EAAE;AACT,YAAA;AACE,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAChB,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG;QACpB,GAAG,MAAM,CAAC,MAAM;AAChB,QAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;KAC7B;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,SAAS,EAAE,UAAU,CAAC,GAAG,EACzB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,cAAc,EAClC,KAAK,EAAE,aAAa,EAChB,GAAA,UAAU,CAAC,MAAM,EACrB,IAAI,EAAC,SAAS,EAAA;QAEd,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EACjF,EAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,OAAO,GAAI,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,EAAE,IAAI,CAAe,CACxC;AACN,QAAA,YAAY,IAAI,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAI,CAAA,CACxF;AAEV;;;;"}

package/dist/components/Tooltip/components/styled.cjs

@@ -1,2 +1,24 @@
-"use strict";var e=require("styled-components"),t=require("../../Text/Text.cjs"),o=require("../../../theme/index.cjs");function i(e){return e&&e.__esModule?e:{default:e}}var p=i(e);const n=p.default.div.withConfig({displayName:"vui--Container",componentId:"vui--t7r6of"})`display:inline-block;`,a=p.default(n).withConfig({displayName:"vui--Hoverable",componentId:"vui--1yesgsr"})``,r=p.default(t.Text).withConfig({displayName:"vui--TooltipText",componentId:"vui--14vro0x"})`color:${o.theme.colors.neutral.grey.lightest};white-space:pre-line;overflow-wrap:break-word;display:inline;`,d=p.default.div.withConfig({displayName:"vui--Triangle",componentId:"vui--yf0fwi"})`background-color:#333;height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:12;`,l=p.default.div.withConfig({displayName:"vui--Tip",componentId:"vui--ll0nnf"})`transition:${({duration:e})=>`opacity ${e}ms`};&.tip-enter{opacity:0;}&.tip-enter-active{opacity:1;}&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`,s=p.default(n).withConfig({displayName:"vui--Wrap",componentId:"vui--1u8lm59"})`font-size:14px;overflow:hidden;padding:16px 20px;border-radius:4px;box-shadow:0 6px 1em -0.5em rgba(0, 0, 0, 0.35);background:#333;color:#fff;z-index:10;min-width:${({tipMinWidth:e})=>e}px;max-width:${({tipMaxWidth:e})=>e}px;`;exports.Container=n,exports.Hoverable=a,exports.Tip=l,exports.TooltipText=r,exports.Triangle=d,exports.Wrap=s;
+'use strict';
+
+var styled = require('styled-components');
+var Text = require('../../Text/Text.cjs');
+var index = require('../../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--t7r6of" }) `display:inline-block;`;
+const Hoverable = styled__default.default(Container).withConfig({ displayName: "vui--Hoverable", componentId: "vui--1yesgsr" }) ``;
+const TooltipText = styled__default.default(Text.Text).withConfig({ displayName: "vui--TooltipText", componentId: "vui--14vro0x" }) `color:${index.theme.colors.neutral.grey.lightest};white-space:pre-line;overflow-wrap:break-word;display:inline;`;
+const Triangle = styled__default.default.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--yf0fwi" }) `background-color:#333;height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:12;`;
+const Tip = styled__default.default.div.withConfig({ displayName: "vui--Tip", componentId: "vui--ll0nnf" }) `transition:${({ duration }) => `opacity ${duration}ms`};&.tip-enter{opacity:0;}&.tip-enter-active{opacity:1;}&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled__default.default(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1u8lm59" }) `font-size:14px;overflow:hidden;padding:16px 20px;border-radius:4px;box-shadow:0 6px 1em -0.5em rgba(0, 0, 0, 0.35);background:#333;color:#fff;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;`;
+
+exports.Container = Container;
+exports.Hoverable = Hoverable;
+exports.Tip = Tip;
+exports.TooltipText = TooltipText;
+exports.Triangle = Triangle;
+exports.Wrap = Wrap;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Tooltip/components/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":[null],"names":["Container","styled","default","div","withConfig","displayName","componentId","Hoverable","TooltipText","Text","theme","colors","neutral","grey","lightest","Triangle","Tip","duration"],"mappings":"qLAcA,MAAAA,EAAiBC,EAAAC,QAAAC,IAAAC,WAAA,CAAAC,YAAA,iBAAAC,YAAA,eAAA,wBAOjBC,EAAcN,EAAAC,QAAAF,GAAAI,WAAA,CAAAC,YAAA,iBAAAC,YAOZ,gBAAA,GAEFE,EAASP,EAAAC,QAAAO,QAAAL,WAAA,CAAAC,YAAA,mBAAAC,YAAA,gBA4BP,SAAAI,QAAAC,OAAAC,QAAAC,KAAAC,yEAEFC,EAAUd,EAAAC,QAAAC,IAAAC,WAAA,CAAAC,YAAA,gBAAAC,YAAA,eAWR,qGAEFU,EAASf,EAAAA,QAAWE,IAAAC,WAAa,CAAGC,YAAa,WAAMC,YAAW,eAAA,cAAA,EAAAW,cAAA,WAAAA"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":[null],"names":["styled","Text","theme"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG;AAI5B,MAAM,SAAS,GAAGA,uBAAM,CAAC,SAAS,CAAC;AAEnC,MAAM,WAAW,GAAGA,uBAAM,CAACC,SAAI,CAAC,CACrB,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAM7C,MAAM,QAAQ,GAAGF,uBAAM,CAAC,GAAG;AAS3B,MAAM,GAAG,GAAGA,uBAAM,CAAC,GAAG,mFACN,CAAC,EAAE,QAAQ,EAAE,KAAK,WAAW,QAAQ,CAAA,EAAA,CAAI;AA6BnD,MAAA,IAAI,GAAGA,uBAAM,CAAC,SAAS,CAAC,CASf,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mKAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,GAAA;;;;;;;;;"}

package/dist/components/Tooltip/components/styled.d.ts

@@ -6,4 +6,3 @@ declare const Triangle: import("styled-components").StyledComponent<"div", any,
 declare const Tip: import("styled-components").StyledComponent<"div", any, TipProps & TriangleProps, never>;
 declare const Wrap: import("styled-components").StyledComponent<"div", any, WrapProps, never>;
 export { Container, TooltipText, Tip, Hoverable, Wrap, Triangle };
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Tooltip/components/styled.js

@@ -1,2 +1,13 @@
-import o from"styled-components";import{Text as t}from"../../Text/Text.js";import{theme as e}from"../../../theme/index.js";const i=o.div.withConfig({displayName:"vui--Container",componentId:"vui--t7r6of"})`display:inline-block;`,p=o(i).withConfig({displayName:"vui--Hoverable",componentId:"vui--1yesgsr"})``,n=o(t).withConfig({displayName:"vui--TooltipText",componentId:"vui--14vro0x"})`color:${e.colors.neutral.grey.lightest};white-space:pre-line;overflow-wrap:break-word;display:inline;`,a=o.div.withConfig({displayName:"vui--Triangle",componentId:"vui--yf0fwi"})`background-color:#333;height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:12;`,r=o.div.withConfig({displayName:"vui--Tip",componentId:"vui--ll0nnf"})`transition:${({duration:o})=>`opacity ${o}ms`};&.tip-enter{opacity:0;}&.tip-enter-active{opacity:1;}&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`,d=o(i).withConfig({displayName:"vui--Wrap",componentId:"vui--1u8lm59"})`font-size:14px;overflow:hidden;padding:16px 20px;border-radius:4px;box-shadow:0 6px 1em -0.5em rgba(0, 0, 0, 0.35);background:#333;color:#fff;z-index:10;min-width:${({tipMinWidth:o})=>o}px;max-width:${({tipMaxWidth:o})=>o}px;`;export{i as Container,p as Hoverable,r as Tip,n as TooltipText,a as Triangle,d as Wrap};
+import styled from 'styled-components';
+import { Text } from '../../Text/Text.js';
+import { theme } from '../../../theme/index.js';
+
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--t7r6of" }) `display:inline-block;`;
+const Hoverable = styled(Container).withConfig({ displayName: "vui--Hoverable", componentId: "vui--1yesgsr" }) ``;
+const TooltipText = styled(Text).withConfig({ displayName: "vui--TooltipText", componentId: "vui--14vro0x" }) `color:${theme.colors.neutral.grey.lightest};white-space:pre-line;overflow-wrap:break-word;display:inline;`;
+const Triangle = styled.div.withConfig({ displayName: "vui--Triangle", componentId: "vui--yf0fwi" }) `background-color:#333;height:16px;width:16px;position:absolute;transform:rotate(45deg);z-index:12;`;
+const Tip = styled.div.withConfig({ displayName: "vui--Tip", componentId: "vui--ll0nnf" }) `transition:${({ duration }) => `opacity ${duration}ms`};&.tip-enter{opacity:0;}&.tip-enter-active{opacity:1;}&[data-popper-placement^='top-start'] > #veeqo-components-triangle{left:8px;bottom:0px;}&[data-popper-placement^='top-end'] > #veeqo-components-triangle{right:8px;bottom:0px;}&[data-popper-placement^='bottom-start'] > #veeqo-components-triangle{left:8px;top:-4px;}&[data-popper-placement^='bottom-end'] > #veeqo-components-triangle{right:8px;top:-4px;}`;
+const Wrap = styled(Container).withConfig({ displayName: "vui--Wrap", componentId: "vui--1u8lm59" }) `font-size:14px;overflow:hidden;padding:16px 20px;border-radius:4px;box-shadow:0 6px 1em -0.5em rgba(0, 0, 0, 0.35);background:#333;color:#fff;z-index:10;min-width:${({ tipMinWidth }) => tipMinWidth}px;max-width:${({ tipMaxWidth }) => tipMaxWidth}px;`;
+
+export { Container, Hoverable, Tip, TooltipText, Triangle, Wrap };
 //# sourceMappingURL=styled.js.map

package/dist/components/Tooltip/components/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":[null],"names":["Container","styled","div","withConfig","displayName","componentId","Hoverable","TooltipText","Text","theme","colors","neutral","grey","lightest","Triangle","Tip","duration"],"mappings":"2HAcA,MAAAA,EAAiBC,EAAAC,IAAAC,WAAA,CAAAC,YAAA,iBAAAC,YAAA,eAAA,wBAOjBC,EAAcL,EAAAD,GAAAG,WAAA,CAAAC,YAAA,iBAAAC,YAOZ,gBAAA,GAEFE,EAASN,EAAAO,GAAAL,WAAA,CAAAC,YAAA,mBAAAC,YAAA,gBA4BP,SAAAI,EAAAC,OAAAC,QAAAC,KAAAC,yEAEFC,EAAUb,EAAAC,IAAAC,WAAA,CAAAC,YAAA,gBAAAC,YAAA,eAWR,qGAEFU,EAASd,EAAWC,IAAAC,WAAa,CAAGC,YAAa,WAAMC,YAAW,eAAA,cAAA,EAAAW,cAAA,WAAAA"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Tooltip/components/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAQA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG;AAI5B,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAEnC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CACrB,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAM7C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG;AAS3B,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,mFACN,CAAC,EAAE,QAAQ,EAAE,KAAK,WAAW,QAAQ,CAAA,EAAA,CAAI;AA6BnD,MAAA,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CASf,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mKAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAChC,aAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,GAAA;;;;"}

package/dist/components/Tooltip/components/types.d.ts

@@ -19,4 +19,3 @@ export interface TriangleProps {
 export type TipProps = Pick<IConfig, 'duration'>;
 export type WrapProps = Pick<IConfig, 'tipMinWidth' | 'tipMaxWidth'>;
 export type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Tooltip/index.d.ts

@@ -1,2 +1 @@
 export { Tooltip } from './Tooltip';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/types.cjs

@@ -1,2 +1,8 @@
-"use strict";var s;exports.Sides=void 0,(s=exports.Sides||(exports.Sides={})).BOTTOM="bottom",s.TOP="top";
+'use strict';
+
+exports.Sides = void 0;
+(function (Sides) {
+    Sides["BOTTOM"] = "bottom";
+    Sides["TOP"] = "top";
+})(exports.Sides || (exports.Sides = {}));
 //# sourceMappingURL=types.cjs.map

package/dist/components/Tooltip/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":[null],"names":["Sides"],"mappings":"aAEA,IAAAA,EAFSA,QAAAA,WAAA,GAETA,EAGCA,QAAAA,QAAAA,cAAA,CAAA,IAFkB,OAAA,SACjBA,EAAW,IAAA"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":[null],"names":["Sides"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHWA,aAAK,KAALA,aAAK,GAGhB,EAAA,CAAA,CAAA;;"}

package/dist/components/Tooltip/types.d.ts

@@ -24,4 +24,3 @@ export interface TooltipProps {
     initialShouldShow?: boolean;
     useReactPortal?: boolean;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Tooltip/types.js

@@ -1,2 +1,8 @@
-var o;!function(o){o.BOTTOM="bottom",o.TOP="top"}(o||(o={}));export{o as Sides};
+var Sides;
+(function (Sides) {
+    Sides["BOTTOM"] = "bottom";
+    Sides["TOP"] = "top";
+})(Sides || (Sides = {}));
+
+export { Sides };
 //# sourceMappingURL=types.js.map

package/dist/components/Tooltip/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":[null],"names":["Sides"],"mappings":"AAAS,IAAAA,GAET,SAAAA,GACEA,EAAiB,OAAA,SACjBA,EAAW,IAAA,KACZ,CAHD,CAGCA,IAAAA,EAAA,CAAA"}
+{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":[null],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHW,KAAK,KAAL,KAAK,GAGhB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/UploadFile/UploadFile.cjs

@@ -1,2 +1,145 @@
-"use strict";var e=require("react"),t=require("./styled.cjs"),l=require("./constants.cjs"),r=require("./components/UploadCopy/UploadCopy.cjs"),a=require("./utils/setInputElFile/setInputElFile.cjs"),n=require("./utils/getValidTypesString/getValidTypesString.cjs"),i=require("./utils/getFileSizeString/getFileSizeString.cjs"),u=require("./utils/getTypePropForInputEl/getTypePropForInputEl.cjs"),s=require("../../hoc/withLabels/styled.cjs"),o=require("../Stack/Stack.cjs"),d=require("./components/UploadFileErrors/UploadFileErrors.cjs"),c=require("./components/UploadedFile/UploadedFile.cjs"),p=require("../../theme/modules/sizes.cjs");function v(e){return e&&e.__esModule?e:{default:e}}var f=v(e);const I=e.forwardRef((({id:v,name:I,maxBytes:m=1e6,format:S=l.FileSizeUnit.MB,fileTypes:g,label:E="Upload file",required:F,disabled:y,...D},T)=>{const A=e.useRef(null);e.useImperativeHandle(T,(()=>A.current),[]);const[L,q]=e.useState(),[_,h]=e.useState(l.InputState.VALID),V=_===l.InputState.INVALID_FORMAT||_===l.InputState.INVALID_FORMAT_AND_SIZE,j=_===l.InputState.INVALID_SIZE||_===l.InputState.INVALID_FORMAT_AND_SIZE,U=i.getFileSizeString({maxBytes:m,format:S}),b=n.getValidTypesString({fileTypes:g}),z=u.getTypePropForInputEl({fileTypes:g}),C=()=>{var e;(null===(e=A.current)||void 0===e?void 0:e.value)&&(A.current.value="")},M=({overMaxSize:e,invalidFormat:t})=>{var r;let a=l.InputState.VALID;t&&!e?a=l.InputState.INVALID_FORMAT:!t&&e?a=l.InputState.INVALID_SIZE:t&&e&&(a=l.InputState.INVALID_FORMAT_AND_SIZE),null===(r=A.current)||void 0===r||r.setCustomValidity(a),h(a)},N=e.useCallback((e=>{if(!e.length)return void M({invalidFormat:!0});const[t]=e,l=t.size>m,[,r]=t.type.split("/"),n=!g.find((e=>e.substring(1)===r));l||n?C():a.setInputElFile({fileList:e,elementId:v}),M({invalidFormat:n,overMaxSize:l}),q(t)}),[g,v,m]),k=e.useCallback((()=>{C(),q(void 0),M({invalidFormat:!1,overMaxSize:!1})}),[]),R=e.useCallback((()=>{var e;const t=null===(e=null==A?void 0:A.current)||void 0===e?void 0:e.files;(null==t?void 0:t.length)&&(null==t?void 0:t.length)>0?N(t):k()}),[k,N]);return e.useEffect((()=>{const e=null==A?void 0:A.current;return null==e||e.addEventListener("change",R),null==e||e.addEventListener("cancel",k),()=>{null==e||e.removeEventListener("change",R),null==e||e.removeEventListener("cancel",k)}}),[R,k]),f.default.createElement(s.RootStack,{spacing:"sm",alignX:"stretch"},f.default.createElement(s.Label,{htmlFor:v},E,f.default.createElement(o.Stack,{spacing:3,alignX:"stretch",style:{paddingTop:p.sizes.sm}},f.default.createElement(s.Hint,null,f.default.createElement("div",null,b),f.default.createElement("div",null,U)),f.default.createElement(t.DropZoneContainer,{onDrop:e=>{e.preventDefault(),e.dataTransfer.files.length&&N(e.dataTransfer.files)},onDragEnter:e=>{var t;e.preventDefault(),null===(t=A.current)||void 0===t||t.focus()},onDragOver:e=>e.preventDefault(),onDragLeave:e=>{var t;e.preventDefault(),null===(t=A.current)||void 0===t||t.blur()}},f.default.createElement(r.UploadCopy,null),f.default.createElement("input",{ref:A,id:v,type:"file",accept:z,name:I,required:F,disabled:y,...D})))),f.default.createElement(o.Stack,{alignX:"stretch",spacing:"sm"},f.default.createElement(c.UploadedFile,{file:L,resetSelection:k,disabled:y}),f.default.createElement(d.UploadFileErrors,{acceptedTypesCopy:V?b:void 0,maxSizeCopy:j?U:void 0})))}));exports.UploadFile=I;
+'use strict';
+
+var React = require('react');
+var styled$1 = require('./styled.cjs');
+var constants = require('./constants.cjs');
+var UploadCopy = require('./components/UploadCopy/UploadCopy.cjs');
+var setInputElFile = require('./utils/setInputElFile/setInputElFile.cjs');
+var getValidTypesString = require('./utils/getValidTypesString/getValidTypesString.cjs');
+var getFileSizeString = require('./utils/getFileSizeString/getFileSizeString.cjs');
+var getTypePropForInputEl = require('./utils/getTypePropForInputEl/getTypePropForInputEl.cjs');
+var styled = require('../../hoc/withLabels/styled.cjs');
+var Stack = require('../Stack/Stack.cjs');
+var UploadFileErrors = require('./components/UploadFileErrors/UploadFileErrors.cjs');
+var UploadedFile = require('./components/UploadedFile/UploadedFile.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const UploadFile = React.forwardRef(({ id, name, maxBytes = 1000000, format = constants.FileSizeUnit.MB, fileTypes, label = 'Upload file', required, disabled, ...otherProps }, outerRef) => {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(outerRef, () => inputRef.current, []);
+    const [file, setFile] = React.useState();
+    const [errorState, setErrorState] = React.useState(constants.InputState.VALID);
+    const isInvalidFormat = errorState === constants.InputState.INVALID_FORMAT || errorState === constants.InputState.INVALID_FORMAT_AND_SIZE;
+    const isOverMaxSize = errorState === constants.InputState.INVALID_SIZE || errorState === constants.InputState.INVALID_FORMAT_AND_SIZE;
+    // Computed properties based on params
+    const maxSizeCopy = getFileSizeString.getFileSizeString({ maxBytes, format });
+    const acceptedTypesCopy = getValidTypesString.getValidTypesString({ fileTypes });
+    const acceptedTypesForInputEl = getTypePropForInputEl.getTypePropForInputEl({ fileTypes });
+    const clearFileSelection = () => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === undefined ? undefined : _a.value)
+            inputRef.current.value = '';
+    };
+    // Tracks error states within the input element itself, using preset
+    // error messages and assigns these to the input component based on the file
+    const setInputValidation = ({ overMaxSize, invalidFormat, }) => {
+        var _a;
+        let error = constants.InputState.VALID;
+        if (invalidFormat && !overMaxSize) {
+            error = constants.InputState.INVALID_FORMAT;
+        }
+        else if (!invalidFormat && overMaxSize) {
+            error = constants.InputState.INVALID_SIZE;
+        }
+        else if (invalidFormat && overMaxSize) {
+            error = constants.InputState.INVALID_FORMAT_AND_SIZE;
+        }
+        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.setCustomValidity(error);
+        setErrorState(error);
+    };
+    // Processes file and updates the UI appropriately:
+    const updateFiles = React.useCallback((files) => {
+        if (!files.length) {
+            setInputValidation({ invalidFormat: true });
+            return;
+        }
+        const [newFile] = files;
+        const hasExceededMaxSize = newFile.size > maxBytes;
+        const [, extension] = newFile.type.split('/');
+        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);
+        const hasInvalidFormat = !isTypeValid;
+        if (hasExceededMaxSize || hasInvalidFormat) {
+            // Empty the inputRef's read-only fileList by clearing the value attribute,
+            // since we have an invalid input.
+            clearFileSelection();
+        }
+        else {
+            // Update the files attribute of the input el, with the new file(s)
+            setInputElFile.setInputElFile({ fileList: files, elementId: id });
+        }
+        setInputValidation({
+            invalidFormat: hasInvalidFormat,
+            overMaxSize: hasExceededMaxSize,
+        });
+        setFile(newFile);
+    }, [fileTypes, id, maxBytes]);
+    // For focussing of input el and updating drop UI
+    const onDragEnter = (event) => {
+        var _a;
+        event.preventDefault();
+        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.focus();
+    };
+    // For unfocussing of input el and updating drop UI
+    const onDragLeave = (event) => {
+        var _a;
+        event.preventDefault();
+        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.blur();
+    };
+    // Prevents default browser behaviour
+    const onDragOver = (event) => event.preventDefault();
+    // Process file when dropped into eligible area
+    const onDrop = (event) => {
+        event.preventDefault();
+        // Prevent reactions on dragging events that do not contain files
+        if (!event.dataTransfer.files.length)
+            return;
+        updateFiles(event.dataTransfer.files);
+    };
+    // Removes input el's files, clears errors and removes file from react component
+    const resetSelection = React.useCallback(() => {
+        clearFileSelection();
+        setFile(undefined);
+        setInputValidation({
+            invalidFormat: false,
+            overMaxSize: false,
+        });
+    }, []);
+    // Updates UI based on a native file input change. Attached via useEffect below
+    const onInputChange = React.useCallback(() => {
+        var _a;
+        const files = (_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.files;
+        if ((files === null || files === undefined ? undefined : files.length) && (files === null || files === undefined ? undefined : files.length) > 0)
+            updateFiles(files);
+        else
+            resetSelection();
+    }, [resetSelection, updateFiles]);
+    React.useEffect(() => {
+        const ref = inputRef === null || inputRef === undefined ? undefined : inputRef.current;
+        ref === null || ref === undefined ? undefined : ref.addEventListener('change', onInputChange);
+        ref === null || ref === undefined ? undefined : ref.addEventListener('cancel', resetSelection);
+        return () => {
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('change', onInputChange);
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', resetSelection);
+        };
+    }, [onInputChange, resetSelection]);
+    return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
+        React__default.default.createElement(styled.Label, { htmlFor: id },
+            label,
+            React__default.default.createElement(Stack.Stack, { spacing: 3, alignX: "stretch", style: { paddingTop: sizes.sizes.sm } },
+                React__default.default.createElement(styled.Hint, null,
+                    React__default.default.createElement("div", null, acceptedTypesCopy),
+                    React__default.default.createElement("div", null, maxSizeCopy)),
+                React__default.default.createElement(styled$1.DropZoneContainer, { onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                    React__default.default.createElement(UploadCopy.UploadCopy, null),
+                    React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })))),
+        React__default.default.createElement(Stack.Stack, { alignX: "stretch", spacing: "sm" },
+            React__default.default.createElement(UploadedFile.UploadedFile, { file: file, resetSelection: resetSelection, disabled: disabled }),
+            React__default.default.createElement(UploadFileErrors.UploadFileErrors, { acceptedTypesCopy: isInvalidFormat ? acceptedTypesCopy : undefined, maxSizeCopy: isOverMaxSize ? maxSizeCopy : undefined }))));
+});
+
+exports.UploadFile = UploadFile;
 //# sourceMappingURL=UploadFile.cjs.map