@laerdal/life-react-components 2.1.1-dev.23 → 2.1.1-dev.24
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/Tile/TileCommonItems.cjs +2 -2
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +2 -2
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Tile/TileHeader.cjs +18 -10
- package/dist/Tile/TileHeader.cjs.map +1 -1
- package/dist/Tile/TileHeader.js +18 -10
- package/dist/Tile/TileHeader.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.d.ts +2 -1
- package/dist/Tile/TileTypes.js.map +1 -1
- package/dist/Toggles/ToggleSwitch.cjs +1 -11
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.js +2 -12
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/Toggles/TogglerStyles.cjs +1 -1
- package/dist/Toggles/TogglerStyles.cjs.map +1 -1
- package/dist/Toggles/TogglerStyles.js +1 -1
- package/dist/Toggles/TogglerStyles.js.map +1 -1
- package/package.json +1 -1
|
@@ -24,11 +24,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
24
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
25
|
var TileNoteText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
|
|
26
26
|
exports.TileNoteText = TileNoteText;
|
|
27
|
-
var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
27
|
+
var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["display: flex;"])));
|
|
28
28
|
exports.TileNoteIcon = TileNoteIcon;
|
|
29
29
|
var TileNoteWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n &.small {\n gap: 4px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n gap: 6px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ", " {\n width: 20px;\n height: 20px;\n }\n\n ", " {\n ", "\n }\n }\n"])), _styles.COLORS.neutral_600, TileNoteIcon, TileNoteText, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null));
|
|
30
30
|
exports.TileNoteWrapper = TileNoteWrapper;
|
|
31
|
-
var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
31
|
+
var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["display: flex"])));
|
|
32
32
|
exports.TileHyperLinkIcon = TileHyperLinkIcon;
|
|
33
33
|
var TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
34
34
|
exports.TileHyperLinkText = TileHyperLinkText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div
|
|
1
|
+
{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n <TileHyperLinkText>{linkText}</TileHyperLinkText>\n </HyperLink>\n </TileHyperLinkWrapper>\n }\n case 'button': {\n const {buttonText, componentType, ...rest} = item;\n return <Button key={key}\n size={size}\n {...rest}>\n {buttonText}\n </Button>\n }\n }\n}\n"],"mappings":"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"}
|
|
@@ -17,9 +17,9 @@ import { Size } from '../types';
|
|
|
17
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
18
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
19
|
export var TileNoteText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
|
|
20
|
-
export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
|
20
|
+
export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display: flex;"])));
|
|
21
21
|
export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n &.small {\n gap: 4px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n gap: 6px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ", " {\n width: 20px;\n height: 20px;\n }\n\n ", " {\n ", "\n }\n }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
|
|
22
|
-
export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
|
|
22
|
+
export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display: flex"])));
|
|
23
23
|
export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
|
|
24
24
|
export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: max-content;\n\n ", "\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ", " {\n width: 24px;\n height: 24px;\n }\n\n ", " {\n ", "\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ", " {\n width: 24px;\n height: 24px;\n }\n\n ", " {\n ", "\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ", " {\n width: 28px;\n height: 28px;\n }\n\n ", " {\n ", "\n }\n\n a {\n gap: 8px;\n }\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
|
|
25
25
|
export var RenderTileItem = function RenderTileItem(item, size) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div
|
|
1
|
+
{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n <TileHyperLinkText>{linkText}</TileHyperLinkText>\n </HyperLink>\n </TileHyperLinkWrapper>\n }\n case 'button': {\n const {buttonText, componentType, ...rest} = item;\n return <Button key={key}\n size={size}\n {...rest}>\n {buttonText}\n </Button>\n }\n }\n}\n"],"mappings":"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"}
|
package/dist/Tile/TileHeader.cjs
CHANGED
|
@@ -15,15 +15,17 @@ var _Button = require("../Button");
|
|
|
15
15
|
var _SystemIcons = require("../icons/systemicons/SystemIcons");
|
|
16
16
|
var _TileCommonItems = require("./TileCommonItems");
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
19
|
+
var SubtitleIconContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n"])));
|
|
20
|
+
var SubtitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n display: flex;\n align-items: center;\n gap: 4px;\n"])), _styles.COLORS.neutral_600);
|
|
21
|
+
var TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), _styles.COLORS.black);
|
|
22
|
+
var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n"])));
|
|
23
|
+
var ActionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
24
|
+
var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n padding: 12px 20px;\n min-height: 64px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 16px 24px;\n min-height: 72px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n"])), SubtitleContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
24
25
|
var TileHeader = function TileHeader(_ref) {
|
|
25
26
|
var title = _ref.title,
|
|
26
|
-
|
|
27
|
+
subtitle = _ref.subtitle,
|
|
28
|
+
subtitleIcon = _ref.subtitleIcon,
|
|
27
29
|
tooltip = _ref.tooltip,
|
|
28
30
|
buttons = _ref.buttons,
|
|
29
31
|
size = _ref.size;
|
|
@@ -52,10 +54,16 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
52
54
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
53
55
|
className: size,
|
|
54
56
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
|
|
55
|
-
children: [
|
|
56
|
-
children: tagLine
|
|
57
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
|
|
57
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
|
|
58
58
|
children: title
|
|
59
|
+
}), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(SubtitleContainer, {
|
|
60
|
+
children: [subtitleIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubtitleIconContainer, {
|
|
61
|
+
children: /*#__PURE__*/_react.default.cloneElement(subtitleIcon, {
|
|
62
|
+
size: size === _types.Size.Large ? '20px' : '16px'
|
|
63
|
+
})
|
|
64
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
65
|
+
children: subtitle
|
|
66
|
+
})]
|
|
59
67
|
})]
|
|
60
68
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionContainer, {
|
|
61
69
|
children: [renderTooltip(), buttons && buttons.map(function (item, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileHeader.cjs","names":["
|
|
1
|
+
{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n`;\n\nconst SubtitleContainer = styled.div`\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ${SubtitleContainer} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n\n &.medium {\n padding: 12px 20px;\n min-height: 64px;\n\n ${SubtitleContainer} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n\n &.large {\n padding: 16px 24px;\n min-height: 72px;\n\n ${SubtitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n title,\n subtitle,\n subtitleIcon,\n tooltip,\n buttons,\n size\n }) => {\n\n const renderTooltip = () =>\n !!tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n align=\"center\"\n position=\"bottom\"\n withArrow={false}\n label={tooltip}>\n <IconButton variant=\"secondary\"\n shape=\"circular\"\n style={{cursor: 'help'}}\n action={() => {\n }}>\n <Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n\n return (\n <Wrapper className={size}>\n <TextContainer>\n <TitleContainer>{title}</TitleContainer>\n {\n subtitle &&\n <SubtitleContainer>\n {\n subtitleIcon &&\n <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n }\n <span>{subtitle}</span>\n </SubtitleContainer>\n }\n </TextContainer>\n <ActionContainer>\n {renderTooltip()}\n {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n </ActionContainer>\n </Wrapper>\n )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
|
package/dist/Tile/TileHeader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Size } from '../types';
|
|
5
5
|
import styled from 'styled-components';
|
|
@@ -10,14 +10,16 @@ import { Help } from '../icons/systemicons/SystemIcons';
|
|
|
10
10
|
import { RenderTileItem } from './TileCommonItems';
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
13
|
+
var SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n"])));
|
|
14
|
+
var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n align-items: center;\n gap: 4px;\n"])), COLORS.neutral_600);
|
|
15
|
+
var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n"])), COLORS.black);
|
|
16
|
+
var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n"])));
|
|
17
|
+
var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
18
|
+
var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n padding: 12px 20px;\n min-height: 64px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 16px 24px;\n min-height: 72px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
|
|
18
19
|
var TileHeader = function TileHeader(_ref) {
|
|
19
20
|
var title = _ref.title,
|
|
20
|
-
|
|
21
|
+
subtitle = _ref.subtitle,
|
|
22
|
+
subtitleIcon = _ref.subtitleIcon,
|
|
21
23
|
tooltip = _ref.tooltip,
|
|
22
24
|
buttons = _ref.buttons,
|
|
23
25
|
size = _ref.size;
|
|
@@ -46,10 +48,16 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
46
48
|
return /*#__PURE__*/_jsxs(Wrapper, {
|
|
47
49
|
className: size,
|
|
48
50
|
children: [/*#__PURE__*/_jsxs(TextContainer, {
|
|
49
|
-
children: [
|
|
50
|
-
children: tagLine
|
|
51
|
-
}), /*#__PURE__*/_jsx(TitleContainer, {
|
|
51
|
+
children: [/*#__PURE__*/_jsx(TitleContainer, {
|
|
52
52
|
children: title
|
|
53
|
+
}), subtitle && /*#__PURE__*/_jsxs(SubtitleContainer, {
|
|
54
|
+
children: [subtitleIcon && /*#__PURE__*/_jsx(SubtitleIconContainer, {
|
|
55
|
+
children: /*#__PURE__*/React.cloneElement(subtitleIcon, {
|
|
56
|
+
size: size === Size.Large ? '20px' : '16px'
|
|
57
|
+
})
|
|
58
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
59
|
+
children: subtitle
|
|
60
|
+
})]
|
|
53
61
|
})]
|
|
54
62
|
}), /*#__PURE__*/_jsxs(ActionContainer, {
|
|
55
63
|
children: [renderTooltip(), buttons && buttons.map(function (item, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","
|
|
1
|
+
{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n`;\n\nconst SubtitleContainer = styled.div`\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ${SubtitleContainer} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n\n &.medium {\n padding: 12px 20px;\n min-height: 64px;\n\n ${SubtitleContainer} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n\n &.large {\n padding: 16px 24px;\n min-height: 72px;\n\n ${SubtitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n title,\n subtitle,\n subtitleIcon,\n tooltip,\n buttons,\n size\n }) => {\n\n const renderTooltip = () =>\n !!tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n align=\"center\"\n position=\"bottom\"\n withArrow={false}\n label={tooltip}>\n <IconButton variant=\"secondary\"\n shape=\"circular\"\n style={{cursor: 'help'}}\n action={() => {\n }}>\n <Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n\n return (\n <Wrapper className={size}>\n <TextContainer>\n <TitleContainer>{title}</TitleContainer>\n {\n subtitle &&\n <SubtitleContainer>\n {\n subtitleIcon &&\n <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n }\n <span>{subtitle}</span>\n </SubtitleContainer>\n }\n </TextContainer>\n <ActionContainer>\n {renderTooltip()}\n {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n </ActionContainer>\n </Wrapper>\n )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n
|
|
1
|
+
{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n subtitle?: string;\n subtitleIcon?: React.ReactNode;\n\n buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n leftItem?: TileNote | TileHyperLink | TileStandardButton;\n buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n style?: {\n width?: string,\n minWidth?: string,\n maxWidth?: string,\n height?: string,\n minHeight?: string,\n maxHeight?: string,\n };\n\n size?: Size.Small | Size.Medium | Size.Large\n\n header?: TileHeaderProps;\n footer?: TileFooterProps;\n}\n"],"mappings":""}
|
package/dist/Tile/TileTypes.d.ts
CHANGED
|
@@ -35,7 +35,8 @@ export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButt
|
|
|
35
35
|
export interface TileHeaderProps {
|
|
36
36
|
title: string;
|
|
37
37
|
tooltip?: string;
|
|
38
|
-
|
|
38
|
+
subtitle?: string;
|
|
39
|
+
subtitleIcon?: React.ReactNode;
|
|
39
40
|
buttons?: HeaderButtons[];
|
|
40
41
|
}
|
|
41
42
|
export interface TileFooterProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n
|
|
1
|
+
{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n subtitle?: string;\n subtitleIcon?: React.ReactNode;\n\n buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n leftItem?: TileNote | TileHyperLink | TileStandardButton;\n buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n style?: {\n width?: string,\n minWidth?: string,\n maxWidth?: string,\n height?: string,\n minHeight?: string,\n maxHeight?: string,\n };\n\n size?: Size.Small | Size.Medium | Size.Large\n\n header?: TileHeaderProps;\n footer?: TileFooterProps;\n}\n"],"mappings":""}
|
|
@@ -8,20 +8,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
12
11
|
var React = _interopRequireWildcard(require("react"));
|
|
13
12
|
var _TogglerStyles = require("./TogglerStyles");
|
|
14
13
|
var _ = require("..");
|
|
15
14
|
var _common = require("../common");
|
|
16
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
17
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
16
|
var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
|
|
19
|
-
var _templateObject;
|
|
20
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
22
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
|
-
var CheckmarkContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 2px;\n"])));
|
|
25
21
|
var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
26
22
|
var _size;
|
|
27
23
|
var id = _ref.id,
|
|
@@ -63,13 +59,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
63
59
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitchContainer, {
|
|
64
60
|
id: "switchContainer",
|
|
65
61
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitch, {
|
|
66
|
-
className: isSemantic ? 'semantic' : ''
|
|
67
|
-
children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
|
|
68
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.CheckMark, {
|
|
69
|
-
size: '14px',
|
|
70
|
-
color: _.COLORS.white
|
|
71
|
-
})
|
|
72
|
-
})
|
|
62
|
+
className: isSemantic ? 'semantic' : ''
|
|
73
63
|
})
|
|
74
64
|
}), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
75
65
|
className: 'label',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleSwitch.cjs","names":["
|
|
1
|
+
{"version":3,"file":"ToggleSwitch.cjs","names":["ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {Size} from '..';\nimport {useFocusVisibleRef} from '../common';\n\nconst ToggleSwitch = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\n /**\n * Does all required pre-requisites and toggles the switcher state.\n */\n const toggle = () => {\n // If disabled, don't do anything\n if (disabled) return;\n\n // Toggle state change\n onToggle(!selected);\n };\n\n const focusVisibleRef = useFocusVisibleRef([]);\n\n React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={(e) => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer id=\"switchContainer\">\n <Switch className={isSemantic ? 'semantic' : ''} />\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;;;;AAGA;AAUA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG;MAAG;IAAG,EAC7B,EACvBD,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
3
|
var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
|
|
5
|
-
var _templateObject;
|
|
6
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
6
|
/**
|
|
@@ -18,12 +16,10 @@ import * as React from 'react';
|
|
|
18
16
|
* Import custom styles.
|
|
19
17
|
*/
|
|
20
18
|
import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
|
|
21
|
-
import {
|
|
19
|
+
import { Size } from '..';
|
|
22
20
|
import { useFocusVisibleRef } from '../common';
|
|
23
|
-
import styled from "styled-components";
|
|
24
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
22
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
|
-
var CheckmarkContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 2px;\n"])));
|
|
27
23
|
var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
28
24
|
var _size;
|
|
29
25
|
var id = _ref.id,
|
|
@@ -65,13 +61,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
65
61
|
children: [/*#__PURE__*/_jsx(ToggleSwitchContainer, {
|
|
66
62
|
id: "switchContainer",
|
|
67
63
|
children: /*#__PURE__*/_jsx(Switch, {
|
|
68
|
-
className: isSemantic ? 'semantic' : ''
|
|
69
|
-
children: selected && /*#__PURE__*/_jsx(CheckmarkContainer, {
|
|
70
|
-
children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
|
|
71
|
-
size: '14px',
|
|
72
|
-
color: COLORS.white
|
|
73
|
-
})
|
|
74
|
-
})
|
|
64
|
+
className: isSemantic ? 'semantic' : ''
|
|
75
65
|
})
|
|
76
66
|
}), label && /*#__PURE__*/_jsx("label", {
|
|
77
67
|
className: 'label',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","
|
|
1
|
+
{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","useFocusVisibleRef","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {Size} from '..';\nimport {useFocusVisibleRef} from '../common';\n\nconst ToggleSwitch = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\n /**\n * Does all required pre-requisites and toggles the switcher state.\n */\n const toggle = () => {\n // If disabled, don't do anything\n if (disabled) return;\n\n // Toggle state change\n onToggle(!selected);\n };\n\n const focusVisibleRef = useFocusVisibleRef([]);\n\n React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={(e) => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer id=\"switchContainer\">\n <Switch className={isSemantic ? 'semantic' : ''} />\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,IAAI,QAAO,IAAI;AACvB,SAAQC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAE7C,IAAMJ,YAAY,gBAAGF,KAAK,CAACO,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGb,kBAAkB,CAAC,EAAE,CAAC;EAE9CN,KAAK,CAACoB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIT,IAAI,CAACiB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG;MAAG;IAAG,EAC7B,EACvBD,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAeV,YAAY"}
|
|
@@ -19,6 +19,6 @@ var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateOb
|
|
|
19
19
|
exports.StyledSwitch = StyledSwitch;
|
|
20
20
|
var ToggleSwitchContainer = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n"])));
|
|
21
21
|
exports.ToggleSwitchContainer = ToggleSwitchContainer;
|
|
22
|
-
var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display:
|
|
22
|
+
var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ", ";\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
|
|
23
23
|
exports.ToggleSwitch = ToggleSwitch;
|
|
24
24
|
//# sourceMappingURL=TogglerStyles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled).focus-visible {\n ${focusStyles}\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display:
|
|
1
|
+
{"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled).focus-visible {\n ${focusStyles}\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ${COLORS.neutral_500};\n border-radius: 100px;\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ${COLORS.white};\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n`;\n"],"mappings":";;;;;;;;;AAGA;AAKA;AACA;AAAmH;AAAA;AAAA;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,otBAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,OACVC,qBAAG,05BAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACS,WAAW,EAMlBT,cAAM,CAACU,WAAW,EAIlBV,cAAM,CAACW,UAAU,EAInBX,cAAM,CAACY,WAAW,EAGhBZ,cAAM,CAACU,WAAW,QAU5CF,qBAAG,2kBAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACa,WAAW,EAMlBb,cAAM,CAACc,YAAY,EAInBd,cAAM,CAACW,UAAU,CAG1C;AAAA,GAEHI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGrB,yBAAM,CAACsB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGvB,yBAAM,CAACwB,IAAI,8rBAWjBnB,cAAM,CAACoB,WAAW,EAIhBpB,cAAM,CAACc,YAAY,EAUnBd,cAAM,CAACqB,KAAK,CAMnC;AAAC"}
|
|
@@ -14,5 +14,5 @@ export var StyledSwitch = styled.div(_templateObject || (_templateObject = _tagg
|
|
|
14
14
|
return props.selected ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n label:first-of-type span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n "])), COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n "])), COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20);
|
|
15
15
|
}, focusStyles);
|
|
16
16
|
export var ToggleSwitchContainer = styled.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n"])));
|
|
17
|
-
export var ToggleSwitch = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n display:
|
|
17
|
+
export var ToggleSwitch = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ", ";\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
|
|
18
18
|
//# sourceMappingURL=TogglerStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled).focus-visible {\n ${focusStyles}\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display:
|
|
1
|
+
{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled).focus-visible {\n ${focusStyles}\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ${COLORS.neutral_500};\n border-radius: 100px;\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ${COLORS.white};\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAAQA,MAAM,EAAEC,WAAW,QAAO,WAAW;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAElH,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAG,ssBAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAGpDX,MAAM,CAACY,WAAW,EAaLZ,MAAM,CAACa,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,GACVZ,GAAG,24BAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACgB,WAAW,EAMlBhB,MAAM,CAACiB,WAAW,EAIlBjB,MAAM,CAACkB,UAAU,EAInBlB,MAAM,CAACmB,WAAW,EAGhBnB,MAAM,CAACiB,WAAW,IAU5Cd,GAAG,4jBAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACoB,WAAW,EAMlBpB,MAAM,CAACqB,YAAY,EAInBrB,MAAM,CAACkB,UAAU,CAG1C;AAAA,GAEHjB,WAAW,CAMhB;AAED,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAI,grBAWjBzB,MAAM,CAAC0B,WAAW,EAIhB1B,MAAM,CAACqB,YAAY,EAUnBrB,MAAM,CAAC2B,KAAK,CAMnC"}
|