@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/FilterTag/FilterTag.js

@@ -1,2 +1,66 @@
-import e,{useState as o,useCallback as l}from"react";import{useDropdown as n}from"../../hooks/useDropdown.js";import"../../hooks/useFocusVisible.js";import{buildClassnames as r}from"../../utils/buildClassnames.js";import"uid/secure";import{colors as t}from"../../theme/modules/colors.js";import{Container as a,GroupLabel as s,CrossIcon as c,MainIcon as m,Content as i,Header as d}from"./styled.js";import{useHandleFocus as u}from"../Popover/hooks/useHandleFocus.js";import{Text as p}from"../Text/Text.js";import{AnimatedDropdown as w}from"../AnimatedDropdown/AnimatedDropdown.js";const h=e=>({filterTagDropdown:e?`${e}-filter-tag-dropdown`:void 0,container:e?`${e}-container`:void 0,cross:e?`${e}-cross`:void 0}),E=({className:E,e2eClassName:f,label:b,text:k,iconSlot:v,fill:C=t.secondary.blue.base,content:D,footer:g,header:j,onClickAway:y,onClick:S,shouldCloseOnClickAway:A=!0})=>{const N=h(E),$=h(f),[x,T]=o(null),[B,F]=o(null),{shouldShowDropdown:K,toggleShouldShowDropdown:z,closeDropdown:H}=n({anchorElement:x}),{handleKeyDown:I}=u({popperElement:B,anchorElement:x,onClose:H}),O=l((e=>{K?H():z(),y&&K&&y(e)}),[K,H,z,y]),P=l((e=>{y&&y(e,H),A&&H()}),[y,H,A]);return!D?e.createElement(a,{className:r([null==N?void 0:N.container,null==$?void 0:$.container]),onClick:S},b&&e.createElement(s,{variant:"subheadingSmallBold"},`${b}:`),e.createElement(p,null,k),e.createElement(c,{className:r([null==N?void 0:N.cross,null==$?void 0:$.cross]),name:"cross",size:"base",color:t.neutral.ink.base})):e.createElement(w,{className:N.filterTagDropdown,shouldShowDropdown:K,onClickAway:P,cta:e.createElement(a,{className:N.container,onClick:O,ref:T},b&&e.createElement(s,{variant:"subheadingSmallBold"},`${b}:`),e.createElement(p,null,k),e.createElement(m,{color:t.neutral.ink.base,name:"downArrow",$shouldShow:K}))},e.createElement(i,{ref:F,onKeyDown:I},e.createElement(d,{color:C},j||e.createElement(e.Fragment,null,v,e.createElement(p,{variant:"bodyBold"},b))),D,g))};export{E as FilterTag};
+import React, { useState, useCallback } from 'react';
+import { useDropdown } from '../../hooks/useDropdown.js';
+import '../../hooks/useFocusVisible.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { colors } from '../../theme/modules/colors.js';
+import { Container, GroupLabel, CrossIcon as StyledCrossIcon, MainIcon, Content, Header } from './styled.js';
+import { useHandleFocus } from '../Popover/hooks/useHandleFocus.js';
+import { Text } from '../Text/Text.js';
+import { AnimatedDropdown } from '../AnimatedDropdown/AnimatedDropdown.js';
+
+const generateClassNames = (prefix) => ({
+    filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,
+    container: prefix ? `${prefix}-container` : undefined,
+    cross: prefix ? `${prefix}-cross` : undefined,
+});
+const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colors.secondary.blue.base, content, footer, header, onClickAway, onClick, shouldCloseOnClickAway = true, }) => {
+    const classNames = generateClassNames(className);
+    const e2eClassNames = generateClassNames(e2eClassName);
+    const [anchorElement, setAnchorElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({
+        anchorElement,
+    });
+    const { handleKeyDown } = useHandleFocus({
+        popperElement,
+        anchorElement,
+        onClose: closeDropdown,
+    });
+    const handleClick = useCallback((event) => {
+        if (shouldShowDropdown)
+            closeDropdown();
+        else
+            toggleShouldShowDropdown();
+        if (onClickAway && shouldShowDropdown)
+            onClickAway(event);
+    }, [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway]);
+    const handleClickAway = useCallback((event) => {
+        // Escape hatch to apply custom behavior when clicked away
+        if (onClickAway)
+            onClickAway(event, closeDropdown);
+        // Default clickAway behavior (closes the dropdown)
+        if (shouldCloseOnClickAway)
+            closeDropdown();
+    }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
+    const shouldShowSimple = !content;
+    if (shouldShowSimple) {
+        return (React.createElement(Container, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), onClick: onClick },
+            label && React.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+            React.createElement(Text, null, text),
+            React.createElement(StyledCrossIcon, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.cross, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.cross]), name: "cross", size: "base", color: colors.neutral.ink.base })));
+    }
+    return (React.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React.createElement(Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
+            label && React.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+            React.createElement(Text, null, text),
+            React.createElement(MainIcon, { color: colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
+        React.createElement(Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
+            React.createElement(Header, { color: fill }, header || (React.createElement(React.Fragment, null,
+                iconSlot,
+                React.createElement(Text, { variant: "bodyBold" }, label)))),
+            content,
+            footer)));
+};
+
+export { FilterTag };
 //# sourceMappingURL=FilterTag.js.map

package/dist/components/FilterTag/FilterTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterTag.js","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":[null],"names":["generateClassNames","prefix","filterTagDropdown","undefined"],"mappings":"okBAwBC,MAAAA,EAAAC,IAAA,CAQDC,kBAAaD,EAaV,GAAAA,6BAAAE"}
+{"version":3,"file":"FilterTag.js","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":[null],"names":["CrossIcon","Dropdown"],"mappings":"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"}

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

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

package/dist/components/FilterTag/styled.cjs

@@ -1,55 +1,36 @@
-"use strict";var e=require("styled-components"),r=require("../../theme/modules/colors.cjs"),t=require("../BaseContainer/BaseContainer.cjs"),o=require("../Text/Text.cjs");require("react"),require("react-transition-group"),require("../AnimatedDropdown/styled.cjs");var s=require("../../tempIcons/CrossIcon.cjs"),i=require("../../tempIcons/DownArrowIcon.cjs"),n=require("../../theme/modules/sizes.cjs"),a=require("../../theme/index.cjs");function l(e){return e&&e.__esModule?e:{default:e}}var c=l(e);const d=c.default(t.BaseContainer).attrs({as:"button"})`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: ${r.colors.neutral.grey.base};
-  padding: 4px 8px;
-  cursor: pointer;
+'use strict';
 
-  border: 1px solid ${r.colors.neutral.grey.dark};
-  border-radius: 4px;
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var Text = require('../Text/Text.cjs');
+require('react');
+require('react-transition-group');
+require('../AnimatedDropdown/styled.cjs');
+var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
+var DownArrowIcon = require('../../tempIcons/DownArrowIcon.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var index = require('../../theme/index.cjs');
 
-  svg {
-    width: ${n.sizes.base};
-    height: ${n.sizes.base};
-  }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px ${a.theme.colors.secondary.blue.light};
-  }
-`,u=c.default(o.Text)`
-  user-select: none;
-`,x=c.default(u)`
-  margin-right: 4px;
-`,p=c.default(i.DownArrowIcon)`
-  margin-left: 4px;
-  transform: rotate(${e=>e.$shouldShow?"180deg":"0"});
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  width: 10px;
-  height: 10px;
-`,g=c.default(s.CrossIcon)`
-  margin-left: 4px;
-  height: 10px;
-  width: 10px;
-`,f=c.default(t.BaseContainer)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-`,h=c.default(t.BaseContainer)`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 12px 18px;
-  border-bottom: 1px solid ${r.colors.neutral.grey.base};
+const Container = styled__default.default(BaseContainer.BaseContainer).attrs({
+    as: 'button',
+}).withConfig({ displayName: "vui--Container", componentId: "vui--1tebbdi" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.sizes.base};height:${sizes.sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+const NonSelectableText = styled__default.default(Text.Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--qz697a" }) `user-select:none;`;
+const GroupLabel = styled__default.default(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--17i198i" }) `margin-right:4px;`;
+const MainIcon = styled__default.default(DownArrowIcon.DownArrowIcon).withConfig({ displayName: "vui--MainIcon", componentId: "vui--rxq762" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
+const StyledCrossIcon = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--1o2zyml" }) `margin-left:4px;height:10px;width:10px;`;
+const Content = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--6n2anv" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
+const Header = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n9war0" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes.sizes[5]};height:${sizes.sizes[5]};margin-right:10px;}`;
 
-  svg {
-    color: ${({color:e})=>e};
-    width: ${n.sizes[5]};
-    height: ${n.sizes[5]};
-    margin-right: 10px;
-  }
-`;exports.Text=o.Text,exports.Container=d,exports.Content=f,exports.CrossIcon=g,exports.GroupLabel=x,exports.Header=h,exports.MainIcon=p;
+exports.Text = Text.Text;
+exports.Container = Container;
+exports.Content = Content;
+exports.CrossIcon = StyledCrossIcon;
+exports.GroupLabel = GroupLabel;
+exports.Header = Header;
+exports.MainIcon = MainIcon;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":[null],"names":["styled","default","BaseContainer","attrs","as","colors","neutral","grey","base"],"mappings":"yfAkDEA,EAAAC,QAAAC,iBAAAC,MAAA,CAEFC,GAAA,UAMA;;;;sBAyBEC,SACgBC,QAAAC,KAAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":[null],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAYM,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CACT,QAAA,EAAAA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAGA,uBAAM,CAACM,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,mBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}

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

@@ -14,4 +14,3 @@ declare const Header: import("styled-components").StyledComponent<"div", any, {
     color: string;
 }, never>;
 export { Container, Text, AnimatedDropdown as Dropdown, GroupLabel, Content, Header, MainIcon, StyledCrossIcon as CrossIcon, };
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/FilterTag/styled.js

@@ -1,55 +1,24 @@
-import o from"styled-components";import{colors as t}from"../../theme/modules/colors.js";import{BaseContainer as e}from"../BaseContainer/BaseContainer.js";import{Text as r}from"../Text/Text.js";import"react";import"react-transition-group";import"../AnimatedDropdown/styled.js";import{CrossIcon as i}from"../../tempIcons/CrossIcon.js";import{DownArrowIcon as s}from"../../tempIcons/DownArrowIcon.js";import{sizes as n}from"../../theme/modules/sizes.js";import{theme as a}from"../../theme/index.js";const p=o(e).attrs({as:"button"})`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: ${t.neutral.grey.base};
-  padding: 4px 8px;
-  cursor: pointer;
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { Text } from '../Text/Text.js';
+import 'react';
+import 'react-transition-group';
+import '../AnimatedDropdown/styled.js';
+import { CrossIcon } from '../../tempIcons/CrossIcon.js';
+import { DownArrowIcon } from '../../tempIcons/DownArrowIcon.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import { theme } from '../../theme/index.js';
 
-  border: 1px solid ${t.neutral.grey.dark};
-  border-radius: 4px;
+const Container = styled(BaseContainer).attrs({
+    as: 'button',
+}).withConfig({ displayName: "vui--Container", componentId: "vui--1tebbdi" }) `display:inline-flex;flex-direction:row;align-items:center;background-color:${colors.neutral.grey.base};padding:4px 8px;cursor:pointer;border:1px solid ${colors.neutral.grey.dark};border-radius:4px;svg{width:${sizes.base};height:${sizes.base};}&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
+const NonSelectableText = styled(Text).withConfig({ displayName: "vui--NonSelectableText", componentId: "vui--qz697a" }) `user-select:none;`;
+const GroupLabel = styled(NonSelectableText).withConfig({ displayName: "vui--GroupLabel", componentId: "vui--17i198i" }) `margin-right:4px;`;
+const MainIcon = styled(DownArrowIcon).withConfig({ displayName: "vui--MainIcon", componentId: "vui--rxq762" }) `margin-left:4px;transform:rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});width:10px;height:10px;`;
+const StyledCrossIcon = styled(CrossIcon).withConfig({ displayName: "vui--StyledCrossIcon", componentId: "vui--1o2zyml" }) `margin-left:4px;height:10px;width:10px;`;
+const Content = styled(BaseContainer).withConfig({ displayName: "vui--Content", componentId: "vui--6n2anv" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;`;
+const Header = styled(BaseContainer).withConfig({ displayName: "vui--Header", componentId: "vui--n9war0" }) `display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:12px 18px;border-bottom:1px solid ${colors.neutral.grey.base};svg{color:${({ color }) => color};width:${sizes[5]};height:${sizes[5]};margin-right:10px;}`;
 
-  svg {
-    width: ${n.base};
-    height: ${n.base};
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px ${a.colors.secondary.blue.light};
-  }
-`,m=o(r)`
-  user-select: none;
-`,l=o(m)`
-  margin-right: 4px;
-`,d=o(s)`
-  margin-left: 4px;
-  transform: rotate(${o=>o.$shouldShow?"180deg":"0"});
-
-  width: 10px;
-  height: 10px;
-`,x=o(i)`
-  margin-left: 4px;
-  height: 10px;
-  width: 10px;
-`,c=o(e)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-`,g=o(e)`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 12px 18px;
-  border-bottom: 1px solid ${t.neutral.grey.base};
-
-  svg {
-    color: ${({color:o})=>o};
-    width: ${n[5]};
-    height: ${n[5]};
-    margin-right: 10px;
-  }
-`;export{p as Container,c as Content,x as CrossIcon,l as GroupLabel,g as Header,d as MainIcon,r as Text};
+export { Container, Content, StyledCrossIcon as CrossIcon, GroupLabel, Header, MainIcon, Text };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":[null],"names":["styled","BaseContainer","attrs","as","colors","neutral","grey","base"],"mappings":"wfAkDEA,EAAAC,GAAAC,MAAA,CAEFC,GAAA,UAMA;;;;sBAyBEC,EACgBC,QAAAC,KAAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAYM,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CACT,QAAA,EAAA,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,sGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}

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

@@ -13,4 +13,3 @@ export interface FilterTagProps {
     onClick?: () => void;
     shouldCloseOnClickAway?: boolean;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Grid/index.cjs

@@ -1,6 +1,14 @@
-"use strict";var e=require("styled-components"),s=require("../BaseContainer/BaseContainer.cjs"),r=require("../../theme/modules/sizes.cjs");function t(e){return e&&e.__esModule?e:{default:e}}const i=t(e).default(s.BaseContainer)`
-  display: grid;
-  grid-template-columns: repeat(${({columns:e})=>e}, 1fr);
-  grid-gap: ${({spacing:e="base"})=>e?r.sizes[e]:0};
-`;exports.Grid=i;
+'use strict';
+
+var styled = require('styled-components');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--12w0ynf" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};`;
+
+exports.Grid = Grid;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Grid/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":[null],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOa,MAAA,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}

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

@@ -1,3 +1,2 @@
 import { GridProps } from './types';
 export declare const Grid: import("styled-components").StyledComponent<"div", any, GridProps, never>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Grid/index.js

@@ -1,6 +1,8 @@
-import e from"styled-components";import{BaseContainer as o}from"../BaseContainer/BaseContainer.js";import{sizes as s}from"../../theme/modules/sizes.js";const r=e(o)`
-  display: grid;
-  grid-template-columns: repeat(${({columns:e})=>e}, 1fr);
-  grid-gap: ${({spacing:e="base"})=>e?s[e]:0};
-`;export{r as Grid};
+import styled from 'styled-components';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const Grid = styled(BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--12w0ynf" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};`;
+
+export { Grid };
 //# sourceMappingURL=index.js.map

package/dist/components/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAOa,MAAA,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}

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

@@ -6,4 +6,3 @@ export type GridProps = {
     columns: number;
     spacing?: Size;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Image/Image.cjs

@@ -1,2 +1,52 @@
-"use strict";var e=require("react"),a=require("react-popper"),l=require("react-dom"),r=require("./components/PlaceholderImage.cjs"),t=require("./components/styled.cjs"),s=require("./utils.cjs"),i=require("../../utils/buildClassnames.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var n=o(e);exports.Image=({src:o,alt:d="",className:u,e2eClassName:c,width:m,height:p,previewWidth:h,previewHeight:v,previewPlacement:g="right",previewEnabled:f=!1,placeholder:C,placeholderWidth:w,placeholderHeight:E,disablePlaceholder:b=!1})=>{const I=s.generateClassNames(u),N=s.generateClassNames(c),[P,q]=e.useState(!1),[y,L]=e.useState({isLoaded:!1,isError:!1}),[j,S]=n.default.useState(null),[M,k]=n.default.useState(null),{styles:H,attributes:W}=a.usePopper(j,M,{placement:g,modifiers:[{name:"offset",options:{offset:[0,12]}}]}),_=e.useCallback((()=>f?q(!0):{}),[f]),x=e.useCallback((()=>f?q(!1):{}),[f]),z=!y.isLoaded||y.isError;return n.default.createElement(t.Container,{className:i.buildClassnames([null==I?void 0:I.container,null==N?void 0:N.container,u])},n.default.createElement(t.CommonImage,{src:o,alt:d,className:i.buildClassnames([null==I?void 0:I.image,null==N?void 0:N.image]),width:m,height:p,onLoad:()=>L({isLoaded:!0,isError:!1}),onError:()=>L({isLoaded:!0,isError:!0}),previewEnabled:f,onMouseEnter:_,onMouseLeave:x,style:z?{display:"none"}:{},ref:S}),!b&&z&&(C||n.default.createElement(r.PlaceholderImage,{className:i.buildClassnames([null==I?void 0:I.placeholder,null==N?void 0:N.placeholder]),width:w||m,height:E||p})),P&&l.createPortal(n.default.createElement(t.PreviewImageContainer,{ref:k,style:H.popper,...W.popper,className:i.buildClassnames([null==I?void 0:I.previewImageContainer,null==N?void 0:N.previewImageContainer])},n.default.createElement(t.PreviewImage,{src:o,alt:"",width:h,height:v})),document.body))};
+'use strict';
+
+var React = require('react');
+var reactPopper = require('react-popper');
+var ReactDOM = require('react-dom');
+var PlaceholderImage = require('./components/PlaceholderImage.cjs');
+var styled = require('./components/styled.cjs');
+var utils = require('./utils.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
+    const classNames = utils.generateClassNames(className);
+    const e2eClassNames = utils.generateClassNames(e2eClassName);
+    const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
+    const [imageState, setImageState] = React.useState({ isLoaded: false, isError: false });
+    const [referenceElement, setReferenceElement] = React__default.default.useState(null);
+    const [popperElement, setPopperElement] = React__default.default.useState(null);
+    const { styles, attributes } = reactPopper.usePopper(referenceElement, popperElement, {
+        placement: previewPlacement,
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 12],
+                },
+            },
+        ],
+    });
+    const openImagePreview = React.useCallback(() => (previewEnabled ? setIsPreviewOpen(true) : {}), [previewEnabled]);
+    const closeImagePreview = React.useCallback(() => (previewEnabled ? setIsPreviewOpen(false) : {}), [previewEnabled]);
+    const onLoad = () => setImageState({ isLoaded: true, isError: false });
+    const onError = () => setImageState({ isLoaded: true, isError: true });
+    const isImageHidden = !imageState.isLoaded || imageState.isError;
+    return (React__default.default.createElement(styled.Container, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container, className]) },
+        React__default.default.createElement(styled.CommonImage, { src: src, alt: alt, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
+        !disablePlaceholder &&
+            isImageHidden &&
+            (placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.placeholder, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
+        isPreviewOpen &&
+            ReactDOM.createPortal(React__default.default.createElement(styled.PreviewImageContainer, { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames.buildClassnames([
+                    classNames === null || classNames === undefined ? undefined : classNames.previewImageContainer,
+                    e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.previewImageContainer,
+                ]) },
+                React__default.default.createElement(styled.PreviewImage, { src: src, alt: "", width: previewWidth, height: previewHeight })), document.body)));
+};
+
+exports.Image = Image;
 //# sourceMappingURL=Image.cjs.map

package/dist/components/Image/Image.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":[null],"names":["src","alt","className","e2eClassName","width","height","previewWidth","previewHeight","previewPlacement","previewEnabled","placeholder","placeholderWidth","placeholderHeight","disablePlaceholder","classNames","generateClassNames","e2eClassNames","isPreviewOpen","setIsPreviewOpen","useState","imageState","setImageState","isLoaded","isError","referenceElement","setReferenceElement","React","popperElement","styles","attributes","usePopper","placement","modifiers","name"],"mappings":"2TAeiB,EAAAA,MAAAC,MAAA,GAAAC,YAAAC,eAAAC,QAAAC,SAAAC,eAAAC,gBAAAC,mBAAA,QAAAC,kBAAA,EAAAC,cAAAC,mBAAAC,oBAAAC,sBAAA,MACf,MAAMC,EAAUC,qBAAAb,GACJc,EAAUD,qBAAAZ,IACTc,EAASC,GAACC,EAAAA,UAAA,IACPC,EAAGC,GAAUF,EAAAA,SAAA,CAAAG,UAAA,EAAAC,SAAA,KACfC,EAAWC,GAAAC,EAAAA,QAAAP,SAAA,OACzBQ,KAA8BD,EAAAA,QAAAP,SAAA,OACdS,OAAAA,EAAAC,WAAAA,GAAUC,EAAAA,UAAAN,EAAAG,EAAA,CACTI,UAAAvB,EACCwB,UAAA,CAClB,CAEWC,KAAA"}
+{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":[null],"names":["generateClassNames","useState","React","usePopper","useCallback","Container","buildClassnames","CommonImage","PlaceholderImage","createPortal","PreviewImageContainer","PreviewImage"],"mappings":"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"}

package/dist/components/Image/Image.d.ts

@@ -18,4 +18,3 @@ type ImageProps = {
 };
 export declare const Image: ({ src, alt, className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement, previewEnabled, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder, }: ImageProps) => React.JSX.Element;
 export {};
-//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image/Image.js

@@ -1,2 +1,46 @@
-import e,{useState as r,useCallback as o}from"react";import{usePopper as t}from"react-popper";import{createPortal as l}from"react-dom";import{PlaceholderImage as i}from"./components/PlaceholderImage.js";import{Container as a,CommonImage as s,PreviewImageContainer as n,PreviewImage as d}from"./components/styled.js";import{generateClassNames as m}from"./utils.js";import{buildClassnames as p}from"../../utils/buildClassnames.js";const c=({src:c,alt:h="",className:u,e2eClassName:v,width:f,height:E,previewWidth:g,previewHeight:w,previewPlacement:b="right",previewEnabled:y=!1,placeholder:L,placeholderWidth:N,placeholderHeight:j,disablePlaceholder:C=!1})=>{const I=m(u),P=m(v),[H,M]=r(!1),[S,W]=r({isLoaded:!1,isError:!1}),[x,k]=e.useState(null),[q,z]=e.useState(null),{styles:A,attributes:B}=t(x,q,{placement:b,modifiers:[{name:"offset",options:{offset:[0,12]}}]}),D=o((()=>y?M(!0):{}),[y]),F=o((()=>y?M(!1):{}),[y]),G=!S.isLoaded||S.isError;return e.createElement(a,{className:p([null==I?void 0:I.container,null==P?void 0:P.container,u])},e.createElement(s,{src:c,alt:h,className:p([null==I?void 0:I.image,null==P?void 0:P.image]),width:f,height:E,onLoad:()=>W({isLoaded:!0,isError:!1}),onError:()=>W({isLoaded:!0,isError:!0}),previewEnabled:y,onMouseEnter:D,onMouseLeave:F,style:G?{display:"none"}:{},ref:k}),!C&&G&&(L||e.createElement(i,{className:p([null==I?void 0:I.placeholder,null==P?void 0:P.placeholder]),width:N||f,height:j||E})),H&&l(e.createElement(n,{ref:z,style:A.popper,...B.popper,className:p([null==I?void 0:I.previewImageContainer,null==P?void 0:P.previewImageContainer])},e.createElement(d,{src:c,alt:"",width:g,height:w})),document.body))};export{c as Image};
+import React, { useState, useCallback } from 'react';
+import { usePopper } from 'react-popper';
+import { createPortal } from 'react-dom';
+import { PlaceholderImage } from './components/PlaceholderImage.js';
+import { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled.js';
+import { generateClassNames } from './utils.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+
+const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
+    const classNames = generateClassNames(className);
+    const e2eClassNames = generateClassNames(e2eClassName);
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+    const [imageState, setImageState] = useState({ isLoaded: false, isError: false });
+    const [referenceElement, setReferenceElement] = React.useState(null);
+    const [popperElement, setPopperElement] = React.useState(null);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        placement: previewPlacement,
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 12],
+                },
+            },
+        ],
+    });
+    const openImagePreview = useCallback(() => (previewEnabled ? setIsPreviewOpen(true) : {}), [previewEnabled]);
+    const closeImagePreview = useCallback(() => (previewEnabled ? setIsPreviewOpen(false) : {}), [previewEnabled]);
+    const onLoad = () => setImageState({ isLoaded: true, isError: false });
+    const onError = () => setImageState({ isLoaded: true, isError: true });
+    const isImageHidden = !imageState.isLoaded || imageState.isError;
+    return (React.createElement(Container, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container, className]) },
+        React.createElement(CommonImage, { src: src, alt: alt, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
+        !disablePlaceholder &&
+            isImageHidden &&
+            (placeholder || (React.createElement(PlaceholderImage, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.placeholder, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
+        isPreviewOpen &&
+            createPortal(React.createElement(PreviewImageContainer, { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames([
+                    classNames === null || classNames === undefined ? undefined : classNames.previewImageContainer,
+                    e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.previewImageContainer,
+                ]) },
+                React.createElement(PreviewImage, { src: src, alt: "", width: previewWidth, height: previewHeight })), document.body)));
+};
+
+export { Image };
 //# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":[null],"names":["Image","src","alt","className","e2eClassName","width","height","previewWidth","previewHeight","previewPlacement","previewEnabled","placeholder","placeholderWidth","placeholderHeight","disablePlaceholder","classNames","generateClassNames","e2eClassNames","isPreviewOpen","setIsPreviewOpen","useState","imageState","setImageState","isLoaded","isError","referenceElement","setReferenceElement","React","popperElement","styles","attributes","usePopper","placement","modifiers","name"],"mappings":"6aAeU,MAAAA,EAAO,EAAAC,MAAAC,MAAA,GAAAC,YAAAC,eAAAC,QAAAC,SAAAC,eAAAC,gBAAAC,mBAAA,QAAAC,kBAAA,EAAAC,cAAAC,mBAAAC,oBAAAC,sBAAA,MACf,MAAMC,EAAUC,EAAAb,GACJc,EAAUD,EAAAZ,IACTc,EAASC,GAACC,GAAA,IACPC,EAAGC,GAAUF,EAAA,CAAAG,UAAA,EAAAC,SAAA,KACfC,EAAWC,GAAAC,EAAAP,SAAA,OACzBQ,KAA8BD,EAAAP,SAAA,OACdS,OAAAA,EAAAC,WAAAA,GAAUC,EAAAN,EAAAG,EAAA,CACTI,UAAAvB,EACCwB,UAAA,CAClB,CAEWC,KAAA"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/Image/components/PlaceholderImage.cjs

@@ -1,2 +1,13 @@
-"use strict";function e(e){return e&&e.__esModule?e:{default:e}}var l=e(require("react"));exports.PlaceholderImage=e=>l.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},l.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z",fill:"#CDD1D5"}));
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const PlaceholderImage = (props) => (React__default.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z", fill: "#CDD1D5" })));
+
+exports.PlaceholderImage = PlaceholderImage;
 //# sourceMappingURL=PlaceholderImage.cjs.map

package/dist/components/Image/components/PlaceholderImage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceholderImage.cjs","sources":["../../../../src/components/Image/components/PlaceholderImage.tsx"],"sourcesContent":[null],"names":["props","React","default","createElement","width","height","viewBox","fill","xmlns"],"mappings":"mHAEaA,GAA2BC,EAAAC,QAAGC,qBAgBzCC,MAAA,KAAAC,OAAA,KAAAC,QAAA,YAAAC,KAAA,OAAAC,MAAA,gCAAAR"}
+{"version":3,"file":"PlaceholderImage.cjs","sources":["../../../../src/components/Image/components/PlaceholderImage.tsx"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;;;;AAEO,MAAM,gBAAgB,GAAG,CAAC,KAAU,MACzCA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA;AAET,IAAAA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yNAAyN,EAC3N,IAAI,EAAC,SAAS,EACd,CAAA,CACE;;;;"}

package/dist/components/Image/components/PlaceholderImage.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const PlaceholderImage: (props: any) => React.JSX.Element;
-//# sourceMappingURL=PlaceholderImage.d.ts.map

package/dist/components/Image/components/PlaceholderImage.js

@@ -1,2 +1,7 @@
-import e from"react";const t=t=>e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z",fill:"#CDD1D5"}));export{t as PlaceholderImage};
+import React from 'react';
+
+const PlaceholderImage = (props) => (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.3333 0C22.8 0 24 1.2 24 2.66667V21.3333C24 22.8 22.8 24 21.3333 24H2.66667C1.2 24 0 22.8 0 21.3333V2.66667C0 1.2 1.2 0 2.66667 0H21.3333ZM10.6667 18.0133L7.33333 14L2.66667 20H21.3333L15.3333 12L10.6667 18.0133Z", fill: "#CDD1D5" })));
+
+export { PlaceholderImage };
 //# sourceMappingURL=PlaceholderImage.js.map

package/dist/components/Image/components/PlaceholderImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceholderImage.js","sources":["../../../../src/components/Image/components/PlaceholderImage.tsx"],"sourcesContent":[null],"names":["PlaceholderImage","props","React","createElement","width","height","viewBox","fill","xmlns"],"mappings":"qBAEA,MAAAA,EAAaC,GAA2BC,EAAGC,qBAgBzCC,MAAA,KAAAC,OAAA,KAAAC,QAAA,YAAAC,KAAA,OAAAC,MAAA,gCAAAP"}
+{"version":3,"file":"PlaceholderImage.js","sources":["../../../../src/components/Image/components/PlaceholderImage.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,gBAAgB,GAAG,CAAC,KAAU,MACzC,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA;AAET,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yNAAyN,EAC3N,IAAI,EAAC,SAAS,EACd,CAAA,CACE;;;;"}

package/dist/components/Image/components/styled.cjs

@@ -1,10 +1,18 @@
-"use strict";function e(e){return e&&e.__esModule?e:{default:e}}var o=e(require("styled-components"));const r=o.default.div``,t=o.default.img`
-  box-sizing: border-box;
-  cursor: ${({previewEnabled:e})=>e?"zoom-in":"default"};
-`,a=o.default.div`
-  z-index: 10;
-  background-color: transparent;
-`,n=o.default.img`
-  box-shadow: 0 4px 12px rgba(27, 33, 38, 0.2);
-`;exports.CommonImage=t,exports.Container=r,exports.PreviewImage=n,exports.PreviewImageContainer=a;
+'use strict';
+
+var styled = require('styled-components');
+
+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--yyvmx7" }) ``;
+const CommonImage = styled__default.default.img.withConfig({ displayName: "vui--CommonImage", componentId: "vui--exntyx" }) `box-sizing:border-box;cursor:${({ previewEnabled }) => (previewEnabled ? 'zoom-in' : 'default')};`;
+const PreviewImageContainer = styled__default.default.div.withConfig({ displayName: "vui--PreviewImageContainer", componentId: "vui--jt8oew" }) `z-index:10;background-color:transparent;`;
+const PreviewImage = styled__default.default.img.withConfig({ displayName: "vui--PreviewImage", componentId: "vui--xulm2g" }) `box-shadow:0 4px 12px rgba(27, 33, 38, 0.2);`;
+
+exports.CommonImage = CommonImage;
+exports.Container = Container;
+exports.PreviewImage = PreviewImage;
+exports.PreviewImageContainer = PreviewImageContainer;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Image/components/styled.ts"],"sourcesContent":[null],"names":["Container","styled","div","previewEnabled"],"mappings":"sGAIA,MAAAA,EAAwBC,EAAAA,QAAAC,GAAA;;YAKjB,EAAAC,oBAA2BA,EAAA,UAAA;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Image/components/styled.ts"],"sourcesContent":[null],"names":["styled"],"mappings":";;;;;;;;MAEa,SAAS,GAAGA,uBAAM,CAAC,GAAG;AAEtB,MAAA,WAAW,GAAGA,uBAAM,CAAC,GAAG,CAEzB,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6BAAA,EAAA,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,CAAA;MAG/D,qBAAqB,GAAGA,uBAAM,CAAC,GAAG;MAKlC,YAAY,GAAGA,uBAAM,CAAC,GAAG;;;;;;;"}

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

@@ -4,4 +4,3 @@ export declare const CommonImage: import("styled-components").StyledComponent<"i
 }, never>;
 export declare const PreviewImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PreviewImage: import("styled-components").StyledComponent<"img", any, {}, never>;
-//# sourceMappingURL=styled.d.ts.map