npm - @veeqo/ui - Versions diffs - 10.0.1 → 10.1.0 - Mend

@veeqo/ui 10.0.1 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

package/dist/components/View/styled.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: 0 12px;\n border: 1px solid transparent;\n cursor: pointer;\n\n ${({ colourPalette, customTextColour }) => `\n &:hover {\n border: 1px solid ${colourPalette.base};\n background-color: ${colourPalette.lightest};\n }\n\n ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.base};\n\n & > ${CounterText} {\n color: #fff;\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,~~cAAA~~,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;;;MAG1CC,SAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIC,aAAM,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,GAAGH,uBAAM,CAACE,SAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,~~cAAA~~,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,EAAEE,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGJ,uBAAM,CAAC,GAAG,~~oIAGzBI~~,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: 0 12px;\n border: 1px solid transparent;\n cursor: pointer;\n\n ${({ colourPalette, customTextColour }) => `\n &:hover {\n border: 1px solid ${colourPalette.base};\n background-color: ${colourPalette.lightest};\n }\n\n ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.base};\n\n & > ${CounterText} {\n color: #fff;\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,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;;;MAG1CC,SAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIC,aAAM,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,GAAGH,uBAAM,CAACE,SAAI,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,EAAEE,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGJ,uBAAM,CAAC,GAAG,mIAGzBI,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;"}

package/dist/components/View/styled.js CHANGED Viewed

@@ -4,9 +4,9 @@ import { Text } from '../Text/Text.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { sizes } from '../../theme/modules/sizes.js';
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--vzfchk" }) `padding:14px 24px;`;
-const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--oyd9i9" }) `line-height:1;`;
-const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1p0be95" }) `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 }) => `
+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};
@@ -19,7 +19,7 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
     `
     background-color: ${colourPalette.lightest};
   `}`;
-const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1hen4ak" }) `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 &&
+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};
@@ -35,7 +35,7 @@ const IconStyling = {
         width: sizes.base,
     },
 };
-const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1wzcwpm" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{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};}`;
 export { Container, Contour, CounterContainer, CounterText, CustomIconWrapper, IconStyling, Text };
 //# sourceMappingURL=styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: 0 12px;\n border: 1px solid transparent;\n cursor: pointer;\n\n ${({ colourPalette, customTextColour }) => `\n &:hover {\n border: 1px solid ${colourPalette.base};\n background-color: ${colourPalette.lightest};\n }\n\n ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.base};\n\n & > ${CounterText} {\n color: #fff;\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"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,~~cAAA~~,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,~~cAAA~~,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,~~oIAGzB~~,KAAK,CAAC,EAAE,CAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EACX,KAAK,CAAC,IAAI;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' \| 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: 0 12px;\n border: 1px solid transparent;\n cursor: pointer;\n\n ${({ colourPalette, customTextColour }) => `\n &:hover {\n border: 1px solid ${colourPalette.base};\n background-color: ${colourPalette.lightest};\n }\n\n ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.base};\n\n & > ${CounterText} {\n color: #fff;\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"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/ViewTab/styled.cjs CHANGED Viewed

@@ -14,10 +14,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--h7w298" }) `line-height:1;`;
-const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--srai30" }) ``;
-const CrossIconStyling = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--1aruzvl" }) ``;
-const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--17dajvu" }) `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 &&
+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};
@@ -25,7 +25,7 @@ const CounterContainer = styled__default.default(Text.Text).withConfig({ display
         color: ${colors.colors.neutral.grey.lightest};
       }
   `}`;
-const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--ex0imc" }) `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 }) => `
+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};
@@ -64,7 +64,7 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
       color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
     }
   `}`;
-const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--125nec2" }) `padding:${index.theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
+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};
@@ -93,7 +93,7 @@ const IconStyling = {
         width: sizes.sizes.base,
     },
 };
-const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--j41rgu" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{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;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.dark};\n\n & > ${CounterText} {\n color: ${colors.neutral.grey.lightest};\n }\n `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: ${theme.sizes.sm};\n border: 1px solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n ${({ customTextColour }) => `\n\n &:hover {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette, customTextColour }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n\n & > ${ThreeDotsIconStyling} {\n color: ${colourPalette.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colourPalette.dark};\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colourPalette.dark};\n }\n `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n padding: ${theme.sizes.sm};\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n position: relative;\n margin: 0;\n padding: 0;\n\n ${({ customTextColour }) => `\n &:focus-visible {\n ${Contour} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport {\n ViewButton,\n Contour,\n Text,\n CounterContainer,\n CounterText,\n IconStyling,\n ThreeDotsIconStyling,\n CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,WAAW,GAAGA,uBAAM,CAACC,SAAI,CAAC;AAIhC,MAAM,oBAAoB,GAAGD,uBAAM,CAACE,2BAAa,CAAC;AAClD,MAAM,gBAAgB,GAAGF,uBAAM,CAACG,mBAAS,CAAC;AAE1C,MAAM,gBAAgB,GAAGH,uBAAM,CAACC,SAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACsB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;YAEhC,WAAW,CAAA;AACN,eAAA,EAAAG,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;AAE1C,EAAA,CAAA,CAAA;AAGH,MAAM,OAAO,GAAGJ,uBAAM,CAACK,2BAAa,CAAC,~~uLAOxBC~~,WAAK,CAAC,KAAK,CAAC,EAAE,6EAKvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;;AAGN,sBAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;UACtC,gBAAgB,CAAA;AACA,wBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,WAAW,CAAA;AACN,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;UAG9BH,SAAI,CAAA;eACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAEhD,oBAAoB,CAAA;AACf,aAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAE5B,gBAAgB,CAAA;AACX,aAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;;QAI9BH,SAAI,CAAA;aACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAErD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAC5C,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;UAEpC,oBAAoB,CAAA;AACf,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEvB,gBAAgB,CAAA;AACX,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;;UAGvBH,SAAI,CAAA;AACC,aAAA,EAAA,gBAAgB,aAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,aAAa,CAAC,IAAI,CAAA;;AAElD,EAAA,CAAA,CAAA;AAGH,MAAM,UAAU,GAAGD,uBAAM,CAACO,mBAAU,CAAC,~~wFACxBD~~,WAAK,CAAC,KAAK,CAAC,EAAE,6FAQvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;MAExB,OAAO,CAAA;AACa,wBAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,gBAAgB,CAAA;AACA,0BAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;cACtC,WAAW,CAAA;AACN,iBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;YAG9BH,SAAI,CAAA;iBACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIG,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAEhD,oBAAoB,CAAA;AACf,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAE5B,gBAAgB,CAAA;AACX,eAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGrC,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEI,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGR,uBAAM,CAAC,GAAG,~~mIAGzBQ~~,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.dark};\n\n & > ${CounterText} {\n color: ${colors.neutral.grey.lightest};\n }\n `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: ${theme.sizes.sm};\n border: 1px solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n ${({ customTextColour }) => `\n\n &:hover {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette, customTextColour }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n\n & > ${ThreeDotsIconStyling} {\n color: ${colourPalette.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colourPalette.dark};\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colourPalette.dark};\n }\n `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n padding: ${theme.sizes.sm};\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n position: relative;\n margin: 0;\n padding: 0;\n\n ${({ customTextColour }) => `\n &:focus-visible {\n ${Contour} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport {\n ViewButton,\n Contour,\n Text,\n CounterContainer,\n CounterText,\n IconStyling,\n ThreeDotsIconStyling,\n CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}

package/dist/components/ViewTab/styled.js CHANGED Viewed

@@ -8,10 +8,10 @@ import { CrossIcon } from '../../icons/CrossIcon.js';
 import { FlatButton } from '../Button/components/styled.js';
 import { theme } from '../../theme/index.js';
-const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--h7w298" }) `line-height:1;`;
-const ThreeDotsIconStyling = styled(ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--srai30" }) ``;
-const CrossIconStyling = styled(CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--1aruzvl" }) ``;
-const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--17dajvu" }) `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 &&
+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};
@@ -19,7 +19,7 @@ const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterCon
         color: ${colors.neutral.grey.lightest};
       }
   `}`;
-const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--ex0imc" }) `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 }) => `
+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 }) => `
   &:hover {
     background-color: ${colors.neutral.grey.base};
@@ -58,7 +58,7 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
       color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
     }
   `}`;
-const ViewButton = styled(FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--125nec2" }) `padding:${theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
+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};
@@ -87,7 +87,7 @@ const IconStyling = {
         width: sizes.base,
     },
 };
-const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--j41rgu" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.dark};\n\n & > ${CounterText} {\n color: ${colors.neutral.grey.lightest};\n }\n `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: ${theme.sizes.sm};\n border: 1px solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n ${({ customTextColour }) => `\n\n &:hover {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette, customTextColour }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n\n & > ${ThreeDotsIconStyling} {\n color: ${colourPalette.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colourPalette.dark};\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colourPalette.dark};\n }\n `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n padding: ${theme.sizes.sm};\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n position: relative;\n margin: 0;\n padding: 0;\n\n ${({ customTextColour }) => `\n &:focus-visible {\n ${Contour} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport {\n ViewButton,\n Contour,\n Text,\n CounterContainer,\n CounterText,\n IconStyling,\n ThreeDotsIconStyling,\n CrossIconStyling,\n};\n"],"names":[],"mappings":";;;;;;;;;;AAoBA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,oBAAoB,GAAG,MAAM,CAAC,aAAa,CAAC;AAClD,MAAM,gBAAgB,GAAG,MAAM,CAAC,SAAS,CAAC;AAE1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACsB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;YAEhC,WAAW,CAAA;AACN,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;AAE1C,EAAA,CAAA,CAAA;AAGH,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,~~uLAOxB~~,KAAK,CAAC,KAAK,CAAC,EAAE,6EAKvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;;AAGN,sBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;UACtC,gBAAgB,CAAA;AACA,wBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,WAAW,CAAA;AACN,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;UAG9B,IAAI,CAAA;eACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAEhD,oBAAoB,CAAA;AACf,aAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAE5B,gBAAgB,CAAA;AACX,aAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;;QAI9B,IAAI,CAAA;aACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAErD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAC5C,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;UAEpC,oBAAoB,CAAA;AACf,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEvB,gBAAgB,CAAA;AACX,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;;UAGvB,IAAI,CAAA;AACC,aAAA,EAAA,gBAAgB,aAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,aAAa,CAAC,IAAI,CAAA;;AAElD,EAAA,CAAA,CAAA;AAGH,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,~~wFACxB~~,KAAK,CAAC,KAAK,CAAC,EAAE,6FAQvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;MAExB,OAAO,CAAA;AACa,wBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,gBAAgB,CAAA;AACA,0BAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;cACtC,WAAW,CAAA;AACN,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;YAG9B,IAAI,CAAA;iBACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAEhD,oBAAoB,CAAA;AACf,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAE5B,gBAAgB,CAAA;AACX,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGrC,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;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' \| 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.dark};\n\n & > ${CounterText} {\n color: ${colors.neutral.grey.lightest};\n }\n `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: ${theme.sizes.sm};\n border: 1px solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n ${({ customTextColour }) => `\n\n &:hover {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette, customTextColour }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n\n & > ${ThreeDotsIconStyling} {\n color: ${colourPalette.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colourPalette.dark};\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colourPalette.dark};\n }\n `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n padding: ${theme.sizes.sm};\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n position: relative;\n margin: 0;\n padding: 0;\n\n ${({ customTextColour }) => `\n &:focus-visible {\n ${Contour} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport {\n ViewButton,\n Contour,\n Text,\n CounterContainer,\n CounterText,\n IconStyling,\n ThreeDotsIconStyling,\n CrossIconStyling,\n};\n"],"names":[],"mappings":";;;;;;;;;;AAoBA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,oBAAoB,GAAG,MAAM,CAAC,aAAa,CAAC;AAClD,MAAM,gBAAgB,GAAG,MAAM,CAAC,SAAS,CAAC;AAE1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACsB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;YAEhC,WAAW,CAAA;AACN,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;AAE1C,EAAA,CAAA,CAAA;AAGH,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,wLAOxB,KAAK,CAAC,KAAK,CAAC,EAAE,6EAKvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;;AAGN,sBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;UACtC,gBAAgB,CAAA;AACA,wBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,WAAW,CAAA;AACN,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;UAG9B,IAAI,CAAA;eACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAEhD,oBAAoB,CAAA;AACf,aAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;UAE5B,gBAAgB,CAAA;AACX,aAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;;QAI9B,IAAI,CAAA;aACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAErD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAC5C,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;UAEpC,oBAAoB,CAAA;AACf,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEvB,gBAAgB,CAAA;AACX,aAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;;UAGvB,IAAI,CAAA;AACC,aAAA,EAAA,gBAAgB,aAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,aAAa,CAAC,IAAI,CAAA;;AAElD,EAAA,CAAA,CAAA;AAGH,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,uFACxB,KAAK,CAAC,KAAK,CAAC,EAAE,6FAQvB,CAAC,EAAE,gBAAgB,EAAE,KAAK;;MAExB,OAAO,CAAA;AACa,wBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;YACtC,gBAAgB,CAAA;AACA,0BAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;cACtC,WAAW,CAAA;AACN,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;YAG9B,IAAI,CAAA;iBACC,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAEhD,oBAAoB,CAAA;AACf,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;YAE5B,gBAAgB,CAAA;AACX,eAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGrC,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,oIAGzB,KAAK,CAAC,EAAE,CAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EACX,KAAK,CAAC,IAAI;;;;"}

package/dist/components/ViewsContainer/styled.cjs CHANGED Viewed

@@ -14,15 +14,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const ViewsWrapper = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--12onh8s" }) `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--1wfc8qr" }) `background-color:${colors.colors.neutral.grey.lightest};`;
-const StyledLeftIcon = styled__default.default(LeftArrowIcon.LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--1g434cq" }) `color:${colors.colors.neutral.ink.base};`;
-const StyledRightIcon = styled__default.default(RightArrowIcon.RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--12frpwt" }) `color:${colors.colors.neutral.ink.base};`;
-const StyledMenuIcon = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--a4h4to" }) `color:${colors.colors.neutral.ink.base};`;
-const StyledMenuButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--180rfki" }) `background-color:white;&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
-const StyledLeftButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--uz9o0v" }) `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--6mo9hm" }) `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--2io8bw" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
+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;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge /\n scrollbar-width: none; / for Firefox /\n\n ::-webkit-scrollbar {\n display: none; / for Chrome, Safari, and Opera /\n }\n\n gap: 8px;\n height: inherit;\n padding: 8px 6px 8px 12px;\n margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n background-color: white;\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledLeftIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledRightButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledRightIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n padding-right: 8px;\n margin-left: 0;\n\n & > :first-child:last-child {\n border-radius: 4px !important;\n }\n`;\n"],"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,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,~~cAAA~~,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,~~cAAA~~,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,~~aAAA~~,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;;;;;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge /\n scrollbar-width: none; / for Firefox /\n\n ::-webkit-scrollbar {\n display: none; / for Chrome, Safari, and Opera /\n }\n\n gap: 8px;\n height: inherit;\n padding: 8px 6px 8px 12px;\n margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n background-color: white;\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledLeftIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledRightButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledRightIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n padding-right: 8px;\n margin-left: 0;\n\n & > :first-child:last-child {\n border-radius: 4px !important;\n }\n`;\n"],"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.js CHANGED Viewed

@@ -8,15 +8,15 @@ import { colors } from '../../theme/modules/colors.js';
 import { ThreeDotsIcon } from '../../icons/ThreeDotsIcon.js';
 import { InputGroup } from '../InputGroup/index.js';
-const ViewsWrapper = styled(Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--12onh8s" }) `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--1wfc8qr" }) `background-color:${colors.neutral.grey.lightest};`;
-const StyledLeftIcon = styled(LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--1g434cq" }) `color:${colors.neutral.ink.base};`;
-const StyledRightIcon = styled(RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--12frpwt" }) `color:${colors.neutral.ink.base};`;
-const StyledMenuIcon = styled(ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--a4h4to" }) `color:${colors.neutral.ink.base};`;
-const StyledMenuButton = styled(Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--180rfki" }) `background-color:white;&:hover{background-color:${colors.neutral.grey.lightest};}`;
-const StyledLeftButton = styled(Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--uz9o0v" }) `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--6mo9hm" }) `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--2io8bw" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
+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

package/dist/components/ViewsContainer/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge /\n scrollbar-width: none; / for Firefox /\n\n ::-webkit-scrollbar {\n display: none; / for Chrome, Safari, and Opera /\n }\n\n gap: 8px;\n height: inherit;\n padding: 8px 6px 8px 12px;\n margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n background-color: white;\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledLeftIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledRightButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledRightIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n padding-right: 8px;\n margin-left: 0;\n\n & > :first-child:last-child {\n border-radius: 4px !important;\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;;MASa,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACL,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,~~aAAA~~,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACN,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../icons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge /\n scrollbar-width: none; / for Firefox /\n\n ::-webkit-scrollbar {\n display: none; / for Chrome, Safari, and Opera /\n }\n\n gap: 8px;\n height: inherit;\n padding: 8px 6px 8px 12px;\n margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n background-color: white;\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledLeftIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledRightButton = styled(Button)`\n background-color: white;\n\n &:disabled {\n background-color: white;\n ${StyledRightIcon} {\n color: ${colors.neutral.ink.lightest};\n }\n }\n\n &:hover {\n background-color: ${colors.neutral.grey.lightest};\n }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n padding-right: 8px;\n margin-left: 0;\n\n & > :first-child:last-child {\n border-radius: 4px !important;\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;;MASa,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACL,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACN,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;"}

package/dist/hoc/withLabels/styled.cjs CHANGED Viewed

@@ -11,11 +11,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const RootStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--8t7kme" }) `position:relative;& > * + *{margin-top:${index.theme.sizes.sm};}`;
-const Label = styled__default.default.label.withConfig({ displayName: "vui--Label", componentId: "vui--17v8nzf" }) `${utils.getTextStyles(index.theme.text.inputLabel)} display:block;`;
-const Hint = styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--zb608e" }) `${utils.getTextStyles(index.theme.text.hintText)} display:block;margin-top:${index.theme.sizes.xs};font-size:0.875rem;line-height:${index.theme.sizes[5]};`;
-const Error = styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--1u9n7dv" }) `${utils.getTextStyles(index.theme.text.error)} display:block;font-weight:normal;`;
-const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1w0ilq2" }) `display:block;&-hoverable{display:flex;}`;
+const RootStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--6dyff7" }) `position:relative;& > * + *{margin-top:${index.theme.sizes.sm};}`;
+const Label = styled__default.default.label.withConfig({ displayName: "vui--Label", componentId: "vui--s2tcx4" }) `${utils.getTextStyles(index.theme.text.inputLabel)} display:block;`;
+const Hint = styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--630olw" }) `${utils.getTextStyles(index.theme.text.hintText)} display:block;margin-top:${index.theme.sizes.xs};font-size:0.875rem;line-height:${index.theme.sizes[5]};`;
+const Error = styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--1kipfxt" }) `${utils.getTextStyles(index.theme.text.error)} display:block;font-weight:normal;`;
+const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1haf85r" }) `display:block;&-hoverable{display:flex;}`;
 exports.BlockTooltip = BlockTooltip;
 exports.Error = Error;

package/dist/hoc/withLabels/styled.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n position: relative;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const Label = styled.label`\n ${getTextStyles(theme.text.inputLabel)}\n display: block;\n`;\n\nexport const Hint = styled.span`\n ${getTextStyles(theme.text.hintText)}\n display: block;\n margin-top: ${theme.sizes.xs};\n font-size: 0.875rem;\n line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n ${getTextStyles(theme.text.error)}\n display: block;\n font-weight: normal;\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":["styled","Stack","theme","getTextStyles","Tooltip"],"mappings":";;;;;;;;;;;;;AAKO,MAAM,SAAS,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpBC,WAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAGF,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,EAC7BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtBA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEbA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC;MAKtB,YAAY,GAAGF,uBAAM,CAACI,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;;;;;"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n position: relative;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const Label = styled.label`\n ${getTextStyles(theme.text.inputLabel)}\n display: block;\n`;\n\nexport const Hint = styled.span`\n ${getTextStyles(theme.text.hintText)}\n display: block;\n margin-top: ${theme.sizes.xs};\n font-size: 0.875rem;\n line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n ${getTextStyles(theme.text.error)}\n display: block;\n font-weight: normal;\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":["styled","Stack","theme","getTextStyles","Tooltip"],"mappings":";;;;;;;;;;;;;AAKO,MAAM,SAAS,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpBC,WAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAGF,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtBA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEbA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC;MAKtB,YAAY,GAAGF,uBAAM,CAACI,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;;;;;"}

package/dist/hoc/withLabels/styled.js CHANGED Viewed

@@ -5,11 +5,11 @@ import { Tooltip } from '../../components/Tooltip/Tooltip.js';
 import { theme } from '../../theme/index.js';
 import { getTextStyles } from '../../theme/utils.js';
-const RootStack = styled(Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--8t7kme" }) `position:relative;& > * + *{margin-top:${theme.sizes.sm};}`;
-const Label = styled.label.withConfig({ displayName: "vui--Label", componentId: "vui--17v8nzf" }) `${getTextStyles(theme.text.inputLabel)} display:block;`;
-const Hint = styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--zb608e" }) `${getTextStyles(theme.text.hintText)} display:block;margin-top:${theme.sizes.xs};font-size:0.875rem;line-height:${theme.sizes[5]};`;
-const Error = styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--1u9n7dv" }) `${getTextStyles(theme.text.error)} display:block;font-weight:normal;`;
-const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1w0ilq2" }) `display:block;&-hoverable{display:flex;}`;
+const RootStack = styled(Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--6dyff7" }) `position:relative;& > * + *{margin-top:${theme.sizes.sm};}`;
+const Label = styled.label.withConfig({ displayName: "vui--Label", componentId: "vui--s2tcx4" }) `${getTextStyles(theme.text.inputLabel)} display:block;`;
+const Hint = styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--630olw" }) `${getTextStyles(theme.text.hintText)} display:block;margin-top:${theme.sizes.xs};font-size:0.875rem;line-height:${theme.sizes[5]};`;
+const Error = styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--1kipfxt" }) `${getTextStyles(theme.text.error)} display:block;font-weight:normal;`;
+const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1haf85r" }) `display:block;&-hoverable{display:flex;}`;
 export { BlockTooltip, Error, Hint, Label, RootStack };
 //# sourceMappingURL=styled.js.map

package/dist/hoc/withLabels/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n position: relative;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const Label = styled.label`\n ${getTextStyles(theme.text.inputLabel)}\n display: block;\n`;\n\nexport const Hint = styled.span`\n ${getTextStyles(theme.text.hintText)}\n display: block;\n margin-top: ${theme.sizes.xs};\n font-size: 0.875rem;\n line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n ${getTextStyles(theme.text.error)}\n display: block;\n font-weight: normal;\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":[],"mappings":";;;;;;;AAKO,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpB,KAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,~~cAAA~~,EAAA,CAAA,CAAA,CAAA,EAC7B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEb,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;MAKtB,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { getTextStyles, theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n position: relative;\n\n & > * + * {\n margin-top: ${theme.sizes.sm};\n }\n`;\n\nexport const Label = styled.label`\n ${getTextStyles(theme.text.inputLabel)}\n display: block;\n`;\n\nexport const Hint = styled.span`\n ${getTextStyles(theme.text.hintText)}\n display: block;\n margin-top: ${theme.sizes.xs};\n font-size: 0.875rem;\n line-height: ${theme.sizes[5]};\n`;\n\nexport const Error = styled.span`\n ${getTextStyles(theme.text.error)}\n display: block;\n font-weight: normal;\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":[],"mappings":";;;;;;;AAKO,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpB,KAAK,CAAC,KAAK,CAAC,EAAE;AAInB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAIjC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEb,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAGlB,MAAA,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;MAKtB,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",