@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/View/styled.js

@@ -1,41 +1,41 @@
-import e from"styled-components";import{colors as t}from"../../theme/modules/colors.js";import{Text as o}from"../Text/Text.js";import{BaseContainer as r}from"../BaseContainer/BaseContainer.js";import{sizes as i}from"../../theme/modules/sizes.js";const n=e(r)`
-  padding: 14px 24px;
-`,s=e(o)`
-  line-height: 1;
-`,l=e(r)`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 40px;
-  border-radius: 4px;
-  padding: 0 12px;
-  border: 1px solid transparent;
-  cursor: pointer;
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { Text } from '../Text/Text.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { sizes } from '../../theme/modules/sizes.js';
 
-  ${({colourPalette:e,customTextColour:r})=>`\n    &:hover {\n      border: 1px solid ${e.base};\n      background-color: ${e.lightest};\n    }\n\n    ${o} {\n      color: ${null!=r?r:t.neutral.ink.dark};\n    }\n  `}
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ colourPalette, customTextColour }) => `
+    &:hover {
+      border: 1px solid ${colourPalette.base};
+      background-color: ${colourPalette.lightest};
+    }
 
-  ${({active:e,colourPalette:t})=>e&&`\n    background-color: ${t.lightest};\n  `}
-`,a=e(o)`
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  padding: 2px 4px;
-  min-width: 20px;
-  height: 20px;
-  margin-left: 8px;
+    ${Text} {
+      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
+    }
+  `} ${({ active, colourPalette }) => active &&
+    `
+    background-color: ${colourPalette.lightest};
+  `}`;
+const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+    `
+    background-color: ${colourPalette.base};
 
-  ${({active:e,colourPalette:t})=>e&&`\n    background-color: ${t.base};\n\n    & > ${s} {\n      color: #fff;\n    }\n  `}
-`,d={style:{marginLeft:i.xs,padding:i.xs,height:i.base,width:i.base}},p=e.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${i.sm};
+    & > ${CounterText} {
+      color: #fff;
+    }
+  `}`;
+const IconStyling = {
+    style: {
+        marginLeft: sizes.xs,
+        padding: sizes.xs,
+        height: sizes.base,
+        width: sizes.base,
+    },
+};
+const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
 
-  svg {
-    height: ${i.base};
-    width: ${i.base};
-  }
-`;export{n as Container,l as Contour,a as CounterContainer,s as CounterText,p as CustomIconWrapper,d as IconStyling,o as Text};
+export { Container, Contour, CounterContainer, CounterText, CustomIconWrapper, IconStyling, Text };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":[null],"names":["Container","styled","CounterText","Text","Contour","BaseContainer"],"mappings":"sPAWsC,MAAAA,EAAAC,IAAe;;EAE/CC,EAAMD,EAAeE,EAAK;;EAUhCC,EAAaH,EAAAI,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAIvC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1C,IAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAE,KAAK,CAAC,EAAE;QACpB,OAAO,EAAE,KAAK,CAAC,EAAE;QACjB,MAAM,EAAE,KAAK,CAAC,IAAI;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAG,MAAM,CAAC,GAAG,mIAGzB,KAAK,CAAC,EAAE,CAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EACX,KAAK,CAAC,IAAI;;;;"}

package/dist/components/View/types.cjs

@@ -1,2 +1,9 @@
-"use strict";var e;exports.ViewTypes=void 0,(e=exports.ViewTypes||(exports.ViewTypes={})).saved="saved",e.fixed="fixed",e.draft="draft";
+'use strict';
+
+exports.ViewTypes = void 0;
+(function (ViewTypes) {
+    ViewTypes["saved"] = "saved";
+    ViewTypes["fixed"] = "fixed";
+    ViewTypes["draft"] = "draft";
+})(exports.ViewTypes || (exports.ViewTypes = {}));
 //# sourceMappingURL=types.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/View/types.ts"],"sourcesContent":[null],"names":["ViewTypes"],"mappings":"aACA,IAASA,EADAA,QAAYA,eAAA,GACZA,EAMPA,QAAeA,YAAAA,kBAAA,CAAA,IAJI,MAAA,QAErBA,EAAqB,MAAA,QACnBA,EAAe,MAAA"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/View/types.ts"],"sourcesContent":[null],"names":["ViewTypes"],"mappings":";;AAKYA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,iBAAS,KAATA,iBAAS,GAIpB,EAAA,CAAA,CAAA;;"}

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

@@ -34,4 +34,3 @@ export interface ViewProps {
     /** Class name for e2e testing */
     e2eClassName?: string;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/View/types.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/View/types.ts"],"sourcesContent":[null],"names":["ViewTypes"],"mappings":"AAAS,IAAAA,GACT,SAASA,GAETA,EAAqB,MAAA,QAErBA,EAAqB,MAAA,QACnBA,EAAe,MAAA,OACf,CANF,CAMEA,IAAeA,EAAA,CAAA"}
+{"version":3,"file":"types.js","sources":["../../../src/components/View/types.ts"],"sourcesContent":[null],"names":[],"mappings":"IAKY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,SAAS,KAAT,SAAS,GAIpB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/ViewTab/ViewTab.cjs

@@ -1,2 +1,49 @@
-"use strict";var e=require("react");require("../../hooks/useFocusVisible.cjs");var t=require("../../hooks/useHover.cjs"),o=require("../../utils/buildClassnames.cjs");require("uid/secure");var r=require("../../theme/modules/colors.cjs"),a=require("./types.cjs"),l=require("./styled.cjs"),i=require("../Text/Text.cjs");function u(e){return e&&e.__esModule?e:{default:e}}var n=u(e);const c=n.default.forwardRef((({id:e,iconSlot:u,name:c,type:s,className:d,colourPalette:v=r.colors.secondary.blue,customTextColour:m,count:C,active:f=!1,onClick:b,subAction:T,ariaContext:y,...x},E)=>{const $={delete:(q=d)?`${q}-delete`:void 0,edit:q?`${q}-edit`:void 0,container:q?`${q}-view`:void 0,active:q?`${q}-active`:void 0,counter:q?`${q}-counter`:void 0};var q;const[w,j,p]=t.useHover(),h=f&&T?T:b,S=s===a.ViewTabTypes.draft,g=s===a.ViewTabTypes.saved;return n.default.createElement(l.ViewButton,{className:o.buildClassnames([null==$?void 0:$.container]),onClick:()=>h(e),role:"tab","aria-selected":f,"aria-label":`${f&&S?"Delete":f&&g?"Edit":""} ${c} view ${C?`with ${C} ${y}`:""}`,customTextColour:m,ref:E,...x},n.default.createElement(l.Contour,{active:f,onMouseEnter:j,onMouseLeave:p,colourPalette:v,customTextColour:m},u&&n.default.createElement(l.CustomIconWrapper,null,u),n.default.createElement(i.Text,{variant:"bodyBold"},c),null!=C&&n.default.createElement(l.CounterContainer,{"data-testid":"countContainer",active:f||w,colourPalette:v,customTextColour:m},n.default.createElement(l.CounterText,{variant:"subheadingSmall"},C)),S&&n.default.createElement(l.CrossIconStyling,{...l.IconStyling,"aria-label":"delete icon"}),g&&f&&n.default.createElement(l.ThreeDotsIconStyling,{...l.IconStyling,"aria-label":"edit icon"})))}));exports.ViewTab=c;
+'use strict';
+
+var React = require('react');
+require('../../hooks/useFocusVisible.cjs');
+var useHover = require('../../hooks/useHover.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var colors = require('../../theme/modules/colors.cjs');
+var types = require('./types.cjs');
+var styled = require('./styled.cjs');
+var Text = require('../Text/Text.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const generateClassNames = (prefix) => ({
+    delete: prefix ? `${prefix}-delete` : undefined,
+    edit: prefix ? `${prefix}-edit` : undefined,
+    container: prefix ? `${prefix}-view` : undefined,
+    active: prefix ? `${prefix}-active` : undefined,
+    counter: prefix ? `${prefix}-counter` : undefined,
+});
+const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.colors.secondary.blue, customTextColour, count, active = false, onClick, subAction, ariaContext, ...props }, ref) => {
+    const classNames = generateClassNames(className);
+    const [isHovered, handleEnter, handleLeave] = useHover.useHover();
+    const action = active && subAction ? subAction : onClick;
+    const handleAction = () => action(id);
+    const isDraft = type === types.ViewTabTypes.draft;
+    const isSaved = type === types.ViewTabTypes.saved;
+    const getLabelAction = () => {
+        if (active && isDraft)
+            return 'Delete';
+        if (active && isSaved)
+            return 'Edit';
+        return '';
+    };
+    return (React__default.default.createElement(styled.ViewButton, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, ...props },
+        React__default.default.createElement(styled.Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
+            iconSlot && React__default.default.createElement(styled.CustomIconWrapper, null, iconSlot),
+            React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
+            count !== undefined && count !== null && (React__default.default.createElement(styled.CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
+                React__default.default.createElement(styled.CounterText, { variant: "subheadingSmall" }, count))),
+            isDraft && React__default.default.createElement(styled.CrossIconStyling, { ...styled.IconStyling, "aria-label": "delete icon" }),
+            isSaved && active && React__default.default.createElement(styled.ThreeDotsIconStyling, { ...styled.IconStyling, "aria-label": "edit icon" }))));
+});
+
+exports.ViewTab = ViewTab;
 //# sourceMappingURL=ViewTab.cjs.map

package/dist/components/ViewTab/ViewTab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":[null],"names":["delete","prefix","undefined","edit"],"mappings":"2kBAyBmB,CAClBA,QADkBC,KAClB,GAAAA,gBAAAC,EAUDC,KAAAF,KAAoBA,cAAAC,gGAXD,IAAAD"}
+{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":[null],"names":["React","colors","useHover","ViewTabTypes","ViewButton","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIconStyling","IconStyling","ThreeDotsIconStyling"],"mappings":"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"}

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

@@ -19,4 +19,3 @@ export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonH
     subAction?: ((id: string) => void) | undefined;
     ariaContext: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=ViewTab.d.ts.map

package/dist/components/ViewTab/ViewTab.js

@@ -1,2 +1,43 @@
-import e from"react";import"../../hooks/useFocusVisible.js";import{useHover as t}from"../../hooks/useHover.js";import{buildClassnames as o}from"../../utils/buildClassnames.js";import"uid/secure";import{colors as r}from"../../theme/modules/colors.js";import{ViewTabTypes as a}from"./types.js";import{ViewButton as l,Contour as i,CustomIconWrapper as c,CounterContainer as n,CounterText as s,CrossIconStyling as m,IconStyling as u,ThreeDotsIconStyling as d}from"./styled.js";import{Text as v}from"../Text/Text.js";const p=e.forwardRef((({id:p,iconSlot:f,name:b,type:E,className:$,colourPalette:C=r.secondary.blue,customTextColour:x,count:j,active:T=!1,onClick:h,subAction:y,ariaContext:k,...w},P)=>{const M={delete:(N=$)?`${N}-delete`:void 0,edit:N?`${N}-edit`:void 0,container:N?`${N}-view`:void 0,active:N?`${N}-active`:void 0,counter:N?`${N}-counter`:void 0};var N;const[S,g,A]=t(),B=T&&y?y:h,D=E===a.draft,F=E===a.saved;return e.createElement(l,{className:o([null==M?void 0:M.container]),onClick:()=>B(p),role:"tab","aria-selected":T,"aria-label":`${T&&D?"Delete":T&&F?"Edit":""} ${b} view ${j?`with ${j} ${k}`:""}`,customTextColour:x,ref:P,...w},e.createElement(i,{active:T,onMouseEnter:g,onMouseLeave:A,colourPalette:C,customTextColour:x},f&&e.createElement(c,null,f),e.createElement(v,{variant:"bodyBold"},b),null!=j&&e.createElement(n,{"data-testid":"countContainer",active:T||S,colourPalette:C,customTextColour:x},e.createElement(s,{variant:"subheadingSmall"},j)),D&&e.createElement(m,{...u,"aria-label":"delete icon"}),F&&T&&e.createElement(d,{...u,"aria-label":"edit icon"})))}));export{p as ViewTab};
+import React from 'react';
+import '../../hooks/useFocusVisible.js';
+import { useHover } from '../../hooks/useHover.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { colors } from '../../theme/modules/colors.js';
+import { ViewTabTypes } from './types.js';
+import { ViewButton, Contour, CustomIconWrapper, CounterContainer, CounterText, CrossIconStyling, IconStyling, ThreeDotsIconStyling } from './styled.js';
+import { Text } from '../Text/Text.js';
+
+const generateClassNames = (prefix) => ({
+    delete: prefix ? `${prefix}-delete` : undefined,
+    edit: prefix ? `${prefix}-edit` : undefined,
+    container: prefix ? `${prefix}-view` : undefined,
+    active: prefix ? `${prefix}-active` : undefined,
+    counter: prefix ? `${prefix}-counter` : undefined,
+});
+const ViewTab = React.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.secondary.blue, customTextColour, count, active = false, onClick, subAction, ariaContext, ...props }, ref) => {
+    const classNames = generateClassNames(className);
+    const [isHovered, handleEnter, handleLeave] = useHover();
+    const action = active && subAction ? subAction : onClick;
+    const handleAction = () => action(id);
+    const isDraft = type === ViewTabTypes.draft;
+    const isSaved = type === ViewTabTypes.saved;
+    const getLabelAction = () => {
+        if (active && isDraft)
+            return 'Delete';
+        if (active && isSaved)
+            return 'Edit';
+        return '';
+    };
+    return (React.createElement(ViewButton, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, ...props },
+        React.createElement(Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
+            iconSlot && React.createElement(CustomIconWrapper, null, iconSlot),
+            React.createElement(Text, { variant: "bodyBold" }, name),
+            count !== undefined && count !== null && (React.createElement(CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
+                React.createElement(CounterText, { variant: "subheadingSmall" }, count))),
+            isDraft && React.createElement(CrossIconStyling, { ...IconStyling, "aria-label": "delete icon" }),
+            isSaved && active && React.createElement(ThreeDotsIconStyling, { ...IconStyling, "aria-label": "edit icon" }))));
+});
+
+export { ViewTab };
 //# sourceMappingURL=ViewTab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":[null],"names":["delete","prefix","undefined","edit"],"mappings":"isBAyBmB,CAClBA,QADkBC,KAClB,GAAAA,gBAAAC,EAUDC,KAAAF,KAAoBA,cAAAC,gGAXD,IAAAD"}
+{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

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

package/dist/components/ViewTab/styled.cjs

@@ -1,50 +1,107 @@
-"use strict";var e=require("styled-components"),n=require("../../theme/modules/colors.cjs"),r=require("../Text/Text.cjs"),o=require("../BaseContainer/BaseContainer.cjs"),t=require("../../theme/modules/sizes.cjs"),s=require("../../tempIcons/ThreeDotsIcon.cjs"),l=require("../../tempIcons/CrossIcon.cjs"),i=require("../Button/components/styled.cjs"),a=require("../../theme/index.cjs");function c(e){return e&&e.__esModule?e:{default:e}}var u=c(e);const d=u.default(r.Text)`
-  line-height: 1;
-`,$=u.default(s.ThreeDotsIcon)``,x=u.default(l.CrossIcon)``,p=u.default(r.Text)`
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  padding: 2px 4px;
-  min-width: 20px;
-  height: 20px;
-  margin-left: 8px;
-
-  ${({active:e,colourPalette:r})=>e&&`\n      background-color: ${r.dark};\n\n      & > ${d} {\n        color: ${n.colors.neutral.grey.lightest};\n      }\n  `}
-`,g=u.default(o.BaseContainer)`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 40px;
-  border-radius: 4px;
-  padding: ${a.theme.sizes.sm};
-  border: 1px solid transparent;
-  cursor: pointer;
-  background-color: transparent;
-
-  ${({customTextColour:e})=>`\n\n  &:hover {\n    background-color: ${n.colors.neutral.grey.base};\n    & > ${p} {\n      background-color: ${n.colors.neutral.grey.base};\n      & > ${d} {\n        color: ${n.colors.neutral.ink.base};\n      }\n    }\n    & > ${r.Text} {\n      color: ${null!=e?e:n.colors.neutral.ink.dark};\n    }\n    & > ${$} {\n      color: ${n.colors.neutral.ink.dark};\n    }\n    & > ${x} {\n      color: ${n.colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${r.Text} {\n    color: ${null!=e?e:n.colors.neutral.ink.dark};\n  }\n  `}
-
-  ${({active:e,colourPalette:n,customTextColour:o})=>e&&`\n    background-color: ${n.lightest};\n\n    & > ${$} {\n      color: ${n.dark};\n    }\n    & > ${x} {\n      color: ${n.dark};\n    }\n\n    & > ${r.Text} {\n      color: ${null!=o?o:n.dark};\n    }\n  `}
-`,k=u.default(i.FlatButton)`
-  padding: ${a.theme.sizes.sm};
-  box-sizing: border-box;
-  border-radius: 4px;
-  border: none;
-  position: relative;
-  margin: 0;
-  padding: 0;
-
-  ${({customTextColour:e})=>`\n  &:focus-visible {\n    ${g} {\n      background-color: ${n.colors.neutral.grey.base};\n      & > ${p} {\n        background-color: ${n.colors.neutral.grey.base};\n        & > ${d} {\n          color: ${n.colors.neutral.ink.base};\n        }\n      }\n      & > ${r.Text} {\n        color: ${null!=e?e:n.colors.neutral.ink.dark};\n      }\n      & > ${$} {\n        color: ${n.colors.neutral.ink.dark};\n      }\n      & > ${x} {\n        color: ${n.colors.neutral.ink.dark};\n      }\n    }\n  `}
-`,b={style:{marginLeft:t.sizes.xs,padding:t.sizes.xs,height:t.sizes.base,width:t.sizes.base}},m=u.default.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${t.sizes.sm};
-
-  svg {
-    height: ${t.sizes.base};
-    width: ${t.sizes.base};
+'use strict';
+
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var Text = require('../Text/Text.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var ThreeDotsIcon = require('../../tempIcons/ThreeDotsIcon.cjs');
+var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
+var styled$1 = require('../Button/components/styled.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 CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
+const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
+const CrossIconStyling = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
+const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+    `
+      background-color: ${colourPalette.dark};
+
+      & > ${CounterText} {
+        color: ${colors.colors.neutral.grey.lightest};
+      }
+  `}`;
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1fc3r48" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${index.theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
+
+  &:hover {
+    background-color: ${colors.colors.neutral.grey.base};
+    & > ${CounterContainer} {
+      background-color: ${colors.colors.neutral.grey.base};
+      & > ${CounterText} {
+        color: ${colors.colors.neutral.ink.base};
+      }
+    }
+    & > ${Text.Text} {
+      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
+    }
+    & > ${ThreeDotsIconStyling} {
+      color: ${colors.colors.neutral.ink.dark};
+    }
+    & > ${CrossIconStyling} {
+      color: ${colors.colors.neutral.ink.dark};
+    }
   }
-`;exports.Text=r.Text,exports.Contour=g,exports.CounterContainer=p,exports.CounterText=d,exports.CrossIconStyling=x,exports.CustomIconWrapper=m,exports.IconStyling=b,exports.ThreeDotsIconStyling=$,exports.ViewButton=k;
+
+  & > ${Text.Text} {
+    color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
+  }
+  `} ${({ active, colourPalette, customTextColour }) => active &&
+    `
+    background-color: ${colourPalette.lightest};
+
+    & > ${ThreeDotsIconStyling} {
+      color: ${colourPalette.dark};
+    }
+    & > ${CrossIconStyling} {
+      color: ${colourPalette.dark};
+    }
+
+    & > ${Text.Text} {
+      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
+    }
+  `}`;
+const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--i4ro1b" }) `padding:${index.theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
+  &:focus-visible {
+    ${Contour} {
+      background-color: ${colors.colors.neutral.grey.base};
+      & > ${CounterContainer} {
+        background-color: ${colors.colors.neutral.grey.base};
+        & > ${CounterText} {
+          color: ${colors.colors.neutral.ink.base};
+        }
+      }
+      & > ${Text.Text} {
+        color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
+      }
+      & > ${ThreeDotsIconStyling} {
+        color: ${colors.colors.neutral.ink.dark};
+      }
+      & > ${CrossIconStyling} {
+        color: ${colors.colors.neutral.ink.dark};
+      }
+    }
+  `}`;
+const IconStyling = {
+    style: {
+        marginLeft: sizes.sizes.xs,
+        padding: sizes.sizes.xs,
+        height: sizes.sizes.base,
+        width: sizes.sizes.base,
+    },
+};
+const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1cuc9yu" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
+
+exports.Text = Text.Text;
+exports.Contour = Contour;
+exports.CounterContainer = CounterContainer;
+exports.CounterText = CounterText;
+exports.CrossIconStyling = CrossIconStyling;
+exports.CustomIconWrapper = CustomIconWrapper;
+exports.IconStyling = IconStyling;
+exports.ThreeDotsIconStyling = ThreeDotsIconStyling;
+exports.ViewButton = ViewButton;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":[null],"names":["CounterText","Text","ThreeDotsIconStyling","styled","default","ThreeDotsIcon","CrossIconStyling","CrossIcon","CounterContainer"],"mappings":"6bAkBM,MAAAA,YAAqBC,EAAGA,KAAA;;EAO9BC,EAAsBC,EAAAC,QAAAC,gBAAA,GAEtBC,EAAsBH,EAAAC,QAAAG,YAAA,GAsBtBC,EAAaL,EAAAA,QAAAF,EAAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":[null],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}

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

@@ -19,4 +19,3 @@ declare const IconStyling: {
 };
 export declare const CustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { ViewButton, Contour, Text, CounterContainer, CounterText, IconStyling, ThreeDotsIconStyling, CrossIconStyling, };
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/ViewTab/styled.js

@@ -1,50 +1,93 @@
-import n from"styled-components";import{colors as r}from"../../theme/modules/colors.js";import{Text as o}from"../Text/Text.js";import{BaseContainer as e}from"../BaseContainer/BaseContainer.js";import{sizes as t}from"../../theme/modules/sizes.js";import{ThreeDotsIcon as i}from"../../tempIcons/ThreeDotsIcon.js";import{CrossIcon as l}from"../../tempIcons/CrossIcon.js";import{FlatButton as a}from"../Button/components/styled.js";import{theme as s}from"../../theme/index.js";const d=n(o)`
-  line-height: 1;
-`,c=n(i)``,$=n(l)``,u=n(o)`
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  padding: 2px 4px;
-  min-width: 20px;
-  height: 20px;
-  margin-left: 8px;
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { Text } from '../Text/Text.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon.js';
+import { CrossIcon } from '../../tempIcons/CrossIcon.js';
+import { FlatButton } from '../Button/components/styled.js';
+import { theme } from '../../theme/index.js';
 
-  ${({active:n,colourPalette:o})=>n&&`\n      background-color: ${o.dark};\n\n      & > ${d} {\n        color: ${r.neutral.grey.lightest};\n      }\n  `}
-`,m=n(e)`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 40px;
-  border-radius: 4px;
-  padding: ${s.sizes.sm};
-  border: 1px solid transparent;
-  cursor: pointer;
-  background-color: transparent;
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
+const ThreeDotsIconStyling = styled(ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
+const CrossIconStyling = styled(CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
+const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+    `
+      background-color: ${colourPalette.dark};
 
-  ${({customTextColour:n})=>`\n\n  &:hover {\n    background-color: ${r.neutral.grey.base};\n    & > ${u} {\n      background-color: ${r.neutral.grey.base};\n      & > ${d} {\n        color: ${r.neutral.ink.base};\n      }\n    }\n    & > ${o} {\n      color: ${null!=n?n:r.neutral.ink.dark};\n    }\n    & > ${c} {\n      color: ${r.neutral.ink.dark};\n    }\n    & > ${$} {\n      color: ${r.neutral.ink.dark};\n    }\n  }\n\n  & > ${o} {\n    color: ${null!=n?n:r.neutral.ink.dark};\n  }\n  `}
+      & > ${CounterText} {
+        color: ${colors.neutral.grey.lightest};
+      }
+  `}`;
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1fc3r48" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
 
-  ${({active:n,colourPalette:r,customTextColour:e})=>n&&`\n    background-color: ${r.lightest};\n\n    & > ${c} {\n      color: ${r.dark};\n    }\n    & > ${$} {\n      color: ${r.dark};\n    }\n\n    & > ${o} {\n      color: ${null!=e?e:r.dark};\n    }\n  `}
-`,p=n(a)`
-  padding: ${s.sizes.sm};
-  box-sizing: border-box;
-  border-radius: 4px;
-  border: none;
-  position: relative;
-  margin: 0;
-  padding: 0;
-
-  ${({customTextColour:n})=>`\n  &:focus-visible {\n    ${m} {\n      background-color: ${r.neutral.grey.base};\n      & > ${u} {\n        background-color: ${r.neutral.grey.base};\n        & > ${d} {\n          color: ${r.neutral.ink.base};\n        }\n      }\n      & > ${o} {\n        color: ${null!=n?n:r.neutral.ink.dark};\n      }\n      & > ${c} {\n        color: ${r.neutral.ink.dark};\n      }\n      & > ${$} {\n        color: ${r.neutral.ink.dark};\n      }\n    }\n  `}
-`,g={style:{marginLeft:t.xs,padding:t.xs,height:t.base,width:t.base}},k=n.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${t.sm};
+  &:hover {
+    background-color: ${colors.neutral.grey.base};
+    & > ${CounterContainer} {
+      background-color: ${colors.neutral.grey.base};
+      & > ${CounterText} {
+        color: ${colors.neutral.ink.base};
+      }
+    }
+    & > ${Text} {
+      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
+    }
+    & > ${ThreeDotsIconStyling} {
+      color: ${colors.neutral.ink.dark};
+    }
+    & > ${CrossIconStyling} {
+      color: ${colors.neutral.ink.dark};
+    }
+  }
 
-  svg {
-    height: ${t.base};
-    width: ${t.base};
+  & > ${Text} {
+    color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
   }
-`;export{m as Contour,u as CounterContainer,d as CounterText,$ as CrossIconStyling,k as CustomIconWrapper,g as IconStyling,o as Text,c as ThreeDotsIconStyling,p as ViewButton};
+  `} ${({ active, colourPalette, customTextColour }) => active &&
+    `
+    background-color: ${colourPalette.lightest};
+
+    & > ${ThreeDotsIconStyling} {
+      color: ${colourPalette.dark};
+    }
+    & > ${CrossIconStyling} {
+      color: ${colourPalette.dark};
+    }
+
+    & > ${Text} {
+      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
+    }
+  `}`;
+const ViewButton = styled(FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--i4ro1b" }) `padding:${theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
+  &:focus-visible {
+    ${Contour} {
+      background-color: ${colors.neutral.grey.base};
+      & > ${CounterContainer} {
+        background-color: ${colors.neutral.grey.base};
+        & > ${CounterText} {
+          color: ${colors.neutral.ink.base};
+        }
+      }
+      & > ${Text} {
+        color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
+      }
+      & > ${ThreeDotsIconStyling} {
+        color: ${colors.neutral.ink.dark};
+      }
+      & > ${CrossIconStyling} {
+        color: ${colors.neutral.ink.dark};
+      }
+    }
+  `}`;
+const IconStyling = {
+    style: {
+        marginLeft: sizes.xs,
+        padding: sizes.xs,
+        height: sizes.base,
+        width: sizes.base,
+    },
+};
+const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1cuc9yu" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
+
+export { Contour, CounterContainer, CounterText, CrossIconStyling, CustomIconWrapper, IconStyling, Text, ThreeDotsIconStyling, ViewButton };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":[null],"names":["CounterText","Text","ThreeDotsIconStyling","styled","ThreeDotsIcon","CrossIconStyling","CrossIcon","CounterContainer"],"mappings":"ydAkBM,MAAAA,IAAqBC,EAAG;;EAO9BC,EAAsBC,EAAAC,EAAA,GAEtBC,EAAsBF,EAAAG,EAAA,GAsBtBC,EAAaJ,EAAAF,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/ViewTab/types.cjs

@@ -1,2 +1,9 @@
-"use strict";var e;exports.ViewTabTypes=void 0,(e=exports.ViewTabTypes||(exports.ViewTabTypes={})).saved="saved",e.fixed="fixed",e.draft="draft";
+'use strict';
+
+exports.ViewTabTypes = void 0;
+(function (ViewTabTypes) {
+    ViewTabTypes["saved"] = "saved";
+    ViewTabTypes["fixed"] = "fixed";
+    ViewTabTypes["draft"] = "draft";
+})(exports.ViewTabTypes || (exports.ViewTabTypes = {}));
 //# sourceMappingURL=types.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":[null],"names":["ViewTabTypes"],"mappings":"aACA,IAASA,EADoBA,QAAAA,kBAAA,GACpBA,EAKPA,QAAeA,eAAAA,qBAAA,CAAA,IAHO,MAAA,QACtBA,EAAe,MAAA,QACfA,EAAe,MAAA"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":[null],"names":["ViewTabTypes"],"mappings":";;AAGYA;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,EAJWA,oBAAY,KAAZA,oBAAY,GAIvB,EAAA,CAAA,CAAA;;"}