@veeqo/ui 9.0.0-beta-3 → 9.0.0

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

@@ -29,4 +29,3 @@ export type ViewTabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClic
     /** Context used to add to aria label, (orders or products based on page) */
     ariaContext: string;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/ViewTab/types.js

@@ -1,2 +1,9 @@
-var d;!function(d){d.saved="saved",d.fixed="fixed",d.draft="draft"}(d||(d={}));export{d as ViewTabTypes};
+var ViewTabTypes;
+(function (ViewTabTypes) {
+    ViewTabTypes["saved"] = "saved";
+    ViewTabTypes["fixed"] = "fixed";
+    ViewTabTypes["draft"] = "draft";
+})(ViewTabTypes || (ViewTabTypes = {}));
+
+export { ViewTabTypes };
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":[null],"names":["ViewTabTypes"],"mappings":"AAA6B,IAAAA,GAC7B,SAASA,GAETA,EAAwB,MAAA,QACtBA,EAAe,MAAA,QACfA,EAAe,MAAA,OACf,CALF,CAKEA,IAAeA,EAAA,CAAA"}
+{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":[null],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,YAAY,KAAZ,YAAY,GAIvB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/ViewsContainer/ViewsContainer.cjs

@@ -1,2 +1,24 @@
-"use strict";var e=require("react"),t=require("./styled.cjs"),l=require("./hooks/useSetScrollPosition.cjs");function a(e){return e&&e.__esModule?e:{default:e}}var n=a(e);const r=n.default.forwardRef((({children:a,onClickMenu:r,ariaMenuControls:i,ariaMenuExpanded:o},u)=>{const d=e.useRef(null),{rightDisabled:c,leftDisabled:s,toNextScrollPosition:f,toPrevScrollPosition:S}=l.useSetScrollPosition(d,a);return n.default.createElement(t.Container,{direction:"horizontal",alignY:"center",alignX:"between"},n.default.createElement(t.ViewsWrapper,{ref:d,id:"views",role:"tablist",alignY:"center",direction:"horizontal"},a),n.default.createElement(t.StyledInputGroup,null,(!s||!c)&&n.default.createElement(n.default.Fragment,null,n.default.createElement(t.StyledLeftButton,{id:"left-arrow",iconSlot:n.default.createElement(t.StyledLeftIcon,null),disabled:s,onClick:S,variant:"flat","aria-label":"move views to the left"}),n.default.createElement(t.StyledRightButton,{id:"right-arrow",iconSlot:n.default.createElement(t.StyledRightIcon,null),disabled:c,onClick:f,variant:"flat","aria-label":"move views to the right"})),n.default.createElement(t.StyledMenuButton,{iconSlot:n.default.createElement(t.StyledMenuIcon,null),variant:"flat",onClick:r,"aria-label":"open menu","aria-controls":i,"aria-expanded":o,"aria-haspopup":i?"dialog":void 0,ref:u})))}));exports.ViewsContainer=r;
+'use strict';
+
+var React = require('react');
+var styled = require('./styled.cjs');
+var useSetScrollPosition = require('./hooks/useSetScrollPosition.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ViewsContainer = React__default.default.forwardRef(({ children, onClickMenu, ariaMenuControls, ariaMenuExpanded }, menuRef) => {
+    const viewsRef = React.useRef(null);
+    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } = useSetScrollPosition.useSetScrollPosition(viewsRef, children);
+    return (React__default.default.createElement(styled.Container, { direction: "horizontal", alignY: "center", alignX: "between" },
+        React__default.default.createElement(styled.ViewsWrapper, { ref: viewsRef, id: "views", role: "tablist", alignY: "center", direction: "horizontal" }, children),
+        React__default.default.createElement(styled.StyledInputGroup, null,
+            (!leftDisabled || !rightDisabled) && (React__default.default.createElement(React__default.default.Fragment, null,
+                React__default.default.createElement(styled.StyledLeftButton, { id: "left-arrow", iconSlot: React__default.default.createElement(styled.StyledLeftIcon, null), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
+                React__default.default.createElement(styled.StyledRightButton, { id: "right-arrow", iconSlot: React__default.default.createElement(styled.StyledRightIcon, null), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
+            React__default.default.createElement(styled.StyledMenuButton, { iconSlot: React__default.default.createElement(styled.StyledMenuIcon, null), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))));
+});
+
+exports.ViewsContainer = ViewsContainer;
 //# sourceMappingURL=ViewsContainer.cjs.map

package/dist/components/ViewsContainer/ViewsContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":[null],"names":["React","useRef","useSetScrollPosition","Container","ViewsWrapper","StyledInputGroup","StyledLeftButton","StyledLeftIcon","StyledRightButton","StyledRightIcon","StyledMenuButton","StyledMenuIcon"],"mappings":";;;;;;;;;;MAgBa,cAAc,GAAGA,sBAAK,CAAC,UAAU,CAC5C,CACE,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAsB,EACjF,OAA+B,KAC7B;AACF,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAqC;AACjF,IAAA,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,GAC/EC,yCAAoB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAE1C,IAAA,QACEF,sBAAA,CAAA,aAAA,CAACG,gBAAS,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;QAChEH,sBAAC,CAAA,aAAA,CAAAI,mBAAY,IACX,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,QAAQ,EACf,SAAS,EAAC,YAAY,EAErB,EAAA,QAAQ,CACI;AAEf,QAAAJ,sBAAA,CAAA,aAAA,CAACK,uBAAgB,EAAA,IAAA;AACd,YAAA,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,MAC/BL,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,sBAAC,CAAA,aAAA,CAAAM,uBAAgB,EACf,EAAA,EAAE,EAAC,YAAY,EACf,QAAQ,EAAEN,sBAAC,CAAA,aAAA,CAAAO,qBAAc,EAAG,IAAA,CAAA,EAC5B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,wBAAwB,EACnC,CAAA;gBACFP,sBAAC,CAAA,aAAA,CAAAQ,wBAAiB,EAChB,EAAA,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,sBAAe,EAAA,IAAA,CAAG,EAC7B,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,yBAAyB,EACpC,CAAA,CACD,CACJ;AACD,YAAAT,sBAAA,CAAA,aAAA,CAACU,uBAAgB,EACf,EAAA,QAAQ,EAAEV,sBAAA,CAAA,aAAA,CAACW,qBAAc,EAAG,IAAA,CAAA,EAC5B,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EAAA,YAAA,EACT,WAAW,EACP,eAAA,EAAA,gBAAgB,EAChB,eAAA,EAAA,gBAAgB,mBAChB,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EACtD,GAAG,EAAE,OAAO,GACZ,CACe,CACT;AAEhB,CAAC;;;;"}

package/dist/components/ViewsContainer/ViewsContainer.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { ViewContainerProps } from './types';
 export declare const ViewsContainer: React.ForwardRefExoticComponent<ViewContainerProps & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=ViewsContainer.d.ts.map

package/dist/components/ViewsContainer/ViewsContainer.js

@@ -1,2 +1,18 @@
-import e,{useRef as t}from"react";import{Container as l,ViewsWrapper as a,StyledInputGroup as r,StyledLeftButton as o,StyledLeftIcon as i,StyledRightButton as n,StyledRightIcon as c,StyledMenuButton as s,StyledMenuIcon as d}from"./styled.js";import{useSetScrollPosition as m}from"./hooks/useSetScrollPosition.js";const f=e.forwardRef((({children:f,onClickMenu:u,ariaMenuControls:E,ariaMenuExpanded:h},p)=>{const v=t(null),{rightDisabled:b,leftDisabled:g,toNextScrollPosition:w,toPrevScrollPosition:S}=m(v,f);return e.createElement(l,{direction:"horizontal",alignY:"center",alignX:"between"},e.createElement(a,{ref:v,id:"views",role:"tablist",alignY:"center",direction:"horizontal"},f),e.createElement(r,null,(!g||!b)&&e.createElement(e.Fragment,null,e.createElement(o,{id:"left-arrow",iconSlot:e.createElement(i,null),disabled:g,onClick:S,variant:"flat","aria-label":"move views to the left"}),e.createElement(n,{id:"right-arrow",iconSlot:e.createElement(c,null),disabled:b,onClick:w,variant:"flat","aria-label":"move views to the right"})),e.createElement(s,{iconSlot:e.createElement(d,null),variant:"flat",onClick:u,"aria-label":"open menu","aria-controls":E,"aria-expanded":h,"aria-haspopup":E?"dialog":void 0,ref:p})))}));export{f as ViewsContainer};
+import React, { useRef } from 'react';
+import { Container, ViewsWrapper, StyledInputGroup, StyledLeftButton, StyledLeftIcon, StyledRightButton, StyledRightIcon, StyledMenuButton, StyledMenuIcon } from './styled.js';
+import { useSetScrollPosition } from './hooks/useSetScrollPosition.js';
+
+const ViewsContainer = React.forwardRef(({ children, onClickMenu, ariaMenuControls, ariaMenuExpanded }, menuRef) => {
+    const viewsRef = useRef(null);
+    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } = useSetScrollPosition(viewsRef, children);
+    return (React.createElement(Container, { direction: "horizontal", alignY: "center", alignX: "between" },
+        React.createElement(ViewsWrapper, { ref: viewsRef, id: "views", role: "tablist", alignY: "center", direction: "horizontal" }, children),
+        React.createElement(StyledInputGroup, null,
+            (!leftDisabled || !rightDisabled) && (React.createElement(React.Fragment, null,
+                React.createElement(StyledLeftButton, { id: "left-arrow", iconSlot: React.createElement(StyledLeftIcon, null), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
+                React.createElement(StyledRightButton, { id: "right-arrow", iconSlot: React.createElement(StyledRightIcon, null), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
+            React.createElement(StyledMenuButton, { iconSlot: React.createElement(StyledMenuIcon, null), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))));
+});
+
+export { ViewsContainer };
 //# sourceMappingURL=ViewsContainer.js.map

package/dist/components/ViewsContainer/ViewsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;MAgBa,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,CACE,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAsB,EACjF,OAA+B,KAC7B;AACF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAqC;AACjF,IAAA,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,GAC/E,oBAAoB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAE1C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;QAChE,KAAC,CAAA,aAAA,CAAA,YAAY,IACX,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,QAAQ,EACf,SAAS,EAAC,YAAY,EAErB,EAAA,QAAQ,CACI;AAEf,QAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,IAAA;AACd,YAAA,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,MAC/B,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;gBACE,KAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,EAAE,EAAC,YAAY,EACf,QAAQ,EAAE,KAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA,EAC5B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,wBAAwB,EACnC,CAAA;gBACF,KAAC,CAAA,aAAA,CAAA,iBAAiB,EAChB,EAAA,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,CAAG,EAC7B,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,yBAAyB,EACpC,CAAA,CACD,CACJ;AACD,YAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,cAAc,EAAG,IAAA,CAAA,EAC5B,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EAAA,YAAA,EACT,WAAW,EACP,eAAA,EAAA,gBAAgB,EAChB,eAAA,EAAA,gBAAgB,mBAChB,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EACtD,GAAG,EAAE,OAAO,GACZ,CACe,CACT;AAEhB,CAAC;;;;"}

package/dist/components/ViewsContainer/hooks/mockUseRef.d.ts

@@ -8,4 +8,3 @@ type NodeWidth = Partial<HTMLElement>;
  */
 export declare const mockUseRef: (node: NodeWidth) => void;
 export {};
-//# sourceMappingURL=mockUseRef.d.ts.map

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs

@@ -1,2 +1,121 @@
-"use strict";var e=require("react"),t=require("react-use"),r=require("../utils.cjs");exports.useSetScrollPosition=(l,n)=>{var o;const[i,c]=e.useState(!0),[u,d]=e.useState(!1),[s,v]=e.useState([]),a=null===(o=null==l?void 0:l.current)||void 0===o?void 0:o.querySelector("[aria-selected = true]"),h=t.usePrevious(a),g=e.useCallback((()=>{var e,t,r,n,o,i,u,s;(null===(e=l.current)||void 0===e?void 0:e.scrollLeft)>0?c(!1):(document.getElementById("left-arrow")===document.activeElement&&(null===(t=document.getElementById("right-arrow"))||void 0===t||t.focus()),c(!0));const v=(null!==(n=null===(r=l.current)||void 0===r?void 0:r.scrollWidth)&&void 0!==n?n:0)-(null!==(i=null===(o=l.current)||void 0===o?void 0:o.clientWidth)&&void 0!==i?i:0);(null===(u=l.current)||void 0===u?void 0:u.scrollLeft)>=v-10?(document.getElementById("right-arrow")===document.activeElement&&(null===(s=document.getElementById("left-arrow"))||void 0===s||s.focus()),d(!0)):d(!1)}),[l]),f=e.useCallback((()=>{l.current&&(l.current.scrollWidth-l.current.getBoundingClientRect().width<5?d(!0):d(!1))}),[l]),m=e.useCallback((()=>{const e=r.getNextViewPosition(s,l.current.scrollLeft,l.current.clientWidth);l.current.scrollTo({left:e,top:0,behavior:"smooth"})}),[l,s]),w=e.useCallback((()=>{const e=r.getPrevViewPosition(s,l.current.scrollLeft);l.current.scrollTo({left:e,top:0,behavior:"smooth"})}),[l,s]);return e.useEffect((()=>{var e,t,o,i,c,u,d;if(null==l?void 0:l.current){if((null===(e=l.current.children)||void 0===e?void 0:e.length)&&(null===(t=l.current.children)||void 0===t?void 0:t.length)!==s.length&&s.length>0&&s.length<n.length&&(l.current.scrollTo({left:l.current.scrollWidth-l.current.clientWidth,top:0,behavior:"smooth"}),v([...s,s[s.length-1]+(null!==(i=null===(o=l.current.children[s.length-1])||void 0===o?void 0:o.getBoundingClientRect().x)&&void 0!==i?i:0)-20])),(null===(c=l.current.children)||void 0===c?void 0:c.length)&&0===s.length&&v(r.createViewPositionArray(l.current)),a!==h&&null!==a&&(null===(u=l.current.children)||void 0===u?void 0:u.length)===s.length){const e=Array.from(l.current.children).indexOf(a);l.current.scrollTo({left:s[e],top:0,behavior:"smooth"})}return f(),window.addEventListener("resize",f),null===(d=l.current)||void 0===d||d.addEventListener("scroll",g),()=>{window.removeEventListener("resize",f)}}}),[l,n,f,g,s,a,h]),{rightDisabled:u,leftDisabled:i,toNextScrollPosition:m,toPrevScrollPosition:w}};
+'use strict';
+
+var React = require('react');
+var reactUse = require('react-use');
+var utils = require('../utils.cjs');
+
+const useSetScrollPosition = (containerRef, children) => {
+    var _a;
+    const [leftDisabled, setLeftDisabled] = React.useState(true);
+    const [rightDisabled, setRightDisabled] = React.useState(false);
+    const [viewStartPositions, setViewStartPositions] = React.useState([]);
+    const activeTab = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.querySelector('[aria-selected = true]');
+    const prevActiveTab = reactUse.usePrevious(activeTab);
+    const handleScroll = React.useCallback(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (((_a = containerRef.current) === null || _a === undefined ? undefined : _a.scrollLeft) > 0) {
+            setLeftDisabled(false);
+        }
+        else {
+            if (document.getElementById('left-arrow') === document.activeElement) {
+                (_b = document.getElementById('right-arrow')) === null || _b === undefined ? undefined : _b.focus();
+            }
+            setLeftDisabled(true);
+        }
+        const maxScrollWidth = (_d = (_c = containerRef.current) === null || _c === undefined ? undefined : _c.scrollWidth) !== null && _d !== undefined ? _d : 0;
+        const maxClientWidth = (_f = (_e = containerRef.current) === null || _e === undefined ? undefined : _e.clientWidth) !== null && _f !== undefined ? _f : 0;
+        const maxScrollLeft = maxScrollWidth - maxClientWidth;
+        // -10 to prevent javascript assertion errors on floating points
+        if (((_g = containerRef.current) === null || _g === undefined ? undefined : _g.scrollLeft) >= maxScrollLeft - 10) {
+            if (document.getElementById('right-arrow') === document.activeElement) {
+                (_h = document.getElementById('left-arrow')) === null || _h === undefined ? undefined : _h.focus();
+            }
+            setRightDisabled(true);
+        }
+        else {
+            setRightDisabled(false);
+        }
+    }, [containerRef]);
+    const handleResize = React.useCallback(() => {
+        if (!containerRef.current)
+            return;
+        if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {
+            setRightDisabled(true);
+        }
+        else {
+            setRightDisabled(false);
+        }
+    }, [containerRef]);
+    const toNextScrollPosition = React.useCallback(() => {
+        const newPosition = utils.getNextViewPosition(viewStartPositions, containerRef.current.scrollLeft, containerRef.current.clientWidth);
+        containerRef.current.scrollTo({
+            left: newPosition,
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [containerRef, viewStartPositions]);
+    const toPrevScrollPosition = React.useCallback(() => {
+        const newPosition = utils.getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);
+        containerRef.current.scrollTo({
+            left: newPosition,
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [containerRef, viewStartPositions]);
+    React.useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!(containerRef === null || containerRef === undefined ? undefined : containerRef.current))
+            return;
+        if (((_a = containerRef.current.children) === null || _a === undefined ? undefined : _a.length) &&
+            ((_b = containerRef.current.children) === null || _b === undefined ? undefined : _b.length) !== viewStartPositions.length &&
+            viewStartPositions.length > 0 &&
+            viewStartPositions.length < children.length) {
+            // scrolls to the last view, when a new item is added
+            containerRef.current.scrollTo({
+                left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
+                top: 0,
+                behavior: 'smooth',
+            });
+            // computes the x position of the new item
+            setViewStartPositions([
+                ...viewStartPositions,
+                viewStartPositions[viewStartPositions.length - 1] +
+                    ((_d = (_c = containerRef.current.children[viewStartPositions.length - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect().x) !== null && _d !== undefined ? _d : 0) -
+                    20,
+            ]);
+        }
+        if (((_e = containerRef.current.children) === null || _e === undefined ? undefined : _e.length) && viewStartPositions.length === 0) {
+            setViewStartPositions(utils.createViewPositionArray(containerRef.current));
+        }
+        // scrolls to active tab when page loads
+        if (activeTab !== prevActiveTab &&
+            activeTab !== null &&
+            ((_f = containerRef.current.children) === null || _f === undefined ? undefined : _f.length) === viewStartPositions.length) {
+            const index = Array.from(containerRef.current.children).indexOf(activeTab);
+            containerRef.current.scrollTo({
+                left: viewStartPositions[index],
+                top: 0,
+                behavior: 'smooth',
+            });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        (_g = containerRef.current) === null || _g === undefined ? undefined : _g.addEventListener('scroll', handleScroll);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        containerRef,
+        children,
+        handleResize,
+        handleScroll,
+        viewStartPositions,
+        activeTab,
+        prevActiveTab,
+    ]);
+    return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };
+};
+
+exports.useSetScrollPosition = useSetScrollPosition;
 //# sourceMappingURL=useSetScrollPosition.cjs.map

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":[null],"names":["rightDisabled","setRightDisabled","useState"],"mappings":"2JAwIEA,EAAAC,GAAAC,EAAAA,UAAA"}
+{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":[null],"names":["useState","usePrevious","useCallback","getNextViewPosition","getPrevViewPosition","useEffect","createViewPositionArray"],"mappings":"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"}

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.d.ts

@@ -5,4 +5,3 @@ export declare const useSetScrollPosition: (containerRef: MutableRefObject<HTMLD
     toNextScrollPosition: () => void;
     toPrevScrollPosition: () => void;
 };
-//# sourceMappingURL=useSetScrollPosition.d.ts.map

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.js

@@ -1,2 +1,119 @@
-import{useState as e,useCallback as t,useEffect as r}from"react";import{usePrevious as l}from"react-use";import{getNextViewPosition as n,getPrevViewPosition as o,createViewPositionArray as i}from"../utils.js";const c=(c,d)=>{var u;const[v,s]=e(!0),[h,m]=e(!1),[g,a]=e([]),f=null===(u=null==c?void 0:c.current)||void 0===u?void 0:u.querySelector("[aria-selected = true]"),w=l(f),E=t((()=>{var e,t,r,l,n,o,i,d;(null===(e=c.current)||void 0===e?void 0:e.scrollLeft)>0?s(!1):(document.getElementById("left-arrow")===document.activeElement&&(null===(t=document.getElementById("right-arrow"))||void 0===t||t.focus()),s(!0));const u=(null!==(l=null===(r=c.current)||void 0===r?void 0:r.scrollWidth)&&void 0!==l?l:0)-(null!==(o=null===(n=c.current)||void 0===n?void 0:n.clientWidth)&&void 0!==o?o:0);(null===(i=c.current)||void 0===i?void 0:i.scrollLeft)>=u-10?(document.getElementById("right-arrow")===document.activeElement&&(null===(d=document.getElementById("left-arrow"))||void 0===d||d.focus()),m(!0)):m(!1)}),[c]),p=t((()=>{c.current&&(c.current.scrollWidth-c.current.getBoundingClientRect().width<5?m(!0):m(!1))}),[c]),L=t((()=>{const e=n(g,c.current.scrollLeft,c.current.clientWidth);c.current.scrollTo({left:e,top:0,behavior:"smooth"})}),[c,g]),b=t((()=>{const e=o(g,c.current.scrollLeft);c.current.scrollTo({left:e,top:0,behavior:"smooth"})}),[c,g]);return r((()=>{var e,t,r,l,n,o,u;if(null==c?void 0:c.current){if((null===(e=c.current.children)||void 0===e?void 0:e.length)&&(null===(t=c.current.children)||void 0===t?void 0:t.length)!==g.length&&g.length>0&&g.length<d.length&&(c.current.scrollTo({left:c.current.scrollWidth-c.current.clientWidth,top:0,behavior:"smooth"}),a([...g,g[g.length-1]+(null!==(l=null===(r=c.current.children[g.length-1])||void 0===r?void 0:r.getBoundingClientRect().x)&&void 0!==l?l:0)-20])),(null===(n=c.current.children)||void 0===n?void 0:n.length)&&0===g.length&&a(i(c.current)),f!==w&&null!==f&&(null===(o=c.current.children)||void 0===o?void 0:o.length)===g.length){const e=Array.from(c.current.children).indexOf(f);c.current.scrollTo({left:g[e],top:0,behavior:"smooth"})}return p(),window.addEventListener("resize",p),null===(u=c.current)||void 0===u||u.addEventListener("scroll",E),()=>{window.removeEventListener("resize",p)}}}),[c,d,p,E,g,f,w]),{rightDisabled:h,leftDisabled:v,toNextScrollPosition:L,toPrevScrollPosition:b}};export{c as useSetScrollPosition};
+import { useState, useCallback, useEffect } from 'react';
+import { usePrevious } from 'react-use';
+import { getNextViewPosition, getPrevViewPosition, createViewPositionArray } from '../utils.js';
+
+const useSetScrollPosition = (containerRef, children) => {
+    var _a;
+    const [leftDisabled, setLeftDisabled] = useState(true);
+    const [rightDisabled, setRightDisabled] = useState(false);
+    const [viewStartPositions, setViewStartPositions] = useState([]);
+    const activeTab = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.querySelector('[aria-selected = true]');
+    const prevActiveTab = usePrevious(activeTab);
+    const handleScroll = useCallback(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (((_a = containerRef.current) === null || _a === undefined ? undefined : _a.scrollLeft) > 0) {
+            setLeftDisabled(false);
+        }
+        else {
+            if (document.getElementById('left-arrow') === document.activeElement) {
+                (_b = document.getElementById('right-arrow')) === null || _b === undefined ? undefined : _b.focus();
+            }
+            setLeftDisabled(true);
+        }
+        const maxScrollWidth = (_d = (_c = containerRef.current) === null || _c === undefined ? undefined : _c.scrollWidth) !== null && _d !== undefined ? _d : 0;
+        const maxClientWidth = (_f = (_e = containerRef.current) === null || _e === undefined ? undefined : _e.clientWidth) !== null && _f !== undefined ? _f : 0;
+        const maxScrollLeft = maxScrollWidth - maxClientWidth;
+        // -10 to prevent javascript assertion errors on floating points
+        if (((_g = containerRef.current) === null || _g === undefined ? undefined : _g.scrollLeft) >= maxScrollLeft - 10) {
+            if (document.getElementById('right-arrow') === document.activeElement) {
+                (_h = document.getElementById('left-arrow')) === null || _h === undefined ? undefined : _h.focus();
+            }
+            setRightDisabled(true);
+        }
+        else {
+            setRightDisabled(false);
+        }
+    }, [containerRef]);
+    const handleResize = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {
+            setRightDisabled(true);
+        }
+        else {
+            setRightDisabled(false);
+        }
+    }, [containerRef]);
+    const toNextScrollPosition = useCallback(() => {
+        const newPosition = getNextViewPosition(viewStartPositions, containerRef.current.scrollLeft, containerRef.current.clientWidth);
+        containerRef.current.scrollTo({
+            left: newPosition,
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [containerRef, viewStartPositions]);
+    const toPrevScrollPosition = useCallback(() => {
+        const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);
+        containerRef.current.scrollTo({
+            left: newPosition,
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [containerRef, viewStartPositions]);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!(containerRef === null || containerRef === undefined ? undefined : containerRef.current))
+            return;
+        if (((_a = containerRef.current.children) === null || _a === undefined ? undefined : _a.length) &&
+            ((_b = containerRef.current.children) === null || _b === undefined ? undefined : _b.length) !== viewStartPositions.length &&
+            viewStartPositions.length > 0 &&
+            viewStartPositions.length < children.length) {
+            // scrolls to the last view, when a new item is added
+            containerRef.current.scrollTo({
+                left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
+                top: 0,
+                behavior: 'smooth',
+            });
+            // computes the x position of the new item
+            setViewStartPositions([
+                ...viewStartPositions,
+                viewStartPositions[viewStartPositions.length - 1] +
+                    ((_d = (_c = containerRef.current.children[viewStartPositions.length - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect().x) !== null && _d !== undefined ? _d : 0) -
+                    20,
+            ]);
+        }
+        if (((_e = containerRef.current.children) === null || _e === undefined ? undefined : _e.length) && viewStartPositions.length === 0) {
+            setViewStartPositions(createViewPositionArray(containerRef.current));
+        }
+        // scrolls to active tab when page loads
+        if (activeTab !== prevActiveTab &&
+            activeTab !== null &&
+            ((_f = containerRef.current.children) === null || _f === undefined ? undefined : _f.length) === viewStartPositions.length) {
+            const index = Array.from(containerRef.current.children).indexOf(activeTab);
+            containerRef.current.scrollTo({
+                left: viewStartPositions[index],
+                top: 0,
+                behavior: 'smooth',
+            });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        (_g = containerRef.current) === null || _g === undefined ? undefined : _g.addEventListener('scroll', handleScroll);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        containerRef,
+        children,
+        handleResize,
+        handleScroll,
+        viewStartPositions,
+        activeTab,
+        prevActiveTab,
+    ]);
+    return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };
+};
+
+export { useSetScrollPosition };
 //# sourceMappingURL=useSetScrollPosition.js.map

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSetScrollPosition.js","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":[null],"names":["rightDisabled","setRightDisabled","useState"],"mappings":"yPAwIEA,EAAAC,GAAAC,GAAA"}
+{"version":3,"file":"useSetScrollPosition.js","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

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

package/dist/components/ViewsContainer/styled.cjs

@@ -1,62 +1,35 @@
-"use strict";var o=require("styled-components"),r=require("../Stack/Stack.cjs"),e=require("../Button/Button.cjs"),t=require("../../tempIcons/LeftArrowIcon.cjs"),l=require("../../tempIcons/RightArrowIcon.cjs"),n=require("../../theme/modules/colors.cjs"),c=require("../../tempIcons/ThreeDotsIcon.cjs"),s=require("../InputGroup/index.cjs");function u(o){return o&&o.__esModule?o:{default:o}}var a=u(o);const i=a.default(r.Stack)`
-  overflow-x: scroll;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
-
-  ::-webkit-scrollbar {
-    display: none; /* for Chrome, Safari, and Opera */
-  }
-
-  gap: 8px;
-  height: inherit;
-  padding: 8px 6px 8px 12px;
-  margin-left: 0;
-`,d=a.default(r.Stack)`
-  background-color: ${n.colors.neutral.grey.lightest};
-`,p=a.default(t.LeftArrowIcon)`
-  color: ${n.colors.neutral.ink.base};
-`,g=a.default(l.RightArrowIcon)`
-  color: ${n.colors.neutral.ink.base};
-`,h=a.default(c.ThreeDotsIcon)`
-  color: ${n.colors.neutral.ink.base};
-`,f=a.default(e.Button)`
-  background-color: white;
-
-  &:hover {
-    background-color: ${n.colors.neutral.grey.lightest};
-  }
-`,x=a.default(e.Button)`
-  background-color: white;
-
-  &:disabled {
-    background-color: white;
-    ${p} {
-      color: ${n.colors.neutral.ink.lightest};
-    }
-  }
-
-  &:hover {
-    background-color: ${n.colors.neutral.grey.lightest};
-  }
-`,k=a.default(e.Button)`
-  background-color: white;
-
-  &:disabled {
-    background-color: white;
-    ${g} {
-      color: ${n.colors.neutral.ink.lightest};
-    }
-  }
-
-  &:hover {
-    background-color: ${n.colors.neutral.grey.lightest};
-  }
-`,b=a.default(s.InputGroup)`
-  padding-right: 8px;
-  margin-left: 0;
-
-  & > *:first-child:last-child {
-    border-radius: 4px !important;
-  }
-`;exports.Container=d,exports.StyledInputGroup=b,exports.StyledLeftButton=x,exports.StyledLeftIcon=p,exports.StyledMenuButton=f,exports.StyledMenuIcon=h,exports.StyledRightButton=k,exports.StyledRightIcon=g,exports.ViewsWrapper=i;
+'use strict';
+
+var styled = require('styled-components');
+var Stack = require('../Stack/Stack.cjs');
+var Button = require('../Button/Button.cjs');
+var LeftArrowIcon = require('../../tempIcons/LeftArrowIcon.cjs');
+var RightArrowIcon = require('../../tempIcons/RightArrowIcon.cjs');
+var colors = require('../../theme/modules/colors.cjs');
+var ThreeDotsIcon = require('../../tempIcons/ThreeDotsIcon.cjs');
+var index = require('../InputGroup/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const ViewsWrapper = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--x8ukf0" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;
+const Container = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Container", componentId: "vui--mlh8wa" }) `background-color:${colors.colors.neutral.grey.lightest};`;
+const StyledLeftIcon = styled__default.default(LeftArrowIcon.LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--193620d" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledRightIcon = styled__default.default(RightArrowIcon.RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--erlipg" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledMenuIcon = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--eg23b0" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledMenuButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--1o9jbht" }) `background-color:white;&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
+const StyledLeftButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--wtwmiz" }) `background-color:white;&:disabled{background-color:white;${StyledLeftIcon}{color:${colors.colors.neutral.ink.lightest};}}&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
+const StyledRightButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledRightButton", componentId: "vui--1ycuwov" }) `background-color:white;&:disabled{background-color:white;${StyledRightIcon}{color:${colors.colors.neutral.ink.lightest};}}&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
+const StyledInputGroup = styled__default.default(index.InputGroup).withConfig({ displayName: "vui--StyledInputGroup", componentId: "vui--l3ez4z" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
+
+exports.Container = Container;
+exports.StyledInputGroup = StyledInputGroup;
+exports.StyledLeftButton = StyledLeftButton;
+exports.StyledLeftIcon = StyledLeftIcon;
+exports.StyledMenuButton = StyledMenuButton;
+exports.StyledMenuIcon = StyledMenuIcon;
+exports.StyledRightButton = StyledRightButton;
+exports.StyledRightIcon = StyledRightIcon;
+exports.ViewsWrapper = ViewsWrapper;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":[null],"names":["Container","styled","Stack"],"mappings":";;;;;;;;;;;;;EA8DAA,EAA8BC,EAAAA,QAAAC,EAAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":[null],"names":["styled","Stack","colors","LeftArrowIcon","RightArrowIcon","ThreeDotsIcon","Button","InputGroup"],"mappings":";;;;;;;;;;;;;;;MASa,YAAY,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAD,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAGF,uBAAM,CAACI,6BAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAGF,uBAAM,CAACK,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAH,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAAJ,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACLJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACNJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAGF,uBAAM,CAACO,gBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;;;;;;;;;"}

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

@@ -11,6 +11,7 @@ export declare const StyledMenuButton: import("styled-components").StyledCompone
     iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
+    contentStyles?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const StyledLeftButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode;
@@ -19,6 +20,7 @@ export declare const StyledLeftButton: import("styled-components").StyledCompone
     iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
+    contentStyles?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const StyledRightButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode;
@@ -27,6 +29,6 @@ export declare const StyledRightButton: import("styled-components").StyledCompon
     iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
+    contentStyles?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const StyledInputGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/ViewsContainer/styled.js

@@ -1,62 +1,21 @@
-import o from"styled-components";import{Stack as r}from"../Stack/Stack.js";import{Button as t}from"../Button/Button.js";import{LeftArrowIcon as e}from"../../tempIcons/LeftArrowIcon.js";import{RightArrowIcon as n}from"../../tempIcons/RightArrowIcon.js";import{colors as l}from"../../theme/modules/colors.js";import{ThreeDotsIcon as i}from"../../tempIcons/ThreeDotsIcon.js";import{InputGroup as a}from"../InputGroup/index.js";const c=o(r)`
-  overflow-x: scroll;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
-
-  ::-webkit-scrollbar {
-    display: none; /* for Chrome, Safari, and Opera */
-  }
-
-  gap: 8px;
-  height: inherit;
-  padding: 8px 6px 8px 12px;
-  margin-left: 0;
-`,s=o(r)`
-  background-color: ${l.neutral.grey.lightest};
-`,p=o(e)`
-  color: ${l.neutral.ink.base};
-`,d=o(n)`
-  color: ${l.neutral.ink.base};
-`,g=o(i)`
-  color: ${l.neutral.ink.base};
-`,m=o(t)`
-  background-color: white;
-
-  &:hover {
-    background-color: ${l.neutral.grey.lightest};
-  }
-`,h=o(t)`
-  background-color: white;
-
-  &:disabled {
-    background-color: white;
-    ${p} {
-      color: ${l.neutral.ink.lightest};
-    }
-  }
-
-  &:hover {
-    background-color: ${l.neutral.grey.lightest};
-  }
-`,u=o(t)`
-  background-color: white;
-
-  &:disabled {
-    background-color: white;
-    ${d} {
-      color: ${l.neutral.ink.lightest};
-    }
-  }
-
-  &:hover {
-    background-color: ${l.neutral.grey.lightest};
-  }
-`,f=o(a)`
-  padding-right: 8px;
-  margin-left: 0;
-
-  & > *:first-child:last-child {
-    border-radius: 4px !important;
-  }
-`;export{s as Container,f as StyledInputGroup,h as StyledLeftButton,p as StyledLeftIcon,m as StyledMenuButton,g as StyledMenuIcon,u as StyledRightButton,d as StyledRightIcon,c as ViewsWrapper};
+import styled from 'styled-components';
+import { Stack } from '../Stack/Stack.js';
+import { Button } from '../Button/Button.js';
+import { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon.js';
+import { RightArrowIcon } from '../../tempIcons/RightArrowIcon.js';
+import { colors } from '../../theme/modules/colors.js';
+import { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon.js';
+import { InputGroup } from '../InputGroup/index.js';
+
+const ViewsWrapper = styled(Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--x8ukf0" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;
+const Container = styled(Stack).withConfig({ displayName: "vui--Container", componentId: "vui--mlh8wa" }) `background-color:${colors.neutral.grey.lightest};`;
+const StyledLeftIcon = styled(LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--193620d" }) `color:${colors.neutral.ink.base};`;
+const StyledRightIcon = styled(RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--erlipg" }) `color:${colors.neutral.ink.base};`;
+const StyledMenuIcon = styled(ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--eg23b0" }) `color:${colors.neutral.ink.base};`;
+const StyledMenuButton = styled(Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--1o9jbht" }) `background-color:white;&:hover{background-color:${colors.neutral.grey.lightest};}`;
+const StyledLeftButton = styled(Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--wtwmiz" }) `background-color:white;&:disabled{background-color:white;${StyledLeftIcon}{color:${colors.neutral.ink.lightest};}}&:hover{background-color:${colors.neutral.grey.lightest};}`;
+const StyledRightButton = styled(Button).withConfig({ displayName: "vui--StyledRightButton", componentId: "vui--1ycuwov" }) `background-color:white;&:disabled{background-color:white;${StyledRightIcon}{color:${colors.neutral.ink.lightest};}}&:hover{background-color:${colors.neutral.grey.lightest};}`;
+const StyledInputGroup = styled(InputGroup).withConfig({ displayName: "vui--StyledInputGroup", componentId: "vui--l3ez4z" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
+
+export { Container, StyledInputGroup, StyledLeftButton, StyledLeftIcon, StyledMenuButton, StyledMenuIcon, StyledRightButton, StyledRightIcon, ViewsWrapper };
 //# sourceMappingURL=styled.js.map