npm - @laerdal/life-react-components - Versions diffs - 1.2.2-dev.11 → 1.2.2-dev.11.full - Mend

@laerdal/life-react-components 1.2.2-dev.11 → 1.2.2-dev.11.full

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

Files changed (125) hide show

package/dist/js/Toasters/ToastContext.js CHANGED Viewed

@@ -18,6 +18,8 @@ var _Toast = _interopRequireDefault(require("./Toast"));
 var _types = require("../types");
+var _zIndexes = require("../styles/z-indexes");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +60,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ToastContext = /*#__PURE__*/React.createContext({});
 exports.ToastContext = ToastContext;
-var ToastBucket = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column-reverse;\n"])));
+var ToastBucket = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), _zIndexes.Z_INDEXES.toast);
 var ToastBucketTopLeft = (0, _styledComponents.default)(ToastBucket)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 5%;\n"])));
 var ToastBucketTopMiddle = (0, _styledComponents.default)(ToastBucket)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));

package/dist/js/Toasters/ToastContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","createContext","ToastBucket","styled","div","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","ToastPosition","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":";;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;AAEO,IAAMA,YAAY,gBAAGC,KAAK,CAACC,aAAN,CAAoB,EAApB,CAArB;;;AAEP,IAAMC,WAAW,GAAGC,0BAAOC,GAAV,~~kKAAjB~~;;AAOA,IAAMC,kBAAkB,GAAG,+~~BAAOH~~,WAAP,CAAH,oGAAxB;AAKA,~~IAAMI~~,oBAAoB,GAAG,+~~BAAOJ~~,WAAP,CAAH,qIAA1B;AAMA,~~IAAMK~~,mBAAmB,GAAG,+~~BAAOL~~,WAAP,CAAH,qGAAzB;AAKA,~~IAAMM~~,qBAAqB,GAAG,+~~BAAON~~,WAAP,CAAH,uGAA3B;AAKA,~~IAAMO~~,uBAAuB,GAAG,+~~BAAOP~~,WAAP,CAAH,wIAA7B;AAMA,~~IAAMQ~~,sBAAsB,GAAG,+~~BAAOR~~,WAAP,CAAH,wGAA5B;;AAKO,~~IAAMS~~,aAAuB,GAAG,SAA1BA,aAA0B,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;;AACtE,~~wBAA4BZ~~,KAAK,~~CAACa~~,QAAN,CAAwB,EAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,GAAG,GAAG,SAANA,GAAM,CAACC,OAAD,EAAeC,OAAf,EAAyC;AACnD,QAAMC,EAAE,GAAG,4BAAX;AACAJ,IAAAA,SAAS,CAAC,UAAAK,IAAI;AAAA,0CAAQA,IAAR,IAAc;AAAED,QAAAA,EAAE,EAAFA,EAAF;AAAMF,QAAAA,OAAO,EAAPA,OAAN;AAAeC,QAAAA,OAAO,EAAPA;AAAf,OAAd;AAAA,KAAL,CAAT;AACD,GAHD;;AAKA,MAAMG,OAAM,GAAG,SAATA,MAAS,CAACF,EAAD;AAAA,WAAgBJ,SAAS,CAACD,MAAM,CAACQ,MAAP,CAAc,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACJ,EAAF,KAASA,EAAb;AAAA,KAAf,CAAD,CAAzB;AAAA,GAAf;;AAEA,MAAMK,SAAS,~~GAAGxB~~,KAAK,~~CAACyB~~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~~0BAAqBrC~~,KAAK,~~CAACsC~~,UAAN,~~CAAiBvC~~,YAAjB,CAArB;AAAA,~~MAAQ2B~~,QAAR,qBAAQA,QAAR;;AACA,SAAO;AACLA,IAAAA,QAAQ,EAARA;AADK,GAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\n\ntype ProviderProps = {\n children?: any;\n};\n\ninterface toast {\n options: ToastOptions;\n id: string;\n content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/export const ToastContext = React.createContext<ToasterValueProps>(null);/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n position: fixed;\n z-index: ~~9999~~;\n display: flex;\n flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n top: 16px;\n left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n top: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n top: 16px;\n right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n bottom: 16px;\n left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n bottom: 16px;\n right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n const [toasts, setToasts] = React.useState<toast[]>([]);\n\n const add = (content: any, options: ToastOptions) => {\n const id = createUUID();\n setToasts(prev => [...prev, { id, content, options }]);\n };\n\n const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n const functions = React.useMemo(() => {\n return { addToast: add, removeToast: remove };\n }, [toasts]);\n\n return (\n <ToastContext.Provider value={{ toasts, ...functions }}>\n <ToastBucketTopLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopLeft>\n <ToastBucketTopMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopMiddle>\n <ToastBucketTopRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopRight>\n <ToastBucketBottomLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomLeft>\n <ToastBucketBottomMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomMiddle>\n <ToastBucketBottomRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomRight>\n {children}\n </ToastContext.Provider>\n );\n};\n\nexport function useToast() {\n const { addToast } = React.useContext(ToastContext);\n return {\n addToast,\n };\n}\n"],"file":"ToastContext.js"}
1	+ {"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","createContext","ToastBucket","styled","div","Z_INDEXES","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","ToastPosition","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":";;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;AAEO,IAAMA,YAAY,gBAAGC,KAAK,CAACC,aAAN,CAAoB,EAApB,CAArB;;;AAEP,IAAMC,WAAW,GAAGC,0BAAOC,GAAV,mKAEJC,oBAAUC,KAFN,CAAjB;;AAOA,IAAMC,kBAAkB,GAAG,+BAAOL,WAAP,CAAH,oGAAxB;AAKA,IAAMM,oBAAoB,GAAG,+BAAON,WAAP,CAAH,qIAA1B;AAMA,IAAMO,mBAAmB,GAAG,+BAAOP,WAAP,CAAH,qGAAzB;AAKA,IAAMQ,qBAAqB,GAAG,+BAAOR,WAAP,CAAH,uGAA3B;AAKA,IAAMS,uBAAuB,GAAG,+BAAOT,WAAP,CAAH,wIAA7B;AAMA,IAAMU,sBAAsB,GAAG,+BAAOV,WAAP,CAAH,wGAA5B;;AAKO,IAAMW,aAAuB,GAAG,SAA1BA,aAA0B,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;;AACtE,wBAA4Bd,KAAK,CAACe,QAAN,CAAwB,EAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,GAAG,GAAG,SAANA,GAAM,CAACC,OAAD,EAAeC,OAAf,EAAyC;AACnD,QAAMC,EAAE,GAAG,4BAAX;AACAJ,IAAAA,SAAS,CAAC,UAAAK,IAAI;AAAA,0CAAQA,IAAR,IAAc;AAAED,QAAAA,EAAE,EAAFA,EAAF;AAAMF,QAAAA,OAAO,EAAPA,OAAN;AAAeC,QAAAA,OAAO,EAAPA;AAAf,OAAd;AAAA,KAAL,CAAT;AACD,GAHD;;AAKA,MAAMG,OAAM,GAAG,SAATA,MAAS,CAACF,EAAD;AAAA,WAAgBJ,SAAS,CAACD,MAAM,CAACQ,MAAP,CAAc,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACJ,EAAF,KAASA,EAAb;AAAA,KAAf,CAAD,CAAzB;AAAA,GAAf;;AAEA,MAAMK,SAAS,GAAG1B,KAAK,CAAC2B,OAAN,CAAc,YAAM;AACpC,WAAO;AAAEC,MAAAA,QAAQ,EAAEV,GAAZ;AAAiBW,MAAAA,WAAW,EAAEN;AAA9B,KAAP;AACD,GAFiB,EAEf,CAACP,MAAD,CAFe,CAAlB;AAIA,sBACE,oBAAC,YAAD,CAAc,QAAd;AAAuB,IAAA,KAAK;AAAIA,MAAAA,MAAM,EAANA;AAAJ,OAAeU,SAAf;AAA5B,kBACE,oBAAC,kBAAD,QACGV,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcC,OAAzC;AAAA,GADV,EAEEC,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CADF,eAQE,oBAAC,oBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcG,SAAzC;AAAA,GADV,EAEED,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CARF,eAeE,oBAAC,mBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcI,QAAzC;AAAA,GADV,EAEEF,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CAfF,eAsBE,oBAAC,qBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcK,UAAzC;AAAA,GADV,EAEEH,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CAtBF,eA6BE,oBAAC,uBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcM,YAAzC;AAAA,GADV,EAEEJ,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CA7BF,eAoCE,oBAAC,sBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcO,WAAzC;AAAA,GADV,EAEEL,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CApCF,EA2CGN,QA3CH,CADF;AA+CD,CA7DM;;;;AA+DA,SAASyB,QAAT,GAAoB;AACzB,0BAAqBvC,KAAK,CAACwC,UAAN,CAAiBzC,YAAjB,CAArB;AAAA,MAAQ6B,QAAR,qBAAQA,QAAR;;AACA,SAAO;AACLA,IAAAA,QAAQ,EAARA;AADK,GAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype ProviderProps = {\n children?: any;\n};\n\ninterface toast {\n options: ToastOptions;\n id: string;\n content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/export const ToastContext = React.createContext<ToasterValueProps>(null);/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n position: fixed;\n z-index: ${Z_INDEXES.toast};\n display: flex;\n flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n top: 16px;\n left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n top: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n top: 16px;\n right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n bottom: 16px;\n left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n bottom: 16px;\n right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n const [toasts, setToasts] = React.useState<toast[]>([]);\n\n const add = (content: any, options: ToastOptions) => {\n const id = createUUID();\n setToasts(prev => [...prev, { id, content, options }]);\n };\n\n const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n const functions = React.useMemo(() => {\n return { addToast: add, removeToast: remove };\n }, [toasts]);\n\n return (\n <ToastContext.Provider value={{ toasts, ...functions }}>\n <ToastBucketTopLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopLeft>\n <ToastBucketTopMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopMiddle>\n <ToastBucketTopRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketTopRight>\n <ToastBucketBottomLeft>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomLeft>\n <ToastBucketBottomMiddle>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomMiddle>\n <ToastBucketBottomRight>\n {toasts\n .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n .map(t => (\n <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n ))}\n </ToastBucketBottomRight>\n {children}\n </ToastContext.Provider>\n );\n};\n\nexport function useToast() {\n const { addToast } = React.useContext(ToastContext);\n return {\n addToast,\n };\n}\n"],"file":"ToastContext.js"}

package/dist/js/Tooltips/TooltipStyles.js CHANGED Viewed

@@ -15,6 +15,8 @@ var _styles = require("../styles");
 var _typography = require("../styles/typography");
+var _zIndexes = require("../styles/z-indexes");
 var _templateObject, _templateObject2, _templateObject3;
 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,7 +29,7 @@ var distanceToEdge = function distanceToEdge(size) {
   return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
 };
-var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34ems;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: 1;\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
+var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34em;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: ", ";\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
   return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
 }, function (props) {
   return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
@@ -39,7 +41,7 @@ var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject
   return props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px';
 }, function (props) {
   return props.height;
-}, _styles.COLORS.primary_800, function (props) {
+}, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.tooltip, function (props) {
   return props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '';
 }, function (props) {
   return props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '';

package/dist/js/Tooltips/TooltipStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","position","withArrow","defaultProps","TooltipTrigger","css","TooltipContainer"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAA4B;AACjD,SAAOA,IAAI,IAAIC,YAAKC,MAAb,GAAsB,KAAtB,GAA+B,CAACF,IAAD,IAASA,IAAI,IAAIC,YAAKE,KAAvB,GAAgC,MAAhC,GAAyC,MAA9E;AACD,CAFD;;AAIO,IAAMC,OAAO,GAAGC,0BAAOC,GAAV~~,+tBASd~~,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACP,IAAN,IAAcC,YAAKE,KAAnB,IAA4BI,KAAK,CAACP,IAAN,IAAcC,YAAKO,MAA/C,GAAwD,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAAxD,GAAsH,EAA3H;AAAA,CATS,EAUd,UAAAL,KAAK;AAAA,SAAKA,KAAK,CAACP,IAAN,IAAcC,YAAKC,MAAnB,GAA6B,oCAAmBO,2BAAmBC,OAAtC,EAA+CC,eAAOC,KAAtD,CAA7B,GAA4F,EAAjG;AAAA,CAVS,EAWd,UAAAL,KAAK;AAAA,SAAKA,KAAK,CAACP,IAAN,IAAcC,YAAKO,MAAnB,GAA4B,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAA5B,GAA0F,EAA/F;AAAA,CAXS,EAYd,UAAAL,KAAK;AAAA,SAAKA,KAAK,CAACM,KAAN,IAAe,QAAf,GAA0B,qBAA1B,GAAkD,EAAvD;AAAA,CAZS,EAaFC,mBAAWC,YAbT,EAeL,UAAAR,KAAK;AAAA,SAAIA,KAAK,CAACP,IAAN,IAAcC,YAAKC,MAAnB,GAA4B,SAA5B,GAAwCK,KAAK,CAACP,IAAN,IAAcC,YAAKO,MAAnB,GAA4B,UAA5B,GAAyC,UAArF;AAAA,CAfA,EAkBN,UAAAD,KAAK;AAAA,SAAIA,KAAK,CAACS,MAAV;AAAA,CAlBC,EAoBFL,eAAOM,WApBL,EAwBd,~~UAAAV~~,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,KAAlB,GAA0B,eAA1B,~~GAA4CX~~,KAAK,~~CAACW~~,QAAN,IAAkB,QAAlB,GAA6B,YAA7B,GAA4C,EAA7F;AAAA,CAxBS,EA0Bd,~~UAAAX~~,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,MAAlB,GAA2B,4DAA3B,GAA0F,EAA/F;AAAA,CA1BS,EA2Bd,~~UAAAX~~,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,OAAlB,GAA4B,qDAA5B,GAAoF,EAAzF;AAAA,CA3BS,EA6Bd,~~UAAAX~~,KAAK;AAAA,SACLA,KAAK,~~CAACW~~,QAAN,IAAkB,MAAlB,~~IAA4BX~~,KAAK,~~CAACW~~,QAAN,IAAkB,OAA9C,GACI,EADJ,~~GAEIX~~,KAAK,CAACM,KAAN,IAAe,OAAf,GACA,WADA,GAEAN,KAAK,CAACM,KAAN,IAAe,KAAf,GACA,YADA,GAEA,yCAPC;AAAA,CA7BS,EAwCd,UAAAN,KAAK;AAAA,SAAK,CAACA,KAAK,~~CAACY~~,SAAP,GAAmB,gBAAnB,GAAsC,EAA3C;AAAA,CAxCS,EA2Cd,~~UAAAZ~~,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,KAAlB,GAA0B,YAA1B,~~GAAyCX~~,KAAK,~~CAACW~~,QAAN,IAAkB,QAAlB,GAA6B,eAA7B,GAA+C,EAA7F;AAAA,CA3CS,EA6Cd,~~UAAAX~~,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,OAAlB,GAA4B,uDAA5B,GAAsF,EAA3F;AAAA,CA7CS,EA8Cd,~~UAAAX~~,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,MAAlB,GAA2B,sDAA3B,GAAoF,EAAzF;AAAA,CA9CS,EAgDd,~~UAAAX~~,KAAK;AAAA,SACLA,KAAK,~~CAACW~~,QAAN,IAAkB,MAAlB,~~IAA4BX~~,KAAK,~~CAACW~~,QAAN,IAAkB,OAA9C,GAAwD,EAAxD,~~GACAX~~,KAAK,CAACM,KAAN,IAAe,OAAf,mBAAkCd,cAAc,CAACQ,KAAK,CAACP,IAAP,CAAhD,SAAkEO,KAAK,CAACM,KAAN,IAAe,KAAf,oBAAiCd,cAAc,CAACQ,KAAK,CAACP,IAAP,CAA/C,SAAiE,YAF9H;AAAA,CAhDS,EAoDd,UAAAO,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,MAAlB,GAA2B,EAA3B,GAAgC,oBAArC;AAAA,CApDS,EAwDA,~~UAAAX~~,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,KAAlB,~~GAA0BP~~,eAAOM,WAAjC,GAA+C,aAApD;AAAA,CAxDL,EAyDE,UAAAV,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,OAAlB,~~GAA4BP~~,eAAOM,WAAnC,GAAiD,aAAtD;AAAA,CAzDP,EA0DE,UAAAV,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,QAAlB,~~GAA6BP~~,eAAOM,WAApC,GAAkD,aAAvD;AAAA,CA1DP,EA2DE,UAAAV,KAAK;AAAA,SAAKA,KAAK,~~CAACW~~,QAAN,IAAkB,MAAlB,~~GAA2BP~~,eAAOM,WAAlC,GAAgD,aAArD;AAAA,CA3DP,CAAb;;;AA+DPb,OAAO,~~CAACgB~~,YAAR,GAAuB;AACrBD,EAAAA,SAAS,EAAE,KADU;~~AAErBnB~~,EAAAA,IAAI,EAAEC,YAAKE,KAFU;AAGrBa,EAAAA,MAAM,EAAE,MAHa;AAIrBH,EAAAA,KAAK,EAAE,QAJc;~~AAKrBK~~,EAAAA,QAAQ,EAAE;AALW,CAAvB;AAQO,IAAMG,cAAc,OAAGC,qBAAH,~~wMACflB~~,OADe,EACYA,OADZ,EACgCA,OADhC,CAApB;;;AAQA,~~IAAMmB~~,gBAAgB,~~GAAGlB~~,0BAAOC,GAAV,~~qIAIzBe~~,cAJyB,CAAtB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size \| undefined) => {\n return size == Size.XSmall ? '8px' : (!size \|\| size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' \| 'end' \| 'center' \| undefined;\n position?: 'top' \| 'right' \| 'bottom' \| 'left' \| undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small \|\| props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: ~~34ems~~;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: 1;\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' \|\| props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' \|\| props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n`;\n\nexport const TooltipContainer = styled.div`\n display: inline-block;\n position: relative;\n\n ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
1	+ {"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size \| undefined) => {\n return size == Size.XSmall ? '8px' : (!size \|\| size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' \| 'end' \| 'center' \| undefined;\n position?: 'top' \| 'right' \| 'bottom' \| 'left' \| undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small \|\| props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: 34em;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: ${Z_INDEXES.tooltip};\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' \|\| props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' \|\| props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n`;\n\nexport const TooltipContainer = styled.div`\n display: inline-block;\n position: relative;\n\n ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/js/styles/z-indexes.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export declare const Z_INDEXES: {
+    hover: string;
+    active: string;
+    focus: string;
+    dropdown: string;
+    sticky_menu: string;
+    fixed_menu: string;
+    backdrop: string;
+    off_canvas: string;
+    modal: string;
+    toast: string;
+    tooltip: string;
+};

package/dist/js/styles/z-indexes.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Z_INDEXES = void 0;
+var Z_INDEXES = {
+  hover: '1',
+  active: '2',
+  focus: '3',
+  dropdown: '1000',
+  sticky_menu: '1020',
+  fixed_menu: '1030',
+  backdrop: '1040',
+  off_canvas: '1050',
+  modal: '1060',
+  toast: '1070',
+  tooltip: '1080'
+};
+exports.Z_INDEXES = Z_INDEXES;
+//# sourceMappingURL=z-indexes.js.map

package/dist/js/styles/z-indexes.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"],"mappings":";;;;;;AAAO,IAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAMvBC,EAAAA,QAAQ,EAAE,MANa;AAOvBC,EAAAA,WAAW,EAAE,MAPU;AAQvBC,EAAAA,UAAU,EAAE,MARW;AASvBC,EAAAA,QAAQ,EAAE,MATa;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,KAAK,EAAE,MAXgB;AAYvBC,EAAAA,KAAK,EAAE,MAZgB;AAavBC,EAAAA,OAAO,EAAE;AAbc,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n\n dropdown: '1000',\n sticky_menu: '1020',\n fixed_menu: '1030',\n backdrop: '1040',\n off_canvas: '1050',\n modal: '1060',\n toast: '1070',\n tooltip: '1080',\n}\n"],"file":"z-indexes.js"}

package/dist/umd/Breadcrumb/Breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["homeIcon","homeLabel","homeUrl","items","marginRight","size","Size","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","COLORS","primary_700","primary_800","ComponentXXSStyling","ComponentMStyling","ComponentSStyling","LastBreadcrumbItem","label","Breadcrumb","history","dropdownItems","x","value","displayLabel","navigate","links","chevronSize","url"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqBA~~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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {~~Link} from 'react-router-dom';\nimport {~~ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n homeIcon?: boolean;\n homeLabel?: string;\n homeUrl?: string;\n items?: BreadcrumbItem[];\n size?: Size;\n};\n\nconst marginRight = (size: Size \| undefined) => {\n return size == Size.Small \|\| size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size \| undefined}>`\n display:flex;\n align-items: center;\n min-height: 48px;\n \n a {\n text-decoration: none;\n ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${(props) => marginRight(props.size) }\n }\n\n .chevronicon {\n ${(props) => marginRight(props.size) }\n }\n\n a:hover {\n color: ${COLORS.primary_700};\n }\n a:active {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst FontStyles = (size: Size \| undefined, textStyle: ComponentTextStyle, color: string) => {\n switch (size) {\n case Size.XSmall:\n return ComponentXXSStyling(textStyle, color);\n case Size.Medium:\n return ComponentMStyling(textStyle, color);\n case Size.Small:\n default:\n return ComponentSStyling(textStyle, color);\n }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n items, \n size = Size.Small, \n homeIcon = true, \n homeLabel = 'Home', \n homeUrl = '/' }) => {\n\n const history = useHistory();\n const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n const navigate = (links: string[]) => { \n history.push(links[0]);\n };\n\n const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n return (\n <BreadcrumbContainer size={size}>\n\n {homeIcon ? \n <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n <SystemIcons.Home size={chevronSize} />\n </IconButton> : \n <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n {homeLabel}\n </HyperLink>}\n\n { !!items && items.length > 2 &&\n (items.length > 3 ?\n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <DropdownButton \n alignLeft={true}\n items={dropdownItems} \n size={size}\n icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n onClick={navigate} />\n </> :\n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n {items[items.length - 3].label}\n </HyperLink> \n </>)\n }\n\n { !!items && items.length > 1 && \n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n {items[items.length - 2].label}\n </HyperLink>\n </>\n }\n\n { !!items && items.length > 0 && \n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <LastBreadcrumbItem size={size}>\n {items[items.length - 1].label}\n </LastBreadcrumbItem>\n </>\n }\n\n </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
1	+ {"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["homeIcon","homeLabel","homeUrl","items","marginRight","size","Size","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","COLORS","primary_700","primary_800","ComponentXXSStyling","ComponentMStyling","ComponentSStyling","LastBreadcrumbItem","label","Breadcrumb","history","dropdownItems","x","value","displayLabel","navigate","links","chevronSize","url"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,QAAMI,WAAW,GAAIC,IAAD,IAA4B;AAC9C,WAAOA,IAAI,IAAIC,OAARD,KAAAA,IAAsBA,IAAI,IAAIC,OAA9BD,MAAAA,GAAAA,oBAAAA,GAAP,oBAAA;AADF,GAAA;;AAIA,QAAME,mBAAmB,GAAGC,2BAAOC,GAA8B;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,MAAOC,KAAD,IAAWC,UAAU,CAACD,KAAK,CAAN,IAAA,EAAaE,qBAAb,OAAA,EAAyCC,eAAzC,WAAA,CAA6D;AACxF,MAAOH,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAc;AAC1C;AACA;AACA;AACA,MAAOA,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAc;AAC1C;AACA;AACA;AACA,aAAaG,eAAOC,WAAY;AAChC;AACA;AACA,aAAaD,eAAOE,WAAY;AAChC;AApBA,CAAA;;AAuBA,QAAMJ,UAAU,GAAG,CAAA,IAAA,EAAA,SAAA,EAAA,KAAA,KAA0E;AAC3F,YAAA,IAAA;AACE,WAAKL,OAAL,MAAA;AACE,eAAOU,qCAAmB,SAAnBA,EAAP,KAAOA,CAAP;;AACF,WAAKV,OAAL,MAAA;AACE,eAAOW,mCAAiB,SAAjBA,EAAP,KAAOA,CAAP;;AACF,WAAKX,OAAL,KAAA;AACA;AACE,eAAOY,mCAAiB,SAAjBA,EAAP,KAAOA,CAAP;AAPJ;AADF,GAAA;;AAYA,QAAMC,kBAAkB,GAAGX,2BAAOY,KAAoB;AACtD,IAAKV,KAAD,IAAWC,UAAU,CAACD,KAAK,CAAN,IAAA,EAAaE,qBAAb,IAAA,EAAsCC,eAAtC,WAAA,CAA0D;AACnF,IAAKH,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAc;AAFxC,CAAA;;AAKA,QAAMW,UAAoD,GAAG,CAAC;AAAA,IAAA,KAAA;AAE1DhB,IAAAA,IAAI,GAAGC,OAFmD,KAAA;AAG1DN,IAAAA,QAAQ,GAHkD,IAAA;AAI1DC,IAAAA,SAAS,GAJiD,MAAA;AAK1DC,IAAAA,OAAO,GAAG;AALgD,GAAD,KAKrC;AAEtB,UAAMoB,OAAO,GAAb,8BAAA;AACA,UAAMC,aAA6B,GAAGpB,KAAK,GAAG,KAAK,CAAL,KAAA,CAAA,CAAA,EAAeA,KAAK,CAALA,MAAAA,GAAf,CAAA,EAAA,GAAA,CAAqCqB,CAAC,KAAK;AAAEC,MAAAA,KAAK,EAAED,CAAC,CAAV,GAAA;AAAgBE,MAAAA,YAAY,EAAEF,CAAC,CAACJ;AAAhC,KAAL,CAAtC,CAAH,GAA3C,EAAA;;AACA,UAAMO,QAAQ,GAAIC,KAAD,IAAqB;AACpCN,MAAAA,OAAO,CAAPA,IAAAA,CAAaM,KAAK,CAAlBN,CAAkB,CAAlBA;AADF,KAAA;;AAIA,UAAMO,WAAW,GAAGxB,IAAI,IAAIC,OAARD,MAAAA,GAAAA,MAAAA,GAA+BA,IAAI,IAAIC,OAARD,KAAAA,GAAAA,MAAAA,GAAnD,MAAA;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAqB,MAAA,IAAI,EAAEA;AAA3B,KAAA,EAEGL,QAAQ,GAAA,aACP,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAE,MAAMsB,OAAO,CAAPA,IAAAA,CAAAA,OAAAA;AAA/D,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,IAAA,EAAA;AAAkB,MAAA,IAAI,EAAEO;AAAxB,KAAA,CADF,CADO,GAAA,aAIP,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAW,MAAA,EAAE,EAAb,UAAA;AAA2B,MAAA,OAAO,EAAlC,SAAA;AAA6C,MAAA,IAAI,EAAE3B;AAAnD,KAAA,EANJ,SAMI,CANJ,EAUI,CAAC,CAAD,KAAA,IAAWC,KAAK,CAALA,MAAAA,GAAX,CAAA,KACG,KAAK,CAAL,MAAA,GAAA,CAAA,GAAA,aACD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,YAAA,EAAA;AAA0B,MAAA,SAAS,EAAnC,aAAA;AAAkD,MAAA,KAAK,EAAEU,eAAzD,WAAA;AAA6E,MAAA,IAAI,EAAEgB;AAAnF,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AACE,MAAA,SAAS,EADX,IAAA;AAEE,MAAA,KAAK,EAFP,aAAA;AAGE,MAAA,IAAI,EAHN,IAAA;AAIE,MAAA,IAAI,EAAA,aAAE,KAAA,CAAA,aAAA,CAAA,cAAA,cAAA,EAAA;AAA4B,QAAA,KAAK,EAAEhB,eAAnC,WAAA;AAAuD,QAAA,IAAI,EAAC;AAA5D,OAAA,CAJR;AAKE,MAAA,OAAO,EAAEc;AALX,KAAA,CAFF,CADC,GAAA,aAUD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,YAAA,EAAA;AAA0B,MAAA,SAAS,EAAnC,aAAA;AAAkD,MAAA,KAAK,EAAEd,eAAzD,WAAA;AAA6E,MAAA,IAAI,EAAEgB;AAAnF,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAW,MAAA,EAAE,EAAE,gBAAgB1B,KAAK,CAALA,MAAAA,GAA/B,CAAe,CAAf;AAAkD,MAAA,MAAM,EAAxD,OAAA;AAAiE,MAAA,OAAO,EAAxE,SAAA;AAAmF,MAAA,IAAI,EAAEA,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CAAwB2B;AAAjH,KAAA,EACG3B,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CAxBX,KAuBQ,CAFF,CAXF,CAVJ,EA6BI,CAAC,CAAD,KAAA,IAAWA,KAAK,CAALA,MAAAA,GAAX,CAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,YAAA,EAAA;AAA0B,MAAA,SAAS,EAAnC,aAAA;AAAkD,MAAA,KAAK,EAAEU,eAAzD,WAAA;AAA6E,MAAA,IAAI,EAAEgB;AAAnF,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAW,MAAA,EAAE,EAAE,gBAAgB1B,KAAK,CAALA,MAAAA,GAA/B,CAAe,CAAf;AAAkD,MAAA,MAAM,EAAxD,OAAA;AAAiE,MAAA,OAAO,EAAxE,SAAA;AAAmF,MAAA,IAAI,EAAEA,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CAAwB2B;AAAjH,KAAA,EACG3B,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CAjCT,KAgCM,CAFF,CA9BJ,EAsCI,CAAC,CAAD,KAAA,IAAWA,KAAK,CAALA,MAAAA,GAAX,CAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,YAAA,EAAA;AAA0B,MAAA,SAAS,EAAnC,aAAA;AAAkD,MAAA,KAAK,EAAEU,eAAzD,WAAA;AAA6E,MAAA,IAAI,EAAEgB;AAAnF,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAoB,MAAA,IAAI,EAAExB;AAA1B,KAAA,EACGF,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CA3CX,KA0CQ,CAFF,CAvCJ,CADF;AAfF,GAAA;;;AAnDEH,IAAAA,Q;AACAC,IAAAA,S;AACAC,IAAAA,O;AACAC,IAAAA,K;;oBAkHF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n homeIcon?: boolean;\n homeLabel?: string;\n homeUrl?: string;\n items?: BreadcrumbItem[];\n size?: Size;\n};\n\nconst marginRight = (size: Size \| undefined) => {\n return size == Size.Small \|\| size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size \| undefined}>`\n display:flex;\n align-items: center;\n min-height: 48px;\n \n a {\n text-decoration: none;\n ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${(props) => marginRight(props.size) }\n }\n\n .chevronicon {\n ${(props) => marginRight(props.size) }\n }\n\n a:hover {\n color: ${COLORS.primary_700};\n }\n a:active {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst FontStyles = (size: Size \| undefined, textStyle: ComponentTextStyle, color: string) => {\n switch (size) {\n case Size.XSmall:\n return ComponentXXSStyling(textStyle, color);\n case Size.Medium:\n return ComponentMStyling(textStyle, color);\n case Size.Small:\n default:\n return ComponentSStyling(textStyle, color);\n }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n items, \n size = Size.Small, \n homeIcon = true, \n homeLabel = 'Home', \n homeUrl = '/' }) => {\n\n const history = useHistory();\n const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n const navigate = (links: string[]) => { \n history.push(links[0]);\n };\n\n const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n return (\n <BreadcrumbContainer size={size}>\n\n {homeIcon ? \n <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n <SystemIcons.Home size={chevronSize} />\n </IconButton> : \n <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n {homeLabel}\n </HyperLink>}\n\n { !!items && items.length > 2 &&\n (items.length > 3 ?\n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <DropdownButton \n alignLeft={true}\n items={dropdownItems} \n size={size}\n icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n onClick={navigate} />\n </> :\n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n {items[items.length - 3].label}\n </HyperLink> \n </>)\n }\n\n { !!items && items.length > 1 && \n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n {items[items.length - 2].label}\n </HyperLink>\n </>\n }\n\n { !!items && items.length > 0 && \n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <LastBreadcrumbItem size={size}>\n {items[items.length - 1].label}\n </LastBreadcrumbItem>\n </>\n }\n\n </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

package/dist/umd/Dropdown/CommonStyling.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../common", "../styles", "../styles/typography", "../types"], factory);
+    define(["exports", "styled-components", "../common", "../styles", "../styles/typography", "../types", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../common"), require("../styles"), require("../styles/typography"), require("../types"));
+    factory(exports, require("styled-components"), require("../common"), require("../styles"), require("../styles/typography"), require("../types"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.common, global.styles, global.typography, global.types);
+    factory(mod.exports, global.styledComponents, global.common, global.styles, global.typography, global.types, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _common, _styles, _typography, _types) {
+})(this, function (exports, _styledComponents, _common, _styles, _typography, _types, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -225,7 +225,7 @@
   position: absolute;
   background-color: ${_styles.COLORS.white};
   width: 100%;
-  z-index: 1;
+  z-index: ${_zIndexes.Z_INDEXES.dropdown};
   margin-top: ${props => props.isButton ? '-4px' : '2px'};
   &.show {

package/dist/umd/Dropdown/CommonStyling.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","InputField","input","black","ComponentSStyling","BREAKPOINTS","MEDIUM","StyledField","neutral_400","ComponentXXSStyling","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","ComponentLStyling","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\nimport { Size } from '../types';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n ::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n \n input{\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: 1;\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width /\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n / Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button<{size? : Size}>`\n ${props => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size? : Size) => {\n return css`\n\n ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n div.item-content {\n margin: auto 0 auto 16px;\n display: flex;\n align-items: center;\n\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n\n div.item-icon {\n margin-right: 6px;\n }\n div.item-icon-old {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &:disabled {\n background-color: transparent;\n cursor: not-allowed;\n color: ${COLORS.neutral_200}\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_600};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n};\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n .button {\n min-width: 64px;\n }\n\n .value {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n }\n\n .dropdown-arrow {\n width: 24px;\n height: 24px;\n }\n\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}
1	+ {"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","InputField","input","black","ComponentSStyling","BREAKPOINTS","MEDIUM","StyledField","neutral_400","ComponentXXSStyling","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","Z_INDEXES","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","ComponentLStyling","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\nimport { Size } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n input {\n color: ${COLORS.neutral_600} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n svg {\n color: ${COLORS.neutral_300} !important;\n }\n input {\n color: ${COLORS.neutral_300} !important;\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n ::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: 344px;\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n \n input{\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n cursor: pointer;\n }\n &:active {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.locked ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n min-width: 344px;\n right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n width: 100%;\n z-index: ${Z_INDEXES.dropdown};\n margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n &.show {\n display: block;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding: 4px 0;\n\n max-height: 240px;\n overflow-y: auto;\n\n /* width /\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_200};\n border-radius: 8px;\n }\n\n / Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_400};\n }\n`;\n\nexport const DropdownButton = styled.button<{size? : Size}>`\n ${props => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size? : Size) => {\n return css`\n\n ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: transparent;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n div.item-content {\n margin: auto 0 auto 16px;\n display: flex;\n align-items: center;\n\n div.item-label {\n flex: 1 0 calc(100% - 40px);\n }\n\n div.item-icon {\n margin-right: 6px;\n }\n div.item-icon-old {\n flex: 1 0 40px;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n ${CommonInteractionStyling};\n\n &.active {\n background: ${COLORS.neutral_20};\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: 2px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &:disabled {\n background-color: transparent;\n cursor: not-allowed;\n color: ${COLORS.neutral_200}\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_600};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_500};\n }\n }\n`;\n};\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n\n .button {\n min-width: 64px;\n }\n\n .value {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n }\n\n .dropdown-arrow {\n width: 24px;\n height: 24px;\n }\n\n ${(props) => (props.locked \|\| props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n \n &:hover .button,\n & > .button:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:focus .button,\n & > .button:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n outline: none;\n }\n\n &:active .button,\n & > .button:active {\n box-shadow: none;\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/umd/Dropdown/DropdownContent.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../Button/Button", "../types", "./CommonStyling", "../styles/typography", "../styles", "../InputFields"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../Button/Button", "../types", "./CommonStyling", "../styles/typography", "../styles", "../InputFields", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button/Button"), require("../types"), require("./CommonStyling"), require("../styles/typography"), require("../styles"), require("../InputFields"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button/Button"), require("../types"), require("./CommonStyling"), require("../styles/typography"), require("../styles"), require("../InputFields"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.types, global.CommonStyling, global.typography, global.styles, global.InputFields);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.types, global.CommonStyling, global.typography, global.styles, global.InputFields, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _types, _CommonStyling, _typography, _styles, _InputFields) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _types, _CommonStyling, _typography, _styles, _InputFields, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -38,7 +38,7 @@
   background-color: ${_styles.COLORS.white};
   width: ${props => props.width ? props.width : '100%'};
-  z-index: 1;
+  z-index: ${_zIndexes.Z_INDEXES.dropdown};
   margin: ${props => props.isButton ? '-4px' : '4px 0px'};
   &.show {
@@ -70,6 +70,17 @@
   max-height: ${props => !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px'};
 `;
   const ItemsContainer = _styledComponents2.default.div`
+  > *:hover {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
+  }
+  > *:active,
+  > *.active{
+    z-index: ${_zIndexes.Z_INDEXES.active};
+  }
+  > *:focus {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
+  }
   button.dropdownButton {
     ${props => (0, _CommonStyling.DropdownButtonCSS)(props.size)}
   }`;