@veeqo/ui 13.4.0 → 13.4.2
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.
- package/dist/components/Alerts/MiniAlert/MiniAlert.cjs +2 -2
- package/dist/components/Alerts/MiniAlert/MiniAlert.cjs.map +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.d.ts +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.js +2 -2
- package/dist/components/Alerts/MiniAlert/MiniAlert.js.map +1 -1
- package/dist/components/Alerts/MiniAlert/types.d.ts +1 -0
- package/dist/components/ViewTab/ViewTab.module.scss.cjs +2 -2
- package/dist/components/ViewTab/ViewTab.module.scss.cjs.map +1 -1
- package/dist/components/ViewTab/ViewTab.module.scss.js +2 -2
- package/dist/components/ViewTab/ViewTab.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
14
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
16
|
|
|
17
|
-
const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, className, ...divProps }) => {
|
|
17
|
+
const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
|
|
18
18
|
const DefaultIcon = constants.IconMap[variant];
|
|
19
19
|
return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
|
|
20
20
|
React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: customIconColour }), className: buildClassnames.buildClassnames([
|
|
@@ -22,7 +22,7 @@ const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, cu
|
|
|
22
22
|
Alerts_module[`${variant}-alert-variant`],
|
|
23
23
|
MiniAlert_module['mini-alert-size'],
|
|
24
24
|
]) }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
|
|
25
|
-
React__default.default.createElement(Text.Text, { variant:
|
|
25
|
+
React__default.default.createElement(Text.Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars.assignCssVars({ textColor: customTitleColour }), className: buildClassnames.buildClassnames([MiniAlert_module.text, MiniAlert_module[`${variant}-variant`]]) }, title)));
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
exports.MiniAlert = MiniAlert;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant
|
|
1
|
+
{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n isBold = true,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant={isBold ? 'bodyBold' : 'body'}\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,qCAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EACN,EAAA,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIL,sBAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;QACVA,sBAAC,CAAA,aAAA,CAAAM,SAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,IAEtE,KAAK,CACD,CACC;AAEd;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MiniAlertProps } from './types';
|
|
3
|
-
export declare const MiniAlert: ({ title, variant, iconSlot, customTitleColour, customIconColour, className, ...divProps }: MiniAlertProps) => React.JSX.Element;
|
|
3
|
+
export declare const MiniAlert: ({ title, variant, iconSlot, customTitleColour, customIconColour, isBold, className, ...divProps }: MiniAlertProps) => React.JSX.Element;
|
|
@@ -8,7 +8,7 @@ import { Text } from '../../Text/Text.js';
|
|
|
8
8
|
import styles from './MiniAlert.module.scss.js';
|
|
9
9
|
import alertStyles from '../Alerts.module.scss.js';
|
|
10
10
|
|
|
11
|
-
const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, className, ...divProps }) => {
|
|
11
|
+
const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
|
|
12
12
|
const DefaultIcon = IconMap[variant];
|
|
13
13
|
return (React__default.createElement(FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
|
|
14
14
|
React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: customIconColour }), className: buildClassnames([
|
|
@@ -16,7 +16,7 @@ const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, cu
|
|
|
16
16
|
alertStyles[`${variant}-alert-variant`],
|
|
17
17
|
styles['mini-alert-size'],
|
|
18
18
|
]) }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
|
|
19
|
-
React__default.createElement(Text, { variant:
|
|
19
|
+
React__default.createElement(Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars({ textColor: customTitleColour }), className: buildClassnames([styles.text, styles[`${variant}-variant`]]) }, title)));
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
export { MiniAlert };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant
|
|
1
|
+
{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n isBold = true,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant={isBold ? 'bodyBold' : 'body'}\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIA,cAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;QACVA,cAAC,CAAA,aAAA,CAAA,IAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,IAEtE,KAAK,CACD,CACC;AAEd;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"contour":"
|
|
5
|
+
___$insertStyle("._contour_sdrdv_1 {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n}\n._contour_sdrdv_1 > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_sdrdv_14 {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n._counterText_sdrdv_23 {\n line-height: 1;\n}\n\nbutton[role=tab]._viewButton_sdrdv_27 {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 {\n background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 {\n background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 > svg {\n color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 {\n background-color: var(--colour-palette-dark);\n /* Force all text elements to be white when active, used when using slot\n *\n * Uses important to override text component, due to styled-components being used.\n */\n /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 ._counterText_sdrdv_23 {\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 span {\n color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover, button[role=tab]._viewButton_sdrdv_27:focus-visible {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 ._counterContainer_sdrdv_14, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 ._counterContainer_sdrdv_14 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 ._counterContainer_sdrdv_14 ._counterText_sdrdv_23, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 ._counterContainer_sdrdv_14 ._counterText_sdrdv_23 {\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 ._counterContainer_sdrdv_14 svg, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 ._counterContainer_sdrdv_14 svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 span, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 svg, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:hover ._counterContainer_sdrdv_14, button[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:focus-visible ._counterContainer_sdrdv_14 {\n background-color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:hover ._counterContainer_sdrdv_14 svg, button[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:focus-visible ._counterContainer_sdrdv_14 svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n}\n\n._iconWrapper_sdrdv_94 {\n margin-right: var(--sizes-sm);\n}\n._iconWrapper_sdrdv_94 svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n\n._iconStyling_sdrdv_102 {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}");
|
|
6
|
+
var styles = {"contour":"_contour_sdrdv_1","counterContainer":"_counterContainer_sdrdv_14","counterText":"_counterText_sdrdv_23","viewButton":"_viewButton_sdrdv_27","active":"_active_sdrdv_33","iconWrapper":"_iconWrapper_sdrdv_94","iconStyling":"_iconStyling_sdrdv_102"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=ViewTab.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewTab.module.scss.cjs","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\
|
|
1
|
+
{"version":3,"file":"ViewTab.module.scss.cjs","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\nbutton[role='tab'].viewButton {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n\n &.active {\n background-color: var(--colour-palette-lightest);\n .contour {\n background-color: var(--colour-palette-lightest);\n\n & > svg {\n color: var(--colour-palette-dark);\n }\n\n > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n }\n\n .counterContainer {\n background-color: var(--colour-palette-dark);\n\n .counterText {\n color: var(--colors-neutral-grey-lightest);\n }\n\n /* Force all text elements to be white when active, used when using slot\n *\n * Uses important to override text component, due to styled-components being used.\n */\n & span {\n color: var(--colors-neutral-grey-lightest) !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n }\n\n &:hover,\n &:focus-visible {\n background-color: var(--colors-neutral-grey-base);\n .contour {\n background-color: var(--colors-neutral-grey-base);\n .counterContainer {\n background-color: var(--colors-neutral-grey-base);\n .counterText {\n color: var(--colors-neutral-ink-base);\n }\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n\n & span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n }\n\n &.active:hover,\n &.active:focus-visible {\n .counterContainer {\n background-color: var(--colors-neutral-ink-base);\n\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n}\n\n.iconWrapper {\n margin-right: var(--sizes-sm);\n\n svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n }\n}\n\n.iconStyling {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,slJAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"contour":"
|
|
3
|
+
insertStyle("._contour_sdrdv_1 {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n}\n._contour_sdrdv_1 > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_sdrdv_14 {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n._counterText_sdrdv_23 {\n line-height: 1;\n}\n\nbutton[role=tab]._viewButton_sdrdv_27 {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 {\n background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 {\n background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 > svg {\n color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 {\n background-color: var(--colour-palette-dark);\n /* Force all text elements to be white when active, used when using slot\n *\n * Uses important to override text component, due to styled-components being used.\n */\n /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 ._counterText_sdrdv_23 {\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 span {\n color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33 ._contour_sdrdv_1 ._counterContainer_sdrdv_14 svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover, button[role=tab]._viewButton_sdrdv_27:focus-visible {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 ._counterContainer_sdrdv_14, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 ._counterContainer_sdrdv_14 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 ._counterContainer_sdrdv_14 ._counterText_sdrdv_23, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 ._counterContainer_sdrdv_14 ._counterText_sdrdv_23 {\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 ._counterContainer_sdrdv_14 svg, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 ._counterContainer_sdrdv_14 svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 span, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_sdrdv_27:hover ._contour_sdrdv_1 svg, button[role=tab]._viewButton_sdrdv_27:focus-visible ._contour_sdrdv_1 svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:hover ._counterContainer_sdrdv_14, button[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:focus-visible ._counterContainer_sdrdv_14 {\n background-color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:hover ._counterContainer_sdrdv_14 svg, button[role=tab]._viewButton_sdrdv_27._active_sdrdv_33:focus-visible ._counterContainer_sdrdv_14 svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n}\n\n._iconWrapper_sdrdv_94 {\n margin-right: var(--sizes-sm);\n}\n._iconWrapper_sdrdv_94 svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n\n._iconStyling_sdrdv_102 {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}");
|
|
4
|
+
var styles = {"contour":"_contour_sdrdv_1","counterContainer":"_counterContainer_sdrdv_14","counterText":"_counterText_sdrdv_23","viewButton":"_viewButton_sdrdv_27","active":"_active_sdrdv_33","iconWrapper":"_iconWrapper_sdrdv_94","iconStyling":"_iconStyling_sdrdv_102"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=ViewTab.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewTab.module.scss.js","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\
|
|
1
|
+
{"version":3,"file":"ViewTab.module.scss.js","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\nbutton[role='tab'].viewButton {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n\n &.active {\n background-color: var(--colour-palette-lightest);\n .contour {\n background-color: var(--colour-palette-lightest);\n\n & > svg {\n color: var(--colour-palette-dark);\n }\n\n > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n }\n\n .counterContainer {\n background-color: var(--colour-palette-dark);\n\n .counterText {\n color: var(--colors-neutral-grey-lightest);\n }\n\n /* Force all text elements to be white when active, used when using slot\n *\n * Uses important to override text component, due to styled-components being used.\n */\n & span {\n color: var(--colors-neutral-grey-lightest) !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n }\n\n &:hover,\n &:focus-visible {\n background-color: var(--colors-neutral-grey-base);\n .contour {\n background-color: var(--colors-neutral-grey-base);\n .counterContainer {\n background-color: var(--colors-neutral-grey-base);\n .counterText {\n color: var(--colors-neutral-ink-base);\n }\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n\n & span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n }\n\n &.active:hover,\n &.active:focus-visible {\n .counterContainer {\n background-color: var(--colors-neutral-ink-base);\n\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n}\n\n.iconWrapper {\n margin-right: var(--sizes-sm);\n\n svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n }\n}\n\n.iconStyling {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,slJAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA;;;;"}
|