@laerdal/life-react-components 1.5.1-dev.18 → 1.5.1-dev.19

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.
@@ -33,7 +33,7 @@ var SegmentControlItemBackground = _styledComponents.default.div(_templateObject
33
33
 
34
34
  exports.SegmentControlItemBackground = SegmentControlItemBackground;
35
35
 
36
- var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
36
+ var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
37
37
 
38
38
  exports.SegmentControlItemWrapper = SegmentControlItemWrapper;
39
39
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAGO,IAAMA,yBAAyB,GAAGC,0BAAOC,GAAV,2QAS3BC,eAAOC,WAToB,CAA/B;;;;AAYA,IAAMC,4BAA4B,GAAGJ,0BAAOC,GAAV,sNAKnBC,eAAOG,UALY,CAAlC;;;;AASA,IAAMC,yBAAyB,GAAGN,0BAAOC,GAAV,0mCAUvBM,kBAAUC,KAVa,EAahCT,yBAbgC,EAcZG,eAAOO,WAdK,EAevBP,eAAOQ,WAfgB,EAqBvBH,kBAAUI,KArBa,EAuBhCZ,yBAvBgC,EAwBZG,eAAOO,WAxBK,EAyBvBP,eAAOQ,WAzBgB,EA8BvBH,kBAAUK,MA9Ba,EAgChCb,yBAhCgC,EAiCZG,eAAOW,WAjCK,EAkCvBX,eAAOY,WAlCgB,EA0ChCf,yBA1CgC,EA4CvBG,eAAOa,WA5CgB,EAoDhChB,yBApDgC,EAqDZG,eAAOc,WArDK,EAsDvBd,eAAOe,KAtDgB,EA8DhClB,yBA9DgC,EA+DZG,eAAOgB,WA/DK,EAgEvBhB,eAAOa,WAhEgB,CAA/B;;;;AAqEA,IAAMI,qBAAqB,GAAGnB,0BAAOC,GAAV,ynBAM9BK,yBAN8B,EAO5BF,4BAP4B,EAc9BE,yBAd8B,EAe5BF,4BAf4B,EAwB5BL,yBAxB4B,EAyB1B,+BAAkBqB,2BAAmBC,IAArC,EAA2C,IAA3C,CAzB0B,EA+B5BtB,yBA/B4B,EAgC1B,+BAAkBqB,2BAAmBC,IAArC,EAA2C,IAA3C,CAhC0B,CAA3B;;;;AAoDP,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHGC,YAAKC,MAGR;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,QACI,QADJA,QACI;;AAC1E,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAyCC,IAAzC,EAAsE;AACvF,QAAID,CAAC,CAACE,GAAF,KAAU,OAAV,IAAqBF,CAAC,CAACE,GAAF,KAAU,GAAnC,EAAwC;AAAA;;AACtC;AACA,mBAAAC,QAAQ,UAAR,uEAAUC,aAAV,gFAAyBC,IAAzB;AACA,OAACJ,IAAI,CAACK,QAAN,IAAkBT,QAAQ,CAACI,IAAI,CAACC,GAAN,CAA1B;AACD;AACF,GAND;;AAQA,MAAMK,OAAO,GAAG,SAAVA,OAAU,CAACP,CAAD,EAAsBC,IAAtB,EAAmD;AACjE,KAACA,IAAI,CAACK,QAAN,IAAkBT,QAAQ,CAACI,IAAI,CAACC,GAAN,CAA1B;AACD,GAFD;;AAIA,sBACE,qBAAC,qBAAD;AAAuB,IAAA,SAAS,EAAER,IAAlC;AAAA,cACGD,KAAK,CAACe,GAAN,CAAU,UAACC,CAAD,EAAIC,CAAJ;AAAA,0BACT,qBAAC,yBAAD;AAC2B,QAAA,SAAS,EAAE,CAACD,CAAC,CAACH,QAAF,GAAa,UAAb,GAA0B,EAA3B,KAAkCG,CAAC,CAACP,GAAF,KAAUJ,QAAV,GAAqB,WAArB,GAAmC,EAArE,CADtC;AAE2B,QAAA,QAAQ,EAAEW,CAAC,CAACH,QAAF,IAAcG,CAAC,CAACP,GAAF,KAAUJ,QAAxB,GAAmC,CAAC,CAApC,GAAwC,CAF7E;AAG2B,QAAA,OAAO,EAAEW,CAAC,CAACH,QAAF,GAAaK,SAAb,GAAyB,UAACX,CAAD;AAAA,iBAAOO,OAAO,CAACP,CAAD,EAAIS,CAAJ,CAAd;AAAA,SAH7D;AAI2B,QAAA,WAAW,EAAEG,iCAJxC;AAK2B,QAAA,UAAU,EAAEH,CAAC,CAACH,QAAF,GAAaK,SAAb,GAAyB,UAACX,CAAD;AAAA,iBAAOD,UAAU,CAACC,CAAD,EAAIS,CAAJ,CAAjB;AAAA,SALhE;AAAA,+BAME,qBAAC,4BAAD;AAAA,iCACE,qBAAC,yBAAD;AAAA,sBACGA,CAAC,CAACI;AADL;AADF;AANF,SAAgCJ,CAAC,CAACP,GAAF,IAASQ,CAAzC,CADS;AAAA,KAAV;AADH,IADF;AAkBD,CApCD;;;AANEjB,EAAAA,K;AANAS,IAAAA,G;AACAI,IAAAA,Q;AACAO,IAAAA,O;;AAKAf,EAAAA,Q;AACAD,EAAAA,Q;;eA0CaL,c","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.cjs"}
1
+ {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.cjs"}
@@ -11,7 +11,7 @@ import { defaultOnMouseDownHandler } from '../common';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ", ";\n"])), COLORS.neutral_600);
13
13
  export var SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n padding: 4px 0px;\n"])), COLORS.neutral_20);
14
- export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
14
+ export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
15
15
  export var SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ", ":first-of-type {\n ", " {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ", ":last-of-type {\n ", " {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ", " {\n ", "\n min-height: 32px;\n }\n }\n\n &.medium {\n ", " {\n ", "\n min-height: 40px;\n }\n }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
16
16
 
17
17
  var SegmentControl = function SegmentControl(_ref) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.js"}
1
+ {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.js"}
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.default = void 0;
11
+
12
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var React = _interopRequireWildcard(require("react"));
17
+
18
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
19
+
20
+ var _ = require("..");
21
+
22
+ var _jsxRuntime = require("react/jsx-runtime");
23
+
24
+ var _templateObject, _templateObject2, _templateObject3;
25
+
26
+ 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); }
27
+
28
+ 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; }
29
+
30
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
31
+ return getBackgroundColor(props.variant);
32
+ });
33
+
34
+ var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
35
+ return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
36
+ });
37
+
38
+ var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n ", "\n"])), function (props) {
39
+ return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
40
+ }, function (props) {
41
+ return props.icon ? "4px 8px 4px 0" : "4px 8px";
42
+ }, (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
43
+
44
+ var getBackgroundColor = function getBackgroundColor(variant) {
45
+ switch (variant) {
46
+ case 'positive':
47
+ return _.COLORS.correct_500;
48
+
49
+ case 'warning':
50
+ return _.COLORS.warning_500;
51
+
52
+ case 'critical':
53
+ return _.COLORS.critical_500;
54
+
55
+ case 'accent1':
56
+ return _.COLORS.accent1_500;
57
+
58
+ case 'accent2':
59
+ return _.COLORS.accent2_500;
60
+
61
+ default:
62
+ return _.COLORS.neutral_100;
63
+ }
64
+ };
65
+
66
+ var Tag = function Tag(_ref) {
67
+ var label = _ref.label,
68
+ icon = _ref.icon,
69
+ _ref$variant = _ref.variant,
70
+ variant = _ref$variant === void 0 ? 'neutral' : _ref$variant;
71
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
72
+ variant: variant,
73
+ children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
74
+ variant: variant,
75
+ "data-testid": 'iconContainer',
76
+ children: icon
77
+ }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextContainer, {
78
+ variant: variant,
79
+ icon: icon,
80
+ children: label
81
+ })]
82
+ });
83
+ };
84
+
85
+ Tag.propTypes = {
86
+ label: _propTypes.default.string,
87
+ icon: _propTypes.default.node,
88
+ variant: _propTypes.default.oneOf(['neutral', 'positive', 'warning', 'critical', 'accent1', 'accent2'])
89
+ };
90
+ var _default = Tag;
91
+ exports.default = _default;
92
+ //# sourceMappingURL=Tag.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","getBackgroundColor","variant","IconContainer","COLORS","neutral_600","white","TextContainer","icon","ComponentTextStyle","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4LAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;;AAQA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,oMAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CANC,CAAnB;;AAUA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,yKACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CADG,EAGP,UAAAN,KAAK;AAAA,SAAGA,KAAK,CAACQ,IAAN,8BAAH;AAAA,CAHE,EAKf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CALe,CAAnB;;AAQA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAAgC;AACzD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOE,SAAOO,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOP,SAAOQ,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOR,SAAOS,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOT,SAAOU,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOV,SAAOW,WAAd;;AAChB;AAAS,aAAOX,SAAOY,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BV,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBN,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGM,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEN,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJM;AADI,MADX,EAKGU,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEhB,OAAxB;AAAiC,MAAA,IAAI,EAAEM,IAAvC;AAAA,gBACLU;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAV,EAAAA,I;AACAN,EAAAA,O,4BALuB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAuBxEe,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: availableVariants}>`\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: availableVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n }\n`;\n\nconst TextContainer = styled.div<{variant: availableVariants, icon: React.ReactNode}>`\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: availableVariants) => {\n switch(variant){\n case 'positive': return COLORS.correct_500;\n case 'warning' : return COLORS.warning_500;\n case 'critical': return COLORS.critical_500;\n case 'accent1': return COLORS.accent1_500;\n case 'accent2': return COLORS.accent2_500;\n default: return COLORS.neutral_100;\n }\n}\n\ntype availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n label?: string;\n icon?: React.ReactNode;\n variant?: availableVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n return ( \n <Container variant={variant}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;"],"file":"Tag.cjs"}
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ declare type availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
3
+ declare type TagProps = {
4
+ label?: string;
5
+ icon?: React.ReactNode;
6
+ variant?: availableVariants;
7
+ };
8
+ declare const Tag: React.FunctionComponent<TagProps>;
9
+ export default Tag;
@@ -0,0 +1,70 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
+ import _pt from "prop-types";
3
+
4
+ var _templateObject, _templateObject2, _templateObject3;
5
+
6
+ import * as React from 'react';
7
+ import styled from 'styled-components';
8
+ import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
12
+ return getBackgroundColor(props.variant);
13
+ });
14
+ var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
15
+ return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
16
+ });
17
+ var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n ", "\n"])), function (props) {
18
+ return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
19
+ }, function (props) {
20
+ return props.icon ? "4px 8px 4px 0" : "4px 8px";
21
+ }, ComponentXSStyling(ComponentTextStyle.Bold, null));
22
+
23
+ var getBackgroundColor = function getBackgroundColor(variant) {
24
+ switch (variant) {
25
+ case 'positive':
26
+ return COLORS.correct_500;
27
+
28
+ case 'warning':
29
+ return COLORS.warning_500;
30
+
31
+ case 'critical':
32
+ return COLORS.critical_500;
33
+
34
+ case 'accent1':
35
+ return COLORS.accent1_500;
36
+
37
+ case 'accent2':
38
+ return COLORS.accent2_500;
39
+
40
+ default:
41
+ return COLORS.neutral_100;
42
+ }
43
+ };
44
+
45
+ var Tag = function Tag(_ref) {
46
+ var label = _ref.label,
47
+ icon = _ref.icon,
48
+ _ref$variant = _ref.variant,
49
+ variant = _ref$variant === void 0 ? 'neutral' : _ref$variant;
50
+ return /*#__PURE__*/_jsxs(Container, {
51
+ variant: variant,
52
+ children: [icon && /*#__PURE__*/_jsx(IconContainer, {
53
+ variant: variant,
54
+ "data-testid": 'iconContainer',
55
+ children: icon
56
+ }), label && /*#__PURE__*/_jsx(TextContainer, {
57
+ variant: variant,
58
+ icon: icon,
59
+ children: label
60
+ })]
61
+ });
62
+ };
63
+
64
+ Tag.propTypes = {
65
+ label: _pt.string,
66
+ icon: _pt.node,
67
+ variant: _pt.oneOf(['neutral', 'positive', 'warning', 'critical', 'accent1', 'accent2'])
68
+ };
69
+ export default Tag;
70
+ //# sourceMappingURL=Tag.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","getBackgroundColor","variant","IconContainer","neutral_600","white","TextContainer","icon","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,8KAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;AAQA,IAAMC,aAAa,GAAGT,MAAM,CAACK,GAAV,sLAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CANC,CAAnB;AAUA,IAAMC,aAAa,GAAGZ,MAAM,CAACK,GAAV,2JACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CADG,EAGP,UAAAL,KAAK;AAAA,SAAGA,KAAK,CAACO,IAAN,8BAAH;AAAA,CAHE,EAKfV,kBAAkB,CAACD,kBAAkB,CAACY,IAApB,EAA0B,IAA1B,CALH,CAAnB;;AAQA,IAAMP,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAAgC;AACzD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOP,MAAM,CAACc,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOd,MAAM,CAACe,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOf,MAAM,CAACgB,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOhB,MAAM,CAACiB,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOjB,MAAM,CAACkB,WAAd;;AAChB;AAAS,aAAOlB,MAAM,CAACmB,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BT,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBL,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGK,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEL,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJK;AADI,MADX,EAKGS,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEd,OAAxB;AAAiC,MAAA,IAAI,EAAEK,IAAvC;AAAA,gBACLS;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAT,EAAAA,I;AACAL,EAAAA,O,aALuB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAuBvF,eAAea,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: availableVariants}>`\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: availableVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n }\n`;\n\nconst TextContainer = styled.div<{variant: availableVariants, icon: React.ReactNode}>`\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: availableVariants) => {\n switch(variant){\n case 'positive': return COLORS.correct_500;\n case 'warning' : return COLORS.warning_500;\n case 'critical': return COLORS.critical_500;\n case 'accent1': return COLORS.accent1_500;\n case 'accent2': return COLORS.accent2_500;\n default: return COLORS.neutral_100;\n }\n}\n\ntype availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n label?: string;\n icon?: React.ReactNode;\n variant?: availableVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n return ( \n <Container variant={variant}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;"],"file":"Tag.js"}
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ Object.defineProperty(exports, "Tag", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _Tag.default;
12
+ }
13
+ });
14
+
15
+ var _Tag = _interopRequireDefault(require("./Tag"));
16
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Tag/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Tag } from './Tag';"],"file":"index.cjs"}
@@ -0,0 +1 @@
1
+ export { default as Tag } from './Tag';
@@ -0,0 +1,2 @@
1
+ export { default as Tag } from './Tag';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Tag/index.ts"],"names":["default","Tag"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAApB,QAA+B,OAA/B","sourcesContent":["export { default as Tag } from './Tag';"],"file":"index.js"}
package/dist/index.cjs CHANGED
@@ -445,4 +445,17 @@ Object.keys(_SegmentControl).forEach(function (key) {
445
445
  }
446
446
  });
447
447
  });
448
+
449
+ var _Tag = require("./Tag");
450
+
451
+ Object.keys(_Tag).forEach(function (key) {
452
+ if (key === "default" || key === "__esModule") return;
453
+ if (key in exports && exports[key] === _Tag[key]) return;
454
+ Object.defineProperty(exports, key, {
455
+ enumerable: true,
456
+ get: function get() {
457
+ return _Tag[key];
458
+ }
459
+ });
460
+ });
448
461
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\n"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Tag';"],"file":"index.cjs"}
package/dist/index.d.ts CHANGED
@@ -32,3 +32,4 @@ export * from './common';
32
32
  export * from './QuizButton';
33
33
  export * from './LinearProgression';
34
34
  export * from './SegmentControl';
35
+ export * from './Tag';
package/dist/index.js CHANGED
@@ -32,4 +32,5 @@ export * from './common';
32
32
  export * from './QuizButton';
33
33
  export * from './LinearProgression';
34
34
  export * from './SegmentControl';
35
+ export * from './Tag';
35
36
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd;AACA,cAAc,OAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Tag';"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.5.1-dev.18",
3
+ "version": "1.5.1-dev.19",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [