npm - @laerdal/life-react-components - Versions diffs - 1.8.0-dev.8 → 1.8.0-dev.9 - Mend

@laerdal/life-react-components 1.8.0-dev.8 → 1.8.0-dev.9

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 (25) hide show

package/dist/ChipsInput/ChipInputField.cjs +1 -1
package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
package/dist/ChipsInput/ChipInputField.js +1 -1
package/dist/ChipsInput/ChipInputField.js.map +1 -1
package/dist/Popover/Popover.cjs +249 -0
package/dist/Popover/Popover.cjs.map +1 -0
package/dist/Popover/Popover.d.ts +26 -0
package/dist/Popover/Popover.js +214 -0
package/dist/Popover/Popover.js.map +1 -0
package/dist/Popover/index.cjs +16 -0
package/dist/Popover/index.cjs.map +1 -0
package/dist/Popover/index.d.ts +1 -0
package/dist/Popover/index.js +2 -0
package/dist/Popover/index.js.map +1 -0
package/dist/index.cjs +14 -0
package/dist/index.cjs.map +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/dist/styles/z-indexes.cjs +2 -1
package/dist/styles/z-indexes.cjs.map +1 -1
package/dist/styles/z-indexes.d.ts +1 -0
package/dist/styles/z-indexes.js +2 -1
package/dist/styles/z-indexes.js.map +1 -1
package/package.json +1 -1

package/dist/ChipsInput/ChipInputField.cjs CHANGED Viewed

@@ -86,7 +86,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
    * */
   _react.default.useEffect(function () {
-    if (inputRef.current && document.activeElement === inputRef.current) {
+    if (inputRef.current) {
       inputRef.current.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'

package/dist/ChipsInput/ChipInputField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large \| Size.Medium \| Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' \| 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /*\n Scroll container to last item on change\n * /\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /\n Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current \|\| (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType \|\| ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled \|\| disabled}\n variant={chip.variant \|\| 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder \|\| '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.cjs"}
1	+ {"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large \| Size.Medium \| Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' \| 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /*\n Scroll container to last item on change\n * /\n React.useEffect(() => {\n if (inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /\n Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current \|\| (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType \|\| ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled \|\| disabled}\n variant={chip.variant \|\| 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder \|\| '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.cjs"}

package/dist/ChipsInput/ChipInputField.js CHANGED Viewed

@@ -49,7 +49,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * */
   React.useEffect(function () {
-    if (inputRef.current && document.activeElement === inputRef.current) {
+    if (inputRef.current) {
       inputRef.current.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'

package/dist/ChipsInput/ChipInputField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large \| Size.Medium \| Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' \| 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /*\n Scroll container to last item on change\n * /\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /\n Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current \|\| (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType \|\| ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled \|\| disabled}\n variant={chip.variant \|\| 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder \|\| '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.js"}
1	+ {"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus, button:focus {\n outline-offset: -4px !important;\n }\n`;\n\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within, :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.warning,\n &.warning:hover,\n &.warning:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n }\n\n &.error,\n &.error:hover,\n &.error:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large \| Size.Medium \| Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationType?: 'error' \| 'warning';\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationType,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required\n }, ref) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n /*\n Scroll container to last item on change\n * /\n React.useEffect(() => {\n if (inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /\n Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n if (!containerRef.current \|\| (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationType \|\| ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper>\n <ChipInputContainer ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled \|\| disabled}\n variant={chip.variant \|\| 'normal'}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}/>\n ))}\n <ChipInputBoundItems>\n <ChipInputEl ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={e => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : (altPlaceholder \|\| '')}\n onClick={e => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}/>\n {\n inputValue && !disabled &&\n <IconButton action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n }\n\n {loading &&\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n }\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n});\n"],"file":"ChipInputField.js"}

package/dist/Popover/Popover.cjs ADDED Viewed

@@ -0,0 +1,249 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+var _Button = require("../Button");
+var _icons = require("../icons");
+var _styles = require("../styles");
+var _types = require("../types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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); }
+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; }
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    height: 16px;\n    width: 16px;\n    content: \"\";\n    position: absolute;\n    background: ", ";\n\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
+  return props.size === _types.Size.Small ? '240px' : props.size === _types.Size.Large ? '480px' : '360px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
+}, _.COLORS.white, _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, function (props) {
+  return props.position == 'bottom' ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.position == 'top' ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.position == 'left' ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.position == 'right' ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
+}, _.COLORS.white, function (props) {
+  return props.position == 'bottom' ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
+}, function (props) {
+  return props.position == 'top' ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
+}, function (props) {
+  return props.position == 'left' ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
+}, function (props) {
+  return props.position == 'right' ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
+});
+var TopContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n"])), function (props) {
+  return props.size === _types.Size.Small ? '56px' : props.size === _types.Size.Large ? '72px' : '64px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
+});
+var MiddleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
+  return props.size === _types.Size.Small ? '104px' : props.size === _types.Size.Large ? '304px' : '208px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '312px' : props.size === _types.Size.Large ? '576px' : '424px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '8px 16px' : props.size === _types.Size.Large ? '8px 24px' : '8px 20px';
+}, function (props) {
+  return (0, _styles.scrollBarStyling)(props.size === _types.Size.Small ? _types.Size.Small : _types.Size.Medium);
+});
+var BottomContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
+  return props.size === _types.Size.Small ? '64px' : props.size === _types.Size.Large ? '88px' : '72px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
+});
+var TextContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) {
+  return renderMargins(props.note, props.size);
+});
+var NoteContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
+  return props.size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : props.size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600);
+});
+var LabelContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
+  return props.size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Bold, null) : props.size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_.ComponentTextStyle.Bold, null) : (0, _styles.ComponentMStyling)(_.ComponentTextStyle.Bold, null);
+});
+var CloseButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n"])), function (props) {
+  return props.size === _types.Size.Small ? '4px 16px 4px 0' : props.size === _types.Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
+});
+var TextButtonContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n"])), function (props) {
+  return props.size === _types.Size.Small ? '8px 0 8px 16px' : props.size === _types.Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
+});
+var IconButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  display: flex;\n"])), function (props) {
+  return props.size === _types.Size.Small ? '8px 16px 8px 0' : props.size === _types.Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
+});
+var Wrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), function (props) {
+  return props.position === 'top' || props.position === 'bottom' ? '8px' : '100%';
+}, function (props) {
+  return props.position === 'left' || props.position === 'right' ? '8px' : '100%';
+}, function (props) {
+  return props.position === 'left' ? 'right:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.position === 'right' ? 'left:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.position === 'top' ? 'bottom: 100%' : '';
+}, function (props) {
+  return props.position === 'bottom' ? 'top: 100%' : '';
+}, function (props) {
+  return props.showOnClick ? "".concat(Container, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(Container, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
+});
+var renderMargins = function renderMargins(isNotePresent, size) {
+  if (isNotePresent) {
+    return size === _types.Size.Small ? '10px 16px' : size === _types.Size.Large ? '14px 24px' : '12px 20px';
+  } else {
+    return size === _types.Size.Small ? '18px 16px' : size === _types.Size.Large ? '24px' : '20px';
+  }
+};
+var Popover = function Popover(_ref) {
+  var _bottomSectionProps$t, _bottomSectionProps$i;
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      topSectionProps = _ref.topSectionProps,
+      bottomSectionProps = _ref.bottomSectionProps,
+      mainContent = _ref.mainContent,
+      children = _ref.children,
+      position = _ref.position,
+      _ref$showOnClick = _ref.showOnClick,
+      showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick;
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      showPopover = _React$useState2[0],
+      setShowPopover = _React$useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    position: position,
+    showOnClick: showOnClick,
+    showPopover: showPopover,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      size: size,
+      position: position,
+      children: [!!topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TopContainer, {
+        size: size,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
+          note: !!(topSectionProps !== null && topSectionProps !== void 0 && topSectionProps.note),
+          size: size,
+          children: [(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteContainer, {
+            size: size,
+            children: topSectionProps.note
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelContainer, {
+            size: size,
+            children: topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text
+          })]
+        }), showOnClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButtonContainer, {
+          size: size,
+          "data-testid": 'closeBtn',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            action: function action() {
+              return setShowPopover(false);
+            },
+            useTransparentBackground: true,
+            iconColor: _.COLORS.neutral_600,
+            variant: "secondary",
+            shape: "circular",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {})
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MiddleContainer, {
+        size: size,
+        children: mainContent
+      }), !!bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomContainer, {
+        size: size,
+        children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextButtonContainer, {
+          size: size,
+          "data-testid": 'textBtn',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            size: size,
+            variant: "secondary",
+            icon: bottomSectionProps.textButton.icon,
+            onClick: bottomSectionProps.textButton.action,
+            children: bottomSectionProps.textButton.label
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "bottom-flex"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContainer, {
+          size: size,
+          "data-testid": 'iconBtn',
+          children: bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(function (iconButton) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+              action: iconButton.action,
+              variant: "secondary",
+              shape: "circular",
+              useTransparentBackground: true,
+              children: iconButton.icon
+            });
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      onClick: function onClick() {
+        return showOnClick && setShowPopover(!showPopover);
+      },
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "pointer-space"
+      })]
+    })]
+  });
+};
+Popover.propTypes = {
+  topSectionProps: _propTypes.default.shape({
+    text: _propTypes.default.string.isRequired,
+    note: _propTypes.default.string
+  }),
+  bottomSectionProps: _propTypes.default.shape({
+    iconButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
+      icon: _propTypes.default.node.isRequired,
+      action: _propTypes.default.func.isRequired,
+      label: _propTypes.default.string
+    })),
+    textButton: _propTypes.default.shape({
+      icon: _propTypes.default.node.isRequired,
+      action: _propTypes.default.func.isRequired,
+      label: _propTypes.default.string
+    })
+  }),
+  mainContent: _propTypes.default.node.isRequired,
+  children: _propTypes.default.node.isRequired,
+  position: _propTypes.default.oneOf(['top', 'bottom', 'right', 'left']).isRequired,
+  showOnClick: _propTypes.default.bool.isRequired
+};
+var _default = Popover;
+exports.default = _default;
+//# sourceMappingURL=Popover.cjs.map

package/dist/Popover/Popover.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","TopContainer","MiddleContainer","Medium","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: string}>`\n height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n border-radius: 4px;\n background: ${COLORS.white};\n cursor: default;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n position: absolute; \n visibility: hidden;\n opacity: 0;\n z-index: ${Z_INDEXES.popover};\n\n ${props => (props.position == 'bottom' ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '')}\n ${props => (props.position == 'top' ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ${COLORS.white};\n\n ${props => (props.position == 'bottom' ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n ${props => (props.position == 'top' ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n padding: ${props=>props.size===Size.Small ? '8px 16px' : (props.size===Size.Large ? '8px 24px' : '8px 20px')};\n overflow-y: auto;\n ${props=>scrollBarStyling(props.size===Size.Small?Size.Small:Size.Medium)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n display: flex;\n flex-direction: column;\n margin: ${props=>renderMargins(props.note, props.size)};\n flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n display: flex;\n`;\n\nconst Wrapper = styled.div<{position: string, showOnClick: boolean, showPopover: boolean}>`\n position: relative;\n\n .pointer-space {\n height: ${props=>props.position==='top' || props.position==='bottom' ? '8px' : '100%'};\n width: ${props=>props.position==='left' || props.position==='right' ? '8px' : '100%'};\n position: absolute;\n\n ${props=>props.position==='left' ? 'right:100%; bottom: 0%' : ''};\n ${props=>props.position==='right' ? 'left:100%; bottom: 0%' : ''};\n\n ${props=>props.position==='top' ? 'bottom: 100%' : ''};\n ${props=>props.position==='bottom' ? 'top: 100%' : ''};\n }\n\n ${props=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\n }`\n }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n if(isNotePresent){\n return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n }\n else{\n return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n }\n}\n\ntype topSectionProps = {\n text: string;\n note?: string;\n}\n\ntype actionButtonProps = {\n icon: React.ReactNode;\n action: ()=>void;\n label?: string;\n}\n\ntype bottomSectionProps = {\n iconButtons?: actionButtonProps[];\n textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n topSectionProps?: topSectionProps;\n bottomSectionProps?: bottomSectionProps;\n mainContent: React.ReactNode;\n children: React.ReactNode;\n position: 'top' | 'bottom' | 'right' | 'left';\n showOnClick: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false\n}) => {\n\n const [showPopover, setShowPopover] = React.useState(false);\n\n return (\n <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n <Container size={size} position={position}>\n {!!topSectionProps && \n <TopContainer size={size}>\n <TextContainer note={!!topSectionProps?.note} size={size}>\n {topSectionProps?.note && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </LabelContainer>\n </TextContainer>\n\n {showOnClick && \n <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n <SystemIcons.Close />\n </IconButton>\n </CloseButtonContainer>\n }\n </TopContainer>\n }\n\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n\n {!!bottomSectionProps && \n <BottomContainer size={size}>\n {!!bottomSectionProps?.textButton?.icon && \n <TextButtonContainer size={size} data-testid={'textBtn'}>\n <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n {bottomSectionProps.textButton.label}\n </Button>\n </TextButtonContainer>\n }\n\n <div className='bottom-flex'/>\n \n <IconButtonContainer size={size} data-testid={'iconBtn'}>\n {bottomSectionProps?.iconButtons?.map((iconButton) =>\n \n <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n {iconButton.icon}\n </IconButton> \n )}\n </IconButtonContainer>\n </BottomContainer>\n }\n </Container>\n\n <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n {children}\n\n <div className='pointer-space'/>\n </div>\n\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}

package/dist/Popover/Popover.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Size } from '../types';
+declare type topSectionProps = {
+    text: string;
+    note?: string;
+};
+declare type actionButtonProps = {
+    icon: React.ReactNode;
+    action: () => void;
+    label?: string;
+};
+declare type bottomSectionProps = {
+    iconButtons?: actionButtonProps[];
+    textButton?: actionButtonProps;
+};
+declare type PopoverProps = {
+    size?: Size.Small | Size.Medium | Size.Large;
+    topSectionProps?: topSectionProps;
+    bottomSectionProps?: bottomSectionProps;
+    mainContent: React.ReactNode;
+    children: React.ReactNode;
+    position: 'top' | 'bottom' | 'right' | 'left';
+    showOnClick: boolean;
+};
+declare const Popover: React.FunctionComponent<PopoverProps>;
+export default Popover;

package/dist/Popover/Popover.js ADDED Viewed

@@ -0,0 +1,214 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
+import { Button, IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    height: 16px;\n    width: 16px;\n    content: \"\";\n    position: absolute;\n    background: ", ";\n\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
+  return props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px';
+}, function (props) {
+  return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
+}, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) {
+  return props.position == 'bottom' ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.position == 'top' ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
+}, function (props) {
+  return props.position == 'left' ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
+}, function (props) {
+  return props.position == 'right' ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
+}, COLORS.white, function (props) {
+  return props.position == 'bottom' ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
+}, function (props) {
+  return props.position == 'top' ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
+}, function (props) {
+  return props.position == 'left' ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
+}, function (props) {
+  return props.position == 'right' ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
+});
+var TopContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n"])), function (props) {
+  return props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px';
+}, function (props) {
+  return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
+});
+var MiddleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
+  return props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px';
+}, function (props) {
+  return props.size === Size.Small ? '312px' : props.size === Size.Large ? '576px' : '424px';
+}, function (props) {
+  return props.size === Size.Small ? '8px 16px' : props.size === Size.Large ? '8px 24px' : '8px 20px';
+}, function (props) {
+  return scrollBarStyling(props.size === Size.Small ? Size.Small : Size.Medium);
+});
+var BottomContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
+  return props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px';
+}, function (props) {
+  return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
+});
+var TextContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) {
+  return renderMargins(props.note, props.size);
+});
+var NoteContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : props.size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600);
+});
+var LabelContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null);
+});
+var CloseButtonContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
+});
+var TextButtonContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
+});
+var IconButtonContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: ", ";\n  display: flex;\n"])), function (props) {
+  return props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
+});
+var Wrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), function (props) {
+  return props.position === 'top' || props.position === 'bottom' ? '8px' : '100%';
+}, function (props) {
+  return props.position === 'left' || props.position === 'right' ? '8px' : '100%';
+}, function (props) {
+  return props.position === 'left' ? 'right:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.position === 'right' ? 'left:100%; bottom: 0%' : '';
+}, function (props) {
+  return props.position === 'top' ? 'bottom: 100%' : '';
+}, function (props) {
+  return props.position === 'bottom' ? 'top: 100%' : '';
+}, function (props) {
+  return props.showOnClick ? "".concat(Container, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(Container, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
+});
+var renderMargins = function renderMargins(isNotePresent, size) {
+  if (isNotePresent) {
+    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
+  } else {
+    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';
+  }
+};
+var Popover = function Popover(_ref) {
+  var _bottomSectionProps$t, _bottomSectionProps$i;
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
+      topSectionProps = _ref.topSectionProps,
+      bottomSectionProps = _ref.bottomSectionProps,
+      mainContent = _ref.mainContent,
+      children = _ref.children,
+      position = _ref.position,
+      _ref$showOnClick = _ref.showOnClick,
+      showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick;
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showPopover = _React$useState2[0],
+      setShowPopover = _React$useState2[1];
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    position: position,
+    showOnClick: showOnClick,
+    showPopover: showPopover,
+    children: [/*#__PURE__*/_jsxs(Container, {
+      size: size,
+      position: position,
+      children: [!!topSectionProps && /*#__PURE__*/_jsxs(TopContainer, {
+        size: size,
+        children: [/*#__PURE__*/_jsxs(TextContainer, {
+          note: !!(topSectionProps !== null && topSectionProps !== void 0 && topSectionProps.note),
+          size: size,
+          children: [(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && /*#__PURE__*/_jsx(NoteContainer, {
+            size: size,
+            children: topSectionProps.note
+          }), /*#__PURE__*/_jsx(LabelContainer, {
+            size: size,
+            children: topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text
+          })]
+        }), showOnClick && /*#__PURE__*/_jsx(CloseButtonContainer, {
+          size: size,
+          "data-testid": 'closeBtn',
+          children: /*#__PURE__*/_jsx(IconButton, {
+            action: function action() {
+              return setShowPopover(false);
+            },
+            useTransparentBackground: true,
+            iconColor: COLORS.neutral_600,
+            variant: "secondary",
+            shape: "circular",
+            children: /*#__PURE__*/_jsx(SystemIcons.Close, {})
+          })
+        })]
+      }), /*#__PURE__*/_jsx(MiddleContainer, {
+        size: size,
+        children: mainContent
+      }), !!bottomSectionProps && /*#__PURE__*/_jsxs(BottomContainer, {
+        size: size,
+        children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/_jsx(TextButtonContainer, {
+          size: size,
+          "data-testid": 'textBtn',
+          children: /*#__PURE__*/_jsx(Button, {
+            size: size,
+            variant: "secondary",
+            icon: bottomSectionProps.textButton.icon,
+            onClick: bottomSectionProps.textButton.action,
+            children: bottomSectionProps.textButton.label
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "bottom-flex"
+        }), /*#__PURE__*/_jsx(IconButtonContainer, {
+          size: size,
+          "data-testid": 'iconBtn',
+          children: bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(function (iconButton) {
+            return /*#__PURE__*/_jsx(IconButton, {
+              action: iconButton.action,
+              variant: "secondary",
+              shape: "circular",
+              useTransparentBackground: true,
+              children: iconButton.icon
+            });
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      onClick: function onClick() {
+        return showOnClick && setShowPopover(!showPopover);
+      },
+      children: [children, /*#__PURE__*/_jsx("div", {
+        className: "pointer-space"
+      })]
+    })]
+  });
+};
+Popover.propTypes = {
+  topSectionProps: _pt.shape({
+    text: _pt.string.isRequired,
+    note: _pt.string
+  }),
+  bottomSectionProps: _pt.shape({
+    iconButtons: _pt.arrayOf(_pt.shape({
+      icon: _pt.node.isRequired,
+      action: _pt.func.isRequired,
+      label: _pt.string
+    })),
+    textButton: _pt.shape({
+      icon: _pt.node.isRequired,
+      action: _pt.func.isRequired,
+      label: _pt.string
+    })
+  }),
+  mainContent: _pt.node.isRequired,
+  children: _pt.node.isRequired,
+  position: _pt.oneOf(['top', 'bottom', 'right', 'left']).isRequired,
+  showOnClick: _pt.bool.isRequired
+};
+export default Popover;
+//# sourceMappingURL=Popover.js.map

package/dist/Popover/Popover.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","TopContainer","MiddleContainer","Medium","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: string}>`\n height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n border-radius: 4px;\n background: ${COLORS.white};\n cursor: default;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n position: absolute; \n visibility: hidden;\n opacity: 0;\n z-index: ${Z_INDEXES.popover};\n\n ${props => (props.position == 'bottom' ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '')}\n ${props => (props.position == 'top' ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ${COLORS.white};\n\n ${props => (props.position == 'bottom' ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n ${props => (props.position == 'top' ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n padding: ${props=>props.size===Size.Small ? '8px 16px' : (props.size===Size.Large ? '8px 24px' : '8px 20px')};\n overflow-y: auto;\n ${props=>scrollBarStyling(props.size===Size.Small?Size.Small:Size.Medium)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n display: flex;\n flex-direction: column;\n margin: ${props=>renderMargins(props.note, props.size)};\n flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n display: flex;\n`;\n\nconst Wrapper = styled.div<{position: string, showOnClick: boolean, showPopover: boolean}>`\n position: relative;\n\n .pointer-space {\n height: ${props=>props.position==='top' || props.position==='bottom' ? '8px' : '100%'};\n width: ${props=>props.position==='left' || props.position==='right' ? '8px' : '100%'};\n position: absolute;\n\n ${props=>props.position==='left' ? 'right:100%; bottom: 0%' : ''};\n ${props=>props.position==='right' ? 'left:100%; bottom: 0%' : ''};\n\n ${props=>props.position==='top' ? 'bottom: 100%' : ''};\n ${props=>props.position==='bottom' ? 'top: 100%' : ''};\n }\n\n ${props=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\n }`\n }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n if(isNotePresent){\n return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n }\n else{\n return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n }\n}\n\ntype topSectionProps = {\n text: string;\n note?: string;\n}\n\ntype actionButtonProps = {\n icon: React.ReactNode;\n action: ()=>void;\n label?: string;\n}\n\ntype bottomSectionProps = {\n iconButtons?: actionButtonProps[];\n textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n topSectionProps?: topSectionProps;\n bottomSectionProps?: bottomSectionProps;\n mainContent: React.ReactNode;\n children: React.ReactNode;\n position: 'top' | 'bottom' | 'right' | 'left';\n showOnClick: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false\n}) => {\n\n const [showPopover, setShowPopover] = React.useState(false);\n\n return (\n <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n <Container size={size} position={position}>\n {!!topSectionProps && \n <TopContainer size={size}>\n <TextContainer note={!!topSectionProps?.note} size={size}>\n {topSectionProps?.note && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </LabelContainer>\n </TextContainer>\n\n {showOnClick && \n <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n <SystemIcons.Close />\n </IconButton>\n </CloseButtonContainer>\n }\n </TopContainer>\n }\n\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n\n {!!bottomSectionProps && \n <BottomContainer size={size}>\n {!!bottomSectionProps?.textButton?.icon && \n <TextButtonContainer size={size} data-testid={'textBtn'}>\n <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n {bottomSectionProps.textButton.label}\n </Button>\n </TextButtonContainer>\n }\n\n <div className='bottom-flex'/>\n \n <IconButtonContainer size={size} data-testid={'iconBtn'}>\n {bottomSectionProps?.iconButtons?.map((iconButton) =>\n \n <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n {iconButton.icon}\n </IconButton> \n )}\n </IconButtonContainer>\n </BottomContainer>\n }\n </Container>\n\n <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n {children}\n\n <div className='pointer-space'/>\n </div>\n\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.js"}

package/dist/Popover/index.cjs ADDED Viewed

@@ -0,0 +1,16 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _Popover.default;
+  }
+});
+var _Popover = _interopRequireDefault(require("./Popover"));
+//# sourceMappingURL=index.cjs.map

package/dist/Popover/index.cjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../../src/Popover/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Popover } from './Popover';"],"file":"index.cjs"}

package/dist/Popover/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as Popover } from './Popover';

package/dist/Popover/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Popover } from './Popover';
2	+ //# sourceMappingURL=index.js.map

package/dist/Popover/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../../src/Popover/index.ts"],"names":["default","Popover"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC","sourcesContent":["export { default as Popover } from './Popover';"],"file":"index.js"}

package/dist/index.cjs CHANGED Viewed

@@ -560,4 +560,18 @@ Object.keys(_Tile).forEach(function (key) {
 });
 var _assets = require("./assets");
+var _Popover = require("./Popover");
+Object.keys(_Popover).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Popover[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Popover[key];
+    }
+  });
+});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA","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 './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.cjs"}
1	+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;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 './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport {LaerdalLogo} from './assets';\nexport * from './Popover';"],"file":"index.cjs"}

package/dist/index.d.ts CHANGED Viewed

@@ -38,3 +38,4 @@ export * from './Image';
 export * from './ChipsInput';
 export * from './Tile';
 export { LaerdalLogo } from './assets';
+export * from './Popover';

package/dist/index.js CHANGED Viewed

@@ -38,4 +38,5 @@ export * from './Image';
 export * from './ChipsInput';
 export * from './Tile';
 export { LaerdalLogo } from './assets';
+export * from './Popover';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"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,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B","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 './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.js"}
1	+ {"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"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,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B;AACA,cAAc,WAAd","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 './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport {LaerdalLogo} from './assets';\nexport * from './Popover';"],"file":"index.js"}

package/dist/styles/z-indexes.cjs CHANGED Viewed

@@ -16,7 +16,8 @@ var Z_INDEXES = {
   off_canvas: '1050',
   modal: '1060',
   toast: '1070',
-  tooltip: '1080'
+  tooltip: '1080',
+  popover: '1070'
 };
 exports.Z_INDEXES = Z_INDEXES;
 //# sourceMappingURL=z-indexes.cjs.map

package/dist/styles/z-indexes.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","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;AAKvBC,EAAAA,KAAK,EAAE,IALgB;AAQvBC,EAAAA,QAAQ,EAAE,MARa;AASvBC,EAAAA,WAAW,EAAE,MATU;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,QAAQ,EAAE,MAXa;AAYvBC,EAAAA,UAAU,EAAE,MAZW;AAavBC,EAAAA,KAAK,EAAE,MAbgB;AAcvBC,EAAAA,KAAK,EAAE,MAdgB;AAevBC,EAAAA,OAAO,EAAE;~~AAfc~~,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n badge: '10',\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.cjs"}
1	+ {"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip","popover"],"mappings":";;;;;;AAAO,IAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAKvBC,EAAAA,KAAK,EAAE,IALgB;AAQvBC,EAAAA,QAAQ,EAAE,MARa;AASvBC,EAAAA,WAAW,EAAE,MATU;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,QAAQ,EAAE,MAXa;AAYvBC,EAAAA,UAAU,EAAE,MAZW;AAavBC,EAAAA,KAAK,EAAE,MAbgB;AAcvBC,EAAAA,KAAK,EAAE,MAdgB;AAevBC,EAAAA,OAAO,EAAE,MAfc;AAgBvBC,EAAAA,OAAO,EAAE;AAhBc,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n badge: '10',\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 popover: '1070'\n}\n"],"file":"z-indexes.cjs"}

package/dist/styles/z-indexes.d.ts CHANGED Viewed

@@ -11,4 +11,5 @@ export declare const Z_INDEXES: {
     modal: string;
     toast: string;
     tooltip: string;
+    popover: string;
 };

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

@@ -10,6 +10,7 @@ export var Z_INDEXES = {
   off_canvas: '1050',
   modal: '1060',
   toast: '1070',
-  tooltip: '1080'
+  tooltip: '1080',
+  popover: '1070'
 };
 //# sourceMappingURL=z-indexes.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAKvBC,EAAAA,KAAK,EAAE,IALgB;AAQvBC,EAAAA,QAAQ,EAAE,MARa;AASvBC,EAAAA,WAAW,EAAE,MATU;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,QAAQ,EAAE,MAXa;AAYvBC,EAAAA,UAAU,EAAE,MAZW;AAavBC,EAAAA,KAAK,EAAE,MAbgB;AAcvBC,EAAAA,KAAK,EAAE,MAdgB;AAevBC,EAAAA,OAAO,EAAE;~~AAfc~~,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n badge: '10',\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"}
1	+ {"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip","popover"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAKvBC,EAAAA,KAAK,EAAE,IALgB;AAQvBC,EAAAA,QAAQ,EAAE,MARa;AASvBC,EAAAA,WAAW,EAAE,MATU;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,QAAQ,EAAE,MAXa;AAYvBC,EAAAA,UAAU,EAAE,MAZW;AAavBC,EAAAA,KAAK,EAAE,MAbgB;AAcvBC,EAAAA,KAAK,EAAE,MAdgB;AAevBC,EAAAA,OAAO,EAAE,MAfc;AAgBvBC,EAAAA,OAAO,EAAE;AAhBc,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n badge: '10',\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 popover: '1070'\n}\n"],"file":"z-indexes.js"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.8.0-dev.8",
+  "version": "1.8.0-dev.9",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [